优化

src/views/home/components/provincial/Top2.vue

@@ -13,6 +13,7 @@
       >
         <div class="num">
           <span v-if="item.id == 4">{{ mechanizationTotal > 0 ? mechanizationTotal : equipData[item.key] || 0 }}%</span>
+          <span v-else-if="item.id == 5">657</span>
           <span v-else>{{ equipData[item.key] || 0 }}</span>
         </div>
         <div class="name">{{ item.name }}</div>
@@ -45,8 +46,14 @@
       <el-radio :label="3">电缆工程</el-radio>
     </el-radio-group>
 
+    <el-checkbox-group v-model="checkList2" class="circle-checkbox" v-if="btnIndex == 5">
+      <el-checkbox label="1">在库</el-checkbox>
+      <el-checkbox label="2">自用</el-checkbox>
+    </el-checkbox-group>
+
     <div class="map-box">
-      <div class="echarts" id="mapChart"></div>
+      <div v-if="btnIndex != 5" class="echarts" id="mapChart"></div>
+      <div v-else class="map-bg"></div>
     </div>
   </div>
 </template>
@@ -75,6 +82,7 @@ export default {
         { id: 2, name: '装备总量(台)', key: 'total' },
         { id: 3, name: '配置率(分)', key: 'configuration' },
         { id: 4, name: '机械化率', key: 'mechanization' },
+        { id: 5, name: '装备分布(个)', key: 'distribution' },
       ],
       equipData: {
         totalPrice: 0, // 总价值
@@ -89,6 +97,7 @@ export default {
       // 机械化率总数
       mechanizationTotal: 0,
       requestId: 0,
+      myChart: null,
     }
   },
   created() {
@@ -134,9 +143,7 @@ export default {
               ...item,
               value: [...item.location.split(','), item.totalValue],
             }))
-        }
-
-        if (this.btnIndex == 2 || this.btnIndex == 3) {
+        } else if (this.btnIndex == 2 || this.btnIndex == 3) {
           let params = {}
           if (this.btnIndex == 2) {
             params = {
@@ -152,9 +159,7 @@ export default {
               ...item,
               value: [...item.location.split(','), item.num],
             }))
-        }
-
-        if (this.btnIndex == 4) {
+        } else if (this.btnIndex == 4) {
           const typeMap = {
             1: '线路',
             2: '变电',
@@ -167,12 +172,18 @@ export default {
           this.mechanizationTotal = res.data.find((item) => item.dataType === 'total')?.mechanizationRate
 
           this.cityData = res.data.filter((item) => item.cityName)
+        } else if (this.btnIndex = 5) {
+          this.myChart.dispose()
+          this.myChart = null
+          return
         }
 
-        this.$nextTick(() => {
-          if (currentId !== this.requestId) return
-          this.initChart()
-        })
+        if (this.btnIndex != 5) {
+          this.$nextTick(() => {
+            if (currentId !== this.requestId) return
+            this.initChart()
+          })
+        }
       } catch (error) {
         if (currentId === this.requestId) {
           console.error(error)
@@ -190,7 +201,7 @@ export default {
 
       echarts.registerMap('ah', jsonData)
       const charEle = document.getElementById('mapChart')
-      const myChart = echarts.init(charEle)
+      this.myChart = echarts.init(charEle)
       // let tooltip = gzjhTooltip(arr)
       const option = {
         tooltip: {
@@ -424,9 +435,9 @@ export default {
           ],
         },
       }
-      myChart.setOption(option)
+      this.myChart.setOption(option)
       // 监听地图绑定双击事件（双击进入地图下一级）
-      myChart.on('click', (params) => {
+      this.myChart.on('click', (params) => {
         console.log('🚀 ~ 点击 ~ params-->:', params)
         console.log('🚀 ~ initChart ~ params.data-->>:', params.data)
         if (!params.data) return
@@ -451,13 +462,13 @@ export default {
           // window.open(`${window.location.origin}/screen/cityScreen?cityName=${city}`, '_blank')
         }
       })
-      myChart.on('mouseover', (params) => {
+      this.myChart.on('mouseover', (params) => {
         // console.log('🚀 ~ 移入 ~ params:', params)
       })
-      myChart.on('mouseout', () => {
+      this.myChart.on('mouseout', () => {
         // this.selectedCity = null
       })
-      return myChart
+      return this.myChart
     },
     renderOneCompany(data, btnIndex) {
       if (btnIndex == 1) {
@@ -598,6 +609,12 @@ export default {
   align-items: center;
   justify-content: center;
 }
+.map-bg {
+  width: 500px;
+  height: 532px;
+  background: url('~@/assets/images/bgs/map.png');
+  background-size: 100% 100%;
+}
 .echarts {
   width: 100%;
   height: 100%;