Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
GGJ
2024-01-05 16:32:18 +08:00
parent 1d4bc5d442
commit 1fe43e1d70
7 changed files with 533 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/views/Event-boot/Region/components/Tableabove.vue Normal file
View File

@@ -0,0 +1,118 @@
<template>
<div>
<span style="font-size: 14px; font-weight: bold">
统计区域: 中国 &ensp; 统计时间: 2023-12-01-2023-12-27 &ensp; 统计次数: {{ frequency + '次' }}
</span>
<el-tabs tab-position="left" class="demo-tabs" style="margin-top: 10px">
<el-tab-pane label="区域">
<div class="default-main">
<vxe-table :data="areaData" v-bind="defaultAttribute" height="auto" auto-resize>
<vxe-column
v-for="item in tableHeaderAera"
:field="item.prop"
:title="item.label"
:min-width="item.width"
:sortable="item.sortable"
:formatter="formatter"
></vxe-column>
</vxe-table>
</div>
</el-tab-pane>
<el-tab-pane label="电压等级">
<div class="default-main">
<vxe-table :data="levelData" v-bind="defaultAttribute" height="auto" auto-resize>
<vxe-column
v-for="item in tableHeaderLevel"
:field="item.prop"
:title="item.label"
:min-width="item.width"
:sortable="item.sortable"
></vxe-column>
</vxe-table>
</div>
</el-tab-pane>
<el-tab-pane label="月份">
<div class="default-main">
<vxe-table :data="shareData" v-bind="defaultAttribute" height="auto" auto-resize>
<vxe-column field="month" title="月份" min-width="120px" sortable></vxe-column>
<vxe-column field="notAssociated" title="电压暂降次数" sortable></vxe-column>
</vxe-table>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, defineExpose, computed } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
const areaData:any = ref([])
const levelData:any = ref([])
const shareData:any = ref([])
const tableHeaderAera = ref<any[]>([
{ prop: 'areaName', label: '区域名称', width: '120px' },
{ prop: 'monitoringPoints', label: '监测点数', sortable: true },
{ prop: 'frequency', label: '电压暂降次数', sortable: true },
{ prop: 'sarfi9', label: 'SARFI-90', sortable: true }
])
const tableHeaderLevel = ref<any[]>([
{ prop: 'voltageLevel', label: '电压等级(kV)', width: '150px' },
{ prop: 'monitoringPoints', label: '监测点数' },
{ prop: 'frequency', label: '电压暂降次数' }
])
const frequency = ref<number>(875)
const info = (list: any) => {
frequency.value = list.areaStatistics.frequencySum
areaData.value = [
{
areaName: '总计',
monitoringPoints: list.areaStatistics.monitoringPointSum,
frequency: list.areaStatistics.frequencySum,
sarfi9: '/'
},
...list.areaStatistics.areaCalculation
]
levelData.value = [
{
voltageLevel: '总计',
monitoringPoints: list.voltageStatistics.monitoringPointSum,
frequency: list.voltageStatistics.frequencySum
},
...list.voltageStatistics.voltageLevelCalculation
]
let all = 0
list.monthlyStatistics.monthCalculation.forEach((item: any) => {
all += item.linked + item.notAssociated
})
shareData.value = [
{
month: '总计',
notAssociated: all.toFixed(2)
},
...list.monthlyStatistics.monthCalculation
]
}
const formatter = (row: any) => {
if (row.column.field == 'areaName') {
return (row.cellValue = row.cellValue.replace('\n', ''))
} else {
return row.cellValue
}
}
defineExpose({ info })
const layout = mainHeight(185) as any
const defaultMain = mainHeight(195) as any
</script>
<style lang="scss" scoped>
::v-deep(.el-tabs--left, ) {
height: v-bind('layout.height');
}
.default-main {
height: v-bind('defaultMain.height');
}
</style>

144
src/views/Event-boot/Region/components/TypeStatistics.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<span style="color: red; font-size: 12px">注:暂降类型仅统计暂降原因为短路故障事件</span>
<div class="statistics-main">
<template v-if="flag">
<div>
<my-echart :options="descent" />
</div>
<div>
<vxe-table height="auto" auto-resize :data="descentData" v-bind="defaultAttribute">
<vxe-column field="name" title="暂降原因"></vxe-column>
<vxe-column field="value" title="暂降次数"></vxe-column>
</vxe-table>
</div>
<div>
<my-echart :options="resemble" />
</div>
<div>
<vxe-table height="auto" auto-resize :data="resembleData" v-bind="defaultAttribute">
<vxe-column field="name" title="暂降原因"></vxe-column>
<vxe-column field="value" title="暂降次数"></vxe-column>
</vxe-table>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
const descent = ref({})
const descentData = ref([])
const resemble = ref({})
const resembleData = ref([])
const flag = ref(true)
const info = (res: any) => {
flag.value = false
descentData.value = res.reason
resembleData.value = res.type
descent.value = {
title: {
text: '暂降原因'
},
legend: {
type: 'scroll',
orient: 'vertical',
left: 10,
top: '5%',
tooltip: {
show: true
}
},
xAxis: {
show: false
},
yAxis: {
show: false
},
dataZoom: { show: false },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} (次)'
},
options: {
series: [
{
name: '暂降原因',
type: 'pie',
center: ['50%', '50%'],
selectedOffset: 30,
clockwise: true,
label: {
show: false,
position: 'outside',
textStyle: {
//数值样式
}
},
data: res.reason?.filter((item: any) => item.name != '总计')
}
]
}
}
resemble.value = {
title: {
text: '暂降类型'
},
legend: {
type: 'scroll',
orient: 'vertical',
left: 10,
top: '5%'
},
tooltip: {
formatter: '{a} <br/>{b} : {c} (次)',
confine: true
},
xAxis: {
show: false
},
yAxis: {
show: false
},
dataZoom: { show: false },
options: {
series: [
{
name: '暂降类型',
type: 'pie',
center: ['50%', '50%'],
selectedOffset: 30,
clockwise: true,
label: {
show: false,
position: 'outside'
},
data: res.type?.filter((item: any) => item.name != '总计')
}
]
}
}
flag.value = true
}
defineExpose({ info })
const layout = mainHeight(170) as any
</script>
<style lang="scss" scoped>
.statistics-main {
box-sizing: border-box;
height: v-bind('layout.height');
padding: 0 10px 10px;
display: grid;
grid-template-columns: 1fr 600px;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
}
</style>

293
src/views/Event-boot/Region/components/echart.vue Normal file
View File

@@ -0,0 +1,293 @@
<template>
<div>
<my-echart class="bars_w" :options="areaStatistics" />
<div class="separate">
<my-echart class="bars_w" :options="voltageStatistics" />
<my-echart class="bars_w" :options="monthlyStatistics" />
</div>
</div>
</template>
<script setup lang="ts">
import MyEchart from '@/components/echarts/MyEchart.vue'
import { reactive, ref, defineExpose } from 'vue'
import { mainHeight } from '@/utils/layout'
let areaStatistics = ref({})
let voltageStatistics = ref({})
let monthlyStatistics = ref({})
const Processing = (list: any) => {
// 区域
let echartsndArr: string[] = []
let echartsArr: string[] = []
list.areaCalculation.forEach((item: any) => {
echartsndArr.push(item.areaName)
if (item.frequency == 0) {
item.frequency = 1.1
} else if (item.frequency == 1) {
item.frequency = 1.3
}
echartsArr.push(item.frequency)
})
areaStatistics.value = {
title: {
text: '区域'
},
tooltip: {
formatter: function (params: any) {
let html = '区域：' + params[0].name
params.forEach((item: any) => {
if (item.value == 1.1) {
html += `<br/>${item.seriesName}: ${0}次`
} else if (item.value == 1.3) {
html += `<br/>${item.seriesName}: ${1}次`
} else {
html += `<br/>${item.seriesName}: ${item.value}次`
}
})
return html
}
},
legend: {
data: ['暂降次数']
},
xAxis: {
name: '区域', // 给X轴加单位
data: echartsndArr
},
yAxis: {
name: '次数' // 给X轴加单位
},
options: {
series: [
{
barMinHeight: 5,
barMaxWidth: 30,
itemStyle: {
normal: {
//这里是颜色
color: function (params: any) {
if (params.data == 1.1) {
return '#B3B3B3'
} else {
return '#07CCCA '
}
}
}
},
name: '暂降次数',
type: 'bar',
data: echartsArr
}
]
}
}
}
// 电压等级
const Grade = (list: any) => {
let echartsndArr: string[] = []
let echartsArr: string[] = []
list.voltageLevelCalculation.forEach((item: any) => {
echartsndArr.push(item.voltageLevel)
if (item.frequency == 0) {
item.frequency = 1.1
} else if (item.frequency == 1) {
item.frequency = 1.3
}
echartsArr.push(item.frequency)
})
voltageStatistics.value = {
title: {
text: '电压等级'
},
tooltip: {
formatter: function (params: any) {
let html = '电压等级：' + params[0].name
params.forEach((item: any) => {
if (item.value == 1.1) {
html += `<br/>${item.seriesName}: ${0}次`
} else if (item.value == 1.3) {
html += `<br/>${item.seriesName}: ${1}次`
} else {
html += `<br/>${item.seriesName}: ${item.value}次`
}
})
return html
}
},
legend: {
data: ['暂降次数']
},
xAxis: {
name: '电压等级',
data: echartsndArr
},
yAxis: {
name: '次数' // 给X轴加单位
},
options: {
series: [
{
barMaxWidth: 30,
barMinHeight: 5,
itemStyle: {
normal: {
//这里是颜色
color: function (params: any) {
if (params.data == 1.1) {
return '#B3B3B3'
} else {
return '#07CCCA '
}
}
}
// color: echartsColor.FigureColor[0],
},
name: '暂降次数',
type: 'bar',
data: echartsArr
}
]
}
}
}
//时间
const Relation = (list: any, interval: number) => {
let echartsndArr: string[] = []
let echartsArr: string[] = []
let echartswArr: string[] = []
list.monthCalculation.forEach((item: any, i: number) => {
if (i != 0) {
item.month = item.month.slice(5)
} else if (i == 0) {
let date = item.month.slice(5)
// let t = item.month.slice(0, 4);
// item.month = date + "\n" + "(" + t + ")";
item.month = date
}
echartsndArr.push(item.month)
// if (item.linked == 0 || item.notAssociated == 0) {
// item.linked = 3.14159;
// item.notAssociated = 3.14159;
// }
if (item.linked == 0) {
item.linked = 1.1
} else if (item.linked == 1) {
item.linked = 1.3
}
echartsArr.push(item.linked)
if (item.notAssociated == 0) {
item.notAssociated = 1.1
} else if (item.notAssociated == 1) {
item.notAssociated = 1.3
}
echartswArr.push(item.notAssociated)
})
monthlyStatistics.value = {
title: {
text: '时间'
},
tooltip: {
formatter: function (params: any) {
let html = '时间：' + params[0].name
params.forEach((item: any) => {
if (item.value == 1.1) {
html += `<br/>${item.seriesName}: ${0}次`
} else if (item.value == 1.3) {
html += `<br/>${item.seriesName}: ${1}次`
} else {
html += `<br/>${item.seriesName}: ${item.value}次`
}
})
return html
}
},
legend: {
data: ['未关联暂降次数', '已关联处理事件']
},
color: ['#07CCCA', '#Ff6600'],
xAxis: {
name: '月份', // 给X轴加单位
data: echartsndArr
},
yAxis: {
name: '次数' // 给X轴加单位
},
options: {
series: [
{
name: '未关联暂降次数',
type: 'bar',
barMaxWidth: 30,
barMinHeight: 5,
data: echartswArr,
itemStyle: {
normal: {
label: {
// show: true, //数字开启显示
textStyle: {
//数值样式
color: '#fff',
fontSize: 14,
fontWeight: 600
}
},
color: function (params: any) {
if (params.data == 1.1) {
return '#B3B3B3'
} else {
return '#07CCCA '
}
}
}
}
},
{
name: '已关联处理事件',
type: 'bar',
barMaxWidth: 30,
data: echartsArr,
itemStyle: {
normal: {
label: {
// show: true, //数字开启显示
textStyle: {
//数值样式
color: '#fff',
fontSize: 14,
fontWeight: 600
}
},
color: function (params: any) {
if (params.data == 1.1) {
return '#B3B3B3'
} else {
return '#Ff6600'
}
}
}
}
}
]
}
}
}
// Processing()
defineExpose({ Processing, Grade, Relation })
const layout = mainHeight(150) as any
</script>
<style lang="scss" scoped>
.bars_w {
width: 100%;
height: calc(v-bind('layout.height') / 2);
}
.separate {
display: flex;
}
</style>

72
src/views/Event-boot/Region/overview.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<div class="default-main">
<TableHeader date-picker>
<template v-slot:select>
<el-form-item label="区域">
<Area v-model="tableStore.table.params.deptIndex" />
</el-form-item>
</template>
</TableHeader>
<el-tabs v-model="activeName" type="border-card" v-loading="tableStore.table.loading">
<el-tab-pane label="图形" name="1">
<Echart :list="list" ref="echarts" />
</el-tab-pane>
<el-tab-pane label="表格" name="2"><Tableabove ref="table" /></el-tab-pane>
</el-tabs>
</div>
</template>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import Area from '@/components/form/area/index.vue'
import { useDictData } from '@/stores/dictData'
import Echart from './components/echart.vue'
import Tableabove from './components/Tableabove.vue'
import TableStore from '@/utils/tableStore'
import { onMounted, reactive, ref, provide } from 'vue'
import { mainHeight } from '@/utils/layout'
defineOptions({
name: 'Region/overview'
})
const activeName = ref('1')
const list = ref([])
const echarts = ref()
const Picker = ref()
const table = ref()
const dictData = useDictData()
const tableStore = new TableStore({
url: '/event-boot/areaStatistics/getAreaCalculation',
method: 'POST',
column: [],
loadCallback: () => {
list.value = tableStore.table.data
echarts.value.Processing(tableStore.table.data.areaStatistics)
echarts.value.Grade(tableStore.table.data.voltageStatistics)
echarts.value.Relation(tableStore.table.data.monthlyStatistics)
table.value.info(tableStore.table.data)
}
})
provide('tableStore', tableStore)
tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Load_Type'])[3]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.serverName = 'event-boot'
onMounted(() => {
tableStore.index()
})
const layout = mainHeight(123) as any
</script>
<style lang="scss" scoped>
.bars_w {
width: 100%;
height: 500px;
}
::v-deep(.el-tabs__content) {
height: v-bind('layout.height');
overflow-y: auto;
}
</style>

76
src/views/Event-boot/Region/statistics.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<div class="default-main">
<TableHeader date-picker>
<template v-slot:select>
<el-form-item label="区域">
<Area v-model="tableStore.table.params.deptIndex" />
</el-form-item>
</template>
</TableHeader>
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" v-loading="tableStore.table.loading">
<el-tab-pane label="暂降原因及类型统计" name="1">
<TypeStatistics ref="Statistics" />
</el-tab-pane>
<el-tab-pane label="电压容忍度曲线兼容性统计" name="2"></el-tab-pane>
</el-tabs>
</div>
</template>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import Area from '@/components/form/area/index.vue'
import { useDictData } from '@/stores/dictData'
import TableStore from '@/utils/tableStore'
import { onMounted, reactive, ref, provide } from 'vue'
import TypeStatistics from './components/TypeStatistics.vue'
import { mainHeight } from '@/utils/layout'
defineOptions({
name: 'Region/overview'
})
const activeName = ref('1')
const Statistics = ref()
const flag = ref(true)
const dictData = useDictData()
const tableStore = new TableStore({
url: '/event-boot/areaAnalysis/getEventReason',
method: 'POST',
column: [],
loadCallback: () => {
if (activeName.value == '1') {
Statistics.value.info(tableStore.table.data)
} else {
}
}
})
provide('tableStore', tableStore)
tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Load_Type'])[3]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.serverName = 'event-boot'
onMounted(() => {
tableStore.index()
})
const handleClick = async () => {
if (activeName.value == '1') {
tableStore.url = '/event-boot/areaAnalysis/getEventReason'
} else {
tableStore.url = '/event-boot/areaAnalysis/getVoltageToleranceCurve'
}
await tableStore.onTableAction('search', {})
}
const layout = mainHeight(123) as any
</script>
<style lang="scss" scoped>
.bars_w {
width: 100%;
height: 500px;
}
::v-deep(.el-tabs__content) {
height: v-bind('layout.height');
overflow-y: auto;
}
</style>