gas-injection/src/views/vent/monitorManager/nitrogenMonitor/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="spray-wrapper">
    <BasicMonitoring
      main-title="智能注氮管控系统"
      :main-config="{
        operations: [],
        configs: configs,
      }"
      monitor-type="nitrogenMonitor"
      :monitor-history-config="{}"
      :handler-history-config="{}"
      :alarm-history-config="{}"
      strtype="sys_nitrogen"
    >
      <template #default="{ monitorData }">
        <div id="nitrogen2D" class="w-full h-full flex justify-center items-center overflow-hidden">
          <!-- <a-spin :spinning="loading" /> -->
          <!-- <div id="sprayCSS3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none"> </div> -->
          <!-- <div class="nitrogen2D"></div> -->
          <modelTip :statusData="monitorData"></modelTip>
        </div>
      </template>
    </BasicMonitoring>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import BasicMonitoring from '/@/components/vent/BasicMonitoring.vue';
import { useInitConfigs, useInitPage } from '../../home/configurable/hooks/useInit';
import { nitrogenConfigs } from './nitrogen.data';
import modelTip from './model-tip.vue';
import { list } from './nitorgen.api';

const loading = ref(false);
const { configs, fetchConfigs } = useInitConfigs();
const { updateEnhancedConfigs, updateData } = useInitPage('智能注氮管控系统');
const monitorData = ref<any[]>([]);
function refresh() {
  // fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
  fetchConfigs('nitrogen').then(() => {
    configs.value = nitrogenConfigs;
    // updateEnhancedConfigs(configs.value);
    list({ devicetype: 'nitrogen', pagetype: 'normal' }).then(updateData, (res) => {
      if (res && res.msgTxt[0]) {
        const dataList: any[] = [];
        if (res.msgTxt[0].datalist && res.msgTxt[0].datalist.length > 0) {
          res.msgTxt[0].datalist.forEach((data: any) => {
            const readData = data.readData;
            data = Object.assign(data, readData);
            dataList.push(data);
          });
          monitorData.value = res.msgTxt[0].dataList;
        }
      }
    });
  });
}

function initInterval() {
  setInterval(() => {
    refresh();
  }, 60000);
}
onMounted(() => {
  refresh();
  initInterval();
});
</script>

<style lang="less" scoped>
.spray-wrapper {
  width: 100%;
  height: 100%;
}

#spray3D {
  pointer-events: all;
}

.spray-wrapper :deep(.list-item_L .list-item__icon_L) {
  background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
}
.spray-wrapper :deep(.list-item_N:nth-child(1)) {
  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
}
.spray-wrapper :deep(.list-item_N:nth-child(2)) {
  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
}
</style>