完成 电压暂降热力图 严重度 页面迁移
This commit is contained in:
@@ -377,7 +377,7 @@ const rendering = (row: any) => {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['50%', '50%'],
|
||||
center: ['50%', '60%'],
|
||||
radius: ['35%', '48%'],
|
||||
label: {
|
||||
normal: {
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
</el-tabs>
|
||||
<div class="bottomBox">
|
||||
<el-row v-if="showAssess">
|
||||
<el-col :span="16" :style="`height: calc(${tabsHeight} / 2 - 107px)`">
|
||||
<el-col :span="16" :style="`height: calc(${tabsHeight} / 2 - 57px)`">
|
||||
<vxe-table
|
||||
style="flex: 1.5"
|
||||
v-bind="defaultAttribute"
|
||||
@@ -112,7 +112,7 @@
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</el-col>
|
||||
<el-col :span="8" :style="`height: calc(${tabsHeight} / 2 - 100px)`">
|
||||
<el-col :span="8" :style="`height: calc(${tabsHeight} / 2 - 107px)`">
|
||||
<MyEChart style="flex: 1" :options="pieCharts" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -241,12 +241,7 @@ const info = () => {
|
||||
}).then(res => {
|
||||
userList.value = res.data.records
|
||||
user.value = userList.value[0] || {}
|
||||
console.log('🚀 ~ info ~ res.data.records:', res.data.records)
|
||||
|
||||
console.log('🚀 ~ info ~ user.value:', user.value)
|
||||
|
||||
userData.value = res.data.records[0] || {}
|
||||
console.log('🚀 ~ info ~ userData.value:', userData.value)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -326,7 +321,6 @@ const setEChart = (val: any, data: any, text: string, name: string) => {
|
||||
xAxis: {
|
||||
data: data.filter(item => item.phaseType == 'A').map(item => item.time),
|
||||
name: '时间',
|
||||
onZero: false,
|
||||
position: 'bottom' // 设置 x 轴在底部
|
||||
},
|
||||
yAxis: {
|
||||
@@ -454,7 +448,7 @@ const rendering = (data: any) => {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['50%', '50%'],
|
||||
center: ['50%', '60%'],
|
||||
radius: ['35%', '48%'],
|
||||
label: {
|
||||
normal: {
|
||||
|
||||
185
src/views/pqs/voltageSags/Region/severity/index.vue
Normal file
185
src/views/pqs/voltageSags/Region/severity/index.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader area date-picker ref="header" />
|
||||
<div v-loading="tableStore.table.loading" class="pr10">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<MyEchartMap
|
||||
ref="EchartMap"
|
||||
:options="echartMapList"
|
||||
class="map"
|
||||
@eliminate="eliminate"
|
||||
@getRegionByRegion="getRegionByRegion"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<my-echart class="tall" :options="echartList" />
|
||||
<div class="tall">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
auto-resize
|
||||
:data="tableStore.table.data.param"
|
||||
v-bind="defaultAttribute"
|
||||
>
|
||||
<vxe-column field="name" title="区域"></vxe-column>
|
||||
<vxe-column field="count" title="暂降次数"></vxe-column>
|
||||
<vxe-column field="size" title="监测点个数"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</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 MyEchartMap from '@/components/echarts/MyEchartMap.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
defineOptions({
|
||||
name: 'Region/sagSeverity'
|
||||
})
|
||||
const EchartMap = ref()
|
||||
const dictData = useDictData()
|
||||
const echartMapList: any = ref({})
|
||||
const echartList = ref({})
|
||||
const header = ref()
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/event-boot/largeScreen/getAreaDownStatistics',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
beforeSearchFun: () => {},
|
||||
loadCallback: () => {
|
||||
header.value.areaRef.change()
|
||||
let allData: any = []
|
||||
tableStore.table.data.param.forEach(item => {
|
||||
allData.push({
|
||||
name: item.name,
|
||||
value: item.count
|
||||
})
|
||||
})
|
||||
|
||||
map(allData)
|
||||
histogram(allData)
|
||||
EchartMap.value.GetEchar(header.value.areaRef.areaName)
|
||||
}
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
// 地图点击事件
|
||||
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 = {
|
||||
name: '',
|
||||
title: {
|
||||
text: '区域暂降次数统计'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params) {
|
||||
var tips = ''
|
||||
if (params.color != undefined) {
|
||||
tips += params.name + '</br/>'
|
||||
tips += '暂降次数' + ':' + params.value + '次' + '<br/>'
|
||||
} else if (params.color == undefined) {
|
||||
tips += params.name + '</br/>'
|
||||
tips += '暂降次数' + ':' + '暂无数据' + '<br/>'
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
left: 26,
|
||||
bottom: 40,
|
||||
show: true,
|
||||
inRange: {
|
||||
color: ['#ccc', '#07CCCA ']
|
||||
},
|
||||
min: 0,
|
||||
max: res.reduce((max, obj) => Math.max(max, obj.value), 0),
|
||||
calculable: true,
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
coordinateSystem: 'geo',
|
||||
geoIndex: 0,
|
||||
animation: false, //坐标点是否显示动画
|
||||
roam: true,
|
||||
selectedMode: 'false', //是否允许选中多个区域
|
||||
symbol: 'pin',
|
||||
rippleEffect: {
|
||||
brushType: 'fill' // stroke|fill
|
||||
},
|
||||
data: res
|
||||
// 鼠标移入
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 柱状图数据处理
|
||||
const histogram = (res: any) => {
|
||||
echartList.value = {
|
||||
title: {
|
||||
text: '区域暂降次数'
|
||||
},
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
data: res.map((item: any) => item.name)
|
||||
},
|
||||
yAxis: {
|
||||
name: '暂降次数'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '暂降次数',
|
||||
type: 'bar',
|
||||
data: res
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 10)
|
||||
})
|
||||
const layout = mainHeight(83) as any
|
||||
const layout1 = mainHeight(93) as any
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
height: v-bind('layout.height');
|
||||
}
|
||||
.tall {
|
||||
height: calc(v-bind('layout1.height') / 2);
|
||||
}
|
||||
</style>
|
||||
@@ -15,23 +15,16 @@
|
||||
<el-col :span="12">
|
||||
<my-echart class="tall" :options="echartList" />
|
||||
<div class="tall">
|
||||
<vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
auto-resize
|
||||
:data="list"
|
||||
v-bind="defaultAttribute"
|
||||
>
|
||||
<vxe-column field="areaName" title=" 区域" show-overflow-tooltip></vxe-column>
|
||||
<vxe-column field="ci" title="区域暂降评估">
|
||||
<template #default="{ row }">
|
||||
{{ row.ci == 0.05 ? '暂无数据' : row.ci.toFixed(2) }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column sortable field="isCount" title="等级">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.ci == 0.05">暂无等级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 0.2 && row.ci < 0.4">1级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 0.4 && row.ci < 0.8">2级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 0.8 && row.ci < 1.2">3级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 1.2">4级</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="gdName" title="供电公司"></vxe-column>
|
||||
<vxe-column field="subName" title="变电站"></vxe-column>
|
||||
<vxe-column field="lineName" title="监测点"></vxe-column>
|
||||
<vxe-column field="tail" title="暂降次数"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-col>
|
||||
@@ -49,14 +42,13 @@ import { ref, onMounted, provide } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
defineOptions({
|
||||
name: 'Region/distribution'
|
||||
name: 'Region/thermodynamicDiagram'
|
||||
})
|
||||
const EchartMap = ref()
|
||||
const dictData = useDictData()
|
||||
const echartMapList: any = ref({})
|
||||
const echartList = ref({})
|
||||
const header = ref()
|
||||
const distributionData: any = ref([])
|
||||
const list: any = ref([])
|
||||
const geoCoordMap: any = ref([])
|
||||
|
||||
@@ -66,6 +58,7 @@ const tableStore = new TableStore({
|
||||
column: [],
|
||||
beforeSearchFun: () => {},
|
||||
loadCallback: () => {
|
||||
geoCoordMap.value = []
|
||||
header.value.areaRef.change()
|
||||
// 处理地图数据
|
||||
tableStore.table.data.eventHeatMapValue.forEach(val => {
|
||||
@@ -74,9 +67,9 @@ const tableStore = new TableStore({
|
||||
geoCoordMap.value.push([item.lng, item.lat, item.tail])
|
||||
})
|
||||
})
|
||||
map(tableStore.table.data)
|
||||
// tabulation(tableStore.table.data)
|
||||
// histogram(tableStore.table.data)
|
||||
|
||||
map(geoCoordMap.value)
|
||||
histogram(tableStore.table.data.areaValue)
|
||||
EchartMap.value.GetEchar(header.value.areaRef.areaName)
|
||||
}
|
||||
})
|
||||
@@ -103,11 +96,9 @@ const eliminate = (name: string) => {
|
||||
const map = (res: any) => {
|
||||
let areaData: any = []
|
||||
|
||||
if (geoCoordMap.value.lengt > 0) {
|
||||
geoCoordMap.value.map(item => {
|
||||
res.map(item => {
|
||||
areaData.push(...new Array(3).fill(item))
|
||||
})
|
||||
}
|
||||
let maxNum = 0
|
||||
let minNum = 0
|
||||
let num: any = []
|
||||
@@ -154,7 +145,7 @@ const map = (res: any) => {
|
||||
width: '65%',
|
||||
height: '95%',
|
||||
|
||||
name: 'AQI',
|
||||
// name: 'AQI',
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'geo',
|
||||
blurSize: 40,
|
||||
@@ -166,168 +157,25 @@ const map = (res: any) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 表格数据处理
|
||||
const tabulation = (res: any) => {
|
||||
distributionData.value = res
|
||||
distributionData.value.forEach((item: any) => {
|
||||
if (item.ci == 0) {
|
||||
item.ci = 0.05
|
||||
}
|
||||
})
|
||||
}
|
||||
// 柱状图数据处理
|
||||
const histogram = (res: any) => {
|
||||
echartList.value = {
|
||||
title: {
|
||||
text: header.value.areaRef.areaName
|
||||
text: '区域暂降次数'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 0.05) {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '评估值:0'
|
||||
} else {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '评估值:' + params[i].value
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
|
||||
data: res.map((item: any) => item.areaName)
|
||||
data: res.map((item: any) => item.name)
|
||||
},
|
||||
yAxis: {
|
||||
name: ' 等级',
|
||||
min: 0,
|
||||
max: 2,
|
||||
// minInterval: 0.2,
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
// interval: 4,
|
||||
formatter: function (value: any) {
|
||||
var texts = ''
|
||||
if (value === 0.4) {
|
||||
texts = '1级'
|
||||
} else if (value === 0.8) {
|
||||
texts = '2级'
|
||||
} else if (value === 1.2) {
|
||||
texts = '3级'
|
||||
} else if (value === 2) {
|
||||
texts = '4级'
|
||||
}
|
||||
return texts
|
||||
}
|
||||
}
|
||||
name: '暂降次数'
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
//
|
||||
{
|
||||
name: '',
|
||||
data: res.map((item: any) => {
|
||||
if (item.ci == 0) {
|
||||
return (item.ci = 0.05)
|
||||
}
|
||||
return item.ci.toFixed(2)
|
||||
}),
|
||||
|
||||
barMaxWidth: 30,
|
||||
barMinHeight: 1,
|
||||
name: '暂降次数',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params: any) {
|
||||
if (params.value > 2 && params.value !== 0.05) {
|
||||
return '#339966'
|
||||
} else if (0.8 < params.value && params.value <= 1.2 && params.value !== 0.05) {
|
||||
return '#3399FF'
|
||||
} else if (0.4 < params.value && params.value <= 0.8 && params.value !== 0.05) {
|
||||
return '#FF9900'
|
||||
} else if (0 < params.value && params.value <= 0.4 && params.value !== 0.05) {
|
||||
return '#CC0000'
|
||||
} else if (params.value == 0.05) {
|
||||
return '#CC0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
width: 1
|
||||
},
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 0.4,
|
||||
lineStyle: {
|
||||
color: '#CC0000'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#CC0000'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 0.8,
|
||||
lineStyle: {
|
||||
color: '#FF9900'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FF9900'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 1.2,
|
||||
lineStyle: {
|
||||
color: '#3399FF'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#3399FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 2,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
data: res.map((item: any) => item.count)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -63,7 +63,7 @@ import { ref, onMounted, provide } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
defineOptions({
|
||||
name: 'Region/distribution'
|
||||
name: 'Region/transientassessment'
|
||||
})
|
||||
const EchartMap = ref()
|
||||
const dictData = useDictData()
|
||||
|
||||
Reference in New Issue
Block a user