367 lines
12 KiB
Vue
367 lines
12 KiB
Vue
<template>
|
||
<div class="default-main">
|
||
<TableHeader datePicker 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>
|
||
<div class="tall">
|
||
<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="新能源站名称"
|
||
show-overflow-tooltip
|
||
></vxe-column>
|
||
<vxe-column field="startTime" title="暂降发生时刻"></vxe-column>
|
||
<vxe-column
|
||
field="featureAmplitude"
|
||
title="暂降(骤升)幅值(%)"
|
||
sortable
|
||
></vxe-column>
|
||
<vxe-column
|
||
field="advanceReason"
|
||
title="暂降原因"
|
||
sortable
|
||
:formatter="formFilter"
|
||
></vxe-column>
|
||
<vxe-column field="severity" title="严重度" sortable></vxe-column>
|
||
<vxe-column title="操作">
|
||
<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>
|
||
</div>
|
||
</el-card>
|
||
<el-card class="mt10">
|
||
<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>
|
||
</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'
|
||
defineOptions({
|
||
name: 'newEnergy/highAndLowPressure'
|
||
})
|
||
const EchartMap = ref()
|
||
const dictData = useDictData()
|
||
const reason = dictData.getBasicData('Event_Reason')
|
||
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, 4).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
|
||
},
|
||
label: {
|
||
show: true,
|
||
color: '#000',
|
||
fontSize: 14,
|
||
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.map((item: any) => {
|
||
return {
|
||
...item,
|
||
value: [item.lng, item.lat, item.lowPressure]
|
||
}
|
||
}),
|
||
// data:[],
|
||
barSize: 1,
|
||
minHeight: 1,
|
||
itemStyle: {
|
||
color: '#77DA63'
|
||
},
|
||
emphasis: {
|
||
label: { show: true }
|
||
},
|
||
zlevel: 1
|
||
},
|
||
{
|
||
name: '高压',
|
||
type: 'bar3D',
|
||
coordinateSystem: 'geo3D',
|
||
shading: 'lambert',
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: params => {
|
||
return params.value[2] || ''
|
||
}
|
||
},
|
||
|
||
data: res.map((item: any) => {
|
||
return {
|
||
...item,
|
||
value: [item.lng - 0.07, item.lat, item.highPressure]
|
||
}
|
||
}),
|
||
// [
|
||
|
||
// {
|
||
// 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) => {
|
||
loading.value = true
|
||
voltageRideThroughEventQueryPage({
|
||
...tableStore.table.params,
|
||
areaId: e.data.id,
|
||
frequencyType: e.seriesName == '高压' ? 1 : 2
|
||
})
|
||
.then(res => {
|
||
distributionData.value = res.data
|
||
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') - 60px) / 2);
|
||
}
|
||
.tall1 {
|
||
height: calc((v-bind('layout1.height') - 60px) / 2 - 35px);
|
||
}
|
||
|
||
.group {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 20px;
|
||
z-index: 10;
|
||
}
|
||
|
||
:deep(.el-card__body) {
|
||
padding: 10px;
|
||
}
|
||
</style>
|