优化波形
This commit is contained in:
guanj
@@ -1,423 +1,423 @@
|
||||
<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="150px"></vxe-column>
|
||||
<vxe-column
|
||||
field="featureAmplitude"
|
||||
title="暂降(骤升)幅值(%)"
|
||||
sortable
|
||||
min-width="150px"
|
||||
></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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user