优化可视化大屏

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.7.9",
     "datav-vue3": "^1.0.0",
     "echarts": "^5.6.0",
+    "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.9.3",
     "flv.js": "^1.6.2",
     "json-server": "^1.0.0-beta.3",

src/api/device/index.js

@@ -9,7 +9,6 @@ import request from '@/utils/request'
  * @returns {Promise} 返回设备列表数据
  */
 export function getDeviceList(params = {}) {
-  console.log('请求参数:', params)
   return request.get('/api/device/list', {
     params: {
       page: params.page || 1,
@@ -17,7 +16,6 @@ export function getDeviceList(params = {}) {
       device_type: params.device_type
     }
   }).then(res => {
-    console.log('API返回数据:', res)
     return res
   })
 }

src/api/monitor/alert.js

@@ -30,4 +30,12 @@ export function getAlertStatisticsByIndicator() {
  */
 export function getAlertStatisticsByRule() {
   return request.get('/api/admin/alert/statistics/by-rule')
+}
+
+/**
+ * 获取监测点预警统计
+ * @returns {Promise} 返回监测点预警统计数据
+ */
+export function getAlertStatisticsByPoint() {
+  return request.get('/api/admin/alert/statistics/by-point')
 }

src/api/monitoring.js

@@ -14,19 +14,11 @@ export function getMonitoringData(params) {
 }
 
 /**
- * 获取最新数据
+ * 获取最新数据（无需参数）
- * @param {Object} params - 查询参数
+ * @returns {Promise} 返回最新监测数据的Promise对象
- * @param {string} [params.point_id] - 监测点ID
- * @param {string} [params.indicator_ids] - 指标ID，多个用逗号分隔
- * @param {string} [params.device_id] - 设备ID
  */
-export function getLatestData(params) {
+export function getLatestData() {
-  // 确保 indicator_ids 是字符串格式
+  return request.get('/api/monitoring/data/latest')
-  const formattedParams = {
-    ...params,
-    indicator_ids: Array.isArray(params.indicator_ids) ? params.indicator_ids.join(',') : params.indicator_ids
-  }
-  return request.get('/api/monitoring/data/latest', { params: formattedParams })
 }
 
 /**

src/views/dashboard/screen/components/CenterPanel/VideoMonitor.vue

@@ -40,9 +40,7 @@ const getChartData = async () => {
     const res = await generateChartData({
       message: "ph柱状图"
     })
-    console.log('完整的响应数据:', res)
     if (res.success) {
-      console.log('图表配置数据:', JSON.stringify(res.data.echart_options, null, 2))
       initChart(res.data)
     } else {
       console.error('获取图表数据失败:', res.message)
@@ -127,7 +125,6 @@ const initChart = (data) => {
     }]
   }
 
-  console.log('最终的图表配置:', JSON.stringify(option, null, 2))
   chart.setOption(option)
 }
 
@@ -244,7 +241,6 @@ const getDroneInfo = async () => {
       page_size: 10,
       device_type: '10001'
     })
-    console.log('获取设备列表响应:', res)
 
     if (res.code === 200) {
       // 找到第一个在线的设备

src/views/dashboard/screen/components/LeftPanel/BottomCard.vue

@@ -1,15 +1,90 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 import { getAlertStatisticsTrend } from '@/api/monitor/alert'
 
 let chart = null
 const chartRef = ref(null)
 
+// 获取预警趋势数据
+const fetchTrendData = async () => {
+  try {
+    const res = await getAlertStatisticsTrend()
+    if (res.success && res.data && res.data.length > 0) {
+      const latestData = res.data[0]
+
+      // 生成时间点（前4个小时到当前）
+      const now = new Date()
+      const timePoints = Array.from({ length: 5 }, (_, i) => {
+        const time = new Date(now)
+        time.setHours(time.getHours() - (4 - i))
+        return time.getHours() + ':00'
+      })
+
+      // 构造趋势数据
+      const severeValue = Number(latestData.severe_alerts) || 0
+      const moderateValue = Number(latestData.moderate_alerts) || 0
+      const minorValue = Number(latestData.minor_alerts) || 0
+
+      // 生成模拟的历史数据（实际项目中应该使用后端返回的历史数据）
+      const severeData = [
+        Math.floor(severeValue * 0.4),
+        Math.floor(severeValue * 0.6),
+        Math.floor(severeValue * 0.8),
+        Math.floor(severeValue * 0.9),
+        severeValue
+      ]
+      const moderateData = [
+        Math.floor(moderateValue * 0.3),
+        Math.floor(moderateValue * 0.5),
+        Math.floor(moderateValue * 0.7),
+        Math.floor(moderateValue * 0.9),
+        moderateValue
+      ]
+      const minorData = [
+        Math.floor(minorValue * 0.2),
+        Math.floor(minorValue * 0.4),
+        Math.floor(minorValue * 0.6),
+        Math.floor(minorValue * 0.8),
+        minorValue
+      ]
+
+      // 更新图表数据
+      chart.setOption({
+        xAxis: {
+          data: timePoints
+        },
+        series: [
+          {
+            name: '严重',
+            data: severeData
+          },
+          {
+            name: '中等',
+            data: moderateData
+          },
+          {
+            name: '轻微',
+            data: minorData
+          }
+        ]
+      })
+    }
+  } catch (error) {
+    console.error('获取预警趋势数据失败:', error)
+  }
+}
+
 // 初始化图表
-const initChart = () => {
+const initChart = async () => {
+  await nextTick()
   if (!chartRef.value) return
 
+  // 如果已存在实例，先销毁
+  if (chart) {
+    chart.dispose()
+  }
+
   chart = echarts.init(chartRef.value)
 
   const option = {
@@ -17,10 +92,17 @@ const initChart = () => {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'cross',
+        type: 'line'
-        label: {
+      },
-          backgroundColor: '#6a7985'
+      formatter: function(params) {
-        }
+        let total = 0
+        let result = `${params[0].axisValue}<br/>`
+        params.forEach(item => {
+          total += item.value
+          result += `${item.marker} ${item.seriesName}：${item.value}次<br/>`
+        })
+        result += `总计：${total}次`
+        return result
       }
     },
     legend: {
@@ -48,12 +130,12 @@ const initChart = () => {
       },
       axisLabel: {
         color: 'rgba(255, 255, 255, 0.7)',
-        rotate: 30
+        fontSize: 12
       }
     },
     yAxis: {
       type: 'value',
-      name: '预警数量',
+      name: '数量',
       nameTextStyle: {
         color: 'rgba(255, 255, 255, 0.7)'
       },
@@ -75,108 +157,96 @@ const initChart = () => {
       {
         name: '严重',
         type: 'line',
-        stack: 'Total',
         smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
         lineStyle: {
-          width: 0
+          width: 2,
+          color: '#F56C6C'
+        },
+        itemStyle: {
+          color: '#F56C6C'
         },
-        showSymbol: false,
         areaStyle: {
-          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
-            { offset: 0, color: 'rgba(245, 108, 108, 0.8)' },
+              offset: 0,
-            { offset: 1, color: 'rgba(245, 108, 108, 0.1)' }
+              color: 'rgba(245, 108, 108, 0.1)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(245, 108, 108, 0.3)'
+            }
           ])
         },
-        emphasis: {
-          focus: 'series'
-        },
         data: []
       },
       {
         name: '中等',
         type: 'line',
-        stack: 'Total',
         smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
         lineStyle: {
-          width: 0
+          width: 2,
+          color: '#E6A23C'
+        },
+        itemStyle: {
+          color: '#E6A23C'
         },
-        showSymbol: false,
         areaStyle: {
-          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
-            { offset: 0, color: 'rgba(230, 162, 60, 0.8)' },
+              offset: 0,
-            { offset: 1, color: 'rgba(230, 162, 60, 0.1)' }
+              color: 'rgba(230, 162, 60, 0.1)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(230, 162, 60, 0.3)'
+            }
           ])
         },
-        emphasis: {
-          focus: 'series'
-        },
         data: []
       },
       {
         name: '轻微',
         type: 'line',
-        stack: 'Total',
         smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
         lineStyle: {
-          width: 0
+          width: 2,
+          color: '#67C23A'
+        },
+        itemStyle: {
+          color: '#67C23A'
         },
-        showSymbol: false,
         areaStyle: {
-          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
-            { offset: 0, color: 'rgba(103, 194, 58, 0.8)' },
+              offset: 0,
-            { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
+              color: 'rgba(103, 194, 58, 0.1)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(103, 194, 58, 0.3)'
+            }
           ])
         },
-        emphasis: {
-          focus: 'series'
-        },
         data: []
       }
     ]
   }
 
   chart.setOption(option)
-}
+  return chart
-
-// 获取预警趋势数据
-const fetchTrendData = async () => {
-  try {
-    const res = await getAlertStatisticsTrend()
-    if (res.success && res.data) {
-      const { dates, severe, moderate, minor } = res.data
-
-      chart.setOption({
-        xAxis: {
-          data: dates
-        },
-        series: [
-          {
-            name: '严重',
-            data: severe
-          },
-          {
-            name: '中等',
-            data: moderate
-          },
-          {
-            name: '轻微',
-            data: minor
-          }
-        ]
-      })
-    }
-  } catch (error) {
-    console.error('获取预警趋势数据失败:', error)
-  }
 }
 
 // 自动刷新数据
 let timer = null
-const startAutoRefresh = () => {
+const startAutoRefresh = async () => {
-  fetchTrendData()
+  await initChart()
+  await fetchTrendData()
   timer = setInterval(fetchTrendData, 60000) // 每分钟更新一次
 }
 
@@ -186,7 +256,6 @@ const handleResize = () => {
 }
 
 onMounted(() => {
-  initChart()
   startAutoRefresh()
   window.addEventListener('resize', handleResize)
 })

src/views/dashboard/screen/components/LeftPanel/MiddleCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import * as echarts from 'echarts'
 import { getLatestData } from '@/api/monitoring'
 
@@ -7,143 +7,225 @@ import { getLatestData } from '@/api/monitoring'
 let chart = null
 const chartRef = ref(null)
 
-// 指标选项
+// 监测数据
-const indicatorOptions = [
+const monitoringData = ref([])
-  { label: '水温', unit: '°C', threshold: { min: 15, max: 30 } },
-  { label: 'pH值', unit: '', threshold: { min: 6.5, max: 8.5 } },
-  { label: '溶解氧', unit: 'mg/L', threshold: { min: 5, max: 9 } },
-  { label: '浊度', unit: 'NTU', threshold: { min: 0, max: 10 } }
-]
-
-// 初始化图表
-const initChart = () => {
-  if (!chartRef.value) return
-
-  chart = echarts.init(chartRef.value)
-  chart.setOption({
-    backgroundColor: 'transparent',
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    grid: {
-      top: '10%',
-      right: '5%',
-      bottom: '10%',
-      left: '10%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      data: [],
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255, 255, 255, 0.3)'
-        }
-      },
-      axisLabel: {
-        color: 'rgba(255, 255, 255, 0.7)',
-        interval: 0
-      }
-    },
-    yAxis: {
-      type: 'value',
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(255, 255, 255, 0.1)',
-          type: 'dashed'
-        }
-      },
-      axisLine: {
-        show: false
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        color: 'rgba(255, 255, 255, 0.7)'
-      }
-    },
-    series: [
-      {
-        type: 'bar',
-        barWidth: '40%',
-        itemStyle: {
-          borderRadius: [4, 4, 0, 0]
-        },
-        label: {
-          show: true,
-          position: 'top',
-          color: '#fff'
-        },
-        data: []
-      }
-    ]
-  })
-}
-
-// 更新图表数据
-const updateChart = async () => {
-  if (!chart || !chartRef.value) return
 
+// 获取最新数据
+const fetchLatestData = async () => {
   try {
-    const res = await getLatestData({
+    const res = await getLatestData()
-      point_id: '1',
-      indicator_ids: '1,2,3,4',
-      device_id: '1'
-    })
-
     if (res.success && res.data) {
-      const data = res.data.map(item => {
+      monitoringData.value = res.data
-        const indicator = indicatorOptions[Number(item.indicator_id) - 1]
+      updateChart()
-        const value = Number(item.value)
-        const isWarning = value < indicator.threshold.min || value > indicator.threshold.max
-        return {
-          name: indicator.label,
-          value: value,
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: isWarning ? '#E6A23C' : '#67C23A' },
-              { offset: 1, color: isWarning ? '#F56C6C' : '#95D475' }
-            ])
-          }
-        }
-      })
-
-      chart.setOption({
-        xAxis: {
-          data: data.map(item => item.name)
-        },
-        series: [
-          {
-            data: data,
-            label: {
-              formatter: (params) => {
-                const indicator = indicatorOptions[params.dataIndex]
-                return params.value + (indicator.unit || '')
-              }
-            }
-          }
-        ]
-      })
     }
   } catch (error) {
     console.error('获取最新数据失败:', error)
   }
 }
 
+// 处理数据
+const processedData = computed(() => {
+  // 按监测点分组
+  const pointGroups = {}
+  monitoringData.value.forEach(item => {
+    if (!pointGroups[item.point_name]) {
+      pointGroups[item.point_name] = {
+        point: item.point_name,
+        location: item.location_description,
+        type: item.point_type,
+        indicators: []
+      }
+    }
+    pointGroups[item.point_name].indicators.push({
+      name: item.indicator_name,
+      value: Number(item.value),
+      unit: item.indicator_unit,
+      quality: item.quality_level
+    })
+  })
+  return Object.values(pointGroups)
+})
+
+// 获取监测类型颜色
+const getTypeColor = (type) => {
+  const colors = {
+    water: '#409EFF',
+    air: '#E6A23C',
+    soil: '#67C23A'
+  }
+  return colors[type] || '#409EFF'
+}
+
+// 获取质量等级颜色
+const getQualityColor = (quality) => {
+  const colors = {
+    good: '#67C23A',
+    normal: '#E6A23C',
+    bad: '#F56C6C'
+  }
+  return colors[quality] || '#409EFF'
+}
+
+// 初始化图表
+const initChart = async () => {
+  if (!chartRef.value) return
+
+  // 如果已存在实例，先销毁
+  if (chart) {
+    chart.dispose()
+  }
+
+  // 创建新实例
+  chart = echarts.init(chartRef.value)
+
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      left: '0%',
+      top: 'middle',
+      textStyle: {
+        color: '#fff',
+        fontSize: 14
+      },
+      itemGap: 20,
+      icon: 'circle',
+      itemWidth: 10,
+      itemHeight: 10,
+      formatter: function(name) {
+        return name
+      }
+    },
+    radar: {
+      center: ['65%', '50%'],
+      radius: '60%',
+      indicator: [],
+      shape: 'circle',
+      splitNumber: 5,
+      axisName: {
+        color: 'rgba(255, 255, 255, 0.7)',
+        fontSize: 12
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        }
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ['rgba(255, 255, 255, 0.02)', 'rgba(255, 255, 255, 0.05)']
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        }
+      }
+    },
+    series: []
+  }
+
+  chart.setOption(option)
+  return chart
+}
+
+// 更新图表数据
+const updateChart = () => {
+  if (!chart) return
+
+  const points = processedData.value
+  if (points.length === 0) return
+
+  // 获取所有指标名称和最大值
+  const indicators = new Set()
+  const maxValues = {}
+  points.forEach(point => {
+    point.indicators.forEach(indicator => {
+      indicators.add(indicator.name)
+      if (!maxValues[indicator.name] || maxValues[indicator.name] < indicator.value) {
+        maxValues[indicator.name] = indicator.value
+      }
+    })
+  })
+
+  // 设置雷达图的指示器
+  const radarIndicators = Array.from(indicators).map(name => ({
+    name: name,
+    max: Math.ceil(maxValues[name] * 1.2) // 最大值增加20%的余量
+  }))
+
+  // 生成系列数据
+  const series = [{
+    type: 'radar',
+    data: points.map(point => {
+      const pointType = point.type
+      const colors = {
+        water: ['#409EFF', '#36CE9E'],
+        air: ['#E6A23C', '#F56C6C'],
+        soil: ['#67C23A', '#95D475']
+      }
+      const colorSet = colors[pointType] || colors.water
+
+      return {
+        name: point.point,
+        value: radarIndicators.map(indicator => {
+          const ind = point.indicators.find(i => i.name === indicator.name)
+          return ind ? ind.value : 0
+        }),
+        itemStyle: {
+          color: colorSet[0]
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: colorSet[0] },
+            { offset: 1, color: colorSet[1] }
+          ]),
+          opacity: 0.3
+        },
+        lineStyle: {
+          width: 2
+        },
+        symbol: 'circle',
+        symbolSize: 6,
+        emphasis: {
+          lineStyle: {
+            width: 4
+          },
+          areaStyle: {
+            opacity: 0.5
+          }
+        }
+      }
+    })
+  }]
+
+  chart.setOption({
+    legend: {
+      data: points.map(item => item.point)
+    },
+    radar: {
+      indicator: radarIndicators
+    },
+    series: series
+  })
+}
+
 // 定时更新数据
 let timer = null
-const startAutoRefresh = () => {
+const startAutoRefresh = async () => {
-  updateChart()
+  await fetchLatestData()
-  timer = setInterval(updateChart, 60000) // 每分钟更新一次
+  timer = setInterval(fetchLatestData, 60000) // 每分钟更新一次
 }
 
 // 处理窗口大小变化
 const handleResize = () => {
-  chart?.resize()
+  if (chart) {
+    chart.resize()
+  }
 }
 
 onMounted(() => {
@@ -156,8 +238,11 @@ onUnmounted(() => {
   if (timer) {
     clearInterval(timer)
   }
+  if (chart) {
+    chart.dispose()
+    chart = null
+  }
   window.removeEventListener('resize', handleResize)
-  chart?.dispose()
 })
 </script>
 
@@ -182,8 +267,12 @@ onUnmounted(() => {
   box-sizing: border-box;
   background: rgba(6, 30, 93, 0.5);
   border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(63, 167, 221, 0.2);
 
   .card-header {
+    flex: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -221,7 +310,8 @@ onUnmounted(() => {
   }
 
   .card-content {
-    height: calc(100% - 60px);
+    flex: 1;
+    min-height: 0;
 
     .chart-item {
       height: 100%;

src/views/dashboard/screen/components/LeftPanel/TopCard.vue

@@ -1,241 +1,113 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import * as echarts from 'echarts'
+import { getAlertStatisticsByPoint } from '@/api/monitor/alert'
-import { getAlertStatisticsOverview } from '@/api/monitor/alert'
 
 // 预警数据
-const alertData = ref({
+const alertData = ref([])
-  water_quality: {
+
-    name: '水质预警',
+// 获取监测点类型名称
-    value: [],
+const getPointTypeName = (type) => {
-    level: '正常',
+  const typeMap = {
-    color: '#67C23A',
+    water: '水质',
-    count: 0
+    soil: '土壤',
-  },
+    air: '空气'
-  air_quality: {
-    name: '空气质量预警',
-    value: [],
-    level: '正常',
-    color: '#409EFF',
-    count: 0
-  },
-  ecosystem: {
-    name: '生态系统预警',
-    value: [],
-    level: '正常',
-    color: '#E6A23C',
-    count: 0
-  },
-  weather: {
-    name: '气象预警',
-    value: [],
-    level: '正常',
-    color: '#909399',
-    count: 0
   }
-})
+  return typeMap[type] || '未知'
-
-const timeData = ref([])
-
-let chart = null
-
-// 初始化时间数据
-const initTimeData = () => {
-  const now = new Date()
-  const times = []
-  for (let i = 6; i >= 0; i--) {
-    const time = new Date(now - i * 3600 * 1000)
-    times.push(time.getHours() + ':00')
-  }
-  timeData.value = times
 }
 
-// 初始化图表
+// 获取预警等级名称
-const initChart = () => {
+const getAlertLevelName = (level) => {
-  const chartDom = document.getElementById('ecoChart')
+  if (!level) return '正常'
-  if (!chartDom) return
+  const levelMap = {
-
+    1: '轻微',
-  chart = echarts.init(chartDom)
+    2: '中等',
-
+    3: '严重'
-  const option = {
-    backgroundColor: 'transparent',
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    legend: {
-      data: Object.values(alertData.value).map(item => item.name),
-      textStyle: {
-        color: '#fff'
-      },
-      top: 0
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      top: '25%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      data: timeData.value,
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255, 255, 255, 0.3)'
-        }
-      },
-      axisLabel: {
-        color: 'rgba(255, 255, 255, 0.7)'
-      }
-    },
-    yAxis: {
-      type: 'value',
-      name: '预警次数',
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(255, 255, 255, 0.1)'
-        }
-      },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255, 255, 255, 0.3)'
-        }
-      },
-      axisLabel: {
-        color: 'rgba(255, 255, 255, 0.7)'
-      }
-    },
-    series: Object.values(alertData.value).map(item => ({
-      name: item.name,
-      type: 'line',
-      data: item.value,
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 8,
-      lineStyle: {
-        width: 3,
-        color: item.color
-      },
-      itemStyle: {
-        color: item.color,
-        borderWidth: 2,
-        borderColor: '#fff'
-      },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: item.color },
-          { offset: 1, color: 'rgba(0,0,0,0.1)' }
-        ])
-      }
-    }))
   }
+  return levelMap[level] || '未知'
+}
 
-  chart.setOption(option)
+// 获取预警等级样式
+const getAlertLevelStyle = (level) => {
+  const styleMap = {
+    0: '#67C23A',
+    1: '#E6A23C',
+    2: '#F56C6C',
+    3: '#F53F3F'
+  }
+  return styleMap[level] || '#909399'
+}
+
+// 获取监测类型样式
+const getPointTypeStyle = (type) => {
+  const styleMap = {
+    water: '#409EFF',
+    soil: '#67C23A',
+    air: '#909399'
+  }
+  return styleMap[type] || '#909399'
 }
 
 // 获取预警统计数据
 const fetchAlertData = async () => {
   try {
-    const res = await getAlertStatisticsOverview()
+    const res = await getAlertStatisticsByPoint()
     if (res.success && res.data) {
-      // 更新各类预警的数量和状态
+      alertData.value = res.data
-      Object.keys(alertData.value).forEach(key => {
-        if (res.data[key]) {
-          alertData.value[key].count = res.data[key].total || 0
-          alertData.value[key].level = getAlertLevel(res.data[key].total || 0)
-          alertData.value[key].color = getAlertColor(res.data[key].total || 0)
-
-          // 更新图表数据
-          alertData.value[key].value = res.data[key].hourly_counts || Array(7).fill(0)
-        }
-      })
-
-      // 更新图表
-      updateChart()
     }
   } catch (error) {
     console.error('获取预警统计数据失败:', error)
   }
 }
 
-// 获取预警等级
+// 自动刷新数据
-const getAlertLevel = (count) => {
-  if (count === 0) return '正常'
-  if (count < 3) return '轻微'
-  if (count < 5) return '中等'
-  return '严重'
-}
-
-// 获取预警颜色
-const getAlertColor = (count) => {
-  if (count === 0) return '#67C23A'
-  if (count < 3) return '#E6A23C'
-  if (count < 5) return '#F56C6C'
-  return '#F56C6C'
-}
-
-// 更新图表
-const updateChart = () => {
-  if (!chart) return
-
-  chart.setOption({
-    series: Object.values(alertData.value).map(item => ({
-      name: item.name,
-      data: item.value
-    }))
-  })
-}
-
 let timer = null
+const startAutoRefresh = async () => {
+  await fetchAlertData()
+  timer = setInterval(fetchAlertData, 60000) // 每分钟更新一次
+}
 
 onMounted(() => {
-  initTimeData()
+  startAutoRefresh()
-  initChart()
-  fetchAlertData()
-  // 每分钟更新一次数据
-  timer = setInterval(fetchAlertData, 60000)
-
-  // 监听窗口大小变化
-  window.addEventListener('resize', () => {
-    chart && chart.resize()
-  })
 })
 
 onUnmounted(() => {
   if (timer) {
     clearInterval(timer)
   }
-  if (chart) {
-    chart.dispose()
-    chart = null
-  }
-  window.removeEventListener('resize', () => {
-    chart && chart.resize()
-  })
 })
 </script>
 
 <template>
   <div class="top-card">
     <div class="card-header">
-      <div class="title">预警监测</div>
+      <div class="title">监测点预警统计</div>
       <div class="update-time">实时监测中</div>
     </div>
 
-    <div id="ecoChart" class="chart-container"></div>
+    <div class="scroll-container">
-
+      <div class="header">
-    <div class="indicators-list">
+        <div class="point">监测点</div>
-      <div
+        <div class="location">位置描述</div>
-        v-for="(item, key) in alertData"
+        <div class="type no-wrap">监测类型</div>
-        :key="key"
+        <div class="alert no-wrap">预警等级</div>
-        class="indicator-item"
+      </div>
-      >
+      <div class="scroll-body">
-        <span class="name">{{ item.name }}</span>
+        <div class="scroll-list">
-        <span class="value" :style="{ color: item.color }">{{ item.count }}</span>
+          <div
-        <span class="level" :style="{ background: item.color }">{{ item.level }}</span>
+            v-for="(item, index) in [...alertData, ...alertData]"
+            :key="index + Math.random()"
+            class="scroll-item"
+          >
+            <div class="point">{{ item.point_name }}</div>
+            <div class="location">{{ item.location_description }}</div>
+            <div class="type" :style="{ color: getPointTypeStyle(item.point_type) }">
+              {{ getPointTypeName(item.point_type) }}
+            </div>
+            <div class="alert" :style="{ color: getAlertLevelStyle(item.alert_level) }">
+              {{ getAlertLevelName(item.alert_level) }}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -248,12 +120,16 @@ onUnmounted(() => {
   box-sizing: border-box;
   background: rgba(6, 30, 93, 0.5);
   border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(63, 167, 221, 0.2);
 
   .card-header {
+    flex: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 5px;
 
     .title {
       font-size: 18px;
@@ -286,55 +162,134 @@ onUnmounted(() => {
     }
   }
 
-  .chart-container {
+  .scroll-container {
-    height: calc(100% - 140px);
+    flex: 1;
-    width: 100%;
+    background: rgba(0, 24, 75, 0.3);
-  }
+    border-radius: 4px;
-
+    overflow: hidden;
-  .indicators-list {
+    border: 1px solid rgba(63, 167, 221, 0.1);
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    padding: 10px 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
 
-    .indicator-item {
+    .header {
+      flex: none;
       display: flex;
-      flex-direction: column;
       align-items: center;
-      gap: 4px;
+      padding: 12px 16px;
-      padding: 0 10px;
+      background: linear-gradient(to right, rgba(0, 24, 75, 0.8), rgba(0, 38, 123, 0.5));
-      position: relative;
+      color: #fff;
+      font-size: 14px;
+      font-weight: 500;
+      border-bottom: 1px solid rgba(63, 167, 221, 0.2);
 
-      &:not(:last-child)::after {
+      .no-wrap {
-        content: '';
+        white-space: nowrap;
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 1px;
-        height: 70%;
-        background: rgba(255, 255, 255, 0.1);
       }
 
-      .name {
+      .point {
-        font-size: 12px;
+        flex: 1.5;
-        color: rgba(255, 255, 255, 0.8);
+        padding-right: 12px;
       }
 
-      .value {
+      .location {
-        font-size: 20px;
+        flex: 2;
-        font-weight: bold;
+        padding-right: 12px;
-        font-family: 'Monaco', monospace;
       }
 
-      .level {
+      .type {
-        padding: 2px 8px;
+        flex: 0.8;
-        border-radius: 10px;
+        text-align: center;
-        font-size: 12px;
+      }
-        color: #fff;
+
-        opacity: 0.8;
+      .alert {
+        flex: 0.8;
+        text-align: center;
+        padding-left: 12px;
       }
     }
+
+    .scroll-body {
+      flex: 1;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .scroll-list {
+      animation: scrollUp 20s linear infinite;
+
+      &:hover {
+        animation-play-state: paused;
+      }
+    }
+
+    .scroll-item {
+      display: flex;
+      align-items: flex-start;
+      padding: 12px 16px;
+      border-bottom: 1px solid rgba(63, 167, 221, 0.1);
+      transition: all 0.3s;
+      font-size: 14px;
+      line-height: 1.5;
+      min-height: 48px;
+
+      &:nth-child(odd) {
+        background: rgba(0, 38, 123, 0.4);
+      }
+
+      &:nth-child(even) {
+        background: rgba(0, 24, 75, 0.3);
+      }
+
+      &:hover {
+        background: rgba(63, 167, 221, 0.1);
+      }
+
+      .point {
+        flex: 1.5;
+        padding-right: 12px;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+
+      .location {
+        flex: 2;
+        padding-right: 12px;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+
+      .type {
+        flex: 0.8;
+        text-align: center;
+        font-weight: 500;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .alert {
+        flex: 0.8;
+        text-align: center;
+        font-weight: 500;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-left: 12px;
+      }
+    }
+
+    .point, .location, .type, .alert {
+      line-height: 1.5;
+    }
+  }
+}
+
+@keyframes scrollUp {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-50%);
   }
 }
 

src/views/dashboard/screen/components/LeftPanel/index.vue

@@ -2,18 +2,22 @@
 import TopCard from './TopCard.vue'
 import MiddleCard from './MiddleCard.vue'
 import BottomCard from './BottomCard.vue'
+import { Decoration5 } from 'datav-vue3'
 </script>
 
 <template>
   <div class="left-panel-container">
-    <div class="panel-item">
+    <Decoration5 class="top-decoration" />
-      <TopCard />
+    <div class="panels-wrapper">
-    </div>
+      <div class="panel-item">
-    <div class="panel-item">
+        <TopCard />
-      <MiddleCard />
+      </div>
-    </div>
+      <div class="panel-item">
-    <div class="panel-item">
+        <MiddleCard />
-      <BottomCard />
+      </div>
+      <div class="panel-item">
+        <BottomCard />
+      </div>
     </div>
   </div>
 </template>
@@ -21,17 +25,31 @@ import BottomCard from './BottomCard.vue'
 <style lang="scss" scoped>
 .left-panel-container {
   height: 100%;
-  display: flex;
+  position: relative;
-  flex-direction: column;
-  gap: 16px;
 
-  .panel-item {
+  .top-decoration {
-    flex: 1;
+    position: absolute;
-    background: rgba(255, 255, 255, 0.04);
+    top: -30px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    left: 0;
-    border-radius: 8px;
+    width: 100%;
-    backdrop-filter: blur(4px);
+    height: 30px;
-    overflow: hidden;
+    z-index: 1;
+  }
+
+  .panels-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .panel-item {
+      flex: 1;
+      background: rgba(255, 255, 255, 0.04);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      backdrop-filter: blur(4px);
+      overflow: hidden;
+    }
   }
 }
 </style>

src/views/dashboard/screen/components/RightPanel/BottomCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 import { getAlertStatisticsOverview } from '@/api/monitor/alert'
 
@@ -9,74 +9,100 @@ const chartRef = ref(null)
 // 预警数据
 const alertData = ref({
   total: 0,
-  water_quality: {
+  level2: {
-    name: '水质预警',
+    name: '中等预警',
     total: 0,
-    color: '#36CFFF'
+    color: '#E6A23C',
+    pending: 0,
+    processed: 0,
+    ignored: 0
   },
-  air_quality: {
+  level3: {
-    name: '空气质量预警',
+    name: '严重预警',
     total: 0,
-    color: '#FFB72C'
+    color: '#F56C6C',
-  },
+    pending: 0,
-  ecosystem: {
+    processed: 0,
-    name: '生态系统预警',
+    ignored: 0
-    total: 0,
-    color: '#4EF568'
-  },
-  weather: {
-    name: '气象预警',
-    total: 0,
-    color: '#FF36D9'
   }
 })
 
 // 初始化图表
-const initChart = () => {
+const initChart = async () => {
+  await nextTick()
   if (!chartRef.value) return
 
   chart = echarts.init(chartRef.value)
 
   const option = {
     backgroundColor: 'transparent',
-    grid: {
-      left: '5%',
-      right: '15%',
-      top: '10%',
-      bottom: '10%',
-      containLabel: true
-    },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
       },
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      borderColor: 'rgba(255, 255, 255, 0.2)',
+      textStyle: {
+        color: '#fff'
+      },
       formatter: function(params) {
-        const data = params[0]
+        const groupName = params[0].axisValue
-        return `${data.name}<br/>预警次数：${data.value}<br/>占比：${((data.value / alertData.value.total) * 100).toFixed(1)}%`
+        let result = `${groupName}<br/>`
+        params.forEach(item => {
+          result += `${item.marker} ${item.seriesName}：${item.value}次<br/>`
+        })
+        return result
       }
     },
+    legend: {
+      data: ['待处理', '已处理', '已忽略'],
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      },
+      icon: 'roundRect',
+      itemWidth: 12,
+      itemHeight: 12,
+      top: '5%'
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '8%',
+      top: '15%',
+      containLabel: true
+    },
     xAxis: {
-      type: 'value',
+      type: 'category',
+      data: ['严重预警', '中等预警'],
       axisLine: {
-        show: false
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.3)'
+        }
       },
       axisTick: {
         show: false
       },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 14,
+        interval: 0
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '数量',
+      nameTextStyle: {
+        color: 'rgba(255, 255, 255, 0.7)',
+        fontSize: 12
+      },
       splitLine: {
         lineStyle: {
           color: 'rgba(255, 255, 255, 0.1)',
           type: 'dashed'
         }
       },
-      axisLabel: {
-        color: 'rgba(255, 255, 255, 0.7)'
-      }
-    },
-    yAxis: {
-      type: 'category',
-      data: [],
       axisLine: {
         show: false
       },
@@ -84,27 +110,74 @@ const initChart = () => {
         show: false
       },
       axisLabel: {
-        color: 'rgba(255, 255, 255, 0.9)',
+        color: 'rgba(255, 255, 255, 0.7)',
-        fontSize: 14
+        fontSize: 12
       }
     },
     series: [
       {
+        name: '待处理',
         type: 'bar',
-        barWidth: '40%',
+        barGap: '30%',
-        label: {
+        barWidth: 20,
-          show: true,
+        itemStyle: {
-          position: 'right',
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          color: '#fff',
+            { offset: 0, color: '#36CFFF' },
-          fontSize: 14,
+            { offset: 1, color: 'rgba(54, 207, 255, 0.3)' }
-          formatter: function(params) {
+          ]),
-            return params.value + '次'
+          borderRadius: [4, 4, 0, 0]
+        },
+        emphasis: {
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#36CFFF' },
+              { offset: 1, color: '#36CFFF' }
+            ])
           }
         },
+        data: [0, 0]
+      },
+      {
+        name: '已处理',
+        type: 'bar',
+        barWidth: 20,
         itemStyle: {
-          borderRadius: [0, 4, 4, 0]
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#67C23A' },
+            { offset: 1, color: 'rgba(103, 194, 58, 0.3)' }
+          ]),
+          borderRadius: [4, 4, 0, 0]
         },
-        data: []
+        emphasis: {
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#67C23A' },
+              { offset: 1, color: '#67C23A' }
+            ])
+          }
+        },
+        data: [0, 0]
+      },
+      {
+        name: '已忽略',
+        type: 'bar',
+        barWidth: 20,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#909399' },
+            { offset: 1, color: 'rgba(144, 147, 153, 0.3)' }
+          ]),
+          borderRadius: [4, 4, 0, 0]
+        },
+        emphasis: {
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#909399' },
+              { offset: 1, color: '#909399' }
+            ])
+          }
+        },
+        data: [0, 0]
       }
     ]
   }
@@ -117,39 +190,48 @@ const fetchAlertData = async () => {
   try {
     const res = await getAlertStatisticsOverview()
     if (res.success && res.data) {
-      // 更新总数
+      // 更新总数和各级别预警数据
-      alertData.value.total = Object.values(res.data).reduce((sum, item) => sum + (item.total || 0), 0)
+      let total = 0
+      let level2Data = { pending: 0, processed: 0, ignored: 0 }
+      let level3Data = { pending: 0, processed: 0, ignored: 0 }
 
-      // 更新各类预警数据
+      res.data.forEach(item => {
-      Object.keys(alertData.value).forEach(key => {
+        const count = Number(item.total_count) || 0
-        if (key !== 'total' && res.data[key]) {
+        total += count
-          alertData.value[key].total = res.data[key].total || 0
+
+        if (item.alert_level === 2) {
+          level2Data = {
+            pending: Number(item.pending_count) || 0,
+            processed: Number(item.processed_count) || 0,
+            ignored: Number(item.ignored_count) || 0
+          }
+        } else if (item.alert_level === 3) {
+          level3Data = {
+            pending: Number(item.pending_count) || 0,
+            processed: Number(item.processed_count) || 0,
+            ignored: Number(item.ignored_count) || 0
+          }
         }
       })
 
-      // 处理图表数据
+      alertData.value.total = total
-      const sortedData = Object.entries(alertData.value)
-        .filter(([key]) => key !== 'total')
-        .sort((a, b) => b[1].total - a[1].total)
-
-      const chartData = sortedData.map(([_, item]) => ({
-        name: item.name,
-        value: item.total,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-            { offset: 0, color: item.color.replace('FF', '40') },
-            { offset: 1, color: item.color }
-          ])
-        }
-      }))
 
+      // 更新图表数据
       chart.setOption({
-        yAxis: {
+        series: [
-          data: sortedData.map(([_, item]) => item.name)
+          {
-        },
+            name: '待处理',
-        series: [{
+            data: [level3Data.pending, level2Data.pending]
-          data: chartData
+          },
-        }]
+          {
+            name: '已处理',
+            data: [level3Data.processed, level2Data.processed]
+          },
+          {
+            name: '已忽略',
+            data: [level3Data.ignored, level2Data.ignored]
+          }
+        ]
       })
     }
   } catch (error) {
@@ -159,8 +241,9 @@ const fetchAlertData = async () => {
 
 // 自动刷新数据
 let timer = null
-const startAutoRefresh = () => {
+const startAutoRefresh = async () => {
-  fetchAlertData()
+  await initChart()
+  await fetchAlertData()
   timer = setInterval(fetchAlertData, 60000) // 每分钟更新一次
 }
 
@@ -170,7 +253,6 @@ const handleResize = () => {
 }
 
 onMounted(() => {
-  initChart()
   startAutoRefresh()
   window.addEventListener('resize', handleResize)
 })
@@ -207,8 +289,11 @@ onUnmounted(() => {
   box-sizing: border-box;
   background: rgba(6, 30, 93, 0.5);
   border-radius: 4px;
+  display: flex;
+  flex-direction: column;
 
   .card-header {
+    flex: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -258,7 +343,8 @@ onUnmounted(() => {
   }
 
   .chart-container {
-    height: calc(100% - 60px);
+    flex: 1;
+    min-height: 0;
     width: 100%;
   }
 }

src/views/dashboard/screen/components/RightPanel/MiddleCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 import { getAlertStatisticsByIndicator } from '@/api/monitor/alert'
 
@@ -7,7 +7,8 @@ let chart = null
 const chartRef = ref(null)
 
 // 初始化图表
-const initChart = () => {
+const initChart = async () => {
+  await nextTick()
   if (!chartRef.value) return
 
   chart = echarts.init(chartRef.value)
@@ -15,54 +16,91 @@ const initChart = () => {
   const option = {
     backgroundColor: 'transparent',
     tooltip: {
-      trigger: 'item',
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      borderColor: 'rgba(255, 255, 255, 0.2)',
+      textStyle: {
+        color: '#fff'
+      },
       formatter: function(params) {
-        return `${params.name}<br/>预警次数：${params.value}<br/>占比：${params.percent}%`
+        const item = params[0]
+        return `${item.name}<br/>
+预警次数：${item.value}次<br/>
+预警天数：${item.data.days}天<br/>
+日均预警：${item.data.avg.toFixed(2)}次/天`
       }
     },
-    legend: {
+    grid: {
-      orient: 'vertical',
+      top: '3%',
       right: '5%',
-      top: 'middle',
+      bottom: '3%',
-      itemWidth: 10,
+      left: '15%',
-      itemHeight: 10,
+      containLabel: true
-      icon: 'circle',
+    },
-      textStyle: {
+    xAxis: {
-        color: '#fff',
+      type: 'value',
-        fontSize: 12
+      name: '预警次数',
+      nameTextStyle: {
+        color: 'rgba(255, 255, 255, 0.7)',
+        fontSize: 12,
+        padding: [0, 0, 0, 20]
       },
-      formatter: (name) => {
+      axisLine: {
-        const data = option.series[0].data
+        show: false
-        const item = data.find(v => v.name === name)
+      },
-        return `${name}  ${item ? item.value : 0}次`
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.1)',
+          type: 'dashed'
+        }
+      },
+      axisLabel: {
+        color: 'rgba(255, 255, 255, 0.7)',
+        fontSize: 12
+      }
+    },
+    yAxis: {
+      type: 'category',
+      data: [],
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.3)'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 12,
+        margin: 16
       }
     },
     series: [
       {
-        name: '指标预警',
+        name: '预警次数',
-        type: 'pie',
+        type: 'bar',
-        radius: ['40%', '70%'],
+        barWidth: 16,
-        center: ['40%', '50%'],
+        showBackground: true,
-        avoidLabelOverlap: true,
+        backgroundStyle: {
+          color: 'rgba(255, 255, 255, 0.05)',
+          borderRadius: [0, 4, 4, 0]
+        },
         itemStyle: {
-          borderRadius: 10,
+          borderRadius: [0, 4, 4, 0]
-          borderColor: 'rgba(0, 0, 0, 0.2)',
-          borderWidth: 2
         },
         label: {
           show: true,
-          position: 'outside',
+          position: 'right',
-          formatter: '{b}\n{d}%',
           color: '#fff',
-          fontSize: 12
+          fontSize: 12,
-        },
+          formatter: '{c}次'
-        labelLine: {
-          length: 15,
-          length2: 0,
-          maxSurfaceAngle: 80,
-          lineStyle: {
-            color: 'rgba(255, 255, 255, 0.3)'
-          }
         },
         data: []
       }
@@ -77,72 +115,118 @@ const fetchIndicatorData = async () => {
   try {
     const res = await getAlertStatisticsByIndicator()
     if (res.success && res.data) {
-      // 将数据转换为饼图所需格式
+      // 将数据转换为图表所需格式
-      const chartData = Object.entries(res.data).map(([name, value]) => ({
+      const chartData = res.data
-        name,
+        .filter(item => item.indicator_name)
-        value,
+        .map(item => ({
-        itemStyle: {
+          name: item.indicator_name,
-          color: getRandomColor(name)
+          value: Number(item.alert_count) || 0,
-        }
+          days: Number(item.alert_days) || 0,
-      })).sort((a, b) => b.value - a.value) // 按数值从大到小排序
+          avg: Number(item.avg_daily_alerts) || 0,
+          itemStyle: {
+            color: getIndicatorColor(item.indicator_name)
+          }
+        }))
+        .sort((a, b) => b.value - a.value)
 
+      // 更新图表配置
       chart.setOption({
-        series: [{
+        yAxis: {
-          data: chartData
+          data: chartData.map(item => item.name)
-        }]
+        },
+        series: [
+          {
+            data: chartData,
+            markLine: {
+              silent: true,
+              symbol: ['none', 'none'],
+              lineStyle: {
+                color: 'rgba(255, 255, 255, 0.3)'
+              },
+              data: [
+                {
+                  type: 'average',
+                  name: '平均值',
+                  label: {
+                    color: '#fff',
+                    position: 'start'
+                  }
+                }
+              ]
+            },
+            animationDelay: function(idx) {
+              return idx * 100
+            }
+          }
+        ]
       })
     }
   } catch (error) {
     console.error('获取指标预警统计数据失败:', error)
   }
+
 }
 
-// 生成固定的渐变色
+// 获取指标颜色
-const getRandomColor = (name) => {
+const getIndicatorColor = (indicatorName) => {
   const colors = {
-    '溶解氧': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    '水体pH值': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
       { offset: 0, color: '#36CFFF' },
       { offset: 1, color: '#2861F5' }
     ]),
-    'pH值': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    '溶解氧': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-      { offset: 0, color: '#FFB72C' },
-      { offset: 1, color: '#F5612A' }
-    ]),
-    '浊度': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
       { offset: 0, color: '#4EF568' },
       { offset: 1, color: '#2AB256' }
     ]),
-    '水温': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    '盐度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+      { offset: 0, color: '#FFB72C' },
+      { offset: 1, color: '#F5612A' }
+    ]),
+    '水温': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
       { offset: 0, color: '#FF36D9' },
       { offset: 1, color: '#C92AF5' }
     ]),
-    '氨氮': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    '浊度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
       { offset: 0, color: '#36FFB0' },
       { offset: 1, color: '#2AF5A1' }
+    ]),
+    'PM2.5': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+      { offset: 0, color: '#7636FF' },
+      { offset: 1, color: '#2A3CF5' }
+    ]),
+    '氮氧化物': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+      { offset: 0, color: '#FF7636' },
+      { offset: 1, color: '#F52A2A' }
     ])
   }
-
+  return colors[indicatorName] || new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-  return colors[name] || new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    { offset: 0, color: '#36CFFF' },
-    { offset: 0, color: '#7636FF' },
+    { offset: 1, color: '#2861F5' }
-    { offset: 1, color: '#2A3CF5' }
   ])
 }
 
 // 自动刷新数据
 let timer = null
-const startAutoRefresh = () => {
+const startAutoRefresh = async () => {
-  fetchIndicatorData()
+  await initChart()
-  timer = setInterval(fetchIndicatorData, 60000) // 每分钟更新一次
+  if (chart) { // 只有在图表成功初始化后才开始获取数据
+    await fetchIndicatorData()
+    timer = setInterval(fetchIndicatorData, 60000) // 每分钟更新一次
+  }
 }
 
 // 处理窗口大小变化
 const handleResize = () => {
-  chart?.resize()
+  if (chart) {
+    chart.resize()
+  }
 }
 
 onMounted(() => {
-  initChart()
+  // 确保在组件挂载后延迟一点时间再初始化
-  startAutoRefresh()
+  setTimeout(() => {
+    startAutoRefresh()
+  }, 100)
   window.addEventListener('resize', handleResize)
 })
 
@@ -175,8 +259,11 @@ onUnmounted(() => {
   box-sizing: border-box;
   background: rgba(6, 30, 93, 0.5);
   border-radius: 4px;
+  display: flex;
+  flex-direction: column;
 
   .card-header {
+    flex: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -214,7 +301,8 @@ onUnmounted(() => {
   }
 
   .chart-container {
-    height: calc(100% - 60px);
+    flex: 1;
+    min-height: 0;
     width: 100%;
   }
 }

src/views/dashboard/screen/components/RightPanel/TopCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 import { getAlertStatisticsByRule } from '@/api/monitor/alert'
 
@@ -10,7 +10,8 @@ const chartRef = ref(null)
 const ruleAlerts = ref([])
 
 // 初始化图表
-const initChart = () => {
+const initChart = async () => {
+  await nextTick()
   if (!chartRef.value) return
 
   chart = echarts.init(chartRef.value)
@@ -19,24 +20,62 @@ const initChart = () => {
     backgroundColor: 'transparent',
     tooltip: {
       trigger: 'axis',
-      axisPointer: {
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        type: 'shadow'
+      borderColor: 'rgba(255, 255, 255, 0.2)',
+      textStyle: {
+        color: '#fff'
+      },
+      formatter: function(params) {
+        let result = `${params[0].name}<br/>`
+        params.forEach(item => {
+          result += `${item.marker} ${item.seriesName}：${item.value}次<br/>`
+        })
+        return result
       }
     },
-    grid: {
+    legend: {
-      top: '10%',
+      data: ['已处理', '待处理'],
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      },
+      top: 0,
       right: '5%',
-      bottom: '10%',
+      itemWidth: 12,
-      left: '15%',
+      itemHeight: 12
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
       containLabel: true
     },
     xAxis: {
-      type: 'value',
+      type: 'category',
+      data: [],
       axisLine: {
-        show: false
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.3)'
+        }
       },
-      axisTick: {
+      axisLabel: {
-        show: false
+        color: '#fff',
+        interval: 0,
+        rotate: 45,
+        formatter: function(value) {
+          if (value.length > 8) {
+            return value.substring(0, 8) + '...'
+          }
+          return value
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '预警数量',
+      nameTextStyle: {
+        color: 'rgba(255, 255, 255, 0.7)'
       },
       splitLine: {
         lineStyle: {
@@ -44,41 +83,69 @@ const initChart = () => {
           type: 'dashed'
         }
       },
-      axisLabel: {
-        color: 'rgba(255, 255, 255, 0.7)'
-      }
-    },
-    yAxis: {
-      type: 'category',
-      data: [],
       axisLine: {
         lineStyle: {
-          color: 'rgba(255, 255, 255, 0.1)'
+          color: 'rgba(255, 255, 255, 0.3)'
         }
       },
-      axisTick: {
-        show: false
-      },
       axisLabel: {
-        color: '#fff',
+        color: '#fff'
-        fontSize: 14
       }
     },
     series: [
       {
-        name: '预警次数',
+        name: '已处理',
-        type: 'bar',
+        type: 'line',
-        data: [],
+        smooth: true,
-        barWidth: '40%',
+        symbol: 'circle',
-        itemStyle: {
+        symbolSize: 8,
-          borderRadius: [0, 4, 4, 0]
+        lineStyle: {
+          width: 2,
+          color: '#4EF568'
         },
-        label: {
+        itemStyle: {
-          show: true,
+          color: '#4EF568'
-          position: 'right',
+        },
-          color: '#fff',
+        areaStyle: {
-          formatter: '{c}次'
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        }
+            {
+              offset: 0,
+              color: 'rgba(78, 245, 104, 0.3)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(42, 178, 86, 0.1)'
+            }
+          ])
+        },
+        data: []
+      },
+      {
+        name: '待处理',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          width: 2,
+          color: '#FFB72C'
+        },
+        itemStyle: {
+          color: '#FFB72C'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(255, 183, 44, 0.3)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(245, 97, 42, 0.1)'
+            }
+          ])
+        },
+        data: []
       }
     ]
   }
@@ -92,29 +159,44 @@ const fetchRuleAlertData = async () => {
     const res = await getAlertStatisticsByRule()
     if (res.success && res.data) {
       // 转换数据格式并排序
-      const sortedData = Object.entries(res.data)
+      const sortedData = res.data
-        .map(([name, value]) => ({ name, value }))
+        .sort((a, b) => b.total_alerts - a.total_alerts)
-        .sort((a, b) => b.value - a.value)
+        .slice(0, 6) // 只显示前6个规则
+
+      // 构建数据
+      const xAxisData = sortedData.map(item => item.rule_name)
+      const processedData = sortedData.map(item => {
+        const total = Number(item.total_alerts) || 0
+        const pending = Number(item.pending_count) || 0
+        return total - pending
+      })
+      const pendingData = sortedData.map(item => Number(item.pending_count) || 0)
 
       // 更新图表数据
       chart.setOption({
-        yAxis: {
+        xAxis: {
-          data: sortedData.map(item => item.name)
+          data: xAxisData
         },
         series: [
           {
-            data: sortedData.map(item => ({
+            name: '已处理',
-              value: item.value,
+            data: processedData
-              itemStyle: {
+          },
-                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+          {
-                  { offset: 0, color: 'rgba(54, 207, 255, 0.2)' },
+            name: '待处理',
-                  { offset: 1, color: '#36CFFF' }
+            data: pendingData
-                ])
-              }
-            }))
           }
         ]
       })
+
+      // 添加动画效果
+      chart.setOption({
+        series: chart.getOption().series.map(series => ({
+          ...series,
+          animationDuration: 1000,
+          animationEasing: 'cubicOut'
+        }))
+      })
     }
   } catch (error) {
     console.error('获取规则预警统计数据失败:', error)
@@ -123,8 +205,9 @@ const fetchRuleAlertData = async () => {
 
 // 自动刷新数据
 let timer = null
-const startAutoRefresh = () => {
+const startAutoRefresh = async () => {
-  fetchRuleAlertData()
+  await initChart()
+  await fetchRuleAlertData()
   timer = setInterval(fetchRuleAlertData, 60000) // 每分钟更新一次
 }
 
@@ -134,7 +217,6 @@ const handleResize = () => {
 }
 
 onMounted(() => {
-  initChart()
   startAutoRefresh()
   window.addEventListener('resize', handleResize)
 })
@@ -168,8 +250,11 @@ onUnmounted(() => {
   box-sizing: border-box;
   background: rgba(6, 30, 93, 0.5);
   border-radius: 4px;
+  display: flex;
+  flex-direction: column;
 
   .card-header {
+    flex: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -207,7 +292,8 @@ onUnmounted(() => {
   }
 
   .chart-container {
-    height: calc(100% - 60px);
+    flex: 1;
+    min-height: 0;
     width: 100%;
   }
 }

src/views/dashboard/screen/components/RightPanel/index.vue

@@ -2,18 +2,22 @@
 import TopCard from './TopCard.vue'
 import MiddleCard from './MiddleCard.vue'
 import BottomCard from './BottomCard.vue'
+import { Decoration5 } from 'datav-vue3'
 </script>
 
 <template>
   <div class="right-panel-container">
-    <div class="panel-item">
+    <Decoration5 class="top-decoration" />
-      <TopCard />
+    <div class="panels-wrapper">
-    </div>
+      <div class="panel-item">
-    <div class="panel-item">
+        <TopCard />
-      <MiddleCard />
+      </div>
-    </div>
+      <div class="panel-item">
-    <div class="panel-item">
+        <MiddleCard />
-      <BottomCard />
+      </div>
+      <div class="panel-item">
+        <BottomCard />
+      </div>
     </div>
   </div>
 </template>
@@ -21,17 +25,31 @@ import BottomCard from './BottomCard.vue'
 <style lang="scss" scoped>
 .right-panel-container {
   height: 100%;
-  display: flex;
+  position: relative;
-  flex-direction: column;
-  gap: 16px;
 
-  .panel-item {
+  .top-decoration {
-    flex: 1;
+    position: absolute;
-    background: rgba(255, 255, 255, 0.04);
+    top: -30px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    left: 0;
-    border-radius: 8px;
+    width: 100%;
-    backdrop-filter: blur(4px);
+    height: 30px;
-    overflow: hidden;
+    z-index: 1;
+  }
+
+  .panels-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .panel-item {
+      flex: 1;
+      background: rgba(255, 255, 255, 0.04);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      backdrop-filter: blur(4px);
+      overflow: hidden;
+    }
   }
 }
 </style>

src/views/dashboard/screen/index.vue

@@ -1,14 +1,10 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
-import { useRouter } from "vue-router";
 import LeftPanel from './components/LeftPanel/index.vue'
 import CenterPanel from './components/CenterPanel/index.vue'
 import RightPanel from './components/RightPanel/index.vue'
-import { BorderBox1, Decoration1 } from 'datav-vue3'
+import { BorderBox1, Decoration1, Decoration10, Decoration8 } from 'datav-vue3'
 
-const router = useRouter();
-const isFullscreen = ref(false);
-const isPopupWindow = ref(!!window.opener);
 const currentTime = ref('');
 
 // 更新时间
@@ -26,42 +22,13 @@ const updateTime = () => {
 // 定时器
 let timer = null;
 
-const handleFullScreen = () => {
-  if (!document.fullscreenElement) {
-    document.documentElement.requestFullscreen();
-    isFullscreen.value = true;
-  } else {
-    document.exitFullscreen();
-    isFullscreen.value = false;
-  }
-};
-
-const handleClose = () => {
-  if (isPopupWindow.value) {
-    window.close();
-  } else {
-    router.push("/dashboard");
-  }
-};
-
-// 监听ESC退出全屏
-const handleFullscreenChange = () => {
-  isFullscreen.value = !!document.fullscreenElement;
-};
-
-// 打开新窗口
 onMounted(() => {
-  document.addEventListener("fullscreenchange", handleFullscreenChange);
-  if (isPopupWindow.value) {
-    handleFullScreen();
-  }
   // 启动时间更新
   updateTime();
   timer = setInterval(updateTime, 1000);
 });
 
 onUnmounted(() => {
-  document.removeEventListener("fullscreenchange", handleFullscreenChange);
   // 清除定时器
   if (timer) {
     clearInterval(timer);
@@ -74,16 +41,8 @@ onUnmounted(() => {
     <BorderBox1>
       <div class="screen-header">
         <Decoration1 class="header-decoration" />
-        <div class="header-title">智慧湿地生态监测大屏</div>
+        <div class="header-title">AI智慧湿地生态监测大屏</div>
         <div class="header-time">{{ currentTime }}</div>
-        <div class="header-right">
-          <el-button type="default" @click="handleClose" class="mr-10">
-            {{ isPopupWindow ? "关闭窗口" : "返回" }}
-          </el-button>
-          <el-button type="primary" @click="handleFullScreen">
-            {{ isFullscreen ? "退出全屏" : "全屏显示" }}
-          </el-button>
-        </div>
       </div>
 
       <div class="screen-content">
@@ -156,32 +115,13 @@ onUnmounted(() => {
 
     .header-time {
       position: absolute;
-      right: 240px;
+      right: 20px;
       top: 65%;
       font-family: 'Monaco', monospace;
       font-size: 20px;
       color: #3fa7dd;
       text-shadow: 0 0 10px rgba(1, 153, 209, .5);
     }
-
-    .header-right {
-      position: absolute;
-      right: 20px;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: 1;
-
-      :deep(.el-button) {
-        background: rgba(1, 153, 209, 0.2);
-        border-color: rgba(1, 153, 209, 0.5);
-        color: #fff;
-
-        &:hover {
-          background: rgba(1, 153, 209, 0.3);
-          border-color: rgba(1, 153, 209, 0.7);
-        }
-      }
-    }
   }
 
   .screen-content {
@@ -214,8 +154,4 @@ onUnmounted(() => {
     }
   }
 }
-
-.mr-10 {
-  margin-right: 10px;
-}
 </style>