Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-5

src/views/vent/home/clique/components/wind-monitor.vue

@@ -131,7 +131,7 @@
         yAxis: {
           type: 'value',
           name: '(m³/min)',
-          max: 5000,
+          max: 10000,
           axisLabel: {
             textStyle: {
               fontSize: 14,

src/views/vent/monitorManager/deviceTypeMonitor/components/bundle-modal.vue

@@ -256,7 +256,7 @@
           item.readTime = item.readTime?.substring(11)
           return item
         })
-      })
+      },{immediate:true,deep:true})
   
       return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, handleOk, handleCancel, deviceList, activeDeviceID, posMonitor, echatsOption, posList, chartsColumns };
     },

src/views/vent/monitorManager/deviceTypeMonitor/components/dust-modal.vue

@@ -3,7 +3,7 @@
       <div class="fiber-modal">
         <div class="modal-left">
           <div v-for="device in deviceList" class="link-item" :class="{'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
-            <span class="" @click="selectDevice(device.deviceID)">{{ device.stationname }}</span>
+            <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
           </div>
         </div>
         <div class="modal-right">
@@ -263,7 +263,7 @@
             dustMonitor.value = item.readData
           }
         })
-      })
+      },{immediate:true,deep:true})
   
       return { register, model: modelRef, currentTime, dustSwitch, handleVisibleChange, selectDevice, deviceList, activeDeviceID, dustMonitor, echatsOption, posList, chartsColumns, columns, warningConfig };
     },

src/views/vent/monitorManager/deviceTypeMonitor/components/fiber-modal.vue

@@ -1,120 +1,124 @@
 <template>
-    <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel" >
-      <div class="fiber-modal">
-        <div class="modal-left">
-          <div v-for="device in deviceList" class="link-item" :class="{'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
-            <span class="" @click="selectDevice(device.deviceID)">{{ device.stationname }}</span>
-          </div>
+  <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
+    <div class="fiber-modal">
+      <div class="modal-left">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
+          <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
         </div>
-        <div class="modal-right">
-          <div class="right-top">
-            <div class="top-item">
-              <div class="icon">
-                <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
-              </div>
-              <div class="item-container">
-                <div class="title">最高温度</div>
-                <div class="value">{{ posMonitor.fmax }} <span>℃</span> </div>
-              </div>
+      </div>
+      <div class="modal-right">
+        <div class="right-top">
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
             </div>
-            <div class="top-item">
-              <div class="icon">
-                <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" />
-              </div>
-              <div class="item-container">
-                <div class="title">最低温度</div>
-                <div class="value">{{ posMonitor.fmin }} <span>℃</span></div>
-              </div>
+            <div class="item-container">
+              <div class="title">最高温度</div>
+              <div class="value">{{ posMonitor.fmax }} <span>℃</span> </div>
             </div>
-            <div class="top-item">
-              <div class="icon">
-                <SvgIcon class="icon-style aveg-temperature" size="38" name="aveg-temperature" />
-              </div>
-              <div class="item-container">
-                <div class="title">平均温度</div>
-                <div class="value">{{ posMonitor.favg }} <span>℃</span></div>
-              </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" />
             </div>
-            <div class="top-item warning-box">
-              <div class="icon">
-                <SvgIcon class="icon-style" size="38" name="risk-level" />
-              </div>
-              <div class="item-container">
-                <div class="title">风险等级</div>
-                <div class="warning-value">低风险</div>
-              </div>
+            <div class="item-container">
+              <div class="title">最低温度</div>
+              <div class="value">{{ posMonitor.fmin }} <span>℃</span></div>
             </div>
           </div>
-          <div class="right-center">
-            <div class="table-box">
-              <span class="base-title">测点监测详情</span>
-              <a-table
-                size="small"
-                :columns="columns"
-                :data-source="posList"
-                :pagination="false"
-                :scroll="{ y: 200 }"
-              />
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style aveg-temperature" size="38" name="aveg-temperature" />
+            </div>
+            <div class="item-container">
+              <div class="title">平均温度</div>
+              <div class="value">{{ posMonitor.favg }} <span>℃</span></div>
+            </div>
+          </div>
+          <div class="top-item warning-box">
+            <div class="icon">
+              <SvgIcon class="icon-style" size="38" name="risk-level" />
             </div>
-            <div class="warning-box">
-              <span class="base-title">预警历史详情</span>
-              <div class="warning-container">
-                <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33;" />
-              </div>
+            <div class="item-container">
+              <div class="title">风险等级</div>
+              <div class="warning-value">低风险</div>
             </div>
           </div>
-          <div class="right-bottom">
-            <span class="base-title">测点监测曲线</span>
-            <div class="echarts-box">
-              <BarAndLine
-                xAxisPropType="pos"
-                :dataSource="posList"
-                height="100%"
-                :chartsColumns="chartsColumns"
-                :option="echatsOption"
-                chartsType="listMonitor" />
+        </div>
+        <div class="right-center">
+          <div class="table-box">
+            <span class="base-title">测点监测详情</span>
+            <a-table size="small" :columns="columns" :data-source="posList" :pagination="false" :scroll="{ y: 200 }" />
+          </div>
+          <div class="warning-box">
+            <span class="base-title">预警历史详情</span>
+            <div class="warning-container">
+              <dv-scroll-board
+                ref="scrollBoard"
+                :config="warningConfig"
+                style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33"
+              />
             </div>
           </div>
         </div>
+        <div class="right-bottom">
+          <span class="base-title">测点监测曲线</span>
+          <div class="echarts-box">
+            <BarAndLine
+              xAxisPropType="pos"
+              :dataSource="posList"
+              height="100%"
+              :chartsColumns="chartsColumns"
+              :option="echatsOption"
+              chartsType="listMonitor"
+            />
+          </div>
+        </div>
       </div>
-    </BasicModal>
-  </template>
-  <script lang="ts">
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
   import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
   import { SvgIcon } from '/@/components/Icon';
   import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-  import dayjs from 'dayjs'
-  
+  import dayjs from 'dayjs';
+
   export default defineComponent({
     components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
     props: {
-      dataSource: {type: Array},
-      activeID: {type: String}
+      dataSource: { type: Array },
+      activeID: { type: String },
     },
     setup(props) {
-      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
       const modelRef = ref({});
       const loading = ref(true);
       const activeDeviceID = ref('');
-      const deviceList = ref<any[]>([])
-      const posList = ref<any[]>([])
-      const posMonitor = shallowRef({})
-  
+      const deviceList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const posMonitor = shallowRef({});
+
       const echatsOption = {
         grid: {
           top: '20%',
           left: '2px',
           right: '10px',
           bottom: '3%',
-          containLabel: true
+          containLabel: true,
         },
         toolbox: {
-          feature: {}
-        }
-      }
-  
+          feature: {},
+        },
+      };
+
       const chartsColumns = [
         {
           legend: '测点温度',
@@ -128,8 +132,8 @@
           xRotate: 0,
           dataIndex: 'value',
         },
-      ]
-  
+      ];
+
       const columns = [
         {
           title: '安装位置',
@@ -137,8 +141,8 @@
           width: 60,
           align: 'center',
           customRender: ({ index }) => {
-            return `测点${index}`
-          }
+            return `测点${index}`;
+          },
         },
         {
           title: '安装距离(m)',
@@ -158,11 +162,11 @@
           align: 'center',
           width: 50,
           customRender: () => {
-            return `正常`
-          }
+            return `正常`;
+          },
         },
       ];
-  
+
       const warningConfig = reactive({
         header: ['测点', '温度', '预警信息'],
         data: [
@@ -183,237 +187,250 @@
         evenRowBGC: '#009acd05',
         align: ['center', 'center', 'center'],
       });
-      
+
       const [register, { setModalProps, closeModal }] = useModalInner();
-  
+
       function handleVisibleChange(visible) {
         if (visible) {
           loading.value = true;
           setModalProps({ loading: true, confirmLoading: true });
-  
+
           setTimeout(() => {
             loading.value = false;
             setModalProps({ loading: false, confirmLoading: false });
           }, 1000);
         }
       }
-  
+
       // 选择监测
-      function selectDevice (id){
+      function selectDevice(id) {
         loading.value = true;
         setModalProps({ loading: true, confirmLoading: true });
-         setTimeout(() => {
+        setTimeout(() => {
           loading.value = false;
-          activeDeviceID.value = id
+          activeDeviceID.value = id;
           setModalProps({ loading: false, confirmLoading: false });
         }, 300);
       }
-  
+
       function handleOk(e) {
-        e.preventDefault()
-        closeModal()
+        e.preventDefault();
+        closeModal();
       }
-  
+
       function handleCancel(e) {
-        e.preventDefault()
-        closeModal()
+        e.preventDefault();
+        closeModal();
       }
-  
-      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
-        deviceList.value = newDataSource as any[]
-        if(newActiveID != oldActiveID){
-          activeDeviceID.value = newActiveID as string
-        }
-        newDataSource?.forEach((item:any, index) => {
-          if((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value){
-            activeDeviceID.value = item.deviceID
-            if(item.readData.fibreTemperature){
-              const list = JSON.parse(item.readData.fibreTemperature)
-              if (list.length > 0) posList.value = list
-            }
-            posMonitor.value = item.readData
+
+      watch(
+        [() => props.dataSource, () => props.activeID],
+        ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+          deviceList.value = newDataSource as any[];
+          if (newActiveID != oldActiveID) {
+            activeDeviceID.value = newActiveID as string;
           }
-        })
-      })
-  
-      return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, handleOk, handleCancel, deviceList, activeDeviceID, posMonitor, echatsOption, posList, chartsColumns, columns, warningConfig };
+          newDataSource?.forEach((item: any, index) => {
+            if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+              activeDeviceID.value = item.deviceID;
+              if (item.readData.fibreTemperature) {
+                const list = JSON.parse(item.readData.fibreTemperature);
+                if (list.length > 0) posList.value = list;
+              }
+              posMonitor.value = item.readData;
+            }
+          });
+        },
+        { deep: true, immediate: true }
+      );
+
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        posList,
+        chartsColumns,
+        columns,
+        warningConfig,
+      };
     },
-    
   });
-  </script>
-  <style lang="less" scoped>
-    .fiber-modal{
-      width: 100%;
-      height: 650px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      
-      .modal-left{
-        width: 200px;
-        height: 100%;
-        overflow-y: auto;
-        background: #ffffff11;
-        padding: 5px;
-        border-radius: 5px;
-        .active-device-title {
-          color: aqua;
+</script>
+<style lang="less" scoped>
+  .fiber-modal {
+    width: 100%;
+    height: 650px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .modal-left {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+      .active-device-title {
+        color: aqua;
+      }
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
+        span:hover {
+          color: #89ffff;
         }
-        .link-item{
-          position: relative;
-          cursor: pointer;
-          line-height: 30px;
-          padding-left: 30px;
-          span:hover{
-            color: #89ffff;
-          }
-          &::after{
-            content: '';
-            position: absolute;
-            display: block;
-            width: 8px;
-            height: 8px;
-            top: 12px;
-            left: 10px;
-            transform: rotateZ(45deg) skew(10deg, 10deg);
-            background: #45d3fd;
-          }
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: #45d3fd;
         }
       }
-      .modal-right{
-        width: calc(100% - 220px);
-        .base-title{
-          line-height: 32px;
-          position: relative;
-          padding-left: 20px;
-          &::after{
-            content: '';
-            position: absolute;
-            display: block;
-            width: 4px;
-            height: 12px;
-            top: 4px;
-            left: 10px;
-            background: #45d3fd;
-            border-radius: 4px;
-          }
+    }
+    .modal-right {
+      width: calc(100% - 220px);
+      .base-title {
+        line-height: 32px;
+        position: relative;
+        padding-left: 20px;
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 4px;
+          left: 10px;
+          background: #45d3fd;
+          border-radius: 4px;
         }
-        .right-top{
+      }
+      .right-top {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        .top-item {
+          width: 200px;
+          height: 80px;
           display: flex;
           flex-direction: row;
-          justify-content: space-between;
-          margin-bottom: 10px;
-          .top-item{
-            width: 200px;
-            height: 80px;
+          justify-content: center;
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
+          padding-top: 16px;
+          .icon {
+            margin-right: 10px;
+            margin-top: 5px;
+            color: #fdb146;
+          }
+          .item-container {
+            width: 100px;
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
             justify-content: center;
-            border: 1px solid rgba(25,237,255,.4);
-            box-shadow: inset 0 0 10px rgba(0,197,255,.6);
-            background: rgba(0,0,0,.06666666666666667);
-            padding-top: 16px;
-            .icon{
-              margin-right: 10px;
-              margin-top: 5px;
-              color: #FDB146;
+            div {
+              text-align: center;
             }
-            .item-container{
-              width: 100px;
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              div{
-                text-align: center;
-              }
-              .title{
-                font-size: 18px;
-              }
-              .value{
-                text-shadow: 0 0 25px #00fbfe;
-                background: linear-gradient( 0deg,#45d3fd, #45d3fd, #61ddb1,#61ddb1);
-                font-style: normal;
-                background-size: cover;
-                font-family: electronicFont;
-                font-size: 30px;
-                -webkit-background-clip: text;
-                background-clip: text;
-                -webkit-text-fill-color: transparent;
-                position: relative;
-                top: -8px;
-                span{
-                  font-family: Arial, Helvetica, sans-serif;
-                  font-size: 18px;
-                  color: aliceblue;
-                }
-                
-              }
-              
+            .title {
+              font-size: 18px;
             }
-          }
-          .warning-box{
-            padding-top: 0px;
-            .icon{
-              margin-top: 20px;
-              .icon-style{
-                color: #FDB146;
+            .value {
+              text-shadow: 0 0 25px #00fbfe;
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+              font-style: normal;
+              background-size: cover;
+              font-family: electronicFont;
+              font-size: 30px;
+              -webkit-background-clip: text;
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+              position: relative;
+              top: -8px;
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 18px;
+                color: aliceblue;
               }
             }
-            .warning-value{
-              font-size: 18px;
-              color: #61ddb1;
-            }
           }
         }
-        .right-center{
-          margin-top: 20px;
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          .table-box{
-            position: relative;
-            width: 500px;
-            height: 250px;
-          }
-          .warning-box{
-            width: calc(100% - 520px);
-            .warning-container{
-              width: 100%;
-              height: convert;
-              background: #009acd00;
-              :deep(.dv-scroll-board){
-                .row-item{
-                  height: 40px !important;
-                  line-height: 40px !important;
-                }
-                .header-item{
-                  border-top: 1px solid #91e9fe !important;
-                  border-bottom: 1px solid #91e9fe !important;
-                }
-              }
-  
+        .warning-box {
+          padding-top: 0px;
+          .icon {
+            margin-top: 20px;
+            .icon-style {
+              color: #fdb146;
             }
           }
+          .warning-value {
+            font-size: 18px;
+            color: #61ddb1;
+          }
         }
-        .right-bottom{
-          margin-top: 20px;
-          .echarts-box{
+      }
+      .right-center {
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        .table-box {
+          position: relative;
+          width: 500px;
+          height: 250px;
+        }
+        .warning-box {
+          width: calc(100% - 520px);
+          .warning-container {
             width: 100%;
-            height: 230px;
+            height: convert;
+            background: #009acd00;
+            :deep(.dv-scroll-board) {
+              .row-item {
+                height: 40px !important;
+                line-height: 40px !important;
+              }
+              .header-item {
+                border-top: 1px solid #91e9fe !important;
+                border-bottom: 1px solid #91e9fe !important;
+              }
+            }
           }
         }
-  
-        
       }
-    }
-    :deep(.zxm-table-body){
-      border: 1px solid rgba(57, 232, 255, 0.2) !important;
-      .zxm-table-tbody > tr > td{
-        border: none !important;
+      .right-bottom {
+        margin-top: 20px;
+        .echarts-box {
+          width: 100%;
+          height: 230px;
+        }
       }
     }
-    :deep(.zxm-table-cell){
-      border-right: none !important;
+  }
+  :deep(.zxm-table-body) {
+    border: 1px solid rgba(57, 232, 255, 0.2) !important;
+    .zxm-table-tbody > tr > td {
+      border: none !important;
     }
-  </style>
-  
+  }
+  :deep(.zxm-table-cell) {
+    border-right: none !important;
+  }
+</style>

src/views/vent/monitorManager/deviceTypeMonitor/index.vue

@@ -327,7 +327,7 @@
   let modalVisible = ref<Boolean>(false); // 模态框是否可见
   let currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
   let activeID = ref('');
-  let tableData = reactive<any[]>([]);
+  let tableData =reactive<any[]>([]);
 
   //查看详情
   function getDetail(data) {