hazardousWaste_web/src/views/worn/warehouseDashboard/index.vue

<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 v-if="item.type === 'socket'" class="socket-actions">
                <button
                  type="button"
                  class="control-btn control-on"
                  :disabled="!!controlLoadingMap[item.cardKey]"
                  @click="handleSocketControl(item, 'on')"
                >
                  {{ controlLoadingMap[item.cardKey] ? '发送中...' : '开启排风' }}
                </button>
                <button
                  type="button"
                  class="control-btn control-off"
                  :disabled="!!controlLoadingMap[item.cardKey]"
                  @click="handleSocketControl(item, 'off')"
                >
                  {{ controlLoadingMap[item.cardKey] ? '发送中...' : '关闭排风' }}
                </button>
              </div>
            </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 { ElMessage } from 'element-plus'
import { listMqttDevice } from '@/api/worn/mqttDevice'
import { listMqttData } from '@/api/worn/mqttData'
import { listMqttEvent } from '@/api/worn/mqttEvent'
import { controlSocket } from '@/api/worn/socket'
import { closeWs, connectWs } from '@/utils/ws'

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const devices = ref([])
const latestDataMap = reactive({})
const controlLoadingMap = 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()
    }

    const requestList = [
      listMqttData({
        pageNum: 1,
        pageSize: 1,
        deviceId: device.id
      }).then((res) => {
        const row = (res.rows || [])[0]
        if (row) {
          latestDataMap[getDeviceKey(device)] = normalizePayload({
            ...(latestDataMap[getDeviceKey(device)] || {}),
            ...row
          })
        }
      }).catch(() => {})
    ]

    if (isStateDevice(device)) {
      requestList.push(
        listMqttEvent({
          pageNum: 1,
          pageSize: 1,
          deviceId: device.id
        }).then((res) => {
          const row = (res.rows || [])[0]
          if (row) {
            latestDataMap[getDeviceKey(device)] = normalizePayload({
              ...(latestDataMap[getDeviceKey(device)] || {}),
              ...row,
              ...deriveStateFromEvent(row)
            })
          }
        }).catch(() => {})
      )
    }

    return Promise.all(requestList)
  })

  return Promise.all(tasks)
}

function handleWsMessage(data) {
  if (!data || String(data.deptId || '') !== String(deptId.value || '')) {
    return
  }

  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) {
    const device = devices.value[index]
    const key = getDeviceKey(device)
    const patchedData = patchRealtimeState(latestDataMap[key] || {}, data)
    latestDataMap[key] = normalizePayload({
      ...(latestDataMap[key] || {}),
      ...patchedData
    })

    devices.value[index] = {
      ...device,
      status: '0',
      deviceName: data.deviceName || device.deviceName
    }
    return
  }

  const key = getDeviceKey(data)
  const patchedData = patchRealtimeState(latestDataMap[key] || {}, data)
  latestDataMap[key] = normalizePayload({
    ...(latestDataMap[key] || {}),
    ...patchedData
  })
}

function patchRealtimeState(previous, incoming) {
  const next = { ...incoming }
  const waterStatus = deriveWaterStatus({ ...previous, ...incoming })
  if (waterStatus !== undefined) {
    next.waterStatus = waterStatus
    next.water_status = waterStatus
  }

  const doorStatus = deriveDoorStatus({ ...previous, ...incoming })
  if (doorStatus !== undefined) {
    next.doorStatus = doorStatus
    next.door_status = doorStatus
  }

  const socketStatus = deriveSocketStatus({ ...previous, ...incoming })
  if (socketStatus !== undefined) {
    next.switchStatus = socketStatus
    next.socket_status = socketStatus
    next.socketStatus = socketStatus
  }

  return next
}

async function handleSocketControl(item, action) {
  const deviceId = item.id || item.deviceId
  const devEui = item.devEui || item.devEUI || item.dev_eui
  if (!devEui) {
    ElMessage.error('未找到设备 DevEUI，无法下发指令')
    return
  }

  const loadingKey = item.cardKey || String(deviceId)
  if (controlLoadingMap[loadingKey]) {
    return
  }

  controlLoadingMap[loadingKey] = true
  try {
    const status = action === 'on' ? 1 : 0
    await controlSocket({ devEui, deviceId, status })
    ElMessage.success(action === 'on' ? '开启排风指令已发送' : '关闭排风指令已发送')
  } finally {
    controlLoadingMap[loadingKey] = false
  }
}

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) || {}
  const nestedData = typeof row.data === 'object'
    ? row.data
    : (typeof row.data === 'string' ? parseJson(row.data) : null) || {}
  const inferredWaterStatus = deriveWaterStatus({
    ...json,
    ...nestedData,
    ...row
  })

  return {
    ...json,
    ...nestedData,
    ...row,
    devEUI: row.devEUI || row.devEui || json.devEUI || json.devEui,
    deviceName: row.deviceName || json.deviceName || nestedData.deviceName,
    waterStatus: row.waterStatus ?? row.water_status ?? nestedData.waterStatus ?? nestedData.water_status ?? json.waterStatus ?? json.water_status ?? inferredWaterStatus,
    water_status: row.water_status ?? row.waterStatus ?? nestedData.water_status ?? nestedData.waterStatus ?? json.water_status ?? json.waterStatus ?? inferredWaterStatus,
    socket_status: row.socket_status ?? row.socketStatus ?? nestedData.socket_status ?? nestedData.socketStatus ?? json.socket_status ?? json.socketStatus,
    switchStatus: row.switchStatus ?? row.socket_status ?? row.socketStatus ?? nestedData.switchStatus ?? nestedData.socket_status ?? nestedData.socketStatus ?? json.switchStatus ?? json.socket_status ?? json.socketStatus,
    doorStatus: row.doorStatus ?? row.door_status ?? nestedData.doorStatus ?? nestedData.door_status ?? json.doorStatus ?? json.door_status,
    tamperStatus: row.tamperStatus ?? row.tamper_status ?? nestedData.tamperStatus ?? nestedData.tamper_status ?? json.tamperStatus ?? json.tamper_status
  }
}

function parseJson(value) {
  if (!value || typeof value !== 'string') {
    return null
  }

  try {
    return JSON.parse(value)
  } catch (e) {
    return null
  }
}

function deriveStateFromEvent(row) {
  const eventType = String(row.eventType || row.event_type || row.event || '').trim().toLowerCase()
  const eventDesc = String(row.eventDesc || row.event_desc || row.statusDesc || row.status_desc || '').trim().toLowerCase()
  const normalized = {
    eventType: row.eventType || row.event_type,
    eventDesc: row.eventDesc || row.event_desc,
    statusDesc: row.statusDesc || row.status_desc
  }

  if (eventType === 'door_open' || eventDesc.includes('门已打开')) {
    normalized.doorStatus = 1
  } else if (eventType === 'door_close' || eventDesc.includes('门已关闭')) {
    normalized.doorStatus = 0
  }

  if (eventType === 'socket_on' || eventDesc.includes('插座通电')) {
    normalized.socket_status = 1
    normalized.switchStatus = 1
  } else if (eventType === 'socket_off' || eventDesc.includes('插座关闭') || eventDesc.includes('插座断电')) {
    normalized.socket_status = 0
    normalized.switchStatus = 0
  }

  const inferredWaterStatus = deriveWaterStatus(row)
  if (inferredWaterStatus !== undefined) {
    normalized.waterStatus = inferredWaterStatus
    normalized.water_status = inferredWaterStatus
  }

  return normalized
}

function deriveWaterStatus(data) {
  const eventType = String(data.eventType || data.event_type || data.event || data.status || '').trim().toLowerCase()
  const eventDesc = String(data.eventDesc || data.event_desc || data.statusDesc || data.status_desc || '').trim().toLowerCase()

  if (eventType === 'alarm' || eventDesc.includes('浸水预警') || eventDesc.includes('水浸预警') || eventDesc.includes('浸水报警') || eventDesc.includes('水浸报警')) {
    return 1
  }

  if (eventType === 'recovery' || eventType === 'normal' || eventDesc.includes('水浸正常') || eventDesc.includes('浸水正常')) {
    return 0
  }

  const directValue = data.waterStatus ?? data.water_status ?? data.water
  if (directValue !== undefined && directValue !== null && directValue !== '') {
    return directValue
  }

  return undefined
}

function deriveDoorStatus(data) {
  const directValue = data.doorStatus ?? data.door_status
  if (directValue !== undefined && directValue !== null && directValue !== '') {
    return directValue
  }

  const eventType = String(data.eventType || data.event_type || data.event || data.status || '').trim().toLowerCase()
  const eventDesc = String(data.eventDesc || data.event_desc || data.statusDesc || data.status_desc || '').trim().toLowerCase()

  if (eventType === 'door_open' || eventDesc.includes('门已打开')) {
    return 1
  }

  if (eventType === 'door_close' || eventDesc.includes('门已关闭')) {
    return 0
  }

  return undefined
}

function deriveSocketStatus(data) {
  const directValue = data.switchStatus ?? data.socket_status ?? data.socketStatus
  if (directValue !== undefined && directValue !== null && directValue !== '') {
    return directValue
  }

  const eventType = String(data.eventType || data.event_type || data.event || data.status || '').trim().toLowerCase()
  const eventDesc = String(data.eventDesc || data.event_desc || data.statusDesc || data.status_desc || '').trim().toLowerCase()

  if (eventType === 'socket_on' || eventDesc.includes('插座通电')) {
    return 1
  }

  if (eventType === 'socket_off' || eventDesc.includes('插座关闭') || eventDesc.includes('插座断电')) {
    return 0
  }

  return undefined
}

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 isStateDevice(device) {
  const raw = `${device.deviceType || ''} ${device.deviceName || ''}`.toLowerCase()
  return raw.includes('door') || raw.includes('socket')
}

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 ?? data.socketStatus ?? data.status)}`
  }

  if (type === 'door') {
    return `门禁状态：${translateSwitch(data.doorStatus ?? data.door_status ?? data.status)}`
  }

  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 || data.socketStatus !== undefined || data.status !== undefined)) {
    metrics.unshift({ label: '插座状态', value: translateSwitch(data.switchStatus ?? data.socket_status ?? data.socketStatus ?? data.status) })
  }

  if (type === 'door' && (data.doorStatus !== undefined || data.door_status !== undefined || data.status !== undefined)) {
    metrics.unshift({ label: '门禁状态', value: translateSwitch(data.doorStatus ?? data.door_status ?? data.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 ?? '').trim().toLowerCase()
  if (normalized === '0' || normalized === 'off' || normalized === 'false' || normalized === 'close' || normalized === 'closed') return '关闭'
  if (normalized === '1' || normalized === 'on' || normalized === 'true' || normalized === 'open' || normalized === 'opened') 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);
  }
}

.socket-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.control-btn {
  min-width: 94px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;

  &:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.68;
  }
}

.control-on {
  color: #065f46;
  background: linear-gradient(135deg, #dcfce7, #f0fdf4);
  border-color: #86efac;
  box-shadow: 0 10px 18px rgba(34, 197, 94, 0.12);
}

.control-off {
  color: #9a3412;
  background: linear-gradient(135deg, #ffedd5, #fff7ed);
  border-color: #fdba74;
  box-shadow: 0 10px 18px rgba(249, 115, 22, 0.12);
}

.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>