gas-injection/src/views/vent/monitorManager/gateMonitor/index.vue

<template>
  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;">
    <a-spin :spinning="loading" />
    <div id="damper3D"  v-show="!loading" style="width: 100%; height: 100%;; position: absolute; overflow: hidden;"> </div>
    <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
      <div>
        <div ref="elementContent" class="elementContent">
          <p><span class="data-title">压力(Pa)：</span>{{selectData.frontRearDP}}</p>
          <p><span class="data-title">动力源压力(MPa)：</span>{{selectData.sourcePressure}}</p>
          <p><span class="data-title">故障诊断：</span>
            <i
              :class="{'state-icon': true, 'open': selectData.messageBoxStatus, 'close': !selectData.messageBoxStatus}"
            ></i>{{selectData.fault}}</p>
        </div>
      </div>
    </div> -->
  </div>
  <div class="scene-box">
    <div class="top-box">
      <div class="top-left row">
        井下风门远程集中管理
      </div>
      <div class="top-center row">
        <div class="button-box" :class="{'button-disable': backDoorIsOpen}" @click="playAnimation(1)">打开前门</div>
        <div class="button-box" :class="{'button-disable': backDoorIsOpen}" @click="playAnimation(2)">关闭前门</div>
        <div class="button-box" :class="{'button-disable': frontDoorIsOpen}" @click="playAnimation(3)">打开后门</div>
        <div class="button-box" :class="{'button-disable': frontDoorIsOpen}" @click="playAnimation(4)">关闭后门</div>
        <div class="button-box" :class="{'button-disable': frontDoorIsOpen || backDoorIsOpen}" @click="playAnimation(5)">打开前后门</div>
        <div class="button-box" :class="{'button-disable': (frontDoorIsOpen && !backDoorIsOpen) || (backDoorIsOpen && !frontDoorIsOpen)}" @click="playAnimation(6)">关闭前后门</div>
        <!-- <div class="button-box" @click="enterMY">漫游</div> -->
      </div>
      <div class="top-right row">
        <div class="control-type row">
          <div class="control-title">控制模式：</div>
          <a-radio-group v-model:value="selectData.autoRoManual" @change="changeType">
            <a-radio :value="`0`">就地</a-radio>
            <a-radio :value="`1`">远程</a-radio>
          </a-radio-group>
        </div>
        <div class="run-type row">
          <div class="control-title">运行状态：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="`1`">检修</a-radio>
          </a-radio-group>
        </div>
        <div class="run-state row">
          <div class="control-title">网络状态：</div>
          <a-radio-group v-model:value="selectData.netStatus">
            <a-radio :value="`1`">运行</a-radio>
          </a-radio-group>
        </div>
      </div>
      
    </div>
    <div class="title-box">
      2-2煤主辅三联巷自动风门
    </div>
    <div class="tabs-box">
      <a-tabs v-model:activeKey="activeKey" @change="tabChange">
        <a-tab-pane key="1" tab="实时监测">
            <MonitorTable class="monitor-table" columnsType="gate_monitor" :dataSource="dataSource" design-scope="gate-monitor" @selectRow="getSelectRow" title="风门监测" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="实时曲线图" force-render>
          <div class="tab-item" v-if="activeKey === '2'">
            <BarAndLine
              :chartData="dataSource"
              xAxisPropType="strname"
              :propTypeArr="propTypeArr"
              height="100%"
              :option="option"
            />
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="历史数据">
          <div class="tab-item">
            Content of Tab Pane 2
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="操作历史">
          <div class="tab-item">
            Content of Tab Pane 2
          </div>
        </a-tab-pane>
        <a-tab-pane key="5" tab="实时报警">
          <div class="tab-item">
            Content of Tab Pane 2
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
  
</template>

<script setup lang="ts">
  import '/@/assets/less/modal.less';
  import {onBeforeMount, computed, onUnmounted, onMounted, ref, Ref, reactive, toRaw, nextTick } from 'vue';
  import BarAndLine from '/@/components/chart/BarAndLine.vue';
  import MonitorTable from '../comment/MonitorTable.vue';
  import { initWebSocket, getRecordList } from '/@/hooks/web/useVentWebSocket';
  import { mountedThree, addFmText, play, destroy} from './gate.threejs'
  import { deviceControlApi } from '/@/api/vent/index';
  import { message } from 'ant-design-vue';
  // import gsap from 'gsap';
  // import { flyLine } from '/@/utils/threejs/FlyLine'




  const elementContent = <Ref<HTMLElement>>ref()
  const activeKey = ref('1')
  const loading = ref(false);
  
  
  const propTypeArr = [
    {
      name: '气源压力(MPa)',
      type: 'line',
      filed: 'sourcePressure'
    },
    {
      name: '压差(Pa)',
      type: 'line',
      filed: 'frontRearDP'
    },
    {
      name: '测试数据1',
      type: 'bar',
      filed: 'test'
    }
  ];

  const frontDoorIsOpen = ref(false); //前门是否开启
  const backDoorIsOpen = ref(false); //后门是否开启

  // 监测数据
  const selectData = reactive({
    deviceID: '',
    deviceType: '',
    strname: '',
    frontRearDP: '-', //压差
    sourcePressure: '-', //气源压力
    netStatus: '0', //通信状态
    fault: '气源压力超限',
    autoRoManual: 0
  })

  const selectRowIndex = ref(0)

  //  实时监测数据
  const dataSource:any = computed(() => {
    // const data = [...getRecordList()].reverse() || []
    const data = [...getRecordList()] || []
    
    Object.assign(selectData, toRaw(data[selectRowIndex.value]))
    // console.log(data);
    
    addFmText(selectData)
    return data;
  });  

  // echarts 图标样式
  const option = {
    grid: {
      show: false,
      left: 60,
      right: 50,
      bottom: 20,
    },
    xAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ffffffcc'
        }
      },
    },
    yAxis: {
      name: '气源压力(Pa)',
      nameTextStyle: {
        color: '#fff',
        fontSize: 14,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ffffffcc'
        }
      },
      // axisTick: {
      //   show: false
      // }
      splitLine: {
        show: false
      }
    },
  }
  
  // 设备数据
  const controlType = ref(1)

  const tabChange = (activeKeyVal) => {
    activeKey.value = activeKeyVal
  }

  // 切换检测数据
  const getSelectRow = (selectRow, index) => {
    selectRowIndex.value = index
    loading.value = true
    Object.assign(selectData, selectRow)
    setTimeout(() => {
      loading.value = false
    }, 300)
  }
  
  // 播放动画
  const playAnimation = (handlerState) => {
    const data = {
      deviceid: selectData.deviceID,
      devicetype: selectData.deviceType,
      paramcode: '',
      value: null,
      autoRoManual: selectData.autoRoManual
    };
    let handler = () => {};
    switch (handlerState) {
      case 1: // 打开前门
        if (!frontDoorIsOpen.value && !backDoorIsOpen.value) {
          handler = () => {
            frontDoorIsOpen.value = true;
          };
          data.paramcode = 'frontGateOpen_S';
        }
        break;
      case 2: // 关闭前门
        if (frontDoorIsOpen.value && !backDoorIsOpen.value) {
          handler = () => {
            frontDoorIsOpen.value = false;
          };
          data.paramcode = 'frontGateClose_S';
        }
        break;
      case 3: // 打开后门
        if (!backDoorIsOpen.value && !frontDoorIsOpen.value) {
          handler = () => {
            backDoorIsOpen.value = true;
          };
          data.paramcode = 'rearGateOpen_S';
        }
        break;
      case 4: // 关闭后门
        if (backDoorIsOpen.value && !frontDoorIsOpen.value) {
          handler = () => {
            backDoorIsOpen.value = false;
          };
          data.paramcode = 'rearGateClose_S';
        }
        break;
      case 5: // 打开前后门
        if (!frontDoorIsOpen.value && !backDoorIsOpen.value) {
          handler = () => {
            frontDoorIsOpen.value = true;
            backDoorIsOpen.value = true
          };
          data.paramcode = 'sameTimeOpen';
        }
        break;
      case 6: // 关闭前后门
        if (frontDoorIsOpen.value && backDoorIsOpen.value) {
          handler = () => {
            frontDoorIsOpen.value = false;
            backDoorIsOpen.value = false;
          };
          data.paramcode = 'sameTimeClose';
        }
        break;
    }

    if (data.paramcode) {
      deviceControlApi(data)
        .then((res) => {
          if (res.success) {
          }
        })
        .finally(() => {   
          handler();
          play(handlerState)
        });
    }
  };

  // 远程、就地切换
  const changeType = () => {
    const data = {
      deviceid: selectData.deviceID,
      devicetype: selectData.deviceType,
      paramcode: 'autoRoManual',
      value: selectData.autoRoManual
    };
    deviceControlApi(data).then(() => {
      message.success('状态切换成功！')
    })
  }
  
  
  onBeforeMount(() => {
    const sendVal = JSON.stringify({ pagetype: 'normal', devicetype: 'gate', orgcode: '', ids: '', systemID: '' });
    initWebSocket(sendVal);
  }); 
  
  onMounted(() => {
    loading.value = true;
    mountedThree().then(() => {
      // addFmText(selectData)
      nextTick(() => {
        loading.value = false;
      })
    })
  });

  onUnmounted(() => {
    destroy()
  })

</script>

<style  lang="less" scoped>
:deep(.jeecg-basic-table .ant-table-wrapper){
  background-color: #ffffff00;
}
:deep(.ant-tabs-bar){
  margin: 0;
}
:deep(.ant-table){
  background-color: #ffffff00 !important;
  color: #fff;
}
:deep(.ant-table-header){
  background-color:transparent;
  // height: 42px;
}
:deep(.ant-table-thead > tr > th){
  background-color:transparent;
  border: none;
}
:deep(.ant-table-body > tr > th){
  background-color:transparent;
  border: none;
}
:deep(.ant-table-body > tr > td){
  border: none;
}
:deep(.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body){
  background-color:#ffffff05;
  margin-top: 8px;
  &::-webkit-scrollbar {
    display: none;
  }
}

:deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title){
  padding: 0;
}
:deep(.jeecg-basic-table-row__striped td){
  background-color: transparent;
}
:deep(.ant-table-tbody > tr:hover.ant-table-row > td){
  background-color: #ffffff22;

}
:deep(.ant-table-tbody > tr:hover.ant-table-row > th){
  background-color: #ffffff22;
}
:deep(.ant-table-thead > tr:hover.ant-table-row > td){
  background-color: #ffffff22;
}
:deep(.ant-table-tbody > tr.ant-table-row-selected td){
  background-color: #ffffff22;
}
:deep(.ant-table-tbody > tr > td){
  border-color: #ffffff22;
}
:deep(.ant-table-thead > tr > th:hover){
  background-color: transparent !important;
}
:deep(.ant-table-thead > tr > th){
  color: #fff;
}
:deep(.ant-table-fixed-header .ant-table-scroll .ant-table-header){
  background: #ffffff44;
  position: relative;
  z-index: 999;
  padding: 4px 0 !important;
  &::-webkit-scrollbar {
    display: none;
  }
}
:deep(.ant-tabs-nav){
  color: #fff;
}
.ant-radio-group{
  color: #fff !important;
  .ant-radio-wrapper{
    color: #fff !important;
  }
  .ant-radio{
    color: #fff !important;
  }
}

.elementContent{
  background-color: rgb(20 143 221 / 40%);
  box-shadow: 0px 0px 12px rgb(0 128 255 / 75%);
  border: 1px solid rgb(127 177 255 / 75%);
  padding: 10px 20px 15px 20px;
  color: #efefef;
  p{
    // line-height: 1rem;
  }
}

.state-icon {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 6px;
  margin-right: 6px;
}
.open {
  border: 2px solid #133a56;
  background: #4ecb73;
}
.close {
  border: 2px solid #ff1818;
  background: #ff8888;
  animation: close 1s infinite;
}
@keyframes close {
  0% {
    border: 2px solid #ff8888;
    background: #ff3538;
  }
  50% {
    border: 2px solid #ff0000;
    background: #c90000;
  }
  100% {
    border: 2px solid #ff8888;
    background: #ff3538;
  }
}
.data-title{
  color: #eee;
}

</style>