pointtree
This commit is contained in:
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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')
|
||||||
|
|||||||
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,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%;
|
||||||
|
|||||||
Reference in New Issue
Block a user