mky-vent-base/src/views/vent/monitorManager/compressor/index.vue

<template>
  <div class="nitrogen-box">
    <customHeader
      :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
      :options="options"
      @change="getSelectRow"
      :optionValue="optionValue"
    >
      智能注氮管控系统
    </customHeader>
    <nitrogenHome v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" />
    <nitrogenEcharts v-if="activeKey == 'yfj_monitor_echarts'" />
    <nitrogenHistory ref="historyTable" :device-id="optionValue" :device-type="optionType" v-if="activeKey == 'yfj_history'" />
    <nitrogenHandleHistory ref="alarmHistoryTable" v-if="activeKey == 'yfj_handler_history'" />
    <nitrogenAlarmHistory ref="handlerHistoryTable" v-if="activeKey == 'yfj_faultRecord'" />
    <BottomMenu :nav-list="navList" @change="changeActive" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, nextTick } from 'vue';
  import customHeader from '/@/components/vent/customHeader.vue';
  import nitrogenEcharts from './components/nitrogenEcharts.vue';
  import nitrogenHistory from './components/nitrogenHistory.vue';
  import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue';
  import nitrogenAlarmHistory from './components/nitrogenAlarmHistory.vue';
  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
  import { useRouter } from 'vue-router';
  import { navList, getMonitorComponent } from './nitrogen.data';
  import { getTableList, systemList } from './nitrogen.api';

  const nitrogenHome = getMonitorComponent();
  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };

  const { currentRoute } = useRouter();
  const activeKey = ref('nitrogen_page');

  const historyTable = ref();
  const alarmHistoryTable = ref();
  const handlerHistoryTable = ref();

  //关联设备
  const deviceList = ref<DeviceType[]>([]);
  const deviceActive = ref('');
  const deviceType = ref('');

  const options = ref();
  const optionValue = ref('');
  const optionType = ref('');
  const modalType = ref('');
  const isRefresh = ref(true);

  function changeActive(activeValue) {
    activeKey.value = activeValue;
  }

  function deviceChange(index) {
    deviceActive.value = deviceType.value = deviceList.value[index].deviceType;
    isRefresh.value = false;
    nextTick(() => {
      isRefresh.value = true;
    });
  }

  async function getDeviceList() {
    const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
    const result = res.msgTxt;
    if (!result || result.length < 1) return;
    const deviceArr = <DeviceType[]>[];
    result.forEach((item) => {
      const data = item['datalist'].filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      });
      if (item.type !== 'sys') {
        deviceArr.unshift({
          deviceType: item.type,
          deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
          datalist: data,
        });
      }
    });
    deviceList.value = deviceArr;
    deviceActive.value = deviceArr[0].deviceType;
    deviceChange(0);
  }

  async function getSysDataSource() {
    const res = await getTableList({ strtype: 'sys_nitrogen', pagetype: 'normal' });
    if (!options.value) {
      // 初始时选择第一条数据
      options.value = res.records || [];
      if (!optionValue.value) {
        getSelectRow(options.value[0]['id']);
        getDeviceList();
      }
    }
  }

  // 切换检测数据
  async function getSelectRow(deviceID) {
    const currentData = options.value.find((item: any) => {
      return item.id == deviceID;
    });
    optionValue.value = deviceID;
    changeModalType(currentData);
    getDeviceList();
  }

  // 获取模型类型
  function changeModalType(currentData) {
    optionType.value = currentData['strtype'];
    if (currentData['strsystype'] === '1') {
      // 地上
      modalType.value = 'nitrogen';
    } else if (currentData['strsystype'] === '2') {
      // 地下
      modalType.value = 'nitrogenUnderground';
    } else {
      // 默认是地下的注氮
      modalType.value = 'nitrogenUnderground';
    }
  }

  onMounted(async () => {
    if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id'];
    await getSysDataSource();
    // getSelectRow(optionValue.value)
  });

  onUnmounted(() => {});
</script>

<style lang="less" scoped>
  @import '/@/design/vent/modal.less';
  @ventSpace: zxm;
  .nitrogen-home-header {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;

    .header-icon {
      margin-top: 45px;
    }

    .header-text {
      position: fixed;
      top: 18px;
      color: #fff;
      font-size: 24px;
    }
  }
  .nitrogen-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .bottom-btn-group {
      display: flex;
      position: fixed;
      width: calc(100% - 400px);
      height: 100px;
      bottom: 10px;
      align-items: center;
      justify-content: center;
      z-index: 2;
      .btn-item {
        width: 200px;
        height: 60px;
        margin: 10px;
        color: #fff;
        cursor: pointer;
        pointer-events: auto;
      }
    }
    &:deep(.win) {
      margin: 0 !important;
    }
  }
</style>