mitsuhaV/WetlandGuard-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复了侧边栏图标出错并优化了控制台

Browse Source
This commit is contained in:
Xiaoyu 2025-02-05 22:57:28 +08:00
parent 31a5a78224
commit fcb6b77413
2 changed files with 404 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/layout/AdminLayout.vue
View File

@ -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>

572
src/views/dashboard/index.vue
View File

@ -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>