fix: 调整右侧面板的展示

src/views/Main/DailyPatrolCard/index.vue

@@ -16,23 +16,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import { ref, onMounted, onBeforeUnmount, watch } from "vue";
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
-import { useChartStore } from '@/store/modules/chart';
+import { useChartStore } from "@/store/modules/chart";
 
 const chartStore = useChartStore();
 
 defineOptions({
-  name: 'DailyPatrolCard'
+  name: "DailyPatrolCard",
 });
 const props = defineProps({
   timeRange: {
     type: Object,
     default: () => ({
-      startTime: '',
+      startTime: "",
-      endTime: ''
+      endTime: "",
-    })
+    }),
-  }
+  },
 });
 
 let chart: echarts.ECharts | undefined;
@@ -50,16 +50,16 @@ const getChartData = async (time: any) => {
     // endTime: '',
     // startTime: '',
     ...time,
-    group: 'K6'
+    group: "K6",
   };
   const data: any = await chartStore.initStatisticChart(pramas);
   if (data?.yaxis?.length) {
     let newArr = data.yaxis.flatMap((v: any) => v.series);
     newArr?.forEach((item: any) => {
       dailyData.value.push({
-        name: item.name || '',
+        name: item.name || "",
         value: Number(item.sum)?.toFixed(0) || 0,
-        unit: item.unit || ''
+        unit: item.unit || "",
       });
       dailyCount.value += Number(item.sum) || 0;
     });
@@ -72,25 +72,25 @@ const getChartData = async (time: any) => {
     // 默认数据
     dailyData.value = [
       {
-        name: '一般',
+        name: "一般",
         value: 0,
-        unit: ''
+        unit: "",
       },
       {
-        name: '较大',
+        name: "较大",
         value: 0,
-        unit: ''
+        unit: "",
       },
       {
-        name: '重大',
+        name: "重大",
         value: 0,
-        unit: ''
+        unit: "",
       },
       {
-        name: '紧急',
+        name: "紧急",
         value: 0,
-        unit: ''
+        unit: "",
-      }
+      },
     ];
   }
   await initChart();
@@ -102,21 +102,21 @@ const initChart = () => {
   const pieName = dailyData.value.map((item: any) => item.name);
 
   const legendStyle = {
-    type: 'scroll',
+    type: "scroll",
     // orient: 'vertical',
     // height: '95%',
-    width: '50%',
+    width: "50%",
-    left: '50%',
+    left: "50%",
-    textAlign: 'left',
+    textAlign: "left",
-    align: 'left',
+    align: "left",
-    icon: 'circle', //设置为圆，删除则为矩形
+    icon: "circle", //设置为圆，删除则为矩形
     itemWidth: 10,
     itemHeight: 10,
     itemGap: 44, // 44
     formatter: function (name: any) {
       for (var i = 0; i < pieName.length; i++) {
         if (name == dailyData.value[i].name) {
-          return '{name|' + name + '}{rate|' + dailyData.value[i].value + '}';
+          return "{name|" + name + "}{rate|" + dailyData.value[i].value + "}";
         }
       }
     },
@@ -128,96 +128,96 @@ const initChart = () => {
           width: 60,
           height: 24,
           padding: [0, 0, 0, 5],
-          color: 'rgba(0, 0, 0, 0.55)'
+          color: "rgba(0, 0, 0, 0.55)",
         },
         rate: {
           fontSize: 18,
-          fontWeight: 'bold',
+          fontWeight: "bold",
-          fontFamily: 'Microsoft YaHei',
+          fontFamily: "Microsoft YaHei",
           height: 24,
           width: 30,
           padding: [60, 0, 0, -60],
-          color: 'rgba(0, 0, 0, 0.9)'
+          color: "rgba(0, 0, 0, 0.9)",
-        }
+        },
-      }
+      },
-    }
+    },
   };
   // Chart options
   const option = {
     tooltip: {
-      trigger: 'item'
+      trigger: "item",
       // formatter: '{a} <br/>{b}: {c} ({d}%)'
     },
-    color: ['#4293F4', '#FFDD77', '#FF9A23', '#F26161'],
+    color: ["#FFDD77", "#FF9A23", "#F26161", "#28CE8E"],
     legend: [
       {
-        top: '15%',
+        top: "15%",
         // 显示前两个
         data: pieName.slice(0, 2),
-        ...legendStyle
+        ...legendStyle,
       },
       {
-        top: '55%',
+        top: "55%",
         // 显示前两个
         data: pieName.slice(2, 4),
-        ...legendStyle
+        ...legendStyle,
-      }
+      },
     ],
     series: [
       {
         // name: '问题类型',
-        type: 'pie',
+        type: "pie",
-        radius: ['52%', '70%'],
+        radius: ["52%", "70%"],
-        center: ['20%', '50%'],
+        center: ["20%", "50%"],
         avoidLabelOverlap: false,
         label: {
-          show: false
+          show: false,
         },
         emphasis: {
           label: {
-            show: false
+            show: false,
-          }
+          },
         },
         labelLine: {
-          show: false
+          show: false,
         },
-        data: dailyData.value
+        data: dailyData.value,
       },
       {
-        name: '待处理问题',
+        name: "待处理问题",
-        type: 'pie',
+        type: "pie",
-        radius: ['0', '30%'],
+        radius: ["0", "30%"],
-        center: ['20%', '50%'],
+        center: ["20%", "50%"],
         z: 0,
         itemStyle: {
-          color: 'transparent',
+          color: "transparent",
           borderWidth: 0,
-          borderColor: '#eee'
+          borderColor: "#eee",
         },
         label: {
-          position: 'center',
+          position: "center",
           formatter: function () {
-            return ['{total|' + dailyCount.value + '}', '{label|待处理问题}'].join('\n');
+            return ["{total|" + dailyCount.value + "}", "{label|待处理问题}"].join("\n");
           },
           rich: {
             total: {
-              color: '#000',
+              color: "#000",
               fontSize: 28,
-              fontWeight: 'bold',
+              fontWeight: "bold",
-              fontFamily: 'DIN',
+              fontFamily: "DIN",
-              lineHeight: 34
+              lineHeight: 34,
             },
             label: {
-              color: 'rgba(0, 0, 0, 0.6)',
+              color: "rgba(0, 0, 0, 0.6)",
               fontSize: 14,
               lineHeight: 18,
-              fontFamily: 'Source Han Sans'
+              fontFamily: "Source Han Sans",
-            }
+            },
-          }
+          },
         },
-        data: [{ value: 1, name: '', tooltip: { show: false } }]
+        data: [{ value: 1, name: "", tooltip: { show: false } }],
-      }
+      },
-    ]
+    ],
   };
 
   // Set options and render chart
@@ -229,13 +229,13 @@ const getProgressData = async (time: any) => {
     // endTime: '',
     // startTime: '',
     ...time,
-    group: 'K6_1'
+    group: "K6_1",
   };
   const data: any = await chartStore.initStatisticChart(pramas);
   if (data?.yaxis?.length) {
     let newArr = data.yaxis.flatMap((v: any) => v.series);
     newArr?.forEach((item: any) => {
-      if (item.name == '比例') {
+      if (item.name == "比例") {
         progressCount.value = Number(item.sum) || 0;
       }
     });
@@ -246,17 +246,17 @@ watch(
   (newVal) => {
     getChartData(newVal);
     getProgressData(newVal);
-  }
+  },
 );
 onMounted(() => {
   // getChartData(props.timeRange);
   // getProgressData(props.timeRange);
 
-  window.addEventListener('resize', handleResize);
+  window.addEventListener("resize", handleResize);
 });
 onBeforeUnmount(() => {
   chart?.dispose();
-  window.removeEventListener('resize', handleResize);
+  window.removeEventListener("resize", handleResize);
 });
 </script>
 
@@ -286,7 +286,7 @@ onBeforeUnmount(() => {
       line-height: 22px;
       letter-spacing: 0px;
 
-      font-variation-settings: 'opsz' auto;
+      font-variation-settings: "opsz" auto;
       color: rgba(0, 0, 0, 0.55);
       span {
         font-family: DIN;
@@ -295,7 +295,7 @@ onBeforeUnmount(() => {
         line-height: 22px;
         letter-spacing: 0px;
 
-        font-variation-settings: 'opsz' auto;
+        font-variation-settings: "opsz" auto;
         color: #28ce8e;
       }
     }

src/views/Main/SafetyOverviewCard/index.vue

@@ -9,9 +9,9 @@
         <el-option label="近一年" value="4"></el-option>
       </el-select>
     </div>
+    <DailyPatrolCard :time-range="timeRange" />
     <SafetyAppraise :time-range="timeRange" />
     <RiskInspectionCard :time-range="timeRange" />
-    <DailyPatrolCard :time-range="timeRange" />
   </div>
 </template>