134 lines
5.1 KiB
Vue
134 lines
5.1 KiB
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="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"
|
||
>
|
||
当前位置：{{ 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/pqs/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('1')
|
||
onMounted(() => {
|
||
const dom = document.getElementById('navigation-splitpanes')
|
||
if (dom) {
|
||
size.value = Math.round((180 / 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) => {
|
||
monitoringPoint.setValue(
|
||
'lineIds',
|
||
node.checkedNodes.filter((item: any) => item.level === 6).map((item: any) => item.id)
|
||
)
|
||
}
|
||
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>
|