pointtree

This commit is contained in:
仲么了
2024-02-22 14:51:05 +08:00
parent 777fc7fb40
commit 19a7ad5603
9 changed files with 178 additions and 310 deletions

View File

@@ -1,73 +0,0 @@
<template>
<Tree
ref="treRef"
@check-change="handleCheckChange"
:default-checked-keys="defaultCheckedKeys"
:show-checkbox="props.showCheckbox"
:data="tree"
/>
</template>
<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import Tree from '../index.vue'
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config'
defineOptions({
name: 'govern/deviceTree'
})
const props = withDefaults(
defineProps<{
showCheckbox?: boolean
defaultCheckedKeys?: any
}>(),
{
showCheckbox: false,
defaultCheckedKeys: []
}
)
const emit = defineEmits(['init', 'checkChange'])
const config = useConfig()
const tree = ref()
const treRef = ref()
getDeviceTree().then(res => {
let arr: any[] = []
res.data.forEach((item: any) => {
item.icon = 'el-icon-HomeFilled'
item.color = config.getColorVal('elementUiPrimary')
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-List'
item2.color = config.getColorVal('elementUiPrimary')
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-Platform'
item3.color = config.getColorVal('elementUiPrimary')
if (item3.comFlag === 1) {
item3.color = '#e26257 !important'
}
arr.push(item3)
})
})
})
tree.value = res.data
nextTick(() => {
if (arr.length) {
treRef.value.treeRef.setCurrentKey(arr[0].id)
// 注册父组件事件
emit('init', {
level: 2,
...arr[0]
})
} else {
emit('init')
}
})
})
const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
emit('checkChange', {
data,
checked,
indeterminate
})
}
</script>

View File

@@ -1,29 +0,0 @@
<template>
<Tree ref="treRef" :data="tree" />
</template>
<script setup lang="ts">
import { getMarketList } from '@/api/user-boot/user'
import Tree from '../index.vue'
import { useConfig } from '@/stores/config'
import { ref, reactive, nextTick } from 'vue'
const config = useConfig()
const tree = ref()
const treRef = ref()
const emit = defineEmits(['selectUser'])
getMarketList().then((res: any) => {
if (res.code === 'A0000') {
tree.value = res.data.map((item: any) => {
return {
...item,
icon: 'el-icon-User',
color: 'royalblue'
}
})
emit('selectUser', tree.value[0])
nextTick(() => {
treRef.value.treeRef.setCurrentKey(tree.value[0].id)
})
}
})
</script>
<style lang="scss" scoped></style>

View File

@@ -1,52 +0,0 @@
<template>
<Tree ref="treRef" :data="tree" />
</template>
<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import Tree from '../index.vue'
import { getLineTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config'
defineOptions({
name: 'govern/deviceTree'
})
const emit = defineEmits(['init'])
const config = useConfig()
const tree = ref()
const treRef = ref()
getLineTree().then(res => {
let arr: any[] = []
res.data.forEach((item: any) => {
item.icon = 'el-icon-HomeFilled'
item.color = config.getColorVal('elementUiPrimary')
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-List'
item.color = config.getColorVal('elementUiPrimary')
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-Platform'
item3.color = config.getColorVal('elementUiPrimary')
if (item3.comFlag === 1) {
item3.color = '#e26257 !important'
}
item3.children.forEach((item4: any) => {
item4.icon = 'el-icon-LocationFilled'
arr.push(item4)
})
})
})
})
tree.value = res.data
nextTick(() => {
if (arr.length) {
treRef.value.treeRef.setCurrentKey(arr[0].id)
// 注册父组件事件
emit('init', {
level: 2,
...arr[0]
})
} else {
emit('init')
}
})
})
</script>

View File

@@ -1,50 +1,50 @@
<template> <template>
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden"> <div :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden'>
<Icon <Icon
v-show="menuCollapse" v-show='menuCollapse'
@click="onMenuCollapse" @click='onMenuCollapse'
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" :class="menuCollapse ? 'unfold' : ''"
size="18" size='18'
class="fold ml10 mt20 menu-collapse" class='fold ml10 mt20 menu-collapse'
style="cursor: pointer" style='cursor: pointer'
/> />
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }"> <div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
<div style="display: flex; align-items: center" class="mb10"> <div style='display: flex; align-items: center' class='mb10'>
<el-input v-model="filterText" placeholder="请输入内容" clearable> <el-input v-model='filterText' placeholder='请输入内容' clearable>
<template #prefix> <template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" /> <Icon name='el-icon-Search' style='font-size: 16px' />
</template> </template>
</el-input> </el-input>
<Icon <Icon
@click="onMenuCollapse" @click='onMenuCollapse'
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" :class="menuCollapse ? 'unfold' : ''"
size="18" size='18'
class="fold ml10 menu-collapse" class='fold ml10 menu-collapse'
style="cursor: pointer" style='cursor: pointer'
v-if='props.canExpand' v-if='props.canExpand'
/> />
</div> </div>
<el-tree <el-tree
style="flex: 1; overflow: auto" style='flex: 1; overflow: auto'
ref="treeRef" ref='treeRef'
:props="defaultProps" :props='defaultProps'
v-bind="$attrs"
highlight-current highlight-current
default-expand-all default-expand-all
:filter-node-method="filterNode" :filter-node-method='filterNode'
node-key="id" node-key='id'
v-bind='$attrs'
> >
<template #default="{ node, data }"> <template #default='{ node, data }'>
<span class="custom-tree-node"> <span class='custom-tree-node'>
<Icon <Icon
:name="data.icon" :name='data.icon'
style="font-size: 16px" style='font-size: 16px'
:style="{ color: data.color }" :style='{ color: data.color }'
v-if="data.icon" v-if='data.icon'
/> />
<span style="margin-left: 4px">{{ node.label }}</span> <span style='margin-left: 4px'>{{ node.label }}</span>
</span> </span>
</template> </template>
</el-tree> </el-tree>
@@ -52,7 +52,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang='ts' setup>
import useCurrentInstance from '@/utils/useCurrentInstance' import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus' import { ElTree } from 'element-plus'
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
@@ -60,6 +60,7 @@ import { ref, watch } from 'vue'
defineOptions({ defineOptions({
name: 'govern/tree' name: 'govern/tree'
}) })
interface Props { interface Props {
width?: string width?: string
canExpand?: boolean canExpand?: boolean
@@ -91,7 +92,7 @@ const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef }) defineExpose({ treeRef })
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.cn-tree { .cn-tree {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
@@ -100,16 +101,20 @@ defineExpose({ treeRef })
padding: 10px; padding: 10px;
height: 100%; height: 100%;
width: 100%; width: 100%;
:deep(.el-tree) { :deep(.el-tree) {
border: 1px solid var(--el-border-color); border: 1px solid var(--el-border-color);
} }
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) { :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
background-color: var(--el-color-primary-light-7); background-color: var(--el-color-primary-light-7);
} }
.menu-collapse { .menu-collapse {
color: var(--el-color-primary); color: var(--el-color-primary);
} }
} }
.custom-tree-node { .custom-tree-node {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -1,23 +1,32 @@
<template> <template>
<div style='height: 100%;width: 100%;display: flex;flex-direction: column'> <div class="point-tree" style="height: 100%; width: 100%; display: flex; flex-direction: column">
<el-select v-model='formData.statisticalType' placeholder='请选择' style='min-width: unset;padding: 10px 10px 0' <el-select
@change='loadData'> v-model="formData.statisticalType"
<el-option v-for='item in classificationData' :key='item.id' :label='item.name' placeholder="请选择"
:value='item.id'></el-option> style="min-width: unset; padding: 10px 10px 0"
@change="loadData"
>
<el-option
v-for="item in classificationData"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select> </el-select>
<div style='flex: 1;overflow: hidden'> <div style="flex: 1; overflow: hidden">
<Tree ref='treRef' :data='tree' style='width: 100%;height: 100%' :canExpand='false' /> <Tree ref="treRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
</div> </div>
</div> </div>
</template> </template>
<script lang='ts' setup> <script lang="ts" setup>
import { ref, nextTick } from 'vue' import { ref, nextTick, watch } from 'vue'
import Tree from '../index.vue' import Tree from '../index.vue'
import { useAdminInfo } from '@/stores/adminInfo' import { useAdminInfo } from '@/stores/adminInfo'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree' import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import { ElTree } from 'element-plus'
defineOptions({ defineOptions({
name: 'pms/pointTree' name: 'pms/pointTree'
@@ -40,13 +49,12 @@ const formData = ref({
statisticalType: classificationData[0].id, statisticalType: classificationData[0].id,
scale: null scale: null
}) })
console.log(formData)
const loadData = () => { const loadData = () => {
let form = JSON.parse(JSON.stringify(formData.value)) let form = JSON.parse(JSON.stringify(formData.value))
form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType) form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
getTerminalTreeForFive(form).then(res => { getTerminalTreeForFive(form).then(res => {
console.log(res) console.log(res)
let arr: any[] = []
res.data.forEach((item: any) => { res.data.forEach((item: any) => {
item.icon = 'fa-solid fa-synagogue' item.icon = 'fa-solid fa-synagogue'
item.color = config.getColorVal('elementUiPrimary') item.color = config.getColorVal('elementUiPrimary')
@@ -59,7 +67,10 @@ const loadData = () => {
item3.children.forEach((item4: any) => { item3.children.forEach((item4: any) => {
item4.icon = 'fa-solid fa-tower-observation' item4.icon = 'fa-solid fa-tower-observation'
item4.color = config.getColorVal('elementUiPrimary') item4.color = config.getColorVal('elementUiPrimary')
item4.children.forEach((item5: any) => { item4.children.forEach((item5: anyObj, index: number) => {
// if (!props.currentNodeKey && index === 0) {
// treRef.value.setCurrentKey(item5.id)
// }
item5.icon = 'fa-solid fa-location-dot' item5.icon = 'fa-solid fa-location-dot'
item5.color = config.getColorVal('elementUiPrimary') item5.color = config.getColorVal('elementUiPrimary')
if (item5.comFlag === 0) { if (item5.comFlag === 0) {
@@ -78,39 +89,4 @@ const loadData = () => {
}) })
} }
loadData() loadData()
// getTerminalTreeForFive().then(res => {
// let arr: any[] = []
// res.data.forEach((item: any) => {
// item.icon = 'el-icon-HomeFilled'
// item.color = config.getColorVal('elementUiPrimary')
// item.children.forEach((item2: any) => {
// item2.icon = 'el-icon-List'
// item.color = config.getColorVal('elementUiPrimary')
// item2.children.forEach((item3: any) => {
// item3.icon = 'el-icon-Platform'
// item3.color = config.getColorVal('elementUiPrimary')
// if (item3.comFlag === 1) {
// item3.color = '#e26257 !important'
// }
// item3.children.forEach((item4: any) => {
// item4.icon = 'el-icon-LocationFilled'
// arr.push(item4)
// })
// })
// })
// })
// tree.value = res.data
// nextTick(() => {
// if (arr.length) {
// treRef.value.treeRef.setCurrentKey(arr[0].id)
// // 注册父组件事件
// emit('init', {
// level: 2,
// ...arr[0]
// })
// } else {
// emit('init')
// }
// })
// })
</script> </script>

View File

@@ -17,17 +17,28 @@
</div> </div>
</template> </template>
<script setup lang='ts'> <script setup lang='ts'>
import { defineOptions, ref } from 'vue' import { defineOptions, ref, watch } from 'vue'
import Navigation from './navigation/index.vue' import Navigation from './navigation/index.vue'
import EventStatistics from './eventStatistics/index.vue' import EventStatistics from './eventStatistics/index.vue'
import EventStudy from './eventStudy/index.vue' import EventStudy from './eventStudy/index.vue'
import RunningCondition from './runningCondition/index.vue' import RunningCondition from './runningCondition/index.vue'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import router from '@/router'
import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
defineOptions({ defineOptions({
name: 'Descentsystem/monitoringpoint' name: 'Descentsystem/monitoringpoint'
}) })
const monitoringPoint = useMonitoringPoint()
const height = mainHeight(82) const height = mainHeight(82)
const activeName = ref('1') const activeName = ref('1')
watch(
() => router.currentRoute.value.query.lineId,
(newLineId, oldLineId) => {
// 在这里处理 lineId 的变化
monitoringPoint.setValue('lineId', newLineId)
},
{ immediate: true }
)
</script> </script>
<style></style> <style></style>

View File

@@ -1,7 +1,8 @@
<template> <template>
<splitpanes style='height: 100%;' class='default-theme' id='navigation-splitpanes'> <splitpanes style='height: 100%;' class='default-theme' id='navigation-splitpanes'>
<pane :size='size'> <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>
<pane> <pane>
<Map></Map> <Map></Map>
@@ -14,9 +15,10 @@ import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes' import { Splitpanes, Pane } from 'splitpanes'
import PointTree from '@/components/tree/pms/pointTree.vue' import PointTree from '@/components/tree/pms/pointTree.vue'
import Map from './map.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) const size = ref(0)
onMounted(() => { onMounted(() => {
const dom = document.getElementById('navigation-splitpanes') const dom = document.getElementById('navigation-splitpanes')

View 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 }
}
)

View File

@@ -1,113 +1,113 @@
<template> <template>
<div style="padding: 10px; display: flex; height: 100%" v-loading="loading"> <div style='padding: 10px; display: flex; height: 100%' v-loading='loading'>
<div style="position: relative; flex: 1"> <div style='position: relative; flex: 1'>
<div style="display: none"> <div style='display: none'>
<DatePicker ref="datePickerRef"></DatePicker> <DatePicker ref='datePickerRef'></DatePicker>
</div> </div>
<div class="iconBox"> <div class='iconBox'>
<div class="div"> <div class='div'>
<img src="@/assets/jcd.png" alt="" /> <img src='@/assets/jcd.png' alt='' />
<span>变电站</span> <span>变电站</span>
</div> </div>
<div class="div"> <div class='div'>
<img src="@/assets/rby.png" alt="" /> <img src='@/assets/rby.png' alt='' />
<span>热备用</span> <span>热备用</span>
</div> </div>
<div class="div"> <div class='div'>
<img src="@/assets/ty.png" alt="" /> <img src='@/assets/ty.png' alt='' />
<span>停运</span> <span>停运</span>
</div> </div>
<div class="div">投运</div> <div class='div'>投运</div>
<div class="div" style="padding-left: 10px"> <div class='div' style='padding-left: 10px'>
<span>通讯正常</span> <span>通讯正常</span>
</div> </div>
<div class="div" style="padding-left: 20px"> <div class='div' style='padding-left: 20px'>
<img src="@/assets/txzcyzj.gif" alt="" /> <img src='@/assets/txzcyzj.gif' alt='' />
<span>有暂降</span> <span>有暂降</span>
</div> </div>
<div class="div" style="padding-left: 20px"> <div class='div' style='padding-left: 20px'>
<img src="@/assets/txzcwzj.png" alt="" /> <img src='@/assets/txzcwzj.png' alt='' />
<span>无暂降</span> <span>无暂降</span>
</div> </div>
<div class="div" style="padding-left: 10px"> <div class='div' style='padding-left: 10px'>
<span>通讯异常</span> <span>通讯异常</span>
</div> </div>
<div class="div" style="padding-left: 20px"> <div class='div' style='padding-left: 20px'>
<img src="@/assets/txycyzj.gif" alt="" /> <img src='@/assets/txycyzj.gif' alt='' />
<span>有暂降</span> <span>有暂降</span>
</div> </div>
<div class="div" style="padding-left: 20px"> <div class='div' style='padding-left: 20px'>
<img src="@/assets/txzdwzj.png" alt="" /> <img src='@/assets/txzdwzj.png' alt='' />
<span>无暂降</span> <span>无暂降</span>
</div> </div>
</div> </div>
<div class="selectBox"> <div class='selectBox'>
<el-select <el-select
@change="pointChange" @change='pointChange'
:popper-append-to-body="false" :popper-append-to-body='false'
filterable filterable
clearable clearable
v-model="lineId" v-model='lineId'
placeholder="输入监测点名称查询" placeholder='输入监测点名称查询'
> >
<el-option <el-option
v-for="item in areaLineInfo" v-for='item in areaLineInfo'
:key="item.lineId" :key='item.lineId'
:label="item.lineName" :label='item.lineName'
:value="item.lineId" :value='item.lineId'
></el-option> ></el-option>
</el-select> </el-select>
</div> </div>
<baidu-map <baidu-map
class="bm-view" class='bm-view'
:zoom="zoom" :zoom='zoom'
:map-click="false" :map-click='false'
:scroll-wheel-zoom="true" :scroll-wheel-zoom='true'
:center="center" :center='center'
@ready="handler" @ready='handler'
@zoomend="syncCenterAndZoom" @zoomend='syncCenterAndZoom'
> >
<bm-map-type <bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
anchor="BMAP_ANCHOR_TOP_RIGHT" anchor='BMAP_ANCHOR_TOP_RIGHT'
></bm-map-type> ></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 <bm-marker
:position="path" :position='path'
v-for="path in siteList" v-for='path in siteList'
:key="path.subId" :key='path.subId'
:icon="path.icon" :icon='path.icon'
@click="markerClick(path)" @click='markerClick(path)'
></bm-marker> ></bm-marker>
</template> </template>
<!-- 点 --> <!-- 点 -->
<BmlMarkerClusterer> <BmlMarkerClusterer>
<bm-marker <bm-marker
:position="path" :position='path'
v-for="path in areaLineInfo" v-for='path in areaLineInfo'
:key="path.lineId" :key='path.lineId'
:icon="path.icon" :icon='path.icon'
@click="markerClick(path)" @click='markerClick(path)'
></bm-marker> ></bm-marker>
</BmlMarkerClusterer> </BmlMarkerClusterer>
<bm-marker :position="infoWindowPoint" :icon="{ url: '1', size: { width: 0, height: 0 } }"> <bm-marker :position='infoWindowPoint' :icon="{ url: '1', size: { width: 0, height: 0 } }">
<bm-info-window :show="infoWindowPoint.show" @close="infoWindowPoint.show = false"> <bm-info-window :show='infoWindowPoint.show' @close='infoWindowPoint.show = false'>
<el-descriptions :title="infoWindowPoint.lineName" :column="1" v-if="infoWindowPoint.lineId"> <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.gdName }}</el-descriptions-item>
<el-descriptions-item label="变电站">{{ infoWindowPoint.subName }}</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.voltageName }}</el-descriptions-item>
<el-descriptions-item label="网络参数"> <el-descriptions-item label='网络参数'>
{{ infoWindowPoint.ip }} {{ infoWindowPoint.ip }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="PT变化">{{ infoWindowPoint.pt2 }}</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='CT变化'>{{ infoWindowPoint.ct2 }}</el-descriptions-item>
<el-descriptions-item label="生产厂家"> <el-descriptions-item label='生产厂家'>
{{ infoWindowPoint.manufacturer }} {{ infoWindowPoint.manufacturer }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="终端状态"> <el-descriptions-item label='终端状态'>
{{ {{
infoWindowPoint.runFlag == 0 infoWindowPoint.runFlag == 0
? '投运' ? '投运'
@@ -116,34 +116,34 @@
: '停运' : '停运'
}} }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="通讯状态"> <el-descriptions-item label='通讯状态'>
{{ infoWindowPoint.comFlag == 0 ? '中断' : '正常' }} {{ infoWindowPoint.comFlag == 0 ? '中断' : '正常' }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item> <el-descriptions-item>
<el-button type="primary" size="small">查看监测点</el-button> <el-button type='primary' size='small' @click='lookPoint'>查看监测点</el-button>
<el-button type="primary" size="small" @click="lookEvent"> <el-button type='primary' size='small' @click='lookEvent'>
未处理事件({{ infoWindowPoint.noDealCount }}) 未处理事件({{ infoWindowPoint.noDealCount }})
</el-button> </el-button>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<el-descriptions <el-descriptions
:title="infoWindowPoint.subName" :title='infoWindowPoint.subName'
:column="1" :column='1'
v-else-if="infoWindowPoint.subId" v-else-if='infoWindowPoint.subId'
style="padding-top: 10px" style='padding-top: 10px'
></el-descriptions> ></el-descriptions>
</bm-info-window> </bm-info-window>
</bm-marker> </bm-marker>
</baidu-map> </baidu-map>
</div> </div>
<div style="width: 600px; height: 100%"> <div style='width: 600px; height: 100%'>
<Right :params="params" v-if="params.deptIndex"></Right> <Right :params='params' v-if='params.deptIndex'></Right>
</div> </div>
<PopupEvent ref="popupEvent"></PopupEvent> <PopupEvent ref='popupEvent'></PopupEvent>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang='ts'>
import { BmlMarkerClusterer } from 'vue-baidu-map-3x' import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
import { ref } from 'vue' import { ref } from 'vue'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
@@ -152,6 +152,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
import { useAdminInfo } from '@/stores/adminInfo' import { useAdminInfo } from '@/stores/adminInfo'
import Right from './right.vue' import Right from './right.vue'
import PopupEvent from './popupEvent.vue' import PopupEvent from './popupEvent.vue'
import router from '@/router'
defineOptions({ defineOptions({
name: 'Descentsystem/overview' name: 'Descentsystem/overview'
@@ -295,8 +296,16 @@ const lookEvent = (e: any) => {
searchEndTime: datePickerRef.value.timeValue[1] searchEndTime: datePickerRef.value.timeValue[1]
}) })
} }
const lookPoint = () => {
router.push({
name: 'Descentsystem/monitoringpoint',
query: {
lineId: infoWindowPoint.value.lineId
}
})
}
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.bm-view { .bm-view {
width: 100%; width: 100%;
height: 100%; height: 100%;