diff --git a/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/equManagement/EquBaseController.java b/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/equManagement/EquBaseController.java
index 5f3d6fbd..e17e40fd 100644
--- a/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/equManagement/EquBaseController.java
+++ b/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/equManagement/EquBaseController.java
@@ -86,6 +86,7 @@ public class EquBaseController extends BaseController
         // 调用职责单一的 Service 方法
         return success(equBaseService.selectLatestEquMonitorInfo(id));
     }
+
     /**
      * 获取设备指定时间段内的历史监控信息
      * @param equBaseQueryDto 查询对象，包含设备ID、开始时间和结束时间
@@ -131,34 +132,35 @@ public class EquBaseController extends BaseController
     }
 
 
-    /**
-     * 根据设备ID返回图片流
-     * 前端直接 <img src="/equBase/image/{id}">
-     */
-
-    @PreAuthorize("@ss.hasPermi('device:files:queryimage')")
-    @GetMapping(value = "/queryimage/{id}")
-    @ApiOperation("查询单个设备图片")
-    public void getImage(@PathVariable String id, HttpServletResponse response) throws IOException {
+//    /**
+//     * 根据设备ID返回图片流
+//     * 前端直接 <img src="/equBase/image/{id}">
+//     */
+//
+//    @PreAuthorize("@ss.hasPermi('device:files:queryimage')")
+//    @GetMapping(value = "/queryimage/{id}")
+//    @ApiOperation("查询单个设备图片")
+//    public void getImage(@PathVariable String id, HttpServletResponse response) throws IOException {
+//
+//        byte[] imgBytes  = equBaseService.selectEquBaseImageById(id).getEquImage();
+//
+//
+//        if (imgBytes != null && imgBytes.length > 0) {
+//            // 设置响应类型，可根据实际图片类型动态修改
+//            response.setContentType("image/png");
+//            // 可选：缓存图片
+//            response.setHeader("Cache-Control", "max-age=3600");
+//            // 输出流写入响应
+//            ServletOutputStream os = response.getOutputStream();
+//            os.write(imgBytes);
+//            os.flush();
+//            os.close();
+//        } else {
+//            // 图片不存在
+//            response.sendError(HttpServletResponse.SC_NOT_FOUND);
+//        }
+//    }
 
-        byte[] imgBytes  = equBaseService.selectEquBaseImageById(id).getEquImage();
-
-
-        if (imgBytes != null && imgBytes.length > 0) {
-            // 设置响应类型，可根据实际图片类型动态修改
-            response.setContentType("image/png");
-            // 可选：缓存图片
-            response.setHeader("Cache-Control", "max-age=3600");
-            // 输出流写入响应
-            ServletOutputStream os = response.getOutputStream();
-            os.write(imgBytes);
-            os.flush();
-            os.close();
-        } else {
-            // 图片不存在
-            response.sendError(HttpServletResponse.SC_NOT_FOUND);
-        }
-    }
     //厂商下拉表
     @PreAuthorize("@ss.hasPermi('device:files:queryManufacture')")
     @GetMapping( "/manufacture")
@@ -192,46 +194,44 @@ public class EquBaseController extends BaseController
 
     /**
      * 新增设备基本信息
+     *    @ModelAttribute equBase，
+     *   @RequestPart(value = "file", required = false)  // 使用 @RequestPart
+     *             @ApiParam(value = "设备图片文件", type = "file")
+     *             MultipartFile file
      */
     @PreAuthorize("@ss.hasPermi('device:files:add')")
     @Log(title = "设备基本信息", businessType = BusinessType.INSERT)
     @PostMapping(value = "/add")
     @ApiOperation("增加设备档案信息")
-    public AjaxResult add(
-            @ModelAttribute EquBase equBase,
-            @RequestPart(value = "file", required = false)  // 使用 @RequestPart
-            @ApiParam(value = "设备图片文件", type = "file")
-            MultipartFile file
-
-    ) throws IOException {
+    public AjaxResult add( @RequestBody EquBase equBase
+    ) {
 
-        // 处理图片
-        if (file != null && !file.isEmpty()) {
-            equBase.setEquImage(file.getBytes());
-        }
+//        // 处理图片
+//        if (file != null && !file.isEmpty()) {
+//            equBase.setEquImage(file.getBytes());
+//        }
 
         // 调用 Service 插入数据库
         return toAjax(equBaseService.insertEquBase(equBase));
     }
 
     /**
+     *  @ModelAttribute EquBase equBase,            // 自动绑定表单字段
+     *             @RequestPart(value = "file", required = false)  // 使用 @RequestPart
+     *             @ApiParam(value = "设备图片文件", type = "file")
+     *             MultipartFile file
      * 修改设备基本信息
      */
     @PreAuthorize("@ss.hasPermi('device:files:edit')")
     @Log(title = "设备基本信息", businessType = BusinessType.UPDATE)
     @PutMapping("/modify")
     @ApiOperation("修改设备档案信息")
-    public AjaxResult edit(
-            @ModelAttribute EquBase equBase,            // 自动绑定表单字段
-            @RequestPart(value = "file", required = false)  // 使用 @RequestPart
-            @ApiParam(value = "设备图片文件", type = "file")
-            MultipartFile file
-     ) throws IOException {
-
-        // 处理图片
-        if (file != null && !file.isEmpty()) {
-            equBase.setEquImage(file.getBytes());  // 存数据库 Blob
-        }
+    public AjaxResult edit(@RequestBody EquBase equBase){
+
+//        // 处理图片
+//        if (file != null && !file.isEmpty()) {
+//            equBase.setEquImage(file.getBytes());  // 存数据库 Blob
+//        }
 
         // 调用 Service 插入数据库
         return toAjax(equBaseService.updateEquBase(equBase));
diff --git a/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/exceptionController/AlertMessageController.java b/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/exceptionController/AlertMessageController.java
index 51756ee8..340f7196 100644
--- a/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/exceptionController/AlertMessageController.java
+++ b/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/exceptionController/AlertMessageController.java
@@ -21,14 +21,7 @@ import com.alops.system.service.IAlertMessageService;
 import io.swagger.annotations.ApiOperation;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.PutMapping;
-import org.springframework.web.bind.annotation.DeleteMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 
 /**
  * 故障统计Controller
@@ -92,11 +85,10 @@ public class AlertMessageController extends BaseController
      * 查询预警信息统计列表
      */
     @PreAuthorize("@ss.hasPermi('inMonitoring:alertMessage:list')")
-    @PostMapping ("/list")
+    @GetMapping ("/list")
     @ApiOperation("查询预警信息")
     @Log(title = "查询预警信息", businessType = BusinessType.UPDATE)
-
-    public TableDataInfo  list( @RequestBody  AlertDto alertMessage)
+    public TableDataInfo  list(  AlertDto alertMessage)
     {
         startPage();
         List<AlertMessage> list = alertMessageService.selectAlertMessageList(alertMessage);
diff --git a/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/exceptionController/AlertRuleController.java b/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/exceptionController/AlertRuleController.java
index 9aaa44de..8a7dfce0 100644
--- a/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/exceptionController/AlertRuleController.java
+++ b/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/exceptionController/AlertRuleController.java
@@ -69,7 +69,7 @@ public class AlertRuleController extends BaseController {
     @PreAuthorize("@ss.hasPermi('inMonitoring:alertRule:edit')")
     @ApiOperation("修改预警规则")
     @Log(title = "【修改预警规则】", businessType = BusinessType.DELETE)
-    @PostMapping("/editRule")
+    @PutMapping("/editRule")
     public AjaxResult editRule(@RequestBody AlertRuleAddDto dto) {
         try {
             AlertRule alertRule = alertRuleService.updateRule(dto);
diff --git a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/EquBase.java b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/EquBase.java
index 1c4c3eb0..52ce8d3f 100644
--- a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/EquBase.java
+++ b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/EquBase.java
@@ -55,6 +55,8 @@ public class EquBase
     @Excel(name = "设备类型 id")
     private String equType;
 
+
+
     public EquType getEquTypeVO() {
         return equTypeVO;
     }
@@ -114,8 +116,8 @@ public class EquBase
     @Excel(name = "采集次数")
     private  Long  createBy ;
 
-    @Excel(name = "设备图片")
-    private byte[] equImage ;
+    @Excel(name = "设备图片地址")
+    private String equImage ;
 
 
     public void setId(String id)
diff --git a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/MonitorLastDto.java b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/MonitorLastDto.java
index 3a29e035..10d15e95 100644
--- a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/MonitorLastDto.java
+++ b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/MonitorLastDto.java
@@ -28,7 +28,7 @@ public class MonitorLastDto {
     private String inCharge;
     private int failureFrequency;
     private int warranty;
-    private Blob equImage;
+    private String equImage;
     // equ_type
     private String equType;
 
diff --git a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/vo/queryEquBaseVO.java b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/vo/queryEquBaseVO.java
index 63602ba3..4c30a6ef 100644
--- a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/vo/queryEquBaseVO.java
+++ b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/vo/queryEquBaseVO.java
@@ -88,6 +88,10 @@ public class queryEquBaseVO {
         @Excel(name = "累积故障次数")
          private String deviceLevel;
 
+        @Excel(name = "设备图片")
+         private String equImage;
+
+
 
     public void setId(String id)
         {
diff --git a/ALOps_sys_backend/alops-system/src/main/resources/mapper/system/EquBaseMapper.xml b/ALOps_sys_backend/alops-system/src/main/resources/mapper/system/EquBaseMapper.xml
index 8834d9c0..a3860a73 100644
--- a/ALOps_sys_backend/alops-system/src/main/resources/mapper/system/EquBaseMapper.xml
+++ b/ALOps_sys_backend/alops-system/src/main/resources/mapper/system/EquBaseMapper.xml
@@ -111,8 +111,8 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
     b.create_date AS createDate,
     b.status AS status,
     b.device_level AS deviceLevel,
-    g.health AS health
-
+    g.health AS health,
+    b.equ_image AS equImage
     </sql>
 
     <select id="selectEquBaseList" parameterType="equBaseQueryDto" resultType="com.alops.system.domain.vo.queryEquBaseVO">
@@ -358,7 +358,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="createDate != null">#{createDate},</if>
             <if test="equNumber != null">#{equNumber},</if>
             COALESCE(#{status,jdbcType=INTEGER}, 0),
-            <if test="equImage != null">#{equImage,jdbcType=BLOB},</if>
+            <if test="equImage != null">#{equImage},</if>
             COALESCE(#{failureFrequency,jdbcType=BIGINT}, 0),
             COALESCE(#{gatherFrequency,jdbcType=BIGINT}, 0),
             <if test="deviceLevel != null">#{deviceLevel},</if>
diff --git a/ALOps_sys_fe/alops-ui/public/index.html b/ALOps_sys_fe/alops-ui/public/index.html
index 925455ca..ec69afcf 100644
--- a/ALOps_sys_fe/alops-ui/public/index.html
+++ b/ALOps_sys_fe/alops-ui/public/index.html
@@ -6,6 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>
diff --git a/ALOps_sys_fe/alops-ui/src/api/QandA/knowledge.js b/ALOps_sys_fe/alops-ui/src/api/QandA/knowledge.js
index 258ce3f1..1cafdda0 100644
--- a/ALOps_sys_fe/alops-ui/src/api/QandA/knowledge.js
+++ b/ALOps_sys_fe/alops-ui/src/api/QandA/knowledge.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-const api = '/device/deviceType/'
+const api = '/knowledge/'
 
 // 查询详细
 export function getDict() {
diff --git a/ALOps_sys_fe/alops-ui/src/api/device/deviceInformation.js b/ALOps_sys_fe/alops-ui/src/api/device/deviceInformation.js
index 62409f3d..cbb6dbf0 100644
--- a/ALOps_sys_fe/alops-ui/src/api/device/deviceInformation.js
+++ b/ALOps_sys_fe/alops-ui/src/api/device/deviceInformation.js
@@ -6,8 +6,7 @@ export function addRule(data) {
   return request({
     url: api + 'addRule',
     method: 'post',
-    data: data,
-    headers: { 'Content-Type': 'application/json' }
+    data: data
   })
 }
 // 查询规则
diff --git a/ALOps_sys_fe/alops-ui/src/api/device/files.js b/ALOps_sys_fe/alops-ui/src/api/device/files.js
index 1718d272..55f3a8c2 100644
--- a/ALOps_sys_fe/alops-ui/src/api/device/files.js
+++ b/ALOps_sys_fe/alops-ui/src/api/device/files.js
@@ -48,7 +48,7 @@ export function update(data) {
 // 删除
 export function del(id) {
   return request({
-    url: api + 'delete' + id,
+    url: api + id,
     method: 'delete'
   })
 }
diff --git a/ALOps_sys_fe/alops-ui/src/api/device/supplier.js b/ALOps_sys_fe/alops-ui/src/api/device/supplier.js
new file mode 100644
index 00000000..17424568
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/api/device/supplier.js
@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+const api = '/device/supplier/'
+
+// 查询详细
+export function getDict() {
+  return request({
+    url: '/sys_dict',
+    method: 'get'
+  })
+}
+
+// 查询列表
+export function list(query) {
+  return request({
+    url: api + 'query',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增
+export function add(data) {
+  return request({
+    url: api + 'add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改
+export function update(data) {
+  return request({
+    url: api + 'edit',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除
+export function del(id) {
+  return request({
+    url: api + id,
+    method: 'delete'
+  })
+}
+
+
+
+
diff --git a/ALOps_sys_fe/alops-ui/src/api/inMonitoring/message.js b/ALOps_sys_fe/alops-ui/src/api/inMonitoring/message.js
new file mode 100644
index 00000000..2ec5a5b0
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/api/inMonitoring/message.js
@@ -0,0 +1,58 @@
+import request from '@/utils/request'
+import { parseStrEmpty } from "@/utils/ruoyi";
+const api = '/inMonitoring/alertMessage/'
+
+// 查询详细
+export function getDict() {
+  return request({
+    url: '/sys_dict',
+    method: 'get'
+  })
+}
+
+// 查询列表
+export function list(query) {
+  return request({
+    url: api + 'list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询详细
+export function getInfo(id) {
+  return request({
+    url: api + '/queryById/' + parseStrEmpty(id),
+    method: 'get'
+  })
+}
+
+// 新增
+export function add(data) {
+  return request({
+    url: api + 'add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改
+export function update(data) {
+  return request({
+    url: api + 'editAlertMessage',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除
+export function del(id) {
+  return request({
+    url: api + id,
+    method: 'delete'
+  })
+}
+
+
+
+
diff --git a/ALOps_sys_fe/alops-ui/src/api/inMonitoring/rules.js b/ALOps_sys_fe/alops-ui/src/api/inMonitoring/rules.js
new file mode 100644
index 00000000..1eec0a70
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/api/inMonitoring/rules.js
@@ -0,0 +1,58 @@
+import request from '@/utils/request'
+import { parseStrEmpty } from "@/utils/ruoyi";
+const api = '/inMonitoring/alertRule/'
+
+// 查询详细
+export function byTable() {
+  return request({
+    url: api + 'byTable',
+    method: 'get'
+  })
+}
+
+// 查询列表
+export function list(query) {
+  return request({
+    url: api + 'list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询详细
+export function getInfo(id) {
+  return request({
+    url: api + '/queryById/' + parseStrEmpty(id),
+    method: 'get'
+  })
+}
+
+// 新增
+export function add(data) {
+  return request({
+    url: api + 'addRule',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改
+export function update(data) {
+  return request({
+    url: api + 'editRule',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除
+export function del(id) {
+  return request({
+    url: api + id,
+    method: 'delete'
+  })
+}
+
+
+
+
diff --git a/ALOps_sys_fe/alops-ui/src/utils/request.js b/ALOps_sys_fe/alops-ui/src/utils/request.js
index 7150ecb1..aa4947b7 100644
--- a/ALOps_sys_fe/alops-ui/src/utils/request.js
+++ b/ALOps_sys_fe/alops-ui/src/utils/request.js
@@ -42,6 +42,7 @@ service.interceptors.request.use(config => {
       data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
       time: new Date().getTime()
     }
+    console.log("%c 🛑: requestObj ", "font-size:16px;background-color:#4408a2;color:white;", requestObj)
     const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
     const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
     if (requestSize >= limitSize) {
diff --git a/ALOps_sys_fe/alops-ui/src/utils/ruoyi.js b/ALOps_sys_fe/alops-ui/src/utils/ruoyi.js
index 3de2d98d..f968d9c9 100644
--- a/ALOps_sys_fe/alops-ui/src/utils/ruoyi.js
+++ b/ALOps_sys_fe/alops-ui/src/utils/ruoyi.js
@@ -52,16 +52,16 @@ export function resetForm(refName) {
 }
 
 // 添加日期范围
-export function addDateRange(params, dateRange, propName) {
+export function addDateRange(params, dateRange, propNameStart, propNameEnd) {
   let search = params
   search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {}
   dateRange = Array.isArray(dateRange) ? dateRange : []
-  if (typeof (propName) === 'undefined') {
+  if (typeof (propNameStart) === 'undefined') {
     search.params['beginTime'] = dateRange[0]
     search.params['endTime'] = dateRange[1]
   } else {
-    search.params['begin' + propName] = dateRange[0]
-    search.params['end' + propName] = dateRange[1]
+    search.params[propNameStart] = dateRange[0]
+    search.params[propNameEnd] = dateRange[1]
   }
   return search
 }
diff --git a/ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue b/ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue
index f1ff3efb..19c41b1f 100644
--- a/ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue
@@ -164,10 +164,6 @@ export default {
   },
   created() {
     this.getList()
-    // this.getDeptTree()
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg
-    })
   },
   methods: {
     /** 查询类型列表 */
diff --git a/ALOps_sys_fe/alops-ui/src/views/device/deviceInformation/index.vue b/ALOps_sys_fe/alops-ui/src/views/device/deviceInformation/index.vue
index 5d3aacf0..29c03bbf 100644
--- a/ALOps_sys_fe/alops-ui/src/views/device/deviceInformation/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/device/deviceInformation/index.vue
@@ -5,44 +5,51 @@
         <!--用户数据-->
         <pane size="84">
           <el-col>
-            <el-form :model="queryParams" ref="form" size="small" :inline="true" v-show="showSearch" label-width="auto">
+            <el-form :model="queryParams" :rules="rules" ref="form" size="small" :inline="true" v-show="showSearch" label-width="auto">
               
               <el-row>
                 <el-form-item label="开启定时" prop="queryParams">
                   <el-radio-group v-model="queryParams.ruleType">
-                    <el-radio :label="1">间隔采集</el-radio>
-                    <el-radio :label="2">固定时间采集</el-radio>
-                    <el-radio :label="3">立即采集</el-radio>
+                    <el-radio :label="0">间隔采集</el-radio>
+                    <el-radio :label="1">固定时间采集</el-radio>
+                    <el-radio :label="2">立即采集</el-radio>
                   </el-radio-group>
                 </el-form-item>
               </el-row>
 
-              <el-row v-show="queryParams.ruleType == 1">
+              <el-row v-show="queryParams.ruleType == 0">
                 <el-col :span="24">
                   <el-form-item label="采集频率" prop="frequency">
                     <el-input-number v-model="queryParams.frequency" controls-position="right" :min="1"></el-input-number>
                   </el-form-item>
                 </el-col>
                 <el-col :span="24">
-                  <el-form-item label="采集时间限制">
-                    <el-time-picker
-                      is-range
-                      v-model="dateRange"
+                  <el-form-item label="采集时间限制" prop="dateRange">
+                    <el-date-picker
+                      v-model="queryParams.dateRange"
+                      @change="handleDateRangeChange"
+                      value-format="yyyy-MM-dd hh:mm:ss"
+                      type="daterange"
                       range-separator="至"
-                      start-placeholder="开始时间"
-                      end-placeholder="结束时间"
-                      placeholder="选择时间范围">
-                    </el-time-picker>
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"
+                      :picker-options="{ disabledDate: disablePastDate }"
+                      >
+                    </el-date-picker>
                   </el-form-item>
                 </el-col>
               </el-row>
-              <el-row v-show="queryParams.ruleType == 2">
+              <el-row v-show="queryParams.ruleType == 1">
                 <el-col :span="24">
                   <el-form-item label="采集时间限制">
-                    <el-time-picker
+                    <el-date-picker
                       v-model="queryParams.gatherTime"
+                      :disabledDate="disablePastDate"
+                      value-format="yyyy-MM-dd hh:mm:ss"
+                      type="datetime"
+                      :picker-options="{ disabledDate: disablePastDate }"
                       placeholder="任意时间点">
-                    </el-time-picker>
+                    </el-date-picker>
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -69,7 +76,6 @@ import "splitpanes/dist/splitpanes.css"
 
 export default {
   name: "User",
-  dicts: ['sys_normal_disable', 'sys_user_sex'],
   components: { Treeselect, Splitpanes, Pane },
   data() {
     return {
@@ -93,13 +99,15 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
-      // 日期范围
-      dateRange: [new Date(), new Date()],
       // 参数
       queryParams: {
-        ruleType: 1,
+        ruleType: 0,
         frequency: 1,
         gatherTime: null,
+        startTime: null,
+        endTime: null,
+        // 日期范围
+        dateRange: [],
       },
 
       // 表单校验
@@ -108,28 +116,9 @@ export default {
           { required: true, message: "用户名称不能为空", trigger: "blur" },
           { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
         ],
-        nickName: [
+        dateRange: [
           { required: true, message: "用户昵称不能为空", trigger: "blur" }
         ],
-        password: [
-          { required: true, message: "用户密码不能为空", trigger: "blur" },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
-          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
-        ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
-        ],
-        phonenumber: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
       }
     }
   },
@@ -141,96 +130,22 @@ export default {
   },
   created() {
     this.getList()
-    // this.getDeptTree()
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg
-    })
   },
   methods: {
     /** 查询用户列表 */
     getList() {
       this.loading = true
-      queryRule(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.rows
-          this.total = response.total
+      queryRule().then(response => {
+          this.queryParams = {...this.queryParams,...response.data}
           this.loading = false
         }
       )
     },
-    handleTimeChange(val) {
-      console.log('时间范围:', val); // val为数组 [start, end]
-      const [startTime, endTime] = val;
-      this.queryParams.startTime = startTime
-      this.queryParams.endTime = endTime
-      // 可在此处将值分别存储到其他变量
-    },
-    // 过滤禁用的部门
-    filterDisabledDept(deptList) {
-      return deptList.filter(dept => {
-        if (dept.disabled) {
-          return false
-        }
-        if (dept.children && dept.children.length) {
-          dept.children = this.filterDisabledDept(dept.children)
-        }
-        return true
-      })
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    },
-    // 用户状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用"
-      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function() {
-        return changeUserStatus(row.userId, row.status)
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功")
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0"
-      })
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false
-      this.reset()
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        userId: undefined,
-        deptId: undefined,
-        userName: undefined,
-        nickName: undefined,
-        password: undefined,
-        phonenumber: undefined,
-        email: undefined,
-        sex: undefined,
-        status: "0",
-        remark: undefined,
-        postIds: [],
-        roleIds: []
-      }
-      this.resetForm("form")
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset()
-      getUser().then(response => {
-        this.postOptions = response.posts
-        this.roleOptions = response.roles
-        this.open = true
-        this.title = "添加用户"
-        this.form.password = this.initPassword
-      })
-    },
     /** 提交按钮 */
     submitForm: function() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          addRule(this.form).then(response => {
+          addRule(this.queryParams).then(response => {
             this.$modal.msgSuccess("新增成功")
             this.open = false
             this.getList()
@@ -238,47 +153,21 @@ export default {
         }
       })
     },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const userIds = row.userId || this.ids
-      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
-        return delUser(userIds)
-      }).then(() => {
-        this.getList()
-        this.$modal.msgSuccess("删除成功")
-      }).catch(() => {})
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/user/export', {
-        ...this.queryParams
-      }, `user_${new Date().getTime()}.xlsx`)
-    },
-    /** 导入按钮操作 */
-    handleImport() {
-      this.upload.title = "用户导入"
-      this.upload.open = true
-    },
-    /** 下载模板操作 */
-    importTemplate() {
-      this.download('system/user/importTemplate', {
-      }, `user_template_${new Date().getTime()}.xlsx`)
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true
-    },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.upload.open = false
-      this.upload.isUploading = false
-      this.$refs.upload.clearFiles()
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
-      this.getList()
+    handleDateRangeChange(value) {
+      console.log("%c 🐁: handleDateRangeChange -> value ", "font-size:16px;background-color:#dbe986;color:black;", value)
+      this.queryParams.startTime = value[0]
+      this.queryParams.endTime = value[1]
     },
-    // 提交上传文件
-    submitFileForm() {
-      this.$refs.upload.submit()
+    
+    disablePastDate(time) {
+      // 获取当前日期（本地时间戳）
+      const today = new Date();
+      // 重置时间为当天 00:00:00
+      today.setHours(0, 0, 0, 0);
+      
+      // 禁用所有早于今天 00:00:00 的日期
+      console.log("%c 🐇: disablePastDate -> time.getTime() < today.getTime() ", "font-size:16px;background-color:#c5c908;color:black;", time.getTime() , today.getTime(), time.getTime() < today.getTime())
+      return time.getTime() < today.getTime();
     }
   }
 }
diff --git a/ALOps_sys_fe/alops-ui/src/views/device/deviceManufacturer/index.vue b/ALOps_sys_fe/alops-ui/src/views/device/deviceManufacturer/index.vue
index 5a84e20d..2b2abadd 100644
--- a/ALOps_sys_fe/alops-ui/src/views/device/deviceManufacturer/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/device/deviceManufacturer/index.vue
@@ -52,8 +52,7 @@
               </el-table-column>
               <el-table-column label="状态" align="center" key="status" prop="status" width="120" >
                 <template slot-scope="scope">
-                  
-                  <span>{{ scope.row.status ? '正常' : '停用' }}</span>
+                  <dict-tag :options="dict.type.device_disable" :value="scope.row.status"/>
                 </template>
               </el-table-column>
               <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
@@ -96,8 +95,8 @@
         </el-form-item>
       </el-col>
       <el-col :span="24">
-        <el-form-item label="介绍" prop="description">
-          <el-input v-model="form.description" placeholder="请输入介绍"  type="textarea" :rows="3" />
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="form.description" placeholder="请输入描述"  type="textarea" :rows="3" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -140,7 +139,7 @@ import "splitpanes/dist/splitpanes.css"
 
 export default {
   name: "User",
-  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  dicts: ['sys_normal_disable', 'sys_user_sex','device_disable'],
   components: { Treeselect, Splitpanes, Pane },
   data() {
     return {
@@ -240,10 +239,6 @@ export default {
   },
   created() {
     this.getList()
-    // this.getDeptTree()
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg
-    })
   },
   methods: {
     /** 查询用户列表 */
diff --git a/ALOps_sys_fe/alops-ui/src/views/device/deviceSupplier/index.vue b/ALOps_sys_fe/alops-ui/src/views/device/deviceSupplier/index.vue
index 2a1cefef..a426c45d 100644
--- a/ALOps_sys_fe/alops-ui/src/views/device/deviceSupplier/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/device/deviceSupplier/index.vue
@@ -221,10 +221,6 @@ export default {
   },
   created() {
     this.getList()
-    // this.getDeptTree()
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg
-    })
   },
   methods: {
     /** 查询用户列表 */
diff --git a/ALOps_sys_fe/alops-ui/src/views/device/deviceType/index.vue b/ALOps_sys_fe/alops-ui/src/views/device/deviceType/index.vue
index da1b4e7f..91cfdbf1 100644
--- a/ALOps_sys_fe/alops-ui/src/views/device/deviceType/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/device/deviceType/index.vue
@@ -62,7 +62,6 @@
     <el-dialog :title="title" :visible.sync="open" width="760px" append-to-body :destroy-on-close="true">
   <el-form ref="form" :model="form" :rules="rules" label-width="90px">
     <el-row :gutter="20">
-      <!-- 类型昵称 + 手机号码 -->
       <el-col :span="12">
         <el-form-item label="设备名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入类型昵称" maxlength="30" />
@@ -188,10 +187,6 @@ export default {
   },
   created() {
     this.getList()
-    // this.getDeptTree()
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg
-    })
   },
   methods: {
     /** 查询类型列表 */
@@ -207,8 +202,6 @@ export default {
     upImage(fileList){
       console.log(fileList)
       this.form.image = fileList
-
-      
     },
     // 取消按钮
     cancel() {
@@ -234,10 +227,7 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.dateRange = []
       this.resetForm("queryForm")
-      this.queryParams.deptId = undefined
-      this.$refs.tree.setCurrentKey(null)
       this.handleQuery()
     },
     // 多选框选中数据
diff --git a/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue b/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue
index 866eda70..4185cba1 100644
--- a/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue
@@ -6,27 +6,19 @@
         <pane size="84">
           <el-col>
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+              <el-form-item label="安装日期">
+                <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd hh:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+              </el-form-item>
               <el-form-item label="设备名称" prop="name">
                 <el-input v-model="queryParams.name" placeholder="请输入设备名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
               </el-form-item>
-              <el-form-item label="安装位置" prop="location">
-                <el-input v-model="queryParams.phonenumber" placeholder="请输入安装位置" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-              </el-form-item>
-              <el-form-item label="设备类型" prop="phonenumber">
-                <el-input v-model="queryParams.phonenumber" placeholder="请输入设备类型" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-              </el-form-item>
-              <el-form-item label="安装日期">
-                <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-              </el-form-item>
               <el-form-item label="状态" prop="status">
                 <el-select v-model="queryParams.status" placeholder="启用状态" clearable style="width: 240px">
-                  <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+                  <el-option v-for="dict in dict.type.device_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
                 </el-select>
               </el-form-item>
-              <el-form-item label="设备级别" prop="status">
-                <el-select v-model="queryParams.status" placeholder="设备级别" clearable style="width: 240px">
-                  <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
+              <el-form-item label="安装位置" prop="location">
+                <el-input v-model="queryParams.phonenumber" placeholder="请输入安装位置" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
               </el-form-item>
               <el-form-item>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -53,46 +45,43 @@
                 width="60"
                 type="index"
               ></el-table-column>              
-              <el-table-column label="设备编号" align="center" key="id" prop="id" />
+              <el-table-column label="设备ID" align="center" key="equNumber" prop="equNumber" />
               <el-table-column label="设备名称" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
               <el-table-column label="设备版本" align="center" key="version" prop="version" :show-overflow-tooltip="true" />
-              <el-table-column label="设备类型" align="center" key="equType" prop="EquType" :show-overflow-tooltip="true" />
-              <el-table-column label="设备级别" align="center" prop="phonenumber" width="120" />
+              <el-table-column label="设备类型" align="center" key="equType" prop="equType" :show-overflow-tooltip="true" />
+              <el-table-column label="设备级别" align="center" key="deviceLevel" prop="deviceLevel" width="120" />
               <el-table-column label="启用状态" align="center" key="status">
                 <template slot-scope="scope">
-                  <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+                  <dict-tag :options="dict.type.device_disable" :value="scope.row.status"/>
                 </template>
               </el-table-column>
-              <el-table-column label="带外管理IP" align="center" key="Ip" prop="Ip" width="120" />
-             
-              <el-table-column label="设备厂商" align="center" key="Manufacture" prop="Manufacture" width="120" />
+              <el-table-column label="带外管理IP" align="center" key="ip" prop="ip" width="120" />
               <el-table-column label="安装位置" align="center" key="location" prop="Location" width="120" />
-              <el-table-column label="安装时间" align="center" prop="InstallDate" width="160">
+              <el-table-column label="安装时间" align="center" prop="installDate" width="160">
                 <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.InstallDate) }}</span>
+                  <span>{{ parseTime(scope.row.installDate) }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="设备管理员" align="center" prop="inCharge" width="120" />
+             
+              <el-table-column label="设备厂商" align="center" key="manufacture" prop="manufacture" width="120" />
+              <el-table-column label="设备供应商" align="center" key="supplierName" prop="supplierName" width="120" />
+              <el-table-column label="设备管理员" align="center" key="inCharge" prop="inCharge" width="120" />
               <el-table-column label="预计年限" align="center" key="lifeCycle" prop="lifeCycle" width="120" />
               <el-table-column label="服役年限" align="center" key="serviceTime" prop="serviceTime" width="120" />
               <el-table-column label="质保时间" align="center" key="warranty" prop="warranty"  width="120" />
-              <el-table-column label="累计预警次数" align="center" key="failureFrequency" prop="failureFrequency"  width="120" />
-              <el-table-column label="累计维修次数" align="center" key="repairFrequency" prop="repairFrequency"  width="120" />
-              <el-table-column label="累计维修金额" align="center" key="repairCost" prop="repairCost"  width="120" />
-              <el-table-column label="设备添加人" align="center" key="createBy" prop="createBy"  width="120" />
-              <el-table-column label="添加时间" align="center" prop="createDate" width="160">
+              <el-table-column label="设备图片" align="center" key="image" prop="image" :show-overflow-tooltip="true" >
                 <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.createTime) }}</span>
+                  <ImagePreview :src="scope.row.image"/>
                 </template>
               </el-table-column>
-              <el-table-column label="修改人" align="center" prop="UpdateBy"  width="120" />
-              <el-table-column label="修改时间" align="center" prop="createTime" width="160">
+              <el-table-column label="设备添加人" align="center" key="createBy" prop="createBy"  width="120" />
+              <el-table-column label="添加日期" align="center" prop="createDate" width="160">
                 <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
+                  <span>{{ parseTime(scope.row.createDate) }}</span>
+                </template> 
               </el-table-column>
               <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
-                <template slot-scope="scope" v-if="scope.row.id !== 1">
+                <template slot-scope="scope">
                   <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:files:edit']">修改</el-button>
                   <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:files:remove']">删除</el-button>
                 </template>
@@ -109,8 +98,8 @@
   <el-form ref="form" :model="form" :rules="rules" label-width="100px">
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="设备编号" prop="id">
-          <el-input v-model="form.id" placeholder="请输入设备编号" maxlength="30" />
+        <el-form-item label="设备编号" prop="equNumber">
+          <el-input v-model="form.equNumber" placeholder="请输入设备名称" maxlength="30" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -129,8 +118,8 @@
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="设备级别" prop="equLevel">
-          <el-input v-model="form.equLevel" placeholder="请输入设备级别" maxlength="30" />
+        <el-form-item label="设备级别" prop="deviceLevel">
+          <el-input v-model="form.deviceLevel" placeholder="请输入设备级别" maxlength="30" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -169,10 +158,9 @@
         </el-form-item>
       </el-col>
 
-      <!-- 备注（单独一行） -->
       <el-col :span="24">
-        <el-form-item label="备注">
-          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内容" />
+        <el-form-item label="设备图片" prop="image">
+          <ImageUpload @input="upImage" :value="form.image"/>
         </el-form-item>
       </el-col>
     </el-row>
@@ -217,7 +205,7 @@ import "splitpanes/dist/splitpanes.css"
 
 export default {
   name: "User",
-  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  dicts: ['device_disable', 'sys_user_sex'],
   components: { Treeselect, Splitpanes, Pane },
   data() {
     return {
@@ -279,19 +267,49 @@ export default {
         pageNum: 1,
         pageSize: 10,
         name: undefined,
-        phonenumber: undefined,
-        status: undefined,
-        deptId: undefined
+        status: undefined
       },
       // 表单校验
       rules: {
+        equNumber: [
+          { required: true, message: "设备编号不能为空", trigger: "blur" },
+        ],
         name: [
-          { required: true, message: "设备名称不能为空", trigger: "blur" },
-          { min: 2, max: 20, message: '设备名称长度必须介于 2 和 20 之间', trigger: 'blur' }
+          { required: true, message: "设备名称不能为空", trigger: "blur" }
+        ],
+        version: [
+          { required: true, message: "设备版本不能为空", trigger: "blur" },
+        ],
+        equType: [
+          { required: true, message: "设备类型不能为空", trigger: "blur" }
+        ],
+        deviceLevel: [
+          { required: true, message: "设备级别不能为空", trigger: "blur" },
+        ],
+        ip: [
+          { required: true, message: "带外管理IP不能为空", trigger: "blur" }
+        ],
+        manufacture: [
+          { required: true, message: "设备厂商不能为空", trigger: "blur" },
+        ],
+        location: [
+          { required: true, message: "安装位置不能为空", trigger: "blur" }
+        ],
+        inCharge: [
+          { required: true, message: "设备管理员不能为空", trigger: "blur" },
+        ],
+        lifeCycle: [
+          { required: true, message: "预计年限不能为空", trigger: "blur" }
+        ],
+        serviceTime: [
+          { required: true, message: "服役年限不能为空", trigger: "blur" },
+        ],
+        warranty: [
+          { required: true, message: "质保年限不能为空", trigger: "blur" }
+        ],
+        image: [
+          { required: true, message: "设备图片不能为空", trigger: "blur" }
         ],
-        nickName: [
-          { required: true, message: "设备昵称不能为空", trigger: "blur" }
-        ]
       }
     }
   },
@@ -303,68 +321,21 @@ export default {
   },
   created() {
     this.getList()
-    // this.getDeptTree()
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg
-    })
   },
   methods: {
-    /** 查询设备列表 */
-    getDicts() {
-      getDict().then(response => {
-      console.log("%c 🗝️: getDict -> response ", "font-size:16px;background-color:#796b0d;color:white;", response)
-        }
-      )
-    },
     /** 查询设备列表 */
     getList() {
       this.loading = true
-      list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+      list({minTime:this.dateRange[0],maxTime:this.dateRange[1],...this.queryParams}).then(response => {
           this.dataList = response.rows
           this.total = response.total
           this.loading = false
         }
       )
     },
-    // /** 查询部门下拉树结构 */
-    // getDeptTree() {
-    //   deptTreeSelect().then(response => {
-    //     this.deptOptions = response.data
-    //     this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
-    //   })
-    // },
-    // 过滤禁用的部门
-    filterDisabledDept(deptList) {
-      return deptList.filter(dept => {
-        if (dept.disabled) {
-          return false
-        }
-        if (dept.children && dept.children.length) {
-          dept.children = this.filterDisabledDept(dept.children)
-        }
-        return true
-      })
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.deptId = data.id
-      this.handleQuery()
-    },
-    // 设备状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用"
-      this.$modal.confirm('确认要"' + text + '""' + row.name + '"设备吗？').then(function() {
-        return changeUserStatus(row.id, row.status)
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功")
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0"
-      })
+    upImage(fileList){
+      console.log(fileList)
+      this.form.image = fileList
     },
     // 取消按钮
     cancel() {
@@ -397,11 +368,8 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.dateRange = []
-      // this.resetForm("queryForm")
-      // this.queryParams.deptId = undefined
-      // this.$refs.tree.setCurrentKey(null)
-      // this.handleQuery()
-      this.getDicts()
+      this.resetForm("queryForm")
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -412,56 +380,20 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset()
-      // getInfo().then(response => {
-      //   this.postOptions = response.posts
-      //   this.roleOptions = response.roles
-      // })
         this.open = true
         this.title = "添加设备"
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset()
-      const id = row.id || this.ids
-      getInfo(id).then(response => {
-        this.form = response.data
-        this.postOptions = response.posts
-        this.roleOptions = response.roles
-        this.$set(this.form, "postIds", response.postIds)
-        this.$set(this.form, "roleIds", response.roleIds)
-        this.open = true
-        this.title = "修改设备"
-        this.form.password = ""
-      })
-    },
-    /** 重置密码按钮操作 */
-    handleResetPwd(row) {
-      this.$prompt('请输入"' + row.name + '"的新密码', "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        closeOnClickModal: false,
-        inputPattern: /^.{5,20}$/,
-        inputErrorMessage: "设备密码长度必须介于 5 和 20 之间",
-        inputValidator: (value) => {
-          if (/<|>|"|'|\||\\/.test(value)) {
-            return "不能包含非法字符：< > \" ' \\\ |"
-          }
-        },
-      }).then(({ value }) => {
-          resetUserPwd(row.id, value).then(response => {
-            this.$modal.msgSuccess("修改成功，新密码是：" + value)
-          })
-        }).catch(() => {})
+      this.form = {...row}
+      this.open = true
+      this.title = "修改"
     },
     /** 提交按钮 */
     submitForm: function() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-            add(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功")
-              this.open = false
-              this.getList()
-            })
           if (this.form.id != undefined) {
             update(this.form).then(response => {
               this.$modal.msgSuccess("修改成功")
@@ -481,19 +413,13 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const Ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除设备编号为"' + Ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除设备ID为"' + Ids + '"的数据项？').then(function() {
         return del(Ids)
       }).then(() => {
         this.getList()
         this.$modal.msgSuccess("删除成功")
       }).catch(() => {})
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/user/export', {
-        ...this.queryParams
-      }, `user_${new Date().getTime()}.xlsx`)
-    },
     /** 导入按钮操作 */
     handleImport() {
       this.upload.title = "设备导入"
diff --git a/ALOps_sys_fe/alops-ui/src/views/device/supplier/index.vue b/ALOps_sys_fe/alops-ui/src/views/device/supplier/index.vue
index dfa7861d..bda8c76d 100644
--- a/ALOps_sys_fe/alops-ui/src/views/device/supplier/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/device/supplier/index.vue
@@ -2,18 +2,14 @@
   <div class="app-container">
     <el-row :gutter="20">
       <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
-        <!--厂商信息-->
+       
+       
+        <!--类型类型管理-->
         <pane size="84">
           <el-col>
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-              <el-form-item label="厂商名称" prop="name">
-                <el-input v-model="queryParams.name" placeholder="请输入厂商名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-              </el-form-item>
-              <el-form-item label="联系人" prop="contactBy">
-                <el-input v-model="queryParams.contactBy" placeholder="请输入联系人" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-              </el-form-item>
-              <el-form-item label="联系电话" prop="contactWay">
-                <el-input v-model="queryParams.contactWay" placeholder="请输入联系电话" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+              <el-form-item label="类型名称" prop="name">
+                <el-input v-model="queryParams.name" placeholder="请输入类型名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
               </el-form-item>
               <el-form-item>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -23,36 +19,38 @@
 
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['device:deviceManufacturer:add']">新增</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['device:deviceManufacturer:remove']">删除</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['device:deviceManufacturer:import']">导入</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['device:deviceManufacturer:export']">导出</el-button>
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['device:deviceType:add']">新增</el-button>
               </el-col>
+              <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> -->
             </el-row>
 
             <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="50" align="center" />
-              <el-table-column label="ID" align="center" key="Id" prop="Id" />
-              <el-table-column label="厂商名称" align="center" key="name" prop="name" width="120" />
+              <el-table-column
+                label="序号"
+                width="60"
+                type="index"
+              ></el-table-column>
+              <el-table-column label="供应商名称" align="center" key="name" prop="name" width="160" :show-overflow-tooltip="true" />
               <el-table-column label="联系人" align="center" key="contactBy" prop="contactBy" width="120" />
               <el-table-column label="联系方式" align="center" key="contactWay" prop="contactWay" width="120" />
-              <el-table-column label="创建人" align="center" key="CreateBy" prop="CreateBy" width="120" />
-              <el-table-column label="创建日期" align="center" prop="CreateDate" width="160">
+              <el-table-column label="描述" align="center" key="description" prop="description" width="120" />
+              <el-table-column label="创建人" align="center" key="createBy" prop="createBy" width="120" />
+              <el-table-column label="创建日期" align="center" prop="createTime" width="160">
                 <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.CreateDate) }}</span>
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="状态" align="center" key="Status" prop="Status" width="120" />
-              <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+              <el-table-column label="状态" align="center" key="status" prop="status" width="120" >
                 <template slot-scope="scope">
-                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:deviceManufacturer:edit']">修改</el-button>
-                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:deviceManufacturer:remove']">删除</el-button>
+                  
+                  <span>{{ scope.row.status ? '正常' : '停用' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+                <template slot-scope="scope" v-if="scope.row.id !== 1">
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:deviceType:edit']">修改</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:deviceType:remove']">删除</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -63,17 +61,17 @@
       </splitpanes>
     </el-row>
 
-    <el-dialog :title="title" :visible.sync="open" width="760px"  append-to-body>
-  <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+    <el-dialog :title="title" :visible.sync="open" width="760px" append-to-body :destroy-on-close="true">
+  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="厂商名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入用户昵称" maxlength="30" />
+        <el-form-item label="供应商名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入联系人" maxlength="30" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="联系人" prop="contactBy">
-          <el-input v-model="form.contactBy" placeholder="请输入手机号码" maxlength="30" />
+          <el-input v-model="form.contactBy" placeholder="请输入联系人" maxlength="30" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -81,7 +79,21 @@
           <el-input v-model="form.contactWay" placeholder="请输入手机号码" maxlength="11" />
         </el-form-item>
       </el-col>
+      <el-col :span="12">
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="form.status" placeholder="启用状态" clearable>
+            <el-option v-for="dict in statusSelections" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="form.description" placeholder="请输入描述"  type="textarea" :rows="3" />
+        </el-form-item>
+      </el-col>
     </el-row>
+
+  
   </el-form>
    <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -89,30 +101,11 @@
     </span>
   
 </el-dialog>
-
-    <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip text-center" slot="tip">
-          <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的厂商信息
-          </div>
-          <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
-        </div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { list,  del, add, update, resetUserPwd, changeUserStatus } from "@/api/device/deviceManufacturer"
+import { list,  del, add, update } from "@/api/device/supplier"
 import { getToken } from "@/utils/auth"
 import Treeselect from "@riophae/vue-treeselect"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
@@ -125,6 +118,7 @@ export default {
   components: { Treeselect, Splitpanes, Pane },
   data() {
     return {
+      appBase:process.env.VUE_APP_BASE_API,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -137,7 +131,7 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
-      // 用户表格数据
+      // 类型表格数据
       userList: null,
       // 弹出层标题
       title: "",
@@ -159,19 +153,23 @@ export default {
       roleOptions: [],
       // 表单参数
       form: {},
+      statusSelections: [
+        { label: "正常", value: 1 },
+        { label: "停用", value: 0 }
+      ],
       defaultProps: {
         children: "children",
         label: "label"
       },
-      // 用户导入参数
+      // 类型导入参数
       upload: {
-        // 是否显示弹出层（用户导入）
+        // 是否显示弹出层（类型导入）
         open: false,
-        // 弹出层标题（用户导入）
+        // 弹出层标题（类型导入）
         title: "",
         // 是否禁用上传
         isUploading: false,
-        // 是否更新已经存在的厂商信息
+        // 是否更新已经存在的类型数据
         updateSupport: 0,
         // 设置上传的请求头部
         headers: { Authorization: "Bearer " + getToken() },
@@ -182,39 +180,29 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        name: undefined,
-        contactBy: undefined,
-        status: undefined,
-        deptId: undefined
+        name: undefined
       },
+
       // 表单校验
       rules: {
         name: [
-          { required: true, message: "用户名称不能为空", trigger: "blur" },
-          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
-        ],
-        nickName: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
-        ],
-        password: [
-          { required: true, message: "用户密码不能为空", trigger: "blur" },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
-          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
-        ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
+          { required: true, message: "供应商名称不能为空", trigger: "blur" },
+          { min: 2, max: 20, message: '供应商名称长度必须介于 2 和 20 之间', trigger: 'blur' }
         ],
         contactBy: [
+          { required: true, message: "联系人不能为空", trigger: "blur" }
+        ],
+        contactWay: [
+          { required: true, message: "联系方式不能为空", trigger: "blur" },
           {
             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
             message: "请输入正确的手机号码",
             trigger: "blur"
           }
-        ]
+        ],
+        status: [
+          { required: true, message: "状态不能为空", trigger: "blur" }
+        ],
       }
     }
   },
@@ -226,13 +214,9 @@ export default {
   },
   created() {
     this.getList()
-    // this.getDeptTree()
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg
-    })
   },
   methods: {
-    /** 查询用户列表 */
+    /** 查询类型列表 */
     getList() {
       this.loading = true
       list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
@@ -242,45 +226,11 @@ export default {
         }
       )
     },
-    // /** 查询部门下拉树结构 */
-    // getDeptTree() {
-    //   deptTreeSelect().then(response => {
-    //     this.deptOptions = response.data
-    //     this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
-    //   })
-    // },
-    // 过滤禁用的部门
-    filterDisabledDept(deptList) {
-      return deptList.filter(dept => {
-        if (dept.disabled) {
-          return false
-        }
-        if (dept.children && dept.children.length) {
-          dept.children = this.filterDisabledDept(dept.children)
-        }
-        return true
-      })
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.deptId = data.id
-      this.handleQuery()
-    },
-    // 用户状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用"
-      this.$modal.confirm('确认要"' + text + '""' + row.name + '"用户吗？').then(function() {
-        return changeUserStatus(row.Id, row.status)
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功")
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0"
-      })
+    upImage(fileList){
+      console.log(fileList)
+      this.form.image = fileList
+
+      
     },
     // 取消按钮
     cancel() {
@@ -290,18 +240,12 @@ export default {
     // 表单重置
     reset() {
       this.form = {
-        Id: undefined,
-        deptId: undefined,
+        id: undefined,
         name: undefined,
-        nickName: undefined,
-        password: undefined,
-        contactBy: undefined,
-        email: undefined,
-        sex: undefined,
-        status: "0",
-        remark: undefined,
-        postIds: [],
-        roleIds: []
+        description: undefined,
+        createBy: undefined,
+        image: undefined,
+        createDate: undefined
       }
       this.resetForm("form")
     },
@@ -320,78 +264,28 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.Id)
+      this.ids = selection.map(item => item.id)
       this.single = selection.length != 1
       this.multiple = !selection.length
     },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleResetPwd":
-          this.handleResetPwd(row)
-          break
-        case "handleAuthRole":
-          this.handleAuthRole(row)
-          break
-        default:
-          break
-      }
-    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset()
-      getUser().then(response => {
-        this.postOptions = response.posts
-        this.roleOptions = response.roles
-        this.open = true
-        this.title = "添加用户"
-        this.form.password = this.initPassword
-      })
+      this.open = true
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset()
-      const Id = row.Id || this.ids
-      getUser(Id).then(response => {
-        this.form = response.data
-        this.postOptions = response.posts
-        this.roleOptions = response.roles
-        this.$set(this.form, "postIds", response.postIds)
-        this.$set(this.form, "roleIds", response.roleIds)
+      const id = row.id || this.ids
         this.open = true
-        this.title = "修改用户"
-        this.form.password = ""
-      })
-    },
-    /** 重置密码按钮操作 */
-    handleResetPwd(row) {
-      this.$prompt('请输入"' + row.name + '"的新密码', "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        closeOnClickModal: false,
-        inputPattern: /^.{5,20}$/,
-        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
-        inputValidator: (value) => {
-          if (/<|>|"|'|\||\\/.test(value)) {
-            return "不能包含非法字符：< > \" ' \\\ |"
-          }
-        },
-      }).then(({ value }) => {
-          resetUserPwd(row.Id, value).then(response => {
-            this.$modal.msgSuccess("修改成功，新密码是：" + value)
-          })
-        }).catch(() => {})
-    },
-    /** 分配角色操作 */
-    handleAuthRole: function(row) {
-      const Id = row.Id
-      this.$router.push("/system/user-auth/role/" + Id)
+        this.title = "修改类型"
+        this.form = {...row, image: row.image}
     },
     /** 提交按钮 */
     submitForm: function() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          if (this.form.Id != undefined) {
+          if (this.form.id != undefined) {
             update(this.form).then(response => {
               this.$modal.msgSuccess("修改成功")
               this.open = false
@@ -409,8 +303,8 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const Ids = row.Id || this.ids
-      this.$modal.confirm('是否确认删除用户编号为"' + Ids + '"的数据项？').then(function() {
+      const Ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除类型编号为"' + Ids + '"的数据项？').then(function() {
         return del(Ids)
       }).then(() => {
         this.getList()
@@ -425,7 +319,7 @@ export default {
     },
     /** 导入按钮操作 */
     handleImport() {
-      this.upload.title = "用户导入"
+      this.upload.title = "类型导入"
       this.upload.open = true
     },
     /** 下载模板操作 */
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/assessment/index.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/assessment/index.vue
index 32b7512d..4e0467b1 100644
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/assessment/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/assessment/index.vue
@@ -306,10 +306,6 @@ export default {
   },
   created() {
     this.getList()
-    // this.getDeptTree()
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg
-    })
   },
   methods: {
     /** 查询用户列表 */
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue
index 26928b36..8a4bf9e2 100644
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue
@@ -274,10 +274,6 @@ export default {
   },
   created() {
     this.getList()
-    // this.getDeptTree()
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg
-    })
   },
   methods: {
     /** 查询设备列表 */
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/earlyWarning/index.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/earlyWarning/index.vue
deleted file mode 100644
index c544ce9f..00000000
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/earlyWarning/index.vue
+++ /dev/null
@@ -1,509 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
-       
-       
-        <!--类型类型管理-->
-        <pane size="84">
-          <el-col>
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-              <el-form-item label="类型名称" prop="userName">
-                <el-input v-model="queryParams.userName" placeholder="请输入类型名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-              </el-form-item>
-              <el-form-item label="状态" prop="status">
-                <el-select v-model="queryParams.status" placeholder="类型状态" clearable style="width: 240px">
-                  <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="创建时间">
-                <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-              </el-form-item>
-            </el-form>
-
-            <el-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['device:deviceType:add']">新增</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['device:deviceType:import']">导入</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['device:deviceType:export']">导出</el-button>
-              </el-col>
-            </el-row>
-
-            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-              <el-table-column type="selection" width="50" align="center" />
-              <el-table-column label="编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
-              <el-table-column label="名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="描述" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="触发条件" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="预警等级" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="预警方式" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="预警消息" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
-                <template slot-scope="scope" v-if="scope.row.userId !== 1">
-                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:deviceType:edit']">修改</el-button>
-                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:deviceType:remove']">删除</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-          </el-col>
-        </pane>
-      </splitpanes>
-    </el-row>
-
-    <el-dialog :title="title" :visible.sync="open" width="760px"  append-to-body>
-  <el-form ref="form" :model="form" :rules="rules" label-width="90px">
-    <el-row :gutter="20">
-      <!-- 类型昵称 + 手机号码 -->
-      <el-col :span="12">
-        <el-form-item label="类型昵称" prop="nickName">
-          <el-input v-model="form.nickName" placeholder="请输入类型昵称" maxlength="30" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="手机号码" prop="phonenumber">
-          <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
-        </el-form-item>
-      </el-col>
-
-      <!-- 邮箱 + 类型名称 -->
-      <el-col :span="12">
-        <el-form-item label="邮箱" prop="email">
-          <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item v-if="form.userId == undefined" label="类型名称" prop="userName">
-          <el-input v-model="form.userName" placeholder="请输入类型名称" maxlength="30" />
-        </el-form-item>
-      </el-col>
-
-      <!-- 类型密码（仅新增）+ 类型性别 -->
-      <el-col :span="12">
-        <el-form-item v-if="form.userId == undefined" label="类型密码" prop="password">
-          <el-input v-model="form.password" placeholder="请输入类型密码" type="password" maxlength="20" show-password />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="类型性别">
-          <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%">
-            <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-
-      <!-- 状态 + 角色 -->
-      <el-col :span="12">
-        <el-form-item label="状态">
-          <el-radio-group v-model="form.status">
-            <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="角色">
-          <el-select v-model="form.roleIds" multiple placeholder="请选择角色" style="width: 100%">
-            <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-
-      <!-- 备注（单独一行） -->
-      <el-col :span="24">
-        <el-form-item label="备注">
-          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内容" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-
-  
-  </el-form>
-   <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="cancel">取 消</el-button>
-    </span>
-  
-</el-dialog>
-
-    <!-- 类型导入对话框 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip text-center" slot="tip">
-          <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的类型数据
-          </div>
-          <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
-        </div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/inMonitoring/earlyWarning"
-import { getToken } from "@/utils/auth"
-import Treeselect from "@riophae/vue-treeselect"
-import "@riophae/vue-treeselect/dist/vue-treeselect.css"
-import { Splitpanes, Pane } from "splitpanes"
-import "splitpanes/dist/splitpanes.css"
-
-export default {
-  name: "User",
-  dicts: ['sys_normal_disable', 'sys_user_sex'],
-  components: { Treeselect, Splitpanes, Pane },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 类型表格数据
-      userList: null,
-      // 弹出层标题
-      title: "",
-      // 所有部门树选项
-      deptOptions: undefined,
-      // 过滤掉已禁用部门树选项
-      enabledDeptOptions: undefined,
-      // 是否显示弹出层
-      open: false,
-      // 部门名称
-      deptName: undefined,
-      // 默认密码
-      initPassword: undefined,
-      // 日期范围
-      dateRange: [],
-      // 岗位选项
-      postOptions: [],
-      // 角色选项
-      roleOptions: [],
-      // 表单参数
-      form: {},
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
-      // 类型导入参数
-      upload: {
-        // 是否显示弹出层（类型导入）
-        open: false,
-        // 弹出层标题（类型导入）
-        title: "",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的类型数据
-        updateSupport: 0,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
-      },
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        userName: undefined,
-        phonenumber: undefined,
-        status: undefined,
-        deptId: undefined
-      },
-      // 列信息
-    columns: [
-  { key: 0, label: '类型编号', visible: true, showInSelector: true },
-  { key: 1, label: '类型名称', visible: true, showInSelector: true },
-  { key: 2, label: '类型昵称', visible: true, showInSelector: true },
-  { key: 3, label: '部门', visible: false, showInSelector: false }, // 👈 不在显隐选择器中出现
-  { key: 4, label: '手机号码', visible: true, showInSelector: true },
-  { key: 5, label: '状态', visible: true, showInSelector: true },
-  { key: 6, label: '创建时间', visible: true, showInSelector: true }
-],
-
-      // 表单校验
-      rules: {
-        userName: [
-          { required: true, message: "类型名称不能为空", trigger: "blur" },
-          { min: 2, max: 20, message: '类型名称长度必须介于 2 和 20 之间', trigger: 'blur' }
-        ],
-        nickName: [
-          { required: true, message: "类型昵称不能为空", trigger: "blur" }
-        ],
-        password: [
-          { required: true, message: "类型密码不能为空", trigger: "blur" },
-          { min: 5, max: 20, message: '类型密码长度必须介于 5 和 20 之间', trigger: 'blur' },
-          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
-        ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
-        ],
-        phonenumber: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
-      }
-    }
-  },
-  watch: {
-    // 根据名称筛选部门树
-    deptName(val) {
-      this.$refs.tree.filter(val)
-    }
-  },
-  created() {
-    this.getList()
-    // this.getDeptTree()
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg
-    })
-  },
-  methods: {
-    /** 查询类型列表 */
-    getList() {
-      this.loading = true
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.rows
-          this.total = response.total
-          this.loading = false
-        }
-      )
-    },
-    // /** 查询部门下拉树结构 */
-    // getDeptTree() {
-    //   deptTreeSelect().then(response => {
-    //     this.deptOptions = response.data
-    //     this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
-    //   })
-    // },
-    // 过滤禁用的部门
-    filterDisabledDept(deptList) {
-      return deptList.filter(dept => {
-        if (dept.disabled) {
-          return false
-        }
-        if (dept.children && dept.children.length) {
-          dept.children = this.filterDisabledDept(dept.children)
-        }
-        return true
-      })
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.deptId = data.id
-      this.handleQuery()
-    },
-    // 类型状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用"
-      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"类型吗？').then(function() {
-        return changeUserStatus(row.userId, row.status)
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功")
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0"
-      })
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false
-      this.reset()
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        userId: undefined,
-        deptId: undefined,
-        userName: undefined,
-        nickName: undefined,
-        password: undefined,
-        phonenumber: undefined,
-        email: undefined,
-        sex: undefined,
-        status: "0",
-        remark: undefined,
-        postIds: [],
-        roleIds: []
-      }
-      this.resetForm("form")
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = []
-      this.resetForm("queryForm")
-      this.queryParams.deptId = undefined
-      this.$refs.tree.setCurrentKey(null)
-      this.handleQuery()
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.userId)
-      this.single = selection.length != 1
-      this.multiple = !selection.length
-    },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleResetPwd":
-          this.handleResetPwd(row)
-          break
-        case "handleAuthRole":
-          this.handleAuthRole(row)
-          break
-        default:
-          break
-      }
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset()
-      getUser().then(response => {
-        this.postOptions = response.posts
-        this.roleOptions = response.roles
-        this.open = true
-        this.title = "添加类型"
-        this.form.password = this.initPassword
-      })
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset()
-      const userId = row.userId || this.ids
-      getUser(userId).then(response => {
-        this.form = response.data
-        this.postOptions = response.posts
-        this.roleOptions = response.roles
-        this.$set(this.form, "postIds", response.postIds)
-        this.$set(this.form, "roleIds", response.roleIds)
-        this.open = true
-        this.title = "修改类型"
-        this.form.password = ""
-      })
-    },
-    /** 重置密码按钮操作 */
-    handleResetPwd(row) {
-      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        closeOnClickModal: false,
-        inputPattern: /^.{5,20}$/,
-        inputErrorMessage: "类型密码长度必须介于 5 和 20 之间",
-        inputValidator: (value) => {
-          if (/<|>|"|'|\||\\/.test(value)) {
-            return "不能包含非法字符：< > \" ' \\\ |"
-          }
-        },
-      }).then(({ value }) => {
-          resetUserPwd(row.userId, value).then(response => {
-            this.$modal.msgSuccess("修改成功，新密码是：" + value)
-          })
-        }).catch(() => {})
-    },
-    /** 分配角色操作 */
-    handleAuthRole: function(row) {
-      const userId = row.userId
-      this.$router.push("/system/user-auth/role/" + userId)
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.userId != undefined) {
-            updateUser(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功")
-              this.open = false
-              this.getList()
-            })
-          } else {
-            addUser(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功")
-              this.open = false
-              this.getList()
-            })
-          }
-        }
-      })
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const userIds = row.userId || this.ids
-      this.$modal.confirm('是否确认删除类型编号为"' + userIds + '"的数据项？').then(function() {
-        return delUser(userIds)
-      }).then(() => {
-        this.getList()
-        this.$modal.msgSuccess("删除成功")
-      }).catch(() => {})
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/user/export', {
-        ...this.queryParams
-      }, `user_${new Date().getTime()}.xlsx`)
-    },
-    /** 导入按钮操作 */
-    handleImport() {
-      this.upload.title = "类型导入"
-      this.upload.open = true
-    },
-    /** 下载模板操作 */
-    importTemplate() {
-      this.download('system/user/importTemplate', {
-      }, `user_template_${new Date().getTime()}.xlsx`)
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true
-    },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.upload.open = false
-      this.upload.isUploading = false
-      this.$refs.upload.clearFiles()
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
-      this.getList()
-    },
-    // 提交上传文件
-    submitFileForm() {
-      this.$refs.upload.submit()
-    }
-  }
-}
-</script>
\ No newline at end of file
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue
new file mode 100644
index 00000000..3f7ad5e9
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
+        <!--设备档案-->
+        <pane size="84">
+          <el-col>
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+              <el-form-item label="预警时间">
+                <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd hh:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+              </el-form-item>
+              <el-form-item label="预警等级" prop="level">
+                <el-select v-model="queryParams.level" placeholder="预警等级" clearable style="width: 240px">
+                  <el-option v-for="dict in dict.type.warning_level" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="状态" prop="status">
+                <el-select v-model="queryParams.status" placeholder="处理状态" clearable style="width: 240px">
+                  <el-option v-for="dict in dict.type.alert_message_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="位置" prop="location">
+                <el-input v-model="queryParams.phonenumber" placeholder="请输入位置" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <!-- <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['device:files:add']">新增</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['device:files:remove']">删除</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['device:files:import']">导入</el-button>
+              </el-col>
+            </el-row> -->
+
+            <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="50" align="center" />
+              <el-table-column
+                label="序号"
+                width="60"
+                type="index"
+              ></el-table-column>              
+              <el-table-column label="预警时间" align="center" key="occurTime" prop="occurTime" />
+              <el-table-column label="预警等级" align="center" key="level" prop="level" :show-overflow-tooltip="true" />
+              <el-table-column label="预警信息" align="center" key="version" prop="version" :show-overflow-tooltip="true" />
+              <el-table-column label="预警状态" align="center" key="status">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.alert_message_status" :value="scope.row.status"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="处理人" align="center" key="handler" prop="handler"  width="120" />
+              <el-table-column label="处理时间" align="center" prop="handleTime" width="160">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.handleTime) }}</span>
+                </template> 
+              </el-table-column>
+              <el-table-column label="解决方案" align="center" key="solution" prop="solution" :show-overflow-tooltip="true" />
+              <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button size="mini" v-if="scope.row.status == 'UNHANDLED'" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['device:files:edit']">去处理</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+
+    <el-dialog :title="title" :visible.sync="open" width="800px"  append-to-body :close-on-click-modal="false">
+  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="解决人" prop="handler">
+          <el-input v-model="form.handler" placeholder="请输入解决人" maxlength="30" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="解决方法" prop="solution">
+          <el-input v-model="form.solution" placeholder="请输入解决方法"  type="textarea" :rows="3" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+  
+  </el-form>
+   <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </span>
+  
+</el-dialog>
+  </div>
+</template>
+
+<script>
+import { getDict, list, getInfo, del, add, update } from "@/api/inMonitoring/message"
+import { getToken } from "@/utils/auth"
+import Treeselect from "@riophae/vue-treeselect"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
+
+export default {
+  name: "User",
+  dicts: ['device_disable', 'sys_user_sex', 'warning_level','alert_message_status'],
+  components: { Treeselect, Splitpanes, Pane },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 设备表格数据
+      dataList: null,
+      // 弹出层标题
+      title: "",
+      // 所有部门树选项
+      deptOptions: undefined,
+      // 过滤掉已禁用部门树选项
+      enabledDeptOptions: undefined,
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+      // 默认密码
+      initPassword: undefined,
+      // 日期范围
+      dateRange: [],
+      // 岗位选项
+      postOptions: [],
+      // 角色选项
+      roleOptions: [],
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 设备导入参数
+      upload: {
+        // 是否显示弹出层（设备导入）
+        open: false,
+        // 弹出层标题（设备导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的设备档案
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/equipment/import"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: undefined,
+        status: undefined
+      },
+      // 表单校验
+      rules: {
+        handler: [
+          { required: true, message: "解决人不能为空", trigger: "blur" },
+        ],
+        solution: [
+          { required: true, message: "解决方法不能为空", trigger: "blur" }
+        ]
+      }
+    }
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询设备列表 */
+    getList() {
+      this.loading = true
+      list({minTime:this.dateRange[0],maxTime:this.dateRange[1],...this.queryParams}).then(response => {
+          this.dataList = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    upImage(fileList){
+      console.log(fileList)
+      this.form.image = fileList
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        deptId: undefined,
+        name: undefined,
+        nickName: undefined,
+        password: undefined,
+        phonenumber: undefined,
+        email: undefined,
+        sex: undefined,
+        status: "0",
+        remark: undefined,
+        postIds: [],
+        roleIds: []
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = []
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length != 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+        this.open = true
+        this.title = "添加设备"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      this.form = {...row}
+      this.open = true
+      this.title = "处理"
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != undefined) {
+            update(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            add(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const Ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除设备ID为"' + Ids + '"的数据项？').then(function() {
+        return del(Ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = "设备导入"
+      this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      this.download('system/user/importTemplate', {
+      }, `user_template_${new Date().getTime()}.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false
+      this.upload.isUploading = false
+      this.$refs.upload.clearFiles()
+      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+      this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit()
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/rules/index.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/rules/index.vue
new file mode 100644
index 00000000..5800c083
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/rules/index.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
+        <!--设备档案-->
+        <pane size="84">
+          <el-col>
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+              <el-form-item label="预警级别">
+                <el-select v-model="form.sex" placeholder="请选择级别" style="width: 100%">
+                  <el-option v-for="dict in dict.type.warning_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['device:files:add']">新增</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['device:files:remove']">删除</el-button>
+              </el-col>
+            </el-row>
+
+            <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="50" align="center" />
+              <el-table-column
+                label="序号"
+                width="60"
+                type="index"
+              ></el-table-column>              
+              <el-table-column label="名称" align="center" key="ruleName" prop="ruleName" width="120"/>
+              <el-table-column label="描述" align="center" key="description" prop="description" width="240" :show-overflow-tooltip="true" />
+              <el-table-column label="触发条件" align="center" key="alertTemplate" prop="alertTemplate" width="240" :show-overflow-tooltip="true" />
+              <el-table-column label="预警级别" align="center" key="severity" prop="severity"  width="120" />
+              <el-table-column label="预警方式" align="center" key="alertWay" prop="alertWay" width="120" :show-overflow-tooltip="true" />
+              <el-table-column label="预警邮箱" align="center" key="alertStation" prop="alertStation" width="200" :show-overflow-tooltip="true" />
+              <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:files:edit']">修改</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:files:remove']">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+
+    <el-dialog :title="title" :visible.sync="open" width="800px"  append-to-body :close-on-click-modal="false">
+  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="规则名称" prop="ruleName">
+          <el-input v-model="form.ruleName" placeholder="请输入设备名称" maxlength="30" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入内容" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="触发条件" prop="compareValue1">
+          <el-col :span="6">
+            <el-select v-model="form.paramName" placeholder="请选择" style="width: 100%">
+              <el-option v-for="dict in byTableData" :key="dict.columnName" :label="dict.paramName" :value="dict.columnName"></el-option>
+            </el-select>
+          </el-col>
+          <el-col :span="6">
+            <el-select v-model="form.operator" placeholder="请选择" style="width: 100%">
+              <el-option v-for="dict in dict.type.waming_rules" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+            </el-select>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="" prop="compareValue1" label-width="0">
+              <el-input v-model="form.compareValue1" placeholder="请输入" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="1" v-if="form.operator == 'between'">
+            <span>~</span>
+          </el-col>
+          <el-col :span="5" v-if="form.operator == 'between'">
+            <el-form-item label="" prop="compareValue2" label-width="0">
+              <el-input v-model="form.compareValue2" placeholder="请输入" maxlength="30" />
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="预警级别" prop="severity">
+          <el-select v-model="form.severity" placeholder="请选择级别" style="width: 100%">
+            <el-option v-for="dict in dict.type.warning_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <!-- <el-col :span="24">
+        <el-form-item label="预警消息" prop="message">
+          <el-input v-model="form.message" type="textarea" :rows="3" placeholder="请输入内容" />
+        </el-form-item>
+      </el-col> -->
+      <el-col :span="24">
+        <el-form-item label="是否邮箱" prop="alertWay">
+          <el-select v-model="form.alertWay" placeholder="启用状态" clearable>
+            <el-option v-for="dict in alertWayOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" v-show="form.alertWay == 'email'">
+        <el-form-item label="邮箱" prop="alertStation">
+          <el-input v-model="form.alertStation" placeholder="请输入邮箱" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+  
+  </el-form>
+   <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </span>
+  
+</el-dialog>
+
+    <!-- 设备导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <div class="el-upload__tip" slot="tip">
+            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的设备档案
+          </div>
+          <span>仅允许导入xls、xlsx格式文件。</span>
+          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { list, del, add, update, byTable } from "@/api/inMonitoring/rules"
+import { getToken } from "@/utils/auth"
+import Treeselect from "@riophae/vue-treeselect"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
+
+export default {
+  name: "User",
+  dicts: ['warning_level', 'device_disable', 'waming_rules'],
+  components: { Treeselect, Splitpanes, Pane },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 设备表格数据
+      dataList: null,
+      // 弹出层标题
+      title: "",
+      // 所有部门树选项
+      deptOptions: undefined,
+      // 过滤掉已禁用部门树选项
+      enabledDeptOptions: undefined,
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+      // 默认密码
+      initPassword: undefined,
+      // 日期范围
+      dateRange: [],
+      // 岗位选项
+      postOptions: [],
+      // 角色选项
+      roleOptions: [],
+      // 表单参数
+      form: {
+        id: undefined,
+        ruleName: undefined,
+        description: undefined,
+        paramName: undefined,
+        operator: undefined,
+        compareValue1: undefined,
+        compareValue2: undefined,
+        severity: undefined,
+        message: undefined,
+        alertWay: 'noemail',
+        alertStation: '',
+        status: "0"
+      },
+      // 校验规则
+      byTableData: [],
+      alertWayOptions: [
+        {
+          value: 'noemail',
+          label: "否"
+        },
+        {
+          value: 'email',
+          label: "是"
+        }
+      ],
+
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 设备导入参数
+      upload: {
+        // 是否显示弹出层（设备导入）
+        open: false,
+        // 弹出层标题（设备导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的设备档案
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/equipment/import"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: undefined,
+        status: undefined
+      },
+      // 表单校验
+      rules: {
+        ruleName: [
+          { required: true, message: "规则名称不能为空", trigger: "blur" }
+        ],
+        description: [
+          { required: true, message: "规则描述不能为空", trigger: "blur" },
+        ],
+        alertWay: [
+          { required: true, message: "设备类型不能为空", trigger: "blur" }
+        ],
+        severity: [
+          { required: true, message: "设备级别不能为空", trigger: "blur" },
+        ],
+        message: [
+          { required: true, message: "预警消息不能为空", trigger: "blur" }
+        ],
+        status: [
+          { required: true, message: "状态不能为空", trigger: "blur" },
+        ],
+        paramName: [
+          { required: true, message: "请选择", trigger: "blur" },
+        ],
+        operator: [
+          { required: true, message: "请选择", trigger: "blur" },
+        ],
+        compareValue1: [
+          { required: true, message: "请输入", trigger: "blur" },
+        ],
+        compareValue2: [
+          { required: true, message: "请输入", trigger: "blur" },
+        ],
+        alertStation: [
+          { required: true, message: "请输入", trigger: "blur" },
+          {
+            pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/,
+            message: "请输入正确的邮箱",
+            trigger: "blur"
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.getList()
+    this.getByTable()
+    
+  },
+  methods: {
+    /** 查询设备列表 */
+    getList() {
+      this.loading = true
+      list({minTime:this.dateRange[0],maxTime:this.dateRange[1],...this.queryParams}).then(response => {
+          this.dataList = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    getByTable() {
+      this.loading = true
+      byTable().then(response => {
+      console.log("%c 🇻🇳: getList -> response ", "font-size:16px;background-color:#c9f364;color:black;", response)
+          this.byTableData = response.data
+          this.loading = false
+        }
+      )
+    },
+    upImage(fileList){
+      console.log(fileList)
+      this.form.image = fileList
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        email: undefined,
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = []
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length != 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+        this.open = true
+        this.title = "添加设备"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      this.form = {...row}
+      this.open = true
+      this.title = "修改"
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          let form = {...this.form}
+          this.form.alertRule = {
+            ruleName: form.ruleName,
+            description: form.description,
+
+            alertStation: form.alertStation ? form.alertStation : "",
+            alertWay: form.alertWay,
+            severity: form.severity,
+            enable:0
+          }
+          this.form.alertRuleConditionList = [{
+            paramName: form.paramName,
+            compareValue: form.compareValue2?form.compareValue1+','+form.compareValue2:form.compareValue1,
+            operator: form.operator
+          }]
+          if (this.form.id != undefined) {
+            update(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            add(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const Ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除设备ID为"' + Ids + '"的数据项？').then(function() {
+        return del(Ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = "设备导入"
+      this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      this.download('system/user/importTemplate', {
+      }, `user_template_${new Date().getTime()}.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false
+      this.upload.isUploading = false
+      this.$refs.upload.clearFiles()
+      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+      this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit()
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/ALOps_sys_fe/alops-ui/src/views/index copy.vue b/ALOps_sys_fe/alops-ui/src/views/index copy.vue
new file mode 100644
index 00000000..64031b5a
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/views/index copy.vue	
@@ -0,0 +1,308 @@
+<template>
+  <div class="dashboard-editor-container">
+
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <div class="card-title"><i class="el-icon-data-line"></i>预警信息统计</div>
+          <div class="data-overview">
+            <div class="data-item">
+              <div class="data-label">预警总数</div>
+              <digital :configData="{number:[111]}" />
+            </div>
+            <div class="data-item">
+              <div class="data-label">预警总数</div>
+              <digital :configData="{number:[111]}" />
+            </div>
+            <div class="data-item">
+              <div class="data-label">预警总数</div>
+              <digital :configData="{number:[111]}" />
+            </div>
+            <div class="data-item">
+              <div class="data-label">预警总数</div>
+              <digital :configData="{number:[111]}" />
+            </div>
+            <div class="data-item">
+              <div class="data-label">预警总数</div>
+              <digital :configData="{number:[111]}" />
+            </div>
+            <div class="data-item">
+              <div class="data-label">预警总数</div>
+              <digital :configData="{number:[111]}" />
+            </div>
+            <div class="data-item">
+              <div class="data-label">预警总数</div>
+              <digital :configData="{number:[111]}" />
+            </div>
+            <div class="data-item">
+              <div class="data-label">预警总数</div>
+              <digital :configData="{number:[111]}" />
+            </div>
+            <div class="data-item">
+              <div class="data-label">预警总数</div>
+              <digital :configData="{number:[111]}" />
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <div class="card-title"><i class="el-icon-pie-chart"></i>检测设备信息</div>
+          <pie-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper overflow-auto">
+          <div class="card-title"><i class="el-icon-monitor"></i>设备预警信息</div>
+          
+          <div class="div0">
+            <div class="div1" v-for="(alert, index) in alerts" :key="index" :class="`alert-level-${alert.level}`">
+              <dv-border-box-13 class="div2">
+                <el-row>
+                  <el-col span="12">
+                    <span class="alert-lable">预警时间:{{ alert.time }}</span>
+                  </el-col>
+                  <el-col span="12">
+                    <span class="alert-lable">设备名称:{{ alert.deviceName }}</span>
+                  </el-col>
+                  <el-col span="12">
+                    <span class="alert-lable">设备位置:{{ alert.deviceLocation }}</span>
+                  </el-col>
+                  <el-col span="12">
+                    <span class="alert-lable">预警等级:<span class="alert-lable" :style="{ color: getLevelColor(alert.level) }">{{ alert.level }}</span></span>
+                  </el-col>
+                  <el-col span="12">
+                    <span class="alert-lable">预警信息:{{ alert.message }}</span>
+                  </el-col>
+                  <el-col span="12">
+                    <span class="alert-lable">预警状态:{{ alert.status }}</span>
+                  </el-col>
+                </el-row>
+              </dv-border-box-13>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row style="background:#fff;padding:16px;">
+          <div class="card-title"><i class="el-icon-s-data"></i> 设备状态监控</div>
+      <dv-scroll-board :config="scrollConfig" style="height:220px;" />
+    </el-row>
+    
+  </div>
+</template>
+
+<script>
+import PanelGroup from './dashboard/PanelGroup'
+import LineChart from './dashboard/LineChart'
+import RaddarChart from './dashboard/RaddarChart'
+import PieChart from './dashboard/PieChart'
+import BarChart from './dashboard/BarChart'
+import digital from './dashboard/digital'
+
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
+
+export default {
+  name: 'Index',
+  components: {
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart,
+    digital
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis,
+      scrollConfig:{
+        header: ['设备名称', '设备位置', 'CPU使用率','内存使用率','温度', '健康度', '设备运行时长','采集时间'],
+        data: [
+          ['行1列1', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6','行1列7', '行1列8'],
+          ['行2列1', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6','行2列7', '行2列8'],
+          ['行3列1', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6','行3列7', '行3列8'],
+          ['行4列1', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6','行4列7', '行4列8'],
+          ['行5列1', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6','行5列7', '行5列8'],
+          ['行6列1', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6','行6列7', '行6列8'],
+          ['行7列1', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6','行7列7', '行7列8'],
+          ['行8列1', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6','行8列7', '行8列8'],
+          ['行9列1', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6','行9列7', '行9列8'],
+          ['行10列1', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6','行10列7', '行10列8']
+        ],
+        headerBGC:'#f8f8f9',
+        headerHeight:60,
+        oddRowBGC:'#f5f7fa',
+        evenRowBGC:'#fff',
+      },
+      alerts: [
+        {
+          time: '2021-10-16 14:54:11',
+          deviceName: 'PLC远程监控系统',
+          deviceLocation: '污水处理监控系统',
+          level: 1,
+          message: '2#电机运行状态等于1',
+          status: '触发值: 1'
+        },
+        {
+          time: '2021-10-16 14:54:04',
+          deviceName: 'PLC远程监控系统',
+          deviceLocation: '污水处理监控系统',
+          level: 0,
+          message: '2#电机运行状态报警恢复',
+          status: '触发值: 0'
+        },
+        {
+          time: '2021-10-16 14:54:11',
+          deviceName: 'PLC远程监控系统',
+          deviceLocation: '污水处理监控系统',
+          level: 1,
+          message: '2#电机运行状态等于1',
+          status: '触发值: 1'
+        },
+        {
+          time: '2021-10-16 14:54:04',
+          deviceName: 'PLC远程监控系统',
+          deviceLocation: '污水处理监控系统',
+          level: 0,
+          message: '2#电机运行状态报警恢复',
+          status: '触发值: 0'
+        },
+        // 可以继续添加更多预警信息
+      ]
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    },
+    getLevelColor(level) {
+      const levelColors = {
+        0: 'green',
+        1: 'orange',
+        2: 'red'
+      };
+      return levelColors[level] || 'black'; // 默认颜色
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px;
+    margin-bottom: 32px;
+    height: 420px;
+  }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+.dv-scroll-board{
+  color: #3d3d3d;
+}
+.card-title {
+  font-size: 16px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  color: #3d3d3d;
+  font-weight: bold;
+}
+
+.card-title i {
+  margin-right: 8px;
+  font-size: 18px;
+}
+    
+.data-overview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.data-item {
+  flex: 1;
+  min-width: 30%;
+  text-align: center;
+  padding: 15px 10px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.data-item:hover {
+  background: #f1f2f4;
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.data-value {
+  font-size: 24px;
+  font-weight: bold;
+  margin: 10px 0;
+  color: #3d3d3d;
+}
+
+.data-label {
+  font-size: 14px;
+  color: #3d3d3d;
+}
+.alert-list .div0 {
+  list-style-type: none;
+  padding: 0;
+}
+.overflow-auto {
+  overflow: auto;
+}
+.alert-list {
+  background-color: #fff;
+  padding: 16px;
+  margin-bottom: 32px;
+}
+ 
+.alert-list .div1 {
+  display: flex;
+  justify-content: space-between;
+}
+.div1{
+  margin-bottom: 5px;
+}
+.div2{
+  padding: 20px 16px;
+}
+ 
+.alert-time, .alert-device-name, .alert-device-location, .alert-message, .alert-status {
+  flex: 1;
+}
+ 
+.alert-level {
+  flex: 0.5;
+  text-align: center;
+}
+</style>
diff --git a/ALOps_sys_fe/alops-ui/src/views/index.vue b/ALOps_sys_fe/alops-ui/src/views/index.vue
index 64031b5a..d35b56a4 100644
--- a/ALOps_sys_fe/alops-ui/src/views/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/index.vue
@@ -1,94 +1,127 @@
 <template>
-  <div class="dashboard-editor-container">
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <div class="card-title"><i class="el-icon-data-line"></i>预警信息统计</div>
-          <div class="data-overview">
-            <div class="data-item">
-              <div class="data-label">预警总数</div>
-              <digital :configData="{number:[111]}" />
-            </div>
-            <div class="data-item">
-              <div class="data-label">预警总数</div>
-              <digital :configData="{number:[111]}" />
-            </div>
-            <div class="data-item">
-              <div class="data-label">预警总数</div>
-              <digital :configData="{number:[111]}" />
-            </div>
-            <div class="data-item">
-              <div class="data-label">预警总数</div>
-              <digital :configData="{number:[111]}" />
-            </div>
-            <div class="data-item">
-              <div class="data-label">预警总数</div>
-              <digital :configData="{number:[111]}" />
-            </div>
-            <div class="data-item">
-              <div class="data-label">预警总数</div>
-              <digital :configData="{number:[111]}" />
+  <div class="body">
+    <div class="container">
+        <!-- 上层：三个模块并排 -->
+        <div class="top-section">
+            <!-- 预警信息统计 -->
+            <div class="panel">
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-title"><i class="fas fa-exclamation-triangle"></i> 预警信息统计1</h2>
+                    </div>
+                    <div class="stats-container">
+                        <div class="stat-card">
+                            <div class="stat-label">预警总数</div>
+                            <div class="stat-value">{{ totalAlerts }}</div>
+                            <div class="stat-desc">系统检测到的预警总数</div>
+                        </div>
+                        <div class="stat-card warning">
+                            <div class="stat-label">当前预警</div>
+                            <div class="stat-value">{{ activeAlerts }}</div>
+                            <div class="stat-desc">需要处理的预警数量</div>
+                        </div>
+                        <div class="stat-card normal">
+                            <div class="stat-label">已处理</div>
+                            <div class="stat-value">{{ resolvedAlerts }}</div>
+                            <div class="stat-desc">已解决的预警数量</div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="data-item">
-              <div class="data-label">预警总数</div>
-              <digital :configData="{number:[111]}" />
+            
+            <!-- 检测设备信息 -->
+            <div class="panel">
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-title"><i class="fas fa-microchip"></i> 检测设备信息</h2>
+                    </div>
+                    <ul class="device-list">
+                        <li class="device-item" v-for="device in devices" :key="device.id" :class="device.status">
+                            <div class="device-icon">
+                                <i :class="device.icon"></i>
+                            </div>
+                            <div class="device-info">
+                                <div class="device-name">{{ device.name }}</div>
+                                <div class="device-details">{{ device.description }}</div>
+                            </div>
+                            <span :class="device.status === 'warning' ? 'alert-badge' : 'normal-badge'">
+                                {{ device.status === 'warning' ? '预警中' : '正常' }}
+                            </span>
+                        </li>
+                    </ul>
+                </div>
             </div>
-            <div class="data-item">
-              <div class="data-label">预警总数</div>
-              <digital :configData="{number:[111]}" />
+            
+            <!-- 设备预警信息 -->
+            <div class="panel">
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-title"><i class="fas fa-bell"></i> 设备预警信息</h2>
+                    </div>
+                    <ul class="device-list">
+                        <li class="device-item" v-for="alert in alerts" :key="alert.id" :class="alert.status">
+                            <div class="device-icon">
+                                <i :class="alert.icon"></i>
+                            </div>
+                            <div class="device-info">
+                                <div class="device-name">{{ alert.deviceName }}</div>
+                                <div class="device-details">
+                                    <div>预警时间: {{ alert.time }}</div>
+                                    <div>设备位置: {{ alert.location }}</div>
+                                    <div>预警信息: {{ alert.message }}</div>
+                                </div>
+                            </div>
+                            <span :class="alert.status === 'warning' ? 'alert-badge' : 'normal-badge'">
+                                {{ alert.level === 1 ? '等级1' : '等级0' }}
+                            </span>
+                        </li>
+                    </ul>
+                </div>
             </div>
-            <div class="data-item">
-              <div class="data-label">预警总数</div>
-              <digital :configData="{number:[111]}" />
-            </div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <div class="card-title"><i class="el-icon-pie-chart"></i>检测设备信息</div>
-          <pie-chart />
         </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper overflow-auto">
-          <div class="card-title"><i class="el-icon-monitor"></i>设备预警信息</div>
-          
-          <div class="div0">
-            <div class="div1" v-for="(alert, index) in alerts" :key="index" :class="`alert-level-${alert.level}`">
-              <dv-border-box-13 class="div2">
-                <el-row>
-                  <el-col span="12">
-                    <span class="alert-lable">预警时间:{{ alert.time }}</span>
-                  </el-col>
-                  <el-col span="12">
-                    <span class="alert-lable">设备名称:{{ alert.deviceName }}</span>
-                  </el-col>
-                  <el-col span="12">
-                    <span class="alert-lable">设备位置:{{ alert.deviceLocation }}</span>
-                  </el-col>
-                  <el-col span="12">
-                    <span class="alert-lable">预警等级:<span class="alert-lable" :style="{ color: getLevelColor(alert.level) }">{{ alert.level }}</span></span>
-                  </el-col>
-                  <el-col span="12">
-                    <span class="alert-lable">预警信息:{{ alert.message }}</span>
-                  </el-col>
-                  <el-col span="12">
-                    <span class="alert-lable">预警状态:{{ alert.status }}</span>
-                  </el-col>
-                </el-row>
-              </dv-border-box-13>
+        
+        <!-- 下层：设备状态监控独立一行 -->
+        <div class="bottom-section">
+            <div class="card full-width">
+                <div class="card-header">
+                    <h2 class="card-title"><i class="fas fa-desktop"></i> 设备状态监控</h2>
+                    <div class="last-update">最后更新: {{ lastUpdate }}</div>
+                </div>
+                <div class="table-container">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th v-for="header in tableHeaders" :key="header">{{ header }}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="device in deviceStatus" :key="device.id">
+                                <td>{{ device.name }}</td>
+                                <td>{{ device.location }}</td>
+                                <td>
+                                    <span :class="getCpuStatus(device.cpuUsage)"></span>
+                                    {{ device.cpuUsage }}%
+                                </td>
+                                <td>
+                                    <span :class="getMemoryStatus(device.memoryUsage)"></span>
+                                    {{ device.memoryUsage }}%
+                                </td>
+                                <td>{{ device.temperature }}°C</td>
+                                <td>
+                                    <div class="health-bar">
+                                        <div class="health-fill" :class="getHealthStatus(device.health)"></div>
+                                    </div>
+                                    {{ device.health }}%
+                                </td>
+                                <td>{{ device.uptime }}</td>
+                                <td>{{ device.collectionTime }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
             </div>
-          </div>
         </div>
-      </el-col>
-    </el-row>
-    <el-row style="background:#fff;padding:16px;">
-          <div class="card-title"><i class="el-icon-s-data"></i> 设备状态监控</div>
-      <dv-scroll-board :config="scrollConfig" style="height:220px;" />
-    </el-row>
-    
+    </div>
   </div>
 </template>
 
@@ -100,25 +133,6 @@ import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
 import digital from './dashboard/digital'
 
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
 export default {
   name: 'Index',
   components: {
@@ -131,178 +145,395 @@ export default {
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis,
-      scrollConfig:{
-        header: ['设备名称', '设备位置', 'CPU使用率','内存使用率','温度', '健康度', '设备运行时长','采集时间'],
-        data: [
-          ['行1列1', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6','行1列7', '行1列8'],
-          ['行2列1', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6','行2列7', '行2列8'],
-          ['行3列1', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6','行3列7', '行3列8'],
-          ['行4列1', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6','行4列7', '行4列8'],
-          ['行5列1', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6','行5列7', '行5列8'],
-          ['行6列1', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6','行6列7', '行6列8'],
-          ['行7列1', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6','行7列7', '行7列8'],
-          ['行8列1', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6','行8列7', '行8列8'],
-          ['行9列1', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6','行9列7', '行9列8'],
-          ['行10列1', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6','行10列7', '行10列8']
-        ],
-        headerBGC:'#f8f8f9',
-        headerHeight:60,
-        oddRowBGC:'#f5f7fa',
-        evenRowBGC:'#fff',
-      },
+      totalAlerts: 111,
+      activeAlerts: 42,
+      resolvedAlerts: 69,
+      lastUpdate: new Date().toLocaleString(),
+      devices: [
+          { id: 1, name: 'Forecasts', description: '预测分析系统', status: 'normal', icon: 'fas fa-chart-line' },
+          { id: 2, name: 'Gold', description: '核心处理单元', status: 'warning', icon: 'fas fa-server' },
+          { id: 3, name: 'Industries', description: '工业控制系统', status: 'normal', icon: 'fas fa-industry' }
+      ],
       alerts: [
-        {
-          time: '2021-10-16 14:54:11',
-          deviceName: 'PLC远程监控系统',
-          deviceLocation: '污水处理监控系统',
-          level: 1,
-          message: '2#电机运行状态等于1',
-          status: '触发值: 1'
-        },
-        {
-          time: '2021-10-16 14:54:04',
-          deviceName: 'PLC远程监控系统',
-          deviceLocation: '污水处理监控系统',
-          level: 0,
-          message: '2#电机运行状态报警恢复',
-          status: '触发值: 0'
-        },
-        {
-          time: '2021-10-16 14:54:11',
-          deviceName: 'PLC远程监控系统',
-          deviceLocation: '污水处理监控系统',
-          level: 1,
-          message: '2#电机运行状态等于1',
-          status: '触发值: 1'
-        },
-        {
-          time: '2021-10-16 14:54:04',
-          deviceName: 'PLC远程监控系统',
-          deviceLocation: '污水处理监控系统',
-          level: 0,
-          message: '2#电机运行状态报警恢复',
-          status: '触发值: 0'
-        },
-        // 可以继续添加更多预警信息
+          { 
+              id: 1, 
+              deviceName: 'PLC远程监控系统', 
+              time: '2021-10-16 14:54:11', 
+              location: '污水处理监控系统', 
+              message: '2#电机运行状态等于1', 
+              level: 1, 
+              status: 'warning', 
+              icon: 'fas fa-exclamation-circle' 
+          },
+          { 
+              id: 2, 
+              deviceName: 'PLC远程监控系统', 
+              time: '2021-10-16 14:54:04', 
+              location: '污水处理监控系统', 
+              message: '2#电机运行状态报警恢复', 
+              level: 0, 
+              status: 'normal', 
+              icon: 'fas fa-check-circle' 
+          }
+      ],
+      tableHeaders: ['设备名称', '设备位置', 'CPU使用率', '内存使用率', '温度', '健康度', '设备运行时长', '采集时间'],
+      deviceStatus: [
+          { 
+              id: 1, 
+              name: 'PLC控制系统', 
+              location: '主控室A区', 
+              cpuUsage: 45, 
+              memoryUsage: 62, 
+              temperature: 42, 
+              health: 85, 
+              uptime: '125天8小时', 
+              collectionTime: '2021-10-16 15:20:00' 
+          },
+          { 
+              id: 2, 
+              name: '数据采集器', 
+              location: '污水处理区', 
+              cpuUsage: 78, 
+              memoryUsage: 85, 
+              temperature: 58, 
+              health: 65, 
+              uptime: '89天12小时', 
+              collectionTime: '2021-10-16 15:22:00' 
+          },
+          { 
+              id: 3, 
+              name: '监控服务器', 
+              location: '数据中心', 
+              cpuUsage: 32, 
+              memoryUsage: 45, 
+              temperature: 38, 
+              health: 92, 
+              uptime: '210天3小时', 
+              collectionTime: '2021-10-16 15:25:00' 
+          },
+          { 
+              id: 4, 
+              name: '网络交换机', 
+              location: '通信机房', 
+              cpuUsage: 15, 
+              memoryUsage: 28, 
+              temperature: 35, 
+              health: 95, 
+              uptime: '156天7小时', 
+              collectionTime: '2021-10-16 15:18:00' 
+          }
       ]
     }
   },
   methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
+    getCpuStatus(usage) {
+        if (usage < 50) return 'status-indicator status-good';
+        if (usage < 80) return 'status-indicator status-warning';
+        return 'status-indicator status-critical';
     },
-    getLevelColor(level) {
-      const levelColors = {
-        0: 'green',
-        1: 'orange',
-        2: 'red'
-      };
-      return levelColors[level] || 'black'; // 默认颜色
+    getMemoryStatus(usage) {
+        if (usage < 60) return 'status-indicator status-good';
+        if (usage < 85) return 'status-indicator status-warning';
+        return 'status-indicator status-critical';
+    },
+    getHealthStatus(health) {
+        if (health >= 80) return 'health-good';
+        if (health >= 60) return 'health-warning';
+        return 'health-critical';
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.dashboard-editor-container {
-  padding: 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px;
-    margin-bottom: 32px;
-    height: 420px;
-  }
-}
 
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
-.dv-scroll-board{
-  color: #3d3d3d;
-}
-.card-title {
-  font-size: 16px;
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-  color: #3d3d3d;
-  font-weight: bold;
-}
-
-.card-title i {
-  margin-right: 8px;
-  font-size: 18px;
-}
-    
-.data-overview {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-}
-
-.data-item {
-  flex: 1;
-  min-width: 30%;
-  text-align: center;
-  padding: 15px 10px;
-  background: #f5f7fa;
-  border-radius: 8px;
-  transition: all 0.3s ease;
-}
-
-.data-item:hover {
-  background: #f1f2f4;
-  transform: translateY(-3px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-}
-
-.data-value {
-  font-size: 24px;
-  font-weight: bold;
-  margin: 10px 0;
-  color: #3d3d3d;
-}
-
-.data-label {
-  font-size: 14px;
-  color: #3d3d3d;
-}
-.alert-list .div0 {
-  list-style-type: none;
-  padding: 0;
-}
-.overflow-auto {
-  overflow: auto;
-}
-.alert-list {
-  background-color: #fff;
-  padding: 16px;
-  margin-bottom: 32px;
-}
- 
-.alert-list .div1 {
-  display: flex;
-  justify-content: space-between;
-}
-.div1{
-  margin-bottom: 5px;
-}
-.div2{
-  padding: 20px 16px;
-}
- 
-.alert-time, .alert-device-name, .alert-device-location, .alert-message, .alert-status {
-  flex: 1;
-}
- 
-.alert-level {
-  flex: 0.5;
-  text-align: center;
-}
+        .body {
+            background-color: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
+            padding: 20px;
+        }
+        
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        
+        .header h1 {
+            color: #2c3e50;
+            margin-bottom: 10px;
+            font-size: 28px;
+        }
+        
+        .header p {
+            color: #7f8c8d;
+            font-size: 16px;
+        }
+        
+        .container {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        .top-section {
+            display: flex;
+            gap: 20px;
+        }
+        
+        .bottom-section {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        .panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        .card {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+            padding: 20px;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            height: 100%;
+        }
+        
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+        }
+        
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #eaeaea;
+        }
+        
+        .card-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #2c3e50;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .card-title i {
+            color: #3498db;
+        }
+        
+        .stats-container {
+            display: flex;
+            justify-content: space-between;
+            gap: 15px;
+        }
+        
+        .stat-card {
+            flex: 1;
+            background: linear-gradient(135deg, #3498db, #2c3e50);
+            color: white;
+            border-radius: 10px;
+            padding: 20px;
+            text-align: center;
+            box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
+        }
+        
+        .stat-card.warning {
+            background: linear-gradient(135deg, #e74c3c, #c0392b);
+            box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
+        }
+        
+        .stat-card.normal {
+            background: linear-gradient(135deg, #2ecc71, #27ae60);
+            box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
+        }
+        
+        .stat-value {
+            font-size: 32px;
+            font-weight: 700;
+            margin: 10px 0;
+        }
+        
+        .stat-label {
+            font-size: 14px;
+            opacity: 0.9;
+        }
+        
+        .device-list {
+            list-style: none;
+        }
+        
+        .device-item {
+            display: flex;
+            align-items: center;
+            padding: 12px 15px;
+            margin-bottom: 10px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border-left: 4px solid #3498db;
+            transition: all 0.2s;
+        }
+        
+        .device-item:hover {
+            background: #edf2f7;
+            transform: translateX(5px);
+        }
+        
+        .device-item.warning {
+            border-left-color: #e74c3c;
+        }
+        
+        .device-item.normal {
+            border-left-color: #2ecc71;
+        }
+        
+        .device-icon {
+            width: 40px;
+            height: 40px;
+            background: #3498db;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            color: white;
+        }
+        
+        .device-item.warning .device-icon {
+            background: #e74c3c;
+        }
+        
+        .device-item.normal .device-icon {
+            background: #2ecc71;
+        }
+        
+        .device-info {
+            flex: 1;
+        }
+        
+        .device-name {
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+        
+        .device-details {
+            font-size: 13px;
+            color: #666;
+        }
+        
+        .alert-badge {
+            background: #e74c3c;
+            color: white;
+            padding: 3px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 600;
+        }
+        
+        .normal-badge {
+            background: #2ecc71;
+            color: white;
+            padding: 3px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 600;
+        }
+        
+        .table-container {
+            overflow-x: auto;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        }
+        
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            background: white;
+        }
+        
+        th {
+            background: #2c3e50;
+            color: white;
+            padding: 15px 12px;
+            text-align: left;
+            font-weight: 600;
+        }
+        
+        td {
+            padding: 12px;
+            border-bottom: 1px solid #eaeaea;
+        }
+        
+        tr:hover {
+            background-color: #f5f7fa;
+        }
+        
+        .status-indicator {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 5px;
+        }
+        
+        .status-good {
+            background-color: #2ecc71;
+        }
+        
+        .status-warning {
+            background-color: #f39c12;
+        }
+        
+        .status-critical {
+            background-color: #e74c3c;
+        }
+        
+        .health-bar {
+            height: 6px;
+            background: #ecf0f1;
+            border-radius: 3px;
+            overflow: hidden;
+        }
+        
+        .health-fill {
+            height: 100%;
+            border-radius: 3px;
+        }
+        
+        .health-good {
+            background: #2ecc71;
+            width: 85%;
+        }
+        
+        .health-warning {
+            background: #f39c12;
+            width: 65%;
+        }
+        
+        .health-critical {
+            background: #e74c3c;
+            width: 40%;
+        }
+        
+        .full-width {
+            width: 100%;
+        }
+        
+        @media (max-width: 1024px) {
+            .top-section {
+                flex-direction: column;
+            }
+            
+            .stats-container {
+                flex-direction: column;
+            }
+        }
 </style>