diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/BarChart2.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/BarChart2.vue
deleted file mode 100644
index 395a1541..00000000
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/BarChart2.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-
-const animationDuration = 6000
-
-export default {
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      var handred = 100
-      var point = 66
-      this.chart = echarts.init(this.$el, 'macarons')
-
-      this.chart.setOption({
-        title: [{
-            text: 'CPU占用',
-            x: 'center',
-            y: '40%',
-            textStyle: {
-                        fontSize: 10,
-                        color: '#000',
-            }
-        },{
-          text: '{a|'+ point +'}{c|%}',
-          x: 'center',
-          y: '53%',
-          textStyle: {
-              rich:{
-                  a: {
-                      fontSize: 10,
-                      color: '#000'
-                  },
-                  
-                  c: {
-                      fontSize: 10,
-                      color: '#000',
-                      // padding: [5,0]
-                  }
-              }
-          }
-        }],
-        series: [{
-          name: 'circle',
-          type: 'pie',
-          clockWise: true,
-          radius: ['50%', '66%'],
-          itemStyle: {
-              normal: {
-                  label: {
-                      show: false
-                  },
-                  labelLine: {
-                      show: false
-                  }
-              }
-          },
-          hoverAnimation: false,
-          data: [{
-              value: point,
-              name: '占比',
-              itemStyle: {
-                  normal: {
-                      color: { // 颜色渐变
-                          colorStops: [{
-                                      offset: 0,
-                                      color: '#0095e3' // 0% 处的颜色
-                                  }, {
-                                      offset: 1,
-                                      color: '#28E8FA' // 100% 处的颜色
-                                  }]
-                      },
-                      label: {
-                          show: false
-                      },
-                      labelLine: {
-                          show: false
-                      }
-                  }
-              }
-          }, {
-              name: '剩余',
-              value: handred - point,
-              itemStyle: {
-                  normal: {
-                      color: '#cceaf9'
-                  }
-              }
-          }]
-      }]
-      })
-    }
-  }
-}
-</script>
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue
index 121adda1..8cb87934 100644
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue
@@ -43,6 +43,7 @@
                           <div class="info-item">
                               <span class="info-label">
                                   <i class="fas fa-heartbeat"></i> 带外IP
+                                  <i class="fas fa-heartbeat"></i> 带内IP
                               </span>
                               <span class="info-value">{{cardData.ip || '暂无'}}</span>
                           </div>
@@ -55,23 +56,21 @@
                             <div class="metric-value cpu-usage">{{cardData.cpuUtilization||0}}%</div>
                             <div class="metric-label">CPU占用</div>
                             <div class="progress-bar">
-                                <div class="progress-fill" :style="{width: cardData.cpuUtilization||0+'%'}"></div>
+                                <div class="progress-fill" :style="{ width: `${cardData.cpuUtilization || 0}%` }"></div>
                             </div>
                         </div>
 
                         <div class="metric-card">
-                            <div class="metric-value cpu-usage">{{cardData.health||0}}%</div>
+                            <div class="metric-value cpu-usage">{{getPercentage(cardData.health)||0}}%</div>
                             <div class="metric-label">健康度</div>
                             <div class="progress-bar">
-                                <div class="progress-fill" :style="{width: cardData.health||0+'%'}"></div>
+                                <div class="progress-fill" :style="{width: getPercentage(cardData.health)||0+'%'}"></div>
                             </div>
                         </div>
-                        
                         <div class="metric-card">
                             <div class="metric-value alert-pending">{{cardData.unhandledAlertCount||0}}</div>
                             <div class="metric-label">待处理预警数</div>
                         </div>
-                        
                         <div class="metric-card">
                             <div class="metric-value alert-total">{{cardData.handledAlertCount||0}}</div>
                             <div class="metric-label">预警总数</div>
@@ -87,11 +86,8 @@
 
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
-import BarChart from './BarChart1.vue'
-import BarChart2 from './BarChart2.vue'
 export default {
   name: "cardItem",
-  components: { BarChart, BarChart2 },
   props: {
     cardData: {
       type: Object,
@@ -224,6 +220,19 @@ export default {
       const userId = row.id
       this.$router.push("/inMonitoring/devicesState-detail/detail/" + userId)
     },
+    getPercentage(value) {
+      const percentageMap = {
+        1: 100,
+        2: 75,
+        3: 50,
+        4: 25,
+        0: 0,
+      };
+      return percentageMap[value] || 0; // 如果 value 不存在，返回 0
+    },
+
+            
+            
 
             
   }
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue
index 302d5816..a8f3cede 100644
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue
@@ -168,9 +168,40 @@
                             @change="handleDateChange">
                         </el-date-picker>
                     </div>
-                    
-                    <el-empty description="暂无预警" v-if="!this.historyQueryData.timeList.length"></el-empty>
-                    <div class="chart-container" id="performanceChart"></div>
+                    <el-row :gutter="20" class="chart-row">
+                        <el-col :span="12">
+                            <el-col :span="12">
+                                <div class="chart-container" id="performanceChart4"></div>
+                            </el-col>
+                            <el-col :span="12">
+                                <div class="chart-container" id="performanceChart3"></div>
+                            </el-col>
+                            <el-col :span="12">
+                                <div class="chart-container" id="performanceChart2"></div>
+                            </el-col>
+                            <el-col :span="12">
+                                <div class="chart-container" id="performanceChart"></div>
+                            </el-col>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-col :span="12">
+                                <div ref="usedmemory" style="height: 200px" />
+                            </el-col>
+                            <el-col :span="12">
+                                <div ref="usedmemory2" style="height: 200px" />
+                            </el-col>
+                            
+                            <el-col :span="8">
+                                <div ref="usedmemory3" style="height: 200px" />
+                            </el-col>
+                            <el-col :span="8">
+                                <div ref="usedmemory4" style="height: 200px" />
+                            </el-col>
+                            <el-col :span="8">
+                                <div ref="usedmemory5" style="height: 200px" />
+                            </el-col>
+                        </el-col>
+                    </el-row>
                 </div>
                 
                 <!-- 右侧参数 -->
@@ -213,9 +244,11 @@ import History from './history.vue'
 import Interface from './interface.vue'
 import Vlan from './vlan.vue'
 import Routing from './routing.vue'
+import LineChart from './LineChart.vue'
+
 export default {
   name: "cardItem",
-  components: { History, Interface, Vlan, Routing },
+  components: { History, Interface, Vlan, Routing, LineChart },
   data() {
     return {
       DateValue: [dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'),dayjs().format('YYYY-MM-DD HH:mm:ss')],
@@ -245,19 +278,324 @@ mounted() {
     let routeList = this.$route.params;
     this.dsId = routeList.id;
     this.getInfoFun(this.dsId)
-    this.gethistoryQuery(this.dsId)
+    setTimeout(() => {
+        this.gethistoryQuery(this.dsId)
+    }, 1000)
 },
   methods: {
     initCharts() {
         // 性能图表
         let details = this.historyQueryData;
         const performanceChart = echarts.init(document.getElementById('performanceChart'));
+        const performanceChart2 = echarts.init(document.getElementById('performanceChart2'));
+        const performanceChart3 = echarts.init(document.getElementById('performanceChart3'));
+        const performanceChart4 = echarts.init(document.getElementById('performanceChart4'));
+        const usedmemory = echarts.init(this.$refs.usedmemory, "macarons")
+        const usedmemory2 = echarts.init(this.$refs.usedmemory2, "macarons")
+        const usedmemory3 = echarts.init(this.$refs.usedmemory3, "macarons")
+        const usedmemory4 = echarts.init(this.$refs.usedmemory4, "macarons")
+        const usedmemory5 = echarts.init(this.$refs.usedmemory5, "macarons")
+        const chartData = { min: 0, max: 100, value: 70 };
+        usedmemory.setOption({
+          series: [
+            {
+                type: 'gauge',
+                center: ['50%', '60%'],
+                radius: '90%',
+                min: chartData.min,
+                max: chartData.max,
+                startAngle: 220,
+                endAngle: -40,
+                splitNumber: 8,
+                axisLine: {
+                    lineStyle: {
+                        color: [
+                            [0.25, '#7afeaf'],
+                            [0.5, '#58d9f9'],
+                            [0.75, '#fbdd5e'],
+                            [1, '#f03b44'],
+                        ],
+                        width: 10,
+                    },
+                },
+                splitLine: {
+                    // 分隔线
+                    show: true,
+                    length: 15,
+                    distance: 10,
+                    lineStyle: {
+                        width: 2,
+                        color: 'auto',
+                    },
+                },
+                axisTick: {
+                    // 刻度线样式（及短线样式）
+                    show: true,
+                    lineStyle: {
+                        width: 2,
+                        color: 'auto',
+                    },
+                    length: 10,
+                    distance: 10,
+                },
+                axisLabel: false,
+                detail: {
+                    fontSize: '16',
+                    formatter: '{value}℃',
+                    color: 'auto',
+                    offsetCenter: ['0', '0%'],
+                },
+                pointer: {
+                    icon: 'triangle',
+                    show: true,
+
+                    offsetCenter: [0, '-70%'],
+                    itemStyle: {
+                        color: 'auto',
+                    },
+                    length: '10%',
+                    width: '3%',
+                },
+                data: [
+                    {
+                        value: this.details.temperature,
+
+                        name: '温度',
+                        title: {
+                            show: true,
+                            color: '#606266',
+                            offsetCenter: [0, '70%'],
+                            fontSize: 18,
+                        }
+                    },
+                ],
+            }
+          ]
+        })
+        usedmemory2.setOption({
+          series: [
+            {
+                type: 'gauge',
+                center: ['50%', '60%'],
+                radius: '90%',
+                min: chartData.min,
+                max: chartData.max,
+                startAngle: 220,
+                endAngle: -40,
+                splitNumber: 8,
+                axisLine: {
+                    lineStyle: {
+                        color: [
+                            [0.25, '#f03b44'],
+                            [0.5, '#fbdd5e'],
+                            [0.75, '#58d9f9'],
+                            [1, '#7afeaf'],
+                        ],
+                        width: 10,
+                    },
+                },
+                splitLine: {
+                    // 分隔线
+                    show: true,
+                    length: 15,
+                    distance: 10,
+                    lineStyle: {
+                        width: 2,
+                        color: 'auto',
+                    },
+                },
+                axisTick: {
+                    // 刻度线样式（及短线样式）
+                    show: true,
+                    lineStyle: {
+                        width: 2,
+                        color: 'auto',
+                    },
+                    length: 10,
+                    distance: 10,
+                },
+                axisLabel: false,
+                detail: {
+                    fontSize: '16',
+                    formatter: '{value}',
+                    color: 'auto',
+                    offsetCenter: ['0', '0%'],
+                },
+                pointer: {
+                    icon: 'triangle',
+                    show: true,
+
+                    offsetCenter: [0, '-70%'],
+                    itemStyle: {
+                        color: 'auto',
+                    },
+                    length: '10%',
+                    width: '3%',
+                },
+                data: [
+                    {
+                        value: this.details.health == 1 ? '100' : this.details.health == 2 ? '75': this.details.health == 3 ? '50': this.details.health == 4 ? '25' : '0',
+
+                        name: '健康度',
+                        title: {
+                            show: true,
+                            color: '#606266',
+                            offsetCenter: [0, '70%'],
+                            fontSize: 18,
+                        }
+                    },
+                ],
+            }
+          ]
+        })
+        usedmemory3.setOption({
+            title: [
+                {
+                    text: 'CPU占用',
+                    left: '45%',
+                    top: '55%',
+                    textAlign: 'center',
+                    textStyle: {
+                        fontSize: '14',
+                        fontWeight: '400',
+                        color: '#6AA0E4',
+                        textAlign: 'center',
+                        textShadowColor: '#000',
+                    },
+                },
+            ],
+          series: {
+                type: 'pie',
+                radius: ['90%', "100%"],
+                hoverAnimation: false,
+                data: [ 
+                    {
+                    value: this.details.cpuUtilization,
+                    label: {
+                        normal: {
+                            color: '#6AA0E4',
+                            fontSize: 22,
+                            fontWeight: 'bold',
+                            formatter: function(params) {
+                                return params.value + '%';
+                            },
+                            position: 'center',
+                            show: true,
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: '#6AA0E4'
+                        }
+                    }
+                },{
+                    value: 100-this.details.cpuUtilization,
+                    name: '',
+                    labelLine: {
+                        show: false
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: '#D8D8D8'
+                        },
+                        emphasis:{
+                            color:'#D8D8D8'
+                        }
+                    }
+                }]
+            }
+        })
+        usedmemory4.setOption({
+            title: [
+                {
+                    text: '内存使用率',
+                    left: '45%',
+                    top: '55%',
+                    textAlign: 'center',
+                    textStyle: {
+                        fontSize: '14',
+                        fontWeight: '400',
+                        color: '#6AA0E4',
+                        textAlign: 'center',
+                        textShadowColor: '#000',
+                    },
+                },
+            ],
+          series: {
+                type: 'pie',
+                radius: ['90%', "100%"],
+                hoverAnimation: false,
+                data: [ 
+                    {
+                    value: this.details.memoryUtilization,
+                    label: {
+                        normal: {
+                            color: '#6AA0E4',
+                            fontSize: 22,
+                            fontWeight: 'bold',
+                            formatter: function(params) {
+                                return params.value + '%';
+                            },
+                            position: 'center',
+                            show: true,
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: '#6AA0E4'
+                        }
+                    }
+                },{
+                    value: 100-this.details.memoryUtilization,
+                    name: '',
+                    labelLine: {
+                        show: false
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: '#D8D8D8'
+                        },
+                        emphasis:{
+                            color:'#D8D8D8'
+                        }
+                    }
+                }]
+            }
+        })
+        
+        usedmemory5.setOption({
+          series: [
+                {
+                    type: 'pie',
+                    radius: [0, '100%'],
+                    center: ['50%', '50%'],
+                    label: {
+                        position: 'inside',
+                        formatter: '{b}\n{c}',
+                        color: '#30465D'
+                    },
+                    labelLine: {
+                        length: 5,
+                        length2: 5
+                    },
+                    data: [{
+                            name: '输入',
+                            value: this.details.volIn
+                        },
+                        {
+                            name: '输出',
+                            value: this.details.volOut
+                        }
+                    ]
+                }
+            ]
+        })
         performanceChart.setOption({
             tooltip: {
                 trigger: 'axis'
             },
             legend: {
-                data: ['CPU使用率', '内存使用率', '健康度', '设备温度'],
+                data: ['设备温度'],
                 textStyle: {
                     color: '#718096'
                 }
@@ -271,7 +609,7 @@ mounted() {
             xAxis: {
                 type: 'category',
                 boundaryGap: false,
-                data: [...details.timeList],
+                data: [...details.temperatureList],
                 axisLine: {
                     lineStyle: {
                         color: '#cbd5e0'
@@ -308,15 +646,15 @@ mounted() {
             ],
             series: [
                 {
-                    name: 'CPU使用率',
+                    name: '设备温度',
                     type: 'line',
                     smooth: true,
-                    data: [...details.cpuList],
+                    data: [...details.temperatureList],
                     lineStyle: {
-                        color: '#ed8936'
+                        color: '#4299e1'
                     },
                     itemStyle: {
-                        color: '#ed8936'
+                        color: '#4299e1'
                     },
                     areaStyle: {
                         color: {
@@ -326,18 +664,75 @@ mounted() {
                             x2: 0,
                             y2: 1,
                             colorStops: [{
-                                offset: 0, color: 'rgba(237, 137, 54, 0.3)'
+                                offset: 0, color: 'rgba(66, 153, 225, 0.3)'
                             }, {
-                                offset: 1, color: 'rgba(237, 137, 54, 0.1)'
+                                offset: 1, color: 'rgba(66, 153, 225, 0.1)'
                             }]
                         }
                     }
+                }
+            ]
+        });
+        performanceChart4.setOption({
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: ['健康度'],
+                textStyle: {
+                    color: '#718096'
+                }
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: [...details.timeList],
+                axisLine: {
+                    lineStyle: {
+                        color: '#cbd5e0'
+                    }
+                },
+                axisLabel: {
+                    color: '#718096'
+                }
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: {
+                    lineStyle: {
+                        color: '#cbd5e0'
+                    }
                 },
+                axisLabel: {
+                    color: '#718096',
+                    formatter: '{value}%'
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(203, 213, 224, 0.6)'
+                    }
+                }
+            },
+            dataZoom: [
                 {
-                    name: '内存使用率',
+                type: 'inside', // 内部滚轮控制
+                xAxisIndex: 0,
+                start: 0,
+                end: 50
+                }
+            ],
+            series: [
+                {
+                    name: '健康度',
                     type: 'line',
                     smooth: true,
-                    data: [...details.memoryList],
+                    data: [...details.healthList],
                     lineStyle: {
                         color: '#4299e1'
                     },
@@ -358,22 +753,171 @@ mounted() {
                             }]
                         }
                     }
+                }
+            ]
+        });
+        performanceChart3.setOption({
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: ['CPU使用率'],
+                textStyle: {
+                    color: '#718096'
+                }
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: [...details.timeList],
+                axisLine: {
+                    lineStyle: {
+                        color: '#cbd5e0'
+                    }
                 },
-                
+                axisLabel: {
+                    color: '#718096'
+                }
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: {
+                    lineStyle: {
+                        color: '#cbd5e0'
+                    }
+                },
+                axisLabel: {
+                    color: '#718096',
+                    formatter: '{value}%'
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(203, 213, 224, 0.6)'
+                    }
+                }
+            },
+            dataZoom: [
                 {
-                    name: '健康度',
-                    type: 'bar',
-                    data: [...details.healthList],
+                type: 'inside', // 内部滚轮控制
+                xAxisIndex: 0,
+                start: 0,
+                end: 50
+                }
+            ],
+            series: [
+                {
+                    name: 'CPU使用率',
+                    type: 'line',
+                    smooth: true,
+                    data: [...details.cpuList],
+                    lineStyle: {
+                        color: '#4299e1'
+                    },
                     itemStyle: {
                         color: '#4299e1'
+                    },
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: 'rgba(66, 153, 225, 0.3)'
+                            }, {
+                                offset: 1, color: 'rgba(66, 153, 225, 0.1)'
+                            }]
+                        }
+                    }
+                }
+            ]
+        });
+        performanceChart2.setOption({
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: ['内存使用率'],
+                textStyle: {
+                    color: '#718096'
+                }
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: [...details.timeList],
+                axisLine: {
+                    lineStyle: {
+                        color: '#cbd5e0'
                     }
                 },
+                axisLabel: {
+                    color: '#718096'
+                }
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: {
+                    lineStyle: {
+                        color: '#cbd5e0'
+                    }
+                },
+                axisLabel: {
+                    color: '#718096',
+                    formatter: '{value}%'
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(203, 213, 224, 0.6)'
+                    }
+                }
+            },
+            dataZoom: [
                 {
-                    name: '设备温度',
-                    type: 'bar',
-                    data: [...details.temperatureList],
+                type: 'inside', // 内部滚轮控制
+                xAxisIndex: 0,
+                start: 0,
+                end: 50
+                }
+            ],
+            series: [
+                {
+                    name: '内存使用率',
+                    type: 'line',
+                    smooth: true,
+                    data: [...details.memoryList],
+                    lineStyle: {
+                        color: '#4299e1'
+                    },
                     itemStyle: {
-                        color: '#ed8936'
+                        color: '#4299e1'
+                    },
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: 'rgba(66, 153, 225, 0.3)'
+                            }, {
+                                offset: 1, color: 'rgba(66, 153, 225, 0.1)'
+                            }]
+                        }
                     }
                 }
             ]
@@ -381,6 +925,11 @@ mounted() {
         // 响应窗口大小变化
         window.addEventListener('resize', function() {
             performanceChart.resize();
+            performanceChart2.resize();
+            performanceChart3.resize();
+            performanceChart4.resize();
+            usedmemory.resize();
+            usedmemory2.resize();
             // trafficChart.resize();
         });
     },
@@ -619,7 +1168,7 @@ mounted() {
         
         .chart-container {
             width: 100%;
-            height: 300px;
+            height: 200px;
             margin-top: 10px;
         }
         
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue
index cf9bc934..4956198c 100644
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue
@@ -8,11 +8,22 @@
             width="60"
             type="index"
           ></el-table-column>
-          <el-table-column label="预警时间" align="center" key="id" prop="id"/>
-          <el-table-column label="预警等级" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
-          <el-table-column label="预警信息" align="center" key="description" prop="description" :show-overflow-tooltip="true" />
-          <el-table-column label="预警状态" align="center" key="createBy" prop="createBy" :show-overflow-tooltip="true" />
-          <el-table-column label="处理人" align="center" key="handler" prop="handler" :show-overflow-tooltip="true" />
+          <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="message" prop="message" :show-overflow-tooltip="true" />
+          <el-table-column label="预警状态" align="center" key="status" prop="status" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <el-tag v-if="scope.row.status === 'HANDLED'" type="success">已处理</el-tag>
+              <el-tag v-else type="danger">未处理</el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="处理人" align="center" key="handler" prop="handler" :show-overflow-tooltip="true" >
+            <template slot-scope="scope">
+              <span >{{ scope.row.handler || '--' }}</span>
+            </template>
+          </el-table-column>
+
         </el-table>
       </el-col>
     </el-row>
@@ -22,6 +33,7 @@
 <script>
 import { alertmessage } from "@/api/inMonitoring/devicesState"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import { template } from "lodash";
 import "splitpanes/dist/splitpanes.css"
 
 export default {