gas-injection/src/views/vent/monitorManager/groutMonitor/components/groutHomeJj.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>