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/myAgency.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,16 +21,20 @@
       <el-form-item label="所属区域：">
         <el-select v-model="formInline.branchFactoryIds"
                    placeholder="请选择"
+                   style="width: 180px"
         >
           <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"
@@ -41,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>
@@ -97,6 +101,7 @@
      :show-dialog="doneDialog.show"
      :title="doneDialog.title"
      :width="doneDialog.width"
+     :btn-group="doneDialog.btnGroup"
      @handleBtn="saveDeal"
      @close:showDialog="doneDialog.show = false"
     >
@@ -121,15 +126,15 @@
             <div class="alarm-content">
               <div class="content-item">
                 <span class="name">编号:</span>
-                <span class="value">{{ workSheetDetail.workTicketNo }}</span>
+                <span class="value">{{ workSheetDetail?.workTicketNo }}</span>
               </div>
               <div class="content-item">
                 <span class="name">创建时间:</span>
-                <span class="value">{{ workSheetDetail.createTime }}</span>
+                <span class="value">{{ workSheetDetail?.createTime }}</span>
               </div>
               <div class="content-item">
                 <span class="name">闭环控制状态:</span>
-                <span class="value work-status">{{ workSheetDetail.desc }}</span>
+                <span class="value work-status">{{ workSheetDetail?.desc }}</span>
               </div>
             </div>
           </el-col>
@@ -141,12 +146,12 @@
               <div class="content-item">
                 <span class="name">所属区域:</span>
                 <span class="value">{{
-                    workSheetDetail.branchFactory || "--"
+                    workSheetDetail?.branchFactory || "--"
                   }}</span>
               </div>
               <div class="content-item">
                 <span class="name">发生位置:</span>
-                <span class="value">{{ workSheetDetail.deviceName }}</span>
+                <span class="value">{{ workSheetDetail?.deviceName }}</span>
               </div>
               <div
                   class="content-item"
@@ -179,19 +184,16 @@
                       workSheetDetail.warnType != 4 &&
                       workSheetDetail.warnType != 18
                     "
-                >{{ workSheetDetail.value }}{{ workSheetDetail.unit }}</span
+                >{{ workSheetDetail?.value }}{{ workSheetDetail?.unit }}</span
                 >
                 <span
                     class="value alarm-value"
                     v-else-if="workSheetDetail?.warnType == 4"
                 >{{  warnValueFilter(workSheetDetail?.offlineTime) }}</span>
               </div>
-              <div class="content-item" v-if="workSheetDetail.convertValue">
+              <div class="content-item" v-if="workSheetDetail?.convertValue">
                 <span class="name">折算值:</span>
-                <span class="value alarm-value"
-                >{{ workSheetDetail.convertValue
-                  }}{{ workSheetDetail.unit }}</span
-                >
+                <span class="value alarm-value">{{ workSheetDetail?.convertValue }}{{ workSheetDetail?.unit }}</span>
               </div>
               <div class="content-item">
                 <span class="name">告警时间:</span>
@@ -537,7 +539,7 @@
             <div class="label-title">原因分析</div>
             <el-input
                 class="input-style"
-                v-model="form.reason"
+                v-model="dialogReason"
                 type="textarea"
                 :rows="3"
                 placeholder="请输入内容"
@@ -551,7 +553,7 @@
             <div>
               <el-input
                   class="input-style"
-                  v-model="form.measure"
+                  v-model="dialogMeasure"
                   type="textarea"
                   :rows="3"
                   placeholder="请输入内容"
@@ -565,11 +567,14 @@
     <common-dialog
      :showDialog="assignDialog.show"
      :title="assignDialog.title"
+     :btn-group="assignDialog.btnGroup"
+     :width="assignDialog.width"
      @handleBtn="saveAssign"
      @close:showDialog="assignDialog.show = false"
     >
-      <el-form :inline="true">
+      <el-form>
         <el-form-item label="分派人:">
+          <div class="inline-box">
             <el-select v-model="handlerPeopleId" filterable placeholder="请选择分派人">
               <el-option
                   v-for="(item, i) in handlerPeople"
@@ -578,9 +583,8 @@
                   :value="item.id"
               ></el-option>
             </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="addPerson">新增</el-button>
+            <el-button type="primary" class="addBtn" @click="addPerson">新增</el-button>
+          </div>
         </el-form-item>
         <el-form-item label="已分派人:">
           <el-tag
@@ -601,7 +605,7 @@
 import { ref, reactive, onMounted, onBeforeUnmount,computed } from 'vue'
 import CommonTable from "@/components/commonTable/index.vue";
 import commonDialog from "./components/dialog.vue";
-import { getDataFun, postDataJson, postDataJSON } from '@/request/method.js';
+import { getData, getDataFun, postDataJson, postDataJSON } from '@/request/method.js';
 import moment from 'moment';
 import { getToken } from '@/utils/auth.js';
 import { ElMessage } from 'element-plus'
@@ -625,9 +629,27 @@ const workTicketNo = ref('');
 
 const handlerPeopleId = ref('');
 const handlerPeople = ref([]);
+
+const getHandlerPeople = async () => {
+  const url = '/transfer-work-ticket-pc/getTicketHandler?pageSize=999&pageNo=1';
+  try {
+    let result = await getData(url);
+    if (result && result.code === 1) {
+      const { records } = result.data;
+      handlerPeople.value = records;
+    }
+  } catch (e) {
+    ElMessage({
+      message: '接口报错',
+      type: 'error'
+    })
+  }
+}
+
 const assignDialog = ref({
   title: '闭环控制分派',
   show: false,
+  width: '30%',
   btnGroup: [
     {
       attrKey: 'save',
@@ -671,7 +693,7 @@ const saveAssign = ()=> {
     })
   });
   const params = {
-    workTicketNo,
+    workTicketNo: workTicketNo.value,
     receiveUser: '',
     receiveUserName: '',
     handleUsers: tempArr
@@ -771,7 +793,7 @@ const onReset =()=> {
 const doneDialog = ref({
   title: '闭环控制分派',
   show: false,
-  width: '50%',
+  width: '45%',
   btnGroup: [
     {
       attrKey: 'save',
@@ -788,8 +810,9 @@ const viewData = {
 
 const handleDone = async (data)=> {
   doneDialog.value.title = data.eventName;
+  workTicketNo.value = data.workTicketNo;
+  let res = await getDetail(data.workTicketNo);
   doneDialog.value.show = true;
-  /*let res = await getDetail(data.workTicketNo);
   personTag.value = [];
   if (res.handleUsers && res.handleUsers.length > 0) {
     res.handleUsers.forEach(item => {
@@ -801,12 +824,13 @@ const handleDone = async (data)=> {
       });
     });
   }
-  disposeWorkSheetDetail(res);*/
+  disposeWorkSheetDetail(res);
 }
 
 const saveDeal = () => {
   const { workTicketNo, handleValue, imgUrl } = workSheetDetail.value;
-  const { resson,measure } = this.form;
+  const reason = dialogReason.value;
+  const measure = dialogMeasure.value;
   const param = { workTicketNo, handleValue, reason, measure, imgUrl };
   const url = '/transaction/doc/finishTransaction';
   disposeHandle(url, param);
@@ -833,8 +857,10 @@ const disposeHandle = async (url, param) => {
 
 // 分派
 const handleDispatch = async (data)=> {
+   getHandlerPeople();
+   workTicketNo.value = data.workTicketNo;
+   let res = await getDetail(data.workTicketNo);
    assignDialog.value.show = true;
-   /*let res = await getDetail(data.workTicketNo);
    personTag.value = [];
    if (res.handleUsers && res.handleUsers.length > 0) {
      res.handleUsers.forEach(item => {
@@ -845,7 +871,7 @@ const handleDispatch = async (data)=> {
          userName: item.userName
        });
      });
-   }*/
+   }
 }
 
 const getDetail = (workTicketNo) => {
@@ -867,42 +893,7 @@ const changeBag = (data)=>{
 
 }
 
-const tableData = ref([
-  {
-    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([
   {
@@ -983,8 +974,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;
     }
   });
 };
@@ -1076,10 +1068,8 @@ const disposeType = (list)=> {
 
 const srcList = ref([]);
 
-const form = ref({
-  reason: "",
-  measure: "",
-});
+const dialogReason = ref('');
+const dialogMeasure = ref('');
 const imgUrlList = ref([]);
 const alarmImags = ref([]);
 const disposeWorkSheetDetail = (obj)=> {
@@ -1115,9 +1105,9 @@ const disposeWorkSheetDetail = (obj)=> {
 }
 
 onMounted(()=>{
-  // getBranchTypeList();
-  // getWarnAndTicketConfigMap();
-  // searchData();
+  getBranchTypeList();
+  getWarnAndTicketConfigMap();
+  searchData();
 });
 
 const formModel = ref({
@@ -1153,48 +1143,48 @@ const handlePaginationChange = (pagination) => {
     color: #fff;
     text-align: center;
   }
+  .table-box {
+    height: calc(100vh - 200px);
+  }
   .yellow {
     // color: #faa508;
     position: relative;
     &::before {
-      content: ' ';
+      content: " ";
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #ffb224;
       position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%);
+      left: 0;
+      top: 6px;
     }
   }
   .red {
     position: relative;
     &::before {
-      content: ' ';
+      content: " ";
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #db001d;
       position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%);
+      left: 0;
+      top: 6px;
     }
   }
 
   .purple {
     position: relative;
     &::before {
-      content: ' ';
+      content: " ";
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #aa05fa;
       position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%);
+      left: 0;
+      top: 6px;
     }
   }
   .view-btn {
@@ -1204,6 +1194,7 @@ const handlePaginationChange = (pagination) => {
   .form-box {
     height: 60vh;
     overflow-y: auto;
+    overflow-x: hidden;
     .label-title {
       position: relative;
       padding-left: 14px;
@@ -1283,5 +1274,14 @@ const handlePaginationChange = (pagination) => {
     background: #2182a0;
     border: 1px solid #2182a0;
   }
+  :deep(.el-tag) {
+    margin-right: 10px;
+  }
+  .inline-box {
+    display: flex;
+    .addBtn {
+      margin-left: 10px;
+    }
+  }
 }
 </style>
\ No newline at end of file

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;