提交

2024-01-05 16:32:18 +08:00
parent 1d4bc5d442
commit 1fe43e1d70
7 changed files with 533 additions and 229 deletions
--- a/src/views/Event-boot/Region/components/Tableabove.vue
+++ b/src/views/Event-boot/Region/components/Tableabove.vue
@@ -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>