admin-sjzx/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue

<template>
    <div class='default-main' style='position: relative'>
        <el-tabs v-model='activeName' type='border-card' class='demo-tabs'>
            <el-tab-pane label='导航' name='1' :style='height' lazy>
                <Navigation @changeTab='changeTab' />
            </el-tab-pane>
            <el-tab-pane label='稳态综合评估' name='2' lazy :style='height' v-if='!isReload'>
                <Wentaizonghepinggu />
            </el-tab-pane>
            <el-tab-pane label='稳态指标合格率' name='3' lazy :style='height' v-if='!isReload'>
                <Wentaizhibiaohegelv />
            </el-tab-pane>
            <el-tab-pane label='稳态数据分析' name='4' lazy :style='height' v-if='!isReload'>
                <Wentaishujufenxi />
            </el-tab-pane>
            <el-tab-pane label='谐波频普' name='5' lazy :style='height' v-if='!isReload'>
                <Xiebopingpu />
            </el-tab-pane>
            <el-tab-pane label='告警数据统计' name='6' lazy :style='height' v-if='!isReload'>
                <Gaojingshujutongji />
            </el-tab-pane>
            <el-tab-pane label='监测点运行状态' name='7' lazy :style='height' v-if='!isReload'>
                <Yunxingzhuangtai />
            </el-tab-pane>
            <el-tab-pane label='实时数据' name='8' lazy :style='height' v-if='!isReload'>
                <Shishishuju />
            </el-tab-pane>
        </el-tabs>
        <div class='monitoring-point'>当前位置：{{ monitoringPoint.state.lineName }}</div>
    </div>
</template>
<script setup lang='ts'>
import { defineOptions, nextTick, ref, watch } from 'vue'
import { mainHeight } from '@/utils/layout'
import Navigation from './navigation/index.vue'
import Wentaizonghepinggu from './wentaizonghepinggu/index.vue'
import Wentaizhibiaohegelv from './wentaizhibiaohegelv/index.vue'
import Wentaishujufenxi from './wentaishujufenxi/index.vue'
import Xiebopingpu from './xiebopingpu/index.vue'
import Gaojingshujutongji from './gaojingshujutongji/index.vue'
import Yunxingzhuangtai from './yunxingzhuangtai/index.vue'
import Shishishuju from './shishishuju/index.vue'


import router from '@/router'
import { useMonitoringPoint } from '@/stores/monitoringPoint'

defineOptions({
    name: 'harmonic-boot/monitor/online'
})
const isReload = ref(false)
const monitoringPoint = useMonitoringPoint()
const height = mainHeight(82)
const activeName = ref('2')
watch(
    () => router.currentRoute.value.query.lineId,
    (newLineId, oldLineId) => {
        if (!newLineId) return
        // 在这里处理 lineId 的变化
        monitoringPoint.setValue('lineId', router.currentRoute.value.query.lineId)
        monitoringPoint.setValue('lineName', router.currentRoute.value.query.lineName)
    },
    { immediate: true }
)
watch(() => monitoringPoint.state.lineId, () => {
    //  刷新页面
    isReload.value = true
    nextTick(() => {
        isReload.value = false
    })
})
const changeTab = (e: string) => {
    activeName.value = e
}
</script>
<style lang='scss'>
.monitoring-point {
    position: absolute;
    top: 12px;
    right: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--el-color-primary);
}
</style>