vent-template/src/views/vent/monitorManager/groutMonitor/components/groutHome.vue

<template>
  <div class="monitor-container">
    <div class="header-box">
      <div class="header-container">
        <div class="device-detail">
          <div class="device-title">&nbsp</div>
          <div class="device-val">是否带电</div>
          <div class="device-val">是否运行</div>
          <div class="device-val">故障</div>
        </div>
        <div v-for="(device, key) in deviceMonitorList" class="device-detail" :key="key">
          <div class="device-title">{{ device.title }}</div>
          <div v-for="(detailItem, index) in device.dataList" :key="detailItem.code" class="device-val">
            <span v-if="index == 0" :style="{color: monitorData[detailItem.code] != 1 ? '#BFBFBF' : '#10BC79'}">{{ monitorData[detailItem.code] == 0 ? '不带电' : monitorData[detailItem.code] == 1 ? '带电' : '-' }}</span>
            <span v-if="index == 1" :style="{ color: monitorData[detailItem.code] != 1 ? '#BFBFBF' : '#10BC79' }">{{ monitorData[detailItem.code] == 0 ? '未运行' : monitorData[detailItem.code] == 1 ? '运行' : '-' }}</span>
            <span v-if="index == 2" :style="{ color: monitorData[detailItem.code] == 0 ? '#10BC79' : monitorData[detailItem.code] == 1 ? '#F14C4C' : '#BFBFBF'}">{{ monitorData[detailItem.code] == 0 ? '正常' :  monitorData[detailItem.code] == 1 ? '报警' : '-'}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" />
</template>

<script setup lang="ts">

import { onBeforeMount, ref, onMounted, onUnmounted, shallowRef, defineProps, ComponentOptions, reactive } from 'vue';
import { mountedThree, destroy, setModelType } from '../grout.threejs';
import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
import ventBox1 from '/@/components/vent/ventBox1.vue';
import RunParameterModal from './runParameter.modal.vue'
import WarningParameterModal from './warningParameter.modal.vue'
import { deviceMonitorList } from '../grout.data'
import { list } from '../grout.api';
import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';


const props = defineProps({
  deviceId: {
    type: String,
    require: true
  },
  deviceType: {
    type: String,
    require: true
  }
})
const left: string = "0px";
const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
const modalVisible = ref<Boolean>(false); // 模态框是否可见
const loading = ref(false);
const monitorData = ref({})
// 默认初始是第一行
const dataSource = ref([
  { 
    waterSupply : '-',
    beltVla: '-',
    density: '-',
    pressure: '-',
    liquidLevel: '-',
    flowRate: '-',
    readTime: '',
  },
  {
    waterSupply: '-',
    beltVla: '-',
    density: '-',
    pressure: '-',
    liquidLevel: '-',
    flowRate: '-',
    readTime: '',
  }
]); //dusting

const flvURL1 = () => {
  return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
  // return ''
};
const openModal = (modalName) => {
  modalVisible.value = true
  if(modalName == 'RunParameterModal'){
    currentModal.value = RunParameterModal
  }else{
    currentModal.value = WarningParameterModal
  }
}

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

async function getDataSource() {
  const res = await list({ devicetype: 'pulping_auto', pagetype: 'normal' });
  if(res.msgTxt && res.msgTxt[0] && res.msgTxt[0].datalist && res.msgTxt[0].datalist[0]){
    monitorData.value = Object.assign(res.msgTxt[0].datalist[0], res.msgTxt[0].datalist[0]['readData'])
  }
  // const dataList = res.msgTxt[0].datalist || [];
  // dataSource.value = dataList.filter((data) => {
  //   const item = data.readData;
  //   Object.assign(data, item);  
  //   return item
  // });
  // monitorData.value = 
}

function handlerDevice(param: string | Object) {

}
function controlDevice(flag){

}

onBeforeMount(() => {

});

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

.monitor-container {
  width: 100%;
  height: 100%;
  // height: 550px;
  // border: 1px solid #fff;
  margin-top: 40px;
  display: flex;
  // justify-content: space-between;
  justify-content: center;
  padding: 0 5px;
  
  .header-box{
    // width: 100%;
    margin-top: 50px;
    .header-container{
      height: auto;
      display: flex;
      flex-direction: row;
      justify-content: center;
      color: #fff;
      box-shadow: 0 0 30px rgb(0, 153, 184) inset;
    }
    .device-title{
      width: 110px;
      text-align: center;
      border-top: 1px solid #00baffd4;
      border-left: 1px solid #00baffd4;
      line-height: 46px;
      color: #00e5ff;
      background-color: #00bbff21;
    }
    .device-detail{
      text-align: center;
      &:first-child{
        background-color: #00bbff11;
      }
      &:last-child{
        .device-val, .device-title{
          border-right: 1px solid #00baffd4;
        }
      }
      .device-val{
        line-height: 36px;
        border-top: 1px solid #00baffd4;
        border-left: 1px solid #00baffd4;
        &:last-child{
          border-bottom: 1px solid #00baffd4;
        }
      }
    }
  }
}

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