From 9f234dfa1e1f41693786d2c25aae4f2d9c0dfec2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= <zhongchunyang@rocan.com.cn>
Date: Wed, 3 Jan 2024 13:20:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E7=A4=BA=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../baInput/components/iconSelector.vue       |  19 +--
 src/components/table/defaultAttribute.ts      |   5 +-
 src/components/table/header/index.vue         |   5 +-
 src/layouts/admin/components/config.vue       |   6 +-
 .../admin/components/navBar/classic.vue       |   9 +-
 .../admin/components/navBar/default.vue       |  12 +-
 src/layouts/admin/index.vue                   |   2 +-
 src/stores/dictData.ts                        |   2 +-
 src/styles/app.scss                           |   9 +-
 src/styles/element.scss                       |  18 +++
 src/views/auth/menu/index.vue                 |   1 -
 src/views/auth/menu/popupForm.vue             |  77 +++++++++---
 src/views/auth/role.vue                       |   3 -
 src/views/auth/role/index.vue                 |  71 +++++++++++
 src/views/auth/role/popupForm.vue             |  77 ++++++++++++
 .../sags/operationsManagement/statistics.vue  | 111 +++++++++---------
 types/table.d.ts                              |   2 +-
 17 files changed, 330 insertions(+), 99 deletions(-)
 delete mode 100644 src/views/auth/role.vue
 create mode 100644 src/views/auth/role/index.vue
 create mode 100644 src/views/auth/role/popupForm.vue

diff --git a/src/components/baInput/components/iconSelector.vue b/src/components/baInput/components/iconSelector.vue
index 4d95eaf..c376c4e 100644
--- a/src/components/baInput/components/iconSelector.vue
+++ b/src/components/baInput/components/iconSelector.vue
@@ -169,15 +169,16 @@ const onChangeTab = (name: IconType) => {
         getAwesomeIconfontNames().then((res) => {
             state.fontIconNames = res.map((name) => `fa ${name}`)
         })
-    } else if (name == 'ali') {
-        getIconfontNames().then((res) => {
-            state.fontIconNames = res.map((name) => `iconfont ${name}`)
-        })
-    } else if (name == 'local') {
-        getLocalIconfontNames().then((res) => {
-            state.fontIconNames = res
-        })
-    }
+    } 
+    // else if (name == 'ali') {
+    //     getIconfontNames().then((res) => {
+    //         state.fontIconNames = res.map((name) => `iconfont ${name}`)
+    //     })
+    // } else if (name == 'local') {
+    //     getLocalIconfontNames().then((res) => {
+    //         state.fontIconNames = res
+    //     })
+    // }
 }
 const onIcon = (icon: string) => {
     state.iconSelectorMouseover = state.popoverVisible = false
diff --git a/src/components/table/defaultAttribute.ts b/src/components/table/defaultAttribute.ts
index 7f42ee0..28040bc 100644
--- a/src/components/table/defaultAttribute.ts
+++ b/src/components/table/defaultAttribute.ts
@@ -1,6 +1,7 @@
-export const defaultAttribute = {
+import { VxeTableProps } from "vxe-table";
+
+export const defaultAttribute:VxeTableProps = {
     align: 'center',
-    class: 'ba-data-table w100',
     headerCellClassName: 'table-header-cell',
     border: true,
     stripe: true,
diff --git a/src/components/table/header/index.vue b/src/components/table/header/index.vue
index b1aec2a..e4f573a 100644
--- a/src/components/table/header/index.vue
+++ b/src/components/table/header/index.vue
@@ -18,8 +18,9 @@
     <div class='table-header ba-scroll-style' v-if='showOperation'>
         <slot name='operation'></slot>
         <!-- 右侧搜索框和工具按钮 -->
-        <div class='table-search' v-if='$slots.select'>
-            <div class='table-search-button-group'>
+        <div class='table-search' >
+        <slot name='right'></slot>
+            <div class='table-search-button-group' v-if='$slots.select'>
                 <el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
                     <Icon size='14' name='el-icon-Search' />
                 </el-button>
diff --git a/src/layouts/admin/components/config.vue b/src/layouts/admin/components/config.vue
index ba6bb7a..a38ace4 100644
--- a/src/layouts/admin/components/config.vue
+++ b/src/layouts/admin/components/config.vue
@@ -40,7 +40,7 @@
                                     </div>
                                 </el-col>
                             </el-row>
-                            <el-row :gutter="10">
+                            <!-- <el-row :gutter="10">
                                 <el-col :span="12">
                                     <div
                                         @click="setLayoutMode('Streamline')"
@@ -72,11 +72,11 @@
                                         <div class="layout-mode-style-name">双栏</div>
                                     </div>
                                 </el-col>
-                            </el-row>
+                            </el-row> -->
                         </div>
                         <el-divider border-style="dashed">全局</el-divider>
                         <div class="layout-config-global">
-                            <el-form-item label="'后台页面切换动画">
+                            <el-form-item label="后台页面切换动画">
                                 <el-select
                                     @change="onCommitState($event, 'mainAnimation')"
                                     :model-value="configStore.layout.mainAnimation"
diff --git a/src/layouts/admin/components/navBar/classic.vue b/src/layouts/admin/components/navBar/classic.vue
index 2d8be1f..28d6c70 100644
--- a/src/layouts/admin/components/navBar/classic.vue
+++ b/src/layouts/admin/components/navBar/classic.vue
@@ -49,18 +49,25 @@ const onMenuCollapse = () => {
             .close-icon {
                 padding: 2px;
                 margin: 2px 0 0 4px;
+                color: v-bind('config.getColorVal("headerBarTabColor")') !important;
             }
             .close-icon:hover {
-                background: var(--ba-color-primary-light);
+                background: v-bind('config.getColorVal("headerBarBackground")');
                 color: var(--el-border-color) !important;
                 border-radius: 50%;
             }
             &.active {
                 color: v-bind('config.getColorVal("headerBarTabActiveColor")');
+                .close-icon {
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
+                }
             }
             &:hover {
                 color: v-bind('config.getColorVal("headerBarTabActiveColor")');
                 background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
+                .close-icon {
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
+                }
             }
         }
         .nav-tabs-active-box {
diff --git a/src/layouts/admin/components/navBar/default.vue b/src/layouts/admin/components/navBar/default.vue
index 21c99a5..f95a349 100644
--- a/src/layouts/admin/components/navBar/default.vue
+++ b/src/layouts/admin/components/navBar/default.vue
@@ -35,17 +35,25 @@ const config = useConfig()
             .close-icon {
                 padding: 2px;
                 margin: 2px 0 0 4px;
+                color: v-bind('config.getColorVal("headerBarTabColor")') !important;
             }
             .close-icon:hover {
-                background: var(--ba-color-primary-light);
+                background: v-bind('config.getColorVal("headerBarBackground")');
                 color: var(--el-border-color) !important;
                 border-radius: 50%;
             }
             &.active {
                 color: v-bind('config.getColorVal("headerBarTabActiveColor")');
+                .close-icon {
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;;
+                }
             }
             &:hover {
-                opacity: 1;
+                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
+                background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
+                .close-icon {
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
+                }
             }
         }
         .nav-tabs-active-box {
diff --git a/src/layouts/admin/index.vue b/src/layouts/admin/index.vue
index 50fb12f..33bed79 100644
--- a/src/layouts/admin/index.vue
+++ b/src/layouts/admin/index.vue
@@ -248,7 +248,7 @@ const init = async () => {
                         icon: 'el-icon-Avatar',
                         menu_type: 'tab',
                         url: '',
-                        component: '/src/views/auth/role.vue',
+                        component: '/src/views/auth/role/index.vue',
                         keepalive: 'auth/role',
                         extend: 'none',
                         children: []
diff --git a/src/stores/dictData.ts b/src/stores/dictData.ts
index 33530dc..838257a 100644
--- a/src/stores/dictData.ts
+++ b/src/stores/dictData.ts
@@ -11,7 +11,7 @@ export const useDictData = defineStore(
             area: []
             // 其他接口获取的字典，比如区域
         })
-        const getBasicData = (code: string, arr: string) => {
+        const getBasicData = (code: string, arr?: string) => {
             let list = []
             list = state.basic.filter(item => item.code === code)[0]?.children || []
             if (arr) {
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 2ca3419..29f9afd 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -117,9 +117,12 @@ body,
 }
 .ba-operate-dialog .el-dialog__body {
     height: 60vh;
-    padding-top: 0;
+    padding-top: 20px;
     padding-bottom: 52px;
 }
+.ba-operate-dialog .el-dialog__body  .el-scrollbar{
+    padding-right: 60px;
+}
 .ba-operate-dialog .el-dialog__footer {
     padding: 10px var(--el-dialog-padding-primary);
     box-shadow: var(--el-box-shadow);
@@ -127,6 +130,10 @@ body,
     width: 100%;
     bottom: 0;
 }
+.ba-operate-dialog .el-form--inline {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+}
 .ba-operate-form {
     padding-top: 20px;
 }
diff --git a/src/styles/element.scss b/src/styles/element.scss
index 797abe2..d2eea21 100644
--- a/src/styles/element.scss
+++ b/src/styles/element.scss
@@ -26,6 +26,19 @@
     }
 }
 
+.el-dialog__header {
+    background: var(--el-color-primary);
+    margin-right: 0;
+    .el-dialog__headerbtn {
+        .el-icon {
+            color: var(--el-color-white);
+        }
+    }
+    .el-dialog__title {
+        color: var(--el-color-white);
+    }
+}
+
 .el-table {
     --el-table-border-color: var(--ba-border-color);
 }
@@ -73,3 +86,8 @@
     }
 }
 /* 小屏设备 el-radio-group 样式调整-e */
+
+.vxe-header--row {
+    background: var(--el-color-primary);
+    color: var(--el-color-white);
+}
diff --git a/src/views/auth/menu/index.vue b/src/views/auth/menu/index.vue
index 024f5ab..7d9c8c9 100644
--- a/src/views/auth/menu/index.vue
+++ b/src/views/auth/menu/index.vue
@@ -64,7 +64,6 @@ const tableStore = new TableStore({
                         title: '确定删除该菜单吗？'
                     },
                     click: (row) => {
-                        popupRef.value.open('编辑菜单', row)
                     }
                 }
             ]
diff --git a/src/views/auth/menu/popupForm.vue b/src/views/auth/menu/popupForm.vue
index 62ad822..0fc89a1 100644
--- a/src/views/auth/menu/popupForm.vue
+++ b/src/views/auth/menu/popupForm.vue
@@ -1,22 +1,67 @@
 <template>
-    <el-dialog
-        class='ba-operate-dialog'
-        v-model='dialogVisible'
-        :title='title'
-    >
-        <span>This is a message</span>
+    <el-dialog class="ba-operate-dialog" v-model="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px">
+                <el-form-item label="上级菜单">
+                    <el-cascader
+                        v-model="form.pid"
+                        :options="tableStore.table.data"
+                        :props="cascaderProps"
+                        style="width: 100%"
+                    />
+                </el-form-item>
+                <el-form-item label="菜单名称">
+                    <el-input v-model="form.name" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="图标">
+                    <IconSelector v-model="form.icon" placeholder="请选择图标" />
+                </el-form-item>
+                <el-form-item label="菜单路由">
+                    <el-input v-model="form.path" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="组件路径">
+                    <el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/dashboard/index.vue" />
+                </el-form-item>
+                <el-form-item label="排序">
+                    <el-input-number v-model="form.sort" :min="0" />
+                </el-form-item>
+                <el-form-item label="菜单描述">
+                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+
         <template #footer>
-      <span class='dialog-footer'>
-        <el-button @click='dialogVisible = false'>取消</el-button>
-        <el-button type='primary' @click='submit'>
-          确认
-        </el-button>
-      </span>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
         </template>
     </el-dialog>
 </template>
-<script lang='ts' setup>
-import { ref } from 'vue'
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import IconSelector from '@/components/baInput/components/iconSelector.vue'
+const tableStore = inject('tableStore') as TableStore
+const cascaderProps = {
+    label: 'title',
+    value: 'id'
+}
+// do not use same name with ref
+const form = reactive({
+    code: 'menu',
+    icon: '设备月保_设备日保',
+    id: '88c61dfd02fbdab02e3bf0753d487444',
+    name: '系统配置',
+    path: '/app/setting',
+    pid: 'f517484e241c2fdd7f11a9c3fcaaa109',
+    remark: '系统配置',
+    routeName: null,
+    sort: 0,
+    type: 0
+})
 
 const dialogVisible = ref(false)
 const title = ref('新增菜单')
@@ -29,6 +74,4 @@ const submit = () => {
 }
 
 defineExpose({ open })
-
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/auth/role.vue b/src/views/auth/role.vue
deleted file mode 100644
index e1a03f0..0000000
--- a/src/views/auth/role.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <div>123</div>
-</template>
\ No newline at end of file
diff --git a/src/views/auth/role/index.vue b/src/views/auth/role/index.vue
new file mode 100644
index 0000000..d536dee
--- /dev/null
+++ b/src/views/auth/role/index.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="default-main">
+        <TableHeader>
+            <template v-slot:operation>
+                <el-button :icon="Plus" type="primary" @click="addMenu">添加</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+        <popupForm ref="popupRef"></popupForm>
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+
+defineOptions({
+    name: 'auth/role'
+})
+const popupRef = ref()
+const tableStore = new TableStore({
+    url: '/user-boot/role/selectRoleDetail?id=1',
+    method: 'POST',
+    column: [
+        { title: '角色名称', field: 'name', align: 'center' },
+        { title: '角色编码', field: 'code', align: 'center' },
+        { title: '备注', field: 'remark', align: 'center' },
+        { title: '状态', field: 'state', align: 'center' },
+        {
+            title: '操作',
+            align: 'center',
+            width: '130',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'tipButton',
+                    click: row => {
+                        popupRef.value.open('编辑角色', row)
+                    }
+                },
+                {
+                    name: 'del',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除该角色吗？'
+                    },
+                    click: row => {}
+                }
+            ]
+        }
+    ]
+})
+provide('tableStore', tableStore)
+tableStore.table.params.searchValue = ''
+onMounted(() => {
+    tableStore.index()
+})
+const addMenu = () => {}
+</script>
diff --git a/src/views/auth/role/popupForm.vue b/src/views/auth/role/popupForm.vue
new file mode 100644
index 0000000..0fc89a1
--- /dev/null
+++ b/src/views/auth/role/popupForm.vue
@@ -0,0 +1,77 @@
+<template>
+    <el-dialog class="ba-operate-dialog" v-model="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px">
+                <el-form-item label="上级菜单">
+                    <el-cascader
+                        v-model="form.pid"
+                        :options="tableStore.table.data"
+                        :props="cascaderProps"
+                        style="width: 100%"
+                    />
+                </el-form-item>
+                <el-form-item label="菜单名称">
+                    <el-input v-model="form.name" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="图标">
+                    <IconSelector v-model="form.icon" placeholder="请选择图标" />
+                </el-form-item>
+                <el-form-item label="菜单路由">
+                    <el-input v-model="form.path" placeholder="请输入菜单名称" />
+                </el-form-item>
+                <el-form-item label="组件路径">
+                    <el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/dashboard/index.vue" />
+                </el-form-item>
+                <el-form-item label="排序">
+                    <el-input-number v-model="form.sort" :min="0" />
+                </el-form-item>
+                <el-form-item label="菜单描述">
+                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import IconSelector from '@/components/baInput/components/iconSelector.vue'
+const tableStore = inject('tableStore') as TableStore
+const cascaderProps = {
+    label: 'title',
+    value: 'id'
+}
+// do not use same name with ref
+const form = reactive({
+    code: 'menu',
+    icon: '设备月保_设备日保',
+    id: '88c61dfd02fbdab02e3bf0753d487444',
+    name: '系统配置',
+    path: '/app/setting',
+    pid: 'f517484e241c2fdd7f11a9c3fcaaa109',
+    remark: '系统配置',
+    routeName: null,
+    sort: 0,
+    type: 0
+})
+
+const dialogVisible = ref(false)
+const title = ref('新增菜单')
+const open = (text: string, data?: anyObj) => {
+    title.value = text
+    dialogVisible.value = true
+}
+const submit = () => {
+    dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>
diff --git a/src/views/voltage/sags/operationsManagement/statistics.vue b/src/views/voltage/sags/operationsManagement/statistics.vue
index 2885771..1f88bed 100644
--- a/src/views/voltage/sags/operationsManagement/statistics.vue
+++ b/src/views/voltage/sags/operationsManagement/statistics.vue
@@ -1,86 +1,86 @@
 <template>
-    <div class='default-main'>
-        <TableHeader date-picker :showOperation='false' showSelect>
+    <div class="default-main">
+        <TableHeader date-picker :showOperation="false" showSelect>
             <template v-slot:select>
-                <el-form-item label='区域'>
-                    <Area v-model='tableStore.table.params.deptIndex' />
+                <el-form-item label="区域">
+                    <Area v-model="tableStore.table.params.deptIndex" />
                 </el-form-item>
             </template>
         </TableHeader>
-        <div style='font-weight: bold; background: #fff;text-indent: 1em'>
-            <span style='color: #000'>
+        <div style="font-weight: bold; background: #fff; text-indent: 1em">
+            <span style="color: #000">
                 (左柱):
-                <span style='color: #0099cc'>
-                    <span class='smallBlock' style='background: #0099cc'></span>
+                <span style="color: #0099cc">
+                    <span class="smallBlock" style="background: #0099cc"></span>
                     投运
                 </span>
-                <span style='color: #996600'>
-                    <span class='smallBlock' style='background: #996600'></span>
+                <span style="color: #996600">
+                    <span class="smallBlock" style="background: #996600"></span>
                     热备用
                 </span>
-                <span style='color: #cc0000'>
-                    <span class='smallBlock' style='background: #cc0000'></span>
+                <span style="color: #cc0000">
+                    <span class="smallBlock" style="background: #cc0000"></span>
                     停运
                 </span>
             </span>
             &nbsp;&nbsp;
-            <span style='color: #000'>
+            <span style="color: #000">
                 (右柱):
-                <span style='color: #2e8b57'>
-                    <span class='smallBlock' style='background: #2e8b57'></span>
+                <span style="color: #2e8b57">
+                    <span class="smallBlock" style="background: #2e8b57"></span>
                     {{ '在线率≥90 %' }}
                 </span>
-                <span style='color: #daa520'>
-                    <span class='smallBlock' style='background: #daa520'></span>
+                <span style="color: #daa520">
+                    <span class="smallBlock" style="background: #daa520"></span>
                     {{ '60 %≤在线率 < 90 %' }}
                 </span>
-                <span style='color: #cc0000'>
-                    <span class='smallBlock' style='background: #cc0000'></span>
+                <span style="color: #cc0000">
+                    <span class="smallBlock" style="background: #cc0000"></span>
                     {{ '在线率 < 60 %' }}
                 </span>
             </span>
         </div>
-        <div class='statistics-main' v-loading='tableStore.table.loading'>
-            <template v-if='!tableStore.table.loading'>
+        <div class="statistics-main" v-loading="tableStore.table.loading">
+            <template v-if="!tableStore.table.loading">
                 <div>
-                    <my-echart :options='areaStatistics' />
+                    <my-echart :options="areaStatistics" />
                 </div>
                 <div>
                     <vxe-table
-                        height='auto'
+                        height="auto"
                         auto-resize
-                        :data='tableStore.table.data.area.areaInfo'
-                        v-bind='defaultAttribute'
+                        :data="tableStore.table.data.area.areaInfo"
+                        v-bind="defaultAttribute"
                     >
-                        <vxe-column field='areaName' title='区域'></vxe-column>
-                        <vxe-column field='numberOfTerminals' title='终端个数' width='80'></vxe-column>
-                        <vxe-column field='normal' title='投运' width='80'></vxe-column>
-                        <vxe-column field='breaks' title='热备用' width='80'></vxe-column>
-                        <vxe-column field='shutdown' title='停运' width='80'></vxe-column>
-                        <vxe-column field='onlineRate' title='在线率（%）'>
-                            <template v-slot:default='scoped'>
+                        <vxe-column field="areaName" title="区域"></vxe-column>
+                        <vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
+                        <vxe-column field="normal" title="投运" width="80"></vxe-column>
+                        <vxe-column field="breaks" title="热备用" width="80"></vxe-column>
+                        <vxe-column field="shutdown" title="停运" width="80"></vxe-column>
+                        <vxe-column field="onlineRate" title="在线率（%）">
+                            <template v-slot:default="scoped">
                                 {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }}
                             </template>
                         </vxe-column>
                     </vxe-table>
                 </div>
                 <div>
-                    <my-echart :options='factoryStatistics' />
+                    <my-echart :options="factoryStatistics" />
                 </div>
                 <div>
                     <vxe-table
-                        height='auto'
+                        height="auto"
                         auto-resize
-                        :data='tableStore.table.data.factory.areaInfo'
-                        v-bind='defaultAttribute'
+                        :data="tableStore.table.data.factory.areaInfo"
+                        v-bind="defaultAttribute"
                     >
-                        <vxe-column field='areaName' title='厂家'></vxe-column>
-                        <vxe-column field='numberOfTerminals' title='终端个数' width='80'></vxe-column>
-                        <vxe-column field='normal' title='投运' width='80'></vxe-column>
-                        <vxe-column field='breaks' title='热备用' width='80'></vxe-column>
-                        <vxe-column field='shutdown' title='停运' width='80'></vxe-column>
-                        <vxe-column field='onlineRate' title='在线率（%）'>
-                            <template v-slot:default='scoped'>
+                        <vxe-column field="areaName" title="厂家"></vxe-column>
+                        <vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
+                        <vxe-column field="normal" title="投运" width="80"></vxe-column>
+                        <vxe-column field="breaks" title="热备用" width="80"></vxe-column>
+                        <vxe-column field="shutdown" title="停运" width="80"></vxe-column>
+                        <vxe-column field="onlineRate" title="在线率（%）">
+                            <template v-slot:default="scoped">
                                 {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }}
                             </template>
                         </vxe-column>
@@ -90,7 +90,7 @@
         </div>
     </div>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
 import TableHeader from '@/components/table/header/index.vue'
 import Area from '@/components/form/area/index.vue'
 import TableStore from '@/utils/tableStore'
@@ -105,11 +105,12 @@ defineOptions({
     name: 'voltage/sags/operationsManagement/statistics'
 })
 const dictData = useDictData()
-const areaStatistics = ref(null)
-const factoryStatistics = ref(null)
+const areaStatistics = ref()
+const factoryStatistics = ref()
 const tableStore = new TableStore({
     url: '/event-boot/area/getTerminalRunningStatistics',
     method: 'POST',
+    column: [],
     loadCallback: () => {
         areaStatistics.value = {
             legend: {
@@ -144,7 +145,7 @@ const tableStore = new TableStore({
                         fontSize: 14
                     },
                     backgroundColor: 'rgba(0,0,0,0.35)',
-                    formatter: function(params) {
+                    formatter: function (params) {
                         var tips = ''
                         tips += params[0].name + '</br/>'
                         for (var i = 0; i < params.length; i++) {
@@ -164,7 +165,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.area.areaInfo.map((item: any) => item.normalRate),
                         itemStyle: {
                             normal: {
-                                color: function(params) {
+                                color: function (params) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -192,7 +193,7 @@ const tableStore = new TableStore({
                         type: 'bar',
                         itemStyle: {
                             normal: {
-                                color: function(params) {
+                                color: function (params) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -218,7 +219,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.area.areaInfo.map((item: any) => item.onlineRate),
                         itemStyle: {
                             normal: {
-                                color: function(params) {
+                                color: function (params) {
                                     if (params.value >= 90) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -289,7 +290,7 @@ const tableStore = new TableStore({
                         fontSize: 14
                     },
                     backgroundColor: 'rgba(0,0,0,0.35)',
-                    formatter: function(params) {
+                    formatter: function (params: any) {
                         var tips = ''
                         tips += params[0].name + '</br/>'
                         for (var i = 0; i < params.length; i++) {
@@ -309,7 +310,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.factory.areaInfo.map((item: any) => item.normalRate),
                         itemStyle: {
                             normal: {
-                                color: function(params) {
+                                color: function (params: any) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -337,7 +338,7 @@ const tableStore = new TableStore({
                         type: 'bar',
                         itemStyle: {
                             normal: {
-                                color: function(params) {
+                                color: function (params: any) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -363,7 +364,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.factory.areaInfo.map((item: any) => item.onlineRate),
                         itemStyle: {
                             normal: {
-                                color: function(params) {
+                                color: function (params: any) {
                                     if (params.value >= 90) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -423,7 +424,7 @@ onMounted(() => {
 const layout = mainHeight(104) as any
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .statistics-main {
     box-sizing: border-box;
     height: v-bind('layout.height');
diff --git a/types/table.d.ts b/types/table.d.ts
index 7df7351..f88fe27 100644
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -7,7 +7,7 @@ import { Mutable } from 'element-plus/es/utils'
 declare global {
     interface CnTable {
         ref: typeof Table | null
-        data: TableRow[]
+        data: TableRow[] | any
         // 前端分页数据
         webPagingData: TableRow[][]
         // 表格加载状态