mky-vent-base/src/views/vent/monitorManager/chamberMonitor/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="chamber3D" 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="title-text">
      {{ selectData.strname }}
    </div>
    <div class="center-container">
      <div class="lr left-box"></div>
      <div class="lr right-box">
        <div class="">

        </div>
        <div class="">

        </div>
      </div>
    </div>
    <div class="bottom-tabs-box">
      <MonitorTable columnsType="fiber_monitor" :dataSource="fiberDataSource" @selectRow="getSelectRow"
        design-scope="fiber-monitor" title="风窗监测" :scroll="{y: 240}" :isShowPagination="false">
        <template #filterCell="{ column, record }">
          <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
            record.warnFlag == 0 ? '正常' : '报警'
          }}</a-tag>
          <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
            record.netStatus == 0 ? '断开' : '连接'
          }}</a-tag>
          <div v-if="record.nwindownum == 1 && column.dataIndex === 'rearArea'">/</div>
        </template>
      </MonitorTable>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { message } from 'ant-design-vue';
import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
import MonitorTable from '../comment/MonitorTable.vue';
import { mountedThree, destroy, addChamberText, setModelType } from './chamber.threejs';
import { list } from './chamber.api';
import lodash from 'lodash';

const activeKey = ref('1');
const loading = ref(false);

// 默认初始是第一行
const selectRowIndex = ref(0);
const dataSource = ref([])
const fiberDataSource = ref([]); //dusting
const dustDataSource = ref([]); 

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

const initData = {
  deviceID: '',
  deviceType: '',
  strname: '',
};

// 监测数据
const selectData = reactive(lodash.cloneDeep(initData));

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
const getMonitor = () => {
  if (Object.prototype.toString.call(timer) === '[object Null]') {
    timer = setTimeout(async () => {
      const data = await getSysDataSource();
      Object.assign(selectData, data);

      if (timer) {
        timer = null;
      }
      getMonitor();
    }, 1000);
  }
};

const getSysDataSource = async () => {
  const res = await list({ devicetype: 'sys_dongshi', pagetype: 'normal' });
  dataSource.value = res.msgTxt[0].datalist || [];
  dataSource.value.forEach((data: any) => {
    const readData = data.readData;
    data = Object.assign(data, readData);
  });
  const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
  return data;
};

const getDataSource = async (systemID) => {
  const res = await list({ devicetype: 'sys', systemID });
  const result = res.msgTxt[0];
  result.forEach(item => {
    if (item.type === 'dusting_auto') {
      // 喷粉
      dustDataSource.value = item.filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      })
    }
    if (item.type === 'fiber_normal') {
      // 光纤
      fiberDataSource.value = item.filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      })
    }
    if (item.type === 'sys') {
      // 硐室基本
      // fiberDataSource.value = item.filter((data: any) => {
      //   const readData = data.readData;
      //   return Object.assign(data, readData);
      // })
    }
  })
}


// 切换检测数据
const getSelectRow = (selectRow, index) => {
  if (!selectRow) return;
  selectRowIndex.value = index;

  Object.assign(selectData, initData, selectRow);
  getDataSource(selectData.deviceID)
  // setModelType(type).then(() => {
   
  // });
}

onBeforeMount(() => {

});

onMounted(() => {
  loading.value = true;
  mountedThree().then(async () => {
    await setModelType('chamberBase');
    loading.value = false;
    getMonitor();
  });
});
onUnmounted(() => {
  destroy();
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});
</script>
<style lang="less" scoped>
@import '/@/design/vent/modal.less';
@ventSpace: zxm;

.center-container{
  width: 100%;
  height: 550px;
  border: 1px solid #fff;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  .lr{
    width: 250px;
    height: 100%;
    border: 1px solid #73e8fe;
    display: flex;
    flex-direction: column;
  }
  .right-box{
    width: 280px;
  }
}

:deep(.@{ventSpace}-tabs-tabpane-active) {
  overflow: auto;
}

.input-box {
  display: flex;
  align-items: center;
  padding-left: 10px;

  .input-title {
    color: #73e8fe;
    width: auto;
  }

  .@{ventSpace}-input-number {
    border-color: #ffffff88 !important;
  }

  margin-right: 10px;
}
</style>