类型：开发

描述：

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

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

@@ -45,14 +45,22 @@
         </div>
       </div>
       <div class="chart-box">
-        <pie
-          v-for="(item, index) in newsStateList"
-          :key="index"
-          :value="item.value"
-          :label="item.name"
-          :width="150"
-          :height="150"
-        />
+<!--        <pie-->
+<!--          v-for="(item, index) in newsStateList"-->
+<!--          :key="index"-->
+<!--          :value="item.value"-->
+<!--          :label="item.name"-->
+<!--          :width="150"-->
+<!--          :height="150"-->
+<!--        />-->
+        <newsRate :dataList="newsStateList" />
+        <ul class="chart__legend">
+          <li class="chart__legend-item" v-for="(item, index) in newsStateList" :key="index">
+            <p class="dot" :style="{ background: colors[index] }" />
+            <p class="name">{{ item.name }}</p>
+            <p class="value">{{ item.value }}</p>
+          </li>
+        </ul>
       </div>
     </div>
     <div class="work-box-1">
@@ -79,7 +87,8 @@
   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";
+  const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
   let list = ref([])
   let countInfo = ref({
     important: 0,
@@ -109,6 +118,69 @@
 </script>
 
 <style lang="scss" scoped>
+.chart {
+  display: flex;
+  justify-content: space-between;
+  padding: vw(20) vw(15);
+
+  &__wrapper {
+    width: vw(740);
+    height: vh(370);
+    padding: 0 vw(20);
+    background-image: url('@/assets/images/bg-3.png');
+    background-size: 100% 100%;
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+  }
+
+  &__legend {
+    flex: 1;
+
+    &-item {
+      position: relative;
+      width: 100%;
+      height: vh(40);
+      display: flex;
+      align-items: center;
+      margin-bottom: vh(8);
+      background: linear-gradient(
+              90deg,
+              rgba(0, 150, 255, 0.34) 0%,
+              rgba(0, 150, 255, 0) 100%
+      );
+
+      &::before {
+        position: absolute;
+        content: '';
+        width: vw(4);
+        height: vh(40);
+        background-color: #0096ff;
+      }
+
+      .dot {
+        width: vw(10);
+        height: vw(10);
+        margin: 0 vw(16);
+      }
+
+      .name {
+        font-weight: 400;
+        font-size: vw(12);
+        color: #ffffff;
+        width: vw(130);
+      }
+
+      .value {
+        font-weight: bold;
+        font-size: vw(15);
+        color: #ffffff;
+      }
+    }
+  }
+}
   .work-box-3 {
     width: vw(840);
     margin-top: vh(120);

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>