696 lines
15 KiB
Vue
696 lines
15 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import * as echarts from "echarts";
|
|
import { markRaw } from 'vue'
|
|
import {
|
|
Monitor,
|
|
DataAnalysis,
|
|
Location,
|
|
Document,
|
|
Timer,
|
|
Bell
|
|
} from "@element-plus/icons-vue";
|
|
|
|
// 使用 markRaw 包装图标组件
|
|
const icons = {
|
|
Monitor: markRaw(Monitor),
|
|
DataAnalysis: markRaw(DataAnalysis),
|
|
Location: markRaw(Location),
|
|
Document: markRaw(Document),
|
|
Timer: markRaw(Timer),
|
|
Bell: markRaw(Bell)
|
|
};
|
|
|
|
// 统计数据
|
|
const statistics = ref({
|
|
species: {
|
|
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",
|
|
},
|
|
});
|
|
|
|
// 初始化趋势图表
|
|
const initTrendChart = () => {
|
|
const chartDom = document.getElementById("trendChart");
|
|
if (!chartDom) return;
|
|
|
|
const myChart = echarts.init(chartDom);
|
|
const option = {
|
|
title: {
|
|
text: "近7天监测数据趋势",
|
|
textStyle: {
|
|
fontSize: 16,
|
|
fontWeight: 500,
|
|
color: '#303133'
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
borderColor: '#eee',
|
|
padding: [10, 15],
|
|
textStyle: {
|
|
color: '#666'
|
|
}
|
|
},
|
|
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',
|
|
boundaryGap: false,
|
|
data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#DCDFE6'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#909399'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#EBEEF5',
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#909399'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '物种数量',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbolSize: 8,
|
|
lineStyle: {
|
|
width: 3,
|
|
color: '#409EFF'
|
|
},
|
|
itemStyle: {
|
|
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',
|
|
smooth: true,
|
|
symbolSize: 8,
|
|
lineStyle: {
|
|
width: 3,
|
|
color: '#67C23A'
|
|
},
|
|
itemStyle: {
|
|
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();
|
|
});
|
|
};
|
|
|
|
// 初始化分布图表
|
|
const initDistributionChart = () => {
|
|
const chartDom = document.getElementById("distributionChart");
|
|
if (!chartDom) return;
|
|
|
|
const myChart = echarts.init(chartDom);
|
|
const option = {
|
|
title: {
|
|
text: "物种分布统计",
|
|
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: {
|
|
bottom: "0%",
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
textStyle: {
|
|
color: "#666",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "物种分布",
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
center: ["50%", "45%"],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 6,
|
|
borderColor: "#fff",
|
|
borderWidth: 2,
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: "center",
|
|
},
|
|
emphasis: {
|
|
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([
|
|
{
|
|
title: "系统更新",
|
|
desc: "系统版本更新到 v2.0",
|
|
time: "刚刚",
|
|
type: "primary",
|
|
icon: icons.Timer
|
|
},
|
|
{
|
|
icon: icons.Bell,
|
|
type: "warning",
|
|
title: "环境预警",
|
|
desc: "B区水质监测点位出现异常数据",
|
|
time: "30分钟前",
|
|
},
|
|
{
|
|
icon: icons.Document,
|
|
type: "success",
|
|
title: "日报生成",
|
|
desc: "系统自动生成了昨日监测报告",
|
|
time: "1小时前",
|
|
},
|
|
]);
|
|
|
|
const statsCards = ref([
|
|
{
|
|
title: '物种监测',
|
|
icon: icons.Monitor,
|
|
value: '128',
|
|
unit: '种',
|
|
change: { value: '+12', label: '今日新增' },
|
|
color: '#1890FF',
|
|
bgColor: 'linear-gradient(120deg, #0072FF 0%, #00C6FF 100%)',
|
|
features: ['实时监测', '智能识别', '行为分析', '分布追踪']
|
|
},
|
|
{
|
|
title: '环境监测',
|
|
icon: icons.DataAnalysis,
|
|
value: '22',
|
|
unit: '点',
|
|
change: { value: '2', label: '异常' },
|
|
color: '#F5222D',
|
|
bgColor: 'linear-gradient(120deg, #FF416C 0%, #FF4B2B 100%)',
|
|
features: ['水质监测', '空气监测', '土壤监测', '气象监测']
|
|
},
|
|
{
|
|
title: '巡护任务',
|
|
icon: icons.Location,
|
|
value: '8',
|
|
unit: '个',
|
|
change: { value: '66%', label: '完成率' },
|
|
color: '#52C41A',
|
|
bgColor: 'linear-gradient(120deg, #00B09B 0%, #96C93D 100%)',
|
|
features: ['智能派单', '轨迹记录', '实时通讯', '数据采集']
|
|
},
|
|
{
|
|
title: '设备状态',
|
|
icon: icons.Connection,
|
|
value: '32',
|
|
unit: '台',
|
|
change: { value: '88.9%', label: '在线率' },
|
|
color: '#722ED1',
|
|
bgColor: 'linear-gradient(120deg, #7F00FF 0%, #E100FF 100%)',
|
|
features: ['状态监控', '故障预警', '维护管理', '性能分析']
|
|
}
|
|
]);
|
|
|
|
onMounted(() => {
|
|
initTrendChart();
|
|
initDistributionChart();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dashboard-container">
|
|
<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>
|
|
<div class="card-body">
|
|
<div class="main-value">
|
|
{{ card.value }}
|
|
<span class="unit">{{ card.unit }}</span>
|
|
</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>
|
|
<div class="card-footer">
|
|
<div v-for="feature in card.features"
|
|
:key="feature"
|
|
class="feature-item">
|
|
{{ feature }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表区域 -->
|
|
<el-row :gutter="20" class="mb-20">
|
|
<el-col :span="16">
|
|
<el-card class="chart-card" shadow="hover">
|
|
<div id="trendChart" style="height: 400px"></div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="chart-card" shadow="hover">
|
|
<div id="distributionChart" style="height: 400px"></div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 动态信息区域 -->
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-card class="activity-card" shadow="hover">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>动态信息</span>
|
|
</div>
|
|
</template>
|
|
<div class="activity-list">
|
|
<div
|
|
v-for="(item, index) in activities"
|
|
:key="index"
|
|
class="activity-item"
|
|
:class="{ 'with-border': index !== activities.length - 1 }"
|
|
>
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "../../styles/variables" as v;
|
|
|
|
.dashboard-container {
|
|
padding-bottom: 24px;
|
|
|
|
.welcome-section {
|
|
margin-bottom: 24px;
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
color: v.$text-primary;
|
|
}
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
|
|
.stats-card {
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-body {
|
|
margin-bottom: 16px;
|
|
|
|
.main-value {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
margin-bottom: 8px;
|
|
|
|
.unit {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
margin-left: 4px;
|
|
color: #909399;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 v.$primary-color;
|
|
}
|
|
|
|
:deep(.el-timeline-item__tail) {
|
|
border-left: 2px solid #e4e7ed;
|
|
}
|
|
}
|
|
|
|
.mb-20 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: v.$text-primary;
|
|
position: relative;
|
|
padding-left: 12px;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 4px;
|
|
height: 16px;
|
|
background: v.$primary-color;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.activity-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);
|
|
}
|
|
}
|
|
|
|
.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: v.$primary-color;
|
|
}
|
|
|
|
&.warning {
|
|
background: rgba(230, 162, 60, 0.1);
|
|
color: v.$warning-color;
|
|
}
|
|
|
|
&.success {
|
|
background: rgba(103, 194, 58, 0.1);
|
|
color: v.$success-color;
|
|
}
|
|
|
|
.el-icon {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.activity-content {
|
|
flex: 1;
|
|
|
|
.activity-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: v.$text-primary;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.activity-desc {
|
|
font-size: 13px;
|
|
color: v.$text-secondary;
|
|
}
|
|
}
|
|
|
|
.activity-time {
|
|
font-size: 12px;
|
|
color: v.$text-secondary;
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|