电压暂降地理信息图概览
This commit is contained in:
仲么了
10
src/api/device-boot/device.ts
Normal file
10
src/api/device-boot/device.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取区域中断设备
|
||||
export function getAreaOffDev(data) {
|
||||
return request({
|
||||
url: "/device-boot/device/getAreaOffDev",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
@@ -8,3 +8,21 @@ export function getAreaLineInfo(data: any) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取区域未处理暂态事件
|
||||
export function getNoDealEvents(data: any) {
|
||||
return request({
|
||||
url: '/event-boot/areaInfo/getNoDealEvents',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取监测点下未处理的暂降事件
|
||||
export function getNoDealEventsByLineId(params: any) {
|
||||
return request({
|
||||
url: '/event-boot/areaInfo/getNoDealEventsByLineId',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
@@ -112,7 +112,7 @@ const handleCommand = (key: string) => {
|
||||
popupPwd.value.open()
|
||||
break
|
||||
case 'layout':
|
||||
router.push({ name: 'login' })
|
||||
router.push({ name: 'login' })
|
||||
break
|
||||
default:
|
||||
break
|
||||
|
||||
@@ -1,293 +0,0 @@
|
||||
<template>
|
||||
<div style='padding: 10px; position: relative'>
|
||||
<div style='display: none'>
|
||||
<DatePicker ref='datePickerRef'></DatePicker>
|
||||
</div>
|
||||
<div class='iconBox'>
|
||||
<div class='div'>
|
||||
<img src='@/assets/jcd.png' alt='' />
|
||||
<span>变电站</span>
|
||||
</div>
|
||||
<div class='div'>
|
||||
<img src='@/assets/rby.png' alt='' />
|
||||
<span>热备用</span>
|
||||
</div>
|
||||
<div class='div'>
|
||||
<img src='@/assets/ty.png' alt='' />
|
||||
<span>停运</span>
|
||||
</div>
|
||||
<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='' />
|
||||
<span>有暂降</span>
|
||||
</div>
|
||||
<div class='div' style='padding-left: 20px'>
|
||||
<img src='@/assets/txzcwzj.png' alt='' />
|
||||
<span>无暂降</span>
|
||||
</div>
|
||||
<div class='div' style='padding-left: 10px'>
|
||||
<span>通讯异常</span>
|
||||
</div>
|
||||
<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='' />
|
||||
<span>无暂降</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='selectBox'>
|
||||
<el-select
|
||||
@change='pointChange'
|
||||
:popper-append-to-body='false'
|
||||
filterable
|
||||
clearable
|
||||
v-model='lineId'
|
||||
placeholder='输入监测点名称查询'
|
||||
>
|
||||
<el-option
|
||||
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'
|
||||
:style='height'
|
||||
@zoomend='syncCenterAndZoom'
|
||||
>
|
||||
<bm-map-type
|
||||
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
|
||||
anchor='BMAP_ANCHOR_TOP_RIGHT'
|
||||
></bm-map-type>
|
||||
<!-- 线-->
|
||||
<bm-polyline :path='path' v-for='(path,index) in polyline' :key='index'></bm-polyline>
|
||||
<!-- 变电站-->
|
||||
<template v-if='zoom > 12'>
|
||||
<bm-marker :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)'>
|
||||
</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='网络参数'>
|
||||
{{ 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='生产厂家'>{{ infoWindowPoint.manufacturer }}</el-descriptions-item>
|
||||
<el-descriptions-item label='终端状态'>
|
||||
{{ infoWindowPoint.runFlag == 0 ? '投运' : infoWindowPoint.runFlag == 1 ? '热备用' : '停运'
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<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'>未处理事件({{ 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'>
|
||||
</el-descriptions>
|
||||
</bm-info-window>
|
||||
</bm-marker>
|
||||
</baidu-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
|
||||
import { ref } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
|
||||
const height = mainHeight(20)
|
||||
const adminInfo = useAdminInfo()
|
||||
const datePickerRef = ref()
|
||||
const zoom = ref(11)
|
||||
const center = ref({
|
||||
lng: 0,
|
||||
lat: 0
|
||||
})
|
||||
const infoWindowPoint = ref<anyObj>({
|
||||
lng: 0,
|
||||
lat: 0,
|
||||
show: false
|
||||
})
|
||||
const areaLineInfo = ref<any>([])
|
||||
const siteList = ref<any>([])
|
||||
const polyline = ref<any>([])
|
||||
const lineId = ref('')
|
||||
const handler = async ({ BMap, map }: any) => {
|
||||
let { data } = await getAreaLineInfo({
|
||||
deptIndex: adminInfo.$state.deptId,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
searchBeginTime: datePickerRef.value.timeValue[0],
|
||||
searchEndTime: datePickerRef.value.timeValue[1],
|
||||
serverName: 'event-boot',
|
||||
statisticalType: {}
|
||||
})
|
||||
let r = 0.0035
|
||||
data.forEach((item: any) => {
|
||||
// 变电站图标
|
||||
item.icon = {
|
||||
url: new URL('@/assets/jcd.png', import.meta.url).href,
|
||||
size: {
|
||||
width: 40,
|
||||
height: 40
|
||||
}
|
||||
}
|
||||
if (item.children.length > 10 && item.children.length < 100) {
|
||||
r = 0.0055
|
||||
} else if (item.children.length >= 100) {
|
||||
r = 0.01055
|
||||
}
|
||||
item.children.forEach((val: any, i: number) => {
|
||||
val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
|
||||
val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
|
||||
// 监测点图标
|
||||
val.icon = {
|
||||
url: '',
|
||||
size: {
|
||||
width: 40,
|
||||
height: 40
|
||||
}
|
||||
}
|
||||
switch (val.runFlag) {
|
||||
case 0:
|
||||
// 投运
|
||||
if (val.comFlag == 0) {
|
||||
// 异常
|
||||
if (val.noDealCount > 0) {
|
||||
// 异常有暂降
|
||||
val.icon.url = new URL('@/assets/txycyzj.gif', import.meta.url).href
|
||||
} else if (val.noDealCount == 0) {
|
||||
// 异常无暂降
|
||||
val.icon.url = new URL('@/assets/txzdwzj.png', import.meta.url).href
|
||||
}
|
||||
} else if (val.comFlag == 1) {
|
||||
// 正常
|
||||
if (val.noDealCount > 0) {
|
||||
// 正常有暂降
|
||||
val.icon.url = new URL('@/assets/txzcyzj.gif', import.meta.url).href
|
||||
} else if (val.noDealCount == 0) {
|
||||
// 正常无暂降
|
||||
val.icon.url = new URL('@/assets/txzcwzj.png', import.meta.url).href
|
||||
}
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
val.icon.url = new URL('@/assets/rby.png', import.meta.url).href
|
||||
break
|
||||
case 2:
|
||||
val.icon.url = new URL('@/assets/ty.png', import.meta.url).href
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
polyline.value.push([
|
||||
{
|
||||
lng: item.lng,
|
||||
lat: item.lat
|
||||
},
|
||||
{
|
||||
lng: val.lng,
|
||||
lat: val.lat
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
areaLineInfo.value.push(...item.children)
|
||||
})
|
||||
siteList.value = data
|
||||
console.log(areaLineInfo.value)
|
||||
console.log(siteList.value)
|
||||
center.value.lng = areaLineInfo.value[0].lng
|
||||
center.value.lat = areaLineInfo.value[0].lat
|
||||
}
|
||||
|
||||
const syncCenterAndZoom = (e: any) => {
|
||||
zoom.value = e.target.getZoom()
|
||||
}
|
||||
const pointChange = (val: string) => {
|
||||
if (!val) return
|
||||
let data = areaLineInfo.value.find((item: any) => item.lineId == val)
|
||||
center.value.lng = data.lng
|
||||
center.value.lat = data.lat
|
||||
infoWindowPoint.value = data
|
||||
infoWindowPoint.value.show = true
|
||||
zoom.value = 15
|
||||
}
|
||||
const markerClick = (e: any) => {
|
||||
console.log(e)
|
||||
infoWindowPoint.value = e
|
||||
infoWindowPoint.value.show = true
|
||||
console.log(infoWindowPoint.value)
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.bm-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.selectBox {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 165px;
|
||||
z-index: 2000;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.iconBox {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 2000;
|
||||
width: 150px;
|
||||
height: 260px;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.75) !important;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
font-size: 12px;
|
||||
|
||||
.div {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div class='default-main'>关联性分析</div>
|
||||
</template>
|
||||
337
src/views/pms/voltageSags/overview/index.vue
Normal file
337
src/views/pms/voltageSags/overview/index.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<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>
|
||||
<div class="iconBox">
|
||||
<div class="div">
|
||||
<img src="@/assets/jcd.png" alt="" />
|
||||
<span>变电站</span>
|
||||
</div>
|
||||
<div class="div">
|
||||
<img src="@/assets/rby.png" alt="" />
|
||||
<span>热备用</span>
|
||||
</div>
|
||||
<div class="div">
|
||||
<img src="@/assets/ty.png" alt="" />
|
||||
<span>停运</span>
|
||||
</div>
|
||||
<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="" />
|
||||
<span>有暂降</span>
|
||||
</div>
|
||||
<div class="div" style="padding-left: 20px">
|
||||
<img src="@/assets/txzcwzj.png" alt="" />
|
||||
<span>无暂降</span>
|
||||
</div>
|
||||
<div class="div" style="padding-left: 10px">
|
||||
<span>通讯异常</span>
|
||||
</div>
|
||||
<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="" />
|
||||
<span>无暂降</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectBox">
|
||||
<el-select
|
||||
@change="pointChange"
|
||||
:popper-append-to-body="false"
|
||||
filterable
|
||||
clearable
|
||||
v-model="lineId"
|
||||
placeholder="输入监测点名称查询"
|
||||
>
|
||||
<el-option
|
||||
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"
|
||||
>
|
||||
<bm-map-type
|
||||
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
|
||||
anchor="BMAP_ANCHOR_TOP_RIGHT"
|
||||
></bm-map-type>
|
||||
<!-- 线-->
|
||||
<bm-polyline :path="path" v-for="(path, index) in polyline" :key="index"></bm-polyline>
|
||||
<!-- 变电站-->
|
||||
<template v-if="zoom > 12">
|
||||
<bm-marker
|
||||
: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)"
|
||||
></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="网络参数">
|
||||
{{ 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="生产厂家">
|
||||
{{ infoWindowPoint.manufacturer }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="终端状态">
|
||||
{{
|
||||
infoWindowPoint.runFlag == 0
|
||||
? '投运'
|
||||
: infoWindowPoint.runFlag == 1
|
||||
? '热备用'
|
||||
: '停运'
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<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">
|
||||
未处理事件({{ 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"
|
||||
></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>
|
||||
<PopupEvent ref="popupEvent"></PopupEvent>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
|
||||
import { ref } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import Right from './right.vue'
|
||||
import PopupEvent from './popupEvent.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'Descentsystem/overview'
|
||||
})
|
||||
const height = mainHeight(20)
|
||||
const adminInfo = useAdminInfo()
|
||||
const datePickerRef = ref()
|
||||
const zoom = ref(11)
|
||||
const loading = ref(true)
|
||||
const popupEvent = ref()
|
||||
const params = ref({
|
||||
deptIndex: '',
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
serverName: 'event-boot',
|
||||
statisticalType: {}
|
||||
})
|
||||
const center = ref({
|
||||
lng: 0,
|
||||
lat: 0
|
||||
})
|
||||
const infoWindowPoint = ref<anyObj>({
|
||||
lng: 0,
|
||||
lat: 0,
|
||||
show: false
|
||||
})
|
||||
const areaLineInfo = ref<any>([])
|
||||
const siteList = ref<any>([])
|
||||
const polyline = ref<any>([])
|
||||
const lineId = ref('')
|
||||
const handler = async ({ BMap, map }: any) => {
|
||||
params.value.deptIndex = adminInfo.$state.deptId
|
||||
params.value.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
params.value.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
let { data } = await getAreaLineInfo(params.value)
|
||||
let r = 0.0035
|
||||
data.forEach((item: any) => {
|
||||
// 变电站图标
|
||||
item.icon = {
|
||||
url: new URL('@/assets/jcd.png', import.meta.url).href,
|
||||
size: {
|
||||
width: 40,
|
||||
height: 40
|
||||
}
|
||||
}
|
||||
if (item.children.length > 10 && item.children.length < 100) {
|
||||
r = 0.0055
|
||||
} else if (item.children.length >= 100) {
|
||||
r = 0.01055
|
||||
}
|
||||
item.children.forEach((val: any, i: number) => {
|
||||
val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
|
||||
val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
|
||||
// 监测点图标
|
||||
val.icon = {
|
||||
url: '',
|
||||
size: {
|
||||
width: 40,
|
||||
height: 40
|
||||
}
|
||||
}
|
||||
switch (val.runFlag) {
|
||||
case 0:
|
||||
// 投运
|
||||
if (val.comFlag == 0) {
|
||||
// 异常
|
||||
if (val.noDealCount > 0) {
|
||||
// 异常有暂降
|
||||
val.icon.url = new URL('@/assets/txycyzj.gif', import.meta.url).href
|
||||
} else if (val.noDealCount == 0) {
|
||||
// 异常无暂降
|
||||
val.icon.url = new URL('@/assets/txzdwzj.png', import.meta.url).href
|
||||
}
|
||||
} else if (val.comFlag == 1) {
|
||||
// 正常
|
||||
if (val.noDealCount > 0) {
|
||||
// 正常有暂降
|
||||
val.icon.url = new URL('@/assets/txzcyzj.gif', import.meta.url).href
|
||||
} else if (val.noDealCount == 0) {
|
||||
// 正常无暂降
|
||||
val.icon.url = new URL('@/assets/txzcwzj.png', import.meta.url).href
|
||||
}
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
val.icon.url = new URL('@/assets/rby.png', import.meta.url).href
|
||||
break
|
||||
case 2:
|
||||
val.icon.url = new URL('@/assets/ty.png', import.meta.url).href
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
polyline.value.push([
|
||||
{
|
||||
lng: item.lng,
|
||||
lat: item.lat
|
||||
},
|
||||
{
|
||||
lng: val.lng,
|
||||
lat: val.lat
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
areaLineInfo.value.push(...item.children)
|
||||
})
|
||||
siteList.value = data
|
||||
center.value.lng = areaLineInfo.value[0].lng
|
||||
center.value.lat = areaLineInfo.value[0].lat
|
||||
infoWindowPoint.value = areaLineInfo.value[0]
|
||||
infoWindowPoint.value.show = true
|
||||
zoom.value = 15
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
const syncCenterAndZoom = (e: any) => {
|
||||
zoom.value = e.target.getZoom()
|
||||
}
|
||||
const pointChange = (val: string) => {
|
||||
if (!val) return
|
||||
let data = areaLineInfo.value.find((item: any) => item.lineId == val)
|
||||
center.value.lng = data.lng
|
||||
center.value.lat = data.lat
|
||||
infoWindowPoint.value = data
|
||||
infoWindowPoint.value.show = true
|
||||
zoom.value = 15
|
||||
}
|
||||
const markerClick = (e: any) => {
|
||||
infoWindowPoint.value = e
|
||||
infoWindowPoint.value.show = true
|
||||
}
|
||||
const lookEvent = (e: any) => {
|
||||
popupEvent.value.open({
|
||||
id: infoWindowPoint.value.lineId,
|
||||
searchBeginTime: datePickerRef.value.timeValue[0],
|
||||
searchEndTime: datePickerRef.value.timeValue[1]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bm-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.selectBox {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 165px;
|
||||
z-index: 2000;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.iconBox {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 2000;
|
||||
width: 150px;
|
||||
height: 260px;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.75) !important;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
font-size: 12px;
|
||||
|
||||
.div {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
36
src/views/pms/voltageSags/overview/popupEvent.vue
Normal file
36
src/views/pms/voltageSags/overview/popupEvent.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" title="暂降事件列表">
|
||||
<vxe-table v-loading="loading" height="auto" auto-resize :data="tableData" v-bind="defaultAttribute">
|
||||
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
|
||||
<vxe-column field="startTime" title="发生时间" width="200"></vxe-column>
|
||||
<vxe-column field="duration" title="持续时间(s)" width="120"></vxe-column>
|
||||
<vxe-column field="featureAmplitude" title="暂降(骤升)幅值(%)" width="150">
|
||||
<template #default="{ row }">
|
||||
{{ (row.featureAmplitude * 100).toFixed(2) }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="gdName" title="供电公司" width="200"></vxe-column>
|
||||
<vxe-column field="subName" title="变电站" min-width="200"></vxe-column>
|
||||
<vxe-column field="lineName" title="监测点" width="200"></vxe-column>
|
||||
</vxe-table>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getNoDealEventsByLineId } from '@/api/event-boot/areaInfo'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const tableData = ref([])
|
||||
const loading = ref(true)
|
||||
const open = (params:any) => {
|
||||
dialogVisible.value = true
|
||||
loading.value = true
|
||||
getNoDealEventsByLineId(params).then(res => {
|
||||
tableData.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
92
src/views/pms/voltageSags/overview/right.vue
Normal file
92
src/views/pms/voltageSags/overview/right.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="overview-right">
|
||||
<div class="overview-right-item">
|
||||
<div class="overview-right-item-title">
|
||||
<span style="font-weight: 700">离线终端</span>
|
||||
</div>
|
||||
<div style="flex: 1; overflow: hidden">
|
||||
<vxe-table height="auto" auto-resize :data="tableData1" v-bind="defaultAttribute">
|
||||
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
|
||||
<vxe-column field="updateTime" title="中断时间"></vxe-column>
|
||||
<vxe-column field="subName" title="变电站"></vxe-column>
|
||||
<vxe-column field="devName" title="装置名称"></vxe-column>
|
||||
<vxe-column field="devType" title="装置型号"></vxe-column>
|
||||
<vxe-column field="ip" title="网络参数"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-right-item" style="padding-top: 0">
|
||||
<div class="overview-right-item-title">
|
||||
<div style="font-weight: 700">未处理暂态事件</div>
|
||||
<el-button type="primary" size="small" icon="el-icon-Promotion" @click="jump">事件关联分析</el-button>
|
||||
</div>
|
||||
<div style="flex: 1; overflow: hidden">
|
||||
<vxe-table height="auto" auto-resize :data="tableData" v-bind="defaultAttribute">
|
||||
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
|
||||
<vxe-column field="startTime" title="发生时刻"></vxe-column>
|
||||
<vxe-column field="lineName" title="监测点"></vxe-column>
|
||||
<vxe-column field="featureAmplitude" title="暂降(骤升)幅值(%)" width="150"></vxe-column>
|
||||
<vxe-column field="duration" title="持续时间(s)" width="120"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getNoDealEvents } from '@/api/event-boot/areaInfo'
|
||||
import { getAreaOffDev } from '@/api/device-boot/device'
|
||||
import router from '@/router'
|
||||
|
||||
const props = defineProps({
|
||||
params: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
const tableData = ref([])
|
||||
const tableData1 = ref([])
|
||||
getNoDealEvents(props.params).then(res => {
|
||||
console.log(res)
|
||||
tableData.value = res.data
|
||||
})
|
||||
getAreaOffDev(props.params).then(res => {
|
||||
tableData1.value = res.data
|
||||
})
|
||||
|
||||
const jump = () => {
|
||||
router.push({
|
||||
name: 'Advancedanalysis/eventcorrelation'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.overview-right {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.overview-right-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.overview-right-item-title {
|
||||
background: #fff;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user