From fcb6b77413d5ba225f216b638f1f417bf8658b87 Mon Sep 17 00:00:00 2001
From: Xiaoyu <3306310490@qq.com>
Date: Wed, 5 Feb 2025 22:57:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E5=9B=BE=E6=A0=87=E5=87=BA=E9=94=99=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E4=BA=86=E6=8E=A7=E5=88=B6=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/AdminLayout.vue    |   6 +-
 src/views/dashboard/index.vue | 572 ++++++++++++++++++++++++----------
 2 files changed, 404 insertions(+), 174 deletions(-)

diff --git a/src/layout/AdminLayout.vue b/src/layout/AdminLayout.vue
index 85dab18..9d32c8e 100644
--- a/src/layout/AdminLayout.vue
+++ b/src/layout/AdminLayout.vue
@@ -6,7 +6,7 @@ import {
   Location,
   Setting,
   User,
-  Monitor,
+  DataAnalysis,
   Tools,
   Document,
   DataLine,
@@ -43,7 +43,7 @@ const handleSelect = (key: string) => {
         @select="handleSelect"
       >
         <el-menu-item index="/dashboard">
-          <el-icon><Monitor /></el-icon>
+          <el-icon><DataAnalysis /></el-icon>
           <template #title>控制台</template>
         </el-menu-item>
 
@@ -67,7 +67,7 @@ const handleSelect = (key: string) => {
 
         <el-sub-menu index="monitor">
           <template #title>
-            <el-icon><Tools /></el-icon>
+            <el-icon><DataAnalysis /></el-icon>
             <span>监测管理</span>
           </template>
           <el-menu-item index="/monitor/species">物种监测</el-menu-item>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index a0f6f2b..d8435a5 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
-
-const welcomeText = ref("欢迎使用智慧湿地管理平台");
+import { Timer, Bell, Document } from "@element-plus/icons-vue";
 
 // 统计数据
 const statistics = ref({
@@ -10,21 +9,29 @@ const statistics = ref({
     total: 128,
     today: 12,
     trend: "+8%",
+    type: "success",
+    icon: "Histogram",
   },
   environment: {
     normal: 22,
     abnormal: 2,
     trend: "normal",
+    type: "warning",
+    icon: "Monitor",
   },
   patrol: {
     total: 12,
     completed: 8,
     progress: "66%",
+    type: "primary",
+    icon: "Location",
   },
   devices: {
     total: 36,
     online: 32,
     rate: "88.9%",
+    type: "info",
+    icon: "Connection",
   },
 });
 
@@ -37,34 +44,47 @@ const initTrendChart = () => {
   const option = {
     title: {
       text: "近7天监测数据趋势",
-      left: "center",
-      top: 0,
       textStyle: {
         fontSize: 16,
         fontWeight: 500,
+        color: "#2c3e50",
       },
     },
     tooltip: {
       trigger: "axis",
+      backgroundColor: "rgba(255,255,255,0.9)",
+      borderColor: "#eee",
+      textStyle: {
+        color: "#666",
+      },
     },
     legend: {
-      data: ["物种数量", "水质指数"],
-      top: 25,
-    },
-    grid: {
-      top: 70,
-      left: "3%",
-      right: "4%",
-      bottom: "3%",
-      containLabel: true,
+      textStyle: {
+        color: "#666",
+      },
     },
     xAxis: {
       type: "category",
-      boundaryGap: false,
-      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+      data: ["3-14", "3-15", "3-16", "3-17", "3-18", "3-19", "3-20"],
+      axisLine: {
+        lineStyle: {
+          color: "#ddd",
+        },
+      },
+      axisLabel: {
+        color: "#666",
+      },
     },
     yAxis: {
       type: "value",
+      splitLine: {
+        lineStyle: {
+          color: "#eee",
+        },
+      },
+      axisLabel: {
+        color: "#666",
+      },
     },
     series: [
       {
@@ -72,12 +92,32 @@ const initTrendChart = () => {
         type: "line",
         data: [120, 132, 101, 134, 90, 230, 210],
         smooth: true,
+        symbolSize: 8,
+        lineStyle: {
+          width: 3,
+          color: "#409EFF",
+        },
+        itemStyle: {
+          color: "#409EFF",
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
       },
       {
-        name: "水质指数",
+        name: "监测数据",
         type: "line",
         data: [220, 182, 191, 234, 290, 330, 310],
         smooth: true,
+        symbolSize: 8,
+        lineStyle: {
+          width: 3,
+          color: "#67C23A",
+        },
+        itemStyle: {
+          color: "#67C23A",
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
       },
     ],
   };
@@ -94,64 +134,127 @@ const initDistributionChart = () => {
   const option = {
     title: {
       text: "物种分布统计",
-      left: "center",
-      top: 0,
       textStyle: {
         fontSize: 16,
         fontWeight: 500,
+        color: "#2c3e50",
       },
     },
     tooltip: {
       trigger: "item",
+      backgroundColor: "rgba(255,255,255,0.9)",
+      borderColor: "#eee",
+      textStyle: {
+        color: "#666",
+      },
+      formatter: "{b}: {c} ({d}%)",
     },
     legend: {
-      orient: "vertical",
-      left: "left",
-      top: 25,
+      bottom: "0%",
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: {
+        color: "#666",
+        fontSize: 12,
+      },
     },
     series: [
       {
         name: "物种分布",
         type: "pie",
-        radius: "50%",
-        top: 60,
-        data: [
-          { value: 1048, name: "鸟类" },
-          { value: 735, name: "鱼类" },
-          { value: 580, name: "两栖类" },
-          { value: 484, name: "植物" },
-          { value: 300, name: "其他" },
-        ],
+        radius: ["40%", "70%"],
+        center: ["50%", "45%"],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 6,
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+          position: "center",
+        },
         emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: "rgba(0, 0, 0, 0.5)",
+          label: {
+            show: true,
+            fontSize: 20,
+            fontWeight: "bold",
           },
         },
+        labelLine: {
+          show: false,
+        },
+        data: [
+          {
+            value: 38,
+            name: "鸟类",
+            itemStyle: { color: "#409EFF" },
+          },
+          {
+            value: 25,
+            name: "鱼类",
+            itemStyle: { color: "#67C23A" },
+          },
+          {
+            value: 22,
+            name: "两栖类",
+            itemStyle: { color: "#E6A23C" },
+          },
+          {
+            value: 28,
+            name: "植物",
+            itemStyle: { color: "#F56C6C" },
+          },
+          {
+            value: 15,
+            name: "其他",
+            itemStyle: { color: "#909399" },
+          },
+        ],
       },
     ],
   };
 
   myChart.setOption(option);
+
+  // 添加鼠标悬停效果
+  myChart.on("mouseover", { seriesIndex: 0 }, function (params) {
+    myChart.dispatchAction({
+      type: "highlight",
+      dataIndex: params.dataIndex,
+    });
+  });
+
+  myChart.on("mouseout", { seriesIndex: 0 }, function (params) {
+    myChart.dispatchAction({
+      type: "downplay",
+      dataIndex: params.dataIndex,
+    });
+  });
 };
 
 // 最新动态
 const activities = ref([
   {
-    content: "发现新增鸟类物种：东方白鹳",
-    timestamp: "2024-03-20 10:30",
-    type: "success",
+    icon: Timer,
+    type: "primary",
+    title: "巡护任务完成",
+    desc: "张三完成了A区湿地的巡护任务",
+    time: "10分钟前",
   },
   {
-    content: "B区水质监测点发现异常",
-    timestamp: "2024-03-20 09:15",
+    icon: Bell,
     type: "warning",
+    title: "环境预警",
+    desc: "B区水质监测点位出现异常数据",
+    time: "30分钟前",
   },
   {
-    content: "完成今日巡护任务",
-    timestamp: "2024-03-20 08:00",
+    icon: Document,
     type: "success",
+    title: "日报生成",
+    desc: "系统自动生成了昨日监测报告",
+    time: "1小时前",
   },
 ]);
 
@@ -163,114 +266,103 @@ onMounted(() => {
 
 <template>
   <div class="dashboard-container">
-    <div class="welcome-section">
-      <h2>{{ welcomeText }}</h2>
-    </div>
-
     <!-- 统计卡片 -->
-    <el-row :gutter="20" class="mt-20">
-      <el-col :span="8">
-        <el-card
-          class="statistics-card"
-          shadow="hover"
-          @click="handleCardClick('/monitor/species')"
-        >
-          <template #header>
-            <div class="statistics-header">
-              <span>物种监测</span>
-              <el-tag size="small" type="success">{{ statistics.species.trend }}</el-tag>
-            </div>
-          </template>
-          <div class="statistics-content">
-            <div class="main-number">{{ statistics.species.total }}</div>
-            <div class="sub-info">
-              <span>今日新增</span>
-              <span class="highlight">{{ statistics.species.today }}</span>
+    <el-row :gutter="20" class="mb-20">
+      <el-col :span="6">
+        <div class="stat-card">
+          <div class="stat-icon">
+            <el-icon><Histogram /></el-icon>
+          </div>
+          <div class="stat-info">
+            <div class="label">物种监测</div>
+            <div class="value">{{ statistics.species.total }}</div>
+            <div class="trend up">
+              <el-icon><ArrowUp /></el-icon>
+              今日新增 {{ statistics.species.today }}
             </div>
           </div>
-        </el-card>
+        </div>
       </el-col>
-
-      <el-col :span="8">
-        <el-card class="statistics-card" shadow="hover">
-          <template #header>
-            <div class="statistics-header">
-              <span>环境监测</span>
-              <el-tag
-                size="small"
-                type="warning"
-                v-if="statistics.environment.abnormal > 0"
-              >
-                {{ statistics.environment.abnormal }}个异常
-              </el-tag>
-            </div>
-          </template>
-          <div class="statistics-content">
-            <div class="main-number">{{ statistics.environment.normal }}</div>
-            <div class="sub-info">
-              <span>监测点位</span>
-              <span class="highlight">正常</span>
-            </div>
+      <el-col :span="6">
+        <div class="stat-card">
+          <div class="stat-icon warning">
+            <el-icon><Monitor /></el-icon>
           </div>
-        </el-card>
+          <div class="stat-info">
+            <div class="label">环境监测</div>
+            <div class="value">{{ statistics.environment.normal }}</div>
+            <div class="trend">异常 {{ statistics.environment.abnormal }}</div>
+          </div>
+        </div>
       </el-col>
-
-      <el-col :span="8">
-        <el-card
-          class="statistics-card"
-          shadow="hover"
-          @click="handleCardClick('/patrol/tasks')"
-        >
-          <template #header>
-            <div class="statistics-header">
-              <span>巡护任务</span>
-              <el-tag size="small" type="info">{{ statistics.patrol.progress }}</el-tag>
-            </div>
-          </template>
-          <div class="statistics-content">
-            <div class="main-number">{{ statistics.patrol.completed }}</div>
-            <div class="sub-info">
-              <span>已完成</span>
-              <span class="highlight">共{{ statistics.patrol.total }}个</span>
-            </div>
+      <el-col :span="6">
+        <div class="stat-card">
+          <div class="stat-icon success">
+            <el-icon><Location /></el-icon>
           </div>
-        </el-card>
+          <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>
+      <el-col :span="6">
+        <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="mt-20">
+    <el-row :gutter="20" class="mb-20">
       <el-col :span="16">
-        <el-card>
-          <div id="trendChart" style="height: 400px; padding-top: 10px"></div>
+        <el-card class="chart-card" shadow="hover">
+          <div id="trendChart" style="height: 400px"></div>
         </el-card>
       </el-col>
       <el-col :span="8">
-        <el-card>
-          <div id="distributionChart" style="height: 400px; padding-top: 10px"></div>
+        <el-card class="chart-card" shadow="hover">
+          <div id="distributionChart" style="height: 400px"></div>
         </el-card>
       </el-col>
     </el-row>
 
-    <!-- 最新动态 -->
-    <el-row :gutter="20" class="mt-20">
+    <!-- 动态信息区域 -->
+    <el-row>
       <el-col :span="24">
-        <el-card>
+        <el-card class="activity-card" shadow="hover">
           <template #header>
             <div class="card-header">
-              <span>最新动态</span>
+              <span>动态信息</span>
             </div>
           </template>
-          <el-timeline>
-            <el-timeline-item
-              v-for="(activity, index) in activities"
+          <div class="activity-list">
+            <div
+              v-for="(item, index) in activities"
               :key="index"
-              :type="activity.type"
-              :timestamp="activity.timestamp"
+              class="activity-item"
+              :class="{ 'with-border': index !== activities.length - 1 }"
             >
-              {{ activity.content }}
-            </el-timeline-item>
-          </el-timeline>
+              <div class="activity-icon" :class="item.type">
+                <el-icon>
+                  <component :is="item.icon" />
+                </el-icon>
+              </div>
+              <div class="activity-content">
+                <div class="activity-title">{{ item.title }}</div>
+                <div class="activity-desc">{{ item.desc }}</div>
+              </div>
+              <div class="activity-time">{{ item.time }}</div>
+            </div>
+          </div>
         </el-card>
       </el-col>
     </el-row>
@@ -281,92 +373,230 @@ onMounted(() => {
 @import "../../styles/variables.scss";
 
 .dashboard-container {
-  .welcome-card {
-    background: linear-gradient(
-      135deg,
-      $primary-color 0%,
-      lighten($primary-color, 20%) 100%
-    );
-    padding: 24px;
-    border-radius: 8px;
-    color: white;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  padding-bottom: 24px;
+
+  .welcome-section {
+    margin-bottom: 24px;
 
     h2 {
       margin: 0;
       font-size: 24px;
       font-weight: 500;
-    }
-
-    .welcome-subtitle {
-      margin: 8px 0 0;
-      opacity: 0.8;
+      color: $text-primary;
     }
   }
 
-  .statistics-card {
-    transition: transform 0.3s;
+  .stat-card {
+    background: #fff;
+    border-radius: 8px;
+    padding: 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 {
-      transform: translateY(-5px);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
     }
 
-    .statistics-header {
+    .stat-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 8px;
+      background: rgba(64, 158, 255, 0.1);
+      color: $primary-color;
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: center;
+      font-size: 24px;
 
-      span {
-        font-size: 16px;
-        font-weight: 500;
-        color: $text-primary;
+      &.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;
       }
     }
 
-    .statistics-content {
-      padding: 20px 0;
+    .stat-info {
+      flex: 1;
 
-      .main-number {
-        font-size: 36px;
+      .label {
+        color: $text-secondary;
+        font-size: 14px;
+        margin-bottom: 4px;
+      }
+
+      .value {
+        font-size: 24px;
         font-weight: 600;
         color: $text-primary;
-        line-height: 1;
-        margin-bottom: 16px;
+        line-height: 1.2;
+        margin-bottom: 4px;
       }
 
-      .sub-info {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+      .trend {
+        font-size: 13px;
         color: $text-secondary;
+        display: flex;
+        align-items: center;
+        gap: 4px;
 
-        .highlight {
-          color: $primary-color;
-          font-weight: 500;
+        &.up {
+          color: $success-color;
+        }
+
+        .el-icon {
+          font-size: 12px;
         }
       }
     }
   }
 
-  .mt-20 {
-    margin-top: 20px;
+  .chart-card {
+    border: none;
+    border-radius: 8px;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  .alert-card {
+    border: none;
+    border-radius: 8px;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
+    }
+
+    :deep(.el-timeline-item__node) {
+      background-color: transparent;
+      border: 2px solid $primary-color;
+    }
+
+    :deep(.el-timeline-item__tail) {
+      border-left: 2px solid #e4e7ed;
+    }
+  }
+
+  .mb-20 {
+    margin-bottom: 20px;
   }
 
   .card-header {
-    font-size: 16px;
-    font-weight: 500;
-    color: $text-primary;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    span {
+      font-size: 16px;
+      font-weight: 500;
+      color: $text-primary;
+      position: relative;
+      padding-left: 12px;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 16px;
+        background: $primary-color;
+        border-radius: 2px;
+      }
+    }
   }
 
-  :deep(.el-timeline-item__content) {
-    color: $text-regular;
-  }
-
-  :deep(.el-card) {
+  .activity-card {
     border: none;
     border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  .activity-list {
+    .activity-item {
+      display: flex;
+      align-items: flex-start;
+      padding: 16px 0;
+
+      &.with-border {
+        border-bottom: 1px solid #f0f2f5;
+      }
+
+      .activity-icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16px;
+
+        &.primary {
+          background: rgba(64, 158, 255, 0.1);
+          color: $primary-color;
+        }
+
+        &.warning {
+          background: rgba(230, 162, 60, 0.1);
+          color: $warning-color;
+        }
+
+        &.success {
+          background: rgba(103, 194, 58, 0.1);
+          color: $success-color;
+        }
+
+        .el-icon {
+          font-size: 16px;
+        }
+      }
+
+      .activity-content {
+        flex: 1;
+
+        .activity-title {
+          font-size: 14px;
+          font-weight: 500;
+          color: $text-primary;
+          margin-bottom: 4px;
+        }
+
+        .activity-desc {
+          font-size: 13px;
+          color: $text-secondary;
+        }
+      }
+
+      .activity-time {
+        font-size: 12px;
+        color: $text-secondary;
+        margin-left: 16px;
+      }
+    }
   }
 }
 </style>