谐波监测点

src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue

@@ -0,0 +1,72 @@
+<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 v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='稳态指标合格率' name='3' lazy v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='稳态数据分析' name='4' lazy :style='height' v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='谐波频普' name='5' lazy :style='height' v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='告警数据统计' name='6' lazy :style='height' v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='监测点运行状态' name='7' lazy :style='height' v-if='!isReload'>
+            </el-tab-pane>
+            <el-tab-pane label='实时数据' name='7' lazy :style='height' v-if='!isReload'>
+            </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 Navigation from './navigation/index.vue'
+import EventStatistics from './eventStatistics/index.vue'
+import EventStudy from './eventStudy/index.vue'
+import RunningCondition from './runningCondition/index.vue'
+import { mainHeight } from '@/utils/layout'
+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('1')
+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>