851 lines
20 KiB
Vue
851 lines
20 KiB
Vue
<script setup>
|
|
import { ref, onMounted, onUnmounted } from "vue";
|
|
import * as echarts from "echarts";
|
|
import { markRaw } from "vue";
|
|
import {
|
|
Monitor,
|
|
DataAnalysis,
|
|
Location,
|
|
Document,
|
|
Warning,
|
|
} from "@element-plus/icons-vue";
|
|
import { getSpeciesStatistics, getPatrolStatistics, getDeviceList } from "@/api/dashboard";
|
|
|
|
// 使用 markRaw 包装图标组件
|
|
const icons = {
|
|
Monitor: markRaw(Monitor),
|
|
DataAnalysis: markRaw(DataAnalysis),
|
|
Location: markRaw(Location),
|
|
Document: markRaw(Document),
|
|
Warning: markRaw(Warning),
|
|
};
|
|
|
|
// 物种类别选项
|
|
const categoryOptions = [
|
|
{ label: "鸟类", value: "bird" },
|
|
{ label: "哺乳类", value: "mammal" },
|
|
{ label: "鱼类", value: "fish" },
|
|
{ label: "两栖类", value: "amphibian" },
|
|
{ label: "爬行类", value: "reptile" },
|
|
{ label: "昆虫类", value: "insect" },
|
|
{ label: "植物", value: "plant" },
|
|
];
|
|
|
|
// 保护等级选项
|
|
const protectionLevelOptions = [
|
|
{ label: "国家一级", value: "national_first" },
|
|
{ label: "国家二级", value: "national_second" },
|
|
{ label: "省级", value: "provincial" },
|
|
{ label: "普通", value: "normal" },
|
|
];
|
|
|
|
// 图表实例
|
|
const categoryChartRef = ref(null);
|
|
let categoryChart = null;
|
|
const protectionChartRef = ref(null);
|
|
let protectionChart = null;
|
|
const trendChartRef = ref(null);
|
|
|
|
// 统计卡片数据
|
|
const statsCards = ref([
|
|
{
|
|
title: "物种监测",
|
|
icon: icons.Monitor,
|
|
value: "0",
|
|
unit: "种",
|
|
change: { value: "0", label: "今日新增" },
|
|
color: "#1890FF",
|
|
bgColor: "linear-gradient(120deg, #0072FF 0%, #00C6FF 100%)",
|
|
features: ["实时监测", "智能识别", "行为分析", "分布追踪"],
|
|
},
|
|
{
|
|
title: "环境监测",
|
|
icon: icons.DataAnalysis,
|
|
value: "2",
|
|
unit: "点",
|
|
change: { value: "2", label: "异常" },
|
|
color: "#F5222D",
|
|
bgColor: "linear-gradient(120deg, #FF416C 0%, #FF4B2B 100%)",
|
|
features: ["水质监测", "空气监测", "土壤监测", "气象监测"],
|
|
},
|
|
{
|
|
title: "巡护任务",
|
|
icon: icons.Location,
|
|
value: "0",
|
|
unit: "个",
|
|
change: { value: "0%", label: "完成率" },
|
|
color: "#52C41A",
|
|
bgColor: "linear-gradient(120deg, #00B09B 0%, #96C93D 100%)",
|
|
features: ["智能派单", "轨迹记录", "实时通讯", "数据采集"],
|
|
},
|
|
{
|
|
title: "设备状态",
|
|
icon: icons.Monitor,
|
|
value: "0",
|
|
unit: "台",
|
|
change: { value: "0%", label: "在线率" },
|
|
color: "#722ED1",
|
|
bgColor: "linear-gradient(120deg, #7F00FF 0%, #E100FF 100%)",
|
|
features: ["状态监控", "故障预警", "维护管理", "性能分析"],
|
|
},
|
|
]);
|
|
|
|
// 设备状态统计数据
|
|
const deviceData = ref({
|
|
total: 0,
|
|
online: 0,
|
|
});
|
|
|
|
// 初始化物种类别图表
|
|
const initCategoryChart = () => {
|
|
if (!categoryChartRef.value) return;
|
|
|
|
categoryChart = echarts.init(categoryChartRef.value);
|
|
const option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}: {c}种 ({d}%)",
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
left: "left",
|
|
top: "middle",
|
|
textStyle: {
|
|
color: "#303133",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "物种数量",
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
center: ["60%", "50%"],
|
|
avoidLabelOverlap: true,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: "#fff",
|
|
borderWidth: 2,
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter: "{b}: {c}种",
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 14,
|
|
fontWeight: "bold",
|
|
},
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
},
|
|
},
|
|
data: [],
|
|
},
|
|
],
|
|
};
|
|
|
|
categoryChart.setOption(option);
|
|
};
|
|
|
|
// 更新图表数据
|
|
const updateCategoryChart = (data) => {
|
|
if (!categoryChart) return;
|
|
|
|
// 物种类别图表数据
|
|
const categoryData = Object.entries(data.categories)
|
|
.filter(([_, count]) => count.total_count > 0)
|
|
.map(([category, count]) => ({
|
|
name: categoryOptions.find((item) => item.value === category)?.label || category,
|
|
value: parseInt(count.total_count),
|
|
}))
|
|
.sort((a, b) => b.value - a.value);
|
|
|
|
categoryChart.setOption({
|
|
series: [
|
|
{
|
|
data: categoryData,
|
|
},
|
|
],
|
|
});
|
|
};
|
|
|
|
// 获取物种统计数据
|
|
const fetchSpeciesData = async () => {
|
|
try {
|
|
const res = await getSpeciesStatistics();
|
|
if (res.success && res.data) {
|
|
// 计算总物种数和今日新增数
|
|
const totalSpecies = Object.values(res.data.categories).reduce(
|
|
(sum, category) => sum + (parseInt(category.total_count) || 0),
|
|
0
|
|
);
|
|
const todayNew = Object.values(res.data.categories).reduce(
|
|
(sum, category) => sum + (parseInt(category.today_count) || 0),
|
|
0
|
|
);
|
|
|
|
// 更新物种监测卡片
|
|
statsCards.value[0].value = String(totalSpecies || 0);
|
|
statsCards.value[0].change.value = `+${todayNew || 0}`;
|
|
|
|
// 更新物种分布图表
|
|
updateCategoryChart(res.data);
|
|
}
|
|
} catch (error) {
|
|
console.error("获取物种统计数据失败:", error);
|
|
}
|
|
};
|
|
|
|
// 获取巡护任务统计数据
|
|
const fetchPatrolData = async () => {
|
|
try {
|
|
const res = await getPatrolStatistics();
|
|
if (res.success && res.data) {
|
|
const { overview } = res.data;
|
|
const progress = ((overview.completed_count / overview.total_count) * 100).toFixed(1);
|
|
|
|
// 更新巡护任务卡片
|
|
statsCards.value[2].value = String(overview.total_count);
|
|
statsCards.value[2].change.value = `${progress}%`;
|
|
}
|
|
} catch (error) {
|
|
console.error("获取巡护任务统计数据失败:", error);
|
|
}
|
|
};
|
|
|
|
// 获取设备列表数据
|
|
const fetchDeviceData = async () => {
|
|
try {
|
|
const res = await getDeviceList();
|
|
if (res.success && res.data?.list) {
|
|
const deviceList = res.data.list;
|
|
deviceData.value = {
|
|
total: deviceList.length,
|
|
online: deviceList.filter((device) => device.status?.code === 1).length,
|
|
};
|
|
|
|
// 更新设备状态卡片
|
|
statsCards.value[3].value = String(deviceData.value.total);
|
|
statsCards.value[3].change.value = `${(
|
|
(deviceData.value.online / deviceData.value.total) *
|
|
100
|
|
).toFixed(1)}%`;
|
|
// 更新设备状态特性
|
|
statsCards.value[3].features = [
|
|
`在线: ${deviceData.value.online}台`,
|
|
`离线: ${deviceData.value.total - deviceData.value.online}台`,
|
|
"故障预警",
|
|
"性能分析",
|
|
];
|
|
}
|
|
} catch (error) {
|
|
console.error("获取设备列表数据失败:", error);
|
|
}
|
|
};
|
|
|
|
// 初始化保护等级图表
|
|
const initProtectionChart = () => {
|
|
if (!protectionChartRef.value) return;
|
|
|
|
protectionChart = echarts.init(protectionChartRef.value);
|
|
const option = {
|
|
title: {
|
|
textStyle: {
|
|
fontSize: 16,
|
|
fontWeight: 500,
|
|
color: "#303133",
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
formatter: "{b}: {c}种",
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "10%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: [],
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 30,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
name: "物种数量",
|
|
minInterval: 1,
|
|
},
|
|
series: [
|
|
{
|
|
name: "物种数量",
|
|
type: "bar",
|
|
barWidth: "40%",
|
|
data: [],
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
formatter: "{c}种",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
protectionChart.setOption(option);
|
|
};
|
|
|
|
// 更新保护等级图表数据
|
|
const updateProtectionChart = (data) => {
|
|
if (!protectionChart) return;
|
|
|
|
// 保护等级图表数据
|
|
const protectionData = Object.entries(data.protection_levels)
|
|
.filter(([_, count]) => count > 0)
|
|
.map(([level, count]) => ({
|
|
name: protectionLevelOptions.find((item) => item.value === level)?.label || level,
|
|
value: count,
|
|
}))
|
|
.sort((a, b) => b.value - a.value);
|
|
|
|
protectionChart.setOption({
|
|
xAxis: {
|
|
data: protectionData.map((item) => item.name),
|
|
},
|
|
series: [
|
|
{
|
|
data: protectionData.map((item) => ({
|
|
value: item.value,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: "#83bff6" },
|
|
{ offset: 0.5, color: "#409EFF" },
|
|
{ offset: 1, color: "#2c76c5" },
|
|
]),
|
|
},
|
|
})),
|
|
},
|
|
],
|
|
});
|
|
};
|
|
|
|
// 初始化数据
|
|
const initData = async () => {
|
|
try {
|
|
await Promise.all([fetchSpeciesData(), fetchPatrolData(), fetchDeviceData()]);
|
|
} catch (error) {
|
|
console.error("初始化数据失败:", error);
|
|
}
|
|
};
|
|
|
|
// 自动刷新数据
|
|
let timer = null;
|
|
const startAutoRefresh = () => {
|
|
fetchStatisticsData();
|
|
timer = setInterval(fetchStatisticsData, 60000); // 每分钟更新一次
|
|
};
|
|
|
|
// 初始化趋势图表
|
|
const initTrendChart = () => {
|
|
const chartDom = document.getElementById("trendChart");
|
|
if (!chartDom) return;
|
|
|
|
const myChart = echarts.init(chartDom);
|
|
const option = {
|
|
title: {
|
|
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: ["2-14", "2-15", "2-16", "2-17", "2-18", "2-19", "2-20"],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#DCDFE6",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#909399",
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
max: 50,
|
|
interval: 10,
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
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: [10, 12, 15, 13, 18, 15, 20],
|
|
},
|
|
{
|
|
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: [15, 18, 12, 20, 15, 18, 16],
|
|
},
|
|
],
|
|
};
|
|
|
|
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 fetchStatisticsData = async () => {
|
|
try {
|
|
const res = await getSpeciesStatistics();
|
|
if (res.success && res.data) {
|
|
// 更新物种总数卡片
|
|
const totalSpecies = Object.values(res.data.categories).reduce(
|
|
(sum, item) => sum + (parseInt(item.total_count) || 0),
|
|
0
|
|
);
|
|
const newSpecies = Object.values(res.data.categories).reduce(
|
|
(sum, item) => sum + (parseInt(item.today_count) || 0),
|
|
0
|
|
);
|
|
statsCards.value[0].value = String(totalSpecies || 0);
|
|
statsCards.value[0].change.value = `+${newSpecies || 0}`;
|
|
|
|
// 更新物种分布图表
|
|
updateCategoryChart(res.data);
|
|
|
|
// 更新保护等级图表
|
|
updateProtectionChart(res.data);
|
|
}
|
|
} catch (error) {
|
|
console.error("获取统计数据失败：", error);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
initData();
|
|
startAutoRefresh();
|
|
initCategoryChart();
|
|
initProtectionChart();
|
|
initTrendChart();
|
|
initDistributionChart();
|
|
window.addEventListener("resize", () => {
|
|
categoryChart?.resize();
|
|
protectionChart?.resize();
|
|
});
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
}
|
|
if (categoryChart) {
|
|
categoryChart.dispose();
|
|
categoryChart = null;
|
|
}
|
|
if (protectionChart) {
|
|
protectionChart.dispose();
|
|
protectionChart = null;
|
|
}
|
|
window.removeEventListener("resize", () => {
|
|
categoryChart?.resize();
|
|
protectionChart?.resize();
|
|
});
|
|
});
|
|
</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>
|
|
|
|
<!-- 图表区域 -->
|
|
<div class="charts-container">
|
|
<div class="chart-item">
|
|
<div class="chart-title">物种类别统计</div>
|
|
<div ref="categoryChartRef" class="chart-content"></div>
|
|
</div>
|
|
<div class="chart-item">
|
|
<div class="chart-title">趋势统计</div>
|
|
<div id="trendChart" class="chart-content"></div>
|
|
</div>
|
|
<div class="chart-item">
|
|
<div class="chart-title">保护等级统计</div>
|
|
<div ref="protectionChartRef" class="chart-content"></div>
|
|
</div>
|
|
</div>
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.charts-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
|
|
.chart-item {
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
|
|
.chart-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.chart-content {
|
|
height: 400px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|