表格

src/views/dashboard/components/Tableabove.vue

@@ -0,0 +1,113 @@
+<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="区域">
+                <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>

src/views/dashboard/index.vue

@@ -1,31 +1,35 @@
 <template>
-    <el-form :inline="true" :model="formInline" class="demo-form-inline">
-        <el-form-item label="区域">
-            <el-input v-model="formInline.deptInd" placeholder="请选择区域" clearable />
-        </el-form-item>
-        <el-form-item label="时间">
-            <el-date-picker v-model="formInline.searchBeginTime" type="date" placeholder="请选择时间" />
-        </el-form-item>
-        <el-form-item>
-            <el-button type="primary" @click="onSubmit">查询</el-button>
-        </el-form-item>
-    </el-form>
-    <el-tabs v-model="activeName" type="border-card">
-        <el-tab-pane label="图形" name="1">
-            <Echart :list="list" ref="echarts" />
-        </el-tab-pane>
-        <el-tab-pane label="表格" name="2">Config</el-tab-pane>
-    </el-tabs>
+    <div class="default-main">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-form-item label="区域">
+                <el-input v-model="formInline.deptInd" placeholder="请选择区域" clearable />
+            </el-form-item>
+            <el-form-item label="时间">
+                <el-date-picker v-model="formInline.searchBeginTime" type="date" placeholder="请选择时间" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">查询</el-button>
+            </el-form-item>
+        </el-form>
+        <el-tabs v-model="activeName" type="border-card">
+            <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 { onMounted, reactive, ref, onBeforeMount } from 'vue'
 const activeName = ref('1')
 import Echart from '@/views/dashboard/components/echart.vue'
+import Tableabove from '@/views/dashboard/components/Tableabove.vue'
 
 import { getAreaCalculation } from '@/api/test'
 const list = ref([])
 const echarts = ref()
+const table = ref()
 const formInline = reactive({
     deptInd: '',
     deptIndex: '5699e5916a18a6381e1ac92da5bd2628',
@@ -52,6 +56,7 @@ const onSubmit = async () => {
         echarts.value.Processing(res.data.areaStatistics)
         echarts.value.Grade(res.data.voltageStatistics)
         echarts.value.Relation(res.data.monthlyStatistics)
+        table.value.info(res.data)
     })
 }