From fb94683b9bdd4a42aafee1474949b7df30e6425a Mon Sep 17 00:00:00 2001
From: LiuJiaNan <liujianan@zcloudchina.com>
Date: Wed, 28 Feb 2024 09:49:13 +0800
Subject: [PATCH] bug14305

---
 .../components/troubleshooting_type.vue       | 122 +++++++-----------
 1 file changed, 47 insertions(+), 75 deletions(-)

diff --git a/src/views/large_screen_data_display/components/troubleshooting_type.vue b/src/views/large_screen_data_display/components/troubleshooting_type.vue
index 7183e24..bf58268 100644
--- a/src/views/large_screen_data_display/components/troubleshooting_type.vue
+++ b/src/views/large_screen_data_display/components/troubleshooting_type.vue
@@ -29,17 +29,46 @@
         <div>
           <div class="dunpai1" />
           <div class="bottom_title">现场排查数</div>
-          <div id="main1" />
+          <el-progress
+            :percentage="
+              typeList.filter((item) => item.NAME === '现场清单')[0].percentage
+            "
+            color="#ec2c26"
+            text-inside
+            :stroke-width="20"
+          >
+            {{ typeList.filter((item) => item.NAME === "现场清单")[0].count }}
+          </el-progress>
         </div>
         <div>
           <div class="dunpai2" />
           <div class="bottom_title">基础排查数</div>
-          <div id="main2" />
+          <el-progress
+            :percentage="
+              typeList.filter((item) => item.NAME === '基础类清单')[0]
+                .percentage
+            "
+            color="#ea4e26"
+            text-inside
+            :stroke-width="20"
+          >
+            {{ typeList.filter((item) => item.NAME === "基础类清单")[0].count }}
+          </el-progress>
         </div>
         <div>
           <div class="dunpai3" />
           <div class="bottom_title">综合排查数</div>
-          <div id="main3" />
+          <el-progress
+            :percentage="
+              typeList.filter((item) => item.NAME === '综合类清单')[0]
+                .percentage
+            "
+            color="#ea6e27"
+            text-inside
+            :stroke-width="20"
+          >
+            {{ typeList.filter((item) => item.NAME === "综合类清单")[0].count }}
+          </el-progress>
         </div>
       </div>
     </div>
@@ -47,18 +76,21 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import {
   getTroubleshootingTypeEcharts,
   getTroubleshootingTypeNumber,
 } from "@/request/large_screen_data_display.js";
 import { sumBy } from "lodash-es";
 import { arrayObjectDeduplication } from "@/assets/js/utils.js";
-import * as echarts from "echarts";
 import CountTo from "vue-countup-v3";
 
 const info = ref({});
-
+const typeList = ref([
+  { count: 0, percentage: 0, NAME: "现场清单" },
+  { count: 0, percentage: 0, NAME: "基础类清单" },
+  { count: 0, percentage: 0, NAME: "综合类清单" },
+]);
 const fnGetData = async () => {
   const resDataNumber = await getTroubleshootingTypeNumber();
   resDataNumber.typeList.forEach((item) => {
@@ -66,73 +98,15 @@ const fnGetData = async () => {
   });
   const resDataEcharts = await getTroubleshootingTypeEcharts();
   const total = sumBy(resDataEcharts.typeList, (item) => item.count);
-  const key = {
-    现场清单: { color: "#ec2c26", el: "#main1" },
-    基础类清单: { color: "#ea4e26", el: "#main2" },
-    综合类清单: { color: "#ea6e27", el: "#main3" },
-  };
-  const typeList = [
-    ...resDataEcharts.typeList,
-    { count: 0, NAME: "现场清单" },
-    { count: 0, NAME: "基础类清单" },
-    { count: 0, NAME: "综合类清单" },
-  ];
-  arrayObjectDeduplication(typeList, "NAME").forEach((item) => {
-    fnInitEcharts(item.count, total, key[item.NAME].color, key[item.NAME].el);
+  resDataEcharts.typeList.forEach((item) => {
+    item.percentage = (item.count / total) * 100;
   });
+  typeList.value = arrayObjectDeduplication(
+    [...resDataEcharts.typeList, ...typeList.value],
+    "NAME"
+  );
 };
-onMounted(() => {
-  fnGetData();
-});
-const fnInitEcharts = (count, total, color, el) => {
-  const myChart = echarts.init(document.querySelector(el));
-  const option = {
-    grid: {
-      left: "10%",
-      right: "0%",
-      bottom: "0%",
-      top: "100%",
-      containLabel: true,
-    },
-    xAxis: {
-      show: false,
-      type: "value",
-    },
-    yAxis: {
-      type: "category",
-      show: false,
-    },
-    series: [
-      {
-        name: "次数",
-        type: "bar",
-        zlevel: 1,
-        itemStyle: {
-          barBorderRadius: 0,
-          color,
-        },
-        label: {
-          show: true,
-          position: "inside",
-        },
-        barWidth: 15,
-        data: [count],
-      },
-      {
-        name: "背景",
-        type: "bar",
-        barWidth: 15,
-        barGap: "-100%",
-        data: [total],
-        itemStyle: {
-          color: "#101f48",
-          barBorderRadius: 0,
-        },
-      },
-    ],
-  };
-  myChart.setOption(option);
-};
+fnGetData();
 </script>
 
 <style scoped lang="scss">
@@ -199,11 +173,9 @@ const fnInitEcharts = (count, total, color, el) => {
         }
       }
 
-      #main1,
-      #main2,
-      #main3 {
+      .el-progress {
+        margin-left: 10px;
         flex: 1;
-        height: 20px;
       }
     }
   }