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

<template>
  <div class="monitor-container">
    <div id="FlowSensor" class="FlowSensor-box" style="position: absolute; display: none">
      <div class="elementContent" v-if="deviceType == 'pump_under'">
        <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>
        <!-- <p style="color: #50c8fc;"><span class="data-title">抽采泵流量(m³)：</span>{{ formatNum(selectData.FlowSensor_InputFlux) }}</p> -->
      </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">
          <ventBox1>
            <template #title>
              <div>抽采泵</div>
            </template>
            <template #container>
              <div v-for="key in 2" :key="key">
                <div class="parameter-title group-parameter-title"
                  ><SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#抽采泵</span></div
                >
                <div class="input-box">
                  <div v-for="(item, index) in pumpMonitorData" class="input-item" :key="index">
                    <div class="title">{{ item.title }}：</div>
                    <template v-if="item.type !== 'sign'">
                      <div class="value">{{
                        selectData && selectData[item.code.replace('CentrifugalPump', `CentrifugalPump${key}`)]
                          ? formatNum(selectData[item.code.replace('CentrifugalPump', `CentrifugalPump${key}`)])
                          : '-'
                      }}</div>
                    </template>
                    <template v-else>
                      <div class="value">
                        <span
                          :class="{
                            'signal-round': true,
                            'signal-round-run': selectData[item.code.replace('CentrifugalPump', `CentrifugalPump${key}`)] == '1',
                            'signal-round-gry': selectData[item.code.replace('CentrifugalPump', `CentrifugalPump${key}`)] == '0',
                          }"
                        ></span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </template>
          </ventBox1>
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>注水泵</div>
            </template>
            <template #container>
              <div v-for="key in 2" :key="key">
                <div class="parameter-title group-parameter-title"
                  ><SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#注水泵</span></div
                >
                <div class="input-box">
                  <div v-for="(item, index) in waterPumpData" class="input-item" :key="index">
                    <div class="title">{{ item.title }}：</div>
                    <template v-if="item.type !== 'sign'">
                      <div class="value">{{
                        selectData && selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)]
                          ? formatNum(selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)])
                          : '-'
                      }}</div>
                    </template>
                    <template v-else>
                      <div class="value">
                        <span
                          :class="{
                            'signal-round': true,
                            'signal-round-run': selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)],
                            'signal-round-gry': selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)] == '0',
                          }"
                        ></span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </template>
          </ventBox1>
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>排水泵</div>
            </template>
            <template #container>
              <div v-for="key in 2" :key="key">
                <div class="parameter-title group-parameter-title"
                  ><SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#排水泵</span></div
                >
                <div class="input-box">
                  <div v-for="(item, index) in dewateringPumpData" class="input-item" :key="index">
                    <div class="title">{{ item.title }}：</div>
                    <template v-if="item.type !== 'sign'">
                      <div class="value">{{
                        selectData && selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)]
                          ? formatNum(selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)])
                          : '-'
                      }}</div>
                    </template>
                    <template v-else>
                      <div class="value">
                        <span
                          :class="{
                            'signal-round': true,
                            'signal-round-run': selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)],
                            'signal-round-gry': selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)] == '0',
                          }"
                        ></span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </template>
          </ventBox1>
        </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>
                  <a-radio-group v-model:value="selectData['ykjdqh']" @change="changeCtr">
                    <a-radio :value="'0'">就地</a-radio>
                    <a-radio :value="'1'">远程</a-radio>
                  </a-radio-group>
                </div>
                <div class="control-item">
                  <div class="control-title">检修模式：</div>
                  <a-radio-group v-model:value="selectData['jxmsqh']" @change="changeMode">
                    <a-radio :value="'0'">关闭</a-radio>
                    <a-radio :value="'1'">开启</a-radio>
                  </a-radio-group>
                </div>
              </div>
            </div>
          </template>
        </ventBox1>
        <ventBox1 class="vent-margin-t-10">
          <template #title>
            <div>阀门运行状态</div>
          </template>
          <template #container>
            <div class="state-header">
              <div class="header-item" v-for="(header, index) in stateHeader" :key="index">{{ header }}</div>
            </div>
            <div class="">
              <div v-for="key in 2" :key="key">
                <div class="device-row" v-for="(valveType, index) in valveCtrlType" :key="index">
                  <div class="state">#{{ key }}{{ valveType.title }} </div>
                  <div class="state" v-for="(state, i) in valveState" :key="i">
                    <span v-if="state.code == '_CtrlMode'">{{
                      selectData[`CentrifugalPump${key}_${valveType.code}${state.code}`] == '1' ? '控制' : '-'
                    }}</span>
                    <span
                      v-else
                      :class="{
                        'signal-round': true,
                        'signal-round-run': selectData[`CentrifugalPump${key}_${valveType.code}${state.code}`] == '1',
                        'signal-round-gry': selectData[`CentrifugalPump${key}_${valveType.code}${state.code}`] == '0',
                      }"
                    ></span>
                  </div>
                </div>
              </div>
            </div>
          </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 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 } from '../gasPump.threejs';
  import { stateHeader, valveState, pumpMonitorData, waterPumpData, dewateringPumpData, modelMonitor, 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';

  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 tabActiveKey = ref(1);
  const passwordModalIsShow = ref(false);
  const handlerType = ref('');
  const playerRef = ref();

  // 监测数据
  const selectData = reactive({
    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: '-',
  });

  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);
              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['ykjdqh'] == '1' ? '2' : '1';
    }
    if (paramcode == 'jxmsqh') {
      value = selectData['jxmsqh'] == '1' ? '2' : '1';
    }
    const data = {
      deviceid: selectData['deviceID'],
      devicetype: selectData['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.target.value == 1) {
      // 就地
      handlerType.value = 'jxmsqh';
    } else if (e.target.value == 2) {
      // 远程
      handlerType.value = 'jxmsqh';
    }
    passwordModalIsShow.value = true;
  }

  function changeMode(e) {
    if (e.target.value == 1) {
      // 检修开
      handlerType.value = 'ykjdqh';
    } else if (e.target.value == 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,
    () => {
      nextTick(async () => {
        if (props.deviceType == 'pump_over') {
          setModelType('gasPump');
        } else if (props.deviceType == 'pump_under') {
          setModelType('gasPumpUnder');
        }
      });
    }
  );
  watch(
    () => props.deviceId,
    async (deviceID) => {
      debugger;
      if (deviceID) await getCamera(deviceID, playerRef.value);
    }
  );

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

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

  onUnmounted(() => {
    removeCamera();
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>
<style lang="less" scoped>
  @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;
        }
      }
    }
  }

  .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% - 30px);

    .left-container {
      margin-top: 30px;
      direction: ltr;
    }
  }
  .right-box {
    width: 350px !important;
    .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;
    }
  }
  .control-group {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    margin: 4px 0;
    .control-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1px 10px;
      .control-item-title {
        color: #a6dce9;
        position: relative;
      }
      .control-item-state {
        width: 86px;
        height: 31px;
        background: url('/@/assets/images/vent/control-switch-bg1.png');
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }

      .button-box {
        position: relative;
        padding: 5px;
        border: 1px transparent solid;
        background-clip: border-box;
        border-radius: 5px;
        margin-left: 8px;
      }

      .a-button {
        pointer-events: auto;
      }

      &::v-deep .a-button--mini {
        padding: 6px 10px;
      }

      &::v-deep .a-button--mini.is-round {
        padding: 6px 10px;
      }
    }
  }
  .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: 150px;
        color: #73e8fe;
      }
    }
  }
  .state-header {
    display: flex;
    color: #73e8fe;
    .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>