2026-06-16 08:36:22 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="default-main">
|
|
|
|
|
|
<TableHeader datePicker theCurrentTime area ref="header">
|
|
|
|
|
|
<!-- <template v-slot:select>
|
|
|
|
|
|
|
|
|
|
|
|
</template> -->
|
|
|
|
|
|
</TableHeader>
|
|
|
|
|
|
<div v-loading="tableStore.table.loading">
|
|
|
|
|
|
<el-row :gutter="10" class="pd10">
|
|
|
|
|
|
<el-col :span="11" style="position: relative">
|
|
|
|
|
|
<el-card>
|
|
|
|
|
|
<el-radio-group
|
|
|
|
|
|
v-model="tableStore.table.params.type"
|
|
|
|
|
|
class="group"
|
|
|
|
|
|
@change="tableStore.index()"
|
|
|
|
|
|
>
|
|
|
|
|
|
<el-radio-button label="风电场" value="1" />
|
|
|
|
|
|
<el-radio-button label="光伏电站" value="2" />
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
<MyEchartMap
|
|
|
|
|
|
ref="EchartMap"
|
|
|
|
|
|
:options="echartMapList"
|
|
|
|
|
|
class="map"
|
|
|
|
|
|
@eliminate="eliminate"
|
|
|
|
|
|
@getRegionByRegion="getRegionByRegion"
|
|
|
|
|
|
@clickMap="clickMap"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="13">
|
|
|
|
|
|
<el-card>
|
|
|
|
|
|
<template #header>
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
|
<span>暂降列表</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <h3 class="mb10">暂降列表</h3> -->
|
|
|
|
|
|
<div class="tall1">
|
|
|
|
|
|
<vxe-table
|
|
|
|
|
|
height="auto"
|
|
|
|
|
|
auto-resize
|
|
|
|
|
|
:data="distributionData"
|
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
|
v-bind="defaultAttribute"
|
|
|
|
|
|
>
|
|
|
|
|
|
<vxe-column
|
|
|
|
|
|
field="newStationName"
|
|
|
|
|
|
title="新能源站名称"
|
|
|
|
|
|
min-width="150px"
|
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
|
></vxe-column>
|
|
|
|
|
|
<vxe-column field="startTime" title="暂降发生时刻" min-width="180px" sortable></vxe-column>
|
|
|
|
|
|
<vxe-column
|
|
|
|
|
|
field="featureAmplitude"
|
|
|
|
|
|
title="暂降(骤升)幅值(%)"
|
|
|
|
|
|
sortable
|
|
|
|
|
|
min-width="160px"
|
|
|
|
|
|
></vxe-column>
|
|
|
|
|
|
<vxe-column
|
|
|
|
|
|
field="advanceReason"
|
|
|
|
|
|
title="暂降原因"
|
|
|
|
|
|
sortable
|
|
|
|
|
|
:formatter="formFilter"
|
|
|
|
|
|
min-width="100px"
|
|
|
|
|
|
></vxe-column>
|
|
|
|
|
|
<vxe-column field="severity" title="严重度" min-width="100px" sortable></vxe-column>
|
|
|
|
|
|
<vxe-column title="操作" width="80px">
|
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
|
<el-button
|
|
|
|
|
|
type="primary"
|
|
|
|
|
|
v-if="row.wavePath != null"
|
|
|
|
|
|
size="small"
|
|
|
|
|
|
link
|
|
|
|
|
|
@click="boxi(row)"
|
|
|
|
|
|
>
|
|
|
|
|
|
查看波形
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
<el-button v-else disabled size="small" link>暂无波形</el-button>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</vxe-column>
|
|
|
|
|
|
</vxe-table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="mt10">
|
|
|
|
|
|
<template #header>
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
|
<span>暂降波形</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<div class="tall" v-loading="loading1">
|
|
|
|
|
|
<!-- <h3 class="mb10">暂降波形</h3> -->
|
|
|
|
|
|
<div v-if="wp != null">
|
|
|
|
|
|
<rmsboxi :value="1" :height="height" :boxoList="boxoList" :wp="wp" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-empty v-else description="暂无数据" class="custom-empty" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
import TableHeader from '@/components/table/header/index.vue'
|
|
|
|
|
|
|
|
|
|
|
|
import { useDictData } from '@/stores/dictData'
|
|
|
|
|
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
|
|
|
|
|
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
|
|
|
|
|
|
import TableStore from '@/utils/tableStore'
|
|
|
|
|
|
import { voltageRideThroughEventQueryPage } from '@/api/event-boot/highAndLowPressure'
|
|
|
|
|
|
import { getMonitorEventAnalyseWave, getTransientDetailById } from '@/api/event-boot/transient'
|
|
|
|
|
|
import rmsboxi from '@/components/echarts/rmsboxi.vue'
|
|
|
|
|
|
import { ref, onMounted, provide } from 'vue'
|
|
|
|
|
|
import { mainHeight } from '@/utils/layout'
|
|
|
|
|
|
import { FormItem } from 'vxe-table'
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
|
name: 'newEnergy/highAndLowPressure'
|
|
|
|
|
|
})
|
|
|
|
|
|
const EchartMap = ref()
|
|
|
|
|
|
const dictData = useDictData()
|
|
|
|
|
|
const reason = dictData.getBasicData('Event_Reason')
|
|
|
|
|
|
const triggerType = dictData.getBasicData('Event_Statis')
|
|
|
|
|
|
const echartMapList: any = ref({})
|
|
|
|
|
|
const header = ref()
|
|
|
|
|
|
const distributionData: any = ref([])
|
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
|
const loading1 = ref(false)
|
|
|
|
|
|
const boxoList = ref(null)
|
|
|
|
|
|
const wp = ref(null)
|
|
|
|
|
|
const tableStore = new TableStore({
|
|
|
|
|
|
url: '/event-boot/voltageRideThrough/view',
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
column: [],
|
|
|
|
|
|
beforeSearchFun: () => {
|
|
|
|
|
|
tableStore.table.params.areaId = tableStore.table.params.deptIndex
|
|
|
|
|
|
},
|
|
|
|
|
|
loadCallback: () => {
|
|
|
|
|
|
// 处理地图数据
|
|
|
|
|
|
map(tableStore.table.data)
|
|
|
|
|
|
// tabulation(tableStore.table.data)
|
|
|
|
|
|
EchartMap.value.GetEchar(header.value.areaRef.areaName)
|
|
|
|
|
|
if (tableStore.table.data.length > 0) {
|
|
|
|
|
|
tabulation({ data: tableStore.table.data[0], seriesName: '高压' })
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
const height = mainHeight(200, 2).height
|
|
|
|
|
|
provide('tableStore', tableStore)
|
|
|
|
|
|
tableStore.table.params.type = '1'
|
|
|
|
|
|
|
|
|
|
|
|
// 地图点击事件
|
|
|
|
|
|
const getRegionByRegion = (list: any) => {
|
|
|
|
|
|
tableStore.table.params.deptIndex = list.id
|
|
|
|
|
|
tableStore.onTableAction('search', {})
|
|
|
|
|
|
}
|
|
|
|
|
|
// 消除点
|
|
|
|
|
|
const eliminate = (name: string) => {
|
|
|
|
|
|
echartMapList.value.options.series = []
|
|
|
|
|
|
EchartMap.value.GetEchar(name)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 地图数处理
|
|
|
|
|
|
const map = (res: any) => {
|
|
|
|
|
|
echartMapList.value = {
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: '高/低电压穿越'
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
if (params.seriesType == 'bar3D') {
|
|
|
|
|
|
return [params.seriesName, params.name + '：' + params.value[2] + (params.value[3] || '')].join(
|
|
|
|
|
|
'<br />'
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
selectedMode: false
|
|
|
|
|
|
},
|
|
|
|
|
|
geo3D: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
// name: '浙江',
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary-light-3'),
|
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
|
borderColor: '#fff'
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
label: { show: true, fontSize: 16 },
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary-light-7')
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
viewControl: {
|
|
|
|
|
|
alpha: 60,
|
|
|
|
|
|
distance: 120,
|
|
|
|
|
|
panMouseButton: 'right', //平移操作使用的鼠标按键
|
|
|
|
|
|
rotateMouseButton: 'left' //旋转操作使用的鼠标按键
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
color: '#000',
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
distance: 0,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#000',
|
|
|
|
|
|
backgroundColor: '#000'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{ name: '低压', field: 'lowPressure', unit: '次' },
|
|
|
|
|
|
{ name: '高压', field: 'highPressure', unit: '次' }
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
options: {
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '低压',
|
|
|
|
|
|
type: 'bar3D',
|
|
|
|
|
|
coordinateSystem: 'geo3D',
|
|
|
|
|
|
shading: 'lambert',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
formatter: params => {
|
|
|
|
|
|
return params.value[2]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
data:
|
|
|
|
|
|
res.length == 0
|
|
|
|
|
|
? []
|
|
|
|
|
|
: res.map((item: any) => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
...item,
|
|
|
|
|
|
value: [item.lng, item.lat, item.lowPressure || 0]
|
|
|
|
|
|
}
|
|
|
|
|
|
}),
|
|
|
|
|
|
// data:[],
|
|
|
|
|
|
barSize: 1,
|
|
|
|
|
|
minHeight: 1,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#77DA63'
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
label: { show: true }
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '高压',
|
|
|
|
|
|
type: 'bar3D',
|
|
|
|
|
|
coordinateSystem: 'geo3D',
|
|
|
|
|
|
shading: 'lambert',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
// position: 'top',
|
|
|
|
|
|
formatter: params => {
|
|
|
|
|
|
return params.value[2]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
data:
|
|
|
|
|
|
res.length == 0
|
|
|
|
|
|
? []
|
|
|
|
|
|
: res.map((item: any) => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
...item,
|
|
|
|
|
|
value: [item.lng - 0.1, item.lat, item.highPressure || 0]
|
|
|
|
|
|
}
|
|
|
|
|
|
}),
|
|
|
|
|
|
// [
|
|
|
|
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
// adcode: 330400,
|
|
|
|
|
|
// name: '大连',
|
|
|
|
|
|
|
|
|
|
|
|
// wcs: 10,
|
|
|
|
|
|
// mbs: 40,
|
|
|
|
|
|
// wcl: 100,
|
|
|
|
|
|
// value: [121.67391, 38.947468, 40, '']
|
|
|
|
|
|
// }
|
|
|
|
|
|
// ],
|
|
|
|
|
|
barSize: 1,
|
|
|
|
|
|
minHeight: 1,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#FFBF00'
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
label: { show: true }
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 点击地图
|
|
|
|
|
|
const clickMap = (e: any) => {
|
|
|
|
|
|
tabulation(e)
|
|
|
|
|
|
}
|
|
|
|
|
|
// 表格数据处理
|
|
|
|
|
|
const tabulation = (e: any) => {
|
|
|
|
|
|
console.log()
|
|
|
|
|
|
|
|
|
|
|
|
loading.value = true
|
|
|
|
|
|
voltageRideThroughEventQueryPage({
|
|
|
|
|
|
...tableStore.table.params,
|
|
|
|
|
|
areaId: e.data.id,
|
|
|
|
|
|
frequencyType:
|
|
|
|
|
|
e.seriesName == '高压'
|
|
|
|
|
|
? triggerType.filter(item => item.code == 'Voltage_Rise')[0].id
|
|
|
|
|
|
: triggerType.filter(item => item.code == 'Voltage_Dip')[0].id
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(res => {
|
|
|
|
|
|
distributionData.value = res.data
|
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
|
|
|
|
if (res.data[i].wavePath != null) {
|
|
|
|
|
|
boxi(res.data[i])
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// res.data.forEach((item: any) => {
|
|
|
|
|
|
// if (item.wavePath != null) {
|
|
|
|
|
|
// boxi(item)
|
|
|
|
|
|
// return
|
|
|
|
|
|
// }
|
|
|
|
|
|
// })
|
|
|
|
|
|
// 。wavePath
|
|
|
|
|
|
loading.value = false
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(() => {
|
|
|
|
|
|
loading.value = false
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const formFilter = (row: any) => {
|
|
|
|
|
|
if (row.column.property == 'advanceReason') {
|
|
|
|
|
|
let title = ''
|
|
|
|
|
|
reason.forEach(item => {
|
|
|
|
|
|
if (item.id == row.row.advanceReason) {
|
|
|
|
|
|
title = item.name
|
|
|
|
|
|
} else if (row.row.advanceReason == null || row.row.advanceReason == '') {
|
|
|
|
|
|
title = '/'
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
return title
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return row.row[row.column.property]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 查看波形数据
|
|
|
|
|
|
const boxi = async (row: any) => {
|
|
|
|
|
|
loading1.value = true
|
|
|
|
|
|
wp.value = null
|
|
|
|
|
|
await getTransientDetailById({
|
|
|
|
|
|
eventId: row.eventId,
|
|
|
|
|
|
sysType: 0,
|
|
|
|
|
|
smallType: 0
|
|
|
|
|
|
}).then(res => {
|
|
|
|
|
|
boxoList.value = res.data
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
await getMonitorEventAnalyseWave({
|
|
|
|
|
|
id: row.eventId,
|
|
|
|
|
|
systemType: 0,
|
|
|
|
|
|
type: 0
|
|
|
|
|
|
}).then(res => {
|
|
|
|
|
|
if (res != undefined) {
|
|
|
|
|
|
wp.value = res.data
|
|
|
|
|
|
}
|
|
|
|
|
|
loading1.value = false
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
tableStore.index()
|
|
|
|
|
|
})
|
|
|
|
|
|
const layout = mainHeight(83) as any
|
|
|
|
|
|
const layout1 = mainHeight(93) as any
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.map {
|
|
|
|
|
|
height: calc(v-bind('layout1.height') - 30px);
|
|
|
|
|
|
}
|
|
|
|
|
|
.tall {
|
|
|
|
|
|
height: calc((v-bind('layout1.height') - 100px) / 2);
|
|
|
|
|
|
}
|
|
|
|
|
|
.tall1 {
|
|
|
|
|
|
height: calc((v-bind('layout1.height') - 100px) / 2 - 50px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.group {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 15px;
|
|
|
|
|
|
right: 20px;
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-card__body) {
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
/* 自定义 el-empty 的样式 */
|
|
|
|
|
|
:deep(.custom-empty) {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
height: 100%; /* 调整高度 */
|
|
|
|
|
|
padding: 20px; /* 调整内边距 */
|
|
|
|
|
|
.el-empty__image {
|
|
|
|
|
|
display: none; /* 隐藏默认图片 */
|
|
|
|
|
|
}
|
|
|
|
|
|
.el-empty__description {
|
|
|
|
|
|
font-size: 14px; /* 调整字体大小 */
|
|
|
|
|
|
color: var(--vxe-font-color);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
