mky-vent-base/src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHomeCopy.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>
    <!--
      布尔台瓦斯泵模型上的数据提示框（出气阀1#、进气阀2#、出水阀1#、进水阀2# 等 8 个小方框）已按要求隐藏。
      当前流动效果改为直接跟随瓦斯泵磁力启动器/变频器运行状态，不再依赖阀门点位，
      因此这些标签既无数据来源也无展示必要；保留代码以便后续需要时恢复。
    <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>
  <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, watch, inject, nextTick, computed } from 'vue';
  // import ventBox1 from '/@/components/vent/ventBox1.vue';
  import { setModelType, playAnimate, setRunSignals } from '../gasPump.threejs';
  // import ListItem from '@/views/vent/gas/components/list/listItem.vue';
  import { getModelMonitorTags, getPumpRunSignals } from '../gasPump.data';
  import { list } from '../gasPump.api';
  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 { useInitConfigs } from '../../../home/configurable/hooks/useInit';
  import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
  import { set } from 'lodash-es';

  const globalConfig = inject<any>('globalConfig');
  /** 二维模型的动画入口（页面 provide；三维模式下 modelRef 为空，调用即 no-op） */
  const animate2D = inject<((data?: any) => void) | null>('animateGasPump2D', null);

  const props = defineProps({
    deviceId: {
      type: String,
      require: true,
    },
    deviceType: {
      type: String,
      require: true,
    },
  });

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

  // const [register, { openModal }] = useModal();
  const modelMonitorTags = getModelMonitorTags();
  const loading = ref(false);
  const passwordModalIsShow = ref(false);
  const handlerType = ref('');
  const playerRef = ref();

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

  // 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();
              selectData.value = data;
              playAnimate(data);
              animate2D?.(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((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 = '';
  }

  // 喷粉操作
  // function handlerDevice(code, data) { }

  watch(
    () => props.deviceType,
    (val) => {
      // removeCamera();
      nextTick(async () => {
        if (val == 'pump_over') {
          setModelType('gasPump');
        } else if (val?.startsWith('pump_under') || val == 'pump_n12m2pq') {
          setModelType('gasPumpUnder');
        }
        if (!val) return;
        const signals = await getPumpRunSignals(val);
        // 按站型注入瓦斯泵运行信号，驱动管道流动动画
        setRunSignals(signals);
      });
    }
  );

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

  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>