119 lines
4.3 KiB
Vue
119 lines
4.3 KiB
Vue
<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>
|