diff --git a/src/views/AIPatrol/sensor/index.vue b/src/views/AIPatrol/sensor/index.vue index 52d7197..d4ff645 100644 --- a/src/views/AIPatrol/sensor/index.vue +++ b/src/views/AIPatrol/sensor/index.vue @@ -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); + }); }); @@ -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; + " > -
{{ formatValue(item.value, item.unit) }}
-
{{ item.label }}
+
+ {{ formatValue(item.value, item.unit) }} +
+
+ {{ item.label }} +
@@ -249,12 +383,6 @@ onUnmounted(() => { : "暂无数据" }} -
- 编辑 - 删除 -
@@ -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 { - display: flex; - gap: 12px; + &.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; + } + } } } } diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index d55e92f..5867c0b 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,15 +1,15 @@