提交
This commit is contained in:
@@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<span style="font-size: 14px; font-weight: bold">
|
||||
统计区域: 中国   统计时间: 2023-12-01-2023-12-27   统计次数: {{ 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>
|
||||
@@ -1,297 +0,0 @@
|
||||
<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) {
|
||||
// console.log(params);
|
||||
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) {
|
||||
// console.log(params);
|
||||
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) {
|
||||
// console.log(params,'1111111111111111111111');
|
||||
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) {
|
||||
// console.log(params,'1111111111111111111111');
|
||||
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>
|
||||
Reference in New Issue
Block a user