no message

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

@@ -12,7 +12,33 @@
           <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">
+              广东省
+              <i @click="() => {
+            shengData = null
+            if(myChart){
+              myChart.dispatchAction({
+                type: 'downplay',
+                seriesIndex: 0
+              })
+            }
+          }" 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>
@@ -27,6 +53,7 @@ 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 { bigGetLarge1 } from '@/api/common.js';
 // 计算 GeoJSON 数据的边界框
 function calculateBoundingBox(geoJsonData) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -80,7 +107,8 @@ export default {
       oldcIndex: 0,
       myChart: null,
       getLarge9: [],
-      getLarge10: []
+      getLarge10: [],
+      shengData: null
     };
   },
   computed: {
@@ -88,39 +116,42 @@ 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()
       },
       deep: true,
       immediate: true,
     }
   },
   methods: {
-    getbigGetLarge9(pam) {
+    init(bol) {
+      if (this.userInfo) {
+        if (this.userInfo.type == 2) {
+          this.getbigGetLarge9({ country: 100000 }, bol);
+        } else {
+          this.getbigGetLarge10({ province: this.userInfo.province, city: this.userInfo.city }, bol);
+        }
+      }
+    },
+    getbigGetLarge9(pam, bol) {
       bigGetLarge9().then(res => {
         this.getLarge9 = res.data
         this.getLarge10 = []
-        this.echart_7(pam);
+        this.echart_7(pam,bol);
       })
     },
-    getbigGetLarge10(pam) {
+    getbigGetLarge10(pam, bol) {
       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 },bol);
       })
     },
-    echart_7(pam) {
+    echart_7(pam, bol) {
       var that = this;
-      if (that.myChart) {
+      if (that.myChart && !bol) {
         that.myChart.dispose();
       }
       bigGetRegion(pam).then(res => {
@@ -141,10 +172,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 +181,10 @@ export default {
             itemStyle: {
               normal: {
                 areaColor: cityColors[city],
-                borderColor:  cityColors[city],
+                borderColor: cityColors[city],
               },
               emphasis: {
-                areaColor:  'none',
+                areaColor: 'none',
                 borderColor: 1
               }
             },
@@ -247,9 +276,33 @@ export default {
         };
         // 使用配置项生成图表
         that.myChart.setOption(option);
+
+        var isSelectBool = false
+        that.myChart.on('selectchanged', function (params) {
+          isSelectBool = !!params.selected.length
+        });
         // 监听点击事件
         that.myChart.on('click', function (params) {
-          
+          if (isSelectBool) {
+            if (that.userInfo) {
+              if (that.userInfo.type == 2) {
+                // 平台
+                if (!!cityColors[params.name]) {
+                  bigGetLarge1({
+                    province: params.name
+                  }).then(res => {
+                    that.shengData = res.data
+                    console.log(that.shengData)
+                  })
+                }
+              } else {
+                // 商户
+
+              }
+            }
+          } else {
+            // 没有选中或者取消选中
+          }
         });
       });
 
@@ -259,6 +312,44 @@ export default {
 </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;
@@ -329,5 +420,4 @@ export default {
 .c9 {
   background: linear-gradient(0deg, #3ce783 0%, #3ce783 100%);
 }
-
 </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)
       })