类型：开发

描述：

src/views/workOrder/components/box-2.vue

@@ -95,24 +95,24 @@
                 <p class="value">{{ item.value }}%</p>
               </li>
             </ul>
-            <div v-if="pointRankData.length > 0" class="alarm">
+<!--            <div v-if="pointRankData.length > 0" class="alarm">-->
-              <Title2 title="异常点位告警排名" />
+<!--              <Title2 title="异常点位告警排名" />-->
-              <ul class="alarm__wrapper">
+<!--              <ul class="alarm__wrapper">-->
-                <li class="alarm-item" v-for="(item, index) in pointRankData" :key="index">
+<!--                <li class="alarm-item" v-for="(item, index) in pointRankData" :key="index">-->
-                  <p
+<!--                  <p-->
-                    class="alarm-item__rank"
+<!--                    class="alarm-item__rank"-->
-                    :class="{
+<!--                    :class="{-->
-                      'alarm-item__rank--error': index == 0,
+<!--                      'alarm-item__rank&#45;&#45;error': index == 0,-->
-                      'alarm-item__rank--warning': index == 1,
+<!--                      'alarm-item__rank&#45;&#45;warning': index == 1,-->
-                      'alarm-item__rank--primary': index == 2
+<!--                      'alarm-item__rank&#45;&#45;primary': index == 2-->
-                    }"
+<!--                    }"-->
-                  >
+<!--                  >-->
-                    {{ index + 1 }}
+<!--                    {{ index + 1 }}-->
-                  </p>
+<!--                  </p>-->
-                  <p class="alarm-item__content">{{ item.link_title }}</p>
+<!--                  <p class="alarm-item__content">{{ item.link_title }}</p>-->
-                </li>
+<!--                </li>-->
-              </ul>
+<!--              </ul>-->
-            </div>
+<!--            </div>-->
           </div>
         </div>
       </div>

src/views/workOrder/components/box-3.vue

@@ -45,14 +45,7 @@
         </div>
       </div>
       <div class="chart-box">
-        <pie
+        <newsRate :dataList="newsStateList" />
-          v-for="(item, index) in newsStateList"
-          :key="index"
-          :value="item.value"
-          :label="item.name"
-          :width="250"
-          :height="250"
-        />
       </div>
     </div>
     <div class="work-box-1">
@@ -79,6 +72,7 @@
   import countup from 'vue-countup-v3'
   import pie from './pie.vue'
   import { getNewsListApi, getNewsStateApi, getNewsTotalApi } from '@/api/news'
+  import NewsRate from "@/views/workOrder/components/newsRate.vue";
 
   let list = ref([])
   let countInfo = ref({
@@ -246,7 +240,7 @@
           &--primary {
             @extend .statistics-item__value;
             color: #02f9fa;
-			
+
             background-image: url('@/assets/images/mask-primary.png');
             background-size: 100% 100%;
           }

src/views/workOrder/components/newsRate.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="alarmRate" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const props = defineProps({
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    },
+    total: {
+      type: Number,
+      default: () => 0
+    },
+    colors: {
+      type: Array,
+      default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
+    }
+  })
+
+  const { id, chart, setOption } = useEchart()
+
+  let params = null
+
+  let defaultCofig = {
+    color: [],
+    legend: {
+      orient: 'vertical',
+      y: 'center',
+      left: '50%',
+      itemWidth: fitChartSize(12),
+      itemHeight: fitChartSize(12),
+      itemGap: fitChartSize(6),
+      formatter: (name) => {
+        let obj = props.dataList.find((item) => item.name == name)
+        let total = getTotal();
+        if(total==0){
+          return `{name|${name}} {value|0}{value|%}`
+        }else{
+          let value = ((obj?.value/total).toFixed(4)*100).toFixed(2);
+          return `{name|${name}} {value|${value}}{value|%}`
+        }
+
+      },
+      textStyle: {
+        rich: {
+          name: {
+            color: '#fff',
+            fontSize: fitChartSize(12)
+          },
+          value: {
+            color: '#fff',
+            fontSize: fitChartSize(12)
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        center: ['24%', '50%'],
+        radius: ['35%', '50%'],
+        itemStyle: {
+          borderWidth: fitChartSize(4),
+          borderColor: '#093672'
+        },
+        label: {
+          show: true,
+          position: 'center',
+          fontWeight: 'bold',
+          rich: {
+            value: {
+              color: '#fff',
+              fontSize: fitChartSize(16),
+              fontWeight: 'bold',
+              padding: [0, 0, 5, 0]
+            },
+            name: {
+              color: '#fff',
+              fontSize: fitChartSize(12)
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: []
+      }
+    ]
+  }
+
+  let getTotal = () => {
+    return props.dataList.reduce((per, cur) => {
+      return per + cur.value
+    }, 0)
+  }
+
+  watch(
+    () => props.dataList,
+    () => {
+      if (props.dataList.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    { immediate: true }
+  )
+
+  const init = () => {
+    if (!params) {
+      defaultCofig.color = props.colors
+      defaultCofig.series[0].data = props.dataList
+      defaultCofig.series[0].label.formatter = () => {
+        return `{value|${getTotal()}}` + '\n' + `{name|消息总数}`
+      }
+      params = {
+        ...defaultCofig,
+        ...props.config
+      }
+    } else {
+      params.series[0].data = props.dataList
+      params.series[0].label.formatter = () => {
+        return `{value|${getTotal()}}` + '\n' + `{name|消息总数}`
+      }
+    }
+    const changeChart = setOption(params)
+    changeChart.off('legendselectchanged');
+    changeChart.on('legendselectchanged', function (e) {
+      var echartsArr = [];
+      for (let key in e.selected) {
+        if (e.selected[key]) {
+          echartsArr.push(key)
+        }
+      }
+      var echartsNum = 0;
+      props.dataList.forEach(item => {
+        if(echartsArr.includes(item.name)){
+          echartsNum += parseFloat(item.value)
+        }
+      })
+      params.series[0].label.formatter = () => {
+        return `{value|${echartsNum}}` + '\n' + `{name|告警总数}`
+      }
+      setOption(params)
+    });
+  }
+</script>
+
+<style scoped lang="scss">
+  .alarmRate {
+    width: vw(380);
+    height: vh(180);
+  }
+</style>