报表申报智能运输页面完成
This commit is contained in:
844
pages/components/EquipmentInfo.vue
Normal file
844
pages/components/EquipmentInfo.vue
Normal file
@@ -0,0 +1,844 @@
|
||||
<template>
|
||||
<navigation :title="title" back-url="pages/intelligent/index"> </navigation>
|
||||
<view class="warehouse-page contentBox">
|
||||
<view class="warehouse-hero">
|
||||
<view>
|
||||
<text class="hero-sub">{{ projectName || '项目仓库' }}</text>
|
||||
<view class="hero-title">{{ warehouseName || '仓库传感器看板' }}</view>
|
||||
</view>
|
||||
<view class="hero-meta ">
|
||||
<view class="warehouse-hero-box">
|
||||
<div class="summary-card mr-16 total">
|
||||
<span class="label">设备总数</span>
|
||||
<strong class="value">{{ sensorCards.length }}</strong>
|
||||
</div>
|
||||
|
||||
<div class="summary-card mr-16 online">
|
||||
<span class="label">在线设备</span>
|
||||
<strong class="value">{{ onlineCount }}</strong>
|
||||
</div>
|
||||
|
||||
<div class="summary-card offline">
|
||||
<span class="label">离线设备</span>
|
||||
<strong class="value">{{ offlineCount }}</strong>
|
||||
</div>
|
||||
</view>
|
||||
<view class="report"> 最近上报:{{ latestReportTime || '--' }} </view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<view class="sensor-grid">
|
||||
<view v-if="loading" class="loading-view">加载中...</view>
|
||||
|
||||
<view v-else-if="sensorCards.length === 0" class="empty-state">
|
||||
当前仓库暂无传感器设备
|
||||
</view>
|
||||
|
||||
<view v-for="item in sensorCards" :key="item.cardKey" :class="['sensor-card', item.statusClass]">
|
||||
<view class="sensor-content">
|
||||
<view class="sensor-main">
|
||||
<view class="sensor-top">
|
||||
<view :class="['sensor-icon', item.type]">
|
||||
<text>{{ item.icon }}</text>
|
||||
</view>
|
||||
<view class="sensor-state">
|
||||
<text class="dot"></text>
|
||||
{{ item.onlineText }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sensor-body">
|
||||
<text class="location">{{ item.locationName }}</text>
|
||||
<view class="type-name">{{ item.typeName }}</view>
|
||||
<text class="summary">{{ item.summary }}</text>
|
||||
|
||||
<view v-if="isSocketControlType(item.type)" class="socket-actions">
|
||||
<button class="control-btn on" :disabled="!!controlLoadingMap[item.cardKey]"
|
||||
@tap="handleSocketControl(item, 'on')">
|
||||
{{ getSocketActionText(item.type, 'on', !!controlLoadingMap[item.cardKey]) }}
|
||||
</button>
|
||||
<button class="control-btn off" :disabled="!!controlLoadingMap[item.cardKey]"
|
||||
@tap="handleSocketControl(item, 'off')">
|
||||
{{ getSocketActionText(item.type, 'off', !!controlLoadingMap[item.cardKey]) }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-else-if="item.type === 'switch'" class="switch-actions">
|
||||
<view v-for="channel in [1, 2, 3]" :key="channel" class="switch-row">
|
||||
<text class="ch-label">开关{{ channel }}</text>
|
||||
<button class="control-btn on"
|
||||
:disabled="!!controlLoadingMap[`${item.cardKey}-ch-${channel}`]"
|
||||
@tap="handleLightSwitchControl(item, channel, 'on')">
|
||||
{{ !!controlLoadingMap[`${item.cardKey}-ch-${channel}`] ? '发送中...' : '开' }}
|
||||
</button>
|
||||
<button class="control-btn off"
|
||||
:disabled="!!controlLoadingMap[`${item.cardKey}-ch-${channel}`]"
|
||||
@tap="handleLightSwitchControl(item, channel, 'off')">
|
||||
{{ !!controlLoadingMap[`${item.cardKey}-ch-${channel}`] ? '发送中...' : '关' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="metric-panel">
|
||||
<text class="panel-title">实时指标</text>
|
||||
<view class="metric-list">
|
||||
<view v-for="metric in item.metrics" :key="metric.label" class="metric-item">
|
||||
<text class="label">{{ metric.label }}</text>
|
||||
<text class="value">{{ metric.value }}</text>
|
||||
</view>
|
||||
<view v-if="item.metrics.length === 0" class="metric-item muted">
|
||||
<text class="label">状态</text>
|
||||
<text class="value">等待数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sensor-footer">
|
||||
<text>DevEUI：{{ item.devEui || '--' }}</text>
|
||||
<text>{{ item.reportTime || '暂无上报' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
|
||||
import { controlLightSwitch, controlSocket, listMqttDevice, listMqttData, listMqttEvent } from '@/api/home'
|
||||
import { closeWs, connectWs } from '../utils/ws'
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import Navigation from './Navigation.vue';
|
||||
|
||||
const loading = ref(false)
|
||||
const devices = ref([])
|
||||
const title = ref('')
|
||||
const latestDataMap = reactive({})
|
||||
const controlLoadingMap = reactive({})
|
||||
const ENV_CARD_TYPES = ['tempHum', 'toxicGas', 'hydrogenSulfide']
|
||||
|
||||
const deptId = ref('')
|
||||
const projectName = ref('')
|
||||
const warehouseName = ref('')
|
||||
onLoad((options) => {
|
||||
deptId.value = options?.deptId
|
||||
projectName.value = options?.projectName
|
||||
warehouseName.value = options?.warehouseName
|
||||
title.value = options?.warehouseName
|
||||
})
|
||||
const sensorCards = computed(() => devices.value.flatMap((device) => expandDeviceCards(device)))
|
||||
const onlineCount = computed(() => sensorCards.value.filter(i => i.isOnline).length)
|
||||
const offlineCount = computed(() => Math.max(sensorCards.value.length - onlineCount.value, 0))
|
||||
const latestReportTime = computed(() => {
|
||||
const times = sensorCards.value.map(i => i.reportTime).filter(Boolean)
|
||||
return times[0] || ''
|
||||
})
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
function loadDevices() {
|
||||
if (!deptId.value) {
|
||||
devices.value = []
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
listMqttDevice({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
deptId: deptId.value
|
||||
}).then(res => {
|
||||
devices.value = res.rows || []
|
||||
return loadLatestData()
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function loadLatestData() {
|
||||
const tasks = devices.value.map(device => {
|
||||
if (!device.id) return Promise.resolve()
|
||||
const reqs = [
|
||||
listMqttData({ pageNum: 1, pageSize: 1, deviceId: device.id }).then(res => {
|
||||
const row = (res.rows || [])[0]
|
||||
if (row) {
|
||||
const key = getDeviceKey(device)
|
||||
latestDataMap[key] = normalizePayload({ ...latestDataMap[key] || {}, ...row })
|
||||
}
|
||||
}).catch(() => { })
|
||||
]
|
||||
if (isStateDevice(device)) {
|
||||
reqs.push(listMqttEvent({ pageNum: 1, pageSize: 1, deviceId: device.id }).then(res => {
|
||||
const row = (res.rows || [])[0]
|
||||
if (row) {
|
||||
const key = getDeviceKey(device)
|
||||
latestDataMap[key] = normalizePayload({ ...latestDataMap[key] || {}, ...row, ...deriveStateFromEvent(row) })
|
||||
}
|
||||
}).catch(() => { }))
|
||||
}
|
||||
return Promise.all(reqs)
|
||||
})
|
||||
return Promise.all(tasks)
|
||||
}
|
||||
|
||||
function handleWsMessage(data) {
|
||||
if (!data || String(data.deptId || '') !== String(deptId.value || '')) return
|
||||
const runtimeStatus = data.deviceStatus != null ? String(data.deviceStatus) : null
|
||||
|
||||
const index = devices.value.findIndex(device =>
|
||||
String(device.id || '') === String(data.deviceId || '') ||
|
||||
String(device.devEui || '').toLowerCase() === String(data.devEui || '').toLowerCase()
|
||||
)
|
||||
|
||||
if (index > -1) {
|
||||
const device = devices.value[index]
|
||||
const key = getDeviceKey(device)
|
||||
const patched = patchRealtimeState(latestDataMap[key] || {}, data)
|
||||
latestDataMap[key] = normalizePayload({ ...latestDataMap[key] || {}, ...patched })
|
||||
devices.value[index] = { ...device, status: runtimeStatus ?? '0' }
|
||||
return
|
||||
}
|
||||
|
||||
const key = getDeviceKey(data)
|
||||
const patched = patchRealtimeState(latestDataMap[key] || {}, data)
|
||||
latestDataMap[key] = normalizePayload({ ...latestDataMap[key] || {}, ...patched })
|
||||
}
|
||||
|
||||
function patchRealtimeState(prev, next) {
|
||||
const res = { ...next }
|
||||
const s1 = next.switch_1 ?? next.switch1
|
||||
const s2 = next.switch_2 ?? next.switch2
|
||||
const s3 = next.switch_3 ?? next.switch3
|
||||
if (s1 != null) res.switch_1 = res.switch1 = s1
|
||||
if (s2 != null) res.switch_2 = res.switch2 = s2
|
||||
if (s3 != null) res.switch_3 = res.switch3 = s3
|
||||
|
||||
const water = deriveWaterStatus({ ...prev, ...next })
|
||||
if (water != null) res.waterStatus = res.water_status = water
|
||||
const door = deriveDoorStatus({ ...prev, ...next })
|
||||
if (door != null) res.doorStatus = res.door_status = door
|
||||
const socket = deriveSocketStatus({ ...prev, ...next })
|
||||
if (socket != null) res.switchStatus = res.socket_status = res.socketStatus = socket
|
||||
return res
|
||||
}
|
||||
|
||||
async function handleSocketControl(item, action) {
|
||||
const deviceId = item.id || item.deviceId
|
||||
const devEui = item.devEui || item.devEUI || item.dev_eui
|
||||
if (!devEui) return uni.showToast({ title: '未找到设备', icon: 'none' })
|
||||
const k = item.cardKey || String(deviceId)
|
||||
if (controlLoadingMap[k]) return
|
||||
controlLoadingMap[k] = true
|
||||
try {
|
||||
const status = action === 'on' ? 1 : 0
|
||||
await controlSocket({ devEui, deviceId, status })
|
||||
syncSocketLocalState(item, status)
|
||||
uni.showToast({ title: '指令已发送', icon: 'success' })
|
||||
} finally {
|
||||
controlLoadingMap[k] = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleLightSwitchControl(item, ch, action) {
|
||||
const devEui = item.devEui || item.devEUI || item.dev_eui
|
||||
if (!devEui) return uni.showToast({ title: '未找到设备', icon: 'none' })
|
||||
const k = `${item.cardKey}-ch-${ch}`
|
||||
if (controlLoadingMap[k]) return
|
||||
controlLoadingMap[k] = true
|
||||
try {
|
||||
const status = action === 'on' ? 1 : 0
|
||||
await controlLightSwitch({ devEui, channel: ch, status })
|
||||
syncLightSwitchLocalState(item, ch, status)
|
||||
uni.showToast({ title: '指令已发送', icon: 'success' })
|
||||
} finally {
|
||||
controlLoadingMap[k] = false
|
||||
}
|
||||
}
|
||||
|
||||
function syncSocketLocalState(item, status) {
|
||||
const key = getDeviceKey(item)
|
||||
if (!key) return
|
||||
const now = new Date().toISOString()
|
||||
latestDataMap[key] = normalizePayload({
|
||||
...latestDataMap[key] || {},
|
||||
socket_status: status, socketStatus: status, switchStatus: status,
|
||||
gatewayTime: now, createTime: now
|
||||
})
|
||||
}
|
||||
|
||||
function syncLightSwitchLocalState(item, ch, status) {
|
||||
const key = getDeviceKey(item)
|
||||
if (!key) return
|
||||
const now = new Date().toISOString()
|
||||
latestDataMap[key] = normalizePayload({
|
||||
...latestDataMap[key] || {},
|
||||
deviceId: item.deviceId || item.id,
|
||||
devEui: item.devEui || item.devEUI || item.dev_eui,
|
||||
deviceName: item.deviceName,
|
||||
[`switch_${ch}`]: status, [`switch${ch}`]: status,
|
||||
gatewayTime: now, createTime: now
|
||||
})
|
||||
}
|
||||
|
||||
function expandDeviceCards(device) {
|
||||
const data = latestDataMap[getDeviceKey(device)] || {}
|
||||
const type = getSensorType(device, data)
|
||||
if (type === 'env') return ENV_CARD_TYPES.map(t => buildSensorCard(device, t))
|
||||
return [buildSensorCard(device)]
|
||||
}
|
||||
|
||||
function buildSensorCard(device, displayType) {
|
||||
const data = latestDataMap[getDeviceKey(device)] || {}
|
||||
const type = displayType || getSensorType(device, data)
|
||||
const metrics = buildDisplayMetrics(data, type)
|
||||
const reportTime = formatTime(data.createTime || data.gatewayTime)
|
||||
const isOnline = String(device.status) === '0'
|
||||
return {
|
||||
...device,
|
||||
cardKey: `${getDeviceKey(device) || 's'}-${type}`,
|
||||
type,
|
||||
icon: getDisplayIcon(type),
|
||||
typeName: getDisplayTypeName(type),
|
||||
locationName: getLocationName(device, data),
|
||||
summary: getDisplaySummary(data, type),
|
||||
metrics,
|
||||
reportTime,
|
||||
isOnline,
|
||||
onlineText: isOnline ? '在线' : '离线',
|
||||
statusClass: isOnline ? 'online' : 'offline'
|
||||
}
|
||||
}
|
||||
|
||||
function isSocketControlType(type) {
|
||||
return type === 'socket' || type === 'acSocket'
|
||||
}
|
||||
function getSocketActionText(type, action, loading) {
|
||||
if (loading) return '发送中...'
|
||||
if (type === 'acSocket') return action === 'on' ? '开启空调' : '关闭空调'
|
||||
return action === 'on' ? '开启排风' : '关闭排风'
|
||||
}
|
||||
function getDisplayIcon(type) {
|
||||
return type === 'acSocket' ? '空' : getSensorIcon(type)
|
||||
}
|
||||
function getDisplayTypeName(type) {
|
||||
return type === 'acSocket' ? '智能空调插座' : getSensorTypeName(type)
|
||||
}
|
||||
function getDisplaySummary(data, type) {
|
||||
if (type === 'acSocket') return `空调状态：${translateSwitch(data.switchStatus)}`
|
||||
return getSensorSummary(data, type)
|
||||
}
|
||||
function buildDisplayMetrics(data, type) {
|
||||
const m = buildMetrics(data, type === 'acSocket' ? 'socket' : type)
|
||||
if (type === 'acSocket') {
|
||||
return m.map(i => i.label === '插座状态' ? { ...i, label: '空调状态' } : i)
|
||||
}
|
||||
return m
|
||||
}
|
||||
|
||||
function getDeviceKey(d) {
|
||||
return d.deviceId || d.id || d.devEui || d.devEUI || d.dev_eui
|
||||
}
|
||||
function normalizePayload(row) {
|
||||
const json = parseJson(row.dataJson) || parseJson(row.payload) || {}
|
||||
const nested = parseJson(row.data) || {}
|
||||
const water = deriveWaterStatus({ ...json, ...nested, ...row })
|
||||
return {
|
||||
...json, ...nested, ...row,
|
||||
devEui: row.devEui || row.devEUI || json.devEui,
|
||||
waterStatus: row.waterStatus ?? row.water_status ?? water,
|
||||
water_status: row.water_status ?? row.waterStatus ?? water,
|
||||
socket_status: row.socket_status ?? row.socketStatus,
|
||||
switchStatus: row.switchStatus ?? row.socket_status,
|
||||
switch_1: row.switch_1 ?? row.switch1, switch1: row.switch1 ?? row.switch_1,
|
||||
switch_2: row.switch_2 ?? row.switch2, switch2: row.switch2 ?? row.switch_2,
|
||||
switch_3: row.switch_3 ?? row.switch3, switch3: row.switch3 ?? row.switch_3,
|
||||
doorStatus: row.doorStatus ?? row.door_status
|
||||
}
|
||||
}
|
||||
function parseJson(v) {
|
||||
if (typeof v !== 'string') return null
|
||||
try { return JSON.parse(v) } catch { return null }
|
||||
}
|
||||
function deriveStateFromEvent(row) {
|
||||
const evt = (row.eventType || row.event || '').toLowerCase()
|
||||
const desc = (row.eventDesc || row.statusDesc || '').toLowerCase()
|
||||
const res = {}
|
||||
if (evt.includes('open') || desc.includes('打开')) res.doorStatus = 1
|
||||
if (evt.includes('close') || desc.includes('关闭')) res.doorStatus = 0
|
||||
if (evt.includes('on') || desc.includes('通电')) res.socket_status = res.switchStatus = 1
|
||||
if (evt.includes('off') || desc.includes('断电')) res.socket_status = res.switchStatus = 0
|
||||
const water = deriveWaterStatus(row)
|
||||
if (water != null) res.waterStatus = res.water_status = water
|
||||
return res
|
||||
}
|
||||
function deriveWaterStatus(data) {
|
||||
const evt = (data.eventType || data.status || '').toLowerCase()
|
||||
const desc = (data.eventDesc || data.statusDesc || '').toLowerCase()
|
||||
if (evt === 'alarm' || desc.includes('浸水') || desc.includes('水浸')) return 1
|
||||
if (evt === 'normal' || desc.includes('正常')) return 0
|
||||
return data.waterStatus ?? data.water_status
|
||||
}
|
||||
function deriveDoorStatus(data) {
|
||||
return data.doorStatus ?? data.door_status
|
||||
}
|
||||
function deriveSocketStatus(data) {
|
||||
return data.switchStatus ?? data.socket_status ?? data.socketStatus
|
||||
}
|
||||
|
||||
function getSensorType(device, data) {
|
||||
const t = (device.deviceType || '').toLowerCase()
|
||||
const name = (device.deviceName || '').toLowerCase()
|
||||
if (t === 'smoke') return 'smoke'
|
||||
if (t === 'water') return 'water'
|
||||
if (t === 'door') return 'door'
|
||||
if (t === 'env') return 'env'
|
||||
if (t === 'switch') return 'switch'
|
||||
if (t === 'socket') return name.includes('空调') ? 'acSocket' : 'socket'
|
||||
if (name.includes('smoke')) return 'smoke'
|
||||
if (name.includes('water')) return 'water'
|
||||
if (name.includes('空调')) return 'acSocket'
|
||||
if (name.includes('socket')) return 'socket'
|
||||
if (name.includes('switch')) return 'switch'
|
||||
if (name.includes('door')) return 'door'
|
||||
if (name.includes('temp') || name.includes('hum')) return 'env'
|
||||
return 'sensor'
|
||||
}
|
||||
|
||||
function isStateDevice(device) {
|
||||
const s = `${device.deviceType} ${device.deviceName}`.toLowerCase()
|
||||
return s.includes('door') || s.includes('socket') || s.includes('switch')
|
||||
}
|
||||
|
||||
function getSensorIcon(type) {
|
||||
const map = { smoke: '烟', water: '水', socket: '电', switch: '灯', door: '门', env: '温', tempHum: '温', toxicGas: '氨', hydrogenSulfide: '硫' }
|
||||
return map[type] || '测'
|
||||
}
|
||||
function getSensorTypeName(type) {
|
||||
const map = { smoke: '烟雾传感器', water: '水浸传感器', socket: '智能排风', switch: '智慧照明', door: '门禁状态', env: '环境传感器', tempHum: '温湿度', toxicGas: '有毒气体', hydrogenSulfide: '硫化氢' }
|
||||
return map[type] || '传感器'
|
||||
}
|
||||
function getLocationName(device) {
|
||||
return device.deptName || warehouseName.value || '仓库'
|
||||
}
|
||||
function getSensorSummary(data, type) {
|
||||
if (!Object.keys(data).length) return '等待上报'
|
||||
if (type === 'water') return `水浸：${translateNormalAlarm(data.waterStatus)}`
|
||||
if (type === 'smoke') return `烟雾：${translateSmokeStatus(data.status)}`
|
||||
if (type === 'socket') return `插座：${translateSwitch(data.switchStatus)}`
|
||||
if (type === 'switch') {
|
||||
const arr = []
|
||||
if (data.switch_1 != null) arr.push(`1${translateSwitchShort(data.switch_1)}`)
|
||||
if (data.switch_2 != null) arr.push(`2${translateSwitchShort(data.switch_2)}`)
|
||||
if (data.switch_3 != null) arr.push(`3${translateSwitchShort(data.switch_3)}`)
|
||||
return arr.length ? `开关：${arr.join(' ')}` : '开关状态'
|
||||
}
|
||||
if (type === 'door') return `门禁：${translateSwitch(data.doorStatus)}`
|
||||
if (type === 'tempHum') return `${data.temperature || '--'}℃/${data.humidity || '--'}%`
|
||||
if (type === 'toxicGas') return `氨气：${data.nh3 || '--'}ppm`
|
||||
if (type === 'hydrogenSulfide') return `硫化氢：${data.h2s || '--'}ppm`
|
||||
if (type === 'env') return `${data.temperature || '--'}℃/${data.humidity || '--'}%`
|
||||
return '已上报'
|
||||
}
|
||||
|
||||
function buildMetrics(data, type) {
|
||||
if (type === 'tempHum') return [{ label: '温度', value: data.temperature + '℃' }, { label: '湿度', value: data.humidity + '%' }, { label: '电量', value: data.battery + '%' }].filter(i => i.value)
|
||||
if (type === 'toxicGas') return [{ label: '氨气', value: data.nh3 + 'ppm' }, { label: '电量', value: data.battery + '%' }].filter(i => i.value)
|
||||
if (type === 'hydrogenSulfide') return [{ label: '硫化氢', value: data.h2s + 'ppm' }, { label: '电量', value: data.battery + '%' }].filter(i => i.value)
|
||||
const list = []
|
||||
if (data.temperature != null) list.push({ label: '温度', value: data.temperature + '℃' })
|
||||
if (data.humidity != null) list.push({ label: '湿度', value: data.humidity + '%' })
|
||||
if (data.nh3 != null) list.push({ label: '氨气', value: data.nh3 + 'ppm' })
|
||||
if (data.h2s != null) list.push({ label: '硫化氢', value: data.h2s + 'ppm' })
|
||||
if (data.battery != null) list.push({ label: '电量', value: data.battery + '%' })
|
||||
if (type === 'water' && data.waterStatus != null) list.unshift({ label: '水浸', value: translateNormalAlarm(data.waterStatus) })
|
||||
if (type === 'socket' && data.switchStatus != null) list.unshift({ label: '插座', value: translateSwitch(data.switchStatus) })
|
||||
if (type === 'door' && data.doorStatus != null) list.unshift({ label: '门禁', value: translateSwitch(data.doorStatus) })
|
||||
if (type === 'switch') {
|
||||
const sw = []
|
||||
if (data.switch_1 != null) sw.push({ label: '开关1', value: translateSwitchShort(data.switch_1) })
|
||||
if (data.switch_2 != null) sw.push({ label: '开关2', value: translateSwitchShort(data.switch_2) })
|
||||
if (data.switch_3 != null) sw.push({ label: '开关3', value: translateSwitchShort(data.switch_3) })
|
||||
return [...sw, ...list].slice(0, 6)
|
||||
}
|
||||
return list.slice(0, 6)
|
||||
}
|
||||
|
||||
function translateNormalAlarm(v) {
|
||||
const s = String(v)
|
||||
return s === '0' ? '正常' : s === '1' ? '告警' : '未知'
|
||||
}
|
||||
function translateSmokeStatus(v) {
|
||||
const s = String(v).toLowerCase()
|
||||
return s === '0' || s === 'normal' ? '正常' : s === '1' || s === 'alarm' ? '告警' : '正常'
|
||||
}
|
||||
function translateSwitch(v) {
|
||||
const s = String(v).toLowerCase()
|
||||
return s === '0' || s === 'off' ? '关闭' : s === '1' || s === 'on' ? '开启' : '--'
|
||||
}
|
||||
function translateSwitchShort(v) {
|
||||
const s = String(v).toLowerCase()
|
||||
return s === '0' || s === 'off' ? '关' : s === '1' || s === 'on' ? '开' : '-'
|
||||
}
|
||||
function formatTime(t) {
|
||||
if (!t) return ''
|
||||
return t.replace('T', ' ').substring(5, 16)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadDevices()
|
||||
connectWs(handleWsMessage)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
closeWs(handleWsMessage)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warehouse-page {
|
||||
padding: 20rpx;
|
||||
background: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.warehouse-hero {
|
||||
background: linear-gradient(135deg, #085f52, #0a7c70);
|
||||
color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.warehouse-hero-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
border-radius: 100rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border: none;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.meta-num {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.online .num {
|
||||
color: #07a186;
|
||||
}
|
||||
|
||||
.offline .num {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.sensor-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sensor-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 8rpx;
|
||||
background: #08a089;
|
||||
}
|
||||
|
||||
.sensor-card.offline {
|
||||
opacity: 0.6;
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
.sensor-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.sensor-main {
|
||||
background: #f9f9f9;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.sensor-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sensor-icon {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
background: #e6f7f5;
|
||||
color: #088a77;
|
||||
}
|
||||
|
||||
.sensor-state {
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
background: #e6f7f5;
|
||||
color: #088a77;
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #09a089;
|
||||
border-radius: 50%;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.sensor-body {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.location {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
|
||||
.summary {
|
||||
font-size: 26rpx;
|
||||
background: #f0f0f0;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 100rpx;
|
||||
display: inline-block;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.socket-actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.switch-actions {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.switch-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.ch-label {
|
||||
width: 80rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 100rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.control-btn.on {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.control-btn.off {
|
||||
background: #ffedd5;
|
||||
color: #9a3412;
|
||||
}
|
||||
|
||||
.metric-panel {
|
||||
background: #f9f9f9;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 16rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.metric-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
flex: 1;
|
||||
min-width: 200rpx;
|
||||
background: #fff;
|
||||
padding: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #088a77;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.muted {
|
||||
background: #f1f1f1;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.sensor-footer {
|
||||
margin-top: 20rpx;
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx dashed #eee;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60rpx;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
|
||||
.summary-card {
|
||||
padding: 18px 20px;
|
||||
border-radius: 18px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 30%;
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
// 设备总数
|
||||
.summary-card.total {
|
||||
background: #eef2ff;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
// 在线设备
|
||||
.summary-card.online {
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
// 离线设备
|
||||
.summary-card.offline {
|
||||
background: #F5F5F5;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
// 最近上报
|
||||
.summary-card.report {
|
||||
background: #f0f9ff;
|
||||
color: #0ea5e9;
|
||||
}
|
||||
|
||||
.loading-view {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
// background-color: #F8FAFC;
|
||||
border-color: #CBD5E1;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 16rpx;
|
||||
// padding: 24rpx;
|
||||
}
|
||||
|
||||
|
||||
.report {
|
||||
margin-top: 8rpx;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user