no message

src/api/common.js

@@ -17,6 +17,14 @@ export function bigGetLarge1(params) {
   })
 }
 
+export function bigGetLarge10(params) {
+  return request({
+    url: '/big/getLarge10',
+    method: 'get',
+    params
+  })
+}
+
 export function bigGetLarge3(params) {
   return request({
     url: '/big/getLarge3',

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

@@ -12,28 +12,7 @@
           <div id="chart_7" class="chart t_btn9" style="width: 100%; height: 100%"></div>
           <div class="leixingxianshi">
             <div class="viewfilediv">
-              <div class="zfx c1"></div>
-              <span>新增安装</span>
-            </div>
-            <div class="viewfilediv">
-              <div class="zfx c2"></div>
-              <span>安装设备</span>
-            </div>
-            <div class="viewfilediv">
-              <div class="zfx c3"></div>
-              <span>新增维修</span>
-            </div>
-            <div class="viewfilediv">
-              <div class="zfx c9"></div>
-              <span>新增清洗</span>
-            </div>
-            <div class="viewfilediv">
-              <div class="zfx c4"></div>
-              <span>安装未完工</span>
-            </div>
-            <div class="viewfilediv">
-              <div class="zfx c5"></div>
-              <span>维修未完工</span>
+              <div class="zfx" style="width:60px; background: linear-gradient(to right, #6ada40,#ebe24a,#d73921);"></div>
             </div>
           </div>
         </div>
@@ -47,7 +26,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 } from '@/api/common.js';
+import { bigGetRegion, bigGetLarge9, bigGetLarge10 } from '@/api/common.js';
 // 计算 GeoJSON 数据的边界框
 function calculateBoundingBox(geoJsonData) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -100,7 +79,8 @@ export default {
       cIndex: 0,
       oldcIndex: 0,
       myChart: null,
-      getLarge9: []
+      getLarge9: [],
+      getLarge10: []
     };
   },
   computed: {
@@ -115,7 +95,7 @@ export default {
           if (this.userInfo.type == 2){
             this.getbigGetLarge9({ country: 100000 });
           }else{
-            this.getbigGetLarge9({ province:this.userInfo.province, city: this.userInfo.city });
+            this.getbigGetLarge10({ province:this.userInfo.province, city: this.userInfo.city });
           }
         }
       },
@@ -123,16 +103,21 @@ export default {
       immediate: true,
     }
   },
-  mounted() {
-    this.getbigGetLarge9();
-  },
   methods: {
     getbigGetLarge9(pam) {
       bigGetLarge9().then(res => {
         this.getLarge9 = res.data
+        this.getLarge10 = []
         this.echart_7(pam);
       })
     },
+    getbigGetLarge10(pam) {
+      bigGetLarge10(pam).then(res => {
+        this.getLarge9 = []
+        this.getLarge10 = res.data
+        this.echart_7({ province:this.userInfo.province, city: this.userInfo.city });
+      })
+    },
     echart_7(pam) {
       var that = this;
       if (that.myChart) {
@@ -155,6 +140,11 @@ export default {
         this.getLarge9.map(name => {
           cityColors[name] = "#009eff";
         });
+        this.getLarge10.map(item => {
+          cityColors[item.area] = item.num<=2 ? "#6ada40" : item.num<=4 ? "#ebe24a" : "#d73921"
+        });
+
+        console.log(this.getLarge9, this.getLarge10, cityColors)
         // 构建 series 数据
         var seriesData = Object.keys(cityColors).map(function (city) {
           return {
@@ -271,7 +261,7 @@ export default {
 <style scoped lang="scss">
 
 .leixingxianshi {
-  width: 120px;
+  // width: 120px;
   height: auto;
   position: absolute;
   bottom: 0px;