gasInjection-project/src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHomeBet.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>
    <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="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>
        <ventBox1 v-for="(device, rightIndex) in deviceProperty.rightMonitor" :key="rightIndex" class="vent-margin-t-10">
          <template #title>
            <div>{{ device.title }}</div>
          </template>
          <template #container>
            <ListItem
              v-for="(item, index) in device.list"
              :key="index"
              class="w-100% mb-5px"
              :value="selectData[item.code]"
              :label="item.title"
              label-width="250px"
            />
          </template>
        </ventBox1>
      </div>
      <!-- <div class="item-box" >
      <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
    </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, defineProps, watch, inject, nextTick, onBeforeUnmount } from 'vue';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  import { setModelType, playAnimate } from '../gasPump.threejs';
  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
  import { getModelMonitorTags, devicePropertyType, getMonitorData } 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 { useCamera } from '/@/hooks/system/useCamera';

  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 deviceProperty = ref({
    leftMonitor: [] as devicePropertyType[],
    rightMonitor: [] as devicePropertyType[],
    modelMonitor: [] as devicePropertyType[],
    detailCtrl: [] as devicePropertyType[],
  });
  const loading = ref(false);
  const tabActiveKey = ref(1);
  const passwordModalIsShow = ref(false);
  const handlerType = ref('');
  const playerRef = ref();
  const renderPlayer = ref(true);

  // 监测数据
  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;
              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 = '';
  }

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

  watch(
    () => props.deviceType,
    () => {
      removeCamera(playerRef);
      getMonitorData(props.deviceType).then((data) => {
        deviceProperty.value = data;

        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(playerRef);
      if (deviceID) await getCamera(deviceID, playerRef, renderPlayer);
    }
  );

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

  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;

  .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>