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

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

Browse Source
This commit is contained in:
Xiaoyu 2025-02-17 15:59:35 +08:00
parent 44fc686a0a
commit fca3cde8bc
7 changed files with 5215 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4197
docs/智慧环境.md Normal file
View File

File diff suppressed because it is too large Load Diff

1
src/layout/AdminLayout.vue
View File

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

5
src/router/index.ts
View File

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

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

@ -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",
backgroundColor: "rgba(255,255,255,0.9)",
borderColor: "#eee",
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.95)',
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",
data: ["3-14", "3-15", "3-16", "3-17", "3-18", "3-19", "3-20"],
type: 'category',
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: "物种数量",
type: "line",
data: [120, 132, 101, 134, 90, 230, 210],
name: '物种数量',
type: 'line',
smooth: true,
symbolSize: 8,
lineStyle: {
width: 3,
color: "#409EFF",
color: '#409EFF'
},
itemStyle: {
color: "#409EFF",
borderColor: "#fff",
borderWidth: 2,
color: '#409EFF',
borderColor: '#fff',
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: "监测数据",
type: "line",
data: [220, 182, 191, 234, 290, 330, 310],
name: '监测数据',
type: 'line',
smooth: true,
symbolSize: 8,
lineStyle: {
width: 3,
color: "#67C23A",
color: '#67C23A'
},
itemStyle: {
color: "#67C23A",
borderColor: "#fff",
borderWidth: 2,
color: '#67C23A',
borderColor: '#fff',
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">
<!-- 统计卡片 -->
<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 class="stats-grid">
<div v-for="card in statsCards"
:key="card.title"
class="stats-card"
:style="{ backgroundColor: card.bgColor }">
<div class="card-header">
<div class="title">
<el-icon :size="20" :color="card.color">
<component :is="card.icon" />
</el-icon>
<span>{{ card.title }}</span>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="stat-card">
<div class="stat-icon warning">
<el-icon><Monitor /></el-icon>
<div class="card-body">
<div class="main-value">
{{ card.value }}
<span class="unit">{{ card.unit }}</span>
</div>
<div class="stat-info">
<div class="label">环境监测</div>
<div class="value">{{ statistics.environment.normal }}</div>
<div class="trend">异常 {{ statistics.environment.abnormal }}</div>
<div class="change-value"
:style="{ color: card.change.value.includes('+') ? '#67C23A' :
card.change.value.includes('%') ? card.color : '#F56C6C' }">
{{ card.change.value }}
<span class="label">{{ card.change.label }}</span>
</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">{{ statistics.patrol.completed }}</div>
<div class="trend">完成率 {{ statistics.patrol.progress }}</div>
<div class="card-footer">
<div v-for="feature in card.features"
:key="feature"
class="feature-item">
{{ feature }}
</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>
</div>
</div>
<!-- 图表区域 -->
<el-row :gutter="20" class="mb-20">
@ -386,79 +458,80 @@ onMounted(() => {
}
}
.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);
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.stat-icon {
width: 48px;
height: 48px;
.stats-card {
padding: 20px;
border-radius: 8px;
background: rgba(64, 158, 255, 0.1);
color: $primary-color;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
transition: all 0.3s ease;
&.warning {
background: rgba(230, 162, 60, 0.1);
color: $warning-color;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
&.success {
background: rgba(103, 194, 58, 0.1);
color: $success-color;
.card-header {
margin-bottom: 16px;
.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 {
background: rgba(144, 147, 153, 0.1);
color: $info-color;
}
}
.card-body {
margin-bottom: 16px;
.stat-info {
flex: 1;
.main-value {
font-size: 32px;
font-weight: 600;
color: #303133;
margin-bottom: 8px;
.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;
.unit {
font-size: 14px;
font-weight: normal;
margin-left: 4px;
color: #909399;
}
}
.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>

202
src/views/monitor/environment/index.vue
View File

@ -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",
backgroundColor: "rgba(255,255,255,0.9)",
borderColor: "#eee",
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.95)',
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",
data: ["00:00", "06:00", "12:00", "18:00", "24:00"],
type: 'category',
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: {
type: "value",
name: "温度(°C)",
nameTextStyle: {
color: "#666",
},
splitLine: {
lineStyle: {
color: "#eee",
yAxis: [
{
type: 'value',
name: '温度/湿度',
nameTextStyle: {
color: '#909399',
padding: [0, 30, 0, 0]
},
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",
data: [22, 20, 25, 28, 23],
name: '温度',
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: '#409EFF'
},
itemStyle: {
color: "#1677ff",
color: '#409EFF'
},
areaStyle: {
color: {
type: "linear",
x: 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,
},
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)' }
])
},
data: [22, 23, 24, 25, 26, 27, 26, 25, 24]
},
],
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "60px",
containLabel: true,
},
{
name: '湿度',
type: 'line',
smooth: true,
lineStyle: {
width: 3,
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();
});
};
// 添加导出相关的数据和方法

461
src/views/monitor/species/index.vue
View File

@ -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",
backgroundColor: "rgba(255,255,255,0.9)",
borderColor: "#eee",
textStyle: {
color: "#666",
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
legend: {
data: ["数量"],
backgroundColor: 'rgba(255, 255, 255, 0.95)',
borderColor: '#eee',
padding: [10, 15],
textStyle: {
color: "#666",
},
color: '#666'
}
},
xAxis: {
type: "category",
data: ["东方白鹳", "黑鹳", "大天鹅", "小天鹅"],
grid: [{
left: '8%',
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: "数量",
type: "bar",
data: [12, 8, 15, 10],
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
],
name: '物种数量',
type: 'bar',
barWidth: '40%',
data: [
{
value: 52,
itemStyle: { color: '#409EFF' }
},
{
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: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "#71a5eb" },
{ offset: 0.7, color: "#1677ff" },
{ offset: 1, color: "#1677ff" },
],
},
},
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.2)'
}
},
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-col :span="6">
<div class="stat-card">
<div class="stat-icon">
<el-icon><Histogram /></el-icon>
<el-row :gutter="20" class="mb-4">
<el-col :span="6" v-for="(item, index) in speciesStats" :key="index">
<el-card class="stats-card" shadow="hover">
<div class="stats-value">{{ item.value }}</div>
<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 {
margin-bottom: 20px;
}
.stat-card {
background: #fff;
border-radius: 8px;
padding: 20px;
.card-header {
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 {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
span {
font-size: 16px;
font-weight: 500;
color: $text-primary;
position: relative;
padding-left: 12px;
.stat-icon {
width: 48px;
height: 48px;
border-radius: 8px;
background: rgba(64, 158, 255, 0.1);
color: $primary-color;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
&.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;
}
&::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 16px;
background: $primary-color;
border-radius: 2px;
}
}
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
.mt-20 {
margin-top: 20px;
}
span {
font-size: 16px;
font-weight: 500;
color: $text-primary;
position: relative;
padding-left: 12px;
:deep(.el-table) {
th.el-table__cell {
background-color: #fafafa;
color: $text-primary;
font-weight: 500;
}
&::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 16px;
background: $primary-color;
border-radius: 2px;
.el-table__cell {
padding: 12px 0;
}
}
}
.mt-20 {
margin-top: 20px;
}
:deep(.el-table) {
th.el-table__cell {
background-color: #fafafa;
color: $text-primary;
font-weight: 500;
.dialog-footer {
.el-button {
margin-left: 12px;
}
}
.el-table__cell {
padding: 12px 0;
.el-card__body {
padding: 20px;
}
}
.dialog-footer {
.el-button {
margin-left: 12px;
}
}
.el-card__body {
padding: 20px;
}
</style>

418
src/views/report/about/index.vue Normal file
View File

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