city-life-line/src/views/subSystem/drainage/jcyj/components/WarningGisDetail.vue

<template>
  <el-drawer v-model="visible" :with-header="false" :close-on-click-modal="false" append-to-body size="780px"
    class="wgd-drawer" direction="rtl">
    <div class="wgd" v-if="record" v-loading="loading">
      <!-- ============ 顶部标题区 ============ -->
      <div class="wgd-hero" :class="`hero-${levelKey}`">
        <div class="hero-left">
          <div class="hero-badge">{{ levelText }}</div>
          <div class="hero-main">
            <div class="hero-name" :title="record.equipmentName">{{ record.equipmentName || '未命名预警' }}</div>
            <div class="hero-sub">
              <span class="hero-no">{{ record.warningNo || '—' }}</span>
              <span class="hero-dot">·</span>
              <span>{{ warningTypeText }}</span>
            </div>
          </div>
        </div>
        <div class="hero-right">
          <span class="hero-status" :class="`st-${statusKey}`">{{ statusTextValue }}</span>
          <el-button class="hero-close" text circle @click="close">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </div>

      <!-- ============ 关键指标条 ============ -->
      <div class="wgd-kpi">
        <div class="kpi-item">
          <div class="kpi-label">实时液位</div>
          <div class="kpi-value" :class="{ 'kpi-alarm': alarm }">
            <template v-if="metric.level !== null">{{ metric.level }}<i>m</i></template>
            <span v-else class="kpi-empty">—</span>
          </div>
        </div>
        <div class="kpi-item">
          <div class="kpi-label">报警阈值</div>
          <div class="kpi-value kpi-text">{{ metric.thresholdText || '未配置' }}</div>
        </div>
        <div class="kpi-item">
          <div class="kpi-label">采集时间</div>
          <div class="kpi-value kpi-text">{{ metric.collectTime || '—' }}</div>
        </div>
        <div class="kpi-item">
          <div class="kpi-label">{{ isHistory ? '归档时间' : '预警时间' }}</div>
          <div class="kpi-value kpi-text">
            {{ formatDateTime(isHistory ? archiveTime : record.createTime) }}
          </div>
        </div>
      </div>

      <!-- ============ 预警信息 ============ -->
      <div class="wgd-section">
        <div class="section-head">
          <span class="section-bar"></span>
          <span class="section-title">预警信息</span>
        </div>
        <el-descriptions :column="2" border size="small">
          <el-descriptions-item label="预警编号">{{ record.warningNo || '-' }}</el-descriptions-item>
          <el-descriptions-item label="预警名称">{{ record.equipmentName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="预警类型">{{ warningTypeText }}</el-descriptions-item>
          <el-descriptions-item label="预警级别">
            <el-tag :type="levelTagType" size="small">{{ levelText }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="预警专项">{{ record.warningSpecial || '-' }}</el-descriptions-item>
          <el-descriptions-item label="权属单位">{{ record.ownershipUnit || '-' }}</el-descriptions-item>
          <el-descriptions-item label="预警时间">{{ formatDateTime(record.createTime) }}</el-descriptions-item>
          <el-descriptions-item :label="isHistory ? '处理状态' : '当前状态'">
            <el-tag :type="statusTagType" size="small">{{ statusTextValue }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="位置" :span="2">{{ record.location || '-' }}</el-descriptions-item>
          <el-descriptions-item label="预警内容" :span="2">
            <div class="desc-text">{{ record.content || '-' }}</div>
          </el-descriptions-item>
          <el-descriptions-item v-if="record.remark" label="备注" :span="2">{{ record.remark }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- ============ 归档信息（仅历史预警） ============ -->
      <div class="wgd-section" v-if="isHistory">
        <div class="section-head">
          <span class="section-bar bar-green"></span>
          <span class="section-title">归档信息</span>
        </div>
        <el-descriptions :column="2" border size="small">
          <el-descriptions-item label="归档编号">{{ archiveNo }}</el-descriptions-item>
          <el-descriptions-item label="归档时间">{{ formatDateTime(archiveTime) }}</el-descriptions-item>
          <el-descriptions-item label="发布时间">{{ formatDateTime(record.publishTime) }}</el-descriptions-item>
          <el-descriptions-item label="处置人">{{ record.processor || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- ============ 关联设备与预警指标 ============ -->
      <div class="wgd-section">
        <div class="section-head">
          <span class="section-bar bar-blue"></span>
          <span class="section-title">关联设备与预警指标</span>
        </div>
        <el-descriptions v-if="device" :column="2" border size="small">
          <el-descriptions-item label="设备名称">{{ device.equipmentName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="设备编码">{{ device.equipmentCode || '-' }}</el-descriptions-item>
          <el-descriptions-item label="设备类型">
            {{ equipmentTypeMap.get(String(device.equipmentTypeId)) || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="在线状态">
            <el-tag :type="device.onlineStatus === 1 ? 'success' : 'info'" size="small">
              {{ device.onlineStatus === 1 ? '在线' : '离线' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="安装位置" :span="2">
            {{ device.equipmentLocation || record.location || '-' }}
          </el-descriptions-item>
        </el-descriptions>
        <el-alert v-else type="info" :closable="false" show-icon class="device-missing"
          title="未在设备台账中找到该预警关联的设备，实时指标无法展示" />

        <div class="threshold-table" v-if="thresholds.length">
          <el-table :data="thresholds" border size="small">
            <el-table-column label="监测指标" prop="warningName" min-width="140" />
            <el-table-column label="单位" width="90" align="center">
              <template #default="{ row }">{{ row.warningUnit || '-' }}</template>
            </el-table-column>
            <el-table-column label="阈值范围" min-width="160" align="center">
              <template #default="{ row }">{{ formatThreshold(row) }}</template>
            </el-table-column>
          </el-table>
        </div>
        <div class="threshold-empty" v-else-if="device">该设备尚未配置报警阈值</div>
      </div>

      <!-- ============ 处置信息 ============ -->
      <div class="wgd-section">
        <div class="section-head">
          <span class="section-bar bar-orange"></span>
          <span class="section-title">处置信息</span>
        </div>
        <el-descriptions :column="2" border size="small">
          <el-descriptions-item label="发布人">{{ record.publisher || '-' }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{ record.createBy || '-' }}</el-descriptions-item>
          <el-descriptions-item label="处置人">{{ record.processor || '-' }}</el-descriptions-item>
          <el-descriptions-item label="最后更新">{{ formatDateTime(record.updateTime) }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- ============ 底部 ============ -->
      <div class="wgd-footer">
        <el-button @click="close">关 闭</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup name="WarningGisDetail">
import { ref, computed, watch } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { getEquipmentTypeList, getLatestWaterLevelByDevice } from '@/api/drainage'
import { listEquipment } from '@/api/pipeNetwork/pdeviceInform'
import { pageWarningThresholds } from '@/api/warningThreshold'
import { listWarningTypes } from '@/api/warning/list'

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  /** 预警原始记录（保留后端返回的全部字段，展示靠它） */
  record: { type: Object, default: null },
  /** current=当前预警，history=历史预警（多一块归档信息） */
  mode: { type: String, default: 'current' }
})

const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const isHistory = computed(() => props.mode === 'history')

// ==================== 基础字典 / 映射（模块级缓存，两个 GIS 页共用一次请求）====================
const equipmentTypeMap = ref(new Map())
const warningTypeMap = ref(new Map())
let dictPromise = null

function loadDicts() {
  if (dictPromise) return dictPromise
  dictPromise = Promise.allSettled([
    getEquipmentTypeList('2'),
    listWarningTypes()
  ]).then(([typeResult, warnResult]) => {
    if (typeResult.status === 'fulfilled') {
      const res = typeResult.value
      const list = res?.code !== undefined ? res.data : res
      const map = new Map()
      if (Array.isArray(list)) {
        list.forEach((item) => {
          if (item?.id !== undefined && item?.id !== null) map.set(String(item.id), item.typeName)
        })
      }
      equipmentTypeMap.value = map
    }
    if (warnResult.status === 'fulfilled') {
      const res = warnResult.value
      const list = res?.data || res?.rows || []
      const map = new Map()
      if (Array.isArray(list)) {
        list.forEach((item) => {
          if (item?.dictValue) map.set(String(item.dictValue), item.dictLabel || item.dictValue)
        })
      }
      warningTypeMap.value = map
    }
  })
  return dictPromise
}

// ==================== 设备 / 实时指标（模块级缓存）====================
const deviceByName = ref(null)
const waterLevelMap = ref({})
const thresholdMap = ref({})
let metricPromise = null

const device = ref(null)
const thresholds = ref([])
const loading = ref(false)

/** 按设备名称反查排水设备台账（一页 100 条，最多 10 页） */
async function resolveDevice(equipmentName) {
  if (!equipmentName) return null
  if (!deviceByName.value) {
    const map = new Map()
    let pageNum = 1
    while (pageNum <= 10) {
      const res = await listEquipment({ rootTypeId: 2, pageNum, pageSize: 100 })
      const page = res?.data && Array.isArray(res.data.records) ? res.data : res
      const rows = page?.records || page?.rows || []
      if (!rows.length) break
      rows.forEach((item) => {
        if (item?.equipmentName && !map.has(item.equipmentName)) map.set(item.equipmentName, item)
      })
      if (rows.length < 100) break
      pageNum += 1
    }
    deviceByName.value = map
  }
  return deviceByName.value.get(equipmentName) || null
}

/** 实时液位 + 报警阈值，按设备编码索引 */
function loadLiveMetrics() {
  if (metricPromise) return metricPromise
  metricPromise = Promise.allSettled([
    getLatestWaterLevelByDevice(),
    pageWarningThresholds({ rootTypeId: 2, pageNum: 1, pageSize: 500 })
  ]).then(([levelResult, thresholdResult]) => {
    if (levelResult.status === 'fulfilled') {
      const value = levelResult.value
      const list = Array.isArray(value) ? value : (value?.data || [])
      const map = {}
      list.forEach((item) => {
        if (!item?.deviceCode) return
        map[item.deviceCode] = { value: item.waterLevel, time: item.createTime }
      })
      waterLevelMap.value = map
    }
    if (thresholdResult.status === 'fulfilled') {
      const res = thresholdResult.value
      const page = res?.data && Array.isArray(res.data.records) ? res.data : res
      const rows = page?.records || page?.rows || []
      const map = {}
      rows.forEach((row) => {
        if (!row?.deviceCode) return
        if (!map[row.deviceCode]) map[row.deviceCode] = []
        map[row.deviceCode].push(row)
      })
      thresholdMap.value = map
    }
  })
  return metricPromise
}

// ==================== 展示计算 ====================
const levelKey = computed(() => {
  const map = { 1: 'severe', 2: 'important', 3: 'normal' }
  return map[props.record?.warningLevel] || 'normal'
})
const levelText = computed(() => {
  const map = { 1: '严重', 2: '重要', 3: '一般' }
  return map[props.record?.warningLevel] || '一般'
})
const levelTagType = computed(() => {
  const map = { severe: 'danger', important: 'warning', normal: '' }
  return map[levelKey.value] || 'info'
})

const statusKey = computed(() => String(props.record?.status || 'unknown').toLowerCase())
const statusTextValue = computed(() => {
  const map = {
    DRAFT: '草稿', PENDING: '待办', RECEIVED: '已接收',
    PROCESSING: '处置中', HANDLED: '已处置', CLOSED: '已解除'
  }
  return map[props.record?.status] || '-'
})
const statusTagType = computed(() => {
  const map = {
    DRAFT: 'info', PENDING: 'warning', RECEIVED: 'warning',
    PROCESSING: 'warning', HANDLED: 'success', CLOSED: ''
  }
  return map[props.record?.status] || 'info'
})

/** 预警类型：新数据看 warningType，历史数据回退到 deviceCode 的设备类型名 */
const warningTypeText = computed(() => {
  const row = props.record
  if (!row) return '-'
  const byType = row.warningType ? warningTypeMap.value.get(String(row.warningType)) : null
  if (byType) return byType
  const byDevice = row.deviceCode ? equipmentTypeMap.value.get(String(row.deviceCode)) : null
  if (byDevice) return byDevice
  return row.warningType || '未分类'
})

/** 归档编号：预警解除即归档，由预警编号派生 */
const archiveNo = computed(() => {
  const no = props.record?.warningNo
  if (!no) return '-'
  return `ARC${String(no).replace(/^WRN/, '').slice(-12)}`
})
const archiveTime = computed(() => props.record?.updateTime || props.record?.publishTime || null)

/** 实时指标 + 是否越限 */
const metric = computed(() => {
  const code = device.value?.equipmentCode
  const levelItem = code ? waterLevelMap.value[code] : null
  const list = code ? (thresholdMap.value[code] || []) : []
  const value = levelItem && levelItem.value !== undefined && levelItem.value !== null ? levelItem.value : null
  return {
    level: value,
    collectTime: levelItem?.time ? formatDateTime(levelItem.time) : '',
    thresholdText: list.length ? list.map(formatThreshold).join(' / ') : '',
    max: pickUpper(list)
  }
})

const alarm = computed(() => {
  const level = metric.value.level
  const max = metric.value.max
  if (level === null || max === null) return false
  return Number(level) > Number(max)
})

/** 取阈值里最严的上限（区间取 maxValue，上限型取 maxValue） */
function pickUpper(list) {
  let upper = null
  list.forEach((item) => {
    if (item?.dataType === 1) return
    const val = item?.maxValue
    if (val === null || val === undefined || val === '') return
    const num = Number(val)
    if (Number.isNaN(num)) return
    upper = upper === null ? num : Math.min(upper, num)
  })
  return upper
}

function formatThreshold(item) {
  if (!item) return '-'
  const unit = item.warningUnit || ''
  const min = item.minValue
  const max = item.maxValue
  if (item.dataType === 1) return min === null || min === undefined ? '-' : `≥ ${min}${unit}`
  if (item.dataType === 2) return max === null || max === undefined ? '-' : `≤ ${max}${unit}`
  if ((min === null || min === undefined) && (max === null || max === undefined)) return '未设置'
  return `${min ?? '-'} ~ ${max ?? '-'}${unit}`
}

function formatDateTime(value) {
  if (!value) return '-'
  return String(value).replace('T', ' ').slice(0, 19)
}

// ==================== 加载 / 关闭 ====================
async function loadDetail(row) {
  device.value = null
  thresholds.value = []
  if (!row) return
  loading.value = true
  try {
    await loadDicts()
    const [matched] = await Promise.all([resolveDevice(row.equipmentName), loadLiveMetrics()])
    device.value = matched || null
    const code = matched?.equipmentCode
    thresholds.value = code ? (thresholdMap.value[code] || []) : []
  } catch (error) {
    console.warn('预警详情加载失败', error)
  } finally {
    loading.value = false
  }
}

function close() {
  visible.value = false
}

watch(
  () => [props.modelValue, props.record],
  ([shown, row]) => {
    if (shown) loadDetail(row)
  },
  { immediate: true }
)
</script>

<style scoped>
.wgd {
  padding: 0 4px 8px;
}

/* ==================== 顶部标题区 ==================== */
.wgd-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -20px -20px 0;
  padding: 22px 20px 20px;
  color: #fff;
  background: linear-gradient(135deg, #3a4a63 0%, #22304a 100%);
}

.wgd-hero.hero-severe {
  background: linear-gradient(135deg, #d9534f 0%, #8e2b28 100%);
}

.wgd-hero.hero-important {
  background: linear-gradient(135deg, #e6a23c 0%, #a86f16 100%);
}

.wgd-hero.hero-normal {
  background: linear-gradient(135deg, #409eff 0%, #1f5fa8 100%);
}

.hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.hero-badge {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
}

.hero-main {
  min-width: 0;
}

.hero-name {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 460px;
}

.hero-sub {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-no {
  font-family: Consolas, Monaco, monospace;
  letter-spacing: 0.5px;
}

.hero-dot {
  opacity: 0.6;
}

.hero-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hero-status {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.hero-status.st-pending,
.hero-status.st-received,
.hero-status.st-processing {
  background: rgba(255, 255, 255, 0.28);
}

.hero-close {
  color: rgba(255, 255, 255, 0.85);
}

.hero-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

/* ==================== 关键指标条 ==================== */
.wgd-kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #ebeef5;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  overflow: hidden;
  margin: 16px 0;
}

.kpi-item {
  background: #fafbfc;
  padding: 12px 14px;
  min-width: 0;
}

.kpi-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  line-height: 1.2;
}

.kpi-value i {
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: #909399;
  margin-left: 2px;
}

.kpi-value.kpi-text {
  font-size: 13px;
  font-weight: 500;
  word-break: break-all;
  line-height: 1.5;
}

.kpi-value.kpi-alarm {
  color: #f56c6c;
}

.kpi-empty {
  font-size: 20px;
  color: #c0c4cc;
}

/* ==================== 分区 ==================== */
.wgd-section {
  margin-bottom: 18px;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.section-bar {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: #f56c6c;
}

.section-bar.bar-green {
  background: #67c23a;
}

.section-bar.bar-blue {
  background: #409eff;
}

.section-bar.bar-orange {
  background: #e6a23c;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.desc-text {
  background: #f5f7fa;
  border-radius: 4px;
  padding: 10px;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
  max-height: 130px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.device-missing {
  margin-bottom: 10px;
}

.threshold-table {
  margin-top: 12px;
}

.threshold-empty {
  margin-top: 10px;
  font-size: 12px;
  color: #909399;
  background: #f5f7fa;
  border-radius: 4px;
  padding: 8px 12px;
}

/* ==================== 底部 ==================== */
.wgd-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}
</style>