除尘器监控页面联调

src/utils/chart.js

@@ -204,3 +204,59 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
     },
   ],
 });
+
+export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康度指数（%）") => ({
+  tooltip: {
+    trigger: "axis",
+  },
+  grid: {
+    left: "5%",
+    right: "5%",
+    bottom: "15%",
+    top: "20%",
+  },
+  legend: {
+    data: [legendDesc],
+    top: "0%",
+    icon: "circle",
+    itemWidth: 10,
+    itemHeight: 10,
+    itemGap: 10,
+  },
+  xAxis: {
+    type: "category",
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#E9ECF2",
+      },
+    },
+    axisLabel: {
+      color: "rgba(0,0,0,0.6)",
+    },
+    data: xData,
+  },
+  yAxis: {
+    type: "value",
+    axisLabel: {
+      color: "rgba(0,0,0,0.6)",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#E9ECF2",
+        type: "dashed",
+      },
+    },
+  },
+  series: [
+    {
+      name: legendDesc,
+      type: "line",
+      color: "#399DFA",
+      data: seriesData,
+      smooth: true,
+    },
+  ],
+});
\ No newline at end of file

src/views/dustMonitoring/components/warn.vue

@@ -23,6 +23,7 @@ const props = defineProps({
  .jump-icon {
     font-weight: bold;
     color: #018796;
+    cursor: pointer;
  }
 }
 .content {

src/views/dustMonitoring/index.vue

@@ -52,9 +52,12 @@
           <div class="dust-info">
             <div class="info-item" v-for="item in dustInfo" :key="item.label">
               <span class="lable">{{ item.label }}</span>
-              <span class="value">{{ item.value }}</span>
-              <span class="unit">{{ item.unit }}</span>
+              <span class="value"
+                >{{ item.value }} （<span class="unit">{{ item.unit }}</span
+                >）
+              </span>
             </div>
+            <div></div>
           </div>
           <div class="indicator-box">
             <div class="indicator-item" id="indicatorOne"></div>
@@ -81,15 +84,15 @@
           <div class="other-info">
             <div>
               <span>反吹仓室：</span>
-              <span>3#仓-1排</span>
+              <span>{{ detailObj.bachflushCompart }}</span>
             </div>
             <div>
               <span>泄露仓室：</span>
-              <span>5#仓、10#仓、13#仓</span>
+              <span>{{ detailObj.leakageCompart }}</span>
             </div>
             <div>
               <span>故障仓室：</span>
-              <span>5#仓、10#仓、13#仓</span>
+              <span>{{ detailObj.faultCompart }}</span>
             </div>
           </div>
         </div>
@@ -107,6 +110,7 @@ import { getDataFun } from "@/request/method.js";
 import { useUsersStore } from "@/pinia/user.js";
 import moment from "moment";
 import warnCom from "./components/warn.vue";
+import { getLineOption2 } from "@/utils/chart";
 const userStore = useUsersStore();
 const form = reactive({
   dusterNo: "",
@@ -131,18 +135,14 @@ const option = {
     },
   ],
 };
-const chartInstance = reactive([]);
+const chartInstance = reactive([null, null, null]);
 const chartData = reactive([{}, {}, {}]);
-const initChart = () => {
-  chartData.forEach((item, index) => {
-    if (chartInstance[index] && chartInstance[index].dispose) {
-      chartInstance[index].dispose();
-    }
-    chartInstance[index] = echarts.init(
-      document.getElementById("chart" + index)
-    );
-    chartInstance[index].setOption(option);
-  });
+const initChart = (instance, option, domEl) => {
+  if (instance && instance.dispose) {
+    instance.dispose();
+  }
+  instance = echarts.init(document.getElementById(domEl));
+  instance.setOption(option);
 };
 const dustInfo = reactive([
   {
@@ -285,11 +285,72 @@ const getHealthIndex = () => {
   };
   getDataFun(url, params).then((res) => {
     if (res && res.data) {
+      const xData = [];
+      const seriesData = [];
+      res.data.forEach((item) => {
+        xData.push(item.time);
+        seriesData.push(item.healthIndex);
+      });
+      const option = getLineOption2(xData, seriesData, "健康度指数（%）");
+      initChart(chartData[0], option, "chart0");
     }
   });
 };
 // 获取压力差
+const getPressure = () => {
+  if (!form.dusterNo) {
+    return;
+  }
+  const url = "/dusterStatusMonitor/pressureDiffCurve";
+  const params = {
+    customerId: userStore.customerId,
+    deviceNo: form.dusterNo,
+    startTime: moment(form.dateValue[0]).format("YYYY-MM-DD HH:mm:ss"),
+    endTime: moment(form.dateValue[1]).format("YYYY-MM-DD HH:mm:ss"),
+  };
+  getDataFun(url, params).then((res) => {
+    if (res && res.data) {
+      const xData = [];
+      const seriesData = [];
+      res.data.forEach((item) => {
+        xData.push(item.time);
+        seriesData.push(item.pressureDiff);
+      });
+      const option = getLineOption2(xData, seriesData, "压力差（kpa）");
+      initChart(chartData[1], option, "chart1");
+    }
+  });
+};
 // 获取能耗
+const getEnergy = () => {
+  if (!form.dusterNo) {
+    return;
+  }
+  const url = "/dusterStatusMonitor/energyConsumptionCurve";
+  const params = {
+    customerId: userStore.customerId,
+    deviceNo: form.dusterNo,
+    startTime: moment(form.dateValue[0]).format("YYYY-MM-DD HH:mm:ss"),
+    endTime: moment(form.dateValue[1]).format("YYYY-MM-DD HH:mm:ss"),
+  };
+  getDataFun(url, params).then((res) => {
+    if (res && res.data) {
+      const xData = [];
+      const seriesData = [];
+      res.data.forEach((item) => {
+        xData.push(item.time);
+        seriesData.push(item.energyConsumption);
+      });
+      const option = getLineOption2(xData, seriesData, "能耗（kwh）");
+      initChart(chartData[2], option, "chart2");
+    }
+  });
+};
+const detailObj = reactive({
+  bachflushCompart: "",
+  leakageCompart: "",
+  faultCompart: "",
+});
 // 获取除尘器详情
 const getDustDetail = () => {
   if (!form.dusterNo) {
@@ -317,6 +378,10 @@ const getDustDetail = () => {
           item.value = 0;
         });
       }
+      detailObj.bachflushCompart =
+        (res.data && res.data.bachflushCompart) || "";
+      detailObj.leakageCompart = (res.data && res.data.leakageCompart) || "";
+      detailObj.faultCompart = (res.data && res.data.bachflushCompart) || "";
     })
     .catch(() => {
       dustInfo.forEach((item) => {
@@ -373,7 +438,6 @@ const getAlarmInfo = () => {
 };
 onMounted(() => {
   getDusterNameEnum();
-  initChart();
   indicatorFun(indicatorOneInstance, "indicatorOne", option2);
   indicatorFun(indicatorTwoInstance, "indicatorTwo", option2);
 });
@@ -381,6 +445,18 @@ watch(
   () => form.dusterNo,
   () => {
     getHealthIndex();
+    getPressure();
+    getEnergy();
+    getDustDetail();
+    getAlarmInfo();
+  }
+);
+watch(
+  () => form.dateValue,
+  () => {
+    getHealthIndex();
+    getPressure();
+    getEnergy();
     getDustDetail();
     getAlarmInfo();
   }
@@ -391,18 +467,22 @@ $borderColor: #bbbdc3;
 .dust-box {
   width: 100%;
   height: calc(100% - 14px);
-  background: #fff;
   box-sizing: border-box;
-  background: #ffffff;
-  border-radius: 6px;
-  box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
+  // border-radius: 6px;
+  // box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
   padding: 1rem;
   overflow: hidden;
 }
 .top-box {
+  padding-top: 18px;
+  padding-left: 10px;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
+  margin-bottom: 1rem;
 }
 .left-box {
-  width: 45%;
+  width: 50%;
   .part1 {
     border-radius: 6px;
     border: 1px solid rgba(13, 15, 18, 0.1);
@@ -410,6 +490,7 @@ $borderColor: #bbbdc3;
     width: 100%;
     height: 100%;
     height: 67vh;
+    background: #fff;
     .chart-box {
       width: 100%;
       height: 31%;
@@ -421,13 +502,15 @@ $borderColor: #bbbdc3;
   }
 }
 .right-box {
-  width: 45%;
+  width: 50%;
+
   .part1 {
     width: 100%;
     height: 10vh;
     border-radius: 6px;
     border: 1px solid rgba(13, 15, 18, 0.1);
     box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
+    background: #fff;
   }
   .part2 {
     margin-top: 20px;
@@ -438,33 +521,40 @@ $borderColor: #bbbdc3;
     box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
     overflow: hidden;
     overflow-y: auto;
-    padding: 20px 0;
+    padding: 20px;
     box-sizing: border-box;
+    background: #fff;
+    position: relative;
     .dust-title {
       text-align: center;
       font-size: 20px;
       font-weight: 600;
       padding-bottom: 20px;
       border-bottom: 1px solid $borderColor;
+      width: 100%;
     }
     .dust-info {
-      padding: 20px 20px;
-      border-bottom: 1px solid $borderColor;
+      padding: 0.5rem 1rem;
+      background: #e7eef5;
+      border-radius: 8px;
+      margin: 20px 0;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0 10px;
     }
     .info-item {
       padding: 3px 0;
-      span {
-        display: inline-block;
-      }
-      .lable {
-        width: 40%;
-      }
-      .value {
-        width: 50%;
-      }
-      .unit {
-        width: 10%;
-      }
+      width: calc(50% - 5px);
+      box-sizing: border-box;
+      margin: 0.5rem 0;
+      padding: 0.4rem 0.6rem;
+      background: white;
+      border-radius: 6px;
+      height: 35px;
+      font-size: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
     .indicator-box {
       display: flex;
@@ -525,16 +615,17 @@ $borderColor: #bbbdc3;
   }
 }
 .warn-info {
-  margin-top: 10px;
+  margin-top: 20px;
   height: 15vh;
   border-radius: 6px;
-  border: 1px solid rgba(13, 15, 18, 0.1);
   box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
   padding: 10px 30px;
+  background: #fff;
 }
 .layout1 {
   display: flex;
   justify-content: space-between;
+  gap: 16px;
 }
 .layout2 {
   display: flex;