city-life-line/src/views/subSystem/drainage/jcbj/dqbj.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">{{ alarmList.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="dqbjGISMap" class="map-container"></div>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      :title="currentItem.name"
      width="620px"
      :close-on-click-modal="false"
      class="detail-dialog"
      @opened="onDialogOpened"
      @closed="onDialogClosed"
    >
      <div class="detail-content">
        <!-- 基本信息 -->
        <div class="detail-section">
          <div class="section-title">基本信息</div>
          <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.deviceNo }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">报警时间</span>
              <span class="info-value">{{ currentItem.time }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">报警类型</span>
              <span class="info-value">{{ currentItem.type }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">当前值</span>
              <span class="info-value highlight">{{ currentItem.value }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">阈值</span>
              <span class="info-value">{{ currentItem.threshold }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">位置</span>
              <span class="info-value">{{ currentItem.location }}</span>
            </div>
          </div>
        </div>

        <!-- 监测曲线 -->
        <div class="detail-section">
          <div class="section-title">监测曲线（近24小时）</div>
          <div ref="chartRef" class="monitor-chart"></div>
        </div>

        <!-- 周边环境 -->
        <div class="detail-section">
          <div class="section-title">周边环境</div>
          <div class="env-desc">{{ currentItem.envDesc }}</div>
        </div>

        <!-- 历史记录 -->
        <div class="detail-section">
          <div class="section-title">历史记录</div>
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in currentItem.historyRecords"
              :key="index"
              :timestamp="record.time"
              placement="top"
              :type="getTagType(record.level)"
            >
              <div class="timeline-content">
                <span class="timeline-name">{{ record.name }}</span>
                <span class="timeline-type">{{ record.type }}</span>
                <span class="timeline-value">{{ record.value }}</span>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="Dqbj">
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import locationIcon from '@/assets/images/location.png'
import { getAlarmDataPage } 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 })

// ==================== 等级映射 ====================
const levelMap = { 1: '严重', 2: '重要', 3: '一般' }

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

async function loadData() {
  try {
    const res = await getAlarmDataPage(1, 200, { equipmentType: 'drainage' })
    const pageData = res.code !== undefined ? res.data : res
    const records = pageData.records || pageData.rows || []
    alarmList.value = records
      .map(row => ({
        id: row.id,
        name: row.deviceName || '-',
        level: row.alarmLevel === 1 ? '严重' : row.alarmLevel === 2 ? '重要' : '一般',
        time: row.alarmTime || '-',
        type: row.warningType || '-',
        value: row.actualValue || '-',
        threshold: row.maxValue || '-',
        location: '-',
        deviceNo: row.deviceCode,
        envDesc: '-',
        lng: parseFloat(row.longitude),
        lat: parseFloat(row.latitude),
        historyRecords: []
      }))
      .filter(w => w.lng && w.lat && !isNaN(w.lng) && !isNaN(w.lat))
  } catch (error) {
    console.error('加载当前报警数据失败', error)
    ElMessage.error('加载当前报警数据失败')
  }
}

// ==================== 统计计算 ====================
const severeCount = computed(() => alarmList.value.filter(v => v.level === '严重').length)
const importantCount = computed(() => alarmList.value.filter(v => v.level === '重要').length)
const normalCount = computed(() => alarmList.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 = alarmList.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('dqbjGISMap')
  if (!container || typeof BMapGL === 'undefined') {
    console.warn('BMapGL 未加载或容器不存在')
    return
  }

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

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

    // 默认定位到第一个报警点位
    if (alarmList.value.length > 0) {
      const firstPoint = alarmList.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() {
  alarmList.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({})
const chartRef = ref(null)
let chartInstance = null

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

function onDialogOpened() {
  nextTick(() => {
    initChart()
  })
}

function onDialogClosed() {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
}

// ==================== ECharts 监测曲线 ====================
function initChart() {
  if (!chartRef.value) return
  chartInstance = echarts.init(chartRef.value)

  // 生成近24小时模拟数据
  const hours = []
  const values = []
  const now = new Date()
  const thresholdVal = parseFloat(currentItem.value.threshold) || 2.5
  const currentVal = parseFloat(currentItem.value) || 0
  const isLevel = currentItem.type === '液位超限' || currentItem.type === '降雨预警'

  for (let i = 23; i >= 0; i--) {
    const h = new Date(now.getTime() - i * 3600000)
    hours.push(h.getHours() + ':00')
    // 模拟波动数据
    const base = isLevel ? thresholdVal * 0.6 : thresholdVal * 0.5
    const peak = isLevel ? currentVal : currentVal * 0.9
    const noise = (Math.random() - 0.5) * base * 0.3
    const val = i < 6 ? peak - (6 - i) * (peak - base) / 8 + noise : base + noise + (i > 16 ? (i - 16) * (peak - base) / 8 : 0)
    values.push(Math.max(0, parseFloat(val.toFixed(2))))
  }

  const unit = isLevel ? 'm' : 'm³/h'
  const thresholdLine = Array(24).fill(thresholdVal)

  chartInstance.setOption({
    grid: { top: 30, right: 20, bottom: 30, left: 50 },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        let s = params[0].axisValue + '<br/>'
        params.forEach(p => {
          s += `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${p.color};margin-right:4px;"></span>${p.seriesName}: ${p.value}${unit}<br/>`
        })
        return s
      }
    },
    xAxis: {
      type: 'category',
      data: hours,
      axisLabel: { fontSize: 10, color: '#999' },
      axisLine: { lineStyle: { color: '#ddd' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { fontSize: 10, color: '#999', formatter: '{value}' + unit },
      splitLine: { lineStyle: { color: '#f0f0f0' } }
    },
    series: [
      {
        name: isLevel ? '液位' : '流量',
        type: 'line',
        data: values,
        smooth: true,
        lineStyle: { color: '#409eff', width: 2 },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64,158,255,0.3)' },
            { offset: 1, color: 'rgba(64,158,255,0.02)' }
          ])
        },
        itemStyle: { color: '#409eff' },
        symbol: 'circle',
        symbolSize: 4
      },
      {
        name: '阈值',
        type: 'line',
        data: thresholdLine,
        lineStyle: { color: '#f56c6c', width: 1, type: 'dashed' },
        itemStyle: { color: '#f56c6c' },
        symbol: 'none'
      }
    ]
  })
}

// ==================== 生命周期 ====================
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;
  max-height: 70vh;
  overflow-y: auto;
}

.detail-content {
  padding: 20px;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.detail-name {
  font-size: 15px;
  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;
}

/* 监测曲线 */
.monitor-chart {
  width: 100%;
  height: 240px;
}

/* 周边环境 */
.env-desc {
  font-size: 13px;
  color: #606266;
  line-height: 1.8;
  background: #f8f9fa;
  padding: 12px 16px;
  border-radius: 6px;
}

/* 历史记录时间线 */
.timeline-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timeline-name {
  font-size: 13px;
  color: #303133;
  font-weight: 500;
}

.timeline-type {
  font-size: 12px;
  color: #909399;
}

.timeline-value {
  font-size: 12px;
  color: #f56c6c;
  font-weight: 500;
}
</style>