vent-template/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
      v-if="renderPlayer"
      ref="playerRef"
      style="z-index: 999; position: absolute; top: 100px; right: 15px; height: 100%; margin: auto; pointer-events: none"
    >
    </div>
  </div>
</template>

<script setup lang="ts">
  import { watch, ref, onMounted, onUnmounted, defineProps, reactive, onBeforeUnmount } from 'vue';
  import { mountedThree, destroy, setModelType } from '../grout.threejs';
  import { deviceMonitorList } from '../grout.data';
  import { list } from '../grout.api';
  import { useCamera } from '/@/hooks/system/useCamera';

  const props = defineProps({
    deviceId: {
      type: String,
      require: true,
    },
    deviceType: {
      type: String,
      require: true,
    },
  });

  const loading = ref(false);
  const monitorData = ref({});
  // 监测数据
  const selectData = reactive({});

  const playerRef = ref();
  const renderPlayer = ref(true);
  const { getCamera, removeCamera } = useCamera();

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

  async function getDataSource(systemID) {
    const res = await list({ devicetype: 'pulping_auto', systemID, pagetype: 'normal' });
    const result = res.deviceInfo;
    for (const key in result) {
      const item = result[key];
      if (item.type.startsWith('pulping')) {
        monitorData.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
      }

      loading.value = false;
    }
  }

  watch(
    () => props.deviceId,
    async (deviceId) => {
      if (deviceId) {
        await getCamera(deviceId, playerRef, renderPlayer);
      }
    },
    { immediate: true }
  );

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

  @{theme-deepblue} {
    .monitor-container {
      --box-shadow: #316b92;
      --border-color: #0a80fad4;
    }
  }

  .monitor-container {
    --box-shadow: #0099b8;
    --border-color: #00baffd4;
    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 var(--box-shadow) inset;
      }
      .device-title {
        width: 110px;
        text-align: center;
        border-top: 1px solid var(--border-color);
        border-left: 1px solid var(--border-color);
        line-height: 46px;
        color: var(--vent-table-action-link);
        background-color: #00bbff21;
      }
      .device-detail {
        text-align: center;
        &:first-child {
          background-color: #00bbff11;
        }
        &:last-child {
          .device-val,
          .device-title {
            border-right: 1px solid var(--border-color);
          }
        }
        .device-val {
          line-height: 36px;
          border-top: 1px solid var(--border-color);
          border-left: 1px solid var(--border-color);
          &:last-child {
            border-bottom: 1px solid var(--border-color);
          }
        }
      }
    }
  }

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