diff --git a/web/.eslintrc.js b/web/.eslintrc.js
index 631fc67..b2cb0da 100644
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@@ -55,7 +55,7 @@ module.exports = {
     'no-this-before-super': 0, //   在调用super()之前不能使用this或super
     'no-undef': 2, //   不能有未定义的变量
     'no-use-before-define': 2, //   未定义前不能使用
-    camelcase: 2, //   强制驼峰法命名
+    camelcase: 'off', //     关闭强制驼峰法命名
     'vue/multi-word-component-names': 0,
     'jsx-quotes': [2, 'prefer-double'], //   强制在JSX属性（jsx-quotes）中一致使用双引号
     //   'react/sort-comp': 2, //  强制组件方法顺序
diff --git a/web/public/config/columnList.js b/web/public/config/columnList.js
index 124b3ed..4eb1013 100644
--- a/web/public/config/columnList.js
+++ b/web/public/config/columnList.js
@@ -1,3 +1,4 @@
+import { deviceTypeList, logTypes } from '@/utils/config'
 export const columnList = [
   {
     page: 'user',
@@ -7,119 +8,48 @@ export const columnList = [
         dataIndex: 'user_id',
         key: 'user_id',
         ellipsis: true,
-        filterable: true,
+        // filterable: true,
         fixed: 'left'
       },
       {
         title: '用户名',
         dataIndex: 'account',
-        key: 'account',
-        filterable: true
+        key: 'account'
+        // filterable: true
       },
       {
         title: '姓名',
         dataIndex: 'name',
         key: 'name',
-        ellipsis: true,
-        filterable: true
+        ellipsis: true
+        // filterable: true
       },
       {
         title: '性别',
         dataIndex: 'gender',
         key: 'gender',
-        filterable: true,
         scopedSlots: { customRender: 'gender' }
       },
       {
         title: '年龄',
         dataIndex: 'age',
-        key: 'age',
-        filterable: true
+        key: 'age'
       },
       {
         title: '手机号',
         dataIndex: 'phone',
-        key: 'phone',
-        filterable: true
+        key: 'phone'
       },
       {
         title: '邮箱',
         dataIndex: 'email',
-        key: 'email',
-        filterable: true
-      },
-      {
-        title: '角色ID',
-        dataIndex: 'role_id',
-        key: 'role_id',
-        filterable: true
+        key: 'email'
       },
+
       {
         title: '角色名称',
         dataIndex: 'role_name',
-        key: 'role_name',
-        filterable: true
-      },
-      {
-        title: '操作',
-        dataIndex: 'operate',
-        key: 'operate',
-        scopedSlots: { customRender: 'action' }
-      }
-    ]
-  },
-  {
-    page: 'menu',
-    columns: [
-      {
-        title: '菜单名称',
-        dataIndex: 'name',
-        key: 'name',
-        ellipsis: true,
-        filterable: true,
-        fixed: 'left'
-      },
-      {
-        title: '菜单路由',
-        dataIndex: 'route',
-        key: 'route',
-        filterable: true
-      },
-      {
-        title: '顺序',
-        dataIndex: 'seq',
-        align: 'center',
-        key: 'seq',
-        ellipsis: true,
-        width: 120,
-
-        filterable: true
-      },
-      {
-        title: '图标',
-        dataIndex: 'icon',
-        align: 'center',
-        key: 'icon',
-        width: 120,
-        scopedSlots: { customRender: 'icon' }
-      },
-      {
-        title: '创建时间',
-        dataIndex: 'createTime',
-        key: 'createTime',
-        align: 'center',
-        ellipsis: true,
-        filterable: true,
-        width: 180
-      },
-      {
-        title: '更新时间',
-        dataIndex: 'updateTime',
-        key: 'updateTime',
-        align: 'center',
-        ellipsis: true,
-        filterable: true,
-        width: 180
+        key: 'role_name'
       },
       {
         title: '操作',
@@ -133,17 +63,268 @@ export const columnList = [
     page: 'role',
     columns: [
       {
-        title: '角色名称',
-        dataIndex: 'name',
-        key: 'name',
+        title: '角色ID',
+        dataIndex: 'role_id',
+        key: 'role_id',
         ellipsis: true,
-        filterable: true,
-        width: 180,
-
+        // filterable: true,
         fixed: 'left'
       },
       {
-        title: '角色类型',
+        title: '角色名称',
+        dataIndex: 'name',
+        key: 'name'
+        // filterable: true
+      },
+      {
+        title: '角色描述',
+        dataIndex: 'describe',
+        key: 'describe',
+        ellipsis: true
+        // filterable: true
+      },
+      {
+        title: '关联权限',
+        dataIndex: 'permission',
+        key: 'permission',
+        scopedSlots: { customRender: 'permission' }
+      },
+      {
+        title: '是否启用',
+        dataIndex: 'is_open',
+        key: 'is_open',
+        scopedSlots: { customRender: 'is_open' }
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'create_time',
+        key: 'create_time'
+      },
+      {
+        title: '更新时间',
+        dataIndex: 'update_time',
+        key: 'update_time'
+      },
+
+      {
+        title: '操作',
+        dataIndex: 'operate',
+        key: 'operate',
+        scopedSlots: { customRender: 'action' }
+      }
+    ]
+  },
+  {
+    page: 'station',
+    columns: [
+      {
+        title: '场站ID',
+        dataIndex: 'station_id',
+        key: 'station_id',
+        ellipsis: true,
+        // filterable: true,
+        fixed: 'left'
+      },
+      {
+        title: '场站名称',
+        dataIndex: 'name',
+        key: 'name'
+        // filterable: true
+      },
+      {
+        title: '场站位置',
+        dataIndex: 'address',
+        key: 'address'
+        // filterable: true
+      },
+      {
+        title: '场站经度',
+        dataIndex: 'lon',
+        width: 50,
+        key: 'lon'
+        // filterable: true
+      },
+      {
+        title: '场站纬度',
+        dataIndex: 'lat',
+        width: 50,
+        key: 'lat'
+        // filterable: true
+      },
+      {
+        title: '储能容量',
+        dataIndex: 'capacity',
+        key: 'capacity'
+        // filterable: true
+      },
+      {
+        title: '场站电话',
+        dataIndex: 'tel',
+        key: 'tel',
+        ellipsis: true
+        // filterable: true
+      },
+      {
+        title: '场站类别',
+        dataIndex: 'capacity',
+        key: 'capacity',
+        scopedSlots: { customRender: 'capacity' }
+      },
+      {
+        title: '场站状态',
+        dataIndex: 'status',
+        key: 'status',
+        scopedSlots: { customRender: 'status' }
+      },
+      {
+        title: '场站运行模式',
+        dataIndex: 'work_mode_id',
+        key: 'work_mode_id',
+        scopedSlots: { customRender: 'work_mode_id' }
+      },
+      {
+        title: '场站运行策略',
+        dataIndex: 'policy_id',
+        key: 'policy_id',
+        scopedSlots: { customRender: 'policy_id' }
+      },
+
+      {
+        title: '操作',
+        dataIndex: 'operate',
+        key: 'operate',
+        scopedSlots: { customRender: 'action' }
+      }
+    ]
+  },
+  {
+    page: 'device',
+    columns: [
+      {
+        title: '设备ID',
+        dataIndex: 'device_id',
+        key: 'device_id',
+        ellipsis: true,
+        fixed: 'left'
+      },
+      {
+        title: '所属场站',
+        dataIndex: 'station_id',
+        key: 'station_id'
+        // filterable: true
+      },
+      {
+        title: '设备类型',
+        dataIndex: 'type',
+        key: 'type',
+        type: 'slot',
+        scopedSlots: { customRender: 'type' }
+      },
+      {
+        title: '设备名称',
+        dataIndex: 'name'
+      },
+      {
+        title: '设备编号',
+        dataIndex: 'code'
+      },
+
+      {
+        title: '厂家信息',
+        dataIndex: 'factory'
+      },
+      {
+        title: '厂家电话',
+        dataIndex: 'factory_tel'
+      },
+      {
+        title: '是否启用',
+        dataIndex: 'is_open',
+        key: 'is_open',
+        align: 'center',
+        scopedSlots: { customRender: 'isEnable' }
+      },
+
+      {
+        title: '属性参数',
+        dataIndex: 'attrs'
+      },
+      {
+        title: '操作',
+        dataIndex: 'operate',
+        key: 'operate',
+        scopedSlots: { customRender: 'action' }
+      }
+    ]
+  },
+  {
+    page: 'alarmLog',
+    columns: [
+      {
+        title: '日志ID',
+        dataIndex: 'log_id'
+      },
+
+      {
+        title: '日志类型',
+        dataIndex: 'type',
+        key: 'type',
+        width: 120,
+        scopedSlots: { customRender: 'type' }
+      },
+      {
+        title: '操作用户',
+        dataIndex: 'user_id',
+        key: 'user_id',
+        width: 120
+      },
+      {
+        title: '设备ID',
+        dataIndex: 'device_id',
+        key: 'device_id'
+      },
+      {
+        title: '日志内容',
+        dataIndex: 'content',
+        key: 'content',
+        ellipsis: true
+      },
+      {
+        title: '记录时间',
+        dataIndex: 'create_time',
+        key: 'create_time',
+        align: 'center',
+        ellipsis: true,
+        width: 180
+      },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        ellipsis: true,
+        scopedSlots: { customRender: 'status' },
+        width: 80,
+        align: 'center'
+      },
+      {
+        title: '操作',
+        dataIndex: 'operate',
+        key: 'operate',
+        scopedSlots: { customRender: 'action' }
+      }
+    ]
+  },
+  {
+    page: 'log',
+    columns: [
+      {
+        title: '用户',
+        dataIndex: 'userName',
+        width: 180
+      },
+
+      {
+        title: '日志类型',
         dataIndex: 'type',
         key: 'type',
         width: 120,
@@ -151,124 +332,282 @@ export const columnList = [
         scopedSlots: { customRender: 'type' }
       },
       {
-        title: '描述',
-        dataIndex: 'desc',
-        align: 'center',
-        key: 'desc',
+        title: '操作类型',
+        dataIndex: 'opType',
+        key: 'opType',
+        width: 120,
+
+        scopedSlots: { customRender: 'opType' }
+      },
+      {
+        title: 'ip',
+        dataIndex: 'ip',
+        key: 'ip'
+      },
+      {
+        title: '内容',
+        dataIndex: 'msg',
+        key: 'msg',
         ellipsis: true
       },
       {
-        title: '权限名称',
-        dataIndex: 'permissions',
-        align: 'center',
-        key: 'permissions',
-        width: 180,
-
-        ellipsis: true,
-        scopedSlots: { customRender: 'permissions' }
-      },
-      {
-        title: '创建时间',
+        title: '生成时间',
         dataIndex: 'createTime',
         key: 'createTime',
         align: 'center',
         ellipsis: true,
-        filterable: true,
         width: 180
       },
       {
-        title: '更新时间',
-        dataIndex: 'updateTime',
-        key: 'updateTime',
-        align: 'center',
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
         ellipsis: true,
-        filterable: true,
-        width: 180
+        scopedSlots: { customRender: 'status' },
+        width: 80,
+        align: 'center'
       },
-
-      {
-        title: '操作',
-        dataIndex: 'operate',
-        scopedSlots: { customRender: 'action' }
-      }
-    ]
-  },
-  {
-    page: 'permission',
-    columns: [
-      {
-        title: '权限名称',
-        dataIndex: 'name',
-        key: 'name',
-        ellipsis: true,
-        filterable: true,
-        fixed: 'left',
-        width: 180
-      },
-      {
-        title: '描述',
-        dataIndex: 'desc',
-        key: 'desc'
-      },
-      {
-        title: '是否可查询',
-        dataIndex: 'isQuery',
-        key: 'isQuery',
-        align: 'center',
-        width: 120,
-        scopedSlots: { customRender: 'isQuery' }
-      },
-      {
-        title: '是否可编辑',
-        dataIndex: 'isControl',
-        align: 'center',
-        key: 'isEdit',
-        width: 120,
-        scopedSlots: { customRender: 'isEdit' }
-      },
-      {
-        title: '是否可控制',
-        dataIndex: 'isEdit',
-        align: 'center',
-        key: 'isEdit',
-        key: 'isControl',
-        width: 120,
-        scopedSlots: { customRender: 'isControl' }
-      },
-
-      {
-        title: '创建时间',
-        dataIndex: 'createTime',
-        key: 'createTime',
-        align: 'center',
-        ellipsis: true,
-        filterable: true,
-        width: 180
-      },
-      {
-        title: '更新时间',
-        dataIndex: 'updateTime',
-        key: 'updateTime',
-        align: 'center',
-        ellipsis: true,
-        filterable: true,
-        width: 180
-      },
-
       {
         title: '操作',
         dataIndex: 'operate',
+        key: 'operate',
+        width: 80,
         scopedSlots: { customRender: 'action' }
       }
     ]
   }
 ]
 
-export const options = [
+export const userOptions = [
   {
     title: '基础信息',
     icon: 'icon-xinxi',
     list: [
+      {
+        label: '用户名',
+        value: '',
+        key: 'account',
+        type: 'input'
+      },
+      {
+        label: '姓名',
+        value: '',
+        key: 'name',
+        type: 'input'
+      },
+      {
+        label: '性别',
+        value: undefined,
+        key: 'gender',
+        type: 'select',
+        list: [
+          {
+            label: '女',
+            value: '0'
+          },
+          {
+            label: '男',
+            value: '1'
+          }
+        ]
+      },
+      {
+        label: '年龄',
+        value: '',
+        key: 'age',
+        type: 'input'
+      },
+      {
+        label: '手机号',
+        value: '',
+        key: 'phone',
+        type: 'input'
+      },
+      {
+        label: '邮箱',
+        value: '',
+        key: 'email',
+        type: 'input'
+      },
+      {
+        label: '角色名称',
+        value: undefined, //根据角色id回显角色
+        key: 'role_id',
+        type: 'slot',
+        slotName: 'role_id'
+      }
+    ],
+    ruleForm: {}
+  }
+]
+export const roleOptions = [
+  {
+    title: '基础信息',
+    icon: 'icon-xinxi',
+    list: [
+      {
+        label: '角色名称',
+        value: '',
+        key: 'name',
+        type: 'input'
+      },
+
+      {
+        label: '关联权限',
+        value: '',
+        key: 'permission',
+        type: 'slot',
+        slotName: 'permission',
+        className: 'item-l'
+      },
+      {
+        // 0:禁用; 1:启用
+        label: '是否启用',
+        value: undefined,
+        key: 'is_open',
+        type: 'switch',
+        className: 'item-l',
+
+        list: [
+          {
+            label: '禁用',
+            value: '0'
+          },
+          {
+            label: '启用',
+            value: '1'
+          }
+        ]
+      },
+      {
+        label: '角色描述',
+        value: '',
+        key: 'describe',
+        type: 'textarea'
+      }
+    ],
+    ruleForm: {}
+  }
+]
+export const stationOptions = [
+  {
+    title: '基础信息',
+    icon: 'icon-xinxi',
+    list: [
+      {
+        label: '场站名称',
+        value: '',
+        key: 'name',
+        type: 'input'
+      },
+      {
+        label: '场站位置',
+        value: '',
+        key: 'address',
+        type: 'input'
+      },
+      {
+        label: '场站经度',
+        value: '',
+        key: 'lon',
+        type: 'input'
+      },
+      {
+        label: '场站纬度',
+        value: '',
+        key: 'lat',
+        type: 'input'
+      },
+      {
+        label: '储能容量',
+        value: '',
+        key: 'capacity',
+        type: 'input'
+      },
+      {
+        label: '场站电话',
+        value: '',
+        key: 'tel',
+        type: 'input'
+      },
+      {
+        // 0：未启用，1：启用
+        label: '场站状态',
+        value: undefined,
+        key: 'status',
+        type: 'switch',
+        className: 'item-l',
+
+        list: [
+          {
+            label: '未启用',
+            value: '0'
+          },
+          {
+            label: '启用',
+            value: '1'
+          }
+        ]
+      },
+      {
+        // 0：未启用，1：启用
+
+        label: '场站运行模式',
+        value: undefined,
+        key: 'work_mode_id',
+        type: 'select',
+        list: [
+          {
+            label: '最优经济化',
+            value: '1'
+          },
+          {
+            label: '支撑电网稳定',
+            value: '2'
+          },
+          {
+            label: '自定义',
+            value: '3'
+          }
+        ]
+      },
+      {
+        // 0：未启用，1：启用
+
+        label: '场站运行策略',
+        value: undefined,
+        key: 'policy_id',
+        type: 'select',
+        list: [
+          {
+            label: '削峰套利',
+            value: '1'
+          },
+          {
+            label: '需求响应',
+            value: '2'
+          },
+          {
+            label: '自发自用',
+            value: '3'
+          }
+        ]
+      }
+    ],
+    ruleForm: {}
+  }
+]
+export const deviceOptions = [
+  {
+    title: '基础信息',
+    icon: 'icon-xinxi',
+    list: [
+      {
+        label: '编号',
+        value: '',
+        key: 'code',
+        type: 'input'
+      },
       {
         label: '名称',
         value: '',
@@ -276,67 +615,209 @@ export const options = [
         type: 'input'
       },
       {
-        label: '账户类型',
-        value: undefined,
-        // dataIndex: 'type',
+        label: '类型',
+        value: '',
         key: 'type',
         type: 'select',
-        list: [
-          {
-            label: '虚拟账户',
-            value: 0
-          },
-          {
-            label: '卡账户',
-            value: 1
-          }
-        ]
+        list: deviceTypeList,
+        options: {
+          label: 'label',
+          value: 'value'
+        }
       },
 
       {
-        label: '账号',
-        value: [],
-        key: 'code',
+        label: '所属场站',
+        value: undefined,
+        key: 'station_id',
+        type: 'select',
+        list: [],
+        options: {
+          label: 'name',
+          value: 'station_id'
+        }
+        // slotName: 'searchSelect'
+      },
+      {
+        label: '厂家',
+        value: '',
+        key: 'factory',
         type: 'input'
       },
       {
-        label: '用户',
-        value: undefined,
-        // dataIndex: 'userId',
-        key: 'userId',
-        type: 'select',
-        list: []
+        label: '厂家电话',
+        value: '',
+        key: 'factory_tel',
+        type: 'input'
       },
       {
-        label: '余额',
+        label: '是否启用',
         value: '',
-        key: 'money',
-        type: 'input',
-        inputType: 'number'
-      },
-      {
-        label: '账户状态',
-        value: '',
-        key: 'status',
-        type: 'select',
-        list: [
-          {
-            label: '正常',
-            value: 0
-          },
-          {
-            label: '注销',
-            value: 1
-          },
-          {
-            label: '异常',
-            value: 9
-          }
-        ]
+        key: 'is_open',
+        type: 'switch'
       }
     ],
-    ruleForm: {
-      // selectTableData: [],
-    }
+    ruleForm: {}
+  },
+  {
+    title: '设备属性参数',
+    icon: 'icon-xinxi',
+    list: [
+      {
+        label: '额定电压',
+        value: '',
+        key: 'rated_voltage',
+        type: 'input-number'
+      },
+      {
+        label: '额定电流',
+        value: '',
+        key: 'rated_current',
+        type: 'input-number'
+      },
+      {
+        label: '额定功率',
+        value: '',
+        key: 'reted_power',
+        type: 'input-number'
+      },
+
+      {
+        label: '额定容量',
+        value: undefined,
+        key: 'rated_capacity',
+        type: 'input-number'
+      }
+    ],
+    ruleForm: {}
   }
 ]
+// log
+export const alarmlogOptions = [
+  {
+    title: '基础信息',
+    icon: 'icon-xinxi',
+    list: [
+      {
+        label: '日志ID',
+        value: '',
+        key: 'log_id',
+        type: 'input'
+      },
+      {
+        label: '日志类型',
+        value: '',
+        key: 'type',
+        type: 'select',
+        list: logTypes,
+        disabled: true
+      },
+      {
+        label: '操作用户ID',
+        value: '',
+        key: 'user_id',
+        type: 'input',
+        disabled: true
+      },
+      {
+        label: '设备ID',
+        value: '',
+        key: 'device_id',
+        type: 'input',
+        disabled: true
+      },
+      {
+        label: '日志内容',
+        value: '',
+        key: 'content',
+        type: 'textarea',
+        disabled: true,
+        className: 'item-l',
+        rows: 8
+      },
+      {
+        label: '记录时间',
+        value: '',
+        key: 'create_time',
+        type: 'input'
+      },
+
+      {
+        label: '状态',
+        type: 'select',
+        list: [
+          { value: 0, label: '异常' },
+          { value: 1, label: '正常' }
+        ],
+        value: [],
+        key: 'status'
+      }
+    ],
+    ruleForm: {}
+  }
+]
+
+export const userFormRules = {
+  account: [
+    {
+      trigger: 'blur',
+      required: true,
+      message: '请输入用户名'
+    }
+  ],
+  name: [
+    {
+      trigger: 'blur',
+      required: true,
+      message: '请输入姓名'
+    }
+  ]
+}
+export const roleFormRules = {
+  name: [
+    {
+      trigger: 'blur',
+      required: true,
+      message: '请输入角色名称'
+    }
+  ]
+}
+export const stationFormRules = {
+  name: [
+    {
+      trigger: 'blur',
+      required: true,
+      message: '请输入场站名称'
+    }
+  ]
+}
+export const deviceFormRules = {
+  name: [
+    {
+      trigger: 'blur',
+      required: true,
+      message: '请输入设备名称'
+    }
+  ],
+  code: [
+    {
+      trigger: 'blur',
+      required: true,
+      message: '请输入设备编号'
+    }
+  ],
+  type: [
+    {
+      trigger: 'change',
+      required: true,
+      message: '请选择设备类型'
+    }
+  ],
+  station_id: [
+    {
+      trigger: 'change',
+      required: true,
+      message: '请选择场站名称'
+    }
+  ]
+}
diff --git a/web/public/index.html b/web/public/index.html
index 11a9498..c6133d9 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_5010233_ev88efo2nou.css" />
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_5010233_6lxuclaoex9.css" />
   </head>
   <body>
     <noscript>
diff --git a/web/src/assets/boxBottom.png b/web/src/assets/boxBottom.png
new file mode 100644
index 0000000..b0f42db
Binary files /dev/null and b/web/src/assets/boxBottom.png differ
diff --git a/web/src/components/ComTable.vue b/web/src/components/ComTable.vue
index 9b1ff53..73279b9 100644
--- a/web/src/components/ComTable.vue
+++ b/web/src/components/ComTable.vue
@@ -360,8 +360,6 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
 }
 //表格样式
 :deep(.ant-table-tbody) {
-  color: var(--theme-text-default) !important;
-
   > tr {
     &:hover {
       > .ant-table-cell {
diff --git a/web/src/components/DetailInfo.vue b/web/src/components/DetailInfo.vue
new file mode 100644
index 0000000..186847e
--- /dev/null
+++ b/web/src/components/DetailInfo.vue
@@ -0,0 +1,711 @@
+<!-- item.type:xxxx-unshow:表示不显示  items.displayFlag为false表示不展示卡片 -->
+<template>
+  <div class="card-content">
+    <a-card style="margin: 0 0 15px 0; text-align: left">
+      <div :class="['info-title', items.title ? '' : 'title-none']">
+        <div class="box">
+          <div>
+            {{ items.title ? items.title : '基础信息' }}
+          </div>
+
+          <a-tooltip
+            placement="bottomLeft"
+            trigger="['hover','click']"
+            :overlay-style="{ color: '#ccc' }"
+            v-if="items.tooltip && items.tooltip !== ''"
+          >
+            <template #title>
+              <!--       -->
+              <span v-html="items.tooltip"></span>
+            </template>
+            <ExclamationCircleOutlined
+              :style="{
+                fontSize: '18px',
+                color: 'var(--theme-text3)',
+                cursor: 'pointer',
+                position: 'relative',
+                top: '0',
+                left: '15px'
+              }"
+            />
+          </a-tooltip>
+        </div>
+      </div>
+      <div class="info-content">
+        <a-form
+          layout="horizontal"
+          :wrap="true"
+          ref="formRef"
+          :rules="props.formRules"
+          name="info-form"
+          class="info-form"
+          label-align="left"
+          :model="propsInfo.ruleForm.value"
+          @submit="handleSubmit"
+          @onFieldsChange="onFieldsChange"
+        >
+          <template v-for="item in items.list">
+            <div
+              v-if="item.type !== 'unshow'"
+              :key="item.key"
+              :class="item.className ? [item.className, 'item-div'] : 'item-div'"
+            >
+              <a-form-item
+                :label="item.label"
+                :name="item.key"
+                :class="[item.colStatus || item.type === 'table' ? 'item-width' : 'form-item']"
+                :tooltip="item.tooltip ? item.tooltip : ''"
+              >
+                <a-input-password
+                  v-if="item.type === 'input-password'"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  :placeholder="'请输入' + item.label"
+                  :disabled="!props.disabled && type ? !!item.disabled : props.disabled"
+                />
+                <a-input
+                  v-if="item.type === 'input'"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  :type="item.inputType"
+                  :placeholder="'请输入' + item.label"
+                  :disabled="!props.disabled && type ? !!item.disabled : props.disabled"
+                />
+
+                <a-input-number
+                  v-if="item.type == 'input-number'"
+                  id="inputNumber"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  :min="item.min || 0"
+                  :max="item.max || 10000000"
+                  :formatter="item.formatter || null"
+                  :addon-before="item.addonBefore"
+                  :disabled="props.disabled"
+                />
+
+                <a-date-picker
+                  v-if="item.type === 'date-picker'"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  :placeholder="'请输入' + item.label"
+                  :disabled="props.disabled"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                />
+
+                <a-date-picker
+                  show-time
+                  v-if="item.type === 'time'"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  :disabled="props.disabled"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  :placeholder="'请输入' + item.label"
+                />
+                <a-range-picker
+                  v-if="item.type === 'date-time'"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  :disabled="props.disabled"
+                  show-time
+                />
+                <a-time-range-picker
+                  v-if="item.type === 'timeRangePicker'"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  value-format="HH:mm"
+                  format="HH:mm"
+                  :disabled="props.disabled"
+                />
+                <a-time-picker
+                  v-if="item.type === 'timePicker'"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  value-format="HH:mm"
+                  format="HH:mm"
+                  :disabled="props.disabled"
+                />
+                <a-textarea
+                  v-if="item.type === 'textarea'"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  :placeholder="'请输入' + item.label"
+                  allow-clear
+                  :disabled="!props.disabled && type ? !!item.disabled : props.disabled"
+                  :auto-size="item.autoSize ? item.autoSize : { minRows: 3, maxRows: 10 }"
+                />
+
+                <a-select
+                  :dropdown-match-select-width="false"
+                  v-if="item.type === 'select'"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  :placeholder="'请选择' + item.label"
+                  :disabled="!props.disabled && type ? !!item.disabled : props.disabled"
+                  allow-clear
+                >
+                  <template v-if="item.options">
+                    <a-select-option
+                      :value="selectItem[item.options.value]"
+                      v-for="selectItem in item.list"
+                      :key="selectItem[item.options.value]"
+                    >
+                      {{ selectItem[item.options.label] }}
+                    </a-select-option>
+                  </template>
+                  <template v-else>
+                    <a-select-option
+                      :value="selectItem.value"
+                      v-for="selectItem in item.list"
+                      :key="selectItem.value"
+                    >
+                      {{ selectItem.label }}
+                    </a-select-option>
+                  </template>
+                </a-select>
+                <!-- 下拉多选 -->
+                <a-select
+                  :dropdown-match-select-width="false"
+                  v-if="item.type === 'selectMultiple'"
+                  mode="multiple"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  :placeholder="'请选择' + item.label"
+                  :disabled="!props.disabled && type ? !!item.disabled : props.disabled"
+                  allow-clear
+                >
+                  <a-select-option
+                    :value="selectItem.value"
+                    v-for="selectItem in item.list"
+                    :key="selectItem.value"
+                  >
+                    {{ selectItem.label }}
+                  </a-select-option>
+                </a-select>
+                <!-- 新增时disabled -->
+                <a-select
+                  :dropdown-match-select-width="false"
+                  v-if="item.type === 'select-disabled'"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  :placeholder="'请选择' + item.label"
+                  :disabled="!props.disabled ? item.disabled : props.disabled"
+                  allow-clear
+                >
+                  <a-select-option
+                    :value="selectItem.value"
+                    v-for="selectItem in item.list"
+                    :key="selectItem.value"
+                  >
+                    {{ selectItem.label }}
+                  </a-select-option>
+                </a-select>
+                <!-- 下拉展示icon -->
+                <a-select
+                  v-if="item.type === 'icon-select'"
+                  :get-popup-container="(triggerNode) => triggerNode.parentNode"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  allow-clear
+                  option-label-prop="children"
+                >
+                  <a-select-option
+                    v-for="icon in iconList"
+                    :key="icon.icon_id"
+                    :value="`icon-${icon.font_class}`"
+                  >
+                    <i
+                      class="iconfont"
+                      :class="`icon-${icon.font_class}`"
+                      style="margin-right: 8px"
+                    ></i>
+                    <span> {{ icon.name }} </span>
+                  </a-select-option>
+                </a-select>
+
+                <a-switch
+                  v-if="item.type === 'switch'"
+                  v-model:checked="propsInfo.ruleForm.value[item.key]"
+                  style="margin-bottom: 5px"
+                  :disabled="!props.disabled && type ? !!item.disabled : props.disabled"
+                />
+
+                <a-radio-group
+                  name="radioGroup"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  v-if="item.type === 'radio'"
+                  :disabled="props.disabled"
+                >
+                  <a-radio
+                    :value="radioItem.value"
+                    v-for="radioItem in item.list"
+                    :key="radioItem.value"
+                  >
+                    {{ radioItem.label }}
+                  </a-radio>
+                </a-radio-group>
+
+                <a-tree-select
+                  :disabled="props.disabled"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  v-if="item.type === 'tree-radio'"
+                  style="width: 100%"
+                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+                  :tree-data="item.list"
+                  :placeholder="'请选择' + item.label"
+                  :field-names="
+                    item.replaceFields
+                      ? item.replaceFields
+                      : {
+                          children: 'children',
+                          title: 'title',
+                          key: 'key',
+                          value: 'value'
+                        }
+                  "
+                />
+
+                <a-tree-select
+                  :allow-clear="true"
+                  :disabled="props.disabled"
+                  v-if="item.type === 'tree-check'"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  style="width: 100%"
+                  :tree-data="item.list"
+                  :tree-checkable="true"
+                  :show-checked-strategy="SHOW_PARENT"
+                  :placeholder="'请选择' + item.label"
+                  :field-names="
+                    item.replaceFields
+                      ? item.replaceFields
+                      : {
+                          children: 'children',
+                          title: 'title',
+                          key: 'key',
+                          value: 'value'
+                        }
+                  "
+                  :check="checkTree"
+                />
+
+                <a-tree-select
+                  :allow-clear="true"
+                  :disabled="props.disabled"
+                  v-if="item.type === 'tree-check-org'"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  style="width: 100%"
+                  :tree-data="item.list"
+                  allow-clear
+                  multiple
+                  tree-default-expand-all
+                  :placeholder="'请选择' + item.label"
+                  :field-names="
+                    item.replaceFields
+                      ? item.replaceFields
+                      : {
+                          children: 'children',
+                          title: 'title',
+                          key: 'key',
+                          value: 'value'
+                        }
+                  "
+                  :check="checkTree"
+                />
+
+                <a-cascader
+                  :disabled="props.disabled"
+                  v-if="item.type === 'cascader'"
+                  :options="item.list"
+                  :field-names="
+                    item.fieldNames
+                      ? item.fieldNames
+                      : { label: 'label', value: 'value', children: 'children' }
+                  "
+                  :show-search="{ filter }"
+                  :placeholder="'请选择' + item.label"
+                  v-model:value="propsInfo.ruleForm.value[item.key]"
+                  change-on-select
+                >
+                </a-cascader>
+
+                <a-checkbox
+                  v-if="item.type === 'checkbox'"
+                  v-model:checked="propsInfo.ruleForm.value[item.key]"
+                >
+                </a-checkbox>
+                <div v-if="item.type === 'tag'" class="table-css">
+                  <a-tag :color="propsInfo.ruleForm.value[item.key] ? 'green' : 'red'">
+                    {{ item.list[propsInfo.ruleForm.value[item.key]] }}
+                  </a-tag>
+                </div>
+                <!-- </a-col>-->
+
+                <!-- <a-button v-if="item.type === 'btn'" @click="btnClick(item)">{{ item.title }}</a-button> -->
+                <div v-if="item.type === 'table'" class="table-css">
+                  <slot :name="item.type" v-bind="item"></slot>
+                </div>
+
+                <div v-if="item.type === 'treetable'" class="table-css">
+                  <slot :name="item.type" v-bind="item"></slot>
+                </div>
+
+                <div v-if="item.type === 'slot'">
+                  <slot
+                    :name="item.slotName"
+                    v-bind="{ ...item, ...propsInfo.ruleForm.value }"
+                  ></slot>
+                </div>
+              </a-form-item>
+            </div>
+          </template>
+
+          <!-- <a-form-item
+            v-for="item in items.list"
+            :key="item.key"
+            :label="item.label"
+            :name="item.key"
+            :class="[item.colStatus ? 'item-width' : 'form-item']"
+          > -->
+        </a-form>
+      </div>
+    </a-card>
+  </div>
+</template>
+<script setup>
+import { UserOutlined, InfoCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import {
+  ref,
+  reactive,
+  defineProps,
+  defineEmits,
+  watch,
+  toRefs,
+  onMounted,
+  defineExpose
+} from 'vue'
+import { TreeSelect } from 'ant-design-vue'
+import iconfonts from '../assets/iconfont/iconfont.json'
+import validateRulesObj from '../utils/decorator'
+
+const iconList = iconfonts.glyphs
+const formRef = ref()
+const props = defineProps({
+  items: {
+    type: Object,
+    required: () => []
+  },
+  formRules: {
+    type: Object
+  },
+  ruleForm: {
+    type: Object
+  },
+
+  disabled: {
+    type: Boolean
+  },
+  type: {
+    type: Boolean,
+    default: false
+  }
+})
+const propsInfo = toRefs(props)
+const exposeRuleForm = propsInfo.ruleForm.value
+onMounted(() => {})
+const emit = defineEmits(['handlerClick'])
+const data = reactive({
+  validateRulesObj,
+  newRuleForm: {},
+  // : {},
+  key: 0,
+  tableIndex: null,
+  tableInfo: [],
+  // tableIndex: 0,
+  mockData: [{}],
+  targetKeys: [],
+  // 单选-树节点
+  treeRadioValue: null,
+  treeData: [
+    { id: 1, pId: 0, value: '1', title: 'Expand to load' },
+    { id: 2, pId: 0, value: '2', title: 'Expand to load' },
+    { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true }
+  ],
+
+  treeCheckValue: null,
+  SHOW_PARENT: TreeSelect.SHOW_PARENT,
+
+  loading: false,
+  imageUrl: ''
+})
+const extraInformation = ref(
+  'Cron表达式由6个(或7个)字段组成，分别表示秒、分、小时、月中的日期、月份、星期中的日期(以及可选的年份)。每个字段可以包含以下字符:·星号(*):表示该字段可以接受任何值、·问号(?):通常用于"日”和"星期”字段，表示不指定值，即表示“无特定值”。·连字符(-):用于指定范围，如"10-12”表示10、11、12·逗号():用于指定多个值，如“MON,WED,FRI”表示星期一、星期三和星期五。·斜杠(/):用于指定增量，如“0/15”在秒字段中表示从0秒开始，每15秒一次。·L:在"日”字段中表示一个月的最后一天，在"星期”字段中表示一个星期的最后一天(通常是星期六)。W:用于指定最近的工作日(周一至周五)，如“15W”表示离15号最近的工作日。”#:用于指定一个月中的第几个星期几，如“6#3”表示一个月中的第三个星期五。个典型的Cron表达式示例是:"0012**?”，它表示每天中午12点触发'
+)
+watch(
+  () => props.formRules,
+  (nVal, o) => {
+    for (const key in nVal) {
+      nVal[key].forEach((item) => {
+        if (item.validatorType) {
+          item.validator = data.validateRulesObj[item.validatorType]?.rules[0].validator
+        }
+      })
+    }
+  },
+  { deep: true, immediate: true }
+)
+function checkTree(checkedKeys, e) {}
+// 按钮的点击事件
+function btnClick(item) {
+  emit('handlerClick', item)
+}
+function confirm() {
+  return new Promise((resolve, reject) => {
+    if (formRef.value) {
+      formRef.value
+        .validate()
+        .then(() => {
+          resolve(true)
+        })
+        .catch((error) => {
+          console.log('error', error)
+          resolve(false)
+        })
+    }
+  })
+}
+function handleReset() {
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+function switchChange(checked, switchItem) {
+  propsInfo.ruleForm.value[switchItem.key] = checked
+}
+function RadioChange(e, radioItem) {
+  const { value } = e.target
+  propsInfo.ruleForm.value[radioItem.key] = value
+}
+function transferChange(targetKeys, transferItem) {
+  data.targetKeys = targetKeys
+  propsInfo.ruleForm.value[transferItem.key] = data.targetKeys
+}
+function transferSearch(dir, value) {}
+
+// 单选-树节点
+function genTreeNode(parentId, isLeaf = false) {
+  const random = Math.random().toString(36).substring(2, 6)
+  return {
+    id: random,
+    pId: parentId,
+    value: random,
+    title: isLeaf ? 'Tree Node' : 'Expand to load',
+    isLeaf
+  }
+}
+
+function onLoadTree(treeNode) {
+  return new Promise((resolve) => {
+    const { id } = treeNode.dataRef
+    setTimeout(() => {
+      data.treeData = data.treeData.concat([
+        data.genTreeNode(id, false),
+        data.genTreeNode(id, true)
+      ])
+      resolve()
+    }, 300)
+  })
+}
+
+function treeChange(key, value, node, extra) {
+  propsInfo.ruleForm.value[key] = value
+}
+
+// 级联选择器
+function cascaderChange(value, cascaderItem) {
+  propsInfo.ruleForm.value[cascaderItem.key] = value
+}
+
+function filter(inputValue, path) {
+  return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
+}
+
+function avatarUploadChange(info) {
+  if (info.file.status === 'uploading') {
+    data.loading = true
+    return
+  }
+  if (info.file.status === 'done') {
+    getBase64(info.file.originFileObj, (imageUrl) => {
+      data.imageUrl = imageUrl
+      data.loading = false
+    })
+  }
+}
+
+function onFieldsChange() {}
+function handleSubmit() {}
+
+function getBase64(img, callback) {
+  const reader = new FileReader()
+  reader.addEventListener('load', () => callback(reader.result))
+  reader.readAsDataURL(img)
+}
+
+// 主动暴露方法
+defineExpose({
+  confirm,
+  handleReset,
+  ruleForm: exposeRuleForm
+})
+</script>
+
+<style lang="scss" scoped>
+.allHeight {
+  height: 100%;
+}
+.card-content:first-child {
+  margin-top: 0px;
+}
+.card-content {
+  margin-top: 15px;
+}
+
+:deep(.ant-timeline) {
+  color: var(--theme-text-default) !important;
+
+  .ant-timeline-item-tail {
+    border-inline-start: 2px solid var(--theme-text-default) !important;
+  }
+}
+:deep(.ant-form-item .ant-form-item-label > label) {
+  color: var(--theme-text-default) !important;
+}
+.info-title {
+  font-size: 18px;
+  font-weight: 530;
+  color: var(--theme-text-default);
+  text-align: left;
+  border-bottom: 1.5px solid var(--theme-bg);
+  margin-bottom: 20px;
+
+  .box {
+    color: #fff;
+    width: 230px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    border-bottom: 5px solid transparent;
+    border-image: url('../assets/boxBottom.png') 0 0 100% 0 stretch;
+
+    div:last-child {
+      height: 25px;
+      line-height: 25px;
+    }
+  }
+  :deep(.a-tooltip) {
+    color: var(--theme-text3);
+  }
+  :deep(.ant-divider) {
+    color: var(--theme-bg);
+  }
+}
+
+// :deep(.ant-table-wrapper) {
+//   :deep(.ant-input) {
+//     background: red !important;
+//   }
+// }
+
+.title-none {
+  display: none;
+}
+:deep(.ant-card) {
+  background-color: transparent;
+}
+:deep(.ant-card-body) {
+  padding: 15px;
+  height: 100%;
+  border-radius: 8px;
+  .ant-form {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    height: 100%;
+    .item-l,
+    .item-div {
+      height: 100%;
+    }
+  }
+}
+.ant-card-bordered {
+  border: none;
+}
+.info-content {
+  height: calc(100% - 30px);
+  .info-form {
+    .item-div {
+      width: 45%;
+
+      display: inline-block;
+    }
+    .item-l {
+      width: 100%;
+    }
+
+    .form-item {
+      width: 320px !important;
+    }
+  }
+}
+
+:deep(.ant-form-item-label) {
+  color: #fff;
+  font-size: 16px !important;
+  width: 100px;
+}
+
+:deep(.ant-form-item-control-wrapper) {
+  flex: 1;
+}
+
+.editable-row-operations a {
+  margin-right: 8px;
+}
+// 表格中的按钮
+:deep(.ant-table-cell) {
+  .ant-btn {
+    height: 24px !important;
+    color: #fff;
+  }
+  .ant-btn-dangerous {
+    background: var(--theme-btn2) !important;
+  }
+  .btn-del {
+    background: var(--theme-btn2);
+  }
+  .btn-add {
+    background: var(--theme-btn3);
+  }
+  .btn-upload,
+  .btn-downTemplate {
+    background: var(--theme-btn1);
+  }
+}
+
+:deep(.ant-calendar-picker) {
+  width: 100% !important;
+}
+:deep(.ant-picker) {
+  width: 100% !important;
+}
+:deep(.ant-input-number) {
+  width: 100% !important;
+}
+
+:deep(.ant-form-item.form-item) {
+  padding: 0px !important;
+  padding-right: 20px !important;
+}
+
+:deep(.ant-checkbox-disabled + span) {
+  color: var(--theme-text-default) !important;
+}
+
+:deep(textarea.ant-input) {
+  background-color: var(--theme-bg) !important;
+  border: none !important;
+  color: var(--theme-text-default) !important;
+}
+
+:deep(.ant-checkbox-wrapper) {
+  color: var(--theme-text-default);
+}
+</style>
diff --git a/web/src/components/EditCom.vue b/web/src/components/EditCom.vue
new file mode 100644
index 0000000..71247f0
--- /dev/null
+++ b/web/src/components/EditCom.vue
@@ -0,0 +1,420 @@
+<template>
+  <div class="editCom">
+    <template v-for="(detailInfo, index) in detailInfos" :key="index">
+      <DetailInfo
+        :items="detailInfo"
+        :rule-form="detailInfo.ruleForm"
+        :form-rules="formRules"
+        :ref="'detailInfo' + index"
+        :disabled="disabled"
+      >
+        <template #role_id="item">
+          <a-select
+            :dropdown-match-select-width="false"
+            v-model:value="detailInfo.ruleForm[item.key]"
+            :placeholder="'请选择' + item.label"
+            :disabled="disabled"
+            allow-clear
+          >
+            <a-select-option
+              :value="selectItem.role_id"
+              v-for="selectItem in roleIdList"
+              :key="selectItem.role_id"
+            >
+              {{ selectItem.name }}
+            </a-select-option>
+          </a-select>
+        </template>
+        <template #treetable="item">
+          <TreeTable
+            :columns="item.columns"
+            :table-data="item.tableData"
+            ref="treeTable"
+            :transfer-dialog="transferDialog"
+            @handleDetailPagesizeChange="handleDetailPagesizeChange"
+            :table-option="{
+              checkStrictly: false,
+              selectTableData: item.selectTableData,
+              scroll: { y: 500 }
+            }"
+          >
+            <template #isQuery="record">
+              <a-tag :color="record.isQuery ? 'green' : 'red'">{{
+                record.isQuery ? '启用' : '禁用'
+              }}</a-tag>
+            </template>
+            <template #isEdit="record">
+              <a-tag :color="record.isEdit ? 'green' : 'red'">{{
+                record.isEdit ? '启用' : '禁用'
+              }}</a-tag>
+            </template>
+            <template #isControl="record">
+              <a-tag :color="record.isControl ? 'green' : 'red'">{{
+                record.isControl ? '启用' : '禁用'
+              }}</a-tag>
+            </template>
+          </TreeTable>
+        </template>
+      </DetailInfo>
+    </template>
+
+    <div style="display: flex; justify-content: center; gap: 20px">
+      <a-button @click="handleback">取消</a-button>
+      <a-button @click="handleConfirm" type="primary" :disabled="disabled">确认</a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  userOptions,
+  userFormRules,
+  roleOptions,
+  roleFormRules,
+  stationOptions,
+  stationFormRules,
+  deviceOptions,
+  deviceFormRules,
+  alarmlogOptions
+} from '../../public/config/columnList'
+import DetailInfo from './DetailInfo.vue'
+import { postReq, getReq } from '@/request/api'
+const dictionary = {
+  menu: '菜单',
+  file: '文件',
+  role: '角色',
+  permission: '权限',
+  account: '账户',
+  log: '日志',
+  server: '服务',
+  computer: '主机'
+}
+export default {
+  name: '',
+  components: { DetailInfo },
+  props: {
+    action: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    record: {
+      type: Object,
+      default: () => {}
+    }
+  },
+
+  data() {
+    return {
+      tip: '正在加载...',
+      roleIdList: [],
+      transferDialog: false,
+      detailInfos: [],
+      disabled: true,
+      formRules: {},
+      apiMethods: {
+        // menu: 'menuConfirm',
+        // permission: 'permissionConfirm',
+        user: 'userConfirm',
+        role: 'roleConfirm',
+        device: 'deviceConfirm'
+      },
+      form: {},
+      ObjInfo: {},
+      loading: false
+    }
+  },
+  computed: {},
+  watch: {
+    action: {
+      handler(n) {
+        if (n === 'read') {
+          this.disabled = true
+        } else {
+          this.disabled = false
+        }
+      },
+      immediate: true
+    },
+
+    type: {
+      async handler(n) {
+        switch (n) {
+        case 'user':
+          this.detailInfos = userOptions
+          this.formRules = userFormRules
+          break
+        case 'menu':
+          //   this.detailInfos = menuOptions
+          //   this.formRules = menuFormRules
+          break
+        case 'permission':
+          //   this.detailInfos = permissionOptions
+          //   this.formRules = permissionFormRules
+          break
+
+        case 'role':
+          this.detailInfos = roleOptions
+          this.formRules = roleFormRules
+          break
+
+        case 'station':
+          this.detailInfos = stationOptions
+          this.formRules = stationFormRules
+
+          break
+        case 'device':
+          this.detailInfos = deviceOptions
+          this.formRules = deviceFormRules
+          break
+        case 'alarmLog':
+          this.detailInfos = alarmlogOptions
+          this.formRules = {}
+
+          break
+
+        default:
+          break
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.getRoleIdList()
+  },
+  methods: {
+    async getRoleIdList() {
+      const params = {
+        page_size: 1000,
+        page: 1
+      }
+      try {
+        const res = await getReq('/queryRoleList', params)
+        if (res.errcode === 0) {
+          this.roleIdList = res.data
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        this.roleIdList = []
+        //统一处理报错提示
+      }
+    },
+    handleChange(value) {
+      this.ip = ''
+      this.selectComputer = value.option
+      this.selectComputer.id = value.option.value
+      this.ipList = this.getIpOptions(this.selectComputer.id)
+    },
+
+    handleDetailPagesizeChange(val) {
+      this.detailInfos[val[1]].list[0].detailPaginationOption = {
+        ...this.detailInfos[val[1]].list[0].detailPaginationOption,
+        ...val[0]
+      }
+
+      if (this.detailInfos[val[1]].list[0].key === 'servebiaoge') {
+        //  应用信息中消息模板需要通过接口调用数据
+        let arr = {
+          ids: this.clickId,
+          pageIndex: val[0].current,
+          pageSize: val[0].pageSize
+        }
+      }
+    },
+
+    handleRemove(file) {
+      const index = this.fileList.indexOf(file)
+
+      this.fileList.splice(index, 1)
+    },
+
+    beforeUpload(file, fileList) {
+      this.fileList = [...this.fileList, file]
+
+      return false
+    },
+
+    //  调用子组件的表单的方法
+    async handleConfirm() {
+      const result = []
+      const { length } = this.detailInfos
+
+      for (let index = 0; index < length; index++) {
+        //  校验规则
+        const res = await this.$refs[`detailInfo${index}`][0].confirm()
+        result.push(res)
+        if (!res) {
+          break
+        }
+      }
+      if (result.every((item) => item == true)) {
+        this.handleSubmit()
+      }
+    },
+    handleSubmit() {
+      const { length } = this.detailInfos
+      let form = {}
+      for (let index = 0; index < length; index++) {
+        if (this.$refs[`detailInfo${index}`][0].ruleForm) {
+          form = Object.assign(this.$refs[`detailInfo${index}`][0].ruleForm, form)
+        } else {
+          console.log('对象为空')
+        }
+      }
+      this.form = form
+      eval('this.' + this.apiMethods[this.type] + '()')
+    },
+
+    async userConfirm() {
+      try {
+        const menuApi = {
+          add: '/insertUser',
+          edit: '/updateUser'
+        }
+        const paramsDate = {
+          ...this.form
+        }
+        if (this.action == 'edit') {
+          paramsDate.user_id = this.record.user_id
+        }
+
+        const res = await postReq(menuApi[this.action], paramsDate)
+        if (res.errcode === 0) {
+          setTimeout(() => {
+            this.handleback()
+          }, 1000)
+        } else {
+          throw res
+        }
+      } catch (error) {
+        console.log(error, 'userConfirm')
+      }
+    },
+    async roleConfirm() {
+      try {
+        const menuApi = {
+          add: '/insertRole',
+          edit: '/deleteRole'
+        }
+        const paramsDate = {
+          ...this.form
+        }
+        if (this.action == 'edit') {
+          paramsDate.role_id = this.record.role_id
+        }
+
+        const res = await postReq(menuApi[this.action], paramsDate)
+        if (res.errcode === 0) {
+          setTimeout(() => {
+            this.handleback()
+          }, 1000)
+        } else {
+          throw res
+        }
+      } catch (error) {
+        console.log(error, 'roleConfirm')
+      }
+    },
+    async stationConfirm() {
+      try {
+        const menuApi = {
+          add: '/insertStation',
+          edit: '/updateStation'
+        }
+        const paramsDate = {
+          ...this.form
+        }
+        if (this.action == 'edit') {
+          paramsDate.station_id = this.record.station_id
+        }
+
+        const res = await postReq(menuApi[this.action], paramsDate)
+        if (res.errcode === 0) {
+          setTimeout(() => {
+            this.handleback()
+          }, 1000)
+        } else {
+          throw res
+        }
+      } catch (error) {
+        console.log(error, 'stationConfirm')
+      }
+    },
+    async deviceConfirm() {
+      try {
+        const menuApi = {
+          add: '/insertDevice',
+          edit: '/updateDevice'
+        }
+        const { is_open, rated_capacity, rated_current, rated_voltage, reted_power } = this.form
+        const paramsDate = {
+          ...this.form,
+          is_open: Number(is_open),
+          attrs: JSON.stringify({rated_capacity, rated_current, rated_voltage, reted_power})
+        }
+
+
+        if (this.action == 'edit') {
+          paramsDate.device_id = this.record.device_id
+        }
+
+        const res = await postReq(menuApi[this.action], paramsDate)
+        if (res.errcode === 0) {
+          this.$message.success('添加成功')
+          setTimeout(() => {
+            this.handleback()
+          }, 1000)
+        } else {
+          throw res
+        }
+      } catch (error) {
+        this.$message.error('添加失败')
+      }
+    },
+    handleback() {
+      this.$emit('operateForm', 'back')
+    },
+    getObjIds(selectKeys) {
+      const ids = []
+      for (let i = 0; i < selectKeys.length; i++) {
+        ids.push({ id: selectKeys[i] })
+      }
+
+      return ids
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.editCom {
+  // height:400px;
+}
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+
+.detail-header {
+  display: flex;
+
+  span,
+  div {
+    margin: 10px;
+  }
+}
+
+:deep(.ant-picker) {
+  color: var(--theme-text-default) !important;
+}
+</style>
diff --git a/web/src/components/Home/Modal.vue b/web/src/components/Home/Modal.vue
index fd7f99f..438c2fc 100644
--- a/web/src/components/Home/Modal.vue
+++ b/web/src/components/Home/Modal.vue
@@ -132,7 +132,7 @@ export default {
           station_id: this.stationId,
           category: 0
         }
-        const res = await getReq('/api/queryStatTotal', query)
+        const res = await getReq('/queryStatTotal', query)
         if (res.errcode === 0) {
           this.modalInfo.allTotal = res.data
           this.modalInfo.allTotal.runDays = getRunDays(res.data.launch_date)
@@ -153,7 +153,7 @@ export default {
         const query = {
           station_id: this.stationId,
         }
-        const res = await getReq('/api//queryStationInfo', query)
+        const res = await getReq('//queryStationInfo', query)
         if (res.errcode === 0) {
           this.modalInfo.prefabTotal = res.data
         } else {
@@ -177,7 +177,7 @@ export default {
           end_date: getDateDaysAgo(0)
         }
         const categoryObj = { 1: 'energy' }
-        const res = await getReq('/api/queryStatDayList', query)
+        const res = await getReq('/queryStatDayList', query)
         if (res.errcode === 0) {
           this.modalInfo[categoryObj[category]] = res.data.map((item) => {
             const { income_charge: incomeCharge, income_elect: incomeElect } = item
diff --git a/web/src/components/OperateCom.vue b/web/src/components/OperateCom.vue
index 05670d9..dcded15 100644
--- a/web/src/components/OperateCom.vue
+++ b/web/src/components/OperateCom.vue
@@ -6,8 +6,9 @@
         v-for="item in operateList"
         :key="item.type"
         type="primary"
-        style="margin-right: 5px"
-        :class="['operateCol', item.type]"
+        size="small"
+        style="margin-right: 10px"
+        :class="`btn-${item.type}`"
         :disabled="item.disabled"
         @click="munuClick(item.type)"
         >{{ item.label }}
@@ -59,49 +60,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.moreIcon{
-  color:#fff !important
-}
-:deep(.ant-btn) {
-  padding: 0px 7px !important;
-  height: 24px !important;
-  font-size: 13px !important;
-  letter-spacing: -1px;
-  border-radius: 4px;
-  & > span + .anticon {
-    margin-inline-start: 4px;
-  }
-}
-:deep(.ant-btn-primary) {
-  box-shadow: none !important;
-  background: var(--theme-btn3);
-}
-:deep(.ant-btn,.ant-btn-primary){
-  &:hover{
-    opacity: 0.9;
-  }
-  &:disabled{
-    color: rgba(255,255,255,0.5);
-  }
-  }
-.operate{
-  display: flex;
-  justify-content: center;
-}
-.operateCol {
-  background: var(--theme-btn3);
 
-  &.more {
-    background: var(--theme-btn1);
-  }
 
-  &.del {
-    background: var(--theme-btn2);
-  }
-
-}
-.ant-dropdown .ant-dropdown-menu{
-  background-color:var(--theme-opert-bg)!important;
-}
 
 </style>
diff --git a/web/src/components/SearchBox.vue b/web/src/components/SearchBox.vue
index 1be2a28..f7bb7f1 100644
--- a/web/src/components/SearchBox.vue
+++ b/web/src/components/SearchBox.vue
@@ -192,6 +192,7 @@ input:-internal-autofill-selected {
   color: var(--theme-text-default) !important;
 }
 .search {
+  height:70px;
   color: #fff;
   display: flex;
   flex-direction: column;
diff --git a/web/src/components/monitor/device.vue b/web/src/components/monitor/device.vue
index 1444f3c..6e44c7f 100644
--- a/web/src/components/monitor/device.vue
+++ b/web/src/components/monitor/device.vue
@@ -1,58 +1,89 @@
 <template>
-  <div class="device">
+  <div class="device" ref="device">
     <div class="device-item" v-for="item in deviceList" :key="item">
       <div class="item-header">
         <div style="display: flex; width: 50%">
-          <div class="icon-bg"></div>
+          <div class="icon-bg">
+            <span class="iconfont" :class="getIcongont(item)"></span>
+          </div>
           <div class="title">
-            <span class="number">521245786665412</span>
-            <span class="name">逆变器1</span>
-            <span class="number type">逆变器</span>
+            <span class="number">{{ item.device_id }}</span>
+            <span class="name">{{ item.name }}</span>
+            <span class="number type">{{ item.typename }}</span>
           </div>
         </div>
 
         <div class="status">
           <div class="status-item">
-            <span>在线</span>
+            <span>{{ ['离线', '在线'][item.is_online] }}</span>
             <span class="text">在线状态</span>
           </div>
           <div class="status-item">
-            <span>在线</span>
+            <span>{{ ['正常', '错误'][item.is_error] }}</span>
             <span class="text">故障状态</span>
           </div>
           <div class="status-item">
-            <span>在线</span>
+            <span>{{ ['空闲', '工作'][item.is_running] }}</span>
             <span class="text">工作状态</span>
           </div>
         </div>
       </div>
       <div class="item-content">
-        <div v-for="info in chunengInfo" :key="info.key">
-          <span class="text">{{ info.label }}：</span>
-          <a-button
-            v-if="info.key === 'realTimeData'"
-            type="primary"
-            size="small"
-            @click="openModal"
-            >查看</a-button
-          >
-          <span v-else class="value">{{ info.value }}</span>
+        <div v-for="info in item.params" :key="info.k" class="item-info">
+          <span class="text">{{ info.k }}：</span>
+
+          <span class="value">{{ info.v }}</span>
         </div>
       </div>
+      <div v-if="item.view == 1" class="item-button">
+        <span class="text">实时数据：</span>
+        <a-button type="primary" size="small" @click="openModal(item)">查看</a-button>
+      </div>
     </div>
-    <a-modal v-model:open="modalOpen" @ok="handleOk" width="800px">
-      <!-- <p>Some contents...</p>
-      <p>Some contents...</p>
-      <p>Some contents...</p> -->
+    <a-modal
+      v-model:open="modalOpen"
+      @ok="handleOk"
+      width="90%"
+      class="modal-device"
+      :get-container="() => $refs.device"
+    >
+      <div>
+        <div class="title">
+          <div>电流电压</div>
+          <img src="@/assets/images/titleLine.png" alt="" />
+        </div>
+        <div class="echarts">
+          <predictEcharts
+            :chart-options="chartOptions[0]"
+            :chart-data="chartData"
+            ref="chartRef1"
+          />
+        </div>
+      </div>
+      <div>
+        <div class="title">
+          <div>功率</div>
+          <img src="@/assets/images/titleLine.png" alt="" />
+        </div>
+        <div class="echarts">
+          <predictEcharts
+            :chart-options="chartOptions[1]"
+            :chart-data="chartData"
+            ref="chartRef2"
+          />
+        </div>
+      </div>
     </a-modal>
   </div>
 </template>
 
 <script>
+import predictEcharts from '@/components/predict/predictEcharts.vue'
 import { postReq, getReq } from '@/request/api'
+import { deviceTypeList } from '@/utils/config'
 export default {
   name: '',
-  components: {},
+  components: { predictEcharts },
   props: {
     stationId: {
       type: String,
@@ -79,7 +110,70 @@ export default {
         { label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
         { label: '额定功率', key: 'ratedPower', value: '0.01kW' },
         { label: '冷却方式', key: 'coolingMethod', value: '风冷' }
-      ]
+      ],
+      chartOptions: [
+        {
+          type: 'line',
+          smooth: true,
+          dataKey: 'chargeDischarge',
+          infoKeys: [
+            {
+              key: 'V',
+              label: '电压',
+              seriesOptions: {
+                symbol: 'circle',
+                symbolSize: 8,
+                itemStyle: {
+                  color: '#00FDF9' // 充电电量线条颜色
+                },
+                lineStyle: {
+                  color: '#00FDF9' // 充电电量线条颜色
+                }
+              }
+            },
+            {
+              key: 'I',
+              label: '电流',
+              seriesOptions: {
+                symbol: 'circle',
+                symbolSize: 8,
+                itemStyle: {
+                  color: '#3E7EEF' // 充电电量线条颜色
+                },
+                lineStyle: {
+                  color: '#3E7EEF' // 充电电量线条颜色
+                }
+              }
+            }
+          ]
+        },
+        {
+          type: 'line',
+          smooth: true,
+          dataKey: 'chargeDischarge',
+          infoKeys: [
+            {
+              key: 'P',
+              label: '功率',
+              seriesOptions: {
+                symbol: 'circle',
+                symbolSize: 8,
+                itemStyle: {
+                  color: '#00FDF9' // 充电电量线条颜色
+                },
+                lineStyle: {
+                  color: '#00FDF9' // 充电电量线条颜色
+                }
+              }
+            }
+          ]
+        }
+      ],
+
+      chartData: {
+        xdata: [],
+        ydata: {}
+      }
     }
   },
   watch: {
@@ -99,24 +193,65 @@ export default {
     this.getDeviceList()
   },
   methods: {
-    async getDeviceList() {
-      const data = {
-        category: this.systemType,
-        'station_id': this.stationId,
-        page: 0,
-        'page_size': 1000
-      }
-      try {
-        const res = await getReq('/queryDeviceList', data)
+    getIcongont(ele) {
+      return deviceTypeList.find((item) => item.value == ele.type).iconfont || ''
+    },
+    generateTimePoints() {
+      const timePoints = []
+
+      for (let hour = 0; hour <= 24; hour++) {
+        for (let minute = 0; minute < 60; minute += 10) {
+          // 处理24:00的特殊情况
+          if (hour === 24 && minute === 0) {
+            timePoints.push('24:00')
+            break
+          }
+
+          // 格式化小时和分钟，确保两位数
+          const formattedHour = hour.toString().padStart(2, '0')
+          const formattedMinute = minute.toString().padStart(2, '0')
+
+          timePoints.push(`${formattedHour}:${formattedMinute}`)
+        }
+      }
+
+      return timePoints
+    },
+    //查看实时数据
+    async getDevicCharts(item) {
+      try {
+        const res = await getReq('/queryDevicCharts', {
+          station_id: this.stationId,
+          device_id: item.device_id
+        })
+        this.chartData.ydata = res.data
+        this.chartData.xdata = this.generateTimePoints()
+        this.$refs.chartRef1.initCharts()
+        this.$refs.chartRef2.initCharts()
 
-        console.log(res)
-        this.deviceList = res.data
-        // this.selectStation=this.stations[0]['station_id']
       } catch (error) {
         console.log(error)
       }
     },
-    openModal() {
+
+    //请求运行监控系统设备信息
+    async getDeviceList() {
+      try {
+        const res = await getReq('/queryDevicByCategory', {
+          station_id: this.stationId,
+          category: this.systemType
+        })
+
+        this.deviceList = res.data
+      } catch (error) {
+        this.deviceList = []
+
+        console.log(error)
+      }
+    },
+    async openModal(item) {
+      await this.getDevicCharts(item)
+
       this.modalOpen = true
     },
     handleOk() {
@@ -136,8 +271,6 @@ export default {
   grid-template-columns: 1fr 1fr 1fr;
   overflow-y: auto;
   .device-item {
-    // width: 410px;
-    // height: 340px;
     border-radius: 15px;
 
     background: $bg2-color;
@@ -149,11 +282,16 @@ export default {
       color: #fff;
       justify-content: space-between;
       .icon-bg {
-        width: 76px;
-        height: 72px;
+        width: 66px;
+        height: 66px;
+        text-align: center;
+        line-height: 66px;
         border-radius: 6px;
         background: linear-gradient(90deg, #3dfefa 0%, #2a82e4 2.96%, #27a188 100%),
           linear-gradient(90deg, #3dfefa 0%, #01dfef 2.96%, #08a5ff 100%);
+        .iconfont {
+          font-size: 50px;
+        }
       }
       .title {
         display: flex;
@@ -194,12 +332,20 @@ export default {
       grid-template-columns: 1fr 1fr;
       color: #fff;
       display: grid;
-      line-height: 45px;
+      // line-height: 45px;
       margin-top: 15px;
       padding: 0 10px;
+      height: 120px;
+      overflow-y: auto;
       .value {
         font-weight: 700;
       }
+      .item-info {
+        height: 30px;
+      }
+    }
+    .item-button {
+      padding-left: 10px;
     }
     .text {
       color: $text-color;
@@ -212,4 +358,22 @@ export default {
 .environment {
   width: 200px;
 }
+:deep(.modal-device) {
+  color: #fff;
+  .title {
+    display: flex;
+    font-weight: 700;
+    flex-direction: column;
+
+    img {
+      width: 232px;
+      height: 6px;
+      margin-top: 10px;
+    }
+  }
+  .echarts {
+    width: 100%;
+    height: 280px;
+  }
+}
 </style>
diff --git a/web/src/components/monitor/videos.vue b/web/src/components/monitor/videos.vue
index f88e930..f175643 100644
--- a/web/src/components/monitor/videos.vue
+++ b/web/src/components/monitor/videos.vue
@@ -32,13 +32,12 @@
     </div>
     <div class="table-content">
       <ComTable
-        :columns="columns"
-        :table-data="tableData"
+        :columns="columns[activeTab]"
+        :table-data="tableDatas[activeTab]"
         @handlePagesizeChange="handlePagesizeChange"
         ref="comTable"
         :table-option="tableOption"
         :page-option="pageOption"
-        :table-h="tableH"
       >
       </ComTable>
     </div>
@@ -46,65 +45,143 @@
 </template>
 
 <script>
+import { postReq, getReq } from '@/request/api'
 export default {
   name: '',
   components: {},
-  props: {},
+  props: {
+    stationId: {
+      type: String,
+      default: ''
+    },
+    systemType: {
+      type: Number,
+      default: 1
+    }
+  },
   data() {
     return {
-      activeTab: '0',
+      activeTab: 'temp_hum',
+      columns: {
+        airc: [
+          {
+            title: '名称',
+            dataIndex: 'pos',
+            key: 'pos',
+            ellipsis: true,
+            align: 'center'
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            ellipsis: true,
+            align: 'center'
+          }
+        ],
+        cooling: [
+          {
+            title: '名称',
+            dataIndex: 'pos',
+            key: 'pos',
+            ellipsis: true,
+            align: 'center'
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            ellipsis: true,
+            align: 'center'
+          }
+        ],
+        fire40: [
+          {
+            title: '点位',
+            dataIndex: 'pos',
+            key: 'pos',
+            ellipsis: true,
+            align: 'center'
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            ellipsis: true,
+            align: 'center'
+          }
+        ],
+        'temp_hum': [
+          {
+            title: '点位',
+            dataIndex: 'pos',
+            key: 'pos',
+            ellipsis: true,
+            align: 'center'
+          },
+          {
+            title: '温度',
+            dataIndex: 'temp',
+            key: 'temp',
+            ellipsis: true,
+            align: 'center'
+          },
+          {
+            title: '湿度',
+            dataIndex: 'hum',
+            key: 'hum',
+            ellipsis: true,
+            align: 'center'
+          }
+        ]
+      },
       tabList: [
         {
-          key: '0',
+          key: 'temp_hum',
           name: '环境温湿度信息'
         },
         {
-          key: '1',
+          key: 'fire40',
           name: '安防信息'
         },
         {
-          key: '2',
+          key: 'airc',
           name: '空调信息'
         },
         {
-          key: '3',
+          key: 'cooling',
           name: '冷机信息'
         }
       ],
-      columns: [
-        {
-          title: '点位',
-          dataIndex: 'policyId',
-          key: 'policyId',
-          ellipsis: true
-        },
-        {
-          title: '温度',
-          dataIndex: 'name',
-          key: 'name',
-          ellipsis: true
-        },
-        {
-          title: '湿度',
-          dataIndex: 'type',
-          key: 'type',
-          ellipsis: true
-        }
-      ],
+      tableDatas: {},
+
       tableOption: {
         select: false,
         page: false
       }
     }
   },
-  mounted() {},
-  methods: {}
+  mounted() {
+    this.getEnvironment()
+  },
+  methods: {
+    async getEnvironment() {
+      try {
+        const res = await getReq('/queryEnvironment', { station_id: this.stationId })
+        console.log(res, '==============')
+        this.tableDatas = res.data
+        // this.deviceList=res.data
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .videos {
-  width: 60%;
+  width: calc(100% - 470px);
   margin-left: 20px;
   display: grid;
   grid-gap: 20px;
@@ -130,7 +207,7 @@ export default {
   }
 }
 .environment {
-  width: calc(40% - 20px);
+  width: 430px;
   margin-left: 20px;
   color: #fff;
 
@@ -187,6 +264,7 @@ export default {
   }
   .table-content {
     margin-top: 20px;
+    height: calc(100% - 60px);
     :deep(.ant-table) {
       border-radius: 10px 10px 0 0 !important;
       overflow: hidden; /* 确保圆角生效 */
diff --git a/web/src/components/predict/predictEcharts.vue b/web/src/components/predict/predictEcharts.vue
index f260bc1..a905cc0 100644
--- a/web/src/components/predict/predictEcharts.vue
+++ b/web/src/components/predict/predictEcharts.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="echarts">
-    <div class="chart-container">
-      <div class="content-header">
+    <div class="chart-container" >
+      <div class="content-header" v-if="chartOptions.title">
         <div class="verline"></div>
         <span>{{ chartOptions.title }}</span>
       </div>
+      <!-- {{ chartData.ydata }} -->
+
       <div ref="chartContainer" class="echarts-content"></div>
     </div>
   </div>
 </template>
 <script>
-import { postReq } from '@/request/api'
 export default {
   name: 'PredictEcharts',
   props: {
@@ -20,8 +21,8 @@ export default {
       required: false // 非必须
     },
     chartData: {
-      type: Array,
-      default: () => ([]), // 默认空对象
+      type: Object,
+      default: () => ({}), // 默认空对象
       required: false // 非必须
     }
   },
@@ -32,12 +33,11 @@ export default {
   },
   mounted() {
     
-    
-    this.$nextTick(() => {
-      // 确保 DOM 完全渲染
-      this.initCharts()
-      window.addEventListener('resize', this.handleResize)
-    })
+    // this.$nextTick(() => {
+    //   // 确保 DOM 完全渲染
+    //   this.initCharts()
+    //   window.addEventListener('resize', this.handleResize)
+    // })
   },
   beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
@@ -45,8 +45,7 @@ export default {
   },
   methods: {
     initCharts() {
-    //   this.chartOptions.forEach((option, index) => {
-      const {title,infoKeys,dataKey,type,smooth}=this.chartOptions
+      const {infoKeys,dataKey,type,smooth}=this.chartOptions
       
       const dom = this.$refs.chartContainer
       if (!dom) return
@@ -73,12 +72,29 @@ export default {
         grid: {
           left: '3%',
           right: '3%',
-          bottom: '1%',
+          bottom: '15%',
           containLabel: true
         },
+        dataZoom: [
+          {
+            type: 'slider', // 滑动条型
+            show: true,
+            xAxisIndex: 0, // 控制第一个X轴
+            start: 0,      // 初始显示范围起点（百分比）
+            end: 20,       // 初始显示范围终点（百分比）
+            height: 20,    // 滑动条高度
+            bottom: 10     // 距离底部距离
+          },
+          {
+            type: 'inside', // 内置型（鼠标滚轮/拖拽交互）
+            xAxisIndex: 0,
+            start: 0,
+            end: 20
+          }
+        ],
         xAxis: {
           type: 'category',
-          data: this.chartData.map((item) => item.date),
+          data: this.chartData.xdata,
           axisLine: {
             show: true,
             lineStyle: {
@@ -122,7 +138,7 @@ export default {
             name: info.label,
             smooth: smooth || false,
             type: type,
-            data: this.chartData.map((item) => item[info.key]),
+            data: this.chartData.ydata[info.key],
             ...info.seriesOptions,
           }
         })
diff --git a/web/src/components/system/policyForm.vue b/web/src/components/system/policyForm.vue
index e548deb..e3a89d1 100644
--- a/web/src/components/system/policyForm.vue
+++ b/web/src/components/system/policyForm.vue
@@ -347,7 +347,11 @@ export default {
     changePolicy(e) {
       const val = e.target.value
       if (val == 1) {
-        this.formData.period5.splice(1,1)
+        // const {length} = this.formData.period5
+
+        // this.formData.period5.splice(1,1)
+        this.formData.period1=[]
+
       } else {
         this.formData.period5[1] = 
           {
@@ -477,11 +481,13 @@ export default {
       this.$refs.periodRef
         .validateFields()
         .then((res) => {
-          console.log(this.formData.period1)
+          console.log(this.formData.period1,'=============')
           const target = this.formData.period1.find((item) => item.month == this.periodForm.month)
 
           if (target) {
             target.children.push(this.periodForm) // 如果找到，放入 children
+          }else{
+            this.formData.period1.push(this.periodForm)
           }
 
           // this.formData.period1.push(this.periodForm)
@@ -636,6 +642,9 @@ export default {
 :deep(.no-hover-row:hover > td) {
   background-color: transparent !important;
 }
+:deep(.ant-table-wrapper .ant-table-cell){
+    background:none!important;
+  }
 // /* 禁用行的 hover 过渡动画 */
 // .ant-table-tbody > tr.ant-table-row {
 //   transition: none !important;
diff --git a/web/src/main.js b/web/src/main.js
index 79445cc..3a3f9d5 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -10,17 +10,23 @@ import '@/style/index.scss'
 import * as echarts from 'echarts'
 import { setWidth } from '@/utils/column'
 import { getBtns } from '@/utils/btnList'
+import { message, Modal } from 'ant-design-vue'
+
 import VueTianditu from 'vue-tianditu'
 import SearchBox from '@/components/SearchBox.vue'
 import ComTable from '@/components/ComTable.vue'
+import OperateCom from '@/components/OperateCom'
 
 const app = createApp(App)
 
 app.component('SearchBox', SearchBox)
 app.component('ComTable', ComTable)
+app.component('OperateCom', OperateCom)
 
 app.config.globalProperties.$echarts = echarts // 挂载到全局属性
 app.config.globalProperties.$setWidth = setWidth // 挂载到全局属性
 app.config.globalProperties.$getBtns = getBtns
+app.config.globalProperties.$message = message
+app.config.globalProperties.$Modal = Modal
 
 app.use(store).use(router).use(Antd).use(VueTianditu).mount('#app')
diff --git a/web/src/request/index.js b/web/src/request/index.js
index 0516f59..ae8a733 100644
--- a/web/src/request/index.js
+++ b/web/src/request/index.js
@@ -1,53 +1,42 @@
 import axios from 'axios'
-// import openNotification from "../utils/notification";
-// let { config } = window;
-// let { baseUrl } = config;
+import openNotification from '../utils/notification'
+import { message } from 'ant-design-vue'
 
 const service = axios.create({
-  //   baseURL: baseUrl,
   baseURL: '/api',
   timeout: 120000
 })
 
 service.interceptors.request.use((config) => {
   const webConfig = config
-  // if (!['/login'].includes(config.url)) {
-  //   if (localStorage.getItem('token')) {
-  //     webConfig.headers = {
-  //       token: localStorage.getItem('token')
-  //     }
-  //   }
-  // }
 
   return webConfig
 })
 service.interceptors.response.use(
   (response) => {
-    // 排除以下接口的错误提示
-    const { url } = response.config
-    const urls = ['/light/', '/serve/delete', '/user/checkRandom']
-    const urlFlag = urls.map((item) => {
-      return url.includes(item)
-    })
-
     const res = response.data
 
-    if (res.code !== 200) {
-      if (res.code == 401 || res.tip == '校验token过期') {
+    if (res.errCode !== 0) {
+      if ((res.ERR_TOKEN = 2 || res.errmsg == '校验token过期')) {
         setTimeout(() => {
-          window.$wujie?.props.jump({ path: '/login' })
+          // router.push({ path: '/login' })
         }, 1000)
-      } else if (urlFlag.every((item) => item === false)) {
+      } else {
+        console.log(res.errmsg, 'res.errmsg')
+        message.error(res.errmsg)
         // openNotification({
-        //   status: "error",
-        //   desc: res.tip,
-        // });
+        //   status: 'error',
+        //   desc: res.tip
+        // })
       }
+    } else {
+      console.log(res.errmsg, 'res.errmsg')
+
+      message.error(res.errmsg)
     }
     return res
   },
   (error) => {
-    // console.log(error, 'error 此处添加监控超时处理')
     if (
       error.name === 'AxiosError' &&
       error.message === 'timeout of 120000ms exceeded' &&
diff --git a/web/src/router/index.js b/web/src/router/index.js
index d3bfe95..a0d2f9a 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -54,8 +54,8 @@ export const routes = [
           {
             name: 'role',
             path: 'role',
-            title: '角色管理'
-            // component: () => import(/* webpackChunkName: "system" */ '@/views/system/role.vue')s
+            title: '角色管理',
+            component: () => import(/* webpackChunkName: "system" */ '@/views/system/role.vue')
           },
           {
             name: 'permission',
@@ -65,12 +65,14 @@ export const routes = [
           {
             name: 'station',
             path: 'station',
-            title: '场站管理'
+            title: '场站管理',
+            component: () => import(/* webpackChunkName: "system" */ '@/views/system/station.vue')
           },
           {
             name: 'service',
             path: 'service',
-            title: '服务管理'
+            title: '服务管理',
+            component: () => import(/* webpackChunkName: "system" */ '@/views/system/service.vue')
           },
           {
             path: 'policy',
@@ -81,17 +83,20 @@ export const routes = [
           {
             name: 'device',
             path: 'device',
-            title: '设备管理'
+            title: '设备管理',
+            component: () => import(/* webpackChunkName: "system" */ '@/views/system/device.vue')
           },
           {
-            name: 'log',
+            name: 'alarmLog',
             path: 'log',
-            title: '告警日志'
+            title: '告警日志',
+            component: () => import(/* webpackChunkName: "system" */ '@/views/system/alarmLog.vue')
           },
           {
-            name: 'syslog',
+            name: 'sylog',
             path: 'syslog',
-            title: '系统日志'
+            title: '系统日志',
+            component: () => import(/* webpackChunkName: "system" */ '@/views/system/log.vue')
           }
         ]
       }
diff --git a/web/src/style/antd.scss b/web/src/style/antd.scss
index 6bc2912..8f23dea 100644
--- a/web/src/style/antd.scss
+++ b/web/src/style/antd.scss
@@ -15,6 +15,13 @@ $table-border: #1c797a;
 $table-bg: #072e4a;
 $page-border: #cad2dd;
 //级联器样式,下拉选择器样式输入框等。。。
+.ant-switch {
+  background: #00fffb;
+}
+
+.ant-switch .ant-switch-handle::before {
+  background-color: #0a1b2f !important;
+}
 .ant-select,
 .ant-cascader {
   .ant-select-selector {
@@ -32,17 +39,20 @@ $page-border: #cad2dd;
 .ant-input,
 .ant-input-affix-wrapper,
 .ant-picker,
-.ant-input-number
- {
+.ant-input-number {
   background: none !important;
   border: 1px solid $border-color !important;
   color: #fff;
 }
-:deep(.ant-picker){
-  .ant-picker-input >input,.ant-picker-separator{
+.ant-input::placeholder {
+  color: #ffffff3b !important;
+}
+:deep(.ant-picker) {
+  .ant-picker-input > input,
+  .ant-picker-separator {
     color: #fff !important;
   }
-  .ant-picker-input::placeholder{
+  .ant-picker-input::placeholder {
     color: #ffffff3b !important;
   }
 }
@@ -77,6 +87,11 @@ $page-border: #cad2dd;
   &:active {
     background: #0f6f6a;
   }
+
+  &:disabled {
+    border: none;
+    color: #fff;
+  }
 }
 .btn-del {
   background: $btn-del;
@@ -99,6 +114,14 @@ $page-border: #cad2dd;
   }
 }
 //modal样式
+// 删除弹框
+.ant-modal-confirm-title {
+  color: #fff !important;
+}
+
+.ant-modal .ant-modal-close {
+  color: #fff;
+}
 .ant-modal .ant-modal-content {
   background-image: url('@/assets/images/modalBg.png');
   background-size: 100% 100%;
@@ -109,30 +132,26 @@ $page-border: #cad2dd;
   text-align: center;
 }
 //表单中的表格样式
-.ant-form{
-.ant-table-thead {
-  background: rgba(30, 85, 95, 1) !important;
+.ant-form {
+  .ant-table-thead {
+    background: rgba(30, 85, 95, 1) !important;
+  }
+  :deep(.ant-table-thead > tr > th) {
+    border-inline: 1px solid transparent !important;
+    background: transparent;
+    color: #fff !important;
+    border-bottom: none !important; /* 可选：去除底部边框 */
+  }
+  :deep(.ant-table-tbody) {
+    color: #fff;
+    background: $table-bg;
+    border: 1px solid $table-border !important;
+    border-radius: 0px 0px 20px 20px;
+  }
+  :deep(.ant-table-wrapper .ant-table-tbody > tr.ant-table-placeholder:hover > td) {
+    background: transparent !important;
+  }
+  :deep(.ant-empty-description) {
+    color: #fff !important;
+  }
 }
-:deep(.ant-table-thead > tr > th) {
-  border-inline: 1px solid transparent !important;
-  background: transparent;
-  color: #fff !important;
-  border-bottom: none !important; /* 可选：去除底部边框 */
-}
-:deep(.ant-table-tbody){
-  color: #fff;
-  background: $table-bg ;
-  border: 1px solid $table-border !important;
-  border-radius: 0px 0px 20px 20px;
-  
-}
-:deep(.ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder:hover>td){
-  background: transparent !important;
-}
-:deep(.ant-empty-description){
-  color: #fff !important;
-}
-
-}
-
-
diff --git a/web/src/utils/btnList.js b/web/src/utils/btnList.js
index 2d4440c..cfe8133 100644
--- a/web/src/utils/btnList.js
+++ b/web/src/utils/btnList.js
@@ -1,36 +1,10 @@
 const btnList = [
   { label: '', type: '', disFlag: '' },
   { label: '新增', type: 'add', disFlag: 'isEdit', icon: 'icon-add' },
-  { label: '更新', type: 'edit', disFlag: 'isEdit' },
-  { label: '查看', type: 'detail', disFlag: 'isQuery' },
-  { label: '编辑', type: 'edit', disFlag: 'isEdit' },
-  { label: '删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' },
-  { label: '批量删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' },
-  { label: '导入', type: 'upload', disFlag: 'isEdit', icon: 'icon-import' },
-  { label: '导出', type: 'download', disFlag: 'isEdit', icon: 'icon-export' },
-  { label: '上传', type: 'upload', disFlag: 'isEdit', icon: 'icon-upload' },
-  { label: '下载', type: 'download', disFlag: 'isEdit', icon: 'icon-download' },
-  { label: '下发', type: 'xf', disFlag: 'isControl' },
-  { label: '批量下载', type: 'download', disFlag: 'isEdit', icon: 'icon-download' },
-  { label: '下载模版', type: 'downTemplate', disFlag: 'isControl', icon: 'icon-download' },
-  { label: '重置密码', type: 'reset', disFlag: 'isEdit' },
-  { label: '派发', type: 'distribute', disFlag: 'isControl' },
-  { label: '处理', type: 'dealWith', disFlag: 'isControl' },
-  { label: '审核', type: 'audit', disFlag: 'isControl' },
-  { label: '标记为已读', type: 'setTagR', disFlag: 'isControl', icon: 'icon-chulizhuangtai' },
-  { label: '标记为已处理', type: 'setTagD', disFlag: 'isControl' },
-  { label: '启动', type: 'start', disFlag: 'isControl' },
-  { label: '停止', type: 'stop', disFlag: 'isControl' },
-  { label: '重启', type: 'restart', disFlag: 'isControl' },
-  { label: '批量启动', type: 'start', disFlag: 'isControl' },
-  { label: '批量停止', type: 'stop', disFlag: 'isControl' },
-  { label: '批量重启', type: 'restart', disFlag: 'isControl' },
-  { label: '监控日志', type: 'log', disFlag: 'isControl' },
-  { label: '新建备份', type: 'backups', disFlag: 'isEdit', icon: 'icon-add' },
-  { label: '导入备份', type: 'importBackups', disFlag: 'isEdit', icon: 'icon-import' },
-  { label: '还原', type: 'restore', disFlag: 'isEdit' },
-  { label: '批量启用', type: 'enable', disFlag: 'isControl', icon: 'icon-a-qiyong' },
-  { label: '批量禁用', type: 'disable', disFlag: 'isControl', icon: 'icon-a-jinyong' }
+  { label: '查看', type: 'read', disFlag: 'isQuery' },
+  { label: '修改', type: 'edit', disFlag: 'isEdit' },
+  { label: '删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' }
+  // { label: '批量删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' }
 ]
 
 // arr:按钮数组
@@ -40,12 +14,12 @@ const btnList = [
 //  isQuery: true;
 // }
 function getBtns(arr) {
-  const permissions =
-    JSON.parse(localStorage.getItem('user')).userExtend.role.permissionList[0] || {}
+  // const permissions =
+  //   JSON.parse(localStorage.getItem('user')).userExtend.role.permissionList[0] || {}
   const btns = []
   btnList.forEach((item) => {
     if (arr.includes(item.label)) {
-      item.disabled = !Boolean(permissions[item.disFlag])
+      // item.disabled = !Boolean(permissions[item.disFlag])
       btns.push(item)
     }
   })
diff --git a/web/src/utils/column.js b/web/src/utils/column.js
index d5afe8b..de36cb7 100644
--- a/web/src/utils/column.js
+++ b/web/src/utils/column.js
@@ -69,7 +69,7 @@ const colWidth = [
   {
     label: '操作',
     align: 'center',
-    width: 130,
+    width: 200,
     fixed: 'right',
     resizable: false
   }
diff --git a/web/src/utils/config.js b/web/src/utils/config.js
index d2e76fa..891a17e 100644
--- a/web/src/utils/config.js
+++ b/web/src/utils/config.js
@@ -13,3 +13,146 @@ export const policyTypes = [
   //   label: '峰谷套利2'
   // }
 ]
+
+export const deviceTypeList = [
+  {
+    value: 1,
+    label: '变压器',
+    iconfont: 'icon-transformer'
+  },
+  {
+    value: 2,
+    label: '配电柜',
+    iconfont: 'icon-dianpingcai'
+  },
+  {
+    value: 3,
+    label: '电表',
+    iconfont: 'icon-dianbiao'
+  },
+  {
+    value: 4,
+    label: '门禁',
+    iconfont: 'icon-menjin'
+  },
+  {
+    value: 5,
+    label: '空调',
+    iconfont: 'icon-kongdiaogongcheng'
+  },
+  {
+    value: 6,
+    label: '照明',
+    iconfont: 'icon-zhaomingdeng'
+  },
+  {
+    value: 7,
+    label: '消防',
+    iconfont: 'icon-xiaofang'
+  },
+  {
+    value: 8,
+    label: '光照监测设备',
+    iconfont: 'icon-guangzhaojianceshebei'
+  },
+  {
+    value: 9,
+    label: '风速监测设备',
+    iconfont: 'icon-fengsujiance'
+  },
+  {
+    value: 10,
+    label: '温湿度监测设备',
+    iconfont: 'icon-wenshidujiance'
+  },
+  {
+    value: 11,
+    label: '烟感监测设备',
+    iconfont: 'icon-yanganjiance'
+  },
+  {
+    value: 12,
+    label: '水浸传感器',
+    iconfont: 'icon-shuijinchuanganqiicon'
+  },
+  {
+    value: 13,
+    label: '视频监控',
+    iconfont: 'icon-shipinjiankong'
+  },
+  {
+    value: 100,
+    label: '储能预制舱',
+    iconfont: 'icon-jizhuangxiang'
+  },
+  {
+    value: 101,
+    label: 'EMS',
+    iconfont: 'icon-quexianguanli'
+  },
+  {
+    value: 102,
+    label: 'PCS',
+    iconfont: 'icon-nengyuanguanli'
+  },
+  {
+    value: 103,
+    label: 'PCU',
+    iconfont: 'icon-bianyaqi'
+  },
+  {
+    value: 104,
+    label: 'BMS',
+    iconfont: 'icon-BMSchunengdianchi'
+  },
+  {
+    value: 105,
+    label: 'BCU',
+    iconfont: 'icon-L-chunengdianchicu'
+  },
+  {
+    value: 106,
+    label: '充电桩',
+    iconfont: 'icon-charging-pile-line'
+  },
+  {
+    value: 107,
+    label: '充电枪',
+    iconfont: 'icon-chongdianqiang'
+  },
+  {
+    value: 108,
+    label: '集中器',
+    iconfont: 'icon-jizhongqi'
+  },
+  {
+    value: 109,
+    label: '光伏板',
+    iconfont: 'icon-guangfuban'
+  },
+  {
+    value: 110,
+    label: '风力发电机光感',
+    iconfont: 'icon-zhuangjirongliang'
+  }
+]
+// 日志类型：0:其它; 1:系统日志; 2:操作日志; 3:设备日志
+
+export const logTypes = [
+  {
+    value: '0',
+    label: '其它'
+  },
+  {
+    value: '1',
+    label: '系统日志'
+  },
+  {
+    value: '2',
+    label: '操作日志'
+  },
+  {
+    value: '3',
+    label: '设备日志'
+  }
+]
diff --git a/web/src/utils/decorator.js b/web/src/utils/decorator.js
new file mode 100644
index 0000000..4c5a890
--- /dev/null
+++ b/web/src/utils/decorator.js
@@ -0,0 +1,116 @@
+let validateRulesObj = {
+  phone: {
+    rules: [
+      {
+        validator: (rule, value, callback) => {
+          const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
+          if (value === '') {
+            return Promise.resolve()
+          } else if (!reg.test(value)) {
+            return Promise.reject(new Error('请输入正确的手机号码'))
+          }
+          return Promise.resolve()
+        }
+      }
+    ]
+  },
+  email: {
+    rules: [
+      {
+        validator: (rule, value, callback) => {
+          const reg =
+            /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
+          if (!reg.test(value)) {
+            return Promise.reject(new Error('请输入正确的邮箱'))
+          }
+          return Promise.resolve()
+        }
+      }
+    ]
+  },
+
+  pwd: {
+    rules: [
+      {
+        validator: (rule, value, callback) => {
+          const reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/
+          if (!reg.test(value)) {
+            return Promise.reject(new Error('请输入密码,密码由6-20位字母、字符或数字组成'))
+          }
+          return Promise.resolve()
+        }
+      }
+    ]
+  },
+
+  //  新密码与旧密码是否一致校验
+  checkOpwd: {
+    rules: [
+      {
+        validator: (rule, value, callback) => {
+          //  获取旧密码
+          let opwd = this.props.form.getFieldValue('oldPsd')
+          if (!(opwd && opwd !== value)) {
+            return Promise.reject(new Error('旧密码与新密码一致'))
+          } else {
+            return Promise.resolve()
+          }
+        }
+      }
+    ]
+  },
+
+  gphone: {
+    rules: [
+      {
+        validator: (rule, value, callback) => {
+          const reg = /^([0-9]{3,4}-)?[0-9]{7,8}$/
+          if (!reg.test(value)) {
+            return Promise.reject(new Error('请输入正确的固定电话'))
+          } else {
+            return Promise.resolve()
+          }
+        }
+      }
+    ]
+  },
+
+  lng: {
+    rules: [
+      {
+        validator: (rule, value, callback) => {
+          const reg =
+            /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/
+          if (value !== '' && value !== null && value !== undefined) {
+            if (!reg.test(value)) {
+              return Promise.reject(new Error('经度整数部分为-180 至 180,小数部分为0到6位!'))
+            } else {
+              return Promise.resolve()
+            }
+          } else {
+            return Promise.resolve()
+          }
+        }
+      }
+    ]
+  },
+  lat: {
+    rules: [
+      {
+        validator: (rule, value, callback) => {
+          const reg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/
+          if (value !== '' && value !== null && value !== undefined) {
+            if (!reg.test(value)) {
+              return Promise.reject(new Error('纬度整数部分为-90 至 90,小数部分为0到6位!'))
+            } else {
+              return Promise.resolve()
+            }
+          } else {
+            return Promise.resolve()
+          }
+        }
+      }
+    ]
+  }
+}
+export default validateRulesObj
diff --git a/web/src/utils/notification.js b/web/src/utils/notification.js
new file mode 100644
index 0000000..66d6a97
--- /dev/null
+++ b/web/src/utils/notification.js
@@ -0,0 +1,59 @@
+import { notification } from 'ant-design-vue'
+import { h } from 'vue'
+import {
+  CheckCircleFilled,
+  CloseCircleFilled,
+  ExclamationCircleFilled
+} from '@ant-design/icons-vue'
+
+// name:页面名称，角色、人员、系统等
+// type：add，edit，del，detail
+// status：success，error，warning
+// desc: 描述
+const option = {
+  names: {
+    user: '用户管理'
+  },
+  types: {
+    // isDealWith: '标记为已处理',
+    // isRead: '标记为已读'
+  },
+  status: { success: '成功', error: '失败', warning: '警告' }
+}
+const notiInfo = {
+  success: {
+    iconMessage: '成功通知',
+    icon: CheckCircleFilled,
+    iconColor: 'color:#065758',
+    iconClass: 'notification-success-class'
+  },
+  error: {
+    iconMessage: '失败通知',
+    icon: CloseCircleFilled,
+    iconColor: 'color:#ca4d2a',
+    iconClass: 'notification-error-class'
+  },
+  warning: {
+    iconMessage: '警告通知',
+    icon: ExclamationCircleFilled,
+    iconColor: 'color:#FF921B',
+    iconClass: 'notification-warning-class'
+  }
+}
+const openNotification = ({ name, type, status, desc = '' }) => {
+  notification[status]({
+    placement: 'bottomRight',
+    message: notiInfo[status].iconMessage,
+    description: desc || option.names[name] + option.types[type] + option.status[status],
+    icon: () =>
+      h(notiInfo[status].icon, {
+        style: notiInfo[status].iconColor
+      }),
+    style: {
+      minWidth: '400px'
+    },
+    class: notiInfo[status].iconClass,
+    duration: 2
+  })
+}
+export default openNotification
diff --git a/web/src/views/MainView.vue b/web/src/views/MainView.vue
index 1b02fc3..2f7e7ac 100644
--- a/web/src/views/MainView.vue
+++ b/web/src/views/MainView.vue
@@ -80,6 +80,7 @@ export default {
             },
             {
               name: '场站管理',
+              path: '/station',
               icon: 'icon-caidanguanli'
             },
             {
@@ -92,15 +93,15 @@ export default {
             },
             {
               name: '设备管理',
-              icon: 'icon-rizhiguanli'
+              path: '/device '
             },
             {
               name: '告警日志',
-              icon: 'icon-rizhiguanli'
+              path: '/log'
             },
             {
               name: '系统日志',
-              icon: 'icon-rizhiguanli'
+              path: '/syslog'
             }
           ]
         }
@@ -126,8 +127,9 @@ export default {
       this.$router.push(menu.path)
     },
     subMenuClick(subMenu) {
+      debugger
       this.subCurrentKey = subMenu.path
-      this.$router.push(subMenu.path)
+      this.$router.push('/system'+subMenu.path)
     }
   }
 }
@@ -197,6 +199,7 @@ export default {
     font-size: 20px;
     font-weight: 700;
     cursor: pointer;
+    margin: 0 20px;
   }
   .active {
     border: 1px solid $border-color;
diff --git a/web/src/views/monitor.vue b/web/src/views/monitor.vue
index 6859005..8cac35d 100644
--- a/web/src/views/monitor.vue
+++ b/web/src/views/monitor.vue
@@ -4,7 +4,7 @@
       <div class="left">
         <div class="search-item">
           <span>场站切换</span>
-          <a-select v-model:value="selectStation" style="width: 220px">
+          <a-select v-model:value="selectStationId" style="width: 220px" @change="getStationChange">
             <a-select-option v-for="station in stations" :value="station['station_id']"
               >{{ station.name }}
             </a-select-option>
@@ -14,8 +14,8 @@
       <div class="right">
         <div class="search-item">
           <span>运行模式</span>
-          <a-select v-model:value="value" style="width: 220px">
-            <a-select-option value="lucy">Lucy</a-select-option>
+          <a-select v-model:value="workMode" style="width: 220px">
+            <a-select-option :value="item.value" v-for="item in workModes">{{ item.label }}</a-select-option>
           </a-select>
         </div>
         <div class="search-item">
@@ -38,8 +38,8 @@
         </div>
       </div>
       <div class="container">
-        <videos v-if="systemType == 4" />
-        <device v-else :station-id="selectStation" :system-type="systemType"/>
+        <videos v-if="systemType == 4" :station-id="selectStationId"/>
+        <device v-else :station-id="selectStationId" :system-type="systemType"/>
       </div>
     </div>
   </div>
@@ -62,7 +62,7 @@ export default {
       systemType: 1,
       value: [],
       stations: [],
-      selectStation:'',
+      selectStationId:'',
       systems: [
         {
           name: '储能系统',
@@ -91,27 +91,80 @@ export default {
         // {
         //   name: "储能系统4",
         // }
-      ]
+      ],
+      workMode:'',
+      workModes:[
+        // 0：手动，1：峰谷套利，2：增网配容，3：应急供电，4：并网保电，5：自定时段
+        {
+          value:0,
+          label:'手动'
+        },
+        {
+          value:1,
+          label:'峰谷套利'
+        },
+        {
+          value:2,
+          label:'增网配容'
+        },
+        {
+          value:3,
+          label:'应急供电'
+        },
+        {
+          value:4,
+          label:'并网保电'
+        },
+        {
+          value:5,
+          label:'自定时段'
+        }
+       
+      ],
+      deviceGroup:[]
     }
   },
   mounted() {
     this.getStations()
   },
   methods: {
+    //场站切换
+    getStationChange(val){
+      console.log(val);
+      this.getStationAttr()
+      
+    },
     //查询场站列表
     async getStations() {
       try {
         const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
 
-        console.log(res)
         this.stations = res.data
-        this.selectStation=this.stations[0]['station_id']
+        this.selectStationId=this.stations[0]['station_id']
+        this.getStationAttr()
       } catch (error) {
         this.stations = []
-        this.selectStation=''
+        this.selectStationId=''
         this.$message.error(error.message)
       }
     },
+    // 查询场站的参数
+    async getStationAttr(){
+      try {
+        const res = await getReq('/queryStationOverview', { station_id: this.selectStationId })
+
+        res.data.device_group.forEach((Element,index) => {
+          this.systems[index].num=Element.count
+          this.systems[index].power=Element.power
+        });
+        this.workMode=res.data.work_mode
+      } catch (error) {
+        this.deviceGroup = []
+        this.workMode=''
+        // this.$message.error(error.errmsg)
+      }
+    },
+
     
     chooseStation(system) {
       this.systemType = system.systemType
@@ -166,6 +219,7 @@ export default {
         width: calc(100% - 30px);
         margin: 0 15px 15px 15px;
         border-radius: 12px;
+        min-width: 150px;
 
         display: flex;
         flex-direction: column;
@@ -189,8 +243,9 @@ export default {
       }
     }
     .container {
-      width: 87%;
+      width: 100%;
       display: flex;
+      justify-content: space-between;
     }
   }
 }
diff --git a/web/src/views/predict.vue b/web/src/views/predict.vue
index 52f1414..b35e393 100644
--- a/web/src/views/predict.vue
+++ b/web/src/views/predict.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="predict">
     <div class="top">
-        <predictEcharts :chart-options="chartOptions[0]" :chart-data="chartData"/>
+        <predictEcharts :chart-options="chartOptions[0]" :chart-data="chartData" ref="chartRef1"/>
     </div>
     <div class="bottom">
         <div class="item">
-            <predictEcharts :chart-options="chartOptions[1]" :chart-data="chartData"/>
+            <predictEcharts :chart-options="chartOptions[1]" :chart-data="chartData" ref="chartRef2"/>
         </div>
         <div class="item">
-            <predictEcharts :chart-options="chartOptions[2]" :chart-data="chartData"/>
+            <predictEcharts :chart-options="chartOptions[2]" :chart-data="chartData" ref="chartRef3"/>
         </div>
 
     </div>
@@ -24,241 +24,159 @@ export default {
   props: {},
   data() {
     return {
-      chartOptions:[ {
-        title: '储能充放电预测',
-        type: 'line',
-        smooth:false,
-        dataKey: 'chargeDischarge',
-        infoKeys: [
+      chartOptions:[ 
+        {
+          title: '储能充放电预测',
+          type: 'line',
+          smooth:false,
+          dataKey: 'chargeDischarge',
+          infoKeys: [
      
-          {
-            key: 'key1',
-            label: '电压',
-            seriesOptions:{
-              symbol: 'circle',
-              symbolSize: 8,
-              itemStyle: {
-                color: '#00FDF9' // 充电电量线条颜色
-              },
-              lineStyle: {
-                color: '#00FDF9' // 充电电量线条颜色
+            {
+              key: 'W_store_in',
+              label: '充电电量',
+              seriesOptions:{
+                symbol: 'circle',
+                symbolSize: 8,
+                itemStyle: {
+                  color: '#00FDF9' // 充电电量线条颜色
+                },
+                lineStyle: {
+                  color: '#00FDF9' // 充电电量线条颜色
+                }
               }
-            }
             
-          },
-          {
-            key: 'key2',
-            label: '电流',
-           
-            seriesOptions:{
-              symbol: 'circle',
-              symbolSize: 8,
-              itemStyle: {
-                color: '#3E7EEF' // 充电电量线条颜色
-              },
-              lineStyle: {
-                color: '#3E7EEF' // 充电电量线条颜色
+            },
+            {
+              key: 'W_store_ou',
+              label: '储能放电电量',
+              seriesOptions:{
+                symbol: 'circle',
+                symbolSize: 8,
+                itemStyle: {
+                  color: '#3E7EEF' // 充电电量线条颜色
+                },
+                lineStyle: {
+                  color: '#3E7EEF' // 充电电量线条颜色
+                }
               }
             }
-          }
-        ]
-      },
-      {
+          ]
+        },
+        {
         
-        title: '充电负荷预测',
-        type: 'line',
-        smooth:false,
-        dataKey: 'chargeDischarge',
-        infoKeys: [
+          title: '充电负荷预测',
+          type: 'line',
+          smooth:false,
+          dataKey: 'chargeDischarge',
+          infoKeys: [
      
-          {
-            key: 'key1',
-            label: '电压',
-            seriesOptions:{
-              symbol: 'circle',
-              symbolSize: 8,
-              itemStyle: {
-                color: '#00FDF9' // 充电电量线条颜色
-              },
-              lineStyle: {
-                color: '#00FDF9' // 充电电量线条颜色
+            {
+              key: 'W_charge',
+              label: '运行负荷',
+              seriesOptions:{
+                symbol: 'circle',
+                symbolSize: 8,
+                itemStyle: {
+                  color: '#00FDF9' // 充电电量线条颜色
+                },
+                lineStyle: {
+                  color: '#00FDF9' // 充电电量线条颜色
+                }
               }
-            }
             
-          },
-          {
-            key: 'key2',
-            label: '电流',
-           
-            seriesOptions:{
-              symbol: 'circle',
-              symbolSize: 8,
-              itemStyle: {
-                color: '#3E7EEF' // 充电电量线条颜色
-              },
-              lineStyle: {
-                color: '#3E7EEF' // 充电电量线条颜色
-              }
-            }
-          }
-        ]
-      },
-      {
+            },
+            
+          ]
+        },
+        {
         
-        title: '光伏发电预测',
-        type: 'line',
-        smooth:false,
-        dataKey: 'chargeDischarge',
-        infoKeys: [
+          title: '光伏发电预测',
+          type: 'line',
+          smooth:false,
+          dataKey: 'chargeDischarge',
+          infoKeys: [
      
-          {
-            key: 'key1',
-            label: '电压',
-            seriesOptions:{
-              symbol: 'circle',
-              symbolSize: 8,
-              itemStyle: {
-                color: '#00FDF9' // 充电电量线条颜色
-              },
-              lineStyle: {
-                color: '#00FDF9' // 充电电量线条颜色
+            {
+              key: 'P_solar',
+              label: '发电功率',
+              seriesOptions:{
+                symbol: 'circle',
+                symbolSize: 8,
+                itemStyle: {
+                  color: '#3F80F2' // 充电电量线条颜色
+                },
+                lineStyle: {
+                  color: '#3F80F2' // 充电电量线条颜色
+                }
               }
-            }
             
-          },
-          {
-            key: 'key2',
-            label: '电流',
+            },
+            {
+              key: 'W_solar',
+              label: '发电量',
            
-            seriesOptions:{
-              symbol: 'circle',
-              symbolSize: 8,
-              itemStyle: {
-                color: '#3E7EEF' // 充电电量线条颜色
-              },
-              lineStyle: {
-                color: '#3E7EEF' // 充电电量线条颜色
+              seriesOptions:{
+                symbol: 'circle',
+                symbolSize: 8,
+                itemStyle: {
+                  color: '#7747E8' // 充电电量线条颜色
+                },
+                lineStyle: {
+                  color: '#7747E8' // 充电电量线条颜色
+                }
               }
             }
-          }
-        ]
-      },
+          ]
+        },
       ],
      
-      chartData: [
-        {
-          date: '2025-08-30',
-          key1: 10,
-          key2: 10,
-          key3: 15,
-          key4: 5
-        },
-        {
-          date: '2025-08-29',
-          key1: 8,
-          key2: 5,
-          key3: 5,
-          key4: 7
-        },
-        {
-          date: '2025-08-28',
-          key1: 10,
-          key2: 10,
-          key3: 20,
-          key4: 4
-        },
-        {
-          date: '2025-08-27',
-          key1: 10,
-          key2: 10,
-          key3: 15,
-          key4: 5
-        },
-        {
-          date: '2025-08-26',
-          key1: 10,
-          key2: 5,
-          key3: 15,
-          key4: 5
-        },
-        {
-          date: '2025-08-25',
-          key1: 10,
-          key2: 5,
-          key3: 15,
-          key4: 5
-        },
-        {
-          date: '2025-08-24',
-          key1: 10,
-          key2: 6,
-          key3: 15,
-          key4: 5
-        },
-        {
-          date: '2025-08-23',
-          key1: 10,
-          key2: 7,
-          key3: 15,
-          key4: 5
-        },
-        {
-          date: '2025-08-22',
-          key1: 10,
-          key2: 0,
-          key3: 15,
-          key4: 5
-        },
-        {
-          date: '2025-08-21',
-          key1: 10,
-          key2: 0,
-          key3: 15,
-          key4: 5
-        },
-        {
-          date: '2025-08-20',
-          key1: 10,
-          key2: 0,
-          key3: 15,
-          key4: 5
-        },
-        {
-          date: '2025-08-19',
-          key1: 10,
-          key2: 0,
-          key3: 15,
-          key4: 5
-        },
-        {
-          date: '2025-08-18',
-          key1: 10,
-          key2: 0,
-          key3: 15,
-          key4: 5
-        },
-        {
-          date: '2025-08-17',
-          key1: 10,
-          key2: 0,
-          key3: 15,
-          key4: 5
-        }
-      ],
+      chartData: {
+        xdata:[],
+        ydata:{}
+      }
         
       
     }
   },
   mounted() {
-    this.getData()
+    this.$nextTick(() => {
+      this.getData()
+    })
+    
   },
   methods: {
+    generateTimePoints() {
+      const timePoints = []
+
+      for (let hour = 0; hour <= 24; hour++) {
+        for (let minute = 0; minute < 60; minute += 10) {
+          // 处理24:00的特殊情况
+          if (hour === 24 && minute === 0) {
+            timePoints.push('24:00')
+            break
+          }
+
+          // 格式化小时和分钟，确保两位数
+          const formattedHour = hour.toString().padStart(2, '0')
+          const formattedMinute = minute.toString().padStart(2, '0')
+
+          timePoints.push(`${formattedHour}:${formattedMinute}`)
+        }
+      }
+
+      return timePoints
+    },
     async  getData(){
-      const date={}
       try {
-        const res=await getReq('/queryPredictionDay',{date:'2025-09-04'})
-        console.log(res);
+        const res=await getReq('/queryPredictionDetail')
+        this.chartData.ydata=res.data
+        this.chartData.xdata = this.generateTimePoints()
         
+        this.$refs.chartRef1.initCharts()
+        this.$refs.chartRef2.initCharts()
+        this.$refs.chartRef3.initCharts()
+
       } catch (error) {
         console.log(error);
         
diff --git a/web/src/views/statisticalAnalysis.vue b/web/src/views/statisticalAnalysis.vue
index a08001f..d14a697 100644
--- a/web/src/views/statisticalAnalysis.vue
+++ b/web/src/views/statisticalAnalysis.vue
@@ -515,7 +515,7 @@ export default {
         // end_date: getDateDaysAgo(0)
       }
       try {
-        const res = await getReq('/api/queryStatDayList', query)
+        const res = await getReq('/queryStatDayList', query)
         if (res.errcode === 0) {
           this.echartsInfo[this.activeKey].chartData = res.data
           console.log(
@@ -539,7 +539,7 @@ export default {
         pageNumber: currentInfo.pageOption.page
       }
       try {
-        const res = await getReq('/api/queryStatDayList', query)
+        const res = await getReq('/queryStatDayList', query)
         if (res.errcode === 0) {
           currentInfo.tableData = res.data
           currentInfo.pageOption = {
diff --git a/web/src/views/sub/Home.vue b/web/src/views/sub/Home.vue
index 29a1e54..4c8cd55 100644
--- a/web/src/views/sub/Home.vue
+++ b/web/src/views/sub/Home.vue
@@ -130,7 +130,7 @@ export default {
     async getOnLineList() {
       try {
         // token: 用户TOKEN
-        const res = await getReq('/api/queryStatSystem')
+        const res = await getReq('/queryStatSystem')
         if (res.errcode === 0) {
           this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
           this.deviceInfo.onLine.runDays = getRunDays(res.data.launch_date)
@@ -155,7 +155,7 @@ export default {
           stationId: this.stationId,
           category: 0
         }
-        const res = await getReq('/api/queryStatTotal', query)
+        const res = await getReq('/queryStatTotal', query)
         if (res.errcode === 0) {
           this.deviceInfo.allTotal = res.data
           const { income_charge: incomeCharge, income_elect: incomeElect } =
@@ -201,7 +201,7 @@ export default {
           end_date: getDateDaysAgo(0)
         }
         const arr = { 1: 'energy', 2: 'charge', 3: 'pv' }
-        const res = await getReq('/api/queryStatDayList', query)
+        const res = await getReq('/queryStatDayList', query)
         if (res.errcode === 0) {
           this.list.forEach((item) => {
             this.deviceInfo[arr[category]] = res.data
diff --git a/web/src/views/system/alarmLog.vue b/web/src/views/system/alarmLog.vue
new file mode 100644
index 0000000..0589689
--- /dev/null
+++ b/web/src/views/system/alarmLog.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="alarmLog">
+    <searchBox
+      :btn-option-list="btnOptionList"
+      @operateForm="operateForm"
+    ></searchBox>
+
+    <div class="content-table">
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      >
+        <template #type="record">
+          <span>{{ ['其它','系统日志','操作日志','设备日志'][record.type] }}</span>
+        </template>
+        <template #status="record">
+          <span><a-tag :color="record.status ? 'red' : 'green'">{{
+                record.status ? '异常' : '正常'
+              }}</a-tag></span>
+        </template>
+
+        <template #action="record">
+          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
+        </template>
+      </ComTable>
+    </div>
+  <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+      <!-- action:edit add -->
+      <EditCom
+        :record="formState"
+        @operateForm="operateForm"
+        type="alarmLog"
+        :action="formStatus"
+      ></EditCom>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { columnList, alarmlogOptions } from '../../../public/config/columnList'
+import { getReq, postReq } from '@/request/api.js'
+import EditCom from '@/components/EditCom.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
+import { Modal } from 'ant-design-vue'
+export default {
+  name: '',
+  components: {
+    EditCom,
+  },
+  props: {},
+  data() {
+    return {
+      formModal: false,
+      formState: {},
+      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
+      pageOption: {
+        pageSize: 10,
+        page: 1
+      },
+      btnOptionList: [],
+      paramsDate: {}
+    }
+  },
+  computed: {},
+  created() {
+    let info = []
+    let col = columnList.find((i) => i.page == 'alarmLog').columns
+    if (col.length) {
+      col.forEach((item) => {
+        info.push(this.$setWidth(item))
+      })
+    }
+    this.columns = info
+  },
+
+  mounted() {
+    this.operateList = this.$getBtns(['查看',  '删除'])
+    // this.btnOptionList = this.$getBtns(['新增'])
+    this.getList()
+  },
+
+  methods: {
+    async getList() {
+      this.$refs.comTable.loading = true
+
+      const { page, pageSize } = this.pageOption
+
+      const params = {
+        ...this.paramsDate,
+        page_size: pageSize,
+        page
+      }
+
+      try {
+        const res = await getReq('/querySystemLogList', params)
+        if (res.errcode === 0) {
+          this.$refs.comTable.loading = false
+
+          this.tableData = res.data
+
+          this.pageOption = {
+            page: res.page,
+            pageSize: res.page_size,
+            count: res.count
+          }
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        //统一处理报错提示
+      }
+    },
+    async operateForm(type, record = {}) {
+      this.formStatus = type
+    
+      if(type=='edit'||type=='read'){ 
+        await this.getRuleFormInfo(record)
+
+        this.formModal = true
+        this.formState = record
+      }else if(type=='del'){
+        this.handleDelete([record.device_id],this.getList)
+      }else if(type=='back'){
+        this.formModal = false
+        this.getList()
+      }
+      
+    },
+    //  删除操作
+    async handleDelete(id,callback) {
+      const that = this
+      Modal.confirm({
+        title: '你确认删除数据吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          try {
+            const res = await getReq('/deleteUser',{user_id:id})
+            if (res.errcode === 0) {
+              this.$message.success(res.errmsg)
+              this.pageOption.page=1
+              callback()
+            } else {
+              throw res
+            }
+          } catch (error) {
+            callback()
+          }
+        },
+        onCancel() {
+          // console.log("Cancel");
+        },
+        class: 'test'
+      })
+    },
+    async getRuleFormInfo(record) {
+      
+
+      const row = record || {}
+
+      for (let e of alarmlogOptions) {
+        for (let i of e.list) {
+          e.ruleForm[i.key] = row[i.key] || ''
+          // if (i.key === 'id') {
+          //   e.ruleForm.id = row.id
+          // } else if (i.key === 'is_open') {
+          //   e.ruleForm.is_open = Boolean(row.is_open)
+          // } else {
+          //   e.ruleForm[i.key] = row[i.key] || ''
+          // }
+
+          // if (i.key === 'station_id') {
+          //   i.list =  this.stations
+          // }
+          // if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
+          //   const attrs=JSON.parse(row.attrs||"{}")
+          //   e.ruleForm[i.key] = attrs[i.key]
+          // }
+          
+
+        }
+      }
+    },
+    handlePagesizeChange(pageOption) {
+      this.pageOption.pageSize = pageOption.pageSize
+      this.pageOption.page = pageOption.page
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.alarmLog {
+  height: 100%;
+
+  .content-table {
+    height: calc(100% - 70px);
+    padding: 10px;
+  }
+}
+</style>
diff --git a/web/src/views/system/device.vue b/web/src/views/system/device.vue
new file mode 100644
index 0000000..25feb19
--- /dev/null
+++ b/web/src/views/system/device.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="device">
+    <searchBox
+      :btn-option-list="btnOptionList"
+      @operateForm="operateForm"
+    ></searchBox>
+
+    <div class="content-table">
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+      >
+        <template #type="record">
+          <span>{{ getType(record.type) }}</span>
+        </template>
+         <template #isEnable="record">
+          <span><a-tag :color="record.is_open ? 'green' : 'red'">{{
+                record.is_open ? '启用' : '禁用'
+              }}</a-tag></span>
+        </template>
+
+        <template #action="record">
+          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
+        </template>
+      </ComTable>
+    </div>
+    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+      <!-- action:edit add -->
+      <EditCom
+        :record="formState"
+        @operateForm="operateForm"
+        type="device"
+        :action="formStatus"
+      ></EditCom>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { columnList, deviceOptions } from '../../../public/config/columnList'
+import { getReq, postReq } from '@/request/api.js'
+import ComTable from '@/components/ComTable'
+import OperateCom from '@/components/OperateCom'
+import EditCom from '@/components/EditCom.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
+import { Modal } from 'ant-design-vue'
+import searchBox from '@/components/SearchBox.vue'
+import {deviceTypeList} from '@/utils/config'
+export default { 
+  name: '',
+  components: {
+    searchBox,
+    EditCom,
+    ComTable,
+    OperateCom
+  },
+  props: {},
+  data() {
+    return {
+      deviceTypeList,
+      formModal: false,
+      formState: {},
+      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
+      pageOption: {
+        pageSize: 10,
+        page: 1
+      },
+      btnOptionList: [],
+      paramsDate: {},
+      tableData:[],
+      tableOption:{},
+      stations:[],//场站列表
+    }
+  },
+  computed: {},
+  created() {
+    let info = []
+    let col = columnList.find((i) => i.page == 'device').columns
+    if (col.length) {
+      col.forEach((item) => {
+        info.push(this.$setWidth(item))
+      })
+    }
+    this.columns = info
+  },
+
+  mounted() {
+    this.operateList = this.$getBtns(['查看', '修改', '删除'])
+    this.btnOptionList = this.$getBtns(['新增'])
+    this.getList()
+    this.getStations()
+  },
+
+  methods: {
+    //查询场站列表
+    async getStations() {
+      this.stations=[]
+      try {
+        const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
+
+        this.stations = res.data
+        
+      } catch (error) {
+        this.stations = []
+        
+      }
+      return 
+    },
+    //获取设备类型
+    getType(type){
+      const deviceType = this.deviceTypeList.find((item) => item.value == type).label||''
+      return deviceType
+      
+    },
+    async getList() {
+      this.$refs.comTable.loading = true
+
+      const { page, pageSize } = this.pageOption
+
+      const params = {
+        ...this.paramsDate,
+        page_size: pageSize,
+        page
+      }
+
+      try {
+        const res = await getReq('/queryDeviceList', params)
+        if (res.errcode === 0) {
+          this.$refs.comTable.loading = false
+
+          this.tableData = res.data
+
+          this.pageOption = {
+            page: res.page,
+            pageSize: res.page_size,
+            count: res.count
+          }
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        //统一处理报错提示
+      }
+    },
+    async operateForm(type, record = {}) {
+      this.formStatus = type
+      if(type=='add'){
+        this.formModal = true
+        this.formState = {}
+        this.getRuleFormInfo()
+      }else if(type=='edit'||type=='read'){ 
+        await this.getRuleFormInfo(record)
+
+        this.formModal = true
+        this.formState = record
+      }else if(type=='del'){
+        this.handleDelete([record.device_id],this.getList)
+      }else if(type=='back'){
+        this.formModal = false
+        this.getList()
+      }
+      
+    },
+    //  删除操作
+    async handleDelete(id,callback) {
+      const that = this
+      Modal.confirm({
+        title: '你确认删除数据吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          try {
+            const res = await getReq('/deleteDevice',{device_id:id})
+            if (res.errcode === 0) {
+              this.$message.success(res.errmsg)
+              this.pageOption.page=1
+              callback()
+            } else {
+              throw res
+            }
+          } catch (error) {
+            callback()
+          }
+        },
+        onCancel() {
+        },
+        class: 'test'
+      })
+    },
+    async getRuleFormInfo(record) {
+      
+
+      const row = record || {}
+
+      for (let e of deviceOptions) {
+        for (let i of e.list) {
+          if (i.key === 'id') {
+            e.ruleForm.id = row.id
+          } else if (i.key === 'is_open') {
+            e.ruleForm.is_open = Boolean(row.is_open)
+          } else {
+            e.ruleForm[i.key] = row[i.key] || ''
+          }
+
+          if (i.key === 'station_id') {
+            i.list =  this.stations
+          }
+          if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
+            const attrs=JSON.parse(row.attrs||"{}")
+            e.ruleForm[i.key] = attrs[i.key]
+          }
+          
+
+        }
+      }
+    },
+    handlePagesizeChange(pageOption) {
+      this.pageOption.pageSize = pageOption.pageSize
+      this.pageOption.page = pageOption.page
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.device {
+  height: 100%;
+
+  .content-table {
+    height: calc(100% - 70px);
+    padding: 10px;
+  }
+}
+</style>
diff --git a/web/src/views/system/log.vue b/web/src/views/system/log.vue
new file mode 100644
index 0000000..b0f3356
--- /dev/null
+++ b/web/src/views/system/log.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="alarmlog">
+    <searchBox
+      :btn-option-list="btnOptionList"
+      @operateForm="operateForm"
+    ></searchBox>
+
+    <div class="content-table">
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      >
+        <template #gender="record">
+          <!-- 0:女; 1:男 -->
+          <span>{{ ['女', '男'][record.gender] }}</span>
+        </template>
+
+        <template #action="record">
+          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
+        </template>
+      </ComTable>
+    </div>
+    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+      <!-- action:edit add -->
+      <EditCom
+        :record="record"
+        @operateForm="operateForm"
+        type="user"
+        :action="formStatus"
+      ></EditCom>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { columnList, userOptions } from '../../../public/config/columnList'
+import { getReq, postReq } from '@/request/api.js'
+
+import EditCom from '@/components/EditCom.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
+
+export default {
+  name: '',
+  components: {
+    EditCom
+  },
+  props: {},
+  data() {
+    return {
+      formModal: false,
+      formState: {},
+      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
+      pageOption: {
+        pageSize: 10,
+        page: 1
+      },
+      btnOptionList: [],
+      paramsDate: {}
+    }
+  },
+  computed: {},
+  created() {
+    let info = []
+    let col = columnList.find((i) => i.page == 'alarmlog').columns
+    if (col.length) {
+      col.forEach((item) => {
+        info.push(this.$setWidth(item))
+      })
+    }
+    this.columns = info
+  },
+
+  mounted() {
+    this.operateList = this.$getBtns(['查看', '修改', '删除'])
+    this.btnOptionList = this.$getBtns(['新增'])
+    this.getList()
+  },
+
+  methods: {
+    async getList() {
+      this.$refs.comTable.loading = true
+
+      const { page, pageSize } = this.pageOption
+
+      const params = {
+        ...this.paramsDate,
+        page_size: pageSize,
+        page
+      }
+
+      try {
+        const res = await getReq('/queryUserList', params)
+        if (res.errcode === 0) {
+          this.$refs.comTable.loading = false
+
+          this.tableData = res.data
+
+          this.pageOption = {
+            page: res.page,
+            pageSize: res.page_size,
+            count: res.count
+          }
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        //统一处理报错提示
+      }
+    },
+    operateForm(type, record = {}) {
+      console.log(record, record.id, 'rrrrrrrrrr')
+      this.formStatus = type
+      switch (type) {
+      case 'add':
+        this.formModal = true
+        this.formState = {}
+        this.getRuleFormInfo()
+
+        break
+      case 'edit':
+      case 'read':
+        this.formModal = true
+        this.formState = record
+        this.getRuleFormInfo(record)
+        break
+
+      case 'del':
+        this.handleDelete([record.user_id], this.getList)
+
+        break
+
+      case 'back':
+        this.formModal = false
+        this.getList()
+        break
+
+      default:
+        break
+      }
+    },
+    //  删除操作
+    async handleDelete(id, callback) {
+      const that = this
+      Modal.confirm({
+        title: '你确认删除数据吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          try {
+            const res = await getReq('/deleteUser', { user_id: id })
+            if (res.errcode === 0) {
+              this.$message.success(res.errmsg)
+              this.pageOption.page = 1
+              callback()
+            } else {
+              throw res
+            }
+          } catch (error) {
+            callback()
+          }
+        },
+        onCancel() {
+          // console.log("Cancel");
+        },
+        class: 'test'
+      })
+    },
+    async getRuleFormInfo(record) {
+      function getInfo(data, url) {
+        return new Promise((reslove, reject) => {
+          getReq(data, url).then((res) => {
+            reslove(res.data)
+          })
+        })
+      }
+
+      let row = {}
+      if (record && record.user_id) {
+        // row = await getInfo({ id: record.id },'/queryUserList')
+        this.record = record
+        row = record
+        // this.type='edit'
+      }
+      userOptions.forEach((e, index) => {
+        e.list.forEach((i) => {
+          e.ruleForm[i.key] = row ? row[i.key] : ''
+          e.ruleForm.id = row.id
+        })
+      })
+    },
+    handlePagesizeChange(pageOption) {
+      this.pageOption.pageSize = pageOption.pageSize
+      this.pageOption.page = pageOption.page
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user {
+  height: 100%;
+
+  .content-table {
+    height: calc(100% - 70px);
+    padding: 10px;
+  }
+}
+</style>
diff --git a/web/src/views/system/policy.vue b/web/src/views/system/policy.vue
index 70fb188..882d2e1 100644
--- a/web/src/views/system/policy.vue
+++ b/web/src/views/system/policy.vue
@@ -20,32 +20,7 @@
           }}</a-tag>
         </template>
         <template #action="record">
-          <a-button
-            type="primary"
-            size="small"
-            @click="operateForm('read', record)"
-            style="margin-left: 10px"
-            >查看</a-button
-          >
-          <a-button
-            type="primary"
-            size="small"
-            @click="operateForm('edit', record)"
-            class="btn-edit"
-            style="margin-left: 10px"
-            >修改</a-button
-          >
-          <a-popconfirm
-            title="确认要删除数据吗?"
-            ok-text="确认"
-            cancel-text="取消"
-            @confirm="operateForm('del', record)"
-            @cancel="() => {}"
-          >
-            <a-button type="primary" size="small" class="btn-del" style="margin-left: 10px"
-              >删除</a-button
-            >
-          </a-popconfirm>
+            <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
         </template>
       </ComTable>
     </div>
@@ -67,6 +42,8 @@
 import policyForm from '@/components/system/policyForm.vue'
 import { getReq } from '@/request/api'
 import { policyTypes } from '@/utils/config'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
 export default {
   name: '',
   components: { policyForm },
@@ -75,8 +52,6 @@ export default {
     return {
       formModal: false,
       btnOptionList: [
-        { label: '新增', icon: 'icon-tianjia', type: 'add' }
-        // { label: '删除', icon: 'icon-tianjia', type: 'del' }
       ],
       columns: [
         {
@@ -144,10 +119,13 @@ export default {
       },
       tableH: '',
       formState: {},
-      formStatus: 'add' //表单状态辑状态 add:新增 edit:编辑
+      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
+      operateList:[]
     }
   },
   mounted() {
+    this.operateList = this.$getBtns(['查看', '修改', '删除'])
+    this.btnOptionList = this.$getBtns(['新增'])
     this.getTableList()
   },
   methods: {
@@ -185,7 +163,7 @@ export default {
         this.formState = record
         break
       case 'del':
-        this.handleDelete(record)
+        this.handleDelete(record.policy_id)
         break
       case 'edit':
         this.formModal = true
@@ -195,18 +173,44 @@ export default {
         break
       }
     },
-    async handleDelete(record) {
-      try {
-        const res = await getReq('/deletePolicy', {
-          policy_id: record['policy_id']
-        })
-        if (res.errcode == 0) {
-          this.$message.success('删除成功')
-          this.getTableList()
-        }
-      } catch (error) {
-        this.$message.success(error)
-      }
+    // async handleDelete(record) {
+    //   try {
+    //     const res = await getReq('/deletePolicy', {
+    //       policy_id: record['policy_id']
+    //     })
+    //     if (res.errcode == 0) {
+    //       this.$message.success('删除成功')
+    //       this.getTableList()
+    //     }
+    //   } catch (error) {
+    //     this.$message.success(error)
+    //   }
+    // },
+    //  删除操作
+    async handleDelete(id) {
+      const that = this
+      this.$Modal.confirm({
+        title: '你确认删除数据吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          try {
+            const res = await getReq('/deletePolicy', {
+              policy_id: id
+            })
+            if (res.errcode == 0) {
+              that.$message.success('删除成功')
+              that.getTableList()
+            }
+          } catch (error) {
+            that.$message.success(error)
+          }
+        },
+        onCancel() {
+          // console.log("Cancel");
+        },
+        class: 'test'
+      })
     },
     closeModal(flag = false) {
       this.formModal = false
@@ -235,7 +239,7 @@ export default {
   padding: 0 15px;
   .content-table {
     width: 100%;
-    height: calc(100% - 92px);
+    height: calc(100% - 90px);
   }
 }
 </style>
diff --git a/web/src/views/system/role.vue b/web/src/views/system/role.vue
new file mode 100644
index 0000000..a2ac19b
--- /dev/null
+++ b/web/src/views/system/role.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="role">
+    <searchBox
+      :btn-option-list="btnOptionList"
+      @onSearch="onSearch"
+      :search-options="searchOptions"
+      @operateForm="operateForm"
+    ></searchBox>
+
+    <div class="content-table">
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      >
+        <template #is_open="record">
+          <!-- 0:禁用; 1:启用 -->
+          <span>{{ ['禁用', '启用'][record.is_open] }}</span>
+        </template>
+        <template #permission="record">
+          <!-- 0:禁用; 1:启用 -->
+          <span>{{record.permission.map(item=>item.name).toString() }}</span>
+        </template>
+
+        <template #action="record">
+          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
+        </template>
+      </ComTable>
+    </div>
+    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+      <!-- action:edit add -->
+      <EditCom
+        :record="record"
+        @operateForm="operateForm"
+        type="role"
+        :action="formStatus"
+      ></EditCom>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { columnList, roleOptions } from '../../../public/config/columnList'
+import { getReq, postReq } from '@/request/api.js'
+import ComTable from '@/components/ComTable'
+import OperateCom from '@/components/OperateCom'
+import EditCom from '@/components/EditCom.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
+import { Modal } from 'ant-design-vue'
+import searchBox from '@/components/SearchBox.vue'
+export default {
+  name: '',
+  components: {
+    searchBox,
+    EditCom,
+    ComTable,
+    OperateCom
+  },
+  props: {},
+  data() {
+    return {
+      formModal: false,
+      formState: {},
+      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
+      pageOption: {
+        pageSize: 10,
+        page: 1
+      },
+      btnOptionList: [],
+      paramsDate: {}
+    }
+  },
+  computed: {},
+  created() {
+    let info = []
+    let col = columnList.find((i) => i.page == 'role').columns
+    if (col.length) {
+      col.forEach((item) => {
+        info.push(this.$setWidth(item))
+      })
+    }
+    this.columns = info
+  },
+
+  mounted() {
+    this.operateList = this.$getBtns(['查看', '修改', '删除'])
+    this.btnOptionList = this.$getBtns(['新增'])
+    this.getList()
+  },
+
+  methods: {
+    async getList() {
+      this.$refs.comTable.loading = true
+
+      const { page, pageSize } = this.pageOption
+
+      const params = {
+        ...this.paramsDate,
+        page_size: pageSize,
+        page
+      }
+
+      try {
+        const res = await getReq('/queryRoleList', params)
+        if (res.errcode === 0) {
+          this.$refs.comTable.loading = false
+
+          this.tableData = res.data
+
+          this.pageOption = {
+            page: res.page,
+            pageSize: res.page_size,
+            count: res.count
+          }
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        //统一处理报错提示
+      }
+    },
+    operateForm(type, record = {}) {
+      console.log(record,record.id,'rrrrrrrrrr')
+      this.formStatus = type
+      switch (type) {
+      case 'add':
+        this.formModal = true
+        this.formState = {}
+        this.getRuleFormInfo()
+
+        break
+      case 'edit':
+      case 'read':
+        this.formModal = true
+        this.formState = record
+        this.getRuleFormInfo(record)
+        break
+    
+      case 'del':
+        this.handleDelete([record.role_id],this.getList)
+
+        break
+
+      case 'back':
+        this.formModal = false
+        this.getList()
+        break
+
+      default:
+        break
+      }
+    },
+    //  删除操作
+    async handleDelete(id,callback) {
+      const that = this
+      Modal.confirm({
+        title: '你确认删除数据吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          try {
+            const res = await getReq('/deleteRole',{role_id:id})
+            if (res.errcode === 0) {
+              this.$message.success(res.errmsg)
+              this.pageOption.page=1
+              callback()
+            } else {
+              throw res
+            }
+          } catch (error) {
+            callback()
+          }
+        },
+        onCancel() {
+          // console.log("Cancel");
+        },
+        class: 'test'
+      })
+    },
+    async getRuleFormInfo(record) {
+      function getInfo(data, url) {
+        return new Promise((reslove, reject) => {
+          getReq(data, url).then((res) => {
+            reslove(res.data)
+          })
+        })
+      }
+
+      let row = {}
+      if (record && record.role_id) {
+        // row = await getInfo({ id: record.id },'/queryroleList')
+        this.record = record
+        row = record
+        // this.type='edit'
+      }
+      roleOptions.forEach((e, index) => {
+        e.list.forEach((i) => {
+          
+          e.ruleForm[i.key] = row ? row[i.key] : ''
+          e.ruleForm.id = row.id
+        })
+      })
+    },
+    handlePagesizeChange(pageOption) {
+      this.pageOption.pageSize = pageOption.pageSize
+      this.pageOption.page = pageOption.page
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.role {
+  height: 100%;
+
+  .content-table {
+    height: calc(100% - 70px);
+    padding: 10px;
+  }
+}
+</style>
diff --git a/web/src/views/system/service.vue b/web/src/views/system/service.vue
new file mode 100644
index 0000000..03a10e1
--- /dev/null
+++ b/web/src/views/system/service.vue
@@ -0,0 +1,30 @@
+<template>
+  <div >
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  components:{
+  },
+  props: {
+
+  },
+  data() { 
+    return {
+
+    }
+  },
+  mounted() {
+
+  },
+  methods:{
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/web/src/views/system/station.vue b/web/src/views/system/station.vue
new file mode 100644
index 0000000..907815c
--- /dev/null
+++ b/web/src/views/system/station.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="station">
+    <searchBox
+      :btn-option-list="btnOptionList"
+      @onSearch="onSearch"
+      :search-options="searchOptions"
+      @operateForm="operateForm"
+    ></searchBox>
+
+    <div class="content-table">
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      >
+        <template #is_open="record">
+          <!-- 0:禁用; 1:启用 -->
+          <span>{{ ['禁用', '启用'][record.is_open] }}</span>
+        </template>
+        <template #permission="record">
+          <!-- 0:禁用; 1:启用 -->
+          <span>{{record.permission.map(item=>item.name).toString() }}</span>
+        </template>
+
+        <template #action="record">
+          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
+        </template>
+      </ComTable>
+    </div>
+    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+      <!-- action:edit add -->
+      <EditCom
+        :record="record"
+        @operateForm="operateForm"
+        type="station"
+        :action="formStatus"
+      ></EditCom>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { columnList, stationOptions } from '../../../public/config/columnList'
+import { getReq, postReq } from '@/request/api.js'
+import ComTable from '@/components/ComTable'
+import OperateCom from '@/components/OperateCom'
+import EditCom from '@/components/EditCom.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
+import { Modal } from 'ant-design-vue'
+import searchBox from '@/components/SearchBox.vue'
+export default {
+  name: '',
+  components: {
+    searchBox,
+    EditCom,
+    ComTable,
+    OperateCom
+  },
+  props: {},
+  data() {
+    return {
+      formModal: false,
+      formState: {},
+      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
+      pageOption: {
+        pageSize: 10,
+        page: 1
+      },
+      btnOptionList: [],
+      paramsDate: {}
+    }
+  },
+  computed: {},
+  created() {
+    let info = []
+    let col = columnList.find((i) => i.page == 'station').columns
+    if (col.length) {
+      col.forEach((item) => {
+        info.push(this.$setWidth(item))
+      })
+    }
+    this.columns = info
+  },
+
+  mounted() {
+    this.operateList = this.$getBtns(['查看', '修改', '删除'])
+    this.btnOptionList = this.$getBtns(['新增'])
+    this.getList()
+  },
+
+  methods: {
+    async getList() {
+      this.$refs.comTable.loading = true
+
+      const { page, pageSize } = this.pageOption
+
+      const params = {
+        ...this.paramsDate,
+        page_size: pageSize,
+        page
+      }
+
+      try {
+        const res = await getReq('/queryStationList', params)
+        if (res.errcode === 0) {
+          this.$refs.comTable.loading = false
+
+          this.tableData = res.data
+
+          this.pageOption = {
+            page: res.page,
+            pageSize: res.page_size,
+            count: res.count
+          }
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        //统一处理报错提示
+      }
+    },
+    operateForm(type, record = {}) {
+      console.log(record,record.id,'rrrrrrrrrr')
+      this.formStatus = type
+      switch (type) {
+      case 'add':
+        this.formModal = true
+        this.formState = {}
+        this.getRuleFormInfo()
+
+        break
+      case 'edit':
+      case 'read':
+        this.formModal = true
+        this.formState = record
+        this.getRuleFormInfo(record)
+        break
+    
+      case 'del':
+        this.handleDelete([record.station_id],this.getList)
+
+        break
+
+      case 'back':
+        this.formModal = false
+        this.getList()
+        break
+
+      default:
+        break
+      }
+    },
+    //  删除操作
+    async handleDelete(id,callback) {
+      const that = this
+      Modal.confirm({
+        title: '你确认删除数据吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          try {
+            const res = await getReq('/deleteStation',{station_id:id})
+            if (res.errcode === 0) {
+              this.$message.success(res.errmsg)
+              this.pageOption.page=1
+              callback()
+            } else {
+              throw res
+            }
+          } catch (error) {
+            callback()
+          }
+        },
+        onCancel() {
+          // console.log("Cancel");
+        },
+        class: 'test'
+      })
+    },
+    async getRuleFormInfo(record) {
+      function getInfo(data, url) {
+        return new Promise((reslove, reject) => {
+          getReq(data, url).then((res) => {
+            reslove(res.data)
+          })
+        })
+      }
+
+      let row = {}
+      if (record && record.station_id) {
+        row = await getInfo({ station_id: record.station_id},'/queryStationInfo')
+        this.record = record
+        row = record
+        // this.type='edit'
+      }
+      stationOptions.forEach((e, index) => {
+        e.list.forEach((i) => {
+          
+          e.ruleForm[i.key] = row ? row[i.key] : ''
+          e.ruleForm.id = row.id
+        })
+      })
+    },
+    handlePagesizeChange(pageOption) {
+      this.pageOption.pageSize = pageOption.pageSize
+      this.pageOption.page = pageOption.page
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.station {
+  height: 100%;
+
+  .content-table {
+    height: calc(100% - 70px);
+    padding: 10px;
+  }
+}
+</style>
diff --git a/web/src/views/system/user.vue b/web/src/views/system/user.vue
index 3a951fe..d78695d 100644
--- a/web/src/views/system/user.vue
+++ b/web/src/views/system/user.vue
@@ -17,48 +17,61 @@
         :page-option="pageOption"
         :table-h="tableH"
       >
-       <template #gender="record">
-        <!-- 0:女; 1:男 -->
+        <template #gender="record">
+          <!-- 0:女; 1:男 -->
           <span>{{ ['女', '男'][record.gender] }}</span>
         </template>
-    
+
         <template #action="record">
           <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
         </template>
-    </ComTable>
-    </div>
-
+      </ComTable>
     </div>
+    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+      <!-- action:edit add -->
+      <EditCom
+        :record="record"
+        @operateForm="operateForm"
+        type="user"
+        :action="formStatus"
+      ></EditCom>
+    </a-modal>
+  </div>
 </template>
 
 <script>
-import { columnList } from '../../../public/config/columnList'
-import { mapState } from 'vuex'
+import { columnList, userOptions } from '../../../public/config/columnList'
 import { getReq, postReq } from '@/request/api.js'
 import ComTable from '@/components/ComTable'
 import OperateCom from '@/components/OperateCom'
-
+import EditCom from '@/components/EditCom.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
+import { Modal } from 'ant-design-vue'
 import searchBox from '@/components/SearchBox.vue'
 export default {
   name: '',
   components: {
     searchBox,
+    EditCom,
     ComTable,
     OperateCom
   },
   props: {},
   data() {
     return {
-      pageOption:{},
+      formModal: false,
+      formState: {},
+      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
+      pageOption: {
+        pageSize: 10,
+        page: 1
+      },
       btnOptionList: [],
-      paramsDate:{
-       
-      }
+      paramsDate: {}
     }
   },
-  computed: {
-    ...mapState(['page', 'detailType', 'type'])
-  },
+  computed: {},
   created() {
     let info = []
     let col = columnList.find((i) => i.page == 'user').columns
@@ -69,10 +82,10 @@ export default {
     }
     this.columns = info
   },
- 
+
   mounted() {
-    this.operateList = this.$getBtns(['查看', '编辑', '删除'])
-    this.btnOptionList = this.$getBtns(['新增', '批量删除'])
+    this.operateList = this.$getBtns(['查看', '修改', '删除'])
+    this.btnOptionList = this.$getBtns(['新增'])
     this.getList()
   },
 
@@ -89,7 +102,7 @@ export default {
       }
 
       try {
-        const res = await getReq('/api/queryUserList',params)
+        const res = await getReq('/queryUserList', params)
         if (res.errcode === 0) {
           this.$refs.comTable.loading = false
 
@@ -109,25 +122,29 @@ export default {
       }
     },
     operateForm(type, record = {}) {
+      console.log(record,record.id,'rrrrrrrrrr')
+      this.formStatus = type
       switch (type) {
-      case 'detail':
-        this.$store.commit('updateState', {
-          detailType: 'edit', //edit or view
-          page: 'detail',
-          title: '查看',
-          type: 'user'
-        })
-
-       
+      case 'add':
+        this.formModal = true
+        this.formState = {}
+        this.getRuleFormInfo()
 
+        break
+      case 'edit':
+      case 'read':
+        this.formModal = true
+        this.formState = record
         this.getRuleFormInfo(record)
         break
+    
+      case 'del':
+        this.handleDelete([record.user_id],this.getList)
+
+        break
 
       case 'back':
-        this.$store.commit('updateState', {
-          page: 'main'
-        })
-        this.isShowFlag = false
+        this.formModal = false
         this.getList()
         break
 
@@ -135,6 +152,33 @@ export default {
         break
       }
     },
+    //  删除操作
+    async handleDelete(id,callback) {
+      const that = this
+      Modal.confirm({
+        title: '你确认删除数据吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          try {
+            const res = await getReq('/deleteUser',{user_id:id})
+            if (res.errcode === 0) {
+              this.$message.success(res.errmsg)
+              this.pageOption.page=1
+              callback()
+            } else {
+              throw res
+            }
+          } catch (error) {
+            callback()
+          }
+        },
+        onCancel() {
+          // console.log("Cancel");
+        },
+        class: 'test'
+      })
+    },
     async getRuleFormInfo(record) {
       function getInfo(data, url) {
         return new Promise((reslove, reject) => {
@@ -145,52 +189,36 @@ export default {
       }
 
       let row = {}
-      if (record.id) {
-        row = await getInfo({ id: record.id }, this.apiMethods[0].get)
-        this.record = row
-        this.$store.commit('updateState', {
-          // 配电柜-集中器-查看
-          title:
-            (row.cabinetName ? row.cabinetName + '-' : '') +
-            (row.name.split('集中器')[0] ? row.name.split('集中器')[0] : '') +
-            '集中器-查看'
-        })
+      if (record && record.user_id) {
+        // row = await getInfo({ id: record.id },'/queryUserList')
+        this.record = record
+        row = record
+        // this.type='edit'
       }
-      let connectorType
-      cabinetOptions.forEach((e, index) => {
+      userOptions.forEach((e, index) => {
         e.list.forEach((i) => {
-          if (index == 1) {
-            // 集中器状态
-            if (i.key == 'ctrMode' || i.key == 'powerStatus') {
-              e.ruleForm[i.key] = row.deviceStatus.lightStatus[i.key]
-            } else {
-              e.ruleForm[i.key] = row.deviceStatus[i.key]
-            }
-          } else if (i.key == 'connectorType') {
-            connectorType = row.deviceExtend[i.key]
-            e.ruleForm[i.key] = row.deviceExtend[i.key]
-          } else {
-            e.ruleForm[i.key] = row ? row[i.key] : ''
-            e.ruleForm.id = row.id
-          }
+          
+          e.ruleForm[i.key] = row ? row[i.key] : ''
+          e.ruleForm.id = row.id
         })
       })
-
-      // C型控制器，手自动状态和故障状态显示为“无”
-      if (connectorType == 1) {
-        cabinetOptions[1].ruleForm.status = 5
-        cabinetOptions[1].ruleForm.ctrMode = 5
-      }
-      this.isShowFlag = true
     },
     handlePagesizeChange(pageOption) {
       this.pageOption.pageSize = pageOption.pageSize
       this.pageOption.page = pageOption.page
-
       this.getList()
     }
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.user {
+  height: 100%;
+
+  .content-table {
+    height: calc(100% - 70px);
+    padding: 10px;
+  }
+}
+</style>