321 lines
11 KiB
Vue
321 lines
11 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.radio" class="group">
|
|||
|
|
<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>
|
|||
|
|
<vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
|
|||
|
|
<vxe-column field="qy" title="风电场 " show-overflow-tooltip></vxe-column>
|
|||
|
|
<vxe-column field="jcd" title="暂降发生时刻"></vxe-column>
|
|||
|
|
<vxe-column field="zc" title="暂降(骤升)幅值(%)" sortable></vxe-column>
|
|||
|
|
<vxe-column field="zc" title="暂降原因" sortable></vxe-column>
|
|||
|
|
<vxe-column field="zc" title="严重度" sortable></vxe-column>
|
|||
|
|
<vxe-column title="操作" >
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<el-button type="text" size="small" link>查看波形</el-button>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
</vxe-table>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card class="mt10">
|
|||
|
|
<div class="tall">
|
|||
|
|
<h3 class="mb10">暂降波形</h3>
|
|||
|
|
</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 { ref, onMounted, provide } from 'vue'
|
|||
|
|
import { mainHeight } from '@/utils/layout'
|
|||
|
|
defineOptions({
|
|||
|
|
name: 'highAndLowPressure'
|
|||
|
|
})
|
|||
|
|
const EchartMap = ref()
|
|||
|
|
const dictData = useDictData()
|
|||
|
|
const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
|||
|
|
const echartMapList: any = ref({})
|
|||
|
|
const titleA = ref('')
|
|||
|
|
const header = ref()
|
|||
|
|
const distributionData: any = ref([])
|
|||
|
|
|
|||
|
|
const tableStore = new TableStore({
|
|||
|
|
url: '/event-boot/area/getAreaLineDetail',
|
|||
|
|
method: 'POST',
|
|||
|
|
column: [],
|
|||
|
|
loadCallback: () => {
|
|||
|
|
titleA.value = tableStore.table.params.statisticalType.name
|
|||
|
|
header.value.areaRef.change()
|
|||
|
|
// 处理地图数据
|
|||
|
|
map(tableStore.table.data)
|
|||
|
|
tabulation(tableStore.table.data)
|
|||
|
|
EchartMap.value.GetEchar(header.value.areaRef.areaName)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
provide('tableStore', tableStore)
|
|||
|
|
tableStore.table.params.radio = '1'
|
|||
|
|
// tableStore.table.params.deptIndex = dictData.state.area[0].id
|
|||
|
|
tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
|
|||
|
|
tableStore.table.params.monitorFlag = 2
|
|||
|
|
tableStore.table.params.powerFlag = 2
|
|||
|
|
tableStore.table.params.serverName = 'event-boot'
|
|||
|
|
|
|||
|
|
// 地图点击事件
|
|||
|
|
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: '#fff',
|
|||
|
|
fontSize: 16,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
|
|||
|
|
backgroundColor: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data: [
|
|||
|
|
{ name: '目标数', field: 'mbs', unit: '万人' },
|
|||
|
|
{ name: '完成数', field: 'wcs', unit: '万人' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
options: {
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '低压',
|
|||
|
|
type: 'bar3D',
|
|||
|
|
coordinateSystem: 'geo3D',
|
|||
|
|
shading: 'lambert',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
formatter: params => {
|
|||
|
|
return params.value[2] || ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
adcode: 330100,
|
|||
|
|
name: '沈阳',
|
|||
|
|
wcs: 10,
|
|||
|
|
mbs: 50,
|
|||
|
|
wcl: 100,
|
|||
|
|
value: [123.364125, 41.722823, 50, '']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
adcode: 330200,
|
|||
|
|
name: '葫芦岛',
|
|||
|
|
wcs: 10,
|
|||
|
|
mbs: 20,
|
|||
|
|
wcl: 80,
|
|||
|
|
value: [120.80488, 40.816372, 20, '']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
adcode: 330300,
|
|||
|
|
name: '本溪',
|
|||
|
|
wcs: 10,
|
|||
|
|
mbs: 30,
|
|||
|
|
wcl: 100,
|
|||
|
|
value: [124.024811, 41.428257, 30, '']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
adcode: 330400,
|
|||
|
|
name: '大连',
|
|||
|
|
lng: '120.750865',
|
|||
|
|
lat: '30.662653',
|
|||
|
|
wcs: 10,
|
|||
|
|
mbs: 40,
|
|||
|
|
wcl: 100,
|
|||
|
|
value: [121.57391, 38.947468, 40, '']
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
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: [
|
|||
|
|
{
|
|||
|
|
adcode: 330100,
|
|||
|
|
name: '沈阳',
|
|||
|
|
wcs: 10,
|
|||
|
|
mbs: 50,
|
|||
|
|
wcl: 100,
|
|||
|
|
value: [123.464125, 41.722823, 50, '']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
adcode: 330200,
|
|||
|
|
name: '葫芦岛',
|
|||
|
|
wcs: 10,
|
|||
|
|
mbs: 20,
|
|||
|
|
wcl: 80,
|
|||
|
|
value: [120.90488, 40.816372, 20, '']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
adcode: 330300,
|
|||
|
|
name: '本溪',
|
|||
|
|
wcs: 10,
|
|||
|
|
mbs: 30,
|
|||
|
|
wcl: 100,
|
|||
|
|
value: [124.124811, 41.428257, 30, '']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
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 tabulation = (res: any) => {
|
|||
|
|
distributionData.value = []
|
|||
|
|
for (var i = 0; i < res.areaValue.length; i++) {
|
|||
|
|
distributionData.value.push({
|
|||
|
|
qy: res.areaValue[i][0],
|
|||
|
|
jcd: res.areaValue[i][1],
|
|||
|
|
zc: res.areaValue[i][2],
|
|||
|
|
zd: res.areaValue[i][3]
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 点击地图
|
|||
|
|
const clickMap = (e: any) => {
|
|||
|
|
console.log('🚀 ~ clickMap ~ e:', e)
|
|||
|
|
}
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
.group {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 15px;
|
|||
|
|
right: 20px;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-card__body) {
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|