Merge branch 'dev' of https://app.bmetech.com/liuzhaohui/dctomproject into dev

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/closeManage/components/dialog.vue

@@ -91,14 +91,14 @@ const handleSave = ()=> {
   width: 100%;
   .real-btn {
     width: auto;
-    height: 28px;
+    height: 32px;
     background: rgb(64, 158, 255);
     border: 1px solid rgb(64, 158, 255);
     border-radius: 4px;
     box-shadow: 0 1px 9px 0 rgba(12, 123, 255, 0.3) inset;
     text-align: center;
     padding: 0 16px;
-    line-height: 28px;
+    line-height: 32px;
     color: rgba(255, 255, 255, 0.85);
     margin-right: 16px;
     cursor: pointer;

src/views/closeManage/myDone.vue

@@ -4,6 +4,7 @@
       <el-form-item label="事件名称：">
         <el-select v-model="formInline.eventNameId"
                    placeholder="请选择"
+                   style="width: 280px"
         >
           <el-option
               v-for="(item, index) in basicConfiguration.ticketEventName"
@@ -20,17 +21,20 @@
       <el-form-item label="所属区域：">
         <el-select v-model="formInline.branchFactoryIds"
                    placeholder="请选择"
+                   style="width: 180px"
         >
-          <el-option label="全部" value="" />
           <el-option v-for="(item, index) in basicConfiguration.branchFactoryList"
-                     :key="item.id"
-                     :label="item.name"
-                     :value="item.id"
+                     :key="item.branchFactoryId"
+                     :label="item.branchFactory"
+                     :value="item.branchFactoryId"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="设备类型">
-        <el-select v-model="formInline.deviceType">
+        <el-select v-model="formInline.deviceType"
+                   style="width: 180px"
+                   placeholder="请选择"
+        >
           <el-option label="全部" value="" />
           <el-option
               v-for="(item, index) in basicConfiguration.deviceList"
@@ -42,14 +46,13 @@
         </el-select>
       </el-form-item>
       <el-form-item label="发生时间">
-        <el-date-picker type="daterange"
+        <el-date-picker type="datetimerange"
                         v-model="formInline.createTime"
                         range-separator="至"
                         start-placeholder="开始日期"
                         end-placeholder="结束日期"
                         format="YYYY-MM-DD HH:mm:ss"
-                        date-format="YYYY/MM/DD ddd"
-                        time-format="A hh:mm:ss"
+                        value-format="YYYY-MM-DD HH:mm:ss"
         />
       </el-form-item>
       <el-form-item>
@@ -935,42 +938,7 @@ const changeBag = (data)=>{
 
 }
 
-const tableData = [
-  {
-    id: 1,
-    name: '张三',
-    phone: '13888888888',
-    email: '<EMAIL>',
-    branchFactory: '上海分公司',
-    deviceType: '烟感',
-    eventTime: '2021-09-09 12:00:00',
-    eventStatus: '已处理',
-    eventDetail: '设备报警',
-    level: 1
-  },
-  {
-    id: 2,
-    name: '张三',
-    phone: '13888888888',
-    email: '<EMAIL>',
-    branchFactory: '上海分公司',
-    deviceType: '烟感',
-    eventTime: '2021-09-09 12:00:00',
-    eventStatus: '已处理',
-    eventDetail: '设备报警',
-    level: 2
-  },
-  {
-    id: 3,
-    name: '张三',
-    phone: '13888888888',
-    email: '<EMAIL>',
-    branchFactory: '上海分公司',
-    deviceType: '烟感',
-    eventTime: '20',
-    level: 3
-  }
-];
+const tableData = ref([]);
 
 const tableColumns = ref([
   {
@@ -1051,8 +1019,9 @@ const getWarnAndTicketConfigMap = ()=> {
   }
   getDataFun(url,params).then(res => {
     if (res && res.code === 1) {
-      const { ticketEventName, eventType } = res.data;
+      const { ticketEventName, deviceType } = res.data;
       basicConfiguration.ticketEventName = basicConfiguration.ticketEventName.concat(ticketEventName);
+      basicConfiguration.deviceList = deviceType;
     }
   });
 };
@@ -1143,9 +1112,9 @@ const disposeType = (list)=> {
 }
 
 onMounted(() => {
-  // getBranchTypeList();
-  // getWarnAndTicketConfigMap();
-  // searchData();
+  getBranchTypeList();
+  getWarnAndTicketConfigMap();
+  searchData();
 });
 
 const currentPage = ref(1);
@@ -1176,6 +1145,9 @@ const handlePaginationChange = (pagination) => {
     color: #fff;
     text-align: center;
   }
+  .table-box {
+    height: calc(100vh - 200px);
+  }
   .yellow {
     // color: #faa508;
     position: relative;
@@ -1186,9 +1158,8 @@ const handlePaginationChange = (pagination) => {
       border-radius: 50%;
       background: #ffb224;
       position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%);
+      left: 0;
+      top: 6px;
     }
   }
   .red {
@@ -1200,9 +1171,8 @@ const handlePaginationChange = (pagination) => {
       border-radius: 50%;
       background: #db001d;
       position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%);
+      left: 0;
+      top: 6px;
     }
   }
 
@@ -1215,9 +1185,8 @@ const handlePaginationChange = (pagination) => {
       border-radius: 50%;
       background: #aa05fa;
       position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%);
+      left: 0;
+      top: 6px;
     }
   }
   .view-btn {

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;