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/views/device/deviceManufacturer/index.vue b/ALOps_sys_fe/alops-ui/src/views/device/deviceManufacturer/index.vue
index 9dea1060..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">
@@ -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 {
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>