新增文件

src/components/vent/customHeader.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="vent-custom-header">
+    <div class="vent-home-header">
+      <!-- <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width:500px;height:40px;" /> -->
+      <div class="header-text"><slot></slot></div>
+    </div>
+    <div class="container-title" v-if="fieldNames">
+      <a-select
+        class="title-select"
+        ref="select"
+        v-model:value="currentTitleValue"
+        @change="handleTitleChange"
+        dropdownClassName="drop"
+        :field-names="fieldNames"
+        :options="options"
+        :dropdownStyle="{ background: 'transparent', borderBottom: '1px solid #ececec66', backdropFilter: 'blur(50px)', color: '#fff' }"
+      >
+        <!-- <a-select-option value="2">15212工作面</a-select-option>
+        <a-select-option value="1598491318007898113">采煤工作面</a-select-option>
+        <a-select-option value="3">掘进工作面</a-select-option> -->
+      </a-select>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+  import { Decoration5 } from '@kjgl77/datav-vue3';
+  export default defineComponent({
+    name: 'CustomHeader',
+    components: { Decoration5 },
+    props: {
+      optionValue: {
+        type: String,
+      },
+      fieldNames: {
+        type: Object,
+        default: () => {},
+      },
+      options: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    emits: ['change'],
+    setup(props, { emit }) {
+      const currentTitleValue = computed(() => props.optionValue);
+      // 标题选择
+      function handleTitleChange(value) {
+        emit('change', value);
+      }
+      return {
+        currentTitleValue,
+        handleTitleChange,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import '/@/design/vent/modal.less';
+
+  .@{ventSpace}-select-dropdown.drop {
+    background-color: transparent !important;
+
+    .@{ventSpace}-select-item-option-selected,
+    .@{ventSpace}-select-item-option-active {
+      background-color: #ffffff33 !important;
+    }
+    .@{ventSpace}-select-item {
+      color: inherit;
+      &:hover {
+        background-color: #ffffff33 !important;
+      }
+    }
+    .@{ventSpace}-select-tree {
+      .@{ventSpace}-select-tree-treenode {
+        color: inherit;
+      }
+      .@{ventSpace}-select-tree-switcher-icon {
+        color: inherit;
+      }
+    }
+  }
+</style>
+<style lang="less" scoped>
+  @ventSpace: zxm;
+  .vent-custom-header {
+    width: 100%;
+    height: fit-content;
+    .vent-home-header {
+      width: 100%;
+
+      position: fixed;
+      top: 0;
+      // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
+      // height: 100px;
+      background: url('/@/assets/images/vent/vent-header1.png') no-repeat;
+      height: 89px;
+      background-size: contain;
+      display: flex;
+      justify-content: center;
+      .header-icon {
+        margin-top: 45px;
+      }
+      .header-text {
+        position: fixed;
+        top: 5px;
+        color: #fff;
+        font-size: 32px;
+        font-family: 'ysbtFont';
+        background-image: linear-gradient(#ffffff 50%, #60f4ff);
+        -webkit-background-clip: text;
+        color: transparent;
+      }
+    }
+    .container-title {
+      width: 398px;
+      height: 34px;
+      top: 60px;
+      background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+      background-size: contain;
+      padding: 0 0 0 180px;
+      font-size: 20px;
+      pointer-events: auto;
+      position: relative;
+      z-index: 9999;
+      .title-select {
+        width: 228px;
+        position: absolute;
+
+        top: 0;
+        left: 160px;
+      }
+    }
+  }
+  :deep(.zxm-select) {
+    width: 300px;
+    .@{ventSpace}-select-selector {
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      .zxm-select-selection-item {
+        color: #fff !important;
+        font-size: 20px;
+      }
+    }
+    .@{ventSpace}-select-arrow {
+      color: #fff !important;
+    }
+  }
+</style>

src/hooks/vent/useSystemSelect.ts

@@ -0,0 +1,70 @@
+import { ref, nextTick } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+
+type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+type OptionType = { id: string; strsystype: string; systemname: string };
+const getTableList = (params) => defHttp.get({ url: '/safety/ventanalyManageSystem/list', params });
+const systemList = (params) => defHttp.post({ url: '/ventanaly-device/monitor/device', params });
+
+export function useSystemSelect(sysType: string, changeModalType?: (param) => {}) {
+  const options = ref<OptionType[]>([]);
+  const optionValue = ref('');
+  const deviceList = ref<DeviceType[]>([]);
+  const deviceActive = ref('');
+  const deviceType = ref('');
+  const isRefresh = ref(true);
+
+  async function getDeviceList() {
+    const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
+    const result = res.msgTxt;
+    const deviceArr = <DeviceType[]>[];
+    result.forEach((item) => {
+      const data = item['datalist'].filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      });
+      if (item.type != 'sys') {
+        deviceArr.unshift({
+          deviceType: item.type,
+          deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+          datalist: data,
+        });
+      }
+    });
+    deviceList.value = deviceArr;
+    deviceActive.value = deviceArr[0].deviceType;
+    deviceChange(0);
+  }
+
+  async function getSysDataSource() {
+    const res = await getTableList({ strtype: sysType, pagetype: 'normal' });
+    if (options.value.length == 0) {
+      // 初始时选择第一条数据
+      options.value = res.records || [];
+      if (!optionValue.value) {
+        optionValue.value = options.value[0]['id'];
+        getDeviceList();
+        if (changeModalType) changeModalType(options.value[0]);
+      }
+    }
+  }
+
+  function deviceChange(index) {
+    deviceActive.value = deviceType.value = deviceList.value[index]['deviceType'];
+    isRefresh.value = false;
+    nextTick(() => {
+      isRefresh.value = true;
+    });
+  }
+
+  async function getSelectRow(deviceID) {
+    const currentData = options.value.find((item: any) => {
+      return item.id == deviceID;
+    });
+    optionValue.value = deviceID;
+    if (changeModalType) changeModalType(currentData);
+    getDeviceList();
+  }
+
+  return { options, optionValue, deviceList, deviceActive, deviceType, isRefresh, getSysDataSource, getSelectRow, deviceChange };
+}

src/views/vent/comment/less/systemMonitor.less

@@ -0,0 +1,753 @@
+
+
+.monitor-container {
+  width: 100%;
+  height: 100%;
+  margin-top: 40px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+
+  .lr {
+    width: 380px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+    pointer-events: auto;
+  }
+
+  .right-box {
+    width: 340px;
+    .disaster-btn {
+      padding: 4px 10px !important;
+      margin-right: 8px;
+    }
+  }
+
+  .left-box {
+    margin-top: 30px;
+  }
+
+  .warning-monitor {  
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .warning-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .title {
+        cursor: pointer;
+      }
+    
+      .active-title {
+        color: aqua;
+      }
+    }
+
+    .state-box {
+      width: 79px;
+      height: 47px;
+      background: url('/@/assets/images/vent/param-bg.png');
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .title {
+        text-align: center;
+        color: #73e8fe;
+      }
+
+      span {
+        display: inline-block;
+      }
+
+      .value {
+        width: 20px;
+      }
+    }
+  }
+
+  .vent-param {
+    width: 100%;
+    margin-top: 10px;
+
+    .light-group {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      position: relative;
+
+      .param-item {
+        width: 120px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: reactive;
+
+        .icon {
+          display: block;
+          position: absolute;
+          top: -5px;
+        }
+
+        .param {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          .param-icon {
+            width: 79px;
+            height: 48px;
+            background: url('/@/assets/images/vent/workFace-param-bg.png');
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            top: -20px;
+            margin-top: 10px;
+
+            .param-title {
+              position: relative;
+              top: -4px;
+            }
+
+            .param-unit {
+              position: relative;
+              top: -2px;
+              font-size: 12px;
+            }
+          }
+
+          .param-val-box {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            top: -20px;
+
+            .param-val-icon {
+              width: 2px;
+              height: 15px;
+              background: #00d8ff;
+              position: relative;
+
+              &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                width: 6px;
+                height: 6px;
+                border-radius: 3px;
+                background: #00d8ff;
+                bottom: -2px;
+                left: -2px;
+              }
+
+            }
+
+            .param-val {
+              position: relative;
+              font-family: 'douyuFont';
+              // color: #20dbfd;
+              text-shadow: 0 0 25px #00d8ff;
+              font-size: 13px;
+              border: 1px solid #40B7F3;
+              padding: 5px 8px 2px 8px;
+              top: 2px;
+              text-align: center;
+              min-width: 80px;
+
+              &::after {
+                width: calc(100% - 4px);
+                height: calc(100% - 4px);
+                content: '';
+                position: absolute;
+                top: 2px;
+                left: 2px;
+                display: block;
+                border: 1px solid #006EA6;
+              }
+            }
+          }
+
+        }
+      }
+    }
+  }
+
+  .data-group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding-bottom: 8px;
+
+    .data-item {
+      width: calc(50% - 10px);
+      display: flex;
+      justify-content: space-between;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
+      margin: 4px 0;
+    }
+
+    .value {
+      color: #00eefffe;
+    }
+
+    .data-item1 {
+      width: 100%;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
+      margin: 4px 0;
+    }
+  }
+
+  .input-box {
+    display: flex;
+    flex-direction: column;
+    padding: 0 5px;
+  }
+  .input-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2px 0px;
+    margin: 4px 0;
+    background-image: linear-gradient(to right, #39deff15, #3977e500);
+
+    .title {
+      width: 200px;
+    }
+
+    .title-auto {
+      width: auto;
+    }
+
+    .input-value {
+      width: 80px;
+      height: 28px;
+      line-height: 28px !important;
+      background: transparent !important;
+      border-color: #228DA2 !important;
+      color: #fff !important;
+    }
+
+    .value {
+      width: 80px;
+      color: #00d8ff;
+      padding-right: 20px;
+    }
+
+    .unit {
+      width: 80px;
+    }
+  }
+
+  .warning-state-detail {
+    position: relative;
+    padding-left: 10px;
+    font-size: 13px;
+    margin-bottom: 15px;
+    margin-top: 5px;
+    margin-left: 8px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      border: 1px solid #1bf5fd;
+      background: #00d8ff;
+      border-radius: 3px;
+      left: -1px;
+      top: 8px;
+    }
+
+    .state-color {
+      color: #4afffdbf;
+    }
+  }
+
+  .temperature-group {
+    width: 100%;
+    margin-top: 20px;
+
+    .light-group {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      position: relative;
+
+      .light-bg {
+        width: 331px;
+        height: 42px;
+        background: url('/@/assets/images/vent/plane-bg.png') no-repeat;
+        background-size: contain;
+        position: absolute;
+        z-index: -1;
+        top: 44px;
+        opacity: 0.6;
+      }
+
+      .light-item {
+        width: 120px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: reactive;
+
+        .icon {
+          display: block;
+          position: absolute;
+          top: -5px;
+        }
+
+        .light {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          .light-icon {
+            width: 90px;
+            height: 58px;
+            background: url('/@/assets/images/vent/ligth-q.png');
+            opacity: 0.8;
+          }
+
+          .light-title {
+            position: relative;
+            top: -15px;
+          }
+
+          .light-val-box {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            top: -10px;
+
+            .light-val-icon {
+              width: 2px;
+              height: 18px;
+              background: #00d8ff;
+              position: relative;
+
+              &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                width: 6px;
+                height: 6px;
+                border-radius: 3px;
+                background: #00d8ff;
+                bottom: -2px;
+                left: -2px;
+              }
+
+            }
+
+            .light-val {
+              position: relative;
+              font-family: 'douyuFont';
+              // color: #20dbfd;
+              text-shadow: 0 0 25px #00d8ff;
+              font-size: 13px;
+              border: 1px solid #40B7F3;
+              padding: 5px 8px 2px 8px;
+              top: 2px;
+
+              &::after {
+                width: calc(100% - 4px);
+                height: calc(100% - 4px);
+                content: '';
+                position: absolute;
+                top: 2px;
+                left: 2px;
+                display: block;
+                border: 1px solid #006EA6;
+              }
+            }
+          }
+
+        }
+      }
+    }
+  }
+
+  .state-item {
+    display: flex;
+    flex-direction: row;
+    padding: 4px;
+
+    .item-col {
+      width: calc(50% - 5px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-right: 4px;
+      background-image: linear-gradient(to right, #39f5ff00, #39f5ff08);
+
+      &:first-child {
+        margin-right: 10px;
+      }
+
+      .state-title {
+        color: #ffffffcc;
+        flex: 9;
+        font-size: 14px;
+      }
+
+      .state-val {
+        flex: 1;
+        color: #00eefffe;
+        margin-right: 5px;
+        text-align: right;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .co-param {
+    width: 100%;
+    margin-top: 20px;
+
+    .light-group {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      position: relative;
+
+      .param-item {
+        width: 120px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: reactive;
+
+        .icon {
+          display: block;
+          position: absolute;
+          top: -5px;
+        }
+
+        .param {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          .param-icon {
+            width: 79px;
+            height: 48px;
+            background: url('/@/assets/images/vent/workFace-param-bg.png');
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            top: -20px;
+            margin-top: 10px;
+
+            .icon {
+              position: relative;
+              top: -3px;
+            }
+
+            .param-unit {
+              position: relative;
+              top: -3px;
+              font-size: 13px;
+            }
+          }
+
+          .param-val-box {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            top: -20px;
+
+            .param-val-icon {
+              width: 2px;
+              height: 18px;
+              background: #00d8ff;
+              position: relative;
+
+              &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                width: 6px;
+                height: 6px;
+                border-radius: 3px;
+                background: #00d8ff;
+                bottom: -2px;
+                left: -2px;
+              }
+
+            }
+
+            .param-val {
+              position: relative;
+              font-family: 'douyuFont';
+              // color: #20dbfd;
+              text-shadow: 0 0 25px #00d8ff;
+              font-size: 13px;
+              border: 1px solid #40B7F3;
+              padding: 5px 8px 2px 8px;
+              top: 2px;
+
+              &::after {
+                width: calc(100% - 4px);
+                height: calc(100% - 4px);
+                content: '';
+                position: absolute;
+                top: 2px;
+                left: 2px;
+                display: block;
+                border: 1px solid #006EA6;
+              }
+            }
+          }
+
+        }
+      }
+    }
+  }
+
+  .btn {
+    padding: 2px 12px;
+    position: relative;
+    border-radius: 2px;
+    color: #fff;
+    cursor: pointer;
+
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      width: calc(100% - 4px);
+      height: calc(100% - 4px);
+      top: 2px;
+      left: 2px;
+      border-radius: 2px;
+      z-index: -1;
+    }
+  }
+
+  .btn1 {
+    border: 1px solid #5cfaff;
+
+    &::before {
+      background-image: linear-gradient(#2effee92, #0cb1d592);
+    }
+
+    &:hover {
+      border: 1px solid #5cfaffaa;
+
+      &::before {
+        background-image: linear-gradient(#2effee72, #0cb1d572);
+      }
+    }
+  }
+
+  .btn2 {
+    border: 1px solid #e91927;
+    margin-left: 10px;
+
+    &::before {
+      background-image: linear-gradient(#b02533, #a31f2e);
+    }
+
+    &:hover {
+      &::before {
+        background-image: linear-gradient(#bd2e3ccc, #a31f2ecc);
+      }
+    }
+  }
+}
+
+.history-group{
+  padding: 0 20px;
+  margin-top: 90px;
+  .history-container{
+    position: relative;
+    background: #6195af1a;
+    width: calc(100% + 10px);
+    left: -10px;
+    border: 1px solid #00fffd22;
+    padding: 10px 0;
+    box-shadow: 0 0 20px #44b4ff33 inset;
+  }
+}
+.device-button-group{
+  // margin: 0 20px;
+  display: flex;
+  pointer-events: auto;
+  position: relative;
+  &::after{
+    position:absolute;
+    content: '';
+    width: calc(100% + 10px);
+    height: 2px;
+    top: 30px;
+    left: -10px;
+    border-bottom: 1px solid #0efcff;
+  }
+  .device-button{
+    padding: 4px 15px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    
+    color: #fff;
+    cursor: pointer;
+    margin: 0 3px;
+
+    &::before{
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: 1px solid #6176AF;
+      transform: skewX(-38deg);
+      background-color: rgba(0, 77, 103,85%);
+      z-index: -1;
+    }
+  }
+  .device-active{
+    // color: #0efcff;
+    &::before{
+      border-color: #0efcff;
+      box-shadow: 1px 1px 3px 1px #0efcff inset;
+    }
+  }
+}
+
+.parameter-title {
+  position: relative;
+  width: 100%;
+  height: 16px;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  top: -2px;
+  .icon,
+  span {
+    position: absolute;
+  }
+}
+
+.group-parameter-title {
+  background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+  .icon {
+    left: 0px;
+    top: -4px;
+  }
+  span {
+    left: 20px;
+    top: -8px;
+  }
+  &::before{
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 100%;
+    top: 4px;
+    background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
+  }
+}
+
+.detail {
+  align-self: flex-end;
+  color: #66e8fc;
+  cursor: pointer;
+  &:hover {
+    color: #1bf5fddd;
+  }
+}
+
+.a-detail{
+  font-size: 12px;
+  padding-left: 5px;
+  cursor: pointer;
+}
+
+.fire-analysis1 {
+  display: flex;
+  justify-content: center;
+
+  .analysis-item {
+    width: 321px;
+    height: 104px;
+    text-align: center;
+    background: url('/@/assets/images/vent/alarm/1.png');
+    color: #ffffffdd;
+    margin: 0 4px;
+
+    .title {
+      margin-top: 46px;
+    }
+
+    .value {
+      margin-top: 7px;
+    }
+  }
+
+  .warning1 {
+    background: url('/@/assets/images/vent/alarm/21.png');
+  }
+
+  .warning2 {
+    background: url('/@/assets/images/vent/alarm/31.png');
+  }
+
+  .warning3 {
+    background: url('/@/assets/images/vent/alarm/41.png');
+  }
+}
+
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+  overflow: auto;
+}
+
+:deep(.zxm-select) {
+  width: 300px;
+
+  .@{ventSpace}-select-selector {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+
+    .zxm-select-selection-item {
+      color: #fff !important;
+    }
+  }
+
+  .@{ventSpace}-select-arrow {
+    color: #fff !important;
+  }
+}
+
+:deep(.zxm-select-dropdown) {
+  background: #ffffff !important;
+  color: #fff !important;
+}

src/views/vent/gas/gasHome/gasHome.data.ts

@@ -0,0 +1,18 @@
+import { ref } from 'vue';
+export const navList = ref([
+  {
+    title: '智能监测管控',
+    pathName: 'gasHome',
+    isHover: false,
+  },
+  {
+    title: '抽采泵站管控',
+    pathName: 'gasPump',
+    isHover: false,
+  },
+  {
+    title: '抽采达标评判',
+    pathName: 'gasStandard',
+    isHover: false,
+  },
+]);

src/views/vent/gas/gasHome/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="scene-box">
+    <customHeader
+      :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
+      :options="options"
+      @change="getSelectRow"
+      :optionValue="optionValue"
+      >瓦斯抽采综合管控系统</customHeader
+    >
+    <div class="center-container"> </div>
+    <BottomMenu :navList="navList" @change="changeActive" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+  import { navList } from './gasHome.data';
+
+  const activeKey = ref('gasHome');
+  const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+
+  function changeActive(activeValue) {
+    activeKey.value = activeValue;
+  }
+
+  onMounted(async () => {
+    await getSysDataSource();
+  });
+</script>
+
+<style lang="less" scoped>
+  .main-container {
+    .left-box {
+    }
+    .right-box {
+    }
+  }
+</style>

src/views/vent/gas/gasPumpMonitor/components/monitor.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="monitor-container">
+    <div class="lr left-box">
+      <ventBox1>
+        <template #title>
+          <div>抽采泵信息</div>
+        </template>
+        <template #container> </template>
+      </ventBox1>
+      <ventBox1 class="vent-margin-t-10">
+        <template #title>
+          <div>泵站环境</div>
+        </template>
+        <template #container> </template>
+      </ventBox1>
+    </div>
+    <div class="lr right-box">
+      <div class="item-box sensor-container">
+        <ventBox1>
+          <template #title>
+            <div>自动模式</div>
+          </template>
+          <template #container> </template>
+        </ventBox1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="gas-pump-monitor">
+  import { ref, onMounted, defineProps } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
+
+  onMounted(async () => {});
+</script>
+
+<style lang="less" scoped>
+  @import '@/views/vent/monitorManager/comment/less/workFace.less';
+  @ventSpace: zxm;
+</style>

src/views/vent/gas/gasPumpMonitor/gasPumpMonitor.data.ts

@@ -0,0 +1,18 @@
+import { ref } from 'vue';
+export const navList = ref([
+  {
+    title: '设备监测',
+    pathName: 'deviceMonitor',
+    isHover: false,
+  },
+  {
+    title: '历史查询',
+    pathName: 'history',
+    isHover: false,
+  },
+  {
+    title: '视频监测',
+    pathName: 'cameraMonitor',
+    isHover: false,
+  },
+]);

src/views/vent/gas/gasPumpMonitor/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="scene-box">
+    <customHeader
+      :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
+      :options="options"
+      @change="getSelectRow"
+      :optionValue="optionValue"
+      >瓦斯抽采泵监测系统</customHeader
+    >
+    <div class="center-container">
+      <template v-if="activeKey == 'deviceMonitor'">
+        <GasPumpMonitor :deviceId="optionValue" />
+      </template>
+      <div v-else class="history-group">
+        <div class="device-button-group" v-if="deviceList.length > 0 && activeKey !== 'faultRecord'">
+          <div
+            class="device-button"
+            :class="{ 'device-active': deviceActive == device.deviceType }"
+            v-for="(device, index) in deviceList"
+            :key="index"
+            @click="deviceChange(index)"
+            >{{ device.deviceName }}</div
+          >
+        </div>
+        <div class="history-container">
+          <HistoryTable
+            v-if="activeKey == 'history' && isRefresh"
+            ref="historyTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
+        </div>
+      </div>
+    </div>
+    <BottomMenu :navList="navList" @change="changeActive" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import HistoryTable from '../../monitorManager/comment/HistoryTable.vue';
+  import { navList } from './gasPumpMonitor.data';
+  import GasPumpMonitor from './components/monitor.vue';
+
+  const activeKey = ref('deviceMonitor');
+
+  const { options, optionValue, deviceType, isRefresh, deviceActive, deviceList, getSelectRow, getSysDataSource, deviceChange } =
+    useSystemSelect('sys_surface_caimei');
+
+  function changeActive(activeValue) {
+    activeKey.value = activeValue;
+  }
+  onMounted(async () => {
+    await getSysDataSource();
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '../../comment/less/systemMonitor.less';
+  @ventSpace: zxm;
+</style>

src/views/vent/monitorManager/nitrogen/nitrogen.dataHsw.ts

@@ -0,0 +1,91 @@
+export const monitorDataGroupArr = [[1, 2, 3, 4, 5]];
+export const prefix = ['Compressor', 'Compressor', 'PreFan'];
+export const preMonitorList = [
+  {
+    title: `供气压力`,
+    code: `CompressorGasSupplyPressure`,
+    unit: 'bar',
+    child: [],
+  },
+  {
+    title: `排气温度`,
+    code: `CompressorExhaustTemp`,
+    unit: '℃',
+    child: [],
+  },
+  {
+    title: `加载时间`,
+    code: `CompressorLoadTime`,
+    unit: 'h',
+    child: [],
+  },
+  {
+    title: `运行时间`,
+    code: `CompressorRunTime`,
+    unit: 'h',
+    child: [],
+  },
+  {
+    title: `主机A相电流`,
+    code: `CompressorCurrentA`,
+    unit: 'A',
+    child: [],
+  },
+  {
+    code: 'signal',
+    child: [
+      {
+        title: `运行信号`,
+        code: `CompressorWorking`,
+        isWaring: false,
+      },
+      {
+        title: `故障信号`,
+        code: `PreFanFault`,
+        isWaring: true,
+      },
+    ],
+  },
+];
+export const cqgMonitorList = [
+  {
+    title: `风包压力`,
+    code: `CompressorWindBagPressure`,
+    unit: 'bar',
+    child: [],
+  },
+  {
+    title: `风包温度`,
+    code: `CompressorWindBagTemp`,
+    unit: '℃',
+    child: [],
+  },
+];
+
+export const preFanMonitorData = [];
+export const totalData = [
+  {
+    title: '总压力',
+    code: 'MainPipePressure',
+    unit: 'bar',
+  },
+];
+export type State = {
+  isRun: boolean;
+  fault: boolean;
+};
+export function getSysState(monitorData) {
+  const stateArr = <State[]>[];
+  monitorDataGroupArr.forEach((group) => {
+    const stateObj = { isRun: false, fault: false };
+    group.forEach((item) => {
+      if (monitorData['PRE_Status'.replace('PRE', 'PRE' + item)]) {
+        stateObj.isRun = monitorData['PRE_Status'.replace('PRE', 'PRE' + item)] == '1';
+      }
+      monitorData['PRE_AlamSignal'.replace('PRE', 'PRE' + item)] === undefined ? '-' : monitorData['PRE_AlamSignal'.replace('PRE', 'PRE' + item)];
+      stateObj.fault = monitorData['PRE_AlamSignal'.replace('PRE', 'PRE' + item)] == '1';
+    });
+    stateArr.push(stateObj);
+  });
+  return stateArr;
+}