From 1fe43e1d70951dd27345b5c5437f9b21e1d01725 Mon Sep 17 00:00:00 2001
From: GGJ <357021191@qq.com>
Date: Fri, 5 Jan 2024 16:32:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/echarts/MyEchart.vue           |  14 +-
 src/layouts/admin/index.vue                   | 452 +++++++++---------
 .../Region}/components/Tableabove.vue         |   0
 .../Region/components/TypeStatistics.vue      | 144 ++++++
 .../Region}/components/echart.vue             |   4 -
 src/views/Event-boot/Region/overview.vue      |  72 +++
 src/views/Event-boot/Region/statistics.vue    |  76 +++
 7 files changed, 533 insertions(+), 229 deletions(-)
 rename src/views/{dashboard => Event-boot/Region}/components/Tableabove.vue (100%)
 create mode 100644 src/views/Event-boot/Region/components/TypeStatistics.vue
 rename src/views/{dashboard => Event-boot/Region}/components/echart.vue (97%)
 create mode 100644 src/views/Event-boot/Region/overview.vue
 create mode 100644 src/views/Event-boot/Region/statistics.vue

diff --git a/src/components/echarts/MyEchart.vue b/src/components/echarts/MyEchart.vue
index 343a3a7..61d2e90 100644
--- a/src/components/echarts/MyEchart.vue
+++ b/src/components/echarts/MyEchart.vue
@@ -11,10 +11,10 @@ const chartRef = ref<HTMLDivElement>()
 const props = defineProps(['options'])
 let chart: echarts.ECharts | any = null
 const resizeHandler = () => {
-    chart.getZr().painter.getViewportRoot().style.display =  "none";
+    chart.getZr().painter.getViewportRoot().style.display = 'none'
     requestAnimationFrame(() => {
         chart.resize()
-        chart.getZr().painter.getViewportRoot().style.display =  "";
+        chart.getZr().painter.getViewportRoot().style.display = ''
     })
 }
 const initChart = () => {
@@ -28,7 +28,7 @@ const initChart = () => {
                 color: '#000',
                 fontSize: 18
             },
-            ...props.options.title
+            ...(props.options.title || null)
         },
         tooltip: {
             trigger: 'axis',
@@ -116,7 +116,7 @@ const initChart = () => {
                         opacity: 0.5
                     }
                 },
-                ...(props.options.yAxis || null),
+                ...(props.options.yAxis || null)
             }
         ],
         dataZoom: [
@@ -125,13 +125,15 @@ const initChart = () => {
                 height: 13,
                 start: 0,
                 bottom: '20px',
-                end: 100
+                end: 100,
+                ...(props.options.dataZoom || null)
             },
             {
                 start: 0,
                 height: 13,
                 bottom: '20px',
-                end: 100
+                end: 100,
+                ...(props.options.dataZoom|| null)
             }
         ],
         color: [
diff --git a/src/layouts/admin/index.vue b/src/layouts/admin/index.vue
index 4232e39..e893f78 100644
--- a/src/layouts/admin/index.vue
+++ b/src/layouts/admin/index.vue
@@ -1,8 +1,8 @@
 <template>
-    <component :is='config.layout.layoutMode'></component>
+    <component :is="config.layout.layoutMode"></component>
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
 import { reactive } from 'vue'
 import { useConfig } from '@/stores/config'
 import { useNavTabs } from '@/stores/navTabs'
@@ -58,226 +58,240 @@ const init = async () => {
      * 后台初始化请求，获取站点配置，动态路由等信息
      */
     getRouteMenu().then((res: any) => {
-        // const arr = [
-        //     {
-        //         id: 1,
-        //         pid: 0,
-        //         type: 'menu',
-        //         title: '控制台',
-        //         name: 'dashboard',
-        //         path: 'dashboard',
-        //         icon: 'fa fa-dashboard',
-        //         menu_type: 'tab',
-        //         url: '',
-        //         component: '/src/views/dashboard/index.vue',
-        //         keepalive: 'dashboard',
-        //         extend: 'none',
-        //         children: []
-        //     },
-        //     {
-        //         id: 3,
-        //         pid: 0,
-        //         type: 'menu',
-        //         title: '审计管理',
-        //         name: 'test',
-        //         path: 'test',
-        //         icon: 'el-icon-List',
-        //         menu_type: 'tab',
-        //         url: '',
-        //         component: '/src/views/dashboard/test.vue',
-        //         keepalive: 'test',
-        //         extend: 'none',
-        //         children: [
-        //             {
-        //                 id: 1,
-        //                 pid: 3,
-        //                 type: 'menu',
-        //                 title: '审计列表',
-        //                 name: 'comptroller/list',
-        //                 path: 'comptroller/list',
-        //                 icon: 'el-icon-List',
-        //                 menu_type: 'tab',
-        //                 url: '',
-        //                 component: '/src/views/comptroller/list.vue',
-        //                 keepalive: 'auth/role',
-        //                 extend: 'none',
-        //                 children: []
-        //             }
-        //         ]
-        //     },
-        //     {
-        //         id: 3,
-        //         pid: 0,
-        //         type: 'menu_dir',
-        //         title: '电压暂降',
-        //         name: 'voltage/sags',
-        //         path: 'voltage/sags',
-        //         icon: 'el-icon-BellFilled',
-        //         menu_type: 'tab',
-        //         url: '',
-        //         extend: 'none',
-        //         children: [
-        //             {
-        //                 id: 1,
-        //                 pid: 3,
-        //                 type: 'menu_dir',
-        //                 title: '运行管理',
-        //                 name: 'voltage/sags/operationsManagement',
-        //                 path: 'voltage/sags/operationsManagement',
-        //                 icon: 'fa-solid fa-bars-progress',
-        //                 menu_type: 'tab',
-        //                 url: '',
-        //                 extend: 'none',
-        //                 children: [
-        //                     {
-        //                         id: 1,
-        //                         pid: 3,
-        //                         type: 'menu',
-        //                         title: '终端运行管理',
-        //                         name: 'voltage/sags/operationsManagement/index',
-        //                         path: 'voltage/sags/operationsManagement/index',
-        //                         icon: 'fa-solid fa-recycle',
-        //                         menu_type: 'tab',
-        //                         url: '',
-        //                         component: '/src/views/voltage/sags/operationsManagement/index.vue',
-        //                         keepalive: 'voltage/sags/operationsManagement/index',
-        //                         extend: 'none',
-        //                         children: []
-        //                     },
-        //                     {
-        //                         id: 1,
-        //                         pid: 3,
-        //                         type: 'menu',
-        //                         title: '终端运行统计',
-        //                         name: 'voltage/sags/operationsManagement/statistics',
-        //                         path: 'voltage/sags/operationsManagement/statistics',
-        //                         icon: 'fa-solid fa-chart-column',
-        //                         menu_type: 'tab',
-        //                         url: '',
-        //                         component: '/src/views/voltage/sags/operationsManagement/statistics.vue',
-        //                         keepalive: 'voltage/sags/operationsManagement/statistics',
-        //                         extend: 'none',
-        //                         children: []
-        //                     },
-        //                     {
-        //                         id: 1,
-        //                         pid: 3,
-        //                         type: 'menu',
-        //                         title: '监测点台账信息',
-        //                         name: 'voltage/sags/operationsManagement/point',
-        //                         path: 'voltage/sags/operationsManagement/point',
-        //                         icon: 'fa-brands fa-square-pinterest',
-        //                         menu_type: 'tab',
-        //                         url: '',
-        //                         component: '/src/views/voltage/sags/operationsManagement/point.vue',
-        //                         keepalive: 'voltage/sags/operationsManagement/point',
-        //                         extend: 'none',
-        //                         children: []
-        //                     }
-        //                 ]
-        //             },
-        //             {
-        //                 id: 2,
-        //                 pid: 3,
-        //                 type: 'menu',
-        //                 title: '区域',
-        //                 name: 'Event-boot/Region/distribution',
-        //                 path: 'Event-boot/Region/distribution',
-        //                 icon: 'el-icon-Management',
-        //                 menu_type: 'tab',
-        //                 url: '',
-        //                 component: '/src/views/Event-boot/Region/distribution.vue',
-        //                 keepalive: 'Event-boot/Region/distribution',
-        //                 extend: 'none',
-        //                 children: [
-        //                     {
-        //                         id: 2,
-        //                         pid: 3,
-        //                         type: 'menu',
-        //                         title: '区域概览',
-        //                         name: 'Region/overview',
-        //                         path: 'Region/overview',
-        //                         icon: 'el-icon-Promotion',
-        //                         menu_type: 'tab',
-        //                         url: '',
-        //                         component: '/src/views/dashboard/index.vue',
-        //                         keepalive: 'Region/overview',
-        //                         extend: 'none',
-        //                         children: []
-        //                     },
-        //                     {
-        //                         id: 1,
-        //                         pid: 3,
-        //                         type: 'menu',
-        //                         title: '监测网分布',
-        //                         name: 'Region/distribution',
-        //                         path: 'Region/distribution',
-        //                         icon: 'el-icon-Share',
-        //                         menu_type: 'tab',
-        //                         url: '',
-        //                         component: '/src/views/Event-boot/Region/distribution.vue',
-        //                         keepalive: 'Region/distribution',
-        //                         extend: 'none',
-        //                         children: []
-        //                     }
-        //                 ]
-        //             }
-        //         ]
-        //     },
-        //     {
-        //         id: 2,
-        //         pid: 0,
-        //         type: 'menu_dir',
-        //         title: '权限管理',
-        //         name: 'auth',
-        //         path: 'auth',
-        //         icon: 'fa-solid fa-layer-group',
-        //         menu_type: null,
-        //         url: '',
-        //         component: '',
-        //         keepalive: 0,
-        //         extend: 'none',
-        //         children: [
-        //             {
-        //                 id: 3,
-        //                 pid: 2,
-        //                 type: 'menu',
-        //                 title: '角色管理',
-        //                 name: 'auth/role',
-        //                 path: 'auth/role',
-        //                 icon: 'el-icon-Avatar',
-        //                 menu_type: 'tab',
-        //                 url: '',
-        //                 component: '/src/views/auth/role/index.vue',
-        //                 keepalive: 'auth/role',
-        //                 extend: 'none',
-        //                 children: []
-        //             },
-        //             {
-        //                 id: 13,
-        //                 pid: 2,
-        //                 type: 'menu',
-        //                 title: '菜单规则管理',
-        //                 name: 'auth/menu',
-        //                 path: 'auth/menu',
-        //                 icon: 'el-icon-Menu',
-        //                 menu_type: 'tab',
-        //                 url: '',
-        //                 component: '/src/views/auth/menu/index.vue',
-        //                 keepalive: 'auth/menu',
-        //                 extend: 'none',
-        //                 children: []
-        //             }
-        //         ]
-        //     }
-        // ]
+        const arr = [
+            {
+                id: 1,
+                pid: 0,
+                type: 'menu',
+                title: '控制台',
+                name: 'dashboard',
+                path: 'dashboard',
+                icon: 'fa fa-dashboard',
+                menu_type: 'tab',
+                url: '',
+                component: '/src/views/Event-boot/Region/overview.vue',
+                keepalive: 'dashboard',
+                extend: 'none',
+                children: []
+            },
+            {
+                id: 3,
+                pid: 0,
+                type: 'menu',
+                title: '审计管理',
+                name: 'test',
+                path: 'test',
+                icon: 'el-icon-List',
+                menu_type: 'tab',
+                url: '',
+                component: '/src/views/dashboard/test.vue',
+                keepalive: 'test',
+                extend: 'none',
+                children: [
+                    {
+                        id: 1,
+                        pid: 3,
+                        type: 'menu',
+                        title: '审计列表',
+                        name: 'comptroller/list',
+                        path: 'comptroller/list',
+                        icon: 'el-icon-List',
+                        menu_type: 'tab',
+                        url: '',
+                        component: '/src/views/comptroller/list.vue',
+                        keepalive: 'auth/role',
+                        extend: 'none',
+                        children: []
+                    }
+                ]
+            },
+            {
+                id: 3,
+                pid: 0,
+                type: 'menu_dir',
+                title: '电压暂降',
+                name: 'voltage/sags',
+                path: 'voltage/sags',
+                icon: 'el-icon-BellFilled',
+                menu_type: 'tab',
+                url: '',
+                extend: 'none',
+                children: [
+                    {
+                        id: 1,
+                        pid: 3,
+                        type: 'menu_dir',
+                        title: '运行管理',
+                        name: 'voltage/sags/operationsManagement',
+                        path: 'voltage/sags/operationsManagement',
+                        icon: 'fa-solid fa-bars-progress',
+                        menu_type: 'tab',
+                        url: '',
+                        extend: 'none',
+                        children: [
+                            {
+                                id: 1,
+                                pid: 3,
+                                type: 'menu',
+                                title: '终端运行管理',
+                                name: 'voltage/sags/operationsManagement/index',
+                                path: 'voltage/sags/operationsManagement/index',
+                                icon: 'fa-solid fa-recycle',
+                                menu_type: 'tab',
+                                url: '',
+                                component: '/src/views/voltage/sags/operationsManagement/index.vue',
+                                keepalive: 'voltage/sags/operationsManagement/index',
+                                extend: 'none',
+                                children: []
+                            },
+                            {
+                                id: 1,
+                                pid: 3,
+                                type: 'menu',
+                                title: '终端运行统计',
+                                name: 'voltage/sags/operationsManagement/statistics',
+                                path: 'voltage/sags/operationsManagement/statistics',
+                                icon: 'fa-solid fa-chart-column',
+                                menu_type: 'tab',
+                                url: '',
+                                component: '/src/views/voltage/sags/operationsManagement/statistics.vue',
+                                keepalive: 'voltage/sags/operationsManagement/statistics',
+                                extend: 'none',
+                                children: []
+                            },
+                            {
+                                id: 1,
+                                pid: 3,
+                                type: 'menu',
+                                title: '监测点台账信息',
+                                name: 'voltage/sags/operationsManagement/point',
+                                path: 'voltage/sags/operationsManagement/point',
+                                icon: 'fa-brands fa-square-pinterest',
+                                menu_type: 'tab',
+                                url: '',
+                                component: '/src/views/voltage/sags/operationsManagement/point.vue',
+                                keepalive: 'voltage/sags/operationsManagement/point',
+                                extend: 'none',
+                                children: []
+                            }
+                        ]
+                    },
+                    {
+                        id: 2,
+                        pid: 3,
+                        type: 'menu',
+                        title: '区域',
+                        name: 'Event-boot/Region/distribution',
+                        path: 'Event-boot/Region/distribution',
+                        icon: 'el-icon-Management',
+                        menu_type: 'tab',
+                        url: '',
+                        component: '/src/views/Event-boot/Region/distribution.vue',
+                        keepalive: 'Event-boot/Region/distribution',
+                        extend: 'none',
+                        children: [
+                            {
+                                id: 2,
+                                pid: 3,
+                                type: 'menu',
+                                title: '区域概览',
+                                name: 'Region/overview',
+                                path: 'Region/overview',
+                                icon: 'el-icon-Promotion',
+                                menu_type: 'tab',
+                                url: '',
+                                component: '/src/views/Event-boot/Region/overview.vue',
+                                keepalive: 'Region/overview',
+                                extend: 'none',
+                                children: []
+                            },
+                            {
+                                id: 2,
+                                pid: 3,
+                                type: 'menu',
+                                title: '区域统计',
+                                name: 'Region/statistics',
+                                path: 'Region/statistics',
+                                icon: 'el-icon-Promotion',
+                                menu_type: 'tab',
+                                url: '',
+                                component: '/src/views/Event-boot/Region/statistics.vue',
+                                keepalive: 'Region/statistics',
+                                extend: 'none',
+                                children: []
+                            },
+                            {
+                                id: 1,
+                                pid: 3,
+                                type: 'menu',
+                                title: '监测网分布',
+                                name: 'Region/distribution',
+                                path: 'Region/distribution',
+                                icon: 'el-icon-Share',
+                                menu_type: 'tab',
+                                url: '',
+                                component: '/src/views/Event-boot/Region/distribution.vue',
+                                keepalive: 'Region/distribution',
+                                extend: 'none',
+                                children: []
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                id: 2,
+                pid: 0,
+                type: 'menu_dir',
+                title: '权限管理',
+                name: 'auth',
+                path: 'auth',
+                icon: 'fa-solid fa-layer-group',
+                menu_type: null,
+                url: '',
+                component: '',
+                keepalive: 0,
+                extend: 'none',
+                children: [
+                    {
+                        id: 3,
+                        pid: 2,
+                        type: 'menu',
+                        title: '角色管理',
+                        name: 'auth/role',
+                        path: 'auth/role',
+                        icon: 'el-icon-Avatar',
+                        menu_type: 'tab',
+                        url: '',
+                        component: '/src/views/auth/role/index.vue',
+                        keepalive: 'auth/role',
+                        extend: 'none',
+                        children: []
+                    },
+                    {
+                        id: 13,
+                        pid: 2,
+                        type: 'menu',
+                        title: '菜单规则管理',
+                        name: 'auth/menu',
+                        path: 'auth/menu',
+                        icon: 'el-icon-Menu',
+                        menu_type: 'tab',
+                        url: '',
+                        component: '/src/views/auth/menu/index.vue',
+                        keepalive: 'auth/menu',
+                        extend: 'none',
+                        children: []
+                    }
+                ]
+            }
+        ]
 
         const handlerMenu = (data: any) => {
             data.forEach((item: any) => {
-
                 item.path = item.routePath
                 item.name = item.title
-                item.component = item.routeName || '/src/views/dashboard/index.vue'
+                item.component = item.routeName || '/src/views/Event-boot/Region/overview.vue'
                 item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
                 item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
                 if (item.children) {
@@ -287,8 +301,8 @@ const init = async () => {
         }
         handlerMenu(res.data)
         // handleAdminRoute(arr)
-        handleAdminRoute(res.data)
-        // handleAdminRoute([...arr, ...res.data])
+        // handleAdminRoute(res.data)
+        handleAdminRoute([...arr, ...res.data])
 
         // 预跳转到上次路径
         if (route.params.to) {
diff --git a/src/views/dashboard/components/Tableabove.vue b/src/views/Event-boot/Region/components/Tableabove.vue
similarity index 100%
rename from src/views/dashboard/components/Tableabove.vue
rename to src/views/Event-boot/Region/components/Tableabove.vue
diff --git a/src/views/Event-boot/Region/components/TypeStatistics.vue b/src/views/Event-boot/Region/components/TypeStatistics.vue
new file mode 100644
index 0000000..57b82d4
--- /dev/null
+++ b/src/views/Event-boot/Region/components/TypeStatistics.vue
@@ -0,0 +1,144 @@
+<template>
+    <span style="color: red; font-size: 12px">注:暂降类型仅统计暂降原因为短路故障事件</span>
+
+    <div class="statistics-main">
+        <template v-if="flag">
+            <div>
+                <my-echart :options="descent" />
+            </div>
+            <div>
+                <vxe-table height="auto" auto-resize :data="descentData" v-bind="defaultAttribute">
+                    <vxe-column field="name" title="暂降原因"></vxe-column>
+                    <vxe-column field="value" title="暂降次数"></vxe-column>
+                </vxe-table>
+            </div>
+            <div>
+                <my-echart :options="resemble" />
+            </div>
+            <div>
+                <vxe-table height="auto" auto-resize :data="resembleData" v-bind="defaultAttribute">
+                    <vxe-column field="name" title="暂降原因"></vxe-column>
+                    <vxe-column field="value" title="暂降次数"></vxe-column>
+                </vxe-table>
+            </div>
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { mainHeight } from '@/utils/layout'
+const descent = ref({})
+const descentData = ref([])
+const resemble = ref({})
+const resembleData = ref([])
+const flag = ref(true)
+
+const info = (res: any) => {
+    flag.value = false
+    descentData.value = res.reason
+    resembleData.value = res.type
+
+    descent.value = {
+        title: {
+            text: '暂降原因'
+        },
+        legend: {
+            type: 'scroll',
+            orient: 'vertical',
+            left: 10,
+            top: '5%',
+            tooltip: {
+                show: true
+            }
+        },
+        xAxis: {
+            show: false
+        },
+        yAxis: {
+            show: false
+        },
+        dataZoom: { show: false },
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} (次)'
+        },
+        options: {
+            series: [
+                {
+                    name: '暂降原因',
+                    type: 'pie',
+                    center: ['50%', '50%'],
+                    selectedOffset: 30,
+                    clockwise: true,
+                    label: {
+                        show: false,
+                        position: 'outside',
+                        textStyle: {
+                            //数值样式
+                        }
+                    },
+
+                    data: res.reason?.filter((item: any) => item.name != '总计')
+                }
+            ]
+        }
+    }
+    resemble.value = {
+        title: {
+            text: '暂降类型'
+        },
+        legend: {
+            type: 'scroll',
+            orient: 'vertical',
+            left: 10,
+            top: '5%'
+        },
+        tooltip: {
+            formatter: '{a} <br/>{b} : {c} (次)',
+            confine: true
+        },
+        xAxis: {
+            show: false
+        },
+        yAxis: {
+            show: false
+        },
+        dataZoom: { show: false },
+        options: {
+            series: [
+                {
+                    name: '暂降类型',
+                    type: 'pie',
+                    center: ['50%', '50%'],
+                    selectedOffset: 30,
+                    clockwise: true,
+                    label: {
+                        show: false,
+                        position: 'outside'
+                    },
+
+                    data: res.type?.filter((item: any) => item.name != '总计')
+                }
+            ]
+        }
+    }
+    flag.value = true
+}
+
+defineExpose({ info })
+const layout = mainHeight(170) as any
+</script>
+
+<style lang="scss" scoped>
+.statistics-main {
+    box-sizing: border-box;
+    height: v-bind('layout.height');
+    padding: 0 10px 10px;
+    display: grid;
+    grid-template-columns: 1fr 600px;
+    grid-template-rows: 1fr 1fr;
+    grid-gap: 10px;
+}
+</style>
diff --git a/src/views/dashboard/components/echart.vue b/src/views/Event-boot/Region/components/echart.vue
similarity index 97%
rename from src/views/dashboard/components/echart.vue
rename to src/views/Event-boot/Region/components/echart.vue
index e70439f..0f1b9fd 100644
--- a/src/views/dashboard/components/echart.vue
+++ b/src/views/Event-boot/Region/components/echart.vue
@@ -35,7 +35,6 @@ const Processing = (list: any) => {
         },
         tooltip: {
             formatter: function (params: any) {
-                // console.log(params);
                 let html = '区域：' + params[0].name
                 params.forEach((item: any) => {
                     if (item.value == 1.1) {
@@ -105,7 +104,6 @@ const Grade = (list: any) => {
         },
         tooltip: {
             formatter: function (params: any) {
-                // console.log(params);
                 let html = '电压等级：' + params[0].name
                 params.forEach((item: any) => {
                     if (item.value == 1.1) {
@@ -139,7 +137,6 @@ const Grade = (list: any) => {
                         normal: {
                             //这里是颜色
                             color: function (params: any) {
-                                // console.log(params,'1111111111111111111111');
                                 if (params.data == 1.1) {
                                     return '#B3B3B3'
                                 } else {
@@ -241,7 +238,6 @@ const Relation = (list: any, interval: number) => {
                                 }
                             },
                             color: function (params: any) {
-                                // console.log(params,'1111111111111111111111');
                                 if (params.data == 1.1) {
                                     return '#B3B3B3'
                                 } else {
diff --git a/src/views/Event-boot/Region/overview.vue b/src/views/Event-boot/Region/overview.vue
new file mode 100644
index 0000000..5720dd8
--- /dev/null
+++ b/src/views/Event-boot/Region/overview.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="default-main">
+        <TableHeader date-picker>
+            <template v-slot:select>
+                <el-form-item label="区域">
+                    <Area v-model="tableStore.table.params.deptIndex" />
+                </el-form-item>
+            </template>
+        </TableHeader>
+        <el-tabs v-model="activeName" type="border-card" v-loading="tableStore.table.loading">
+            <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 TableHeader from '@/components/table/header/index.vue'
+import Area from '@/components/form/area/index.vue'
+import { useDictData } from '@/stores/dictData'
+import Echart from './components/echart.vue'
+import Tableabove from './components/Tableabove.vue'
+import TableStore from '@/utils/tableStore'
+import { onMounted, reactive, ref, provide } from 'vue'
+import { mainHeight } from '@/utils/layout'
+defineOptions({
+    name: 'Region/overview'
+})
+const activeName = ref('1')
+const list = ref([])
+const echarts = ref()
+const Picker = ref()
+const table = ref()
+const dictData = useDictData()
+
+const tableStore = new TableStore({
+    url: '/event-boot/areaStatistics/getAreaCalculation',
+    method: 'POST',
+    column: [],
+    loadCallback: () => {
+        list.value = tableStore.table.data
+        echarts.value.Processing(tableStore.table.data.areaStatistics)
+        echarts.value.Grade(tableStore.table.data.voltageStatistics)
+        echarts.value.Relation(tableStore.table.data.monthlyStatistics)
+        table.value.info(tableStore.table.data)
+    }
+})
+provide('tableStore', tableStore)
+
+tableStore.table.params.deptIndex = dictData.state.area[0].id
+tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Load_Type'])[3]
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.serverName = 'event-boot'
+onMounted(() => {
+    tableStore.index()
+})
+const layout = mainHeight(123) as any
+</script>
+
+<style lang="scss" scoped>
+.bars_w {
+    width: 100%;
+    height: 500px;
+}
+::v-deep(.el-tabs__content) {
+    height: v-bind('layout.height');
+    overflow-y: auto;
+}
+</style>
diff --git a/src/views/Event-boot/Region/statistics.vue b/src/views/Event-boot/Region/statistics.vue
new file mode 100644
index 0000000..9133f3f
--- /dev/null
+++ b/src/views/Event-boot/Region/statistics.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="default-main">
+        <TableHeader date-picker>
+            <template v-slot:select>
+                <el-form-item label="区域">
+                    <Area v-model="tableStore.table.params.deptIndex" />
+                </el-form-item>
+            </template>
+        </TableHeader>
+        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" v-loading="tableStore.table.loading">
+            <el-tab-pane label="暂降原因及类型统计" name="1">
+                <TypeStatistics ref="Statistics" />
+            </el-tab-pane>
+            <el-tab-pane label="电压容忍度曲线兼容性统计" name="2"></el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import TableHeader from '@/components/table/header/index.vue'
+import Area from '@/components/form/area/index.vue'
+import { useDictData } from '@/stores/dictData'
+import TableStore from '@/utils/tableStore'
+import { onMounted, reactive, ref, provide } from 'vue'
+import TypeStatistics from './components/TypeStatistics.vue'
+import { mainHeight } from '@/utils/layout'
+defineOptions({
+    name: 'Region/overview'
+})
+const activeName = ref('1')
+const Statistics = ref()
+const flag = ref(true)
+const dictData = useDictData()
+
+const tableStore = new TableStore({
+    url: '/event-boot/areaAnalysis/getEventReason',
+    method: 'POST',
+    column: [],
+    loadCallback: () => {
+        if (activeName.value == '1') {
+            Statistics.value.info(tableStore.table.data)
+        } else {
+        }
+    }
+})
+provide('tableStore', tableStore)
+
+tableStore.table.params.deptIndex = dictData.state.area[0].id
+tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Load_Type'])[3]
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.serverName = 'event-boot'
+onMounted(() => {
+    tableStore.index()
+})
+const handleClick = async () => {
+    if (activeName.value == '1') {
+        tableStore.url = '/event-boot/areaAnalysis/getEventReason'
+    } else {
+        tableStore.url = '/event-boot/areaAnalysis/getVoltageToleranceCurve'
+    }
+    await tableStore.onTableAction('search', {})
+}
+const layout = mainHeight(123) as any
+</script>
+
+<style lang="scss" scoped>
+.bars_w {
+    width: 100%;
+    height: 500px;
+}
+::v-deep(.el-tabs__content) {
+    height: v-bind('layout.height');
+    overflow-y: auto;
+}
+</style>