电压暂降

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'
@@ -94,7 +94,38 @@ const init = () => {
                     keepalive: 'auth/role',
                     extend: 'none',
                     children: []
-                },
+                }
+            ]
+        },
+        {
+            id: 3,
+            pid: 0,
+            type: 'menu',
+            title: '电压暂降',
+            name: 'voltage/sags',
+            path: 'voltage/sags',
+            icon: 'el-icon-BellFilled',
+            menu_type: 'tab',
+            url: '',
+            component: '/src/views/dashboard/test.vue',
+            keepalive: 'voltage/sags',
+            extend: 'none',
+            children: [
+                {
+                    id: 1,
+                    pid: 3,
+                    type: 'menu',
+                    title: '运行管理',
+                    name: 'voltage/sags/operationsManagement',
+                    path: 'voltage/sags/operationsManagement',
+                    icon: 'el-icon-Management',
+                    menu_type: 'tab',
+                    url: '',
+                    component: '/src/views/voltage/sags/operationsManagement/index.vue',
+                    keepalive: 'voltage/sags/operationsManagement',
+                    extend: 'none',
+                    children: []
+                }
             ]
         },
         {

src/utils/tableStore.ts

@@ -9,6 +9,7 @@ interface TableStoreParams {
     column: TableColumn[]
     params?: anyObj
     method?: Method
+    isWebPaging?: boolean // 是否前端分页   
 }
 
 export default class TableStore {
@@ -16,15 +17,16 @@ export default class TableStore {
     public pk
     public method: Method
     public initData: any = null
-
+    public isWebPaging = false
     public table: CnTable = reactive({
         ref: null,
         selection: [],
         data: [],
+        webPagingData: [],
         total: 0,
         params: {
             pageNum: 1,
-            pageSize: 10
+            pageSize: 20
         },
         loading: true,
         column: []
@@ -33,6 +35,7 @@ export default class TableStore {
     constructor(public options: TableStoreParams) {
         this.url = options.url
         this.pk = options.pk || 'id'
+        this.isWebPaging = options.isWebPaging || false
         this.method = options.method || 'GET'
         this.table.column = options.column
         Object.assign(this.table.params, options.params)
@@ -52,10 +55,12 @@ export default class TableStore {
                 requestPayload(this.method, this.table.params)
             )
         ).then((res: any) => {
-
             this.table.data = res.data.records || res.data
-            console.log(this.table.data)
             this.table.total = res.data.total || res.data.length
+            if (this.isWebPaging) {
+                this.table.webPagingData = window.XEUtils.chunk(this.table.data, this.table.params.pageSize)
+                this.table.data = this.table.webPagingData[this.table.params.pageNum - 1]
+            }
             this.table.loading = false
         })
     }
@@ -91,14 +96,29 @@ export default class TableStore {
             [
                 'page-size-change',
                 () => {
-                    this.table.params!.pageSize = data.size
+                    this.table.params.pageSize = data.size
+                    this.table.params.pageNum = 1
+
+                    if (this.isWebPaging) {
+                        this.table.webPagingData = window.XEUtils.chunk(
+                            window.XEUtils.flatten(this.table.webPagingData),
+                            this.table.params.pageSize
+                        )
+                        this.table.data = this.table.webPagingData[this.table.params.pageNum - 1]
+                    } else {
+                        this.index()
+                    }
                 }
             ],
             [
                 'current-page-change',
                 () => {
-                    this.table.params!.pageNum = data.page
-                    this.index()
+                    this.table.params.pageNum = data.page
+                    if (this.isWebPaging) {
+                        this.table.data = this.table.webPagingData[data.page - 1]
+                    } else {
+                        this.index()
+                    }
                 }
             ],
             [

src/views/voltage/sags/operationsManagement/index.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="default-main">
+        <TableHeader date-picker>
+            <template v-slot:select>
+                <!-- <el-form-item label="用户名">
+                    <el-select v-model="value" class="m-2" placeholder="Select" size="large">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="操作类型">
+                    <el-input v-model="tableStore.table.params.loginName" placeholder="Please input" />
+                </el-form-item> -->
+            </template>
+            <template v-slot:operation>
+                <el-button :icon="Plus" type="primary" @click="addMenu">添加</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+    </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: 'comptroller/list'
+})
+const tableStore = new TableStore({
+    isWebPaging: true,
+    url: '/device-boot/runManage/getRuntimeData',
+    method: 'POST',
+    column: [
+        { title: '序号', type: 'seq', align: 'center', width: 60 },
+        { title: '区域', field: 'userName', align: 'center', width: 120 },
+        { title: '供电公司', field: 'operate', align: 'center', width: 220 },
+        { title: '变电站', field: 'describe', align: 'center', showOverflow: true, minWidth: 200 },
+        { title: '终端编号', field: 'type', align: 'center', width: 160 },
+        { title: '投运时间', field: 'type', align: 'center', width: 100 },
+        { title: '厂家', field: 'ip', align: 'center', width: 160 },
+        { title: '', field: 'level', align: 'center', width: 100 }
+    ]
+})
+tableStore.table.params.deptIndex = '5699e5916a18a6381e1ac92da5bd2628'
+tableStore.table.params.serverName = 'event-boot'
+tableStore.table.params.statisticalType = {}
+tableStore.table.params.comFlag = []
+tableStore.table.params.manufacturer = []
+tableStore.table.params.runFlag = []
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    tableStore.index()
+})
+
+const addMenu = () => {}
+</script>

types/table.d.ts

@@ -8,6 +8,8 @@ declare global {
     interface CnTable {
         ref: typeof Table | null
         data: TableRow[]
+        // 前端分页数据
+        webPagingData: TableRow[][]
         // 表格加载状态
         loading: boolean
         // 当前选中行
@@ -17,8 +19,8 @@ declare global {
         // 数据总量
         total: number
         params: {
-            pageNum?: number
-            pageSize?: number
+            pageNum: number
+            pageSize: number
             [key: string]: any
         }
     }
@@ -54,13 +56,7 @@ declare global {
         // 自定义组件/函数渲染
         customRender?: string | Component
         // 使用了 render 属性时,渲染前对字段值的预处理方法，请返回新值
-        renderFormatter?: (
-            row: TableRow,
-            field: TableColumn,
-            value: any,
-            column: VxeColumnProps,
-            index: number
-        ) => any
+        renderFormatter?: (row: TableRow, field: TableColumn, value: any, column: VxeColumnProps, index: number) => any
         // 自定义渲染模板，方法可返回html内容
         customTemplate?: (
             row: TableRow,