src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.cct.vue

@@ -0,0 +1,423 @@
+<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.strinstallpos }}</span>
+        </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="item-container">
+              <div class="title">最高温度</div>
+              <div class="value">{{ formatNum(maxTemp) || '--' }} <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="item-container">
+              <div class="title">风险等级</div>
+              <div class="warning-value">{{ warnLevels }}</div>
+            </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>
+        </div>
+        <div class="right-bottom">
+          <span class="base-title">测点监测曲线</span>
+          <div class="echarts-box">
+            <BarAndLine
+              xAxisPropType="Section_MaxTempPos"
+              :dataSource="posList"
+              height="100%"
+              :chartsColumns="chartsColumns"
+              :option="echatsOption"
+              chartsType="listMonitor"
+            />
+          </div>
+        </div>
+      </div>
+    </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 { formatNum } from '/@/utils/ventutil';
+
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      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 = reactive<any[]>([]);
+      const posList1 = reactive<any[]>([]);
+      //风险等级
+      const warnLevels = ref('');
+      //最高温度
+      const maxTemp = ref(0);
+
+      const echatsOption = {
+        grid: {
+          top: '20%',
+          left: '2px',
+          right: '10px',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
+
+      const chartsColumns = [
+        {
+          legend: '测点最高温度',
+          seriesName: '(℃)',
+          ymax: 100,
+          yname: '℃',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#FDB146',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'Section_MaxTemp',
+        },
+      ];
+      const columns = [
+        {
+          title: '位置',
+          dataIndex: 'Section_MaxTempPos',
+          align: 'center',
+        },
+        {
+          title: '最高温度(℃)',
+          dataIndex: 'Section_MaxTemp',
+          align: '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) {
+        loading.value = true;
+        setModalProps({ loading: true, confirmLoading: true });
+        setTimeout(() => {
+          loading.value = false;
+          activeDeviceID.value = id;
+          setModalProps({ loading: false, confirmLoading: false });
+        }, 300);
+      }
+
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
+      }
+
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
+      }
+
+      watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+        console.log(newDataSource, 'newDataSource--------------');
+        deviceList.value = newDataSource as any[];
+
+        if (newActiveID != oldActiveID) {
+          activeDeviceID.value = newActiveID as string;
+        }
+        activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+        newDataSource?.forEach((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            // activeDeviceID.value = item.deviceID;
+            posList.length = 0;
+            posList1.length = 0;
+            const readData = item.readData;
+            for (let key in readData) {
+              if (key.startsWith('Section')) {
+                const index = Number(key.split('_')[0].split('Section')[1]);
+                if (key.endsWith('MaxTemp')) {
+                  if (!posList[index]) posList[index] = {};
+                  posList[index]['Section_MaxTemp'] = readData[key];
+                  posList[index]['Section_MaxTempPos'] = '测点' + index;
+                }
+              }
+            }
+            if (!posList[0]) posList.splice(0, 1);
+            let maxValue = posList.map((m) => m.Section_MaxTemp);
+            maxTemp.value = Math.max(...maxValue);
+            if (newDataSource) warnLevels.value = item['warnLevel_str'] == '报警' ? '报警' : '未报警';
+          }
+        });
+      });
+
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        activeDeviceID,
+        echatsOption,
+        posList,
+        posList1,
+        chartsColumns,
+        columns,
+        warnLevels,
+        maxTemp,
+        formatNum,
+        // 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;
+      }
+
+      .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;
+        }
+      }
+    }
+
+    .modal-right {
+      width: calc(100% - 220px);
+      overflow-y: auto;
+
+      .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 {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .top-item {
+          // width: 200px;
+          width: 49%;
+          height: 80px;
+          display: flex;
+          flex-direction: row;
+          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: 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;
+              }
+            }
+          }
+        }
+
+        .warning-box {
+          padding-top: 0px;
+
+          .icon {
+            margin-top: 20px;
+
+            .icon-style {
+              color: #fdb146;
+            }
+          }
+
+          .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;
+          width: 100%;
+          height: 250px;
+          :deep(.zxm-table-wrapper) {
+            height: 220px !important;
+            background: #ffffff05 !important;
+            border-bottom: 1px solid #91e9fe80 !important;
+          }
+        }
+
+        // .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;
+        //       }
+        //     }
+        //   }
+        // }
+      }
+
+      .right-bottom {
+        margin-top: 20px;
+
+        .echarts-box {
+          width: 100%;
+          height: 230px;
+        }
+      }
+    }
+  }
+
+  :deep(.zxm-table-body) {
+    border: 1px solid rgba(57, 232, 255, 0.2) !important;
+
+    .zxm-table-tbody > tr > td {
+      border: none !important;
+    }
+  }
+
+  :deep(.zxm-table-cell) {
+    border-right: none !important;
+  }
+</style>

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

@@ -262,7 +262,7 @@
                 <template v-for="(faultItem, faultIndex) in faultData" :key="faultIndex">
                   <div
                     class="fault-item"
-                    v-if="faultItem['valueCode'].startsWith(warningMonitorRowIndex === 0 ? 'faultEqu1_electric1' : 'faultEqu2_electric1')"
+                    v-if="faultItem['valueCode'].startsWith(dataMonitorRowIndex === 0 ? 'faultEqu1_electric1' : 'faultEqu2_electric1')"
                   >
                     <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }">{{
                       faultItem[item.code]