[Wip 0000] 保德瓦斯抽采泵监测开发

src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHomeBD.vue

@@ -0,0 +1,854 @@
+<template>
+  <div class="monitor-container">
+    <div id="FlowSensor" class="FlowSensor-box" style="position: absolute; display: none">
+      <!-- <div class="elementContent" v-if="selectData['deviceType'].startsWith('pump_under') || selectData['deviceType'] == 'pump_n12m2pq'">
+        <fourBorderBg>
+          <template v-for="(item, index) in modelMonitor" :key="index">
+            <div class="gas-monitor-row">
+              <div class="title">{{ item.title }}</div>
+              <div class="value">{{ selectData[item.code] ? selectData[item.code] : '-' }}</div>
+            </div>
+          </template>
+        </fourBorderBg>
+      </div> -->
+    </div>
+    <!-- 布尔台新瓦斯泵模型上的数据 -->
+    <div class="elementContent" style="position: absolute; display: none">
+      <div v-for="(tag, index) in modelMonitorTags" :key="index" :id="tag.domId" class="modal-monitor-box">
+        <div class="title">{{ tag.title }}</div>
+        <div
+          v-if="tag.type == 'sign'"
+          class="signal-round"
+          :class="{ 'signal-round-gry': selectData[tag.code] != 1, 'signal-round-run': selectData[tag.code] == 1 }"
+        ></div>
+        <div v-else class="value">{{ selectData[tag.code] }}</div>
+      </div>
+    </div>
+    <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
+    <ModuleCommon
+      v-for="cfg in configs"
+      :key="cfg.deviceType"
+      :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="selectData"
+      :visible="true"
+    />
+    <div class="lr left-box"></div>
+    <div class="lr right-box">
+      <div class="item-box sensor-container">
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>泵站远程集中控制</div>
+          </template>
+          <template #container>
+            <div class="top-btn">
+              <div class="btn-group">
+                <a-button class="btn-item" type="primary" @click="handlerFn('zfw')">总复位</a-button>
+                <a-button class="btn-item" type="default" disabled @click="handlerFn('change')">一键切换</a-button>
+              </div>
+              <div class="btn-group">
+                <a-button style="width: calc(100% - 16px); padding: 0 8px" type="primary" @click="openModal">瓦斯泵控制</a-button>
+              </div>
+              <div>
+                <div class="control-item">
+                  <div class="control-title">控制模式：</div>
+                  <div class="control-container">
+                    <a-radio-group v-model:value="selectData['ykjdqh']">
+                      <a-radio :value="'0'">就地</a-radio>
+                      <a-radio :value="'1'">远程</a-radio>
+                    </a-radio-group>
+                    <div class="btn-box">
+                      <div class="btn btn1" @click="changeCtr(0)">就地</div>
+                      <div class="btn btn1" @click="changeCtr(1)">远程</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="control-item">
+                  <div class="control-title">检修模式：</div>
+                  <div class="control-container">
+                    <a-radio-group v-model:value="selectData['jxmsqh']">
+                      <a-radio :value="'0'">关闭</a-radio>
+                      <a-radio :value="'1'">开启</a-radio>
+                    </a-radio-group>
+                    <div class="btn-box">
+                      <div class="btn btn1" @click="changeMode(0)">关闭</div>
+                      <div class="btn btn1" @click="changeMode(1)">开启</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </ventBox1>
+      </div>
+    </div>
+    <div ref="playerRef" class="player-box"></div>
+  </div>
+  <DetailModal @register="register" :device-type="deviceType" :device-id="deviceId" />
+  <PasswordModal
+    :modal-is-show="passwordModalIsShow"
+    modal-title="密码检验"
+    :modal-type="handlerType"
+    @handle-ok="handleOK"
+    @handle-cancel="handleCancel"
+  />
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, reactive, defineProps, watch, inject, nextTick, onBeforeUnmount } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
+  import { setModelType, playAnimate } from '../gasPump.threejs';
+  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
+  import {
+    stateWarningHeader,
+    valveWarningState,
+    pumpMonitorData,
+    waterPumpData,
+    dewateringPumpData,
+    modelMonitor,
+    getModelMonitorTags,
+    valveCtrlType,
+  } from '../gasPump.data';
+  import { list } from '../gasPump.api';
+  import { SvgIcon } from '/@/components/Icon';
+  import { formatNum } from '/@/utils/ventutil';
+  import DetailModal from './DetailModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import PasswordModal from '../../comment/components/PasswordModal.vue';
+  import { message } from 'ant-design-vue';
+  import fourBorderBg from '/@/components/vent/fourBorderBg.vue';
+  import { useCamera } from '/@/hooks/system/useCamera';
+  import { Config } from '../../../deviceManager/configurationTable/types';
+  import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
+
+  const globalConfig = inject('globalConfig');
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+    deviceType: {
+      type: String,
+      require: true,
+    },
+  });
+  const [register, { openModal }] = useModal();
+  const modelMonitorTags = getModelMonitorTags();
+  const loading = ref(false);
+  const passwordModalIsShow = ref(false);
+  const handlerType = ref('');
+  const playerRef = ref();
+
+  // 监测数据
+  const selectData = ref({
+    pump1: false,
+    pump2: false,
+    pump3: false,
+    pump4: false,
+    waterPump1: false,
+    waterPump2: false,
+    waterPump3: false,
+    waterPump4: false,
+    inValve1: false,
+    outValve1: false,
+    inValve2: false,
+    outValve2: false,
+    inValve3: false,
+    outValve3: false,
+    inValve4: false,
+    outValve4: false,
+    jxmsqh: '1',
+    ykjdqh: '1',
+    FlowSensor_InputFlux: '-',
+    deviceType: '',
+  });
+
+  const { getCamera, removeCamera } = useCamera();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      return new Promise((resolve) => {
+        timer = setTimeout(
+          async () => {
+            if (props.deviceId) {
+              const data = await getDataSource(props.deviceId);
+              selectData.value = data;
+              selectData.value = {
+                msgType: null,
+                deviceID: '1917403438771486722',
+                strname: '康孙62联巷变电所19号分站',
+                strinstallpos: '康孙62联巷变电所19号分站',
+                fsectarea: 'null',
+                stationname: '瓦斯抽放',
+                stationtype: 'more_txt_com',
+                deviceType: 'gasdrainage_bd',
+                typeName: '瓦斯抽放-保德',
+                netStatus: 1,
+                warnFlag: 0,
+                warnLevel: 0,
+                warnLevel_str: '正常',
+                syswarnLevel: null,
+                syswarnLevel_str: null,
+                syswarnLevel_des: null,
+                warnTime: null,
+                readTime: '2025-05-08 16:01:40',
+                warnDes: '',
+                frontGateOpenCtrl: null,
+                rearGateOpenCtrl: null,
+                readData: {
+                  value_status: '交流正常',
+                  unit: '',
+                  dataTypeName: '701001',
+                  sign: '0',
+                  dataTypeName_str: '分站',
+                  time: '2025-05-08 16:00:35',
+                  id: '019F00',
+                  isRun: '-2',
+                  value: '2',
+                },
+                readDataDes: null,
+                summaryHour: [],
+                summaryDay: [],
+                history: [],
+                dayhistory: [],
+                totalInfo: null,
+                sign: null,
+                cameras: [],
+                links: [],
+                avgParam: {},
+                other1: null,
+                other2: null,
+                other3: null,
+                remarkInfo: null,
+                linkInfo: null,
+                addrIndex: null,
+                warnLogNotOkCount: 0,
+                otherInfo: null,
+                orderNum: 0,
+              };
+              playAnimate(data);
+              // Object.assign(selectData, data);
+            }
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor();
+            loading.value = false;
+          },
+          flag ? 0 : 1000
+        );
+      });
+    }
+  }
+
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: props.deviceType, ids: systemID });
+    const result = res.msgTxt[0]['datalist'][0];
+    Object.assign(result, result['readData']);
+    return result;
+  }
+
+  function handler(passWord, paramcode) {
+    let value = '';
+    if (paramcode == 'ykjdqh') {
+      value = selectData.value['ykjdqh'] == '1' ? '2' : '1';
+    }
+    if (paramcode == 'jxmsqh') {
+      value = selectData.value['jxmsqh'] == '1' ? '2' : '1';
+    }
+    const data = {
+      deviceid: selectData.value['deviceID'],
+      devicetype: selectData.value['deviceType'],
+      paramcode: paramcode,
+      password: passWord,
+      value: value,
+    };
+    deviceControlApi(data)
+      .then((res) => {
+        if (globalConfig.History_Type == 'remote') {
+          message.success('指令已下发至生产管控平台成功！');
+        } else {
+          message.success('指令已下发成功！');
+        }
+      })
+      .catch((err) => {
+        message.success('控制异常');
+      });
+  }
+
+  function changeCtr(e) {
+    if (e == 1) {
+      // 就地
+      handlerType.value = 'jxmsqh';
+    } else if (e == 2) {
+      // 远程
+      handlerType.value = 'jxmsqh';
+    }
+    passwordModalIsShow.value = true;
+  }
+
+  function changeMode(e) {
+    if (e == 1) {
+      // 检修开
+      handlerType.value = 'ykjdqh';
+    } else if (e == 2) {
+      // 检修关
+      handlerType.value = 'ykjdqh';
+    }
+    passwordModalIsShow.value = true;
+  }
+
+  function handlerFn(paramcode) {
+    handlerType.value = paramcode;
+    passwordModalIsShow.value = true;
+  }
+
+  function handleOK(passWord, handlerState) {
+    handler(passWord, handlerState);
+    passwordModalIsShow.value = false;
+    handlerType.value = '';
+  }
+
+  function handleCancel() {
+    passwordModalIsShow.value = false;
+    handlerType.value = '';
+  }
+
+  watch(
+    () => props.deviceType,
+    () => {
+      removeCamera();
+      nextTick(async () => {
+        if (props.deviceType == 'pump_over') {
+          setModelType('gasPump');
+        } else if (props.deviceType?.startsWith('pump_under') || props.deviceType == 'pump_n12m2pq') {
+          setModelType('gasPumpUnder');
+        }
+      });
+    }
+  );
+  watch(
+    () => props.deviceId,
+    async (deviceID) => {
+      removeCamera();
+      if (deviceID) await getCamera(deviceID, playerRef.value);
+    }
+  );
+
+  onMounted(async () => {
+    timer = null;
+    await getMonitor(true);
+    // fetchConfigs("gasPumpMonitor")
+    // if (selectData && selectData['deviceID']) await getCamera(selectData['deviceID'], playerRef.value);
+  });
+
+  onBeforeUnmount(() => {
+    removeCamera();
+  });
+
+  onUnmounted(() => {
+    removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
+
+  // const { configs, fetchConfigs } = useInitConfigs();
+  const configs = ref<Config[]>([
+    {
+      deviceType: '',
+      moduleName: '瓦斯泵',
+      pageType: '',
+      moduleData: {
+        header: {
+          show: false,
+          readFrom: '',
+          selector: {
+            show: false,
+            value: '${strinstallpos}',
+          },
+          slot: {
+            show: false,
+            value: '',
+          },
+        },
+        background: {
+          show: false,
+          type: 'image',
+          link: '',
+        },
+        layout: {
+          direction: 'column',
+          items: [
+            {
+              name: 'list',
+              basis: '100%',
+            },
+          ],
+        },
+        complex_list: [],
+        chart: [],
+        table: [],
+        gallery: [],
+        list: [
+          {
+            type: 'K',
+            readFrom: '',
+            items: [
+              {
+                label: '状态',
+                value: '${readData.value_status}',
+                color: 'blue',
+              },
+            ],
+          },
+        ],
+        gallery_list: [],
+        preset: [],
+        to: '',
+      },
+      showStyle: {
+        size: 'width:348px;height:300px;',
+        version: '原版',
+        position: 'top:30px;left:10px;',
+      },
+    },
+    {
+      deviceType: '',
+      moduleName: '注水泵',
+      pageType: '',
+      moduleData: {
+        header: {
+          show: false,
+          readFrom: '',
+          selector: {
+            show: false,
+            value: '${strinstallpos}',
+          },
+          slot: {
+            show: false,
+            value: '',
+          },
+        },
+        background: {
+          show: false,
+          type: 'image',
+          link: '',
+        },
+        layout: {
+          direction: 'column',
+          items: [
+            {
+              name: 'list',
+              basis: '100%',
+            },
+          ],
+        },
+        complex_list: [],
+        chart: [],
+        table: [],
+        gallery: [],
+        list: [
+          {
+            type: 'K',
+            readFrom: '',
+            items: [
+              {
+                label: '阀门2开度',
+                value: '${readData.Fan1fI}',
+                color: 'blue',
+              },
+              {
+                label: '阀门3开度',
+                value: '${readData.Fan1fI}',
+                color: 'blue',
+              },
+              {
+                label: '阀门1开度',
+                value: '${readData.Fan1fI}',
+                color: 'blue',
+              },
+            ],
+          },
+        ],
+        gallery_list: [],
+        preset: [],
+        to: '',
+      },
+      showStyle: {
+        size: 'width:348px;height:200px;',
+        version: '原版',
+        position: 'top:340px;left:10px;',
+      },
+    },
+    {
+      deviceType: '',
+      moduleName: '排水泵',
+      pageType: '',
+      moduleData: {
+        header: {
+          show: false,
+          readFrom: '',
+          selector: {
+            show: false,
+            value: '${strinstallpos}',
+          },
+          slot: {
+            show: false,
+            value: '',
+          },
+        },
+        background: {
+          show: false,
+          type: 'image',
+          link: '',
+        },
+        layout: {
+          direction: 'column',
+          items: [
+            {
+              name: 'list',
+              basis: '100%',
+            },
+          ],
+        },
+        complex_list: [],
+        chart: [],
+        table: [],
+        gallery: [],
+        list: [
+          {
+            type: 'K',
+            readFrom: '',
+            items: [
+              {
+                label: '阀门2开度',
+                value: '${readData.Fan1fI}',
+                color: 'blue',
+              },
+              {
+                label: '阀门3开度',
+                value: '${readData.Fan1fI}',
+                color: 'blue',
+              },
+              {
+                label: '阀门1开度',
+                value: '${readData.Fan1fI}',
+                color: 'blue',
+              },
+            ],
+          },
+        ],
+        gallery_list: [],
+        preset: [],
+        to: '',
+      },
+      showStyle: {
+        size: 'width:348px;height:200px;',
+        version: '原版',
+        position: 'top:550px;left:10px;',
+      },
+    },
+    {
+      deviceType: '',
+      moduleName: '泵站检测详情',
+      pageType: '',
+      moduleData: {
+        header: {
+          show: false,
+          readFrom: '',
+          selector: {
+            show: false,
+            value: '${strinstallpos}',
+          },
+          slot: {
+            show: false,
+            value: '',
+          },
+        },
+        background: {
+          show: false,
+          type: 'image',
+          link: '',
+        },
+        layout: {
+          direction: 'column',
+          items: [
+            {
+              name: 'list',
+              basis: '100%',
+            },
+          ],
+        },
+        complex_list: [
+          // {
+          //   type: 'G',
+          //   readFrom: '',
+          //   items: [
+          //     {
+          //       title: 'datalist细则',
+          //       contents: [
+          //         {
+          //           label: '阀门2开度',
+          //           value: '${readData.Fan1fI}',
+          //           color: 'blue',
+          //         },
+          //       ],
+          //     },
+          //   ],
+          // },
+        ],
+        chart: [],
+        table: [],
+        gallery: [],
+        list: [
+          {
+            type: 'K',
+            readFrom: '',
+            items: [
+              {
+                label: '阀门2开度',
+                value: '${readData.Fan1fI}',
+                color: 'blue',
+              },
+              {
+                label: '阀门3开度',
+                value: '${readData.Fan1fI}',
+                color: 'blue',
+              },
+              {
+                label: '阀门1开度',
+                value: '${readData.Fan1fI}',
+                color: 'blue',
+              },
+            ],
+          },
+        ],
+        gallery_list: [],
+        preset: [],
+        to: '',
+      },
+      showStyle: {
+        size: 'width:348px;height:490px;',
+        version: '原版',
+        position: 'top:220px;right:0px;',
+      },
+    },
+  ]);
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
+
+  .elementContent {
+    :deep(.main-container) {
+      display: flex;
+      flex-wrap: wrap;
+      width: 690px;
+      padding: 10px 12px 10px 15px;
+      border: 1px solid #d3e1ff33;
+      background-color: #061c2a55;
+      box-shadow: 0 0 15px #3b567f55;
+      background-color: #38383833;
+      .gas-monitor-row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        color: #fff;
+        line-height: 32px;
+        .title {
+          width: 250px;
+          color: #baeaff;
+        }
+        .value {
+          width: 80px;
+          color: #efae05;
+        }
+      }
+    }
+  }
+  .modal-monitor-box {
+    background-color: #000;
+    color: #fff;
+    padding: 0 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .title {
+      margin-right: 5px;
+    }
+    .signal-round {
+      margin-left: 5px;
+    }
+    .value {
+      width: 30px;
+      color: #efae05;
+    }
+  }
+  .device-state {
+    width: 100%;
+    position: absolute;
+    top: 20px;
+    color: #e90000;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+  }
+
+  .lr {
+    margin-top: 0 !important;
+  }
+  .left-box {
+    width: 360px !important;
+    direction: rtl;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100% - 60px);
+    margin-top: 30px !important;
+
+    .left-container {
+      direction: ltr;
+    }
+  }
+  .right-box {
+    width: 350px !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    .environment-monitor {
+      .item {
+        flex: 1;
+        margin: 0 5px;
+        .title {
+          color: #7ae5ff;
+          text-align: center;
+          margin-bottom: 2px;
+        }
+        .num {
+          width: 100%;
+          height: 30px;
+          text-align: center;
+          border-top: 2px solid #50c8fc;
+          border-radius: 4px;
+          background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
+        }
+      }
+    }
+    .pool-box {
+      width: 327px;
+      height: 65px;
+      padding: 0 5px;
+      background: url('/@/assets/images/vent/pump1.png') no-repeat;
+      background-size: cover;
+      background-origin: content-box;
+      margin-top: 2px;
+      .num {
+        color: aqua;
+      }
+      .center {
+        padding-right: 5px;
+      }
+    }
+  }
+  .player-box {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    padding: 0 20px 0 20px;
+    z-index: 9999;
+    display: flex;
+    align-items: end;
+    bottom: 80px;
+    :deep(#LivePlayerBox) {
+      display: flex;
+      justify-content: end;
+    }
+  }
+
+  .input-box {
+    width: calc(100%);
+    display: flex;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    .input-item {
+      width: calc(50% - 8px);
+      padding: 0 2px;
+
+      &:nth-child(2n) {
+        margin-left: 4px;
+      }
+    }
+  }
+  .btn-group {
+    display: flex;
+    justify-content: space-around;
+    .btn-item {
+      width: 82px;
+      text-align: center;
+    }
+  }
+  .top-btn {
+    .btn-group {
+      margin-bottom: 8px;
+      .btn-item {
+        width: calc(50% - 16px);
+        margin: 0 4px;
+      }
+    }
+    .control-item {
+      margin-left: 10px;
+      margin-bottom: 8px;
+      display: flex;
+      .control-title {
+        width: 80px;
+        color: var(--vent-font-action-link);
+      }
+      .control-container {
+        display: flex;
+      }
+    }
+  }
+  .btn-box {
+    display: flex;
+    .btn {
+      padding: 0 8px !important;
+      margin: 0 2px;
+    }
+  }
+  .state-header {
+    display: flex;
+    color: var(--vent-font-action-link);
+    .header-item {
+      width: 25%;
+      text-align: center;
+    }
+  }
+  .device-row {
+    display: flex;
+    margin-top: 10px;
+    .state {
+      width: 25%;
+      text-align: center;
+      font-size: 13px;
+    }
+  }
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
+  }
+  :deep(.list-item__background) {
+    background-image: linear-gradient(to right, #39deff15, #3977e500) !important;
+    line-height: 30px !important;
+    height: 30px !important;
+  }
+</style>