zx/hazardousWaste_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

仓库传感器详情页

Browse Source
This commit is contained in:
wenshijun
2026-04-15 14:23:34 +08:00
parent 8b2f021cbe
commit 538b695830
3 changed files with 1096 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

891
src/views/worn/warehouseDashboard/index.vue Normal file
View File

@@ -0,0 +1,891 @@
<template>
<div class="warehouse-page">
<section class="warehouse-hero">
<button type="button" class="back-btn" @click="goBack">
<span></span>
返回首页
</button>
<div>
<p>{{ projectName || '项目仓库' }}</p>
<h1>{{ warehouseName || '仓库传感器看板' }}</h1>
<em>实时汇聚仓库内全部传感器状态、指标与最新上报数据</em>
</div>
<div class="hero-meta">
<strong>{{ onlineCount }}/{{ sensorCards.length }}</strong>
<span>在线设备</span>
</div>
</section>
<section class="summary-grid">
<div class="summary-card">
<span>设备总数</span>
<strong>{{ sensorCards.length }}</strong>
</div>
<div class="summary-card online">
<span>在线设备</span>
<strong>{{ onlineCount }}</strong>
</div>
<div class="summary-card offline">
<span>离线设备</span>
<strong>{{ offlineCount }}</strong>
</div>
<div class="summary-card">
<span>最近上报</span>
<strong>{{ latestReportTime || '--' }}</strong>
</div>
</section>
<section v-loading="loading" class="sensor-grid">
<div v-if="!loading && sensorCards.length === 0" class="empty-state">
当前仓库暂无传感器设备
</div>
<article v-for="item in sensorCards" :key="item.cardKey" :class="['sensor-card', item.statusClass]">
<div class="sensor-content">
<div class="sensor-main">
<div class="sensor-top">
<div :class="['sensor-icon', item.type]">
<span>{{ item.icon }}</span>
</div>
<div class="sensor-state">
<i></i>
{{ item.onlineText }}
</div>
</div>
<div class="sensor-body">
<p>{{ item.locationName }}</p>
<h2>{{ item.typeName }}</h2>
<strong>{{ item.summary }}</strong>
</div>
</div>
<div class="metric-panel">
<p>实时指标</p>
<div class="metric-list">
<span v-for="metric in item.metrics" :key="metric.label">
<em>{{ metric.label }}</em>
<strong>{{ metric.value }}</strong>
</span>
<span v-if="item.metrics.length === 0" class="muted">
<em>状态</em>
<strong>等待数据</strong>
</span>
</div>
</div>
</div>
<div class="sensor-footer">
<span>DevEUI：{{ item.devEui || '--' }}</span>
<span>{{ item.reportTime || '暂无上报' }}</span>
</div>
</article>
</section>
</div>
</template>
<script setup name="WarehouseDashboard">
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { listMqttDevice } from '@/api/worn/mqttDevice'
import { listMqttData } from '@/api/worn/mqttData'
import { closeWs, connectWs } from '@/utils/ws'
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const devices = ref([])
const latestDataMap = reactive({})
const ENV_CARD_TYPES = ['tempHum', 'toxicGas', 'hydrogenSulfide']
const deptId = computed(() => route.query.deptId)
const projectName = computed(() => route.query.projectName || '')
const warehouseName = computed(() => route.query.warehouseName || '')
const sensorCards = computed(() => devices.value.flatMap((device) => expandDeviceCards(device)))
const onlineCount = computed(() => sensorCards.value.filter((item) => item.isOnline).length)
const offlineCount = computed(() => Math.max(sensorCards.value.length - onlineCount.value, 0))
const latestReportTime = computed(() => {
const times = sensorCards.value.map((item) => item.reportTime).filter(Boolean)
return times[0] || ''
})
function goBack() {
router.push('/index')
}
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()
}
return listMqttData({
pageNum: 1,
pageSize: 1,
deviceId: device.id
}).then((res) => {
const row = (res.rows || [])[0]
if (row) {
latestDataMap[getDeviceKey(device)] = normalizePayload(row)
}
}).catch(() => {})
})
return Promise.all(tasks)
}
function handleWsMessage(data) {
if (!data || String(data.deptId || '') !== String(deptId.value || '')) {
return
}
const key = getDeviceKey(data)
latestDataMap[key] = normalizePayload(data)
const index = devices.value.findIndex((device) => {
return String(device.id || '') === String(data.deviceId || '') ||
String(device.devEui || '').toLowerCase() === String(data.devEUI || data.devEui || '').toLowerCase()
})
if (index > -1) {
devices.value[index] = {
...devices.value[index],
status: '0',
deviceName: data.deviceName || devices.value[index].deviceName
}
}
}
function expandDeviceCards(device) {
const data = latestDataMap[getDeviceKey(device)] || {}
const type = getSensorType(device, data)
if (type === 'env') {
return ENV_CARD_TYPES.map((displayType) => buildSensorCard(device, displayType))
}
return [buildSensorCard(device)]
}
function buildSensorCard(device, displayType) {
const data = latestDataMap[getDeviceKey(device)] || {}
const sourceType = getSensorType(device, data)
const type = displayType || sourceType
const metrics = buildMetrics(data, type)
const reportTime = formatTime(data.createTime || data.gatewayTime || data.time)
const isOnline = String(device.status) === '0'
return {
...device,
cardKey: `${getDeviceKey(device) || device.id || device.devEui || 'sensor'}-${type}`,
sourceType,
type,
icon: getSensorIcon(type),
typeName: getSensorTypeName(type),
locationName: getLocationName(device, data),
summary: getSensorSummary(data, type),
metrics,
reportTime,
isOnline,
onlineText: isOnline ? '在线' : '离线',
statusClass: isOnline ? 'online' : 'offline'
}
}
function getDeviceKey(device) {
return device.deviceId || device.id || device.devEUI || device.devEui || device.dev_eui
}
function normalizePayload(row) {
const json = parseJson(row.dataJson) || parseJson(row.payload) || {}
return {
...json,
...row,
devEUI: row.devEUI || row.devEui || json.devEUI || json.devEui,
deviceName: row.deviceName || json.deviceName
}
}
function parseJson(value) {
if (!value || typeof value !== 'string') {
return null
}
try {
return JSON.parse(value)
} catch (e) {
return null
}
}
function getSensorType(device, data) {
const raw = `${device.deviceType || ''} ${device.deviceName || ''} ${data.type || ''}`.toLowerCase()
if (raw.includes('smoke')) return 'smoke'
if (raw.includes('water')) return 'water'
if (raw.includes('socket')) return 'socket'
if (raw.includes('door')) return 'door'
if (raw.includes('env') || raw.includes('temperature') || raw.includes('humidity')) return 'env'
return 'sensor'
}
function getSensorIcon(type) {
const iconMap = {
smoke: '烟',
water: '水',
socket: '电',
door: '门',
env: '温',
tempHum: '温',
toxicGas: '氨',
hydrogenSulfide: '硫',
sensor: '测'
}
return iconMap[type] || '测'
}
function getSensorTypeName(type) {
const nameMap = {
smoke: '烟雾传感器',
water: '水浸传感器',
socket: '智能插座',
door: '门禁状态',
env: '环境传感器',
tempHum: '温湿度传感器',
toxicGas: '有毒气体传感器',
hydrogenSulfide: '硫化氢传感器',
sensor: '传感器'
}
return nameMap[type] || '传感器'
}
function getLocationName(device, data) {
return device.deptName || data.deptName || warehouseName.value || '仓库设备'
}
function getSensorSummary(data, type) {
if (!Object.keys(data).length) {
return '等待上报'
}
if (type === 'water') {
return `水浸状态：${translateNormalAlarm(data.waterStatus ?? data.water_status ?? data.water)}`
}
if (type === 'smoke') {
return `烟雾状态：${translateSmokeStatus(data.event || data.statusDesc || data.eventDesc || data.concentration)}`
}
if (type === 'socket') {
return `插座状态：${translateSwitch(data.switchStatus ?? data.socket_status)}`
}
if (type === 'door') {
return `门禁状态：${translateSwitch(data.doorStatus)}`
}
if (type === 'env') {
const temperature = data.temperature ?? '--'
const humidity = data.humidity ?? '--'
return `${temperature}℃ / ${humidity}%`
}
if (type === 'tempHum') {
const temperature = data.temperature ?? '--'
const humidity = data.humidity ?? '--'
return `温湿度：${temperature}℃ / ${humidity}%`
}
if (type === 'toxicGas') {
const nh3 = data.nh3 ?? '--'
return `氨气浓度：${nh3}ppm`
}
if (type === 'hydrogenSulfide') {
const h2s = data.h2s ?? '--'
return `硫化氢浓度：${h2s}ppm`
}
return '数据已上报'
}
function buildMetrics(data, type) {
if (type === 'tempHum') {
return buildMetricItems(data, [
['temperature', '温度', '℃'],
['humidity', '湿度', '%'],
['battery', '电量', '%']
])
}
if (type === 'toxicGas') {
return buildMetricItems(data, [
['nh3', '氨气', 'ppm'],
['battery', '电量', '%']
])
}
if (type === 'hydrogenSulfide') {
return buildMetricItems(data, [
['h2s', '硫化氢', 'ppm'],
['battery', '电量', '%']
])
}
const config = [
['temperature', '温度', '℃'],
['humidity', '湿度', '%'],
['nh3', '氨气', 'ppm'],
['h2s', '硫化氢', 'ppm'],
['battery', '电量', '%'],
['concentration', '烟雾浓度', ''],
['voltage', '电压', 'V'],
['current', '电流', 'A'],
['active_power', '功率', 'W']
]
const metrics = buildMetricItems(data, config)
if (type === 'water' && (data.waterStatus !== undefined || data.water_status !== undefined || data.water !== undefined)) {
metrics.unshift({ label: '水浸状态', value: translateNormalAlarm(data.waterStatus ?? data.water_status ?? data.water) })
}
if (type === 'socket' && (data.switchStatus !== undefined || data.socket_status !== undefined)) {
metrics.unshift({ label: '插座状态', value: translateSwitch(data.switchStatus ?? data.socket_status) })
}
return metrics.slice(0, 6)
}
function buildMetricItems(data, config) {
return config
.filter(([key]) => data[key] !== undefined && data[key] !== null && data[key] !== '')
.map(([key, label, unit]) => ({
label,
value: `${data[key]}${unit}`
}))
}
function translateNormalAlarm(value) {
const normalized = String(value).toLowerCase()
if (normalized === '0' || normalized === 'normal' || normalized === 'false') return '正常'
if (normalized === '1' || normalized === 'alarm' || normalized === 'true') return '告警'
return value || '正常'
}
function translateSmokeStatus(value) {
const normalized = String(value ?? '').trim().toLowerCase()
if (!normalized || normalized === '0' || normalized === 'normal' || normalized === 'removed' || normalized.includes('normal battery')) {
return '正常'
}
if (normalized === '1' || normalized === 'alarm' || normalized.includes('alarm')) {
return '告警'
}
return value || '正常'
}
function translateSwitch(value) {
const normalized = String(value).toLowerCase()
if (normalized === '0' || normalized === 'off' || normalized === 'false') return '关闭'
if (normalized === '1' || normalized === 'on' || normalized === 'true') return '开启'
return value || '--'
}
function formatTime(value) {
if (!value) {
return ''
}
const date = new Date(value)
if (Number.isNaN(date.getTime())) {
return String(value).replace('T', ' ').slice(0, 19)
}
return date.toLocaleString('zh-CN', {
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
})
}
onMounted(() => {
loadDevices()
connectWs(handleWsMessage)
})
onBeforeUnmount(() => {
closeWs()
})
</script>
<style lang="scss" scoped>
.warehouse-page {
min-height: calc(100vh - 84px);
padding: 24px 32px 36px;
color: #132033;
background:
radial-gradient(circle at 10% 0%, rgba(20, 184, 166, 0.18), transparent 28%),
radial-gradient(circle at 90% 8%, rgba(14, 165, 233, 0.16), transparent 30%),
linear-gradient(135deg, #eef8f7 0%, #f8fbff 52%, #edf4ff 100%);
}
.warehouse-hero {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
padding: 24px 28px;
margin-bottom: 18px;
color: #fff;
background:
linear-gradient(135deg, rgba(8, 47, 73, 0.95), rgba(15, 118, 110, 0.92)),
radial-gradient(circle at 78% 24%, rgba(125, 211, 252, 0.44), transparent 34%);
border-radius: 28px;
box-shadow: 0 24px 60px rgba(8, 47, 73, 0.22);
p {
margin: 0 0 8px;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.16em;
color: rgba(204, 251, 241, 0.86);
text-transform: uppercase;
}
h1 {
margin: 0;
font-size: 30px;
letter-spacing: 0.04em;
}
em {
display: block;
margin-top: 10px;
font-size: 13px;
font-style: normal;
color: rgba(240, 253, 250, 0.82);
}
}
.back-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 14px;
color: #ccfbf1;
cursor: pointer;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
span {
width: 9px;
height: 9px;
border-bottom: 2px solid currentcolor;
border-left: 2px solid currentcolor;
transform: rotate(45deg);
}
}
.hero-meta {
min-width: 150px;
padding: 16px;
text-align: center;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 22px;
strong {
display: block;
font-size: 28px;
}
span {
font-size: 12px;
color: rgba(240, 253, 250, 0.78);
}
}
.summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 18px;
}
.summary-card {
padding: 18px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 22px;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
span {
display: block;
margin-bottom: 8px;
font-size: 12px;
color: #64748b;
}
strong {
font-size: 26px;
color: #0f172a;
}
&.online strong {
color: #059669;
}
&.offline strong {
color: #475569;
}
}
.sensor-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.sensor-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 250px;
padding: 20px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 253, 0.92)),
radial-gradient(circle at 96% 96%, rgba(20, 184, 166, 0.14), transparent 22%);
border: 1px solid rgba(221, 235, 238, 0.95);
border-radius: 28px;
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.07);
transition: transform 0.2s ease, box-shadow 0.2s ease;
&::before {
position: absolute;
inset: 0 auto 0 0;
width: 6px;
content: "";
background: linear-gradient(180deg, #14b8a6, #38bdf8);
}
&::after {
position: absolute;
right: -36px;
bottom: -46px;
width: 150px;
height: 150px;
pointer-events: none;
content: "";
background: rgba(20, 184, 166, 0.08);
border-radius: 50%;
}
&:hover {
transform: translateY(-4px);
box-shadow: 0 24px 58px rgba(15, 23, 42, 0.12);
}
&.offline {
filter: grayscale(0.28);
&::before {
background: linear-gradient(180deg, #94a3b8, #cbd5e1);
}
}
}
.sensor-top,
.sensor-footer {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.sensor-top {
min-height: 64px;
}
.sensor-content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(230px, 0.9fr) minmax(260px, 1.1fr);
gap: 16px;
align-items: stretch;
flex: 1;
}
.sensor-main {
display: flex;
min-width: 0;
height: 100%;
min-height: 238px;
flex-direction: column;
padding: 20px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(240, 253, 250, 0.45));
border: 1px solid rgba(226, 232, 240, 0.58);
border-radius: 22px;
}
.sensor-icon {
display: grid;
width: 64px;
height: 64px;
place-items: center;
color: #0f766e;
background:
linear-gradient(135deg, rgba(204, 251, 241, 0.95), rgba(240, 253, 250, 0.95));
border: 1px solid rgba(20, 184, 166, 0.24);
border-radius: 20px;
box-shadow: inset 0 -10px 18px rgba(15, 118, 110, 0.08);
span {
font-size: 22px;
font-weight: 900;
}
&.smoke { color: #ea580c; background: linear-gradient(135deg, #ffedd5, #fff7ed); border-color: #fed7aa; }
&.water { color: #0284c7; background: linear-gradient(135deg, #e0f2fe, #f0f9ff); border-color: #bae6fd; }
&.socket { color: #16a34a; background: linear-gradient(135deg, #dcfce7, #f0fdf4); border-color: #bbf7d0; }
&.door { color: #475569; background: linear-gradient(135deg, #e2e8f0, #f8fafc); border-color: #cbd5e1; }
&.env { color: #0d9488; background: linear-gradient(135deg, #ccfbf1, #f0fdfa); border-color: #99f6e4; }
&.tempHum { color: #0d9488; background: linear-gradient(135deg, #ccfbf1, #f0fdfa); border-color: #99f6e4; }
&.toxicGas { color: #ca8a04; background: linear-gradient(135deg, #fef9c3, #fffbeb); border-color: #fde68a; }
&.hydrogenSulfide { color: #7c3aed; background: linear-gradient(135deg, #ede9fe, #faf5ff); border-color: #ddd6fe; }
}
.sensor-state {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 10px;
font-size: 12px;
color: #059669;
background: rgba(220, 252, 231, 0.86);
border-radius: 999px;
i {
width: 7px;
height: 7px;
background: #22c55e;
border-radius: 50%;
}
}
.sensor-card.offline .sensor-state {
color: #64748b;
background: #f1f5f9;
i {
background: #94a3b8;
}
}
.sensor-body {
position: relative;
z-index: 1;
min-width: 0;
padding-top: 18px;
margin-top: 18px;
text-align: left;
border-top: 1px solid rgba(226, 232, 240, 0.7);
p {
display: inline-flex;
max-width: 100%;
padding: 0;
margin: 0 0 8px;
overflow: hidden;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.01em;
color: #0f766e;
text-overflow: ellipsis;
white-space: nowrap;
background: transparent;
border: 0;
}
h2 {
display: block;
max-width: 100%;
padding: 0;
margin: 0 0 12px;
overflow: hidden;
font-size: 22px;
font-weight: 900;
line-height: 1.18;
letter-spacing: -0.02em;
color: #0f172a;
text-overflow: ellipsis;
white-space: nowrap;
}
strong {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 7px 11px;
margin-top: 0;
overflow: hidden;
font-size: 13px;
font-weight: 800;
line-height: 1.3;
color: #0f172a;
text-overflow: ellipsis;
white-space: nowrap;
background: rgba(248, 250, 252, 0.88);
border: 1px solid rgba(226, 232, 240, 0.82);
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
strong::before {
width: 7px;
height: 7px;
flex: 0 0 auto;
content: "";
background: #14b8a6;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.1);
}
}
.metric-panel {
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
min-height: 238px;
padding: 18px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.78));
border: 1px solid rgba(226, 232, 240, 0.72);
border-radius: 22px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
> p {
margin: 0 0 14px;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.12em;
color: #64748b;
text-transform: uppercase;
}
}
.metric-list {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: auto;
span {
display: grid;
min-height: 62px;
padding: 11px 12px;
color: #0f172a;
background:
linear-gradient(145deg, rgba(240, 253, 250, 0.88), rgba(255, 255, 255, 0.82));
border: 1px solid rgba(153, 246, 228, 0.56);
border-radius: 18px;
em {
font-size: 11px;
font-style: normal;
color: #64748b;
}
strong {
margin-top: 4px;
overflow: hidden;
font-size: 17px;
font-weight: 900;
color: #0f766e;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.muted {
color: #94a3b8;
background: #f8fafc;
border-color: #e2e8f0;
}
}
.sensor-footer {
position: relative;
z-index: 1;
gap: 12px;
padding: 10px 16px 0;
margin-top: 14px;
font-size: 12px;
color: #94a3b8;
border-top: 1px dashed #e2e8f0;
}
.empty-state {
display: grid;
min-height: 240px;
grid-column: 1 / -1;
color: #94a3b8;
place-items: center;
background: rgba(255, 255, 255, 0.78);
border: 1px dashed #cbd5e1;
border-radius: 24px;
}
@media (max-width: 1200px) {
.summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sensor-content {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.warehouse-page {
padding: 16px;
}
.warehouse-hero {
grid-template-columns: 1fr;
}
.sensor-grid,
.summary-grid {
grid-template-columns: 1fr;
}
}
</style>