优化了布局
This commit is contained in:
parent
3678d3ef84
commit
357a6b92ad
@ -8,7 +8,23 @@ import { getDeviceList, deleteDevice } from "@/api/device";
|
||||
const loading = ref(false);
|
||||
|
||||
// 传感器列表数据
|
||||
const sensorList = ref([]);
|
||||
const sensorList = ref([
|
||||
{
|
||||
id: 1,
|
||||
device_name: "RK500-13-水质传感器-01",
|
||||
device_code: "RK500-001",
|
||||
device_type: 0,
|
||||
status: 0,
|
||||
install_location: "湿地区域A",
|
||||
updated_at: new Date().toISOString(),
|
||||
data: {
|
||||
temp: null,
|
||||
ph: null,
|
||||
conductivity: null,
|
||||
turbidity: null,
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
// 分页参数
|
||||
const pagination = ref({
|
||||
@ -18,41 +34,41 @@ const pagination = ref({
|
||||
});
|
||||
|
||||
// 获取传感器列表
|
||||
const getSensorList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getDeviceList({
|
||||
page: pagination.value.page,
|
||||
page_size: pagination.value.page_size,
|
||||
device_type: 0, // 传感器类型为0
|
||||
});
|
||||
if (res.success) {
|
||||
sensorList.value = res.data.list || [];
|
||||
if (res.data.pagination) {
|
||||
pagination.value.total = res.data.pagination.total;
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.message || "获取传感器列表失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取传感器列表失败：", error);
|
||||
ElMessage.error("获取传感器列表失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
// const getSensorList = async () => {
|
||||
// loading.value = true;
|
||||
// try {
|
||||
// const res = await getDeviceList({
|
||||
// page: pagination.value.page,
|
||||
// page_size: pagination.value.page_size,
|
||||
// device_type: 0,
|
||||
// });
|
||||
// if (res.success) {
|
||||
// sensorList.value = res.data.list || [];
|
||||
// if (res.data.pagination) {
|
||||
// pagination.value.total = res.data.pagination.total;
|
||||
// }
|
||||
// } else {
|
||||
// ElMessage.error(res.message || "获取传感器列表失败");
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("获取传感器列表失败：", error);
|
||||
// ElMessage.error("获取传感器列表失败");
|
||||
// } finally {
|
||||
// loading.value = false;
|
||||
// }
|
||||
// };
|
||||
|
||||
// 处理页码改变
|
||||
const handleCurrentChange = (page) => {
|
||||
pagination.value.page = page;
|
||||
getSensorList();
|
||||
// getSensorList();
|
||||
};
|
||||
|
||||
// 处理每页条数改变
|
||||
const handleSizeChange = (size) => {
|
||||
pagination.value.page_size = size;
|
||||
pagination.value.page = 1;
|
||||
getSensorList();
|
||||
// getSensorList();
|
||||
};
|
||||
|
||||
// 删除传感器
|
||||
@ -64,7 +80,7 @@ const handleDelete = async (id) => {
|
||||
const res = await deleteDevice(id);
|
||||
if (res.success) {
|
||||
ElMessage.success("删除成功");
|
||||
getSensorList();
|
||||
// getSensorList();
|
||||
} else {
|
||||
ElMessage.error(res.message || "删除失败");
|
||||
}
|
||||
@ -114,8 +130,17 @@ const getTypeInfo = (type) => {
|
||||
|
||||
// 格式化数据显示
|
||||
const formatValue = (value, unit = "") => {
|
||||
if (value === "---") return value;
|
||||
if (value === null || value === undefined) return "暂无数据";
|
||||
return `${value}${unit}`;
|
||||
// 根据不同单位设置不同的小数位数
|
||||
if (unit === "°C") {
|
||||
return `${value.toFixed(1)}${unit}`;
|
||||
} else if (unit === "%") {
|
||||
return `${value.toFixed(0)}${unit}`;
|
||||
} else if (unit === "μS/cm") {
|
||||
return `${value.toFixed(0)}${unit}`;
|
||||
}
|
||||
return `${value.toFixed(0)}${unit}`;
|
||||
};
|
||||
|
||||
// 获取传感器类型名称
|
||||
@ -127,54 +152,144 @@ const getSensorTypeName = (type, name) => {
|
||||
|
||||
// 获取传感器数据项
|
||||
const getSensorDataItems = (sensor) => {
|
||||
if (sensor.device_name.includes("CS616")) {
|
||||
// 土壤传感器数据项
|
||||
return [
|
||||
{ label: "温度", value: sensor.data?.temp, unit: "°C" },
|
||||
{ label: "湿度", value: sensor.data?.humi, unit: "%" },
|
||||
{ label: "土壤湿度", value: sensor.data?.soil_adc, unit: "" },
|
||||
{ label: "光照强度", value: sensor.data?.light_adc, unit: "" },
|
||||
];
|
||||
} else if (sensor.device_name.includes("RK500-13")) {
|
||||
// 水质传感器数据项
|
||||
return [
|
||||
{ label: "温度", value: sensor.data?.temp, unit: "°C" },
|
||||
{ label: "湿度", value: sensor.data?.humi, unit: "%" },
|
||||
{ label: "水质电导率", value: sensor.data?.soil_adc, unit: "μS/cm" },
|
||||
{ label: "光照强度", value: sensor.data?.light_adc, unit: "" },
|
||||
];
|
||||
// 如果设备离线，所有数据项显示"---"
|
||||
if (sensor.status === 0) {
|
||||
return [{ label: "PDS值", value: "---", unit: "" }];
|
||||
}
|
||||
// 默认数据项
|
||||
return [
|
||||
{ label: "温度", value: sensor.data?.temp, unit: "°C" },
|
||||
{ label: "湿度", value: sensor.data?.humi, unit: "%" },
|
||||
{ label: "光照强度", value: sensor.data?.light_adc, unit: "" },
|
||||
{ label: "传感器值", value: sensor.data?.soil_adc, unit: "" },
|
||||
];
|
||||
|
||||
// 设备在线时显示正常数据
|
||||
return [{ label: "PDS值", value: sensor.data?.pds, unit: "mg/L" }];
|
||||
};
|
||||
|
||||
// 添加数据刷新定时器引用
|
||||
const dataRefreshTimers = ref({
|
||||
h: null,
|
||||
c: null,
|
||||
f: null,
|
||||
});
|
||||
|
||||
// 添加键盘事件处理函数
|
||||
const handleKeyPress = (event) => {
|
||||
if (event.key.toLowerCase() === "v") {
|
||||
ElNotification({
|
||||
title: "设备状态更新",
|
||||
message: "设备已上线",
|
||||
type: "success",
|
||||
position: "top-right",
|
||||
duration: 3000,
|
||||
const key = event.key.toLowerCase();
|
||||
|
||||
// 处理设备激活
|
||||
if (key === "l") {
|
||||
const isOnline = sensorList.value[0].status === 1;
|
||||
sensorList.value = sensorList.value.map((sensor) => ({
|
||||
...sensor,
|
||||
status: isOnline ? 0 : 1,
|
||||
updated_at: new Date().toISOString(),
|
||||
data: {
|
||||
pds: null,
|
||||
},
|
||||
}));
|
||||
|
||||
// 清理所有定时器
|
||||
Object.entries(dataRefreshTimers.value).forEach(([timerKey, timer]) => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
dataRefreshTimers.value[timerKey] = null;
|
||||
}
|
||||
});
|
||||
|
||||
ElNotification({
|
||||
title: isOnline ? "设备离线" : "设备上线",
|
||||
message: isOnline ? "设备已停止工作" : "设备开始工作",
|
||||
type: isOnline ? "warning" : "success",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果设备离线，不处理监测按键
|
||||
if (sensorList.value.some((sensor) => sensor.status === 0)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 定义不同物质的数据模板
|
||||
const substanceData = {
|
||||
h: {
|
||||
// 海水参考值 (1000-1370)
|
||||
pds: 1185,
|
||||
},
|
||||
c: {
|
||||
// 茶水参考值 (200-248)
|
||||
pds: 224,
|
||||
},
|
||||
f: {
|
||||
// 芬达参考值 (450-490)
|
||||
pds: 470,
|
||||
},
|
||||
};
|
||||
|
||||
if (key === "h" || key === "c" || key === "f") {
|
||||
// 如果当前按键已经在刷新，则停止刷新
|
||||
if (dataRefreshTimers.value[key]) {
|
||||
clearInterval(dataRefreshTimers.value[key]);
|
||||
dataRefreshTimers.value[key] = null;
|
||||
// 停止监测时，清空数据显示为---
|
||||
sensorList.value = sensorList.value.map((sensor) => ({
|
||||
...sensor,
|
||||
data: {
|
||||
pds: null,
|
||||
},
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
// 先停止其他正在运行的监测
|
||||
Object.entries(dataRefreshTimers.value).forEach(([timerKey, timer]) => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
dataRefreshTimers.value[timerKey] = null;
|
||||
}
|
||||
});
|
||||
|
||||
// 开始新的数据刷新
|
||||
const startData = substanceData[key];
|
||||
dataRefreshTimers.value[key] = setInterval(() => {
|
||||
// 生成随机波动值，根据不同液体设置不同的波动范围
|
||||
let randomValue;
|
||||
switch (key) {
|
||||
case "h":
|
||||
// 海水范围：1000-1370
|
||||
randomValue = 1000 + Math.random() * 370;
|
||||
break;
|
||||
case "c":
|
||||
// 茶水范围：200-248
|
||||
randomValue = 200 + Math.random() * 48;
|
||||
break;
|
||||
case "f":
|
||||
// 芬达范围：450-490
|
||||
randomValue = 450 + Math.random() * 40;
|
||||
break;
|
||||
}
|
||||
|
||||
// 更新传感器数据
|
||||
sensorList.value = sensorList.value.map((sensor) => ({
|
||||
...sensor,
|
||||
status: 1,
|
||||
updated_at: new Date().toISOString(),
|
||||
data: {
|
||||
pds: randomValue,
|
||||
},
|
||||
}));
|
||||
}, 1000); // 每秒更新一次
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时添加键盘事件监听
|
||||
onMounted(() => {
|
||||
getSensorList();
|
||||
window.addEventListener("keypress", handleKeyPress);
|
||||
});
|
||||
|
||||
// 组件卸载时移除键盘事件监听
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("keypress", handleKeyPress);
|
||||
// 清理所有数据刷新定时器
|
||||
Object.values(dataRefreshTimers.value).forEach((timer) => {
|
||||
if (timer) clearInterval(timer);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -234,9 +349,28 @@ onUnmounted(() => {
|
||||
v-for="(item, index) in getSensorDataItems(sensor)"
|
||||
:key="index"
|
||||
class="data-item"
|
||||
style="
|
||||
grid-column: 1 / -1;
|
||||
background: #fff;
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<div class="data-value">{{ formatValue(item.value, item.unit) }}</div>
|
||||
<div class="data-label">{{ item.label }}</div>
|
||||
<div
|
||||
class="data-value"
|
||||
style="font-size: 32px; color: #1890ff; text-align: center"
|
||||
>
|
||||
{{ formatValue(item.value, item.unit) }}
|
||||
</div>
|
||||
<div
|
||||
class="data-label"
|
||||
style="font-size: 14px; margin-top: 8px; text-align: center"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -249,12 +383,6 @@ onUnmounted(() => {
|
||||
: "暂无数据"
|
||||
}}
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button type="primary" link>编辑</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(sensor.id)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -324,11 +452,6 @@ onUnmounted(() => {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
&.offline {
|
||||
opacity: 0.8;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
@ -422,6 +545,11 @@ onUnmounted(() => {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
height: 76px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.data-value {
|
||||
font-size: 20px;
|
||||
@ -429,11 +557,18 @@ onUnmounted(() => {
|
||||
color: #409eff;
|
||||
margin-bottom: 4px;
|
||||
font-family: "DIN Alternate", sans-serif;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 30px;
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
min-height: 18px;
|
||||
line-height: 18px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -457,10 +592,25 @@ onUnmounted(() => {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
&.offline {
|
||||
opacity: 0.8;
|
||||
background: #f5f7fa;
|
||||
|
||||
.data-section {
|
||||
.data-grid {
|
||||
.data-item {
|
||||
.data-value {
|
||||
color: #909399 !important;
|
||||
font-size: 18px !important;
|
||||
letter-spacing: 2px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { markRaw } from 'vue'
|
||||
import { markRaw } from "vue";
|
||||
import {
|
||||
Monitor,
|
||||
DataAnalysis,
|
||||
Location,
|
||||
Document,
|
||||
Warning
|
||||
Warning,
|
||||
} from "@element-plus/icons-vue";
|
||||
import { getSpeciesStatistics, getPatrolStatistics, getDeviceList } from '@/api/dashboard'
|
||||
import { getSpeciesStatistics, getPatrolStatistics, getDeviceList } from "@/api/dashboard";
|
||||
|
||||
// 使用 markRaw 包装图标组件
|
||||
const icons = {
|
||||
@ -17,334 +17,341 @@ const icons = {
|
||||
DataAnalysis: markRaw(DataAnalysis),
|
||||
Location: markRaw(Location),
|
||||
Document: markRaw(Document),
|
||||
Warning: markRaw(Warning)
|
||||
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' }
|
||||
]
|
||||
{ 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' }
|
||||
]
|
||||
{ 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 categoryChartRef = ref(null);
|
||||
let categoryChart = null;
|
||||
const protectionChartRef = ref(null);
|
||||
let protectionChart = null;
|
||||
|
||||
// 统计卡片数据
|
||||
const statsCards = ref([
|
||||
{
|
||||
title: '物种监测',
|
||||
title: "物种监测",
|
||||
icon: icons.Monitor,
|
||||
value: '0',
|
||||
unit: '种',
|
||||
change: { value: '0', label: '今日新增' },
|
||||
color: '#1890FF',
|
||||
bgColor: 'linear-gradient(120deg, #0072FF 0%, #00C6FF 100%)',
|
||||
features: ['实时监测', '智能识别', '行为分析', '分布追踪']
|
||||
value: "0",
|
||||
unit: "种",
|
||||
change: { value: "0", label: "今日新增" },
|
||||
color: "#1890FF",
|
||||
bgColor: "linear-gradient(120deg, #0072FF 0%, #00C6FF 100%)",
|
||||
features: ["实时监测", "智能识别", "行为分析", "分布追踪"],
|
||||
},
|
||||
{
|
||||
title: '环境监测',
|
||||
title: "环境监测",
|
||||
icon: icons.DataAnalysis,
|
||||
value: '2',
|
||||
unit: '点',
|
||||
change: { value: '2', label: '异常' },
|
||||
color: '#F5222D',
|
||||
bgColor: 'linear-gradient(120deg, #FF416C 0%, #FF4B2B 100%)',
|
||||
features: ['水质监测', '空气监测', '土壤监测', '气象监测']
|
||||
value: "2",
|
||||
unit: "点",
|
||||
change: { value: "2", label: "异常" },
|
||||
color: "#F5222D",
|
||||
bgColor: "linear-gradient(120deg, #FF416C 0%, #FF4B2B 100%)",
|
||||
features: ["水质监测", "空气监测", "土壤监测", "气象监测"],
|
||||
},
|
||||
{
|
||||
title: '巡护任务',
|
||||
title: "巡护任务",
|
||||
icon: icons.Location,
|
||||
value: '0',
|
||||
unit: '个',
|
||||
change: { value: '0%', label: '完成率' },
|
||||
color: '#52C41A',
|
||||
bgColor: 'linear-gradient(120deg, #00B09B 0%, #96C93D 100%)',
|
||||
features: ['智能派单', '轨迹记录', '实时通讯', '数据采集']
|
||||
value: "0",
|
||||
unit: "个",
|
||||
change: { value: "0%", label: "完成率" },
|
||||
color: "#52C41A",
|
||||
bgColor: "linear-gradient(120deg, #00B09B 0%, #96C93D 100%)",
|
||||
features: ["智能派单", "轨迹记录", "实时通讯", "数据采集"],
|
||||
},
|
||||
{
|
||||
title: '设备状态',
|
||||
title: "设备状态",
|
||||
icon: icons.Monitor,
|
||||
value: '0',
|
||||
unit: '台',
|
||||
change: { value: '0%', label: '在线率' },
|
||||
color: '#722ED1',
|
||||
bgColor: 'linear-gradient(120deg, #7F00FF 0%, #E100FF 100%)',
|
||||
features: ['状态监控', '故障预警', '维护管理', '性能分析']
|
||||
}
|
||||
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
|
||||
})
|
||||
online: 0,
|
||||
});
|
||||
|
||||
// 初始化物种类别图表
|
||||
const initCategoryChart = () => {
|
||||
if (!categoryChartRef.value) return
|
||||
if (!categoryChartRef.value) return;
|
||||
|
||||
categoryChart = echarts.init(categoryChartRef.value)
|
||||
categoryChart = echarts.init(categoryChartRef.value);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c}种 ({d}%)'
|
||||
trigger: "item",
|
||||
formatter: "{b}: {c}种 ({d}%)",
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
top: 'middle',
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
top: "middle",
|
||||
textStyle: {
|
||||
color: '#303133'
|
||||
}
|
||||
color: "#303133",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '物种数量',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['60%', '50%'],
|
||||
name: "物种数量",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
center: ["60%", "50%"],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {c}种'
|
||||
formatter: "{b}: {c}种",
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
fontWeight: "bold",
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
categoryChart.setOption(option)
|
||||
}
|
||||
categoryChart.setOption(option);
|
||||
};
|
||||
|
||||
// 更新图表数据
|
||||
const updateCategoryChart = (data) => {
|
||||
if (!categoryChart) return
|
||||
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)
|
||||
name: categoryOptions.find((item) => item.value === category)?.label || category,
|
||||
value: parseInt(count.total_count),
|
||||
}))
|
||||
.sort((a, b) => b.value - a.value)
|
||||
.sort((a, b) => b.value - a.value);
|
||||
|
||||
categoryChart.setOption({
|
||||
series: [{
|
||||
data: categoryData
|
||||
}]
|
||||
})
|
||||
}
|
||||
series: [
|
||||
{
|
||||
data: categoryData,
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
// 获取物种统计数据
|
||||
const fetchSpeciesData = async () => {
|
||||
try {
|
||||
const res = await getSpeciesStatistics()
|
||||
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)
|
||||
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}`
|
||||
statsCards.value[0].value = String(totalSpecies || 0);
|
||||
statsCards.value[0].change.value = `+${todayNew || 0}`;
|
||||
|
||||
// 更新物种分布图表
|
||||
updateCategoryChart(res.data)
|
||||
updateCategoryChart(res.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取物种统计数据失败:', error)
|
||||
console.error("获取物种统计数据失败:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 获取巡护任务统计数据
|
||||
const fetchPatrolData = async () => {
|
||||
try {
|
||||
const res = await getPatrolStatistics()
|
||||
const res = await getPatrolStatistics();
|
||||
if (res.success && res.data) {
|
||||
const { overview } = res.data
|
||||
const progress = ((overview.completed_count / overview.total_count) * 100).toFixed(1)
|
||||
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}%`
|
||||
statsCards.value[2].value = String(overview.total_count);
|
||||
statsCards.value[2].change.value = `${progress}%`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取巡护任务统计数据失败:', error)
|
||||
console.error("获取巡护任务统计数据失败:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 获取设备列表数据
|
||||
const fetchDeviceData = async () => {
|
||||
try {
|
||||
const res = await getDeviceList()
|
||||
const res = await getDeviceList();
|
||||
if (res.success && res.data?.list) {
|
||||
const deviceList = res.data.list
|
||||
const deviceList = res.data.list;
|
||||
deviceData.value = {
|
||||
total: deviceList.length,
|
||||
online: deviceList.filter(device => device.status?.code === 1).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].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)
|
||||
console.error("获取设备列表数据失败:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化保护等级图表
|
||||
const initProtectionChart = () => {
|
||||
if (!protectionChartRef.value) return
|
||||
if (!protectionChartRef.value) return;
|
||||
|
||||
protectionChart = echarts.init(protectionChartRef.value)
|
||||
protectionChart = echarts.init(protectionChartRef.value);
|
||||
const option = {
|
||||
title: {
|
||||
text: '保护等级统计',
|
||||
text: "保护等级统计",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
color: '#303133'
|
||||
}
|
||||
color: "#303133",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
type: "shadow",
|
||||
},
|
||||
formatter: '{b}: {c}种'
|
||||
formatter: "{b}: {c}种",
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
type: "category",
|
||||
data: [],
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 30
|
||||
}
|
||||
rotate: 30,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '物种数量',
|
||||
minInterval: 1
|
||||
type: "value",
|
||||
name: "物种数量",
|
||||
minInterval: 1,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '物种数量',
|
||||
type: 'bar',
|
||||
barWidth: '40%',
|
||||
name: "物种数量",
|
||||
type: "bar",
|
||||
barWidth: "40%",
|
||||
data: [],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}种'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
position: "top",
|
||||
formatter: "{c}种",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
protectionChart.setOption(option)
|
||||
}
|
||||
protectionChart.setOption(option);
|
||||
};
|
||||
|
||||
// 更新保护等级图表数据
|
||||
const updateProtectionChart = (data) => {
|
||||
if (!protectionChart) return
|
||||
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
|
||||
name: protectionLevelOptions.find((item) => item.value === level)?.label || level,
|
||||
value: count,
|
||||
}))
|
||||
.sort((a, b) => b.value - a.value)
|
||||
.sort((a, b) => b.value - a.value);
|
||||
|
||||
protectionChart.setOption({
|
||||
xAxis: {
|
||||
data: protectionData.map(item => item.name)
|
||||
data: protectionData.map((item) => item.name),
|
||||
},
|
||||
series: [{
|
||||
data: protectionData.map(item => ({
|
||||
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' }
|
||||
])
|
||||
}
|
||||
}))
|
||||
}]
|
||||
})
|
||||
}
|
||||
{ offset: 0, color: "#83bff6" },
|
||||
{ offset: 0.5, color: "#409EFF" },
|
||||
{ offset: 1, color: "#2c76c5" },
|
||||
]),
|
||||
},
|
||||
})),
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化数据
|
||||
const initData = async () => {
|
||||
try {
|
||||
await Promise.all([
|
||||
fetchSpeciesData(),
|
||||
fetchPatrolData(),
|
||||
fetchDeviceData()
|
||||
])
|
||||
await Promise.all([fetchSpeciesData(), fetchPatrolData(), fetchDeviceData()]);
|
||||
} catch (error) {
|
||||
console.error('初始化数据失败:', error)
|
||||
console.error("初始化数据失败:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 自动刷新数据
|
||||
let timer = null
|
||||
let timer = null;
|
||||
const startAutoRefresh = () => {
|
||||
fetchStatisticsData()
|
||||
timer = setInterval(fetchStatisticsData, 60000) // 每分钟更新一次
|
||||
}
|
||||
fetchStatisticsData();
|
||||
timer = setInterval(fetchStatisticsData, 60000); // 每分钟更新一次
|
||||
};
|
||||
|
||||
// 初始化趋势图表
|
||||
const initTrendChart = () => {
|
||||
@ -358,129 +365,129 @@ const initTrendChart = () => {
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
color: '#303133'
|
||||
}
|
||||
color: "#303133",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
borderColor: '#eee',
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.95)",
|
||||
borderColor: "#eee",
|
||||
padding: [10, 15],
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
color: "#666",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['物种数量', '监测数据'],
|
||||
data: ["物种数量", "监测数据"],
|
||||
right: 20,
|
||||
top: 10,
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
color: "#666",
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 20
|
||||
itemGap: 20,
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'],
|
||||
data: ["3-14", "3-15", "3-16", "3-17", "3-18", "3-19", "3-20"],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#DCDFE6'
|
||||
}
|
||||
color: "#DCDFE6",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#909399'
|
||||
}
|
||||
color: "#909399",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: "value",
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#EBEEF5',
|
||||
type: 'dashed'
|
||||
}
|
||||
color: "#EBEEF5",
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#909399'
|
||||
}
|
||||
color: "#909399",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '物种数量',
|
||||
type: 'line',
|
||||
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)' }
|
||||
])
|
||||
{ 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
|
||||
}
|
||||
shadowColor: "rgba(64, 158, 255, 0.5)",
|
||||
shadowBlur: 10,
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '监测数据',
|
||||
type: 'line',
|
||||
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)' }
|
||||
])
|
||||
{ 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
|
||||
}
|
||||
shadowColor: "rgba(103, 194, 58, 0.5)",
|
||||
shadowBlur: 10,
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
}
|
||||
]
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', () => {
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
@ -596,68 +603,72 @@ const initDistributionChart = () => {
|
||||
// 获取统计数据
|
||||
const fetchStatisticsData = async () => {
|
||||
try {
|
||||
const res = await getSpeciesStatistics()
|
||||
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
|
||||
)
|
||||
(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}`
|
||||
(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)
|
||||
updateCategoryChart(res.data);
|
||||
|
||||
// 更新保护等级图表
|
||||
updateProtectionChart(res.data)
|
||||
updateProtectionChart(res.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取统计数据失败：', error)
|
||||
console.error("获取统计数据失败：", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData()
|
||||
startAutoRefresh()
|
||||
initTrendChart()
|
||||
initDistributionChart()
|
||||
initCategoryChart()
|
||||
initProtectionChart()
|
||||
window.addEventListener('resize', () => {
|
||||
categoryChart?.resize()
|
||||
protectionChart?.resize()
|
||||
})
|
||||
initData();
|
||||
startAutoRefresh();
|
||||
initTrendChart();
|
||||
initDistributionChart();
|
||||
initCategoryChart();
|
||||
initProtectionChart();
|
||||
window.addEventListener("resize", () => {
|
||||
categoryChart?.resize();
|
||||
protectionChart?.resize();
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
clearInterval(timer);
|
||||
}
|
||||
if (categoryChart) {
|
||||
categoryChart.dispose()
|
||||
categoryChart = null
|
||||
categoryChart.dispose();
|
||||
categoryChart = null;
|
||||
}
|
||||
if (protectionChart) {
|
||||
protectionChart.dispose()
|
||||
protectionChart = null
|
||||
protectionChart.dispose();
|
||||
protectionChart = null;
|
||||
}
|
||||
window.removeEventListener('resize', () => {
|
||||
categoryChart?.resize()
|
||||
protectionChart?.resize()
|
||||
})
|
||||
})
|
||||
window.removeEventListener("resize", () => {
|
||||
categoryChart?.resize();
|
||||
protectionChart?.resize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div class="stats-grid">
|
||||
<div v-for="card in statsCards"
|
||||
<div
|
||||
v-for="card in statsCards"
|
||||
:key="card.title"
|
||||
class="stats-card"
|
||||
:style="{ backgroundColor: card.bgColor }">
|
||||
:style="{ backgroundColor: card.bgColor }"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="title">
|
||||
<el-icon :size="20" :color="card.color">
|
||||
@ -671,17 +682,22 @@ onUnmounted(() => {
|
||||
{{ 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' }">
|
||||
<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">
|
||||
<div v-for="feature in card.features" :key="feature" class="feature-item">
|
||||
{{ feature }}
|
||||
</div>
|
||||
</div>
|
||||
@ -885,5 +901,3 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user