Browse Source

乌兰木伦光钎测温修改,瓦斯日报表监测修改-提交

lxh 4 days ago
parent
commit
d7af6533f5

+ 0 - 8
src/views/vent/gas/gasReport/gas-report.data.ts

@@ -5,14 +5,6 @@ export const columns: BasicColumn[] = [
     title: '瓦斯日报',
     children: [
       {
-        title: '排序',
-        dataIndex: 'order_num',
-        key: 'order_num',
-        align: 'center',
-        sorter: true,
-        width: 120,
-      },
-      {
         title: '夜班',
         children: [
           {

+ 5 - 2
src/views/vent/monitorManager/deviceMonitor/components/device/device.data.ts

@@ -74,8 +74,11 @@ export function getMonitorComponent() {
     case 'sdmtjtswmk': //上湾
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.sw.vue'));
       break;
+      case 'sdmtjtwlmlmk': //乌兰木伦
+      FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.wlml.vue'));
+      break;
     default:
-      FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.vue'));
+      FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.wlml.vue'));
     // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.sw.vue'));
     // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.vue'));
     // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal-Gx.vue'));
@@ -89,7 +92,7 @@ export function getMonitorComponent() {
   const GaspatrolModal = defineAsyncComponent(() => import('./modal/gaspatrol.modal.vue'));
   const WisdomBallModal = defineAsyncComponent(() => import('./modal/wisdomball.modal.vue'));
 
-  return { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal, WisdomBallModal };
+  return {FiremonModal, FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal, WisdomBallModal };
 }
 
 export const chartsColumnList = [

+ 480 - 0
src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.wlml.vue

@@ -0,0 +1,480 @@
+<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">{{ posMonitor.maxValue || '--' }} <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="item-container">
+                <div class="title">最低温度</div>
+                <div class="value">{{ posMonitor.fmin || '--' }} <span>℃</span></div>
+              </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 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>
+          </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="Section_MaxTemp" :dataSource="posList1" height="100%"
+                :chartsColumns="chartsColumns" :option="echatsOption" />
+            </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';
+  
+  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<any>('');
+      const deviceList = ref<any[]>([]);
+      const posList = reactive<any[]>([]);
+      const posList1 = reactive<any[]>([]);
+      const posMonitor = shallowRef({});
+  
+      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: 'value',
+        },
+      ];
+      const columns = [
+        {
+          title: '位置',
+          dataIndex: 'position',
+          width: 60,
+          align: 'center',
+          customRender: ({ index }) => {
+            return `测点${index}`;
+          },
+        },
+        {
+          title: '最高温度(℃)',
+          dataIndex: 'Section_MaxTemp',
+          align: 'center',
+          width: 100,
+        },
+        {
+          title: '对应米数(m)',
+          dataIndex: 'Section_MaxTempPos',
+          align: 'center',
+          width: 100,
+        },
+        {
+          title: '起点',
+          dataIndex: 'Section_BeginPosition',
+          align: 'center',
+          width: 60,
+        },
+        {
+          title: '终点',
+          dataIndex: 'Section_EndPosition',
+          align: 'center',
+          width: 60,
+        },
+        {
+          title: '状态',
+          dataIndex: 'Section_AlarmTemp',
+          align: 'center',
+        },
+      ];
+  
+      const warningConfig = reactive({
+        header: ['测点', '温度', '预警信息'],
+        data: [
+          ['测点6', '318℃', '严重报警'],
+          ['测点43', '142℃', '一般预警'],
+          ['测点23', '167℃', '一般预警'],
+          ['测点6', '198℃', '超高预警'],
+          ['测点65', '197℃', '超高预警'],
+          ['测点78', '154℃', '一般预警'],
+          ['测点61', '104℃', '一般预警'],
+          ['测点87', '150℃', '一般信息'],
+        ],
+        index: false,
+        columnWidth: [150],
+        headerHeight: 38,
+        headerBGC: '#3d9dd45d',
+        oddRowBGC: '#009acd10',
+        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) {
+        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;
+        }
+        newDataSource?.forEach((item: any, index) => {
+          if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+            posMonitor.value = item.readData;
+            posList.length = 0;
+            posList1.length = 0;
+            let counts = Math.ceil((Object.keys(item.readData).length - 2) / 5);
+            for (let i = 0; i < counts; i++) {
+              posList.push({
+                Section_MaxTemp: item.readData[`Section${i + 1}_MaxTemp`],
+                Section_MaxTempPos: item.readData[`Section${i + 1}_MaxTempPos`],
+                Section_BeginPosition: item.readData[`Section${i + 1}_BeginPosition`],
+                Section_EndPosition: item.readData[`Section${i + 1}_EndPosition`],
+                Section_AlarmTemp: item.readData[`Section${i + 1}_AlarmTemp`]=='0' ? '正常' :item.readData[`Section${i + 1}_AlarmTemp`]=='1' ?  '报警' : '',
+              });
+            }
+            posList.forEach((el, index) => {
+              posList1.push({ Section_MaxTemp: index + 1, value: el.Section_MaxTemp });
+            });
+            console.log(posList, 'posList-----------------');
+            console.log(posList1, 'posList1-----------------');
+          }
+        });
+      });
+  
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        posList,
+        posList1,
+        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;
+      }
+  
+      .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: 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: 10px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+  
+        .table-box {
+          position: relative;
+          width: 500px;
+          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>
+