diff --git a/src/views/AIPatrol/sensor/index.vue b/src/views/AIPatrol/sensor/index.vue index fe866ba..52d7197 100644 --- a/src/views/AIPatrol/sensor/index.vue +++ b/src/views/AIPatrol/sensor/index.vue @@ -8,23 +8,7 @@ import { getDeviceList, deleteDevice } from "@/api/device"; const loading = ref(false); // 传感器列表数据 -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 sensorList = ref([]); // 分页参数 const pagination = ref({ @@ -34,41 +18,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, -// }); -// 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, // 传感器类型为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(); }; // 删除传感器 @@ -80,7 +64,7 @@ const handleDelete = async (id) => { const res = await deleteDevice(id); if (res.success) { ElMessage.success("删除成功"); - // getSensorList(); + getSensorList(); } else { ElMessage.error(res.message || "删除失败"); } @@ -130,17 +114,8 @@ const getTypeInfo = (type) => { // 格式化数据显示 const formatValue = (value, unit = "") => { - if (value === "---") return value; if (value === null || value === undefined) return "暂无数据"; - // 根据不同单位设置不同的小数位数 - 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}`; + return `${value}${unit}`; }; // 获取传感器类型名称 @@ -152,144 +127,54 @@ const getSensorTypeName = (type, name) => { // 获取传感器数据项 const getSensorDataItems = (sensor) => { - // 如果设备离线，所有数据项显示"---" - if (sensor.status === 0) { - return [{ label: "TDS值", value: "---", unit: "" }]; + 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: "" }, + ]; } - - // 设备在线时显示正常数据 - return [{ label: "TDS值", value: sensor.data?.tds, unit: "mg/L" }]; + // 默认数据项 + 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: "" }, + ]; }; -// 添加数据刷新定时器引用 -const dataRefreshTimers = ref({ - h: null, - c: null, - f: null, -}); - // 添加键盘事件处理函数 const handleKeyPress = (event) => { - 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: { - tds: null, - }, - })); - - // 清理所有定时器 - Object.entries(dataRefreshTimers.value).forEach(([timerKey, timer]) => { - if (timer) { - clearInterval(timer); - dataRefreshTimers.value[timerKey] = null; - } - }); - + if (event.key.toLowerCase() === "v") { ElNotification({ - title: isOnline ? "设备离线" : "设备上线", - message: isOnline ? "设备已停止工作" : "设备开始工作", - type: isOnline ? "warning" : "success", - duration: 2000, + title: "设备状态更新", + message: "设备已上线", + type: "success", + position: "top-right", + duration: 3000, }); - return; - } - - // 如果设备离线，不处理监测按键 - if (sensorList.value.some((sensor) => sensor.status === 0)) { - return; - } - - // 定义不同物质的数据模板 - const substanceData = { - h: { - // 海水参考值 (1000-1370) - tds: 1185, - }, - c: { - // 茶水参考值 (200-248) - tds: 224, - }, - f: { - // 芬达参考值 (450-490) - tds: 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: { - tds: 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: { - tds: randomValue, - }, - })); - }, 1000); // 每秒更新一次 } }; // 组件挂载时添加键盘事件监听 onMounted(() => { + getSensorList(); window.addEventListener("keypress", handleKeyPress); }); // 组件卸载时移除键盘事件监听 onUnmounted(() => { window.removeEventListener("keypress", handleKeyPress); - // 清理所有数据刷新定时器 - Object.values(dataRefreshTimers.value).forEach((timer) => { - if (timer) clearInterval(timer); - }); }); @@ -349,28 +234,9 @@ 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; - " > -
- {{ formatValue(item.value, item.unit) }} -
-
- {{ item.label }} -
+
{{ formatValue(item.value, item.unit) }}
+
{{ item.label }}
@@ -383,6 +249,12 @@ onUnmounted(() => { : "暂无数据" }} +
+ 编辑 + 删除 +
@@ -452,6 +324,11 @@ 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; @@ -545,11 +422,6 @@ 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; @@ -557,18 +429,11 @@ 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%; } } } @@ -592,25 +457,10 @@ onUnmounted(() => { font-size: 14px; } } - } - } - &.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; - justify-content: center; - align-items: center; - } - } + .actions { + display: flex; + gap: 12px; } } } diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index 573ca28..d02d9a3 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,15 +1,15 @@ @@ -959,64 +883,7 @@ onUnmounted(() => { } } } - - .bottom-stats-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; - margin-top: 40px; - padding-bottom: 20px; - - .stat-card { - background: #fff; - border-radius: 8px; - padding: 16px; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); - - .stat-header { - margin-bottom: 16px; - padding-bottom: 12px; - border-bottom: 1px solid #f0f2f5; - - .stat-title { - font-size: 16px; - font-weight: 500; - color: #303133; - } - } - - .stat-content { - .stat-item { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; - - &:last-child { - margin-bottom: 0; - } - - .label { - color: #909399; - font-size: 14px; - } - - .value { - font-size: 14px; - font-weight: 500; - color: #303133; - - &.good { - color: #67c23a; - } - - &.normal { - color: #e6a23c; - } - } - } - } - } - } } + + diff --git a/src/views/dashboard/screen/components/RightPanel/BottomCard.vue b/src/views/dashboard/screen/components/RightPanel/BottomCard.vue index d3e0691..ad71e38 100644 --- a/src/views/dashboard/screen/components/RightPanel/BottomCard.vue +++ b/src/views/dashboard/screen/components/RightPanel/BottomCard.vue @@ -9,6 +9,14 @@ const chartRef = ref(null) // 预警数据 const alertData = ref({ total: 0, + level1: { + name: '低微预警', + total: 0, + color: '#909399', + pending: 0, + processed: 0, + ignored: 0 + }, level2: { name: '中等预警', total: 0, @@ -75,7 +83,7 @@ const initChart = async () => { }, xAxis: { type: 'category', - data: ['严重预警', '中等预警'], + data: ['严重预警', '中等预警', '低微预警'], axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' @@ -135,7 +143,7 @@ const initChart = async () => { ]) } }, - data: [0, 0] + data: [0, 0, 0] }, { name: '已处理', @@ -156,7 +164,7 @@ const initChart = async () => { ]) } }, - data: [0, 0] + data: [0, 0, 0] }, { name: '已忽略', @@ -177,7 +185,7 @@ const initChart = async () => { ]) } }, - data: [0, 0] + data: [0, 0, 0] } ] } @@ -192,6 +200,7 @@ const fetchAlertData = async () => { if (res.success && res.data) { // 更新总数和各级别预警数据 let total = 0 + let level1Data = { pending: 0, processed: 0, ignored: 0 } let level2Data = { pending: 0, processed: 0, ignored: 0 } let level3Data = { pending: 0, processed: 0, ignored: 0 } @@ -199,7 +208,13 @@ const fetchAlertData = async () => { const count = Number(item.total_count) || 0 total += count - if (item.alert_level === 2) { + if (item.alert_level === 1) { + level1Data = { + pending: Number(item.pending_count) || 0, + processed: Number(item.processed_count) || 0, + ignored: Number(item.ignored_count) || 0 + } + } else if (item.alert_level === 2) { level2Data = { pending: Number(item.pending_count) || 0, processed: Number(item.processed_count) || 0, @@ -221,15 +236,15 @@ const fetchAlertData = async () => { series: [ { name: '待处理', - data: [level3Data.pending, level2Data.pending] + data: [level3Data.pending, level2Data.pending, level1Data.pending] }, { name: '已处理', - data: [level3Data.processed, level2Data.processed] + data: [level3Data.processed, level2Data.processed, level1Data.processed] }, { name: '已忽略', - data: [level3Data.ignored, level2Data.ignored] + data: [level3Data.ignored, level2Data.ignored, level1Data.ignored] } ] }) diff --git a/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue b/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue index 80112f8..cb90cfe 100644 --- a/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue +++ b/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue @@ -34,10 +34,10 @@ const initChart = async () => { } }, grid: { - top: '3%', + top: '8%', right: '15%', - bottom: '3%', - left: '5%', + bottom: '15%', + left: '15%', containLabel: true }, xAxis: { @@ -46,7 +46,7 @@ const initChart = async () => { nameTextStyle: { color: 'rgba(255, 255, 255, 0.7)', fontSize: 12, - padding: [0, 0, 0, 20] + padding: [15, 0, 0, 20] }, axisLine: { show: false @@ -62,7 +62,9 @@ const initChart = async () => { }, axisLabel: { color: 'rgba(255, 255, 255, 0.7)', - fontSize: 12 + fontSize: 12, + margin: 12, + padding: [8, 0, 0, 0] } }, yAxis: { @@ -78,15 +80,21 @@ const initChart = async () => { }, axisLabel: { color: '#fff', - fontSize: 12, - margin: 16 + fontSize: 14, + margin: 20, + formatter: function (value) { + if (value.length > 6) { + return value.substring(0, 6) + '...' + } + return value + } } }, series: [ { name: '预警次数', type: 'bar', - barWidth: 16, + barWidth: 12, showBackground: true, backgroundStyle: { color: 'rgba(255, 255, 255, 0.05)', @@ -98,8 +106,9 @@ const initChart = async () => { label: { show: true, position: 'right', + distance: 15, color: '#fff', - fontSize: 12, + fontSize: 14, formatter: '{c}次' }, data: []