完善了控制台以及部分数据图标,并新增了项目背景页和项目api文档

src/layout/AdminLayout.vue

@@ -124,6 +124,7 @@ const handleLogout = () => {
           </template>
           <el-menu-item index="/report/daily">日常报告</el-menu-item>
           <el-menu-item index="/report/analysis">分析报告</el-menu-item>
+          <el-menu-item index="/report/about">项目背景</el-menu-item>
         </el-sub-menu>
       </el-menu>
     </el-aside>

src/router/index.ts

@@ -74,6 +74,11 @@ const router = createRouter({
           name: 'AnalysisReports',
           component: () => import('../views/report/analysis/index.vue')
         },
+        {
+          path: 'report/about',
+          name: 'ProjectAbout',
+          component: () => import('../views/report/about/index.vue')
+        },
         {
           path: 'system/settings',
           name: 'SystemSettings',

src/views/dashboard/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
-import { Timer, Bell, Document } from "@element-plus/icons-vue";
+import { Timer, Bell, Document, Monitor, DataBoard, Location, Connection } from "@element-plus/icons-vue";
 
 // 统计数据
 const statistics = ref({
@@ -47,82 +47,131 @@ const initTrendChart = () => {
       textStyle: {
         fontSize: 16,
         fontWeight: 500,
-        color: "#2c3e50",
+        color: '#303133'
-      },
+      }
     },
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
-      backgroundColor: "rgba(255,255,255,0.9)",
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
-      borderColor: "#eee",
+      borderColor: '#eee',
+      padding: [10, 15],
       textStyle: {
-        color: "#666",
+        color: '#666'
-      },
+      }
     },
     legend: {
+      data: ['物种数量', '监测数据'],
+      right: 20,
+      top: 10,
       textStyle: {
-        color: "#666",
+        color: '#666'
       },
+      itemWidth: 12,
+      itemHeight: 12,
+      itemGap: 20
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
     },
     xAxis: {
-      type: "category",
+      type: 'category',
-      data: ["3-14", "3-15", "3-16", "3-17", "3-18", "3-19", "3-20"],
+      boundaryGap: false,
+      data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'],
       axisLine: {
         lineStyle: {
-          color: "#ddd",
+          color: '#DCDFE6'
-        },
+        }
+      },
+      axisTick: {
+        show: false
       },
       axisLabel: {
-        color: "#666",
+        color: '#909399'
-      },
+      }
     },
     yAxis: {
-      type: "value",
+      type: 'value',
       splitLine: {
         lineStyle: {
-          color: "#eee",
+          color: '#EBEEF5',
-        },
+          type: 'dashed'
+        }
       },
       axisLabel: {
-        color: "#666",
+        color: '#909399'
-      },
+      }
     },
     series: [
       {
-        name: "物种数量",
+        name: '物种数量',
-        type: "line",
+        type: 'line',
-        data: [120, 132, 101, 134, 90, 230, 210],
         smooth: true,
         symbolSize: 8,
         lineStyle: {
           width: 3,
-          color: "#409EFF",
+          color: '#409EFF'
         },
         itemStyle: {
-          color: "#409EFF",
+          color: '#409EFF',
-          borderColor: "#fff",
+          borderColor: '#fff',
-          borderWidth: 2,
+          borderWidth: 2
         },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(64, 158, 255, 0.2)' },
+            { offset: 1, color: 'rgba(64, 158, 255, 0)' }
+          ])
+        },
+        emphasis: {
+          itemStyle: {
+            borderWidth: 3,
+            shadowColor: 'rgba(64, 158, 255, 0.5)',
+            shadowBlur: 10
+          }
+        },
+        data: [120, 132, 101, 134, 90, 230, 210]
       },
       {
-        name: "监测数据",
+        name: '监测数据',
-        type: "line",
+        type: 'line',
-        data: [220, 182, 191, 234, 290, 330, 310],
         smooth: true,
         symbolSize: 8,
         lineStyle: {
           width: 3,
-          color: "#67C23A",
+          color: '#67C23A'
         },
         itemStyle: {
-          color: "#67C23A",
+          color: '#67C23A',
-          borderColor: "#fff",
+          borderColor: '#fff',
-          borderWidth: 2,
+          borderWidth: 2
         },
-      },
+        areaStyle: {
-    ],
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(103, 194, 58, 0.2)' },
+            { offset: 1, color: 'rgba(103, 194, 58, 0)' }
+          ])
+        },
+        emphasis: {
+          itemStyle: {
+            borderWidth: 3,
+            shadowColor: 'rgba(103, 194, 58, 0.5)',
+            shadowBlur: 10
+          }
+        },
+        data: [220, 182, 191, 234, 290, 330, 310]
+      }
+    ]
   };
 
   myChart.setOption(option);
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', () => {
+    myChart.resize();
+  });
 };
 
 // 初始化分布图表
@@ -258,6 +307,49 @@ const activities = ref([
   },
 ]);
 
+const statsCards = ref([
+  {
+    title: '物种监测',
+    icon: Monitor,
+    value: '128',
+    unit: '种',
+    change: { value: '+12', label: '今日新增' },
+    color: '#1890FF',
+    bgColor: 'linear-gradient(120deg, #0072FF 0%, #00C6FF 100%)',
+    features: ['实时监测', '智能识别', '行为分析', '分布追踪']
+  },
+  {
+    title: '环境监测',
+    icon: DataBoard,
+    value: '22',
+    unit: '点',
+    change: { value: '2', label: '异常' },
+    color: '#F5222D',
+    bgColor: 'linear-gradient(120deg, #FF416C 0%, #FF4B2B 100%)',
+    features: ['水质监测', '空气监测', '土壤监测', '气象监测']
+  },
+  {
+    title: '巡护任务',
+    icon: Location,
+    value: '8',
+    unit: '个',
+    change: { value: '66%', label: '完成率' },
+    color: '#52C41A',
+    bgColor: 'linear-gradient(120deg, #00B09B 0%, #96C93D 100%)',
+    features: ['智能派单', '轨迹记录', '实时通讯', '数据采集']
+  },
+  {
+    title: '设备状态',
+    icon: Connection,
+    value: '32',
+    unit: '台',
+    change: { value: '88.9%', label: '在线率' },
+    color: '#722ED1',
+    bgColor: 'linear-gradient(120deg, #7F00FF 0%, #E100FF 100%)',
+    features: ['状态监控', '故障预警', '维护管理', '性能分析']
+  }
+]);
+
 onMounted(() => {
   initTrendChart();
   initDistributionChart();
@@ -266,60 +358,40 @@ onMounted(() => {
 
 <template>
   <div class="dashboard-container">
-    <!-- 统计卡片 -->
+    <div class="stats-grid">
-    <el-row :gutter="20" class="mb-20">
+      <div v-for="card in statsCards" 
-      <el-col :span="6">
+           :key="card.title" 
-        <div class="stat-card">
+           class="stats-card"
-          <div class="stat-icon">
+           :style="{ backgroundColor: card.bgColor }">
-            <el-icon><Histogram /></el-icon>
+        <div class="card-header">
-          </div>
+          <div class="title">
-          <div class="stat-info">
+            <el-icon :size="20" :color="card.color">
-            <div class="label">物种监测</div>
+              <component :is="card.icon" />
-            <div class="value">{{ statistics.species.total }}</div>
+            </el-icon>
-            <div class="trend up">
+            <span>{{ card.title }}</span>
-              <el-icon><ArrowUp /></el-icon>
-              今日新增 {{ statistics.species.today }}
-            </div>
           </div>
         </div>
-      </el-col>
+        <div class="card-body">
-      <el-col :span="6">
+          <div class="main-value">
-        <div class="stat-card">
+            {{ card.value }}
-          <div class="stat-icon warning">
+            <span class="unit">{{ card.unit }}</span>
-            <el-icon><Monitor /></el-icon>
           </div>
-          <div class="stat-info">
+          <div class="change-value" 
-            <div class="label">环境监测</div>
+               :style="{ color: card.change.value.includes('+') ? '#67C23A' : 
-            <div class="value">{{ statistics.environment.normal }}</div>
+                        card.change.value.includes('%') ? card.color : '#F56C6C' }">
-            <div class="trend">异常 {{ statistics.environment.abnormal }}</div>
+            {{ card.change.value }}
+            <span class="label">{{ card.change.label }}</span>
           </div>
         </div>
-      </el-col>
+        <div class="card-footer">
-      <el-col :span="6">
+          <div v-for="feature in card.features" 
-        <div class="stat-card">
+               :key="feature" 
-          <div class="stat-icon success">
+               class="feature-item">
-            <el-icon><Location /></el-icon>
+            {{ feature }}
-          </div>
-          <div class="stat-info">
-            <div class="label">巡护任务</div>
-            <div class="value">{{ statistics.patrol.completed }}</div>
-            <div class="trend">完成率 {{ statistics.patrol.progress }}</div>
           </div>
         </div>
-      </el-col>
+      </div>
-      <el-col :span="6">
+    </div>
-        <div class="stat-card">
-          <div class="stat-icon info">
-            <el-icon><Connection /></el-icon>
-          </div>
-          <div class="stat-info">
-            <div class="label">设备状态</div>
-            <div class="value">{{ statistics.devices.online }}</div>
-            <div class="trend">在线率 {{ statistics.devices.rate }}</div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
 
     <!-- 图表区域 -->
     <el-row :gutter="20" class="mb-20">
@@ -386,79 +458,80 @@ onMounted(() => {
     }
   }
 
-  .stat-card {
+  .stats-grid {
-    background: #fff;
+    display: grid;
-    border-radius: 8px;
+    grid-template-columns: repeat(4, 1fr);
-    padding: 20px;
+    gap: 20px;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    transition: all 0.3s;
-    cursor: pointer;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
 
-    &:hover {
+    .stats-card {
-      transform: translateY(-2px);
+      padding: 20px;
-      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
-    }
-
-    .stat-icon {
-      width: 48px;
-      height: 48px;
       border-radius: 8px;
-      background: rgba(64, 158, 255, 0.1);
+      transition: all 0.3s ease;
-      color: $primary-color;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 24px;
 
-      &.warning {
+      &:hover {
-        background: rgba(230, 162, 60, 0.1);
+        transform: translateY(-2px);
-        color: $warning-color;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
       }
 
-      &.success {
+      .card-header {
-        background: rgba(103, 194, 58, 0.1);
+        margin-bottom: 16px;
-        color: $success-color;
+
+        .title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 16px;
+          color: #606266;
+
+          .el-icon {
+            background: rgba(255, 255, 255, 0.9);
+            padding: 8px;
+            border-radius: 8px;
+          }
+        }
       }
 
-      &.info {
+      .card-body {
-        background: rgba(144, 147, 153, 0.1);
+        margin-bottom: 16px;
-        color: $info-color;
-      }
-    }
 
-    .stat-info {
+        .main-value {
-      flex: 1;
+          font-size: 32px;
+          font-weight: 600;
+          color: #303133;
+          margin-bottom: 8px;
 
-      .label {
+          .unit {
-        color: $text-secondary;
+            font-size: 14px;
-        font-size: 14px;
+            font-weight: normal;
-        margin-bottom: 4px;
+            margin-left: 4px;
-      }
+            color: #909399;
-
+          }
-      .value {
-        font-size: 24px;
-        font-weight: 600;
-        color: $text-primary;
-        line-height: 1.2;
-        margin-bottom: 4px;
-      }
-
-      .trend {
-        font-size: 13px;
-        color: $text-secondary;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-
-        &.up {
-          color: $success-color;
         }
 
-        .el-icon {
+        .change-value {
+          font-size: 14px;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          .label {
+            color: #909399;
+          }
+        }
+      }
+
+      .card-footer {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
+
+        .feature-item {
           font-size: 12px;
+          color: #909399;
+          padding: 4px 8px;
+          background: rgba(255, 255, 255, 0.7);
+          border-radius: 4px;
+          text-align: center;
         }
       }
     }
@@ -600,3 +673,5 @@ onMounted(() => {
   }
 }
 </style>
+
+

src/views/monitor/environment/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import * as echarts from "echarts";
-import { onMounted } from "vue";
+import { ElMessage } from 'element-plus';
+import { Monitor, Warning, TrendCharts } from '@element-plus/icons-vue';
 
 interface EnvData {
   id: number;
@@ -63,6 +64,10 @@ const envStats = ref([
   },
 ]);
 
+// 时间范围选择
+const timeRange = ref('24h');
+
+// 初始化图表
 const initChart = () => {
   const chartDom = document.getElementById("envChart");
   if (!chartDom) return;
@@ -70,90 +75,169 @@ const initChart = () => {
   const myChart = echarts.init(chartDom);
   const option = {
     title: {
-      text: "24小时温度趋势",
+      text: '环境监测趋势',
       textStyle: {
         fontSize: 16,
         fontWeight: 500,
-        color: "#2c3e50",
+        color: '#303133'
-      },
+      }
     },
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
-      backgroundColor: "rgba(255,255,255,0.9)",
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
-      borderColor: "#eee",
+      borderColor: '#eee',
+      padding: [10, 15],
       textStyle: {
-        color: "#666",
+        color: '#666'
       },
+      formatter: function(params: any) {
+        let result = `${params[0].axisValue}<br/>`;
+        params.forEach((item: any) => {
+          result += `${item.marker} ${item.seriesName}: ${item.value}${
+            item.seriesName.includes('温度') ? '°C' : 
+            item.seriesName.includes('湿度') ? '%' : ''
+          }<br/>`;
+        });
+        return result;
+      }
+    },
+    legend: {
+      data: ['温度', '湿度', '水质指数', '空气质量'],
+      right: 20,
+      top: 10,
+      textStyle: {
+        color: '#666'
+      },
+      itemWidth: 12,
+      itemHeight: 12,
+      itemGap: 20
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
     },
     xAxis: {
-      type: "category",
+      type: 'category',
-      data: ["00:00", "06:00", "12:00", "18:00", "24:00"],
+      boundaryGap: false,
+      data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
       axisLine: {
         lineStyle: {
-          color: "#ddd",
+          color: '#DCDFE6'
-        },
+        }
+      },
+      axisTick: {
+        show: false
       },
       axisLabel: {
-        color: "#666",
+        color: '#909399',
-      },
+        formatter: '{value}'
+      }
     },
-    yAxis: {
+    yAxis: [
-      type: "value",
+      {
-      name: "温度(°C)",
+        type: 'value',
-      nameTextStyle: {
+        name: '温度/湿度',
-        color: "#666",
+        nameTextStyle: {
-      },
+          color: '#909399',
-      splitLine: {
+          padding: [0, 30, 0, 0]
-        lineStyle: {
-          color: "#eee",
         },
+        splitLine: {
+          lineStyle: {
+            color: '#EBEEF5',
+            type: 'dashed'
+          }
+        },
+        axisLabel: {
+          color: '#909399',
+          formatter: '{value}'
+        }
       },
-      axisLabel: {
+      {
-        color: "#666",
+        type: 'value',
-      },
+        name: '指数',
-    },
+        nameTextStyle: {
+          color: '#909399',
+          padding: [0, 0, 0, 30]
+        },
+        splitLine: {
+          show: false
+        },
+        axisLabel: {
+          color: '#909399',
+          formatter: '{value}'
+        }
+      }
+    ],
     series: [
       {
-        type: "line",
+        name: '温度',
-        data: [22, 20, 25, 28, 23],
+        type: 'line',
         smooth: true,
+        lineStyle: {
+          width: 3,
+          color: '#409EFF'
+        },
         itemStyle: {
-          color: "#1677ff",
+          color: '#409EFF'
         },
         areaStyle: {
-          color: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            type: "linear",
+            { offset: 0, color: 'rgba(64, 158, 255, 0.2)' },
-            x: 0,
+            { offset: 1, color: 'rgba(64, 158, 255, 0)' }
-            y: 0,
+          ])
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              { offset: 0, color: "rgba(22,119,255,0.2)" },
-              { offset: 1, color: "rgba(22,119,255,0.01)" },
-            ],
-          },
-        },
-        emphasis: {
-          itemStyle: {
-            color: "#1677ff",
-            borderColor: "#fff",
-            borderWidth: 2,
-            shadowColor: "rgba(0,0,0,0.2)",
-            shadowBlur: 10,
-          },
         },
+        data: [22, 23, 24, 25, 26, 27, 26, 25, 24]
       },
-    ],
+      {
-    grid: {
+        name: '湿度',
-      left: "3%",
+        type: 'line',
-      right: "4%",
+        smooth: true,
-      bottom: "3%",
+        lineStyle: {
-      top: "60px",
+          width: 3,
-      containLabel: true,
+          color: '#67C23A'
-    },
+        },
+        itemStyle: {
+          color: '#67C23A'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(103, 194, 58, 0.2)' },
+            { offset: 1, color: 'rgba(103, 194, 58, 0)' }
+          ])
+        },
+        data: [60, 62, 65, 63, 65, 68, 67, 65, 64]
+      },
+      {
+        name: '水质指数',
+        type: 'line',
+        yAxisIndex: 1,
+        smooth: true,
+        lineStyle: {
+          width: 3,
+          color: '#36CFC9'
+        },
+        itemStyle: {
+          color: '#36CFC9'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(54, 207, 201, 0.2)' },
+            { offset: 1, color: 'rgba(54, 207, 201, 0)' }
+          ])
+        },
+        data: [90, 91, 92, 92, 93, 92, 92, 91, 92]
+      }
+    ]
   };
 
   myChart.setOption(option);
+  
+  // 监听窗口大小变化
+  window.addEventListener('resize', () => {
+    myChart.resize();
+  });
 };
 
 // 添加导出相关的数据和方法

src/views/monitor/species/index.vue

@@ -38,90 +38,173 @@ const initChart = () => {
   const myChart = echarts.init(chartDom);
   const option = {
     title: {
-      text: "物种分布统计",
+      text: '物种分布统计',
       textStyle: {
         fontSize: 16,
         fontWeight: 500,
-        color: "#2c3e50",
+        color: '#303133'
-      },
+      }
     },
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
-      backgroundColor: "rgba(255,255,255,0.9)",
+      axisPointer: {
-      borderColor: "#eee",
+        type: 'shadow'
-      textStyle: {
-        color: "#666",
       },
-    },
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
-    legend: {
+      borderColor: '#eee',
-      data: ["数量"],
+      padding: [10, 15],
       textStyle: {
-        color: "#666",
+        color: '#666'
-      },
+      }
     },
-    xAxis: {
+    grid: [{
-      type: "category",
+      left: '8%',
-      data: ["东方白鹳", "黑鹳", "大天鹅", "小天鹅"],
+      right: '52%',
+      top: '15%',
+      bottom: '10%'
+    }],
+    xAxis: [{
+      type: 'category',
+      data: ['鸟类', '鱼类', '两栖类', '植物', '昆虫'],
       axisLine: {
         lineStyle: {
-          color: "#ddd",
+          color: '#DCDFE6'
-        },
+        }
+      },
+      axisTick: {
+        show: false
       },
       axisLabel: {
-        color: "#666",
+        color: '#909399',
+        interval: 0
+      },
+      gridIndex: 0
+    }],
+    yAxis: [{
+      type: 'value',
+      name: '数量',
+      nameTextStyle: {
+        color: '#909399',
+        padding: [0, 30, 0, 0]
       },
-    },
-    yAxis: {
-      type: "value",
       splitLine: {
         lineStyle: {
-          color: "#eee",
+          color: '#EBEEF5',
-        },
+          type: 'dashed'
+        }
       },
       axisLabel: {
-        color: "#666",
+        color: '#909399'
       },
-    },
+      gridIndex: 0
+    }],
     series: [
       {
-        name: "数量",
+        name: '物种数量',
-        type: "bar",
+        type: 'bar',
-        data: [12, 8, 15, 10],
+        barWidth: '40%',
-        itemStyle: {
+        data: [
-          color: {
+          {
-            type: "linear",
+            value: 52,
-            x: 0,
+            itemStyle: { color: '#409EFF' }
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              { offset: 0, color: "#83bff6" },
-              { offset: 0.5, color: "#188df0" },
-              { offset: 1, color: "#188df0" },
-            ],
           },
+          {
+            value: 38,
+            itemStyle: { color: '#67C23A' }
+          },
+          {
+            value: 32,
+            itemStyle: { color: '#E6A23C' }
+          },
+          {
+            value: 42,
+            itemStyle: { color: '#F56C6C' }
+          },
+          {
+            value: 28,
+            itemStyle: { color: '#909399' }
+          }
+        ],
+        label: {
+          show: true,
+          position: 'top',
+          color: '#666'
         },
         emphasis: {
           itemStyle: {
-            color: {
+            shadowBlur: 10,
-              type: "linear",
+            shadowOffsetX: 0,
-              x: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.2)'
-              y: 0,
+          }
-              x2: 0,
-              y2: 1,
-              colorStops: [
-                { offset: 0, color: "#71a5eb" },
-                { offset: 0.7, color: "#1677ff" },
-                { offset: 1, color: "#1677ff" },
-              ],
-            },
-          },
         },
+        xAxisIndex: 0,
+        yAxisIndex: 0
       },
-    ],
+      {
+        name: '分布占比',
+        type: 'pie',
+        radius: ['50%', '70%'],
+        center: ['76%', '50%'],
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: function(params: any) {
+            return `${params.name}\n${params.percent.toFixed(1)}%`;
+          },
+          color: '#666',
+          fontWeight: 'bold',
+          fontSize: 13,
+          padding: [4, 8],
+          backgroundColor: 'rgba(255, 255, 255, 0.8)',
+          borderRadius: 4,
+        },
+        labelLine: {
+          length: 15,
+          length2: 15,
+          smooth: true
+        },
+        itemStyle: {
+          borderWidth: 2,
+          borderColor: '#fff'
+        },
+        animation: true,
+        animationDuration: 1000,
+        animationDurationUpdate: 500,
+        animationType: 'expansion',
+        animationEasing: 'cubicInOut',
+        animationDelay: function(idx: number) {
+          return idx * 100;
+        },
+        animationDelayUpdate: function(idx: number) {
+          return idx * 100;
+        },
+        emphasis: {
+          scale: true,
+          scaleSize: 10,
+          focus: 'self',
+          blurScope: 'coordinateSystem',
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.2)'
+          }
+        },
+        data: [
+          { value: 52, name: '鸟类', itemStyle: { color: '#409EFF' } },
+          { value: 38, name: '鱼类', itemStyle: { color: '#67C23A' } },
+          { value: 32, name: '两栖类', itemStyle: { color: '#E6A23C' } },
+          { value: 42, name: '植物', itemStyle: { color: '#F56C6C' } },
+          { value: 28, name: '昆虫', itemStyle: { color: '#909399' } }
+        ]
+      }
+    ]
   };
 
   myChart.setOption(option);
+  
+  window.addEventListener('resize', () => {
+    myChart.resize();
+  });
 };
 
 onMounted(() => {
@@ -148,68 +231,26 @@ const handleExportConfirm = () => {
 <template>
   <div class="species-container">
     <!-- 统计卡片 -->
-    <el-row :gutter="20" class="mb-20">
+    <el-row :gutter="20" class="mb-4">
-      <el-col :span="6">
+      <el-col :span="6" v-for="(item, index) in speciesStats" :key="index">
-        <div class="stat-card">
+        <el-card class="stats-card" shadow="hover">
-          <div class="stat-icon">
+          <div class="stats-value">{{ item.value }}</div>
-            <el-icon><Histogram /></el-icon>
+          <div class="stats-label">{{ item.label }}</div>
+          <div class="stats-trend" :class="item.trend > 0 ? 'up' : 'down'">
+            {{ Math.abs(item.trend) }}%
+            <el-icon>
+              <component :is="item.trend > 0 ? 'ArrowUp' : 'ArrowDown'" />
+            </el-icon>
           </div>
-          <div class="stat-info">
-            <div class="label">总物种数</div>
-            <div class="value">128</div>
-            <div class="trend up">
-              <el-icon><ArrowUp /></el-icon>
-              较上月增长 8%
-            </div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="6">
-        <div class="stat-card">
-          <div class="stat-icon warning">
-            <el-icon><Timer /></el-icon>
-          </div>
-          <div class="stat-info">
-            <div class="label">本月新增</div>
-            <div class="value">12</div>
-            <div class="trend">较上月 +3</div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="6">
-        <div class="stat-card">
-          <div class="stat-icon success">
-            <el-icon><Location /></el-icon>
-          </div>
-          <div class="stat-info">
-            <div class="label">监测点位</div>
-            <div class="value">24</div>
-            <div class="trend">覆盖率 95%</div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="6">
-        <div class="stat-card">
-          <div class="stat-icon info">
-            <el-icon><Camera /></el-icon>
-          </div>
-          <div class="stat-info">
-            <div class="label">今日识别</div>
-            <div class="value">386</div>
-            <div class="trend">准确率 98%</div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <el-card>
-          <div id="speciesChart" style="height: 400px"></div>
         </el-card>
       </el-col>
     </el-row>
 
+    <!-- 图表区域 -->
+    <el-card class="chart-card" shadow="hover">
+      <div id="speciesChart" style="height: 400px;"></div>
+    </el-card>
+
     <el-row :gutter="20" class="mt-20">
       <el-col :span="24">
         <el-card>
@@ -268,6 +309,50 @@ const handleExportConfirm = () => {
 @import "../../../styles/variables.scss";
 
 .species-container {
+  padding: 20px;
+
+  .stats-card {
+    text-align: center;
+    padding: 20px;
+
+    .stats-value {
+      font-size: 24px;
+      font-weight: 600;
+      color: #303133;
+      margin-bottom: 8px;
+    }
+
+    .stats-label {
+      font-size: 14px;
+      color: #909399;
+      margin-bottom: 12px;
+    }
+
+    .stats-trend {
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+
+      &.up {
+        color: #67C23A;
+      }
+
+      &.down {
+        color: #F56C6C;
+      }
+    }
+  }
+
+  .chart-card {
+    margin-top: 20px;
+  }
+
+  .mb-4 {
+    margin-bottom: 16px;
+  }
+
   .el-card {
     background: #ffffff;
     border: none;
@@ -305,138 +390,56 @@ const handleExportConfirm = () => {
     }
   }
 
-  .mb-20 {
+  .card-header {
-    margin-bottom: 20px;
-  }
-
-  .stat-card {
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: 16px;
-    transition: all 0.3s;
-    cursor: pointer;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
 
-    &:hover {
+    span {
-      transform: translateY(-2px);
+      font-size: 16px;
-      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
+      font-weight: 500;
-    }
+      color: $text-primary;
+      position: relative;
+      padding-left: 12px;
 
-    .stat-icon {
+      &::before {
-      width: 48px;
+        content: "";
-      height: 48px;
+        position: absolute;
-      border-radius: 8px;
+        left: 0;
-      background: rgba(64, 158, 255, 0.1);
+        top: 50%;
-      color: $primary-color;
+        transform: translateY(-50%);
-      display: flex;
+        width: 4px;
-      align-items: center;
+        height: 16px;
-      justify-content: center;
+        background: $primary-color;
-      font-size: 24px;
+        border-radius: 2px;
-
-      &.warning {
-        background: rgba(230, 162, 60, 0.1);
-        color: $warning-color;
-      }
-
-      &.success {
-        background: rgba(103, 194, 58, 0.1);
-        color: $success-color;
-      }
-
-      &.info {
-        background: rgba(144, 147, 153, 0.1);
-        color: $info-color;
-      }
-    }
-
-    .stat-info {
-      flex: 1;
-
-      .label {
-        color: $text-secondary;
-        font-size: 14px;
-        margin-bottom: 4px;
-      }
-
-      .value {
-        font-size: 24px;
-        font-weight: 600;
-        color: $text-primary;
-        line-height: 1.2;
-        margin-bottom: 4px;
-      }
-
-      .trend {
-        font-size: 13px;
-        color: $text-secondary;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-
-        &.up {
-          color: $success-color;
-        }
-
-        .el-icon {
-          font-size: 12px;
-        }
       }
     }
   }
-}
 
-.card-header {
+  .mt-20 {
-  display: flex;
+    margin-top: 20px;
-  justify-content: space-between;
+  }
-  align-items: center;
 
-  span {
+  :deep(.el-table) {
-    font-size: 16px;
+    th.el-table__cell {
-    font-weight: 500;
+      background-color: #fafafa;
-    color: $text-primary;
+      color: $text-primary;
-    position: relative;
+      font-weight: 500;
-    padding-left: 12px;
+    }
 
-    &::before {
+    .el-table__cell {
-      content: "";
+      padding: 12px 0;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 4px;
-      height: 16px;
-      background: $primary-color;
-      border-radius: 2px;
     }
   }
-}
 
-.mt-20 {
+  .dialog-footer {
-  margin-top: 20px;
+    .el-button {
-}
+      margin-left: 12px;
-
+    }
-:deep(.el-table) {
-  th.el-table__cell {
-    background-color: #fafafa;
-    color: $text-primary;
-    font-weight: 500;
   }
 
-  .el-table__cell {
+  .el-card__body {
-    padding: 12px 0;
+    padding: 20px;
   }
 }
-
-.dialog-footer {
-  .el-button {
-    margin-left: 12px;
-  }
-}
-
-.el-card__body {
-  padding: 20px;
-}
 </style>

src/views/report/about/index.vue

@@ -0,0 +1,418 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  Monitor,
+  DataAnalysis,
+  Location,
+  Document,
+  Aim,
+  TrendCharts,
+  Connection,
+  Platform,
+  Cpu,
+  Link,
+  Cellphone,
+  Share
+} from "@element-plus/icons-vue";
+
+const projectInfo = ref({
+  title: "智慧湿地管理系统",
+  version: "v2.0.0",
+  description: `智慧湿地管理系统是一个基于现代信息技术的综合性湿地生态监测和管理平台。系统采用"前后端分离+小程序"的技术架构，
+    实现了Web端管理和移动端监测的完整生态系统。通过实时数据采集、可视化展示等手段，为湿地生态保护提供智能化解决方案。`,
+
+  // 核心指标
+  stats: [
+    {
+      title: "物种监测",
+      icon: Monitor,
+      value: "128",
+      unit: "种",
+      change: "+12%",
+      color: "#1890FF",
+      bgColor: "linear-gradient(120deg, #0072FF 0%, #00C6FF 100%)",
+    },
+    {
+      title: "环境监测",
+      icon: DataAnalysis,
+      value: "24/7",
+      unit: "",
+      change: "99.9%",
+      color: "#F5222D",
+      bgColor: "linear-gradient(120deg, #FF416C 0%, #FF4B2B 100%)",
+    },
+    {
+      title: "巡护覆盖",
+      icon: Location,
+      value: "100%",
+      unit: "",
+      change: "+15%",
+      color: "#064E3B",
+      bgColor: "linear-gradient(120deg, #4ADE80 0%, #22C55E 100%)",
+      textColor: "#FFFFFF"
+    },
+    {
+      title: "设备在线",
+      icon: Connection,
+      value: "99.9%",
+      unit: "",
+      change: "stable",
+      color: "#EDE9FE",
+      bgColor: "linear-gradient(120deg, #A78BFA 0%, #8B5CF6 100%)",
+      textColor: "#FFFFFF"
+    },
+  ],
+
+  // 系统架构
+  architecture: {
+    frontend: {
+      title: "Web前端",
+      icon: Platform,
+      items: [
+        { name: "Vue 3", desc: "核心框架" },
+        { name: "Element Plus", desc: "组件库" },
+        { name: "TypeScript", desc: "开发语言" },
+        { name: "ECharts", desc: "数据可视化" },
+        { name: "Vite", desc: "构建工具" }
+      ]
+    },
+    backend: {
+      title: "后端服务",
+      icon: Cpu,
+      items: [
+        { name: "Node.js", desc: "运行环境" },
+        { name: "MySQL", desc: "数据存储" },
+        { name: "Redis", desc: "缓存服务" },
+        { name: "RESTful API", desc: "接口规范" },
+        { name: "WebSocket", desc: "实时通信" }
+      ]
+    },
+    miniapp: {
+      title: "小程序端",
+      icon: Cellphone,
+      items: [
+        { name: "微信小程序", desc: "WXML & WXSS" },
+        { name: "Vant Weapp", desc: "UI组件库" },
+        { name: "wx-charts", desc: "图表库" },
+        { name: "WebSocket", desc: "实时通信" }
+      ]
+    },
+    deployment: {
+      title: "开发部署",
+      icon: Share,
+      items: [
+        { name: "Git", desc: "版本控制" },
+        { name: "Docker", desc: "容器化部署" },
+        { name: "Nginx", desc: "Web服务器" },
+        { name: "PM2", desc: "进程管理" }
+      ]
+    }
+  },
+
+  // 应用场景
+  scenarios: [
+    {
+      title: "Web管理端",
+      icon: Monitor,
+      desc: "提供完整的湿地生态系统管理功能",
+      features: ["数据看板", "环境监测", "物种管理", "系统配置"]
+    },
+    {
+      title: "环境监测",
+      icon: DataAnalysis,
+      desc: "实时采集和分析环境数据",
+      features: ["水质监测", "空气监测", "土壤监测", "气象监测"]
+    },
+    {
+      title: "小程序端",
+      icon: Cellphone,
+      desc: "面向公众的湿地生态互动平台",
+      features: [
+        "实时数据查看",
+        "生态科普",
+        "环保打卡",
+        "在线咨询",
+        "消息通知"
+      ]
+    },
+    {
+      title: "巡护管理",
+      icon: Location,
+      desc: "智能化的巡护任务管理系统",
+      features: ["任务分配", "轨迹记录", "实时通讯", "数据采集"]
+    }
+  ]
+});
+</script>
+
+<template>
+  <div class="about-container">
+    <!-- 头部区域 -->
+    <div
+      class="hero-section"
+      :style="{ background: 'linear-gradient(135deg, #1890FF 0%, #36BFFA 100%)' }"
+    >
+      <div class="content">
+        <h1>
+          {{ projectInfo.title }} <span class="version">{{ projectInfo.version }}</span>
+        </h1>
+        <p class="description">{{ projectInfo.description }}</p>
+      </div>
+    </div>
+
+    <!-- 系统架构 -->
+    <div class="architecture-section">
+      <h2>系统架构</h2>
+      <div class="arch-grid">
+        <el-card v-for="(arch, key) in projectInfo.architecture" 
+                :key="key" 
+                class="arch-card" 
+                shadow="hover">
+          <div class="arch-header">
+            <el-icon :size="24" :class="key">
+              <component :is="arch.icon" />
+            </el-icon>
+            <h3>{{ arch.title }}</h3>
+          </div>
+          <ul class="tech-list">
+            <li v-for="item in arch.items" :key="item.name">
+              <span class="tech-name">{{ item.name }}</span>
+              <span class="tech-desc">{{ item.desc }}</span>
+            </li>
+          </ul>
+        </el-card>
+      </div>
+    </div>
+
+    <!-- 应用场景 -->
+    <div class="scenarios-section">
+      <h2>应用场景</h2>
+      <div class="scenario-grid">
+        <el-card v-for="scenario in projectInfo.scenarios" 
+                :key="scenario.title" 
+                class="scenario-card" 
+                shadow="hover">
+          <div class="scenario-icon">
+            <el-icon :size="32">
+              <component :is="scenario.icon" />
+            </el-icon>
+          </div>
+          <h3>{{ scenario.title }}</h3>
+          <p>{{ scenario.desc }}</p>
+          <div class="feature-tags">
+            <el-tag v-for="feature in scenario.features" 
+                   :key="feature" 
+                   size="small">
+              {{ feature }}
+            </el-tag>
+          </div>
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.about-container {
+  .hero-section {
+    padding: 40px;
+    margin: -20px -20px 20px;
+    color: white;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.1) 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    }
+
+    .content {
+      position: relative;
+      z-index: 1;
+      max-width: 800px;
+
+      h1 {
+        font-size: 32px;
+        margin: 0 0 16px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        .version {
+          font-size: 14px;
+          padding: 4px 8px;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 4px;
+        }
+      }
+
+      .description {
+        font-size: 16px;
+        line-height: 1.6;
+        margin: 0;
+        opacity: 0.9;
+      }
+    }
+  }
+
+  .architecture-section {
+    margin-bottom: 60px;
+
+    h2 {
+      font-size: 24px;
+      margin-bottom: 30px;
+      text-align: center;
+      color: #303133;
+    }
+
+    .arch-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 24px;
+    }
+
+    .arch-card {
+      .arch-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 20px;
+
+        .el-icon {
+          padding: 12px;
+          border-radius: 8px;
+          
+          &.frontend {
+            background: rgba(24, 144, 255, 0.1);
+            color: #1890FF;
+          }
+          
+          &.backend {
+            background: rgba(82, 196, 26, 0.1);
+            color: #52C41A;
+          }
+          
+          &.miniapp {
+            background: rgba(250, 84, 28, 0.1);
+            color: #FA541C;
+          }
+          
+          &.tools {
+            background: rgba(114, 46, 209, 0.1);
+            color: #722ED1;
+          }
+        }
+
+        h3 {
+          margin: 0;
+          font-size: 18px;
+          color: #303133;
+        }
+      }
+
+      .tech-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px 0;
+          border-bottom: 1px solid #f0f0f0;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .tech-name {
+            font-weight: 500;
+            color: #303133;
+          }
+
+          .tech-desc {
+            font-size: 13px;
+            color: #909399;
+          }
+        }
+      }
+    }
+  }
+
+  .scenarios-section {
+    h2 {
+      font-size: 24px;
+      margin-bottom: 30px;
+      text-align: center;
+      color: #303133;
+    }
+
+    .scenario-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 24px;
+    }
+
+    .scenario-card {
+      text-align: center;
+      padding: 30px;
+
+      .scenario-icon {
+        width: 64px;
+        height: 64px;
+        margin: 0 auto 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 16px;
+        background: rgba(24, 144, 255, 0.1);
+        color: #1890FF;
+      }
+
+      h3 {
+        margin: 0 0 16px;
+        font-size: 18px;
+        color: #303133;
+      }
+
+      p {
+        margin: 0 0 20px;
+        color: #606266;
+        line-height: 1.6;
+      }
+
+      .feature-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        justify-content: center;
+
+        .el-tag {
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+
+  .el-card {
+    border: none;
+    border-radius: 12px;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+</style>