饼图点击切换第二饼图数据, 修复小区屏返回公共屏饼图不展示bug

src/view/right/case-analysis.vue

@@ -134,7 +134,6 @@ export default defineComponent({
           border-color @color
           background rgba(50, 197, 255, 0.2)
 .rank
-  min-height 1rem
   overflow hidden
   .content
     height 1rem

src/view/right/public-safety.vue

@@ -41,7 +41,12 @@
           <div class="chartBox">
             <div v-if="showChart" class="drawCharts">
               <div>
-                <m-pie class="chart1" :dataset="pieData1" :option="pieOption" />
+                <m-pie
+                  class="chart1"
+                  :dataset="pieData1"
+                  :option="pieOption"
+                  @init="handleInit"
+                />
                 <span class="line"></span>
                 <m-pie class="chart2" :dataset="pieData2" :option="pieOption" />
               </div>
@@ -65,7 +70,7 @@
               <div
                 v-for="(item, i) in pieData1.source"
                 :key="item.name"
-                @click="changePie2(item)"
+                @click="changePie2(item, i)"
               >
                 <p>
                   <span :style="{ background: pieOption.color[i][0] }" />
@@ -168,6 +173,111 @@ export default defineComponent({
     ])
 
     const secPieKey = ref('外立面附加设施隐患点') // 默认展示的第二饼图类型
+    const pieData1 = ref({
+      dimensions: [
+        { name: 'name', displayName: '类型' },
+        { name: 'value', displayName: '数量' },
+      ],
+      source: [
+        {
+          name: '外立面附加设施危险点',
+          value: 1,
+        },
+        {
+          name: '外立面附加设施隐患点',
+          value: 1,
+        },
+        {
+          name: '外墙面层隐患点',
+          value: 1,
+        },
+        {
+          name: '外墙面层危险点',
+          value: 1,
+        },
+      ],
+    })
+
+    //切换年份
+    const changeYear = (value: string) => {
+      year.value = value
+    }
+    //切换第二饼图展示的类别
+    const changePie2 = (item: any, i: number) => {
+      secPieKey.value = item.name
+    }
+
+    const list = computed(() => {
+      return [
+        {
+          img: Circle,
+          value: SOSMaterail.value.floodPreventionUnits || 0,
+          name: '防汛防台',
+        },
+        {
+          img: Circle,
+          value: SOSMaterail.value.warmAntifreeze || 0,
+          name: '防寒抗冻',
+        },
+        {
+          img: Circle,
+          value: SOSMaterail.value.emergencySupplies || 0,
+          name: '疫情控制',
+        },
+        {
+          img: Circle,
+          value: SOSMaterail.value.emergencyRescue || 0,
+          name: '应急抢险',
+        },
+      ]
+    })
+
+    const population = ref([
+      { name: '楼宇名称', value: 4, danger: 1 },
+      { name: '楼宇名称', value: 4, danger: 1 },
+      { name: '楼宇名称', value: 4, danger: 1 },
+      { name: '楼宇名称', value: 4, danger: 1 },
+      { name: '楼宇名称', value: 4, danger: 1 },
+      { name: '楼宇名称', value: 4, danger: 1 },
+    ])
+
+    const pieData2 = ref({
+      dimensions: [
+        { name: 'name', displayName: secPieKey.value },
+        { name: 'value', displayName: '数量' },
+      ],
+      source: [
+        { name: '第一工作站', value: 1 },
+        { name: '第二工作站', value: 1 },
+        { name: '第三工作站', value: 1 },
+      ],
+    })
+    const pieOption = ref({
+      color: [
+        ['#F76B1C', '#FAD961'],
+        ['#429321', '#B4EC51'],
+        ['#3023AE', '#C86DD7'],
+        ['#51B7EC', '#212F93'],
+      ],
+      legend: { show: false },
+      series: [
+        {
+          type: 'pie',
+          radius: [0, '90%'],
+          center: ['50%', '50%'],
+          label: {
+            show: false,
+          },
+        },
+      ],
+    })
+    const handleInit = (instance: any) => {
+      instance.on('click', (e: any) => {
+        console.log('click~~~~~', e)
+        secPieKey.value = e.name
+      })
+    }
+
     watch(
       // 监听年份切花更改检查楼数  隐患点数 危险点数
       [() => outHouseWall.value, () => year.value],
@@ -269,103 +379,6 @@ export default defineComponent({
       },
       { immediate: true }
     )
-    //切换年份
-    const changeYear = (value: string) => {
-      year.value = value
-    }
-    //切换第二饼图展示的类别
-    const changePie2 = (item: any) => {
-      secPieKey.value = item.name
-      // console.log(secPieKey.value)
-    }
-
-    const list = computed(() => {
-      return [
-        {
-          img: Circle,
-          value: SOSMaterail.value.floodPreventionUnits || 0,
-          name: '防汛防台',
-        },
-        {
-          img: Circle,
-          value: SOSMaterail.value.warmAntifreeze || 0,
-          name: '防寒抗冻',
-        },
-        {
-          img: Circle,
-          value: SOSMaterail.value.emergencySupplies || 0,
-          name: '疫情控制',
-        },
-        {
-          img: Circle,
-          value: SOSMaterail.value.emergencyRescue || 0,
-          name: '应急抢险',
-        },
-      ]
-    })
-
-    const population = ref([
-      { name: '楼宇名称', value: 4, danger: 1 },
-      { name: '楼宇名称', value: 4, danger: 1 },
-      { name: '楼宇名称', value: 4, danger: 1 },
-      { name: '楼宇名称', value: 4, danger: 1 },
-      { name: '楼宇名称', value: 4, danger: 1 },
-      { name: '楼宇名称', value: 4, danger: 1 },
-    ])
-    const pieData1 = ref({
-      dimensions: [
-        { name: 'name', displayName: '类型' },
-        { name: 'value', displayName: '数量' },
-      ],
-      source: [
-        {
-          name: '外立面附加设施危险点',
-          value: 1,
-        },
-        {
-          name: '外立面附加设施隐患点',
-          value: 1,
-        },
-        {
-          name: '外墙面层隐患点',
-          value: 1,
-        },
-        {
-          name: '外墙面层危险点',
-          value: 1,
-        },
-      ],
-    })
-    const pieData2 = ref({
-      dimensions: [
-        { name: 'name', displayName: secPieKey.value },
-        { name: 'value', displayName: '数量' },
-      ],
-      source: [
-        { name: '第一工作站', value: 1 },
-        { name: '第二工作站', value: 1 },
-        { name: '第三工作站', value: 1 },
-      ],
-    })
-    const pieOption = ref({
-      color: [
-        ['#F76B1C', '#FAD961'],
-        ['#429321', '#B4EC51'],
-        ['#3023AE', '#C86DD7'],
-        ['#51B7EC', '#212F93'],
-      ],
-      legend: { show: false },
-      series: [
-        {
-          type: 'pie',
-          radius: [0, '90%'],
-          center: ['50%', '50%'],
-          label: {
-            show: false,
-          },
-        },
-      ],
-    })
 
     return {
       list,
@@ -384,6 +397,7 @@ export default defineComponent({
       outHouseWall,
       pieData,
       changePie2,
+      handleInit,
     }
   },
 })