除尘器设备联调

src/request/index.js

@@ -7,11 +7,13 @@ const ENV = import.meta.env
 
 const requestObj = {};
 
+const source = axios.CancelToken.source()
 const service = axios.create({
   headers: {
     "Content-Type": "application/json",
     "X-Requested-With": "XMLHttpRequest"
-  }
+  },
+  cancelToken: source.token
 });
 
 service.interceptors.request.use(

src/views/dustMonitoring/components/warn.vue

+<template>
+  <div class="title layout1">
+    <span>告警：</span>
+    <span class="jump-icon">>></span>
+  </div>
+  <div class="content">
+    <div class="item" v-for="item in listInfo" :key="item.id">
+        {{item.info}}
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  listInfo: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+<style scoped lang="scss">
+.title {
+ height: 20px;
+ .jump-icon {
+    font-weight: bold;
+    color: #018796;
+ }
+}
+.content {
+    width: 100%;
+    height: calc(15vh - 30px);
+    padding: 10px 0px 10px 30px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    .item {
+        width: 100%;
+    }
+}
+
+.content::-webkit-scrollbar {
+  width: 2px;
+  background-color: rgba(13, 15, 18, 0.1);
+}
+ 
+.layout1 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>
\ No newline at end of file

src/views/dustMonitoring/index.vue

 <template>
+  <div class="dust-box">
     <div class="top-box">
       <el-form
         :model="form"
@@ -8,10 +9,16 @@
       >
         <el-form-item label="除尘器名称">
           <el-select
-          v-model="form.dustName"
+            v-model="form.dusterNo"
             placeholder="请选择除尘器"
             style="width: 240px"
           >
+            <el-option
+              v-for="item in dusterList"
+              :key="item.dusterNo"
+              :label="item.dusterName"
+              :value="item.dusterNo"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="分析时间">
@@ -34,7 +41,9 @@
             <div :id="'chart' + index" class="chart-item"></div>
           </div>
         </div>
-      <div class="warn-info"></div>
+        <div class="warn-info">
+          <warnCom :listInfo="testList"></warnCom>
+        </div>
       </div>
       <div class="right-box">
         <div class="part1"></div>
@@ -84,16 +93,27 @@
             </div>
           </div>
         </div>
-      <div class="warn-info"></div>
+        <div class="warn-info">
+          <warnCom :listInfo="testList"></warnCom>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, watch } 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";
+const userStore = useUsersStore();
 const form = reactive({
-  dustName: "",
-  dateValue: [],
+  dusterNo: "",
+  dateValue: [
+    new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 7),
+    new Date(),
+  ],
 });
 const option = {
   xAxis: {
@@ -125,12 +145,29 @@ const initChart = () => {
   });
 };
 const dustInfo = reactive([
-  { label: "压差", value: "0.0", unit: "KPa" },
-  { label: "粉尘浓度", value: "0.0", unit: "mg/m3" },
-  { label: "电磁阀数量", value: "0.0", unit: "KPa" },
-  { label: "仓室数量", value: "0.0", unit: "KPa" },
-  { label: "布袋检测仪数量", value: "0.0", unit: "KPa" },
-  { label: "脉冲检测仪数量", value: "0.0", unit: "KPa" },
+  {
+    label: "压差",
+    value: "0.0",
+    unit: "",
+    key: "pressureDiff",
+    unitKey: "pressureDiffUnit",
+  },
+  {
+    label: "粉尘浓度",
+    value: "0.0",
+    unit: "",
+    key: "dustConcentration",
+    unitKey: "dustConcentrationUnit",
+  },
+  { label: "电磁阀数量", value: "0.0", unit: "", key: "valveNum" },
+  { label: "仓室数量", value: "0.0", unit: "", key: "compartNum" },
+  { label: "布袋检测仪数量", value: "0.0", unit: "", key: "bagDetectorNum" },
+  {
+    label: "脉冲检测仪数量",
+    value: "0.0",
+    unit: "",
+    key: "pulseDetectorNum",
+  },
 ]);
 const option2 = {
   series: [
@@ -214,25 +251,165 @@ const indicatorFun = (target, domId, option) => {
   target.value = echarts.init(document.getElementById(domId));
   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",
+        },
+      ];
+      // 判断除尘器名称是否有值
+      form.dusterNo = dusterList.value[0].dusterNo;
+    })
+    .catch(() => {
+      dusterList.value = [];
+    });
+};
+// 获取健康度指数
+const getHealthIndex = () => {
+  if (!form.dusterNo) {
+    return;
+  }
+  const url = "/dusterStatusMonitor/healthIndexCurve";
+  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 getDustDetail = () => {
+  if (!form.dusterNo) {
+    return;
+  }
+  const url = "/dusterStatusMonitor/dusterDetail";
+  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) {
+        for (let i = 0; i < dustInfo.length; i++) {
+          dustInfo[i].value = res.data[dustInfo[i].key] || 0;
+          dustInfo[i].unit = "个";
+          (dustInfo[i].unitKey &&
+            (dustInfo[i].unit = res.data[dustInfo[i].unitKey])) ||
+            "个";
+        }
+      } else {
+        dustInfo.forEach((item) => {
+          item.value = 0;
+        });
+      }
+    })
+    .catch(() => {
+      dustInfo.forEach((item) => {
+        item.value = 0;
+      });
+    });
+};
+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 = reactive([]);
+const warnInfoList = reactive([]);
+// 获取告警信息
+const getAlarmInfo = () => {
+  if (!form.dusterNo) {
+    return;
+  }
+  const url = "/dusterStatusMonitor/warnAndClosedLoopInfo";
+  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) => {
+      closedLoopInfoList =
+        (res && res.data && res.data.closedLoopInfoList) || [];
+      warnInfoList = (res && res.data && res.data.warnInfoList) || [];
+    })
+    .catch(() => {
+      closedLoopInfoList = [];
+      warnInfoList = [];
+    });
+};
 onMounted(() => {
+  getDusterNameEnum();
   initChart();
   indicatorFun(indicatorOneInstance, "indicatorOne", option2);
   indicatorFun(indicatorTwoInstance, "indicatorTwo", option2);
 });
+watch(
+  () => form.dusterNo,
+  () => {
+    getHealthIndex();
+    getDustDetail();
+    getAlarmInfo();
+  }
+);
 </script>
 <style lang="scss" scoped>
 $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);
+  padding: 1rem;
+  overflow: hidden;
+}
 .top-box {
 }
 .left-box {
   width: 45%;
   .part1 {
-    border-radius: 15px;
-    background-color: #fff;
+    border-radius: 6px;
+    border: 1px solid rgba(13, 15, 18, 0.1);
+    box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
     width: 100%;
     height: 100%;
-    height: 70vh;
+    height: 67vh;
     .chart-box {
       width: 100%;
       height: 31%;
@@ -248,15 +425,17 @@ $borderColor: #bbbdc3;
   .part1 {
     width: 100%;
     height: 10vh;
-    border-radius: 15px;
-    background-color: #fff;
+    border-radius: 6px;
+    border: 1px solid rgba(13, 15, 18, 0.1);
+    box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
   }
   .part2 {
     margin-top: 20px;
     width: 100%;
-    height: calc(60vh - 20px);
-    border-radius: 15px;
-    background-color: #fff;
+    height: calc(57vh - 20px);
+    border-radius: 6px;
+    border: 1px solid rgba(13, 15, 18, 0.1);
+    box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
     overflow: hidden;
     overflow-y: auto;
     padding: 20px 0;
@@ -307,7 +486,8 @@ $borderColor: #bbbdc3;
         width: 48%;
         flex-wrap: wrap;
         // box-shadow: 0 9px 20px 0 rgba(164, 162, 171, 0.842);
-        box-shadow: color(srgb 0.360784 0.788235 0.654902 / 0.5) 0px 0px 20px 0px;
+        box-shadow: color(srgb 0.360784 0.788235 0.654902 / 0.5) 0px 0px 20px
+          0px;
         // box-shadow: 0px 0px 10px 0px rgba(164, 162, 171, 0.842);
       }
       .part {
@@ -339,12 +519,18 @@ $borderColor: #bbbdc3;
       border-top: 1px solid $borderColor;
     }
   }
+  .part2::-webkit-scrollbar {
+    width: 2px;
+    background-color: rgba(13, 15, 18, 0.1);
+  }
 }
 .warn-info {
   margin-top: 10px;
   height: 15vh;
-  border-radius: 15px;
-  background-color: #fff;
+  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;
 }
 .layout1 {
   display: flex;