Merge branch 'linwenxin_dev' of https://gogs.zfire.top/zfire-front/zfire-newmall-admin into develop

src/api/common.js

@@ -17,6 +17,22 @@ export function bigGetLarge1(params) {
   })
 }
 
+export function bigGetLarge11(params) {
+  return request({
+    url: '/big/getLarge11',
+    method: 'get',
+    params
+  })
+}
+
+export function bigList(params) {
+  return request({
+    url: '/big/list',
+    method: 'get',
+    params
+  })
+}
+
 export function bigGetLarge10(params) {
   return request({
     url: '/big/getLarge10',

src/views/bigViews/dataView1/components/mapdata.vue

@@ -12,7 +12,112 @@
           <div id="chart_7" class="chart t_btn9" style="width: 100%; height: 100%"></div>
           <div class="leixingxianshi">
             <div class="viewfilediv">
-              <div class="zfx" style="width:60px; background: linear-gradient(to right, #6ada40,#ebe24a,#d73921);"></div>
+              <div class="zfx" style="width:60px; background: linear-gradient(to right, #6ada40,#ebe24a,#d73921);">
+              </div>
+            </div>
+          </div>
+          <div class="pingtaixianshisheng" v-if="shengData">
+            <div class="shengbiaoti">
+              {{ isSelectBool }}
+              <i @click="() => {
+            shengData = null
+            if (isSelectBool) {
+              myChart.dispatchAction({
+                type: 'unselect',
+                name: [isSelectBool]
+              })
+              isSelectBool = ''
+            }
+
+          }" style="float: right;color: #fff;margin-top: 12px; margin-right: -8px;" class="el-icon-circle-close"></i>
+            </div>
+            <div class="shengshujukuang">
+              <div>商户数：{{ shengData.companyNum }}</div>
+              <div>师傅数量：{{ shengData.allWorker }}</div>
+              <div>分销员数：{{ shengData.allService }}</div>
+              <div>用户数：{{ shengData.allUser }}</div>
+              <div>总工单：{{ shengData.allWorkerOrderNum }}</div>
+              <div>未完工：{{ shengData.neverWorkerNum }}</div>
+              <div>销售订单：{{ shengData.salesOrderNum }}</div>
+              <div>增值订单：{{ shengData.increOrderNum }}</div>
+            </div>
+          </div>
+          <div v-if="list_.length" class="pingtaixianshisheng" style="width: 100%;height: auto;min-height: 100px;">
+            <div class="shengbiaoti"
+              style="font-size: 16px;border-bottom: 1px solid #50C9FD; line-height: 38px; margin-bottom: 8px;display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;position: relative;padding-right: 30px;">
+              <!-- <span>{{ isSelectBool }}</span> -->
+              <span>{{ userInfo && userInfo.city }}</span>
+              <span>总已完工 {{ cityInfo.num }}单/台 总未完工 <span>{{ cityInfo.numWwg }}</span>单/台</span>
+              <i @click="guanbitanchuang2" style="position: absolute; top: 10px; right: -8px;color: #fff;"
+                class="el-icon-circle-close"></i>
+            </div>
+            <div style="width:100%;">
+              <table style="width:100%;">
+                <thead style="width:100%;">
+                  <tr>
+                    <th style="color: #50C9FD;font-size:14px;width: 17.5%;text-align: left;">
+                      <div align="left">街道</div>
+                    </th>
+                    <th style="color: #50C9FD;font-size:14px;width: 16.5%;text-align: left;">
+                      <div align="left">安装完工/未完工</div>
+                    </th>
+                    <th style="color: #50C9FD;font-size:14px;width: 16.5%;text-align: left;">
+                      <div align="left">维修完工/未完工</div>
+                    </th>
+                    <th style="color: #50C9FD;font-size:14px;width: 16.5%;text-align: left;">
+                      <div align="left">清洗完工/未完工</div>
+                    </th>
+                    <th style="color: #50C9FD;font-size:14px;width: 16.5%;text-align: left;">
+                      <div align="left">增值完工/未完工</div>
+                    </th>
+                    <th style="color: #50C9FD;font-size:14px;width: 16.5%;text-align: left;">
+                      <div align="left">维保完工/未完工</div>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(item, index) in list_" :key="index">
+                    <td>
+                      <div class="bkiuybhlinjm" style="font-size: 14px;">{{ item.streetName }}</div>
+                    </td>
+                    <td>
+                      <div class="bkiuybhlinjm">
+                        <span style="font-size: 14px;">{{ item.azgd }}台</span>
+                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.azgdwwg }}</span>台</span>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="bkiuybhlinjm">
+                        <span style="font-size: 14px;">{{ item.wxgd }}台</span>
+                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.wxgdwwg }}</span>台</span>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="bkiuybhlinjm">
+                        <span style="font-size: 14px;">{{ item.qxgd }}台</span>
+                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.qxgdwwg }}</span>台</span>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="bkiuybhlinjm">
+                        <span style="font-size: 14px;">{{ item.zzgd }}台</span>
+                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.zzgdwwg }}</span>台</span>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="bkiuybhlinjm">
+                        <span style="font-size: 14px;">{{ item.wbgd }}台</span>
+                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.wbgdwwg }}</span>台</span>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <div style="width:100%;display: flex;justify-content: center;align-items: center">
+                <el-button type="text" :disabled="!(pageNum > 1)" @click="shangyiye">上一页</el-button>
+                <div style="width:50px;text-align: center;color:#50C9FD">{{ pageNum }}</div>
+                <el-button type="text" :disabled="!(parseInt(total / 5) > pageNum)" @click="xiayiye">下一页</el-button>
+              </div>
             </div>
           </div>
         </div>
@@ -26,7 +131,7 @@ import zhejiang from './js/zhejiang.js';
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
 import mapDataStatistics from './mapDataStatistics.vue';
 import * as echarts from 'echarts';
-import { bigGetRegion, bigGetLarge9, bigGetLarge10 } from '@/api/common.js';
+import { bigGetRegion, bigGetLarge9, bigGetLarge10, bigList, bigGetLarge1, bigGetLarge11 } from '@/api/common.js';
 // 计算 GeoJSON 数据的边界框
 function calculateBoundingBox(geoJsonData) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -80,7 +185,13 @@ export default {
       oldcIndex: 0,
       myChart: null,
       getLarge9: [],
-      getLarge10: []
+      getLarge10: [],
+      shengData: null,
+      isSelectBool: "",
+      pageNum: 1,
+      total: 0,
+      list_: [],
+      cityInfo: {}
     };
   },
   computed: {
@@ -88,22 +199,48 @@ export default {
       return JSON.parse(localStorage.getItem('greemall_user'))
     },
   },
-  watch:{
-    "userInfo.type":{
+  watch: {
+    "userInfo.type": {
       handler(newVal, oldVal) {
-        if(this.userInfo){
-          if (this.userInfo.type == 2){
-            this.getbigGetLarge9({ country: 100000 });
-          }else{
-            this.getbigGetLarge10({ province:this.userInfo.province, city: this.userInfo.city });
-          }
-        }
+        this.init(true)
       },
       deep: true,
       immediate: true,
     }
   },
   methods: {
+    guanbitanchuang() {
+      this.shengData = null
+      if (this.isSelectBool) {
+        this.myChart.dispatchAction({
+          type: 'unselect',
+          name: [this.isSelectBool]
+        })
+        this.isSelectBool = ''
+      }
+    },
+    guanbitanchuang2() {
+      this.pageNum = 1
+      this.total = 0
+      this.list_ = []
+      this.cityInfo = {}
+      if (this.isSelectBool) {
+        this.myChart.dispatchAction({
+          type: 'unselect',
+          name: [this.isSelectBool]
+        })
+        this.isSelectBool = ''
+      }
+    },
+    init() {
+      if (this.userInfo) {
+        if (this.userInfo.type == 2) {
+          this.getbigGetLarge9({ country: 100000 });
+        } else {
+          this.getbigGetLarge10({ province: this.userInfo.province, city: this.userInfo.city });
+        }
+      }
+    },
     getbigGetLarge9(pam) {
       bigGetLarge9().then(res => {
         this.getLarge9 = res.data
@@ -115,7 +252,7 @@ export default {
       bigGetLarge10(pam).then(res => {
         this.getLarge9 = []
         this.getLarge10 = res.data
-        this.echart_7({ province:this.userInfo.province, city: this.userInfo.city });
+        this.echart_7({ province: this.userInfo.province, city: this.userInfo.city });
       })
     },
     echart_7(pam) {
@@ -141,10 +278,8 @@ export default {
           cityColors[name] = "#009eff";
         });
         this.getLarge10.map(item => {
-          cityColors[item.area] = item.num<=2 ? "#6ada40" : item.num<=4 ? "#ebe24a" : item.num > 4 ? "#d73921" : "none"
+          cityColors[item.area] = item.num <= 2 ? "#6ada40" : item.num <= 4 ? "#ebe24a" : item.num > 4 ? "#d73921" : "none"
         });
-
-        console.log(this.getLarge9, this.getLarge10, cityColors)
         // 构建 series 数据
         var seriesData = Object.keys(cityColors).map(function (city) {
           return {
@@ -152,10 +287,10 @@ export default {
             itemStyle: {
               normal: {
                 areaColor: cityColors[city],
-                borderColor:  cityColors[city],
+                borderColor: cityColors[city],
               },
               emphasis: {
-                areaColor:  'none',
+                areaColor: 'none',
                 borderColor: 1
               }
             },
@@ -247,18 +382,117 @@ export default {
         };
         // 使用配置项生成图表
         that.myChart.setOption(option);
+        var bool_i = false
+        that.myChart.on('selectchanged', function (params) {
+          bool_i = !!params.selected.length
+        });
         // 监听点击事件
         that.myChart.on('click', function (params) {
-          
+          if (bool_i) {
+            if (that.userInfo) {
+              if (that.userInfo.type == 2) {
+                // 平台
+                if (!!cityColors[params.name]) {
+                  bigGetLarge1({
+                    province: params.name
+                  }).then(res => {
+                    that.shengData = res.data
+                    that.isSelectBool = params.name
+                  })
+                }
+              } else {
+                // 商户
+                that.isSelectBool = params.name
+                that.pageNum = 1
+                that.total = 0
+                that.pagedatalist()
+                bigGetLarge11({
+                  // area: that.isSelectBool,
+                  city: that.userInfo.city,
+                  province: that.userInfo.province,
+                }).then(res => {
+                  that.cityInfo = res.data
+                })
+              }
+            }
+          } else {
+          }
         });
       });
+    },
+    pagedatalist() {
+      if (this.isSelectBool) {
+        bigList({
+          pageNum: this.pageNum,
+          pageSize: 5,
+          city: this.userInfo.city,
+          province: this.userInfo.province,
+          area: this.isSelectBool
+        }).then(res => {
+          this.total = res.data.total
+          this.list_ = res.data.records
+        })
+      }
+    },
+    xiayiye() {
+      if (parseInt(this.total / 5) > this.pageNum) {
+        this.pageNum++
+        this.pagedatalist()
+      } else {
 
+      }
     },
+    shangyiye() {
+      if (this.pageNum > 1) {
+        this.pageNum--
+        this.pagedatalist()
+      } else {
+
+      }
+    }
   },
 };
 </script>
 
 <style scoped lang="scss">
+.pingtaixianshisheng {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 467px;
+  height: 120px;
+  background: #04418F;
+  border-radius: 5px;
+  opacity: 0.8;
+  z-index: 999;
+  box-sizing: border-box;
+  padding: 0 20px;
+
+  .shengbiaoti {
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    font-size: 18px;
+    color: #50C9FD;
+    line-height: 49px;
+  }
+
+  .shengshujukuang {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 13px;
+    color: #FFFFFF;
+    line-height: 26px;
+
+    div {
+      width: 25%;
+    }
+  }
+}
 
 .leixingxianshi {
   // width: 120px;
@@ -330,4 +564,14 @@ export default {
   background: linear-gradient(0deg, #3ce783 0%, #3ce783 100%);
 }
 
+.bkiuybhlinjm {
+  padding: 8px 0;
+  color: #fff;
+  box-sizing: border-box;
+  padding-right: 8px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
 </style>

src/views/bigViews/dataView1/components/trendChart.vue

@@ -59,7 +59,6 @@ export default {
       }, 3000)
     },
     getbigGetLarge3() {
-      console.log(11111)
       bigGetLarge3().then(res => {
         this.eac(res.data)
       })