除尘器状态监控

src/utils/chart.js

@@ -259,3 +259,80 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
     },
   ],
 });
+
+export const getGaugeOption = (option) => {
+  return {
+    series: [
+      {
+        type: "gauge",
+        startAngle: 220,
+        endAngle: 320,
+        center: ["50%", "50%"],
+        radius: "90%",
+        min: 0,
+        max: 1,
+        splitNumber: 8,
+        axisLine: {
+          lineStyle: {
+            width: 5,
+            color: [
+              [0.2, "#FF6E76"],
+              [0.8, "#67c23a"],
+              [1, "#FF6E76"],
+            ],
+          },
+        },
+        pointer: {
+          icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
+          length: "12%",
+          width: 20,
+          offsetCenter: [0, "-60%"],
+          itemStyle: {
+            color: "auto",
+          },
+        },
+        axisTick: {
+          length: 0,
+          lineStyle: {
+            color: "auto",
+            width: 2,
+          },
+        },
+        splitLine: {
+          length: 0,
+          lineStyle: {
+            color: "auto",
+            width: 5,
+          },
+        },
+        axisLabel: {
+          color: "#464646",
+          fontSize: 20,
+          distance: -60,
+          rotate: "tangential",
+          show: false,
+        },
+        title: {
+          offsetCenter: [0, "70%"],
+          fontSize: 14,
+          fontWeight: "bolder",
+        },
+        detail: {
+          fontSize: 20,
+          offsetCenter: [0, 0],
+          valueAnimation: true,
+          formatter: function (value) {
+            return Math.round(value * 100) + "";
+          },
+          color: "inherit",
+        },
+        data: [
+          {
+            value: option.value || 0,
+            name: option.chartName || '',
+          },
+        ],
+      },
+    ],
+  };
+}
\ No newline at end of file

src/views/dustMonitoring/components/warn.vue

@@ -4,8 +4,8 @@
     <span class="jump-icon">>></span>
   </div>
   <div class="content">
-    <div class="item" v-for="item in listInfo" :key="item.id">
-        <img src="@/assets/icons/notice.png" alt="">{{item.info}}
+    <div class="item" v-for="item in listInfo" :key="item">
+        <img src="@/assets/icons/notice.png" alt="">{{item}}
     </div>
   </div>
 </template>

src/views/dustMonitoring/index.vue

@@ -42,7 +42,7 @@
           </div>
         </div>
         <div class="warn-info">
-          <warnCom :listInfo="testList"></warnCom>
+          <warnCom :listInfo="warnInfoList"></warnCom>
         </div>
       </div>
       <div class="right-box">
@@ -52,7 +52,7 @@
           </div>
         </div>
         <div class="part2">
-          <div class="dust-title">2号窑尾除尘器</div>
+          <div class="dust-title">{{ dusterName }}</div>
           <div class="dust-info">
             <div class="info-item" v-for="item in dustInfo" :key="item.label">
               <span class="label">{{ item.label }}</span>
@@ -70,10 +70,18 @@
           <div class="position-info">
             <div class="left" v-if="detailObj.compartHealthList.length > 0">
               <div class="part">
-                <div class="point warn" v-for="item in detailObj.compartHealthList[0]" :key="item"></div>
+                <div
+                  class="point warn"
+                  v-for="item in detailObj.compartHealthList[0]"
+                  :key="item"
+                ></div>
               </div>
               <div class="part">
-                <div class="point warn" v-for="item in detailObj.compartHealthList[1]" :key="item"></div>
+                <div
+                  class="point warn"
+                  v-for="item in detailObj.compartHealthList[1]"
+                  :key="item"
+                ></div>
               </div>
             </div>
             <!-- <div class="right">
@@ -101,21 +109,21 @@
           </div>
         </div>
         <div class="warn-info">
-          <warnCom :listInfo="testList"></warnCom>
+          <warnCom :listInfo="closedLoopInfoList"></warnCom>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, reactive, onMounted, watch, computed } from "vue";
 import * as echarts from "echarts";
 import { getDataFun } from "@/request/method.js";
 import { useUsersStore } from "@/pinia/user.js";
 import moment from "moment";
 import warnCom from "./components/warn.vue";
 import healthyCom from "./components/healthyProgress.vue";
-import { getLineOption2 } from "@/utils/chart";
+import { getLineOption2, getGaugeOption } from "@/utils/chart";
 const userStore = useUsersStore();
 const form = reactive({
   dusterNo: "",
@@ -257,18 +265,12 @@ const indicatorFun = (target, domId, option) => {
   target.value.setOption(option);
 };
 const dusterList = ref([]);
-// 获取除尘器名称
+// 获取除尘器名称枚举值
 const getDusterNameEnum = () => {
   const url = "/bag/cycle/getDusterList";
   getDataFun(url, {})
     .then((res) => {
-      // dusterList.value = (res && res.data) || [];
-      dusterList.value = [
-        {
-          dusterNo: "wp001",
-          dusterName: "雾炮001",
-        },
-      ];
+      dusterList.value = (res && res.data) || [];
       // 判断除尘器名称是否有值
       form.dusterNo = dusterList.value[0].dusterNo;
     })
@@ -355,7 +357,7 @@ const detailObj = reactive({
   bachflushCompart: "",
   leakageCompart: "",
   faultCompart: "",
-  compartHealthList: []
+  compartHealthList: [],
 });
 // 获取除尘器详情
 const getDustDetail = () => {
@@ -388,7 +390,79 @@ const getDustDetail = () => {
         (res.data && res.data.bachflushCompart) || "";
       detailObj.leakageCompart = (res.data && res.data.leakageCompart) || "";
       detailObj.faultCompart = (res.data && res.data.bachflushCompart) || "";
-      detailObj.compartHealthList = (res.data && res.data.compartHealthList) || [];
+      detailObj.compartHealthList = (res.data &&
+        res.data.compartHealthList) || [
+        [
+          {
+            compartNo: "1",
+            healthStatus: 1,
+            sort: 1,
+          },
+          {
+            compartNo: "2",
+            healthStatus: 1,
+            sort: 2,
+          },
+          {
+            compartNo: null,
+            healthStatus: 1,
+            sort: 3,
+          },
+          {
+            compartNo: null,
+            healthStatus: 1,
+            sort: 4,
+          },
+          {
+            compartNo: null,
+            healthStatus: 1,
+            sort: 5,
+          },
+          {
+            compartNo: null,
+            healthStatus: 1,
+            sort: 6,
+          },
+          {
+            compartNo: null,
+            healthStatus: 1,
+            sort: 7,
+          },
+          {
+            compartNo: null,
+            healthStatus: 1,
+            sort: 8,
+          },
+          {
+            compartNo: null,
+            healthStatus: 1,
+            sort: 9,
+          },
+          {
+            compartNo: null,
+            healthStatus: 1,
+            sort: 10,
+          },
+          {
+            compartNo: null,
+            healthStatus: 1,
+            sort: 11,
+          },
+          {
+            compartNo: null,
+            healthStatus: 1,
+            sort: 12,
+          },
+        ],
+      ];
+      indicatorFun(indicatorOneInstance, "indicatorOne", getGaugeOption({
+        value: dustInfo[0].value / 100,
+        chartName:'压差'
+      }));
+      indicatorFun(indicatorTwoInstance, "indicatorTwo", getGaugeOption({
+        value: dustInfo[1].value / 55,
+        chartName:'粉尘浓度'
+      }));
     })
     .catch(() => {
       dustInfo.forEach((item) => {
@@ -445,8 +519,6 @@ const getAlarmInfo = () => {
 };
 onMounted(() => {
   getDusterNameEnum();
-  indicatorFun(indicatorOneInstance, "indicatorOne", option2);
-  indicatorFun(indicatorTwoInstance, "indicatorTwo", option2);
 });
 watch(
   () => form.dusterNo,
@@ -468,6 +540,10 @@ watch(
     getAlarmInfo();
   }
 );
+const dusterName = computed(() => {
+  return dusterList.value.find((item) => item.dusterNo == form.dusterNo)
+    ?.dusterName;
+});
 </script>
 <style lang="scss" scoped>
 $borderColor: #bbbdc391;