vent-template/src/views/vent/monitorManager/nitrogen/index.vue

<template>
  <div class="nitrogen-box">
    <div class="nitrogen-home-header">
      <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width:500px;height:40px;" />
      <div class="header-text">智能压风管控系统</div>
    </div>
    <nitrogenHome v-if="btnActive == 'nitrogen_page'" />
    <nitrogenEcharts v-if="btnActive == 'yfj_monitor_echarts'"/>
    <nitrogenHistory v-if="btnActive == 'yfj_history'"/>
    <nitrogenHandleHistory v-if="btnActive == 'yfj_handler_history'"/>
    <nitrogenAlarmHistory v-if="btnActive == 'yfj_faultRecord'"/>
    <BottomMenu :nav-list="navList" @change="changeActive"/>
  </div>
  
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import nitrogenHome from './components/nitrogenHome.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 { Decoration5 } from '@kjgl77/datav-vue3'
import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';

const btnActive = ref('nitrogen_page')
const navList = ref([
  {
    title: '监控界面',
    pathName: 'nitrogen_page',
    isHover: true
  },
  {
    title: '实时曲线',
    pathName: 'yfj_monitor_echarts',
    isHover: false
  },
  {
    title: '历史监测记录',
    pathName: 'yfj_history',
    isHover: false
  },
  {
    title: '操作历史记录',
    pathName: 'yfj_handler_history',
    isHover: false
  },
  {
    title: '故障诊断历史记录',
    pathName: 'yfj_faultRecord',
    isHover: false
  }
])


function changeActive(activeValue) {
  btnActive.value = activeValue
}

</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;
    }
  }
}

</style>