114 lines
4.3 KiB
Vue
114 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="区域">
|
||
|
|
<el-table :data="areaData" border height="calc(100vh - 220px)" stripe style="width: 100%">
|
||
|
|
<template v-for="item in tableHeaderAera">
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
:prop="item.prop"
|
||
|
|
:label="item.label"
|
||
|
|
:min-width="item.width"
|
||
|
|
:sortable="item.sortable"
|
||
|
|
></el-table-column>
|
||
|
|
</template>
|
||
|
|
</el-table>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="电压等级">
|
||
|
|
<el-table :data="levelData" border height="calc(100vh - 220px)" stripe style="width: 100%">
|
||
|
|
<template v-for="item in tableHeaderLevel">
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
:prop="item.prop"
|
||
|
|
:label="item.label"
|
||
|
|
:min-width="item.width"
|
||
|
|
:sortable="item.sortable"
|
||
|
|
></el-table-column>
|
||
|
|
</template>
|
||
|
|
</el-table>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="月份">
|
||
|
|
<el-table :data="shareData" border height="calc(100vh - 220px)" stripe style="width: 100%">
|
||
|
|
<el-table-column
|
||
|
|
prop="month"
|
||
|
|
label="月份"
|
||
|
|
align="center"
|
||
|
|
min-width="120px"
|
||
|
|
sortable
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column prop="notAssociated" align="center" label="电压暂降次数" sortable>
|
||
|
|
<!-- <template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.month != '总计'">
|
||
|
|
{{ scope.row.linked + scope.row.notAssociated }}
|
||
|
|
</span>
|
||
|
|
<span v-else>{{ scope.row.notAssociated }}</span>
|
||
|
|
</template> -->
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, reactive, defineExpose } from 'vue'
|
||
|
|
const tableData = ref<any[]>([])
|
||
|
|
const areaData = ref<any[]>([])
|
||
|
|
const levelData = ref<any[]>([])
|
||
|
|
const shareData = ref<any[]>([])
|
||
|
|
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
|
||
|
|
},
|
||
|
|
...list.monthlyStatistics.monthCalculation
|
||
|
|
]
|
||
|
|
}
|
||
|
|
defineExpose({ info })
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
::v-deep(.el-tabs--left) {
|
||
|
|
height: calc(100vh - 220px);
|
||
|
|
}
|
||
|
|
</style>
|