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

<template>
  <div class="gis-page">
    <!-- 左侧浮动面板 -->
    <div class="side-panel">
      <div class="panel-header">
        <span class="panel-title">当前预警分布</span>
      </div>

      <!-- 等级筛选 -->
      <div class="panel-section">
        <div class="section-label">等级筛选</div>
        <div class="layer-list">
          <div class="layer-item">
            <el-checkbox v-model="levelChecked.severe" @change="onLevelChange">
              <span class="level-dot" style="background:#f56c6c"></span> 严重
            </el-checkbox>
          </div>
          <div class="layer-item">
            <el-checkbox v-model="levelChecked.important" @change="onLevelChange">
              <span class="level-dot" style="background:#e6a23c"></span> 重要
            </el-checkbox>
          </div>
          <div class="layer-item">
            <el-checkbox v-model="levelChecked.normal" @change="onLevelChange">
              <span class="level-dot" style="background:#409eff"></span> 一般
            </el-checkbox>
          </div>
        </div>
      </div>

      <!-- 统计数据 -->
      <div class="panel-section">
        <div class="section-label">预警统计</div>
        <div class="stats-row">
          <div class="stat-card">
            <div class="stat-value">{{ warningList.length }}</div>
            <div class="stat-text">总数</div>
          </div>
          <div class="stat-card stat-severe">
            <div class="stat-value">{{ severeCount }}</div>
            <div class="stat-text">严重</div>
          </div>
          <div class="stat-card stat-important">
            <div class="stat-value">{{ importantCount }}</div>
            <div class="stat-text">重要</div>
          </div>
          <div class="stat-card stat-normal">
            <div class="stat-value">{{ normalCount }}</div>
            <div class="stat-text">一般</div>
          </div>
        </div>
      </div>

      <!-- 搜索框 -->
      <div class="panel-section">
        <div class="section-label">快速定位</div>
        <el-input
          v-model="searchKey"
          placeholder="输入设备名称搜索"
          clearable
          prefix-icon="Search"
          @input="onSearch"
        />
        <div class="search-results" v-if="searchResults.length > 0">
          <div
            class="search-item"
            v-for="item in searchResults"
            :key="item.id"
            @click="locatePoint(item)"
          >
            <span class="level-dot" :style="{ background: getLevelColor(item.level) }"></span>
            <span class="search-name">{{ item.name }}</span>
            <span class="search-level" :class="getLevelClass(item.level)">{{ item.level }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 地图容器 -->
    <div id="dqyjGISMap" class="map-container"></div>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      :title="currentItem.name"
      width="480px"
      :close-on-click-modal="false"
      class="detail-dialog"
    >
      <div class="detail-content">
        <div class="detail-header">
          <el-tag :type="getTagType(currentItem.level)" effect="dark" size="small">
            {{ currentItem.level }}
          </el-tag>
          <span class="detail-name">{{ currentItem.name }}</span>
        </div>
        <div class="detail-info">
          <div class="info-row">
            <span class="info-label">预警编号</span>
            <span class="info-value">{{ currentItem.warningNo }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">预警级别</span>
            <span class="info-value">
              <el-tag :type="getTagType(currentItem.level)" effect="dark" size="small">{{ currentItem.level }}</el-tag>
            </span>
          </div>
          <div class="info-row">
            <span class="info-label">预警时间</span>
            <span class="info-value">{{ currentItem.createTime }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">位置</span>
            <span class="info-value">{{ currentItem.location }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">状态</span>
            <span class="info-value">{{ currentItem.statusText }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="DqyjGIS">
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import locationIcon from '@/assets/images/location.png'
import { getWarningCurrentPage } from '@/api/drainage'
import useUserStore from '@/store/modules/user'

// ==================== 用户信息 ====================
const userStore = useUserStore()
const isAdmin = computed(() => userStore.roles && userStore.roles.includes('admin'))

// ==================== 等级筛选 ====================
const levelChecked = reactive({ severe: true, important: true, normal: true })

// ==================== 预警数据（从API加载）====================
const warningList = ref([])

// 预警级别数字→文字映射
const levelMap = { 1: '严重', 2: '重要', 3: '一般' }

function statusText(status) {
  const map = { DRAFT: '草稿', PENDING: '待办', PROCESSING: '处置中', RELEASED: '已发布', HANDLED: '已处置', CLOSED: '已解除' }
  return map[status] ?? '-'
}

// 加载当前预警数据
async function loadData() {
  try {
    const params = {
      equipmentType: 'drainage',
      warningType: '2',
      currentOnly: true,
      userId: userStore.id,
      isAdmin: isAdmin.value
    }
    if (userStore.deptId) {
      params.deptId = userStore.deptId
    }
    const res = await getWarningCurrentPage(1, 1000, params)
    const pageData = res.code !== undefined ? res.data : res
    const records = pageData.records || []
    const hasCoordCount = records.filter(w => w.longitude && w.latitude).length
    console.log('[GIS预警] API返回记录数:', records.length, '有坐标记录数:', hasCoordCount)
    if (records.length > 0 && hasCoordCount === 0) {
      console.warn('[GIS预警] 所有预警均无经纬度坐标，请检查发布预警时设备是否有定位数据')
    }
    const noCoordRecords = records.filter(w => !w.longitude || !w.latitude)
    if (noCoordRecords.length > 0) {
      console.warn('[GIS预警] 无坐标预警(将被过滤):', noCoordRecords.map(w => ({ id: w.id, name: w.equipmentName, longitude: w.longitude, latitude: w.latitude })))
    }
    warningList.value = records.map(w => ({
      id: w.id,
      name: w.equipmentName || '-',
      warningNo: w.warningNo || '-',
      level: levelMap[w.warningLevel] || '一般',
      createTime: w.createTime || '-',
      location: w.location || '-',
      statusText: statusText(w.status),
      lng: parseFloat(w.longitude),
      lat: parseFloat(w.latitude)
    })).filter(w => w.lng && w.lat)
  } catch (error) {
    console.error('加载当前预警数据失败', error)
    ElMessage.error('加载当前预警数据失败')
  }
}

// ==================== 统计计算 ====================
const severeCount = computed(() => warningList.value.filter(v => v.level === '严重').length)
const importantCount = computed(() => warningList.value.filter(v => v.level === '重要').length)
const normalCount = computed(() => warningList.value.filter(v => v.level === '一般').length)

// ==================== 工具方法 ====================
function getLevelColor(level) {
  const map = { '严重': '#f56c6c', '重要': '#e6a23c', '一般': '#409eff' }
  return map[level] || '#409eff'
}

function getLevelClass(level) {
  const map = { '严重': 'level-severe', '重要': 'level-important', '一般': 'level-normal' }
  return map[level] || ''
}

function getTagType(level) {
  const map = { '严重': 'danger', '重要': 'warning', '一般': '' }
  return map[level] || ''
}

function getLevelKey(level) {
  const map = { '严重': 'severe', '重要': 'important', '一般': 'normal' }
  return map[level] || 'normal'
}

// ==================== 搜索功能 ====================
const searchKey = ref('')
const searchResults = ref([])

function onSearch() {
  if (!searchKey.value.trim()) {
    searchResults.value = []
    return
  }
  const key = searchKey.value.trim().toLowerCase()
  searchResults.value = warningList.value.filter(v =>
    v.name.toLowerCase().includes(key) || v.location.toLowerCase().includes(key)
  )
}

function locatePoint(item) {
  if (mapInstance) {
    mapInstance.centerAndZoom(new BMapGL.Point(item.lng, item.lat), 17)
    openDetail(item)
  }
  searchResults.value = []
  searchKey.value = ''
}

// ==================== 地图相关 ====================
let mapInstance = null
const markerMap = new Map()

function initMap() {
  const container = document.getElementById('dqyjGISMap')
  if (!container || typeof BMapGL === 'undefined') {
    console.warn('BMapGL 未加载或容器不存在')
    return
  }

  try {
    mapInstance = new BMapGL.Map('dqyjGISMap')
    const centerPoint = new BMapGL.Point(110.393, 28.452)
    mapInstance.centerAndZoom(centerPoint, 15)
    mapInstance.enableScrollWheelZoom(true)

    warningList.value.forEach(point => {
      addMapMarker(point)
    })

    // 默认定位到第一个预警点位
    if (warningList.value.length > 0) {
      const firstPoint = warningList.value[0]
      mapInstance.centerAndZoom(new BMapGL.Point(firstPoint.lng, firstPoint.lat), 15)
    }
  } catch (e) {
    console.error('百度地图初始化失败：', e)
  }
}

function addMapMarker(point) {
  const color = getLevelColor(point.level)
  const bPoint = new BMapGL.Point(point.lng, point.lat)

  const html = `<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);">
      ${point.name}
    </div>
    <div><img src="${locationIcon}" style="width:28px;height:28px;display:block;margin:0 auto;"/></div>
  </div>`

  const label = new BMapGL.Label(html, {
    position: bPoint,
    offset: new BMapGL.Size(-30, -50)
  })
  label.setStyle({
    border: 'none',
    background: 'transparent',
    padding: '0',
    zIndex: '10'
  })
  mapInstance.addOverlay(label)
  markerMap.set(point.id, label)

  label.addEventListener('click', function () {
    openDetail(point)
  })
}

// ==================== 等级筛选 ====================
function onLevelChange() {
  warningList.value.forEach(point => {
    const label = markerMap.get(point.id)
    if (!label) return
    const key = getLevelKey(point.level)
    const visible = levelChecked[key]
    label.show()
    if (!visible) {
      label.hide()
    }
  })
}

// ==================== 详情弹窗 ====================
const detailVisible = ref(false)
const currentItem = ref({})

function openDetail(point) {
  currentItem.value = { ...point }
  detailVisible.value = true
}

// ==================== 生命周期 ====================
onMounted(async () => {
  await loadData()
  nextTick(() => {
    initMap()
  })
})
</script>

<style scoped>
.gis-page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.map-container {
  width: 100%;
  height: 100%;
}

/* ==================== 左侧浮动面板 ==================== */
.side-panel {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 280px;
  background: rgba(6, 30, 65, 0.85);
  border-radius: 8px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  padding: 0;
  max-height: calc(100% - 32px);
  overflow-y: auto;
}

.side-panel::-webkit-scrollbar {
  width: 4px;
}

.side-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.panel-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

.panel-section {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.panel-section:last-child {
  border-bottom: none;
}

.section-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 等级列表 */
.layer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.layer-item :deep(.el-checkbox) {
  color: rgba(255, 255, 255, 0.85);
  height: auto;
}

.layer-item :deep(.el-checkbox__label) {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.layer-item :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background: #409eff;
  border-color: #409eff;
}

.level-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 2px;
  vertical-align: middle;
}

/* 统计卡片 */
.stats-row {
  display: flex;
  gap: 8px;
}

.stat-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px 4px;
  text-align: center;
}

.stat-card.stat-severe {
  background: rgba(245, 108, 108, 0.15);
}

.stat-card.stat-important {
  background: rgba(230, 162, 60, 0.15);
}

.stat-card.stat-normal {
  background: rgba(64, 158, 255, 0.15);
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.stat-severe .stat-value {
  color: #f56c6c;
}

.stat-important .stat-value {
  color: #e6a23c;
}

.stat-normal .stat-value {
  color: #409eff;
}

.stat-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

/* 搜索 */
.side-panel :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.side-panel :deep(.el-input__inner) {
  color: #fff;
  font-size: 13px;
}

.side-panel :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.35);
}

.side-panel :deep(.el-input__prefix .el-icon) {
  color: rgba(255, 255, 255, 0.4);
}

.search-results {
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 4px;
}

.search-results::-webkit-scrollbar {
  width: 3px;
}

.search-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.search-item {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}

.search-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.search-name {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-level {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
}

.search-level.level-severe {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.15);
}

.search-level.level-important {
  color: #e6a23c;
  background: rgba(230, 162, 60, 0.15);
}

.search-level.level-normal {
  color: #409eff;
  background: rgba(64, 158, 255, 0.15);
}

/* ==================== 详情弹窗样式 ==================== */
.detail-dialog :deep(.el-dialog) {
  border-radius: 10px;
  overflow: hidden;
}

.detail-dialog :deep(.el-dialog__header) {
  background: #1a1a2e;
  padding: 14px 20px;
  margin: 0;
}

.detail-dialog :deep(.el-dialog__title) {
  color: #fff;
  font-size: 15px;
}

.detail-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: rgba(255, 255, 255, 0.6);
}

.detail-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.detail-content {
  padding: 20px;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.detail-info {
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  width: 80px;
  flex-shrink: 0;
  font-size: 13px;
  color: #909399;
}

.info-value {
  font-size: 13px;
  color: #303133;
}

.info-value.highlight {
  color: #f56c6c;
  font-weight: 600;
}
</style>