gasInjection-project/src/views/vent/monitorManager/nitrogen/index.vue

<template>
  <div class="nitrogen-box">
    <customHeader>智能压风管控系统</customHeader>
    <!-- 锦界 -->
    <!-- <nitrogenHome v-if="btnActive == 'nitrogen_page'" /> -->
    <!-- 布尔台 -->
    <nitrogenHome1 v-if="btnActive == 'nitrogen_page'" />
    <!-- 窑街三矿 -->
    <!-- <nitrogenHomeYJ 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 nitrogenHome1 from './components/nitrogenHome1.vue';
  // import nitrogenHomeYJ from './components/nitrogenHomeYJ.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 customHeader from '/@/views/vent/comment/components/customHeader.vue';
  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';

  const btnActive = ref('nitrogen_page');
  const navList = ref([
    {
      title: '监控界面',
      pathName: 'nitrogen_page',
      isHover: false,
    },
    // {
    //   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>