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

src/views/dynamic/index.vue

@@ -18,22 +18,44 @@
                 </el-col>
               </el-col>
               <el-col :span="8" class="center">
-                中间
+                <maps></maps>
               </el-col>
               <el-col :span="8" class="right">
-                右侧
+                <el-col :span="23" class="rightInfo">
+                  信息
+                </el-col>
+                <el-col :span="1" class="rightTit">
+                  <p></p>
+                  <p>数据展示</p>
+                </el-col>
               </el-col>
             </el-col>
             <el-col :span="24" class="top down">
               <span></span>
             </el-col>
           </el-col>
+          <el-col :span="24" class="dataImage">
+            <el-image :src="centerImage"></el-image>
+          </el-col>
           <el-col :span="24" class="dealShow">
             <el-col :span="24" class="top">
-              交易动态
+              <span></span>
+            </el-col>
+            <el-col :span="24" class="dealInfo">
+              <el-col :span="1" class="dealInfoTit">
+                <p>数据展示</p>
+                <p></p>
+              </el-col>
+              <el-col :span="22" class="dealInfoLeft">
+                <pie></pie>
+              </el-col>
+              <el-col :span="1" class="dealInfoTit dealInfoTitTwo">
+                <p></p>
+                <p>数据展示</p>
+              </el-col>
             </el-col>
-            <el-col :span="24" class="data">
-              <pie></pie>
+            <el-col :span="24" class="top down">
+              <span></span>
             </el-col>
           </el-col>
         </div>
@@ -49,9 +71,10 @@ import maps from './parts/map.vue';
 export default {
   name: 'index',
   props: {},
-  // userTwo, maps,
-  components: { userTwo, pie },
-  data: () => ({}),
+  components: { userTwo, maps, pie },
+  data: () => ({
+    centerImage: require('@/assets/dynamic5.png'),
+  }),
   created() {},
   computed: {},
   methods: {},
@@ -89,7 +112,7 @@ export default {
 }
 .dataShow .down span {
   float: left;
-  width: 30%;
+  width: 35%;
   height: 1px;
   background: #9cb9cb;
 }
@@ -100,78 +123,137 @@ export default {
 }
 .dataShow .dataShowInfo .left {
   float: left;
-  width: 30%;
+  width: 33%;
   height: 707px;
-  border: 1px solid red;
 }
 .dataShow .dataShowInfo .left p:first-child {
   float: left;
   width: 100%;
   height: 100px;
   font-size: 18px;
-  color: red;
+  color: #003e70;
+  font-weight: bold;
 }
 .dataShow .dataShowInfo .left p:last-child {
   float: left;
   width: 2px;
   height: 606px;
-  background: red;
+  background: #003e70;
   margin: 0;
   position: relative;
   left: 5px;
 }
 .dataShow .dataShowInfo .center {
   float: left;
-  width: 30%;
+  width: 33%;
   height: 707px;
+  border: 1px solid red;
 }
 .dataShow .dataShowInfo .right {
   float: left;
-  width: 30%;
+  width: 34%;
   height: 707px;
-}
-
-.dataShow .user {
-  width: 32%;
-  height: 460px;
-  overflow: hidden;
   border: 1px solid red;
-  margin: 0 30px 0 0;
 }
-.dataShow .city {
-  width: 32%;
-  height: 460px;
-  overflow: hidden;
-  border: 1px solid red;
-  margin: 0 30px 0 0;
+.dataShow .dataShowInfo .right p:first-child {
+  float: left;
+  width: 2px;
+  height: 606px;
+  background: #003e70;
+  margin: 0;
+  position: relative;
+  left: 5px;
 }
-.dataShow .data {
-  width: 32%;
-  height: 460px;
+.dataShow .dataShowInfo .right p:last-child {
+  float: left;
+  width: 100%;
+  height: 100px;
+  font-size: 18px;
+  color: #003e70;
+  font-weight: bold;
+}
+.dataImage {
+  float: left;
+  width: 100%;
+  height: 160px;
+  margin: 20px 0;
   overflow: hidden;
-  border: 1px solid red;
-  margin: 0;
+}
+.dataImage .el-image {
+  width: 100%;
+  height: 160px;
 }
 .dealShow {
   float: left;
   width: 100%;
   height: 500px;
   overflow: hidden;
-  border: 1px solid blue;
 }
 .dealShow .top {
   float: left;
   width: 100%;
-  height: 40px;
-  line-height: 40px;
+  height: 1px;
+}
+.dealShow .top span {
+  float: right;
+  width: 30%;
+  height: 1px;
+  background: #9cb9cb;
+}
+.dealShow .down span {
+  float: left;
+  width: 35%;
+  height: 1px;
+  background: #9cb9cb;
+}
+.dealShow .dealInfo {
+  float: left;
+  width: 100%;
+  height: 496px;
+}
+.dealShow .dealInfo .dealInfoTit {
+  width: 20px;
+  height: 496px;
+}
+.dealShow .dealInfo .dealInfoTit p:first-child {
+  float: left;
+  width: 100%;
+  height: 100px;
   font-size: 18px;
-  padding: 0 15px;
+  color: #003e70;
   font-weight: bold;
 }
-.dealShow .data {
-  height: 460px;
-  overflow: hidden;
-  border: 1px solid red;
+.dealShow .dealInfo .dealInfoTit p:last-child {
+  float: left;
+  width: 2px;
+  height: 395px;
+  background: #003e70;
   margin: 0;
+  position: relative;
+  left: 5px;
+}
+.dealShow .dealInfo .dealInfoTitTwo p:first-child {
+  float: left;
+  width: 2px;
+  height: 395px;
+  background: #003e70;
+  margin: 0;
+  position: relative;
+  left: 10px;
+}
+.dealShow .dealInfo .dealInfoTitTwo p:last-child {
+  float: left;
+  width: 100%;
+  height: 100px;
+  font-size: 18px;
+  color: #003e70;
+  font-weight: bold;
+  background: transparent;
+}
+.dealShow .dealInfo .dealInfoLeft {
+  width: 95%;
+  height: 495px;
+  margin: 0 15px;
+  padding: 45px 0;
 }
 </style>

src/views/dynamic/parts/down-pie.vue

@@ -1,6 +1,31 @@
 <template>
   <div id="down-pie">
-    <div id="chartPie" class="" style="height:450px;"></div>
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="12">
+          <div id="chartPie" class="" style="height:450px;"></div>
+        </el-col>
+        <el-col :span="12" class="rightData">
+          <el-table :data="tableData" border style="width: 100%">
+            <el-table-column prop="product_name" label="产品名称" align="center"> </el-table-column>
+            <el-table-column prop="market_username" label="营销单位" align="center"> </el-table-column>
+            <el-table-column prop="username" label="采购单位" align="center"> </el-table-column>
+            <el-table-column prop="status" label="交易状态" align="center">
+              <template v-slot="scoped">
+                {{ `${scoped.row.status}` === `0` ? '正在洽谈' : `${scoped.row.status}` === `1` ? '达成意向' : '交易完成' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="100" align="center">
+              <template slot-scope="scoped">
+                <el-button @click="$router.push({ path: '/dynamic/dealDetail', query: { id: scoped.row.id } })" type="text" size="small">
+                  <i class="el-icon-view"></i>
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -25,6 +50,7 @@ export default {
     return {
       myChart: null,
       type: 'pie',
+      tableData: [],
     };
   },
   created() {
@@ -37,9 +63,12 @@ export default {
       let res = await this.query();
       let rooms = await this.countRoom();
       if (this.$checkRes(res)) {
+        let arr = _.chunk(res.data, 6);
+        this.$set(this, `tableData`, arr[0]);
         let taking = rooms.errcode == 0 ? rooms.total : 0;
         let s1 = res.data.filter(f => f.status == '1'); //达成意向
         let s2 = res.data.filter(f => f.status == '2'); //对接完成
+
         let s3 = res.data.filter(f => f.status == '3'); //未达成意向
         this.myChart = echarts.init(document.getElementById('chartPie'));
         const option = {
@@ -88,4 +117,16 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.rightData {
+  padding: 0 30px;
+  height: 391px;
+  overflow: hidden;
+}
+/deep/.el-table td {
+  padding: 8px 0;
+}
+/deep/.el-table th {
+  padding: 8px 0;
+}
+</style>

src/views/dynamic/parts/userTwo.vue

@@ -1,8 +1,31 @@
 <template>
   <div id="userTwo">
     <el-row>
-      <el-col :span="24">
-        信息
+      <el-col :span="24" class="userTwo">
+        <el-col :span="12" class="left">
+          <el-col :span="24" class="one">
+            <el-image style="width:166px;height:166px;" :src="dynamic1"></el-image>
+            <p>企业注册数量</p>
+            <p>{{ detail.num1 }}</p>
+          </el-col>
+          <el-col :span="24" class="one two">
+            <el-image style="width:166px;height:166px;" :src="dynamic2"></el-image>
+            <p>个人注册数量</p>
+            <p>{{ detail.num2 }}</p>
+          </el-col>
+        </el-col>
+        <el-col :span="12" class="left right">
+          <el-col :span="24" class="one">
+            <el-image style="width:166px;height:166px;" :src="dynamic3"></el-image>
+            <p>在线人数</p>
+            <p>{{ detail.num3 }}</p>
+          </el-col>
+          <el-col :span="24" class="one two">
+            <el-image style="width:166px;height:166px;" :src="dynamic4"></el-image>
+            <p>企业项目数量</p>
+            <p>{{ detail.num4 }}</p>
+          </el-col>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -13,11 +36,67 @@ export default {
   name: 'userTwo',
   props: {},
   components: {},
-  data: () => ({}),
+  data: () => ({
+    dynamic1: require('@/assets/dynamic1.png'),
+    dynamic2: require('@/assets/dynamic2.png'),
+    dynamic3: require('@/assets/dynamic3.png'),
+    dynamic4: require('@/assets/dynamic4.png'),
+    detail: {
+      num1: 1,
+      num2: 2,
+      num3: 3,
+      num4: 4,
+    },
+  }),
   created() {},
   computed: {},
   methods: {},
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.userTwo {
+  float: left;
+  width: 100%;
+}
+.userTwo .left {
+  width: 50%;
+}
+.userTwo .left .one {
+  float: left;
+  width: 212px;
+  height: 212px;
+  overflow: hidden;
+  border-radius: 10px;
+  box-shadow: 0 0 5px #ccc;
+  text-align: center;
+  padding: 20px 0;
+  position: relative;
+  margin: 40px 0 0 15px;
+}
+
+.userTwo .left .one p:nth-child(2) {
+  position: absolute;
+  top: 80px;
+  font-size: 14px;
+  color: #346da4;
+  font-weight: bold;
+  left: 60px;
+  text-align: center;
+  width: 86px;
+}
+.userTwo .left .one p:nth-child(3) {
+  position: absolute;
+  top: 110px;
+  left: 60px;
+  font-size: 14px;
+  color: #346da4;
+  font-weight: bold;
+  text-align: center;
+  width: 86px;
+}
+.userTwo .right {
+  width: 50%;
+  margin: 110px 0 0 0;
+}
+</style>