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

<template>
    <div class="default-main" style="padding: 10px">
        <splitpanes :style="height" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <PointTree
                    ref="pointTree"
                    :default-expand-all="false"
                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                    :current-node-key="monitoringPoint.state.lineId"
                    :show-checkbox="monitoringPoint.state.showCheckBox"
                    :default-checked-keys="monitoringPoint.state.lineIds"
                    @check-change="handleCheckChange"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                ></PointTree>
            </pane>
            <pane>
                <div style="position: relative; height: 100%">
                    <el-tabs v-model="activeName" type="border-card" class="demo-tabs" style="height: 100%">
                        <el-tab-pane label="稳态综合评估" name="1" lazy v-if="!isReload">
                            <Wentaizonghepinggu />
                        </el-tab-pane>
                        <el-tab-pane label="稳态指标合格率" name="2" lazy v-if="!isReload">
                            <Wentaizhibiaohegelv />
                        </el-tab-pane>
                        <el-tab-pane label="稳态数据分析" name="3" lazy v-if="!isReload">
                            <Wentaishujufenxi />
                        </el-tab-pane>
                        <el-tab-pane label="谐波频普" name="4" lazy v-if="!isReload">
                            <Xiebopingpu />
                        </el-tab-pane>
                        <el-tab-pane label="告警数据统计" name="5" lazy v-if="!isReload">
                            <Gaojingshujutongji />
                        </el-tab-pane>
                        <el-tab-pane label="监测点运行状态" name="6" lazy v-if="!isReload">
                            <Yunxingzhuangtai />
                        </el-tab-pane>
                        <el-tab-pane label="实时数据" name="7" lazy v-if="!isReload">
                            <Shishishuju />
                        </el-tab-pane>
                    </el-tabs>
                    <div class="monitoring-point" v-if="!monitoringPoint.state.showCheckBox">
                        当前位置：{{ monitoringPoint.state.lineName }}
                    </div>
                </div>
            </pane>
        </splitpanes>
    </div>
</template>
<script setup lang="ts">
import { defineOptions, watch, onMounted, ref, nextTick } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import PointTree from '@/components/tree/pms/pointTree.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { mainHeight } from '@/utils/layout'
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'

defineOptions({
    name: 'harmonic-boot/monitor/online'
})

const monitoringPoint = useMonitoringPoint()
const pointTree = ref()
const size = ref(0)
const isReload = ref(false)
const height = mainHeight(40)
const activeName = ref('3')
onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((280 / dom.offsetHeight) * 100)
    }
})
const handleNodeClick = (data: any, node: any) => {
    if (data.level === 6) {
        monitoringPoint.setValue('lineId', data.id)
        monitoringPoint.setValue('lineName', data.alias)
    }
}
const handleCheckChange = (data: any, node: any) => {
    console.log(data)
}
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">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}
.monitoring-point {
    position: absolute;
    top: 12px;
    right: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--el-color-primary);
}
</style>