mky-vent-5/src/views/vent/monitorManager/fiberMonitor/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="fiber3DCSS"
        class="threejs-Object-CSS"
        v-show="!loading"
        style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
      >
      <div v-for="i in fiberListNum">
        <div v-for="item in 10" :id="'fiberMeg' + i + item" :key="item" class="monitor-msg-box"> 
             
            <div class="monitor-msg-container"  :class="{ errorColor: errorNum.includes(item), warningColor: warningNum.includes(item) }">
              <div class="monitor-item">
                <p class="item-title">{{ (item - 1) * 100 }}~{{ item * 100 }}m区域:</p>
                <p><span class="data-title">平均温度(℃)：</span><span class="num">30</span></p>
                <p><span class="data-title">最高温度(℃)：</span><span class="num">40</span></p>
                <p><span class="data-title">最低温度(℃)：</span><span class="num">10</span></p>
              </div>
            </div>
          </div>
        </div>
    </div> -->
    <div id="fiberBox"  style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
  </div>
  <div class="scene-box">
    <div class="top-box">
      <div class="top-center">
        <div class="input-box">
          <span class="input-title">模型展示范围：</span>
          <a-select
            class="title-select"
            ref="select"
            v-model:value="currentLen"
            @change="handleLenChange"
          >
            <a-select-option value="1">0m~1000m</a-select-option>
            <a-select-option value="2">1000m~2000m</a-select-option>
            <a-select-option value="3">2000m~3000m</a-select-option>
          </a-select>
        </div>          
      </div>
    </div>
    <div class="title-text">
      {{ selectData.strname }}
    </div>
    <div class="bottom-tabs-box">
      <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
        <a-tab-pane key="1" tab="实时监测">
          <MonitorTable columnsType="fiber_monitor"  :dataSource="dataSource" @selectRow="getSelectRow"
            design-scope="fiber-monitor" title="皮带机监测">
            <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>
        </a-tab-pane>
        <a-tab-pane key="2" tab="实时曲线图" force-render>
          <div class="tab-item" v-if="activeKey === '2'">
            <DeviceEcharts chartsColumnsType="fiber_chart" xAxisPropType="strname" :dataSource="dataSource" height="100%"
              :chartsColumns="chartsColumns" :device-list-api="baseList" device-type="fiber" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="历史数据">
          <div class="tab-item">
            <HistoryTable columns-type="fibre_history" device-type="fiber" :device-list-api="baseList"
              designScope="fiber-history" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="报警历史">
          <div class="tab-item">
            <AlarmHistoryTable columns-type="alarm_history" device-type="fiber" :device-list-api="baseList"
              designScope="alarm-history" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="5" tab="操作历史">
          <div class="tab-item">
            <HandlerHistoryTable columns-type="operatorhistory" device-type="fiber" :device-list-api="baseList"
              designScope="alarm-history" />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import DeviceEcharts from '../comment/DeviceEcharts.vue';
import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, watch } from 'vue';
import MonitorTable from '../comment/MonitorTable.vue';
import HistoryTable from '../comment/HistoryTable.vue';
import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
import { mountedThree, destroy, setModelType, refreshModal, addFiberText } from './fiber.threejs';
import { list, getTableList } from './fiber.api';
import { list as baseList } from '../../deviceManager/windWindowTabel/ventanalyWindow.api';
import { chartsColumns } from './fiber.data';
import lodash from 'lodash';

const fiberListNum = ref(3)

const deviceBaseList = ref([]);
const activeKey = ref('1');
const loading = ref(false);

const warningNum = ref<number[]>([])
const errorNum = ref<number[]>([])


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

const currentLen = ref('1') // 选择光纤距离


// 设备数据
const controlType = ref(1);

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

const initData = {
  deviceID: '',
  deviceType: '',
  strname: '',
  dataDh: '-', //压差
  dataDtestq: '-', //测试风量
  sourcePressure: '-', //气源压力
  dataDequivalarea: '-',
  netStatus: '0', //通信状态
  fault: '气源压力超限',
  forntArea: '0',
  rearArea: '0',
  frontRearDifference: '-',
  rearPresentValue: '-',
  maxarea: '',
  nwindownum: 0
};

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

watch([warningNum, errorNum], ([newWarningNum, newErrorNum]) => {
  // 刷新
  refreshModal(newWarningNum, newErrorNum)
})

function handleLenChange() {
  //
}

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

async function getDataSource(){
  console.log(11111)
  const res = await list({ devicetype: 'fiber', pagetype: 'normal' });
  console.log(2222, res)

  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;
};

// 获取设备基本信息列表
function getDeviceBaseList(){
  getTableList({ pageSize: 1000 }).then((res) => {
    deviceBaseList.value = res.records;
  });
};

// 切换检测数据
function getSelectRow(selectRow, index){
  
  if (!selectRow) return;
  selectRowIndex.value = index;
  const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
  Object.assign(selectData, initData, selectRow, baseData);
  
  setModelType('beltFiber')
};

onBeforeMount(() => {
  getDeviceBaseList();
});

onMounted(() => {
  loading.value = true;
  
  mountedThree().then(async () => {
    loading.value = false;
    // getMonitor();
    setTimeout(() => {
      warningNum.value = [3, 6]
      errorNum.value = [9]
    }, 3000)
  });
  getMonitor();
});

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

</script>
<style lang="less" scoped>
@import '/@/design/vent/modal.less';
@ventSpace: zxm;

: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;
}
.monitor-msg-box{
  width: 170px;
  margin-top: 100px;
  .monitor-msg-container{
    width: 170px;
    height: 150px;
    box-shadow: rgba(128, 128, 128, 0.3) 0px 0px 40px inset;
    border: 1px solid rgba(128, 128, 128, 0.3);
    background-color: transparent;
  }
  .errorColor{
    box-shadow: #F73B2440 0px 0px 40px inset;
    border: 1px solid #F73B2440;
  }
  .warningColor{
    box-shadow: #FF9B1740 0px 0px 40px inset;
    border: 1px solid #FF9B1740;
  }
  .monitor-item{
    padding: 10px 10px 0px 10px;
    color: #fff;
    letter-spacing: 2px;
    .item-title{
      color: #73e8fe;
    }
    .num{
      color: #FFA500;
    }
  }
}
</style>