Merge branch 'master' of http://git.cc-lotus.info/service-platform/web-test into master

src/components/parts/chat.vue

@@ -133,15 +133,15 @@ export default {
       // let object = { content, contenttype, sendid, sendname, icon, groupid, sendtime, type };
       // this.list.push(object);
     },
-    enterListen() {
-      var lett = this;
-      document.onkeydown = function(e) {
-        var key = window.event.keyCode;
-        if (key == 13) {
-          lett.send();
-        }
-      };
-    },
+    // enterListen() {
+    //   var lett = this;
+    //   document.onkeydown = function(e) {
+    //     var key = window.event.keyCode;
+    //     if (key == 13) {
+    //       lett.send();
+    //     }
+    //   };
+    // },
   },
   filters: {
     getTime(date) {

src/views/halltwo/directTwo.vue

@@ -113,23 +113,89 @@
             </el-col>
             <el-col :span="24" class="three3">
               <el-col :span="12" class="left">
-                左側
+                <el-col :span="24" class="lefttop">
+                  <el-tabs v-model="achieveName">
+                    <el-tab-pane label="技术成果" name="first">
+                      <achieve :list="achieveoneList"></achieve>
+                    </el-tab-pane>
+                    <el-tab-pane label="电子信息技术" name="second">
+                      <achieve :list="achievetwoList"></achieve>
+                    </el-tab-pane>
+                    <el-tab-pane label="生物与新医学技术" name="third">
+                      <achieve :list="achievethreeList"></achieve>
+                    </el-tab-pane>
+                    <el-tab-pane label="航空航天技术" name="fourth">
+                      <achieve :list="achievefourList"></achieve>
+                    </el-tab-pane>
+                  </el-tabs>
+                  <el-link :underline="false" class="more">更多></el-link>
+                </el-col>
+                <el-col :span="24" class="leftbtn">
+                  <el-button>查看所有项目</el-button>
+                </el-col>
               </el-col>
               <el-col :span="12" class="right">
-                右側
+                <el-col :span="24" class="lefttop">
+                  <el-tabs v-model="techolName">
+                    <el-tab-pane label="科技需求" name="first">
+                      <achieve :list="techoloneList"></achieve>
+                    </el-tab-pane>
+                    <el-tab-pane label="新材料技术" name="second">
+                      <achieve :list="techoltwoList"></achieve>
+                    </el-tab-pane>
+                    <el-tab-pane label="高技术服务业" name="third">
+                      <achieve :list="techolthreeList"></achieve>
+                    </el-tab-pane>
+                    <el-tab-pane label="新能源及节能技术" name="fourth">
+                      <achieve :list="techolfourList"></achieve>
+                    </el-tab-pane>
+                  </el-tabs>
+                  <el-link :underline="false" class="more">更多></el-link>
+                </el-col>
+                <el-col :span="24" class="leftbtn">
+                  <el-button>查看所有需求</el-button>
+                </el-col>
               </el-col>
             </el-col>
             <el-col :span="24" class="three4">
               <advert :list="adveronetlist"></advert>
             </el-col>
             <el-col :span="24" class="three5">
-              高校
+              <el-col :span="24" class="top">
+                <el-col :span="20" class="left">
+                  <p><el-image :src="school"></el-image> <span>高校院所</span></p>
+                </el-col>
+                <el-col :span="4" class="right">
+                  <el-link :underline="false">更多></el-link>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="down">
+                <el-col :span="5" class="schoolList" v-for="(item, index) in schoolList" :key="index">
+                  <el-col :span="24" class="image">
+                    <el-image :src="item.url"></el-image>
+                    <p>{{ item.name }}</p>
+                  </el-col>
+                  <el-col :span="24" class="btn">
+                    <el-col :span="12" class="txt1">
+                      <el-button type="primary" size="mini">对接</el-button>
+                    </el-col>
+                    <el-col :span="12" class="txt2">
+                      查看院校项目
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </el-col>
             </el-col>
             <el-col :span="24" class="three6">
               <advert :list="adveronetlist"></advert>
             </el-col>
             <el-col :span="24" class="three7">
-              专家
+              <el-col :span="12" class="left">
+                <expert :list="expertList"></expert>
+              </el-col>
+              <el-col :span="12" class="right">
+                <dockchat></dockchat>
+              </el-col>
             </el-col>
             <el-col :span="24" class="three8">
               技术
@@ -149,6 +215,13 @@
 import trainlist from './parts/trainlist.vue';
 // 广告位
 import advert from './parts/advert.vue';
+// 成果列表
+import achieve from './parts/achieve.vue';
+// 技术专家
+import expert from './parts/expert.vue';
+// 公共聊天
+import dockchat from './parts/dockchat.vue';
+
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: dock } = createNamespacedHelpers('dock');
 export default {
@@ -162,6 +235,12 @@ export default {
     trainlist,
     // 广告位
     advert,
+    // 成果列表
+    achieve,
+    // 技术专家
+    expert,
+    // 公共聊天
+    dockchat,
   },
   data: function() {
     return {
@@ -188,6 +267,172 @@ export default {
           url: require('@a/advert2.png'),
         },
       ],
+      // 技术成果项目
+      achieveName: 'first',
+      // 全部
+      achieveoneList: [
+        {
+          name: '测试技术成果',
+          field: '生物与新医学技术',
+        },
+        {
+          name: '九条数据',
+          field: '生物与新医学技术',
+        },
+      ],
+      // 电子信息技术
+      achievetwoList: [
+        {
+          name: '测试技术成果',
+          field: '电子信息技术',
+        },
+        {
+          name: '九条数据',
+          field: '电子信息技术',
+        },
+      ],
+      // 生物与新医学技术
+      achievethreeList: [
+        {
+          name: '测试技术成果',
+          field: '生物与新医学技术',
+        },
+        {
+          name: '九条数据',
+          field: '生物与新医学技术',
+        },
+      ],
+      // 航空航天技术
+      achievefourList: [
+        {
+          name: '测试技术成果',
+          field: '航空航天技术',
+        },
+        {
+          name: '九条数据',
+          field: '航空航天技术',
+        },
+      ],
+      // 科技需求
+      techolName: 'first',
+      techoloneList: [
+        {
+          name: '测试技术成果',
+          field: '新材料技术',
+        },
+        {
+          name: '九条数据',
+          field: '新材料技术',
+        },
+      ],
+      // 新材料技术
+      techoltwoList: [
+        {
+          name: '科技需求',
+          field: '新材料技术',
+        },
+        {
+          name: '九条数据',
+          field: '新材料技术',
+        },
+      ],
+      // 高技术服务业
+      techolthreeList: [
+        {
+          name: '科技需求',
+          field: '高技术服务业',
+        },
+        {
+          name: '九条数据',
+          field: '高技术服务业',
+        },
+      ],
+      // 新能源及节能技术
+      techolfourList: [
+        {
+          name: '科技需求',
+          field: '新能源及节能技术',
+        },
+        {
+          name: '九条数据',
+          field: '新能源及节能技术',
+        },
+      ],
+      // 高校院所
+      school: require('@a/zh_12.png'),
+      schoolList: [
+        {
+          url: require('@a/school1.png'),
+          name: '吉林省农业机械研究院',
+        },
+        {
+          url: require('@a/school2.jpg'),
+          name: '吉林工程技术师范学院',
+        },
+        {
+          url: require('@a/school3.jpg'),
+          name: '吉林农业大学',
+        },
+        {
+          url: require('@a/school4.jpg'),
+          name: '中国科学院东北地理与农业生态研究所',
+        },
+        {
+          url: require('@a/school5.jpg'),
+          name: '中科院长春光机所',
+        },
+        {
+          url: require('@a/school6.jpg'),
+          name: '中科院长春应化所',
+        },
+        {
+          url: require('@a/school7.jpg'),
+          name: '中科院长春分院',
+        },
+        {
+          url: require('@a/school8.jpg'),
+          name: '长春大学',
+        },
+        {
+          url: require('@a/school9.jpg'),
+          name: '吉林大学',
+        },
+        {
+          url: require('@a/school10.jpg'),
+          name: '长春理工大学',
+        },
+        {
+          url: require('@a/school11.jpg'),
+          name: '长春工业大学',
+        },
+        {
+          url: require('@a/school12.jpg'),
+          name: '东北师范大学',
+        },
+        {
+          url: require('@a/school13.jpg'),
+          name: '长春工程学院',
+        },
+      ],
+      // 技术专家
+      expertList: [
+        {
+          url: require('@a/expert1.png'),
+          name: '不知道',
+        },
+        {
+          url: require('@a/expert1.png'),
+          name: '不知道',
+        },
+        {
+          url: require('@a/expert1.png'),
+          name: '不知道',
+        },
+        {
+          url: require('@a/expert1.png'),
+          name: '不知道',
+        },
+      ],
     };
   },
   async created() {
@@ -423,20 +668,73 @@ export default {
     }
     .three3 {
       height: 440px;
-      // border: 1px solid red;
       margin: 0 0 50px 0;
       .left {
+        position: relative;
         width: 49%;
         height: 440px;
         margin: 0 15px 0 0;
         border-radius: 10px;
         box-shadow: 0 5px 15px rgba(33, 82, 203, 0.35);
+        padding: 0 10px;
+        .lefttop {
+          height: 415px;
+          .more {
+            position: absolute;
+            right: 10px;
+            top: 11px;
+          }
+        }
+        .leftbtn {
+          text-align: center;
+          .el-button {
+            background: #2152cb;
+            color: #fff;
+            padding: 10px 20px;
+          }
+        }
       }
       .right {
+        position: relative;
         width: 49%;
         height: 440px;
         border-radius: 10px;
         box-shadow: 0 5px 15px rgba(33, 82, 203, 0.35);
+        padding: 0 10px;
+        .lefttop {
+          height: 415px;
+          .more {
+            position: absolute;
+            right: 10px;
+            top: 11px;
+          }
+        }
+        .leftbtn {
+          text-align: center;
+          .el-button {
+            background: #2152cb;
+            color: #fff;
+            padding: 10px 20px;
+          }
+        }
+      }
+      /deep/.el-tabs__header {
+        margin: 0;
+      }
+      /deep/.el-tabs__item.is-active {
+        color: #2454cb;
+      }
+      /deep/.el-tabs__active-bar {
+        background-color: #2454cb;
+      }
+      /deep/ .el-tabs__item:hover {
+        color: #2454cb;
+      }
+      /deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+        padding-left: 20px;
+      }
+      /deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
+        padding-right: 20px;
       }
     }
     .three4 {
@@ -445,8 +743,77 @@ export default {
     }
     .three5 {
       height: 340px;
-      border: 1px solid red;
       margin: 0 0 50px 0;
+      .top {
+        height: 62px;
+        background-color: #ccc;
+        margin: 0 0 30px 0;
+        .left {
+          height: 62px;
+          padding: 0 15px;
+          p {
+            height: 43px;
+            border-bottom: 8px solid #2152cb;
+            width: 12%;
+            padding: 10px 0 0 0;
+            span {
+              display: inline-block;
+              position: relative;
+              left: 6px;
+              top: -5px;
+              font-size: 18px;
+              color: #2152cb;
+            }
+          }
+        }
+        .right {
+          height: 62px;
+          line-height: 62px;
+          text-align: right;
+          padding: 0 10px;
+        }
+      }
+      .down {
+        height: 225px;
+        overflow: hidden;
+        .schoolList {
+          width: 204px;
+          height: 225px;
+          margin: 0 30px 0 0;
+          text-align: center;
+          .image {
+            height: 183px;
+            border: 1px solid #ccc;
+            margin: 0 0 10px 0;
+            .el-image {
+              width: 130px;
+              margin: 10px 0 0 0;
+            }
+            p {
+              font-size: 14px;
+              color: #2152cb;
+              text-align: center;
+            }
+          }
+          .btn {
+            height: 30px;
+            line-height: 30px;
+            .txt1 {
+              text-align: left;
+            }
+            .txt2 {
+              text-align: right;
+              font-size: 14px;
+            }
+          }
+        }
+        .schoolList:hover {
+          cursor: pointer;
+          .image {
+            box-shadow: 0 0 5px #ccc;
+          }
+        }
+      }
     }
     .three6 {
       height: 85px;
@@ -454,8 +821,22 @@ export default {
     }
     .three7 {
       height: 440px;
-      border: 1px solid red;
       margin: 0 0 50px 0;
+      .left {
+        position: relative;
+        width: 49%;
+        height: 440px;
+        margin: 0 15px 0 0;
+        border-radius: 10px;
+        box-shadow: 0 10px 10px rgba(127, 126, 126, 0.3);
+      }
+      .right {
+        position: relative;
+        width: 49%;
+        height: 440px;
+        border-radius: 10px;
+        box-shadow: 0 10px 10px rgba(127, 126, 126, 0.3);
+      }
     }
     .three8 {
       min-height: 110px;

src/views/halltwo/parts/achieve.vue

@@ -0,0 +1,71 @@
+<template>
+  <div id="achieve">
+    <el-row>
+      <el-col :span="24" class="achieve">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="15" class="name textOver"> >{{ item.name }} </el-col>
+          <el-col :span="6" class="brief textOver">
+            {{ item.field }}
+          </el-col>
+          <el-col :span="3" class="btn">
+            <el-button type="primary" size="mini">对接</el-button>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'achieve',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {
+      icon: require('@a/sy_07.png'),
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.achieve {
+  height: 390px;
+  overflow: hidden;
+  .list {
+    padding: 9px 0;
+    border-bottom: 1px dashed #ccc;
+    .name {
+      font-size: 14px;
+      padding: 4px 0;
+    }
+    .brief {
+      font-size: 14px;
+      text-align: center;
+      background: #77ccd3;
+      padding: 3px 5px;
+      border-radius: 5px;
+      color: #fff;
+    }
+    .btn {
+      text-align: right;
+    }
+  }
+  .list:hover {
+    cursor: pointer;
+    .name {
+      color: blue;
+    }
+  }
+}
+</style>

src/views/halltwo/parts/dockchat.vue

@@ -0,0 +1,160 @@
+<template>
+  <div id="dockchat">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-col :span="15" class="left">
+            公共聊天
+          </el-col>
+          <el-col :span="9" class="right">
+            <p>
+              <el-image :src="zh1"></el-image>
+              <span>发贺信</span>
+            </p>
+            <p>
+              <el-image :src="zh2"></el-image>
+              <span>送鲜花</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="down">
+          <el-col :span="24" class="list">
+            <p v-for="(i, index) in list" :key="index">
+              <span>[{{ getTime(i.send_time) }}]</span>
+              <span style="font-weight: bold;" :class="i.role == '8' ? 'nameColor' : ''">{{ i.sender_name }}：</span>
+              <span v-if="!isEmotion(i.content)"> {{ i.content }}</span>
+              <span v-else v-html="i.content"> </span>
+            </p>
+          </el-col>
+          <el-col :span="24" class="btn">
+            <el-input v-model="text" size="mini" style="width: 90%;"></el-input>
+            <el-button @click="send" size="mini" round type="primary">发送</el-button>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: chat } = createNamespacedHelpers('chat');
+import _ from 'lodash';
+var moment = require('moment');
+export default {
+  name: 'dockchat',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      zh1: require('@a/zh_15.png'),
+      zh2: require('@a/zh_16.png'),
+      list: [],
+      text: '',
+      hand: require('@/assets/emotion/hand.gif'),
+      flower: require('@/assets/emotion/flower.gif'),
+      dock_id: '',
+    };
+  },
+  created() {
+    this.$set(this, 'dock_id', this.$route.query.id);
+    this.search();
+  },
+  mounted() {
+    this.channel();
+  },
+  methods: {
+    ...chat(['query', 'create']),
+    async search() {
+      const res = await this.query({ skip: 0, limit: 10, dock_id: this.dock_id });
+      if (this.$checkRes(res)) this.$set(this, `list`, _.reverse(res.data));
+    },
+    send() {
+      console.log(this.text);
+    },
+    isEmotion(word) {
+      // console.log(word.startsWith('<img'));
+      return word.startsWith('<img');
+    },
+    channel() {
+      this.$stomp({
+        [`/exchange/public_chat/${this.dock_id}`]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      let body = _.get(message, 'body');
+      if (body) {
+        body = JSON.parse(body);
+        this.list.push(body);
+        this.text = '';
+      }
+    },
+    // 处理时间
+    getTime(data) {
+      let time = moment(data).format('HH:mm:ss');
+      if (time) return time;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 45px;
+    line-height: 45px;
+    background-color: #e5e8eb;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    margin: 0 0 10px 0;
+    .left {
+      padding: 0 10px;
+      color: #2152cb;
+    }
+    .right {
+      p {
+        position: relative;
+        float: left;
+        width: 90px;
+        border-radius: 25px;
+        height: 30px;
+        margin: 8px 10px 0 0;
+        background: #f2f4f5;
+        .el-image {
+          width: 27px;
+          height: 27px;
+        }
+        span {
+          font-size: 12px;
+          display: inline-block;
+          width: 65%;
+          position: absolute;
+          top: -8px;
+          left: 35px;
+        }
+      }
+      p:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  .down {
+    padding: 0 10px;
+    .list {
+      height: 340px;
+      overflow-y: auto;
+      p {
+        padding: 10px 0;
+        border-bottom: 1px dashed #ccc;
+        span:nth-child(1) {
+          padding: 0 10px 0 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/halltwo/parts/expert.vue

@@ -0,0 +1,100 @@
+<template>
+  <div id="expert">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <span>技术专家</span>
+          <span>更多></span>
+        </el-col>
+        <el-col :span="24" class="down">
+          <el-col :span="12" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="12" class="image">
+              <el-image :src="item.url"></el-image>
+            </el-col>
+            <el-col :span="12" class="txt">
+              <p>{{ item.name }}</p>
+              <el-button type="primary" size="mini">对接</el-button>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'expert',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 45px;
+    line-height: 45px;
+    background-color: #ccc;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    margin: 0 0 30px 0;
+    span {
+      display: inline-block;
+      width: 46%;
+    }
+    span:nth-child(1) {
+      color: #2152cb;
+      padding: 0 10px;
+      font-size: 16px;
+    }
+    span:nth-child(2) {
+      font-size: 14px;
+      padding: 0 10px;
+      text-align: right;
+    }
+  }
+  .down {
+    padding: 0 10px;
+    .list {
+      margin: 0 10px 10px 0;
+      border-radius: 5px;
+      width: 49%;
+      height: 170px;
+      .image {
+        padding: 5px;
+        .el-image {
+          width: 100%;
+          height: 150px;
+          border-radius: 5px;
+        }
+      }
+      .txt {
+        padding: 10px;
+        p {
+          padding: 10px 0;
+        }
+      }
+    }
+    .list:nth-child(2n) {
+      margin: 0 0 10px 0;
+    }
+    .list:hover {
+      cursor: pointer;
+      box-shadow: 0 0 5px #ccc;
+    }
+  }
+}
+</style>