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

<template>
  <div id="FlowSensor" class="FlowSensor-box" style="position: absolute; z-index: -1;" v-if="selectData.FlowSensor_InputFlux">
    <div ref="elementContent" class="elementContent" >
      <p style="color: #50c8fc;"><span class="data-title">抽采泵流量(m³)：</span>{{ formatNum(selectData.FlowSensor_InputFlux) }}</p>
    </div>
  </div>
  <div class="monitor-container">
    <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">
                    <template v-if="selectData[item.code.replace('CentrifugalPump', `CentrifugalPump${key}`)] != undefined">
                      <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>
                    </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">
                    <template v-if="selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)] != undefined">
                      <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>
                    </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">
                    <template v-if="selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)] != undefined">
                      <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>
                    </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>
  <DetailModal @register="register"  :deviceType="deviceType" :deviceId="deviceId"/>
  <PasswordModal :modal-is-show="passwordModalIsShow" modal-title="密码检验" :modal-type="handlerType" @handle-ok="handleOK"
      @handle-cancel="handleCancel"/>
</template>

<script setup lang="ts">

import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
import ventBox1 from '/@/components/vent/ventBox1.vue'
import { mountedThree, destroy, setModelType } from '../gasPump.threejs';
import { stateHeader, valveState, pumpMonitorData, waterPumpData, dewateringPumpData, pumpCtrlType, valveCtrlType, valveCtrl, PumpCtrlItems, pumpCtrl } 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';

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 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 flvURL1 = () => {
  return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
  // return ''
};

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor(flag?) {
  if (Object.prototype.toString.call(timer) === '[object Null]') {
    timer = setTimeout(async () => {
      if (props.deviceId) {
        const data = await getDataSource(props.deviceId)
        Object.assign(selectData, data); 
      }
      if (timer) {
        timer = 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 = null
  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) => {
    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, () => {
  // if(props.deviceType == 'pump_over'){
  //   setModelType('gasPump')
  // }else if(props.deviceType == 'pump_under') {
  //   setModelType('gasPumpUnder')
  // }
})

onBeforeMount(() => {

});

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

onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});

</script>
<style lang="less" scoped>
@import '/@/design/vent/modal.less';
@import '../../comment/less/workFace.less';
@ventSpace: zxm;
.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;
    }
  }
}

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