pointtree
This commit is contained in:
仲么了
@@ -17,17 +17,28 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { defineOptions, ref } from 'vue'
|
||||
import { defineOptions, 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 '@/views/pms/voltageSags/monitoringPoint/online/store'
|
||||
|
||||
defineOptions({
|
||||
name: 'Descentsystem/monitoringpoint'
|
||||
})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(82)
|
||||
const activeName = ref('1')
|
||||
watch(
|
||||
() => router.currentRoute.value.query.lineId,
|
||||
(newLineId, oldLineId) => {
|
||||
// 在这里处理 lineId 的变化
|
||||
monitoringPoint.setValue('lineId', newLineId)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<splitpanes style='height: 100%;' class='default-theme' id='navigation-splitpanes'>
|
||||
<pane :size='size'>
|
||||
<PointTree></PointTree>
|
||||
<PointTree :default-expand-all='false' :default-expanded-keys='[monitoringPoint.state.lineId]'
|
||||
:current-node-key='monitoringPoint.state.lineId'></PointTree>
|
||||
</pane>
|
||||
<pane>
|
||||
<Map></Map>
|
||||
@@ -14,9 +15,10 @@ import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import PointTree from '@/components/tree/pms/pointTree.vue'
|
||||
import Map from './map.vue'
|
||||
import Tree from '@/components/tree/index.vue'
|
||||
import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
|
||||
|
||||
|
||||
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const size = ref(0)
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
|
||||
19
src/views/pms/voltageSags/monitoringPoint/online/store.ts
Normal file
19
src/views/pms/voltageSags/monitoringPoint/online/store.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { reactive } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
interface MonitoringPoint {
|
||||
lineId: string
|
||||
}
|
||||
|
||||
export const useMonitoringPoint = defineStore(
|
||||
'monitoringPoint',
|
||||
() => {
|
||||
const state: MonitoringPoint = reactive({
|
||||
lineId: ''
|
||||
})
|
||||
const setValue = (key: keyof MonitoringPoint, val: any) => {
|
||||
state[key] = val
|
||||
}
|
||||
return { state, setValue }
|
||||
}
|
||||
)
|
||||
@@ -1,149 +1,149 @@
|
||||
<template>
|
||||
<div style="padding: 10px; display: flex; height: 100%" v-loading="loading">
|
||||
<div style="position: relative; flex: 1">
|
||||
<div style="display: none">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
<div style='padding: 10px; display: flex; height: 100%' v-loading='loading'>
|
||||
<div style='position: relative; flex: 1'>
|
||||
<div style='display: none'>
|
||||
<DatePicker ref='datePickerRef'></DatePicker>
|
||||
</div>
|
||||
<div class="iconBox">
|
||||
<div class="div">
|
||||
<img src="@/assets/jcd.png" alt="" />
|
||||
<div class='iconBox'>
|
||||
<div class='div'>
|
||||
<img src='@/assets/jcd.png' alt='' />
|
||||
<span>变电站</span>
|
||||
</div>
|
||||
<div class="div">
|
||||
<img src="@/assets/rby.png" alt="" />
|
||||
<div class='div'>
|
||||
<img src='@/assets/rby.png' alt='' />
|
||||
<span>热备用</span>
|
||||
</div>
|
||||
<div class="div">
|
||||
<img src="@/assets/ty.png" alt="" />
|
||||
<div class='div'>
|
||||
<img src='@/assets/ty.png' alt='' />
|
||||
<span>停运</span>
|
||||
</div>
|
||||
<div class="div">投运</div>
|
||||
<div class="div" style="padding-left: 10px">
|
||||
<div class='div'>投运</div>
|
||||
<div class='div' style='padding-left: 10px'>
|
||||
<span>通讯正常</span>
|
||||
</div>
|
||||
<div class="div" style="padding-left: 20px">
|
||||
<img src="@/assets/txzcyzj.gif" alt="" />
|
||||
<div class='div' style='padding-left: 20px'>
|
||||
<img src='@/assets/txzcyzj.gif' alt='' />
|
||||
<span>有暂降</span>
|
||||
</div>
|
||||
<div class="div" style="padding-left: 20px">
|
||||
<img src="@/assets/txzcwzj.png" alt="" />
|
||||
<div class='div' style='padding-left: 20px'>
|
||||
<img src='@/assets/txzcwzj.png' alt='' />
|
||||
<span>无暂降</span>
|
||||
</div>
|
||||
<div class="div" style="padding-left: 10px">
|
||||
<div class='div' style='padding-left: 10px'>
|
||||
<span>通讯异常</span>
|
||||
</div>
|
||||
<div class="div" style="padding-left: 20px">
|
||||
<img src="@/assets/txycyzj.gif" alt="" />
|
||||
<div class='div' style='padding-left: 20px'>
|
||||
<img src='@/assets/txycyzj.gif' alt='' />
|
||||
<span>有暂降</span>
|
||||
</div>
|
||||
<div class="div" style="padding-left: 20px">
|
||||
<img src="@/assets/txzdwzj.png" alt="" />
|
||||
<div class='div' style='padding-left: 20px'>
|
||||
<img src='@/assets/txzdwzj.png' alt='' />
|
||||
<span>无暂降</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectBox">
|
||||
<div class='selectBox'>
|
||||
<el-select
|
||||
@change="pointChange"
|
||||
:popper-append-to-body="false"
|
||||
@change='pointChange'
|
||||
:popper-append-to-body='false'
|
||||
filterable
|
||||
clearable
|
||||
v-model="lineId"
|
||||
placeholder="输入监测点名称查询"
|
||||
v-model='lineId'
|
||||
placeholder='输入监测点名称查询'
|
||||
>
|
||||
<el-option
|
||||
v-for="item in areaLineInfo"
|
||||
:key="item.lineId"
|
||||
:label="item.lineName"
|
||||
:value="item.lineId"
|
||||
v-for='item in areaLineInfo'
|
||||
:key='item.lineId'
|
||||
:label='item.lineName'
|
||||
:value='item.lineId'
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<baidu-map
|
||||
class="bm-view"
|
||||
:zoom="zoom"
|
||||
:map-click="false"
|
||||
:scroll-wheel-zoom="true"
|
||||
:center="center"
|
||||
@ready="handler"
|
||||
@zoomend="syncCenterAndZoom"
|
||||
class='bm-view'
|
||||
:zoom='zoom'
|
||||
:map-click='false'
|
||||
:scroll-wheel-zoom='true'
|
||||
:center='center'
|
||||
@ready='handler'
|
||||
@zoomend='syncCenterAndZoom'
|
||||
>
|
||||
<bm-map-type
|
||||
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
|
||||
anchor="BMAP_ANCHOR_TOP_RIGHT"
|
||||
anchor='BMAP_ANCHOR_TOP_RIGHT'
|
||||
></bm-map-type>
|
||||
<!-- 线-->
|
||||
<bm-polyline :path="path" v-for="(path, index) in polyline" :key="index"></bm-polyline>
|
||||
<bm-polyline :path='path' v-for='(path, index) in polyline' :key='index'></bm-polyline>
|
||||
<!-- 变电站-->
|
||||
<template v-if="zoom > 12">
|
||||
<template v-if='zoom > 12'>
|
||||
<bm-marker
|
||||
:position="path"
|
||||
v-for="path in siteList"
|
||||
:key="path.subId"
|
||||
:icon="path.icon"
|
||||
@click="markerClick(path)"
|
||||
:position='path'
|
||||
v-for='path in siteList'
|
||||
:key='path.subId'
|
||||
:icon='path.icon'
|
||||
@click='markerClick(path)'
|
||||
></bm-marker>
|
||||
</template>
|
||||
<!-- 点 -->
|
||||
<BmlMarkerClusterer>
|
||||
<bm-marker
|
||||
:position="path"
|
||||
v-for="path in areaLineInfo"
|
||||
:key="path.lineId"
|
||||
:icon="path.icon"
|
||||
@click="markerClick(path)"
|
||||
:position='path'
|
||||
v-for='path in areaLineInfo'
|
||||
:key='path.lineId'
|
||||
:icon='path.icon'
|
||||
@click='markerClick(path)'
|
||||
></bm-marker>
|
||||
</BmlMarkerClusterer>
|
||||
<bm-marker :position="infoWindowPoint" :icon="{ url: '1', size: { width: 0, height: 0 } }">
|
||||
<bm-info-window :show="infoWindowPoint.show" @close="infoWindowPoint.show = false">
|
||||
<el-descriptions :title="infoWindowPoint.lineName" :column="1" v-if="infoWindowPoint.lineId">
|
||||
<el-descriptions-item label="供电公司">{{ infoWindowPoint.gdName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="变电站">{{ infoWindowPoint.subName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="母线">{{ infoWindowPoint.voltageName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="网络参数">
|
||||
<bm-marker :position='infoWindowPoint' :icon="{ url: '1', size: { width: 0, height: 0 } }">
|
||||
<bm-info-window :show='infoWindowPoint.show' @close='infoWindowPoint.show = false'>
|
||||
<el-descriptions :title='infoWindowPoint.lineName' :column='1' v-if='infoWindowPoint.lineId'>
|
||||
<el-descriptions-item label='供电公司'>{{ infoWindowPoint.gdName }}</el-descriptions-item>
|
||||
<el-descriptions-item label='变电站'>{{ infoWindowPoint.subName }}</el-descriptions-item>
|
||||
<el-descriptions-item label='母线'>{{ infoWindowPoint.voltageName }}</el-descriptions-item>
|
||||
<el-descriptions-item label='网络参数'>
|
||||
{{ infoWindowPoint.ip }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="PT变化">{{ infoWindowPoint.pt2 }}</el-descriptions-item>
|
||||
<el-descriptions-item label="CT变化">{{ infoWindowPoint.ct2 }}</el-descriptions-item>
|
||||
<el-descriptions-item label="生产厂家">
|
||||
<el-descriptions-item label='PT变化'>{{ infoWindowPoint.pt2 }}</el-descriptions-item>
|
||||
<el-descriptions-item label='CT变化'>{{ infoWindowPoint.ct2 }}</el-descriptions-item>
|
||||
<el-descriptions-item label='生产厂家'>
|
||||
{{ infoWindowPoint.manufacturer }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="终端状态">
|
||||
<el-descriptions-item label='终端状态'>
|
||||
{{
|
||||
infoWindowPoint.runFlag == 0
|
||||
? '投运'
|
||||
: infoWindowPoint.runFlag == 1
|
||||
? '热备用'
|
||||
: '停运'
|
||||
? '热备用'
|
||||
: '停运'
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="通讯状态">
|
||||
<el-descriptions-item label='通讯状态'>
|
||||
{{ infoWindowPoint.comFlag == 0 ? '中断' : '正常' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<el-button type="primary" size="small">查看监测点</el-button>
|
||||
<el-button type="primary" size="small" @click="lookEvent">
|
||||
<el-button type='primary' size='small' @click='lookPoint'>查看监测点</el-button>
|
||||
<el-button type='primary' size='small' @click='lookEvent'>
|
||||
未处理事件({{ infoWindowPoint.noDealCount }})
|
||||
</el-button>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions
|
||||
:title="infoWindowPoint.subName"
|
||||
:column="1"
|
||||
v-else-if="infoWindowPoint.subId"
|
||||
style="padding-top: 10px"
|
||||
:title='infoWindowPoint.subName'
|
||||
:column='1'
|
||||
v-else-if='infoWindowPoint.subId'
|
||||
style='padding-top: 10px'
|
||||
></el-descriptions>
|
||||
</bm-info-window>
|
||||
</bm-marker>
|
||||
</baidu-map>
|
||||
</div>
|
||||
<div style="width: 600px; height: 100%">
|
||||
<Right :params="params" v-if="params.deptIndex"></Right>
|
||||
<div style='width: 600px; height: 100%'>
|
||||
<Right :params='params' v-if='params.deptIndex'></Right>
|
||||
</div>
|
||||
<PopupEvent ref="popupEvent"></PopupEvent>
|
||||
<PopupEvent ref='popupEvent'></PopupEvent>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script setup lang='ts'>
|
||||
import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
|
||||
import { ref } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
@@ -152,6 +152,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import Right from './right.vue'
|
||||
import PopupEvent from './popupEvent.vue'
|
||||
import router from '@/router'
|
||||
|
||||
defineOptions({
|
||||
name: 'Descentsystem/overview'
|
||||
@@ -295,8 +296,16 @@ const lookEvent = (e: any) => {
|
||||
searchEndTime: datePickerRef.value.timeValue[1]
|
||||
})
|
||||
}
|
||||
const lookPoint = () => {
|
||||
router.push({
|
||||
name: 'Descentsystem/monitoringpoint',
|
||||
query: {
|
||||
lineId: infoWindowPoint.value.lineId
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
<style lang='scss' scoped>
|
||||
.bm-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
Reference in New Issue
Block a user