gasInjection-project/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 && optionValue !='1702602347296399361'" :device-id="optionValue" :modal-type="modalType" /> -->
    <nitrogenHome1 v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" />
    <!-- <nitrogenHome2 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 '/@/views/vent/comment/components/customHeader.vue';
import nitrogenHome from './components/nitrogenHome.vue'
import nitrogenHome1 from './components/nitrogenHome1.vue'
import nitrogenHome2 from './components/nitrogenHome2.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 } from './nitrogen.data'
import { getTableList, systemList,  } from "./nitrogen.api";

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 || [];
    console.log(options.value,'0000000-------')
    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'
  }
}

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