除尘监控优化

src/utils/chart.js

@@ -269,48 +269,45 @@ export const getGaugeOption = (option) => {
         endAngle: 320,
         center: ["50%", "50%"],
         radius: "90%",
-        min: 0,
-        max: 1,
+        min: option.min || 0,
+        max: option.max || 100,
         splitNumber: 8,
         axisLine: {
           lineStyle: {
-            width: 5,
+            width: 30,
             color: [
-              [0.2, "#FF6E76"],
-              [0.8, "#67c23a"],
-              [1, "#FF6E76"],
+              [0.2, "#fd666d"],
+              [0.8, "#48cd4d"],
+              [1, "#fd666d"],
             ],
           },
         },
         pointer: {
-          icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
-          length: "12%",
-          width: 20,
-          offsetCenter: [0, "-60%"],
           itemStyle: {
-            color: "auto",
-          },
+            color: 'auto'
+          }
         },
         axisTick: {
-          length: 0,
+          distance: -30,
+          length: 10,
           lineStyle: {
-            color: "auto",
+            color: "#fff",
             width: 2,
           },
         },
         splitLine: {
-          length: 0,
+          distance: -30,
+          length: 38,
           lineStyle: {
-            color: "auto",
-            width: 5,
+            color: '#fff',
+            width: 2
           },
         },
         axisLabel: {
-          color: "#464646",
-          fontSize: 20,
-          distance: -60,
+          color: 'inherit',
+          fontSize: 10,
+          distance: 30,
           rotate: "tangential",
-          show: false,
         },
         title: {
           offsetCenter: [0, "70%"],

src/views/dustMonitoring/components/warn.vue

 <template>
   <div class="title layout1">
-    <span class="warn-title">告警：</span>
+    <span class="warn-title">{{ title }}：</span>
     <span class="jump-icon">>></span>
   </div>
   <div class="content">
@@ -15,6 +15,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  title: {
+    type: String,
+    default: "告警",
+  }
 });
 </script>
 <style scoped lang="scss">

src/views/dustMonitoring/index.vue

@@ -42,7 +42,7 @@
           </div>
         </div>
         <div class="warn-info">
-          <warnCom :listInfo="warnInfoList"></warnCom>
+          <warnCom title="告警" :listInfo="warnInfoList"></warnCom>
         </div>
       </div>
       <div class="right-box">
@@ -109,14 +109,14 @@
           </div>
         </div>
         <div class="warn-info">
-          <warnCom :listInfo="closedLoopInfoList"></warnCom>
+          <warnCom title="闭环" :listInfo="closedLoopInfoList"></warnCom>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import { ref, reactive, onMounted, watch, computed } from "vue";
+import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";
 import * as echarts from "echarts";
 import { getDataFun } from "@/request/method.js";
 import { useUsersStore } from "@/pinia/user.js";
@@ -148,7 +148,7 @@ const option = {
     },
   ],
 };
-const chartInstance = reactive([null, null, null]);
+const chartInstance = reactive({});
 const chartData = reactive([{}, {}, {}]);
 const initChart = (instance, option, domEl) => {
   if (instance && instance.dispose) {
@@ -156,6 +156,7 @@ const initChart = (instance, option, domEl) => {
   }
   instance = echarts.init(document.getElementById(domEl));
   instance.setOption(option);
+  chartInstance[domEl] = instance;
 };
 const dustInfo = reactive([
   {
@@ -455,14 +456,26 @@ const getDustDetail = () => {
           },
         ],
       ];
-      indicatorFun(indicatorOneInstance, "indicatorOne", getGaugeOption({
-        value: dustInfo[0].value / 100,
-        chartName:'压差'
-      }));
-      indicatorFun(indicatorTwoInstance, "indicatorTwo", getGaugeOption({
-        value: dustInfo[1].value / 55,
-        chartName:'粉尘浓度'
-      }));
+      indicatorFun(
+        indicatorOneInstance,
+        "indicatorOne",
+        getGaugeOption({
+          value: dustInfo[0].value / 100,
+          chartName: "压差",
+          min: 1,
+          max: 100,
+        })
+      );
+      indicatorFun(
+        indicatorTwoInstance,
+        "indicatorTwo",
+        getGaugeOption({
+          value: dustInfo[1].value,
+          chartName: "粉尘浓度",
+          min: 5,
+          max: 50,
+        })
+      );
     })
     .catch(() => {
       dustInfo.forEach((item) => {
@@ -470,28 +483,6 @@ const getDustDetail = () => {
       });
     });
 };
-const testList = reactive([
-  {
-    id: 1,
-    info: "测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1",
-  },
-  {
-    id: 2,
-    info: "测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1",
-  },
-  {
-    id: 3,
-    info: "测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1",
-  },
-  // {
-  //   id: 4,
-  //   info: "测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1",
-  // },
-  // {
-  //   id: 5,
-  //   info: "测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1",
-  // },
-]);
 const closedLoopInfoList = ref([]);
 const warnInfoList = ref([]);
 // 获取告警信息
@@ -517,9 +508,20 @@ const getAlarmInfo = () => {
       warnInfoList.value = [];
     });
 };
+const resizeFun = () => {
+  indicatorOneInstance && indicatorOneInstance.value.resize();
+  indicatorTwoInstance && indicatorTwoInstance.value.resize();
+  Object.keys(chartInstance).forEach((key) => {
+    chartInstance[key] && chartInstance[key].resize();
+  });
+};
 onMounted(() => {
   getDusterNameEnum();
+  window.addEventListener("resize", resizeFun);
 });
+onUnmounted(() => {
+  window.removeEventListener("resize", resizeFun);
+})
 watch(
   () => form.dusterNo,
   () => {