gasInjection-project/src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHomeCC.vue

<template>
  <div class="monitor-container">
    <div
      v-if="deviceType?.startsWith('pump_under') && deviceProperty.modelMonitor.length > 0"
      id="FlowSensor"
      class="FlowSensor-box"
      style="position: absolute; display: none"
    >
      <!-- <div class="elementContent">
        <fourBorderBg>
          <div v-for="(item, index) in deviceProperty.modelMonitor" :key="index" class="gas-monitor-row">
            <div class="title">{{ item.title }}</div>
            <template v-if="item.type !== 'sign' && item.type !== 'warning'">
              <div class="value">{{ selectData[item.code] ? selectData[item.code] : '-' }}</div>
            </template>
            <template v-else>
              <div class="value">
                <span
                  :class="{
                    'signal-round': true,
                    'signal-round-run': item.type === 'sign' && selectData[item.code] == '1',
                    'signal-round-gry': selectData[item.code] == '0' || !selectData[item.code],
                    'signal-round-warning': item.type === 'warning' && selectData[item.code] == '1',
                  }"
                ></span>
              </div>
            </template>
          </div>
        </fourBorderBg>
      </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">
          <template v-if="selectData[tag.code]">
            <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>
          </template>
        </div>
      </div>
    </div>

    <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
    <div class="btn-group">
      <a-button v-if="deviceProperty.detailCtrl.length > 0" class="btn-item" type="primary" @click="openModal">瓦斯泵控制</a-button>
    </div>
    <div class="lr left-box">
      <div class="left-container">
        <div class="monitor-box">
          <template v-for="(device, leftIndex) in deviceProperty.leftMonitor" :key="leftIndex">
            <ventBox1 :class="{ 'vent-margin-t-10': leftIndex > 0 }">
              <template #title>
                <div>{{ device.title }}</div>
              </template>
              <template #container>
                <template v-for="(deviceChild, deviceChildIndex) in device.children" :key="deviceChildIndex">
                  <div v-for="(deviceKey, deviceIndex) in deviceChild.key" :key="deviceIndex">
                    <div v-if="deviceChild.key.length > 1" class="parameter-title group-parameter-title"
                      ><SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ deviceChild.childTitle[deviceIndex] }}</span></div
                    >
                    <div class="input-box">
                      <div v-for="(item, index) in deviceChild.list" class="input-item" :key="index">
                        <div
                          :class="{
                            'w-280px': item.type == 'sign' || item.type == 'warning',
                            title: item.type !== 'sign' && item.type !== 'warning',
                          }"
                          >{{ item.title }}：</div
                        >
                        <template v-if="item.type !== 'sign' && item.type !== 'warning'">
                          <div class="value">{{
                            selectData && selectData[deviceKey + item.code] ? formatNum(selectData[deviceKey + item.code], 1) : '-'
                          }}</div>
                        </template>
                        <template v-else>
                          <div class="value">
                            <span
                              :class="{
                                'signal-round': true,
                                'signal-round-run': item.type === 'sign' && selectData[deviceKey + item.code] == '1',
                                'signal-round-gry': selectData[deviceKey + item.code] == '0' || !selectData[deviceKey + item.code],
                                'signal-round-warning': item.type === 'warning' && selectData[deviceKey + item.code] == '1',
                              }"
                            ></span>
                          </div>
                        </template>
                      </div>
                    </div>
                  </div>
                </template>
              </template>
            </ventBox1>
          </template>
        </div>
      </div>
    </div>
    <div class="lr right-box">
      <div class="item-box sensor-container">
        <ventBox1 class="">
          <template #title>
            <div>泵站监测详情</div>
          </template>
          <template #container>
            <ListItem
              v-for="(item, index) in deviceProperty.modelMonitor"
              :key="index"
              class="w-100% mb-5px"
              :value="selectData[item.code]"
              :label="item.title"
              label-width="250px"
            />
          </template>
        </ventBox1>
        <ventBox1 v-for="(device, rightIndex) in deviceProperty.rightMonitor" :key="rightIndex" class="vent-margin-t-10">
          <template #title>
            <div>{{ device.title }}</div>
          </template>
          <template #container>
            <div v-if="device.type == 'table'">
              <div class="state-header">
                <div class="header-item" v-for="(header, index) in device.stateHeader" :key="index">{{ header }}</div>
              </div>
              <div class="">
                <div v-for="(child, index) in device.children" :key="index">
                  <div class="device-row" v-for="(valveKey, valveIndex) in child.key" :key="valveIndex">
                    <div class="state">{{ child.childTitle[valveIndex] }} </div>
                    <div class="state" v-for="(state, i) in device['list']" :key="i">
                      <span v-if="state['dict']">{{
                        state['dict'][selectData[valveKey + state.code]] ? state['dict'][selectData[valveKey + state.code]] : '-'
                      }}</span>
                      <span
                        v-else
                        :class="{
                          'signal-round': true,
                          'signal-round-run': selectData[valveKey + state.code] == '1',
                          'signal-round-gry': selectData[valveKey + state.code] != '1',
                        }"
                      ></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <template v-for="(deviceChild, deviceChildIndex) in device.children" :key="deviceChildIndex">
                <div v-for="(deviceKey, deviceIndex) in deviceChild.key" :key="deviceIndex">
                  <div v-if="deviceChild.key.length > 1" class="parameter-title group-parameter-title"
                    ><SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ deviceChild.childTitle[deviceIndex] }}</span></div
                  >
                  <div class="input-box">
                    <div v-for="(item, index) in deviceChild.list" class="input-item" :key="index">
                      <div
                        :class="{ 'w-280px': item.type == 'sign' || item.type == 'warning', title: item.type !== 'sign' && item.type !== 'warning' }"
                        >{{ item.title }}：</div
                      >
                      <template v-if="item.type !== 'sign' && item.type !== 'warning'">
                        <div class="value">{{
                          selectData && selectData[deviceKey + item.code] ? formatNum(selectData[deviceKey + item.code], 1) : '-'
                        }}</div>
                      </template>
                      <template v-else>
                        <div class="value">
                          <span
                            :class="{
                              'signal-round': true,
                              'signal-round-run': item.type === 'sign' && selectData[deviceKey + item.code] == '1',
                              'signal-round-gry': selectData[deviceKey + item.code] == '0' || !selectData[deviceKey + item.code],
                              'signal-round-warning': item.type === 'warning' && selectData[deviceKey + item.code] == '1',
                            }"
                          ></span>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </template>
        </ventBox1>
      </div>
    </div>
    <div v-if="renderPlayer" 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 { setModelType, playAnimate } from '../gasPump.threejs';
  import { getMonitorData, devicePropertyType, getModelMonitorTags } from '../gasPump.data';
  // import { leftMonitor, rightMonitor, modelMonitor, detailCtrl } from '../gasPump.dataCc2_2';
  import { list } from '../gasPump.api';
  import { SvgIcon } from '/@/components/Icon';
  import { formatNum } from '/@/utils/ventutil';
  import DetailModal from './DetailModalCC.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 ListItem from '@/views/vent/gas/components/list/listItem.vue';

  const globalConfig = inject('globalConfig');

  const props = defineProps({
    deviceId: {
      type: String,
      require: true,
    },
    deviceType: {
      type: String,
      require: true,
    },
  });
  const [register, { openModal }] = useModal();
  const loading = ref(false);
  const passwordModalIsShow = ref(false);
  const handlerType = ref('');
  const playerRef = ref();
  const renderPlayer = ref(true);
  const deviceProperty = ref({
    leftMonitor: [] as devicePropertyType[],
    rightMonitor: [] as devicePropertyType[],
    modelMonitor: [] as devicePropertyType[],
    detailCtrl: [] as devicePropertyType[],
  });
  const modelMonitorTags = getModelMonitorTags();

  // 监测数据
  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(props.deviceId);
              selectData.value = data;
              playAnimate(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['paramcode'] == '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 handleOK(passWord, handlerState) {
    handler(passWord, handlerState);
    passwordModalIsShow.value = false;
    handlerType.value = '';
  }

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

  watch(
    () => props.deviceType,
    () => {
      getMonitorData(props.deviceType).then((data) => {
        deviceProperty.value = data;
        nextTick(() => {
          if (props.deviceType == 'pump_over') {
            setModelType('gasPump');
          } else if (props.deviceType?.startsWith('pump_under')) {
            setModelType('gasPumpUnder');
          }
        });
      });
    }
  );

  watch(
    () => props.deviceId,
    async (deviceID) => {
      removeCamera(playerRef);
      if (deviceID) await getCamera(deviceID, playerRef, renderPlayer);
    }
  );

  onMounted(async () => {
    timer = null;
    await getMonitor(true);
    if (selectData.value && selectData.value['deviceID']) await getCamera(selectData.value['deviceID'], playerRef, renderPlayer);
  });

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

  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';
  @import '/@/design/vent/modal.less';
  @import '../../comment/less/workFace.less';
  @ventSpace: zxm;

  @{theme-deepblue} {
    .elementContent {
      --image-pump1: url('/@/assets/images/themify/deepblue/vent/pump1.png');
    }
  }

  .elementContent {
    --image-pump1: url('/@/assets/images/vent/pump1.png');
    :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;
    }
  }
  .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;
      :deep(.input-item .title) {
        width: 220px !important;
      }
    }
  }
  .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: var(--image-pump1) 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;
    right: 330px;
    :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 {
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: end;
    right: 380px;
    top: 85px;
    pointer-events: auto;
    .btn-item {
      width: auto;
      text-align: center;
    }
  }
  .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;
  }
</style>