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

<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>
    <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, defineProps, watch, inject, nextTick, computed } from 'vue';
  // import ventBox1 from '/@/components/vent/ventBox1.vue';
  import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
  import { setModelType, playAnimate } from '../gasPump.threejs';
  import { getModelMonitorTags } from '../gasPump.data';
  // 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 { useCamera } from '/@/hooks/system/useCamera';
  // import { Config } from '../../../deviceManager/configurationTable/types';
  // import DetailModal from './DetailModal.vue';
  import { set } from 'lodash-es';
  import { list } from '../gasPump.api';
  import { useInitConfigs } from '../../../home/configurable/hooks/useInit';

  const { configs: rawConfigs, fetchConfigs } = useInitConfigs();

  const globalConfig = inject<any>('globalConfig');

  const props = defineProps<{ deviceId: string; deviceType: string }>();
  // const [register, { openModal }] = useModal();
  const modelMonitorTags = getModelMonitorTags();
  const loading = ref(false);
  const passwordModalIsShow = ref(false);
  const handlerType = ref('');
  const playerRef = ref();

  // 监测数据
  const selectData = ref<any>({});

  // 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 () => {
            const data = await getDataSource();
            selectData.value = data;
            playAnimate(data);
            // Object.assign(selectData, data);
            if (timer) {
              timer = null;
            }
            resolve(null);
            await getMonitor();
            loading.value = false;
          },
          flag ? 0 : 1000
        );
      });
    }
  }

  async function getDataSource() {
    const res = await list({
      devicetype: 'gasdrainage',
      pagetype: 'normal',
    });
    const datalist = res.msgTxt[0]['datalist'];

    const result = datalist.reduce((obj, e) => {
      return set(obj, e.readData.id, e);
    }, {});
    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(() => {
        if (globalConfig.History_Type == 'remote') {
          message.success('指令已下发至生产管控平台成功！');
        } else {
          message.success('指令已下发成功！');
        }
      })
      .catch(() => {
        message.success('控制异常');
      });
  }

  function handleOK(passWord, handlerState) {
    handler(passWord, handlerState);
    passwordModalIsShow.value = false;
    handlerType.value = '';
  }

  function handleCancel() {
    passwordModalIsShow.value = false;
    handlerType.value = '';
  }

  const configs = computed(() => {
    return rawConfigs.value.filter((c) => c.deviceType == props.deviceId);
  });

  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');
        }
      });
    }
  );

  onMounted(async () => {
    timer = null;
    await getMonitor(true);
    fetchConfigs('gasPumpMonitor');
  });

  // onBeforeUnmount(() => {
  //   removeCamera();
  // });

  onUnmounted(() => {
    // removeCamera();
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  });

  // const rawConfigs = ref<Config[]>([
  //   {
  //     deviceType: '1709773229143920641',
  //     moduleName: '瓦斯泵',
  //     pageType: 'gasPumpMonitor',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         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: '701001传感器的值',
  //               value: '${701001.readData.value}',
  //               color: 'blue',
  //             },
  //           ],
  //         },
  //       ],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:348px;height:300px;',
  //       version: '原版',
  //       position: 'top:30px;left:10px;',
  //     },
  //   },
  //   {
  //     deviceType: '1709773229143920641',
  //     moduleName: '注水泵',
  //     pageType: 'gasPumpMonitor',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         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: '701001传感器的值',
  //               value: '${701001.readData.value}',
  //               color: 'blue',
  //             },
  //           ],
  //         },
  //       ],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:348px;height:200px;',
  //       version: '原版',
  //       position: 'top:340px;left:10px;',
  //     },
  //   },
  //   {
  //     deviceType: '1709773229143920641',
  //     moduleName: '排水泵',
  //     pageType: 'gasPumpMonitor',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         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: '701001传感器的值',
  //               value: '${701001.readData.value}',
  //               color: 'blue',
  //             },
  //           ],
  //         },
  //       ],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:348px;height:200px;',
  //       version: '原版',
  //       position: 'top:550px;left:10px;',
  //     },
  //   },
  //   {
  //     deviceType: '1709773229143920641',
  //     moduleName: '泵站检测详情',
  //     pageType: 'gasPumpMonitor',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         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: '701001传感器的值',
  //               value: '${701001.readData.value}',
  //               color: 'blue',
  //             },
  //           ],
  //         },
  //       ],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:348px;height:490px;',
  //       version: '原版',
  //       position: 'top:30px;right:0px;',
  //     },
  //   },
  //   {
  //     deviceType: '1709773300489031682',
  //     moduleName: '瓦斯泵',
  //     pageType: 'gasPumpMonitor',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         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: '701004传感器的值',
  //               value: '${701004.readData.value}',
  //               color: 'blue',
  //             },
  //           ],
  //         },
  //       ],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:348px;height:300px;',
  //       version: '原版',
  //       position: 'top:30px;left:10px;',
  //     },
  //   },
  //   {
  //     deviceType: '1709773300489031682',
  //     moduleName: '注水泵',
  //     pageType: 'gasPumpMonitor',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         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: '701004传感器的值',
  //               value: '${701004.readData.value}',
  //               color: 'blue',
  //             },
  //           ],
  //         },
  //       ],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:348px;height:200px;',
  //       version: '原版',
  //       position: 'top:340px;left:10px;',
  //     },
  //   },
  //   {
  //     deviceType: '1709773300489031682',
  //     moduleName: '排水泵',
  //     pageType: 'gasPumpMonitor',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         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: '701004传感器的值',
  //               value: '${701004.readData.value}',
  //               color: 'blue',
  //             },
  //           ],
  //         },
  //       ],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:348px;height:200px;',
  //       version: '原版',
  //       position: 'top:550px;left:10px;',
  //     },
  //   },
  //   {
  //     deviceType: '1709773300489031682',
  //     moduleName: '泵站检测详情',
  //     pageType: 'gasPumpMonitor',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         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: '701004传感器的值',
  //               value: '${701004.readData.value}',
  //               color: 'blue',
  //             },
  //           ],
  //         },
  //       ],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:348px;height:490px;',
  //       version: '原版',
  //       position: 'top:30px;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>