city-life-line/src/views/subSystem/manholeCover/device/deviceApicture.vue

<!--监测设备一张图-->
<template>
  <div class="gis-monitor-dashboard">
    <!-- 顶部导航栏 -->
    <div class="dashboard-header">
      <div class="header-actions">
        <el-badge :value="onlineCount" type="primary">
          <el-button type="primary" plain :icon="Connection">在线设备</el-button>
        </el-badge>
        <el-badge :value="alertCount" type="danger">
          <el-button type="danger" plain :icon="WarningFilled">告警设备</el-button>
        </el-badge>
      </div>
    </div>

    <!-- 主体区域：左侧设备列表 + 右侧百度地图 -->
    <div class="main-layout">
      <!-- 左侧：设备列表 & 筛选 -->
      <div class="device-panel">
        <div class="panel-header">
          <span>监测设备列表</span>
          <el-input
              v-model="searchKeyword"
              placeholder="搜索设备名称/编号"
              clearable
              :prefix-icon="Search"
              size="small"
              @keyup.enter="handleSearch"
              @clear="handleSearch"
          />
        </div>
        <div class="filter-tabs">
          <el-radio-group v-model="typeFilter" size="small" @change="handleSearch">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="5">供水窨井</el-radio-button>
            <el-radio-button label="9">排水窨井</el-radio-button>
            <el-radio-button label="10">燃气窨井</el-radio-button>
          </el-radio-group>
        </div>
        <div class="device-list-scroll" v-loading="listLoading">
          <div
              v-for="device in devices"
              :key="device.id"
              class="device-item"
              :class="{ active: selectedDevice?.id === device.id }"
              @click="selectDevice(device)"
          >
            <div class="device-status-dot">
              <div class="status-icon" :style="{ backgroundColor: getStatusColor(device.status) }"></div>
            </div>
            <div class="device-info">
              <div class="device-name">{{ device.name }}</div>
              <div class="device-location">
                <el-icon><Location /></el-icon> {{ device.location || '未知位置' }}
              </div>
              <div class="device-meta">
                <el-tag size="small" :type="getStatusTag(device.status)">{{ getStatusText(device.status) }}</el-tag>
                <span class="device-time">{{ device.typeName }}</span>
              </div>
            </div>
          </div>
          <el-empty v-if="!listLoading && devices.length === 0" description="暂无设备数据" :image-size="80" />
          <!-- 分页 -->
          <div class="pagination-area">
            <el-pagination
                small
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                v-model:current-page="currentPage"
                @current-change="loadDevices"
            />
          </div>
        </div>
      </div>

      <!-- 右侧：百度地图展示区 -->
      <div class="gis-container">
        <div class="map-toolbar">
          <div class="tool-group">
            <span class="map-title">沅陵县窨井设备分布</span>
          </div>
          <div class="legend">
            <span><i class="legend-dot online"></i> 在线</span>
            <span><i class="legend-dot alert"></i> 告警</span>
            <span><i class="legend-dot offline"></i> 离线</span>
            <span><i class="legend-dot selected"></i> 选中设备</span>
          </div>
        </div>

        <!-- 百度地图容器 -->
        <div class="map-area">
          <div id="deviceApictureMap" class="bmap-container"></div>
        </div>

        <!-- 右下角 选中设备详情卡片 -->
        <transition name="slide-fade">
          <div v-if="selectedDevice" class="detail-card">
            <div class="card-header">
              <strong>设备详情</strong>
              <el-icon class="close-icon" @click="clearSelected"><Close /></el-icon>
            </div>
            <div class="card-body">
              <el-descriptions :column="1" border size="small">
                <el-descriptions-item label="设备编号">{{ selectedDevice.code }}</el-descriptions-item>
                <el-descriptions-item label="设备名称">{{ selectedDevice.name }}</el-descriptions-item>
                <el-descriptions-item label="设备类型">{{ selectedDevice.typeName }}</el-descriptions-item>
                <el-descriptions-item label="运维状态">
                  <el-tag :type="getStatusTag(selectedDevice.status)" size="small">{{ getStatusText(selectedDevice.status) }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="经纬度" v-if="selectedDevice.lng">{{ selectedDevice.lng }}, {{ selectedDevice.lat }}</el-descriptions-item>
                <el-descriptions-item label="详细地址">{{ selectedDevice.location }}</el-descriptions-item>
                <el-descriptions-item label="最后通讯">{{ selectedDevice.lastTime }}</el-descriptions-item>
                <el-descriptions-item label="电池电量" v-if="selectedDevice.battery !== null && selectedDevice.battery !== undefined">{{ selectedDevice.battery }}%</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { Location, Connection, WarningFilled, Search, Close } from '@element-plus/icons-vue'
import { getManholeDevicePage, getManholeAlarmDeviceList } from '@/api/pipeNetwork/basic'
import locationIcon from '@/assets/images/location.png'
import { ElMessage } from 'element-plus'
// 台账存 WGS84，百度地图是 BD-09，不转换会偏约 1 公里
import { convertCoord } from '@/utils/coordTransform'

// ==================== 分页查询（接口数据） ====================
const searchKeyword = ref('')
const typeFilter = ref('all')
const currentPage = ref(1)
const pageSize = 8
const devices = ref([])
const total = ref(0)
const listLoading = ref(false)

// 顶部统计：在线设备数 / 告警设备数
const onlineCount = ref(0)
const alertCount = ref(0)

// 加载分页设备列表（同时重建地图标记）
async function loadDevices() {
  listLoading.value = true
  try {
    const res = await getManholeDevicePage({
      pageNum: currentPage.value,
      pageSize,
      deviceName: searchKeyword.value.trim() || null,
      equipmentTypeId: typeFilter.value === 'all' ? null : typeFilter.value,
      isQueryManholeData: true
    })
    const rows = res.data?.records || []
    devices.value = rows.map(d => {
      const manholeData = d.manholeData || {}
      const isAlert = Number(d.equipmentStatus?.alarmStatus) === 1 ||
        Number(manholeData.alarmStatus) === 1 ||
        Number(manholeData.waterInfiltrationAlarmStatus) === 1 ||
        Number(manholeData.waterLevelAlarmStatus) === 1
      return {
        id: d.equipmentId,
        code: d.equipmentCode,
        name: d.equipmentName,
        equipmentTypeId: d.equipmentTypeId,
        typeName: d.equipmentTypeName,
        location: d.equipmentLocation,
        status: isAlert ? 'alert' : Number(d.equipmentStatus?.onlineStatus) === 1 ? 'online' : 'offline',
        lng: d.longitude != null ? Number(d.longitude) : null,
        lat: d.latitude != null ? Number(d.latitude) : null,
        battery: d.manholeData?.batteryLevel ?? null,
        lastTime: d.manholeData?.uploadTime || d.manholeData?.createTime || '-'
      }
    })
    total.value = res.data?.total || rows.length
    refreshMarkers()
  } catch (e) {
    ElMessage.error('设备列表加载失败')
  } finally {
    listLoading.value = false
  }
}

// 顶部统计：全量在线数 + 待处理告警设备数
async function loadOverview() {
  try {
    const [onlineRes, alarmRes] = await Promise.all([
      getManholeDevicePage({ pageNum: 1, pageSize: 1000, isQueryManholeData: false }),
      getManholeAlarmDeviceList({ alarmStatus: 1, isQueryManholeData: true })
    ])
    const rows = onlineRes.data?.records || []
    onlineCount.value = rows.filter(d => Number(d.equipmentStatus?.onlineStatus) === 1).length
    alertCount.value = alarmRes.data?.records?.length || 0
  } catch (e) {
    onlineCount.value = 0
    alertCount.value = 0
  }
}

const handleSearch = () => {
  currentPage.value = 1
  loadDevices()
}

// ==================== 选中设备 ====================
const selectedDevice = ref(null)

function selectDevice(device) {
  selectedDevice.value = device
  // 地图中心定位到该设备（无坐标则不移动）
  if (mapInstance && device.lng && device.lat) {
    mapInstance.centerAndZoom(toBdPoint(device.lng, device.lat), 16)
  }
  highlightMarker(device.id)
}

function clearSelected() {
  selectedDevice.value = null
  clearMarkerHighlight()
}

// ==================== 百度地图（BMapGL，中心定位沅陵县） ====================
let mapInstance = null
const markerMap = new Map()

// 沅陵县中心坐标（WGS84，展示前统一转 BD-09）
const YUANLING_CENTER = { lng: 110.393, lat: 28.452 }

/** 业务坐标（WGS84）→ 百度坐标点 */
function toBdPoint(lng, lat) {
  const [bdLng, bdLat] = convertCoord(Number(lng), Number(lat))
  return new BMapGL.Point(bdLng, bdLat)
}

function initMap() {
  const container = document.getElementById('deviceApictureMap')
  if (!container || typeof BMapGL === 'undefined') {
    console.warn('BMapGL 未加载或容器不存在')
    return
  }
  try {
    mapInstance = new BMapGL.Map('deviceApictureMap')
    mapInstance.centerAndZoom(toBdPoint(YUANLING_CENTER.lng, YUANLING_CENTER.lat), 13)
    mapInstance.enableScrollWheelZoom(true)
  } catch (e) {
    console.error('百度地图初始化失败：', e)
  }
}

function getStatusColor(status) {
  if (status === 'alert') return '#E64545'
  if (status === 'online') return '#67C23A'
  if (status === 'offline') return '#E67E22'
  return '#E6A23C'
}

// 添加设备地图标记（状态色名称气泡 + 定位图标）
function addMapMarker(device) {
  if (!mapInstance || device.lng == null || device.lat == null) return
  const color = getStatusColor(device.status)
  const bPoint = toBdPoint(device.lng, device.lat)
  const isAttention = device.status === 'alert' || device.status === 'offline'
  const attentionText = device.status === 'alert' ? '告警' : '离线'

  const html = isAttention
    ? `<div class="device-map-attention-marker device-map-${device.status}" title="${attentionText}设备：${device.name}">
        <div class="device-map-attention-badge">${attentionText} - ${device.name}</div>
        <div class="device-map-attention-pin">
          <i class="device-map-attention-ring"></i>
          <img src="${locationIcon}" alt="" />
        </div>
      </div>`
    : `<div style="text-align:center;cursor:pointer;">
        <div style="color:#fff;background:${color};border-radius:4px;padding:2px 8px;font-size:11px;white-space:nowrap;display:inline-block;margin-bottom:2px;box-shadow:0 1px 4px rgba(0,0,0,0.3);">
          ${device.name}
        </div>
        <div><img src="${locationIcon}" alt="" style="width:28px;height:28px;display:block;margin:0 auto;"/></div>
      </div>`

  const label = new BMapGL.Label(html, {
    position: bPoint,
    offset: new BMapGL.Size(isAttention ? -62 : -30, isAttention ? -68 : -50)
  })
  label.setStyle({
    border: 'none',
    background: 'transparent',
    padding: '0',
    zIndex: isAttention ? '20' : '10'
  })
  label.addEventListener('click', function () {
    selectDevice(device)
  })
  mapInstance.addOverlay(label)
  markerMap.set(device.id, label)
}

// 重建地图标记（跟随分页/筛选/搜索结果）
function refreshMarkers() {
  if (!mapInstance) return
  markerMap.forEach(label => mapInstance.removeOverlay(label))
  markerMap.clear()
  devices.value.forEach(device => addMapMarker(device))
}

// 高亮选中标记（放大地图标记气泡）
function highlightMarker(id) {
  markerMap.forEach((label, key) => {
    const dom = label.getContentContainer ? label.getContentContainer() : null
    if (dom) {
      const isSelected = key === id
      const attentionMarker = dom.querySelector('.device-map-attention-marker')
      dom.style.zIndex = isSelected ? '999' : attentionMarker ? '20' : '10'
      const title = attentionMarker || dom.querySelector('div')
      if (title) {
        title.style.transform = isSelected ? 'scale(1.15)' : 'scale(1)'
        title.style.transition = 'transform 0.2s'
        title.style.boxShadow = isSelected ? '0 0 0 2px #409eff' : '0 1px 4px rgba(0,0,0,0.3)'
      }
    }
  })
}

function clearMarkerHighlight() {
  markerMap.forEach((label, key) => {
    const dom = label.getContentContainer ? label.getContentContainer() : null
    if (dom) {
      const attentionMarker = dom.querySelector('.device-map-attention-marker')
      dom.style.zIndex = attentionMarker ? '20' : '10'
      const title = attentionMarker || dom.querySelector('div')
      if (title) {
        title.style.transform = 'scale(1)'
        title.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)'
      }
    }
  })
}

// 地图自适应窗口变化
const handleResize = () => {
  mapInstance && mapInstance.resize && mapInstance.resize()
}

// ==================== 状态文案 ====================
function getStatusText(status) {
  const map = { online: '在线', alert: '告警', offline: '离线' }
  return map[status] || status
}
function getStatusTag(status) {
  const map = { online: 'success', alert: 'danger', offline: 'warning' }
  return map[status] || ''
}

// ==================== 生命周期 ====================
onMounted(async () => {
  await nextTick()
  initMap()
  window.addEventListener('resize', handleResize)
  loadOverview()
  loadDevices()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  if (mapInstance) {
    mapInstance.clearOverlays && mapInstance.clearOverlays()
    mapInstance = null
  }
  markerMap.clear()
})
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.gis-monitor-dashboard {
  background: #f0f2f6;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
.dashboard-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: white;
  padding: 8px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  z-index: 10;
}
.header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}
.main-layout {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}
.device-panel {
  width: 320px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.panel-header {
  padding: 14px 16px;
  border-bottom: 1px solid #eaeef2;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.filter-tabs {
  padding: 10px 12px;
  border-bottom: 1px solid #eceef5;
}
.device-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.device-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  margin-bottom: 8px;
  background: #fafbfc;
  border-radius: 12px;
  transition: all 0.2s;
  cursor: pointer;
  border: 1px solid transparent;
}
.device-item.active {
  background: #ecf5ff;
  border-color: #409eff;
  box-shadow: 0 2px 6px rgba(64,158,255,0.2);
}
.device-status-dot .status-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 6px;
}
.device-info {
  flex: 1;
  min-width: 0;
}
.device-name {
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-location {
  font-size: 12px;
  color: #606266;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
  color: #909399;
}
.gis-container {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.map-toolbar {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  background: white;
  z-index: 2;
}
.map-title {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}
.legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  align-items: center;
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-right: 4px;
}
.legend-dot.online { background-color: #67C23A; }
.legend-dot.alert { background-color: #E64545; }
.legend-dot.offline { background-color: #E67E22; }
.legend-dot.selected { background-color: #409eff; box-shadow: 0 0 0 2px rgba(64,158,255,0.4); }
.map-area {
  flex: 1;
  position: relative;
  min-height: 0;
}
.bmap-container {
  width: 100%;
  height: 100%;
}
.detail-card {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 280px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 20;
  backdrop-filter: blur(2px);
  border: 1px solid #e0e4e8;
  overflow: hidden;
}
.card-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e9edf2;
  font-weight: 600;
}
.close-icon {
  cursor: pointer;
}
.card-body {
  padding: 12px;
}
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from, .slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.pagination-area {
  padding: 8px 0 4px;
  display: flex;
  justify-content: center;
}
</style>

<style>
/* 百度 Label 注入的 DOM 不带 scoped 属性，因此动画样式需要保持全局 */
.device-map-attention-marker {
  position: relative;
  width: 124px;
  height: 70px;
  cursor: pointer;
  text-align: center;
}
.device-map-attention-badge {
  position: relative;
  z-index: 2;
  display: inline-block;
  max-width: 118px;
  overflow: hidden;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 4px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(152, 23, 23, 0.55);
  font-size: 10px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.device-map-attention-pin {
  position: absolute;
  left: 50%;
  top: 27px;
  width: 28px;
  height: 34px;
  transform: translateX(-50%);
  animation: deviceMapAttentionBounce 1.1s ease-in-out infinite;
}
.device-map-attention-pin img {
  position: relative;
  z-index: 2;
  display: block;
  width: 28px;
  height: 28px;
}
.device-map-attention-ring {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: deviceMapAttentionPulse 1.5s ease-out infinite;
}
.device-map-alert .device-map-attention-badge { background: #E64545; }
.device-map-alert .device-map-attention-ring { border: 2px solid rgba(255, 75, 75, 0.95); }
.device-map-offline .device-map-attention-badge { background: #E67E22; }
.device-map-offline .device-map-attention-ring { border: 2px solid rgba(255, 166, 77, 0.95); }
@keyframes deviceMapAttentionBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -8px); }
}
@keyframes deviceMapAttentionPulse {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.7); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}
</style>