排水系统提交

src/views/subSystem/dispatch/disOnDuty/DisOperation.vue

@@ -1,25 +0,0 @@
-<!--值守流程信息-->
-<script setup>
-
-</script>
-
-<template>
-<div>
-  5.2.3.1.1. 接报管理
-  对事件来源进行统一接报并受理。接报的数据来源包括管网巡查人员通过系统上报的突发事件数据、呼叫中心推送的信息、视频监控设备自动监测到的突发事件信息、上级单位/部门下达的处置任务信息等。这些信息接收到系统值班人员需通过研判后对事件的真实性、等级、类型及详细信息进行确定及核实。记录并形成接报的数据表，主要包括发生地点、发生事件、事件描述、接报记录人等信息。
-  预留应急事件对接接口。系统应该预留应急事件来源接口，方便后续对应急事件来源进行接入。
-  5.2.3.1.2. 初判核实
-  对事件类别和事件等级进行研判。值班人员对事件核实后需进一步对事件类别和事件等级进行研判，通过应急资源管理事件分级分类功能辅助研判，帮助值班人员准确的研判事件的类别和等级。事件信息通过人工判断确认事件的真实性及详细情况，确认时系统会根据事件类型不同给予需要核实的指标，辅助值班人员核实。经核实后，系统根据报警记录的相关信息，自动生成事件记录信息，并自动生成事件唯一标识号，并基于 GIS 地图实时展示事件坐标及进展状态。5.2.3.1.3. 转接报送
-  业务接报后，当事件涉及本属地范围内其他相关部门时，通过应急资源管理应急通讯录功能获取相关部门联系方式，通过电话方式将预警信息及时转给公安、交警、卫生、消防等部门。根据事件类型的不同，系统自动判断该事件是否需要转接，如果需要，则系统自动提示值班人员该事件类型应该转给哪个单位。系统会根据发布规则和事件的类别、等级自动提示值班人员需要向哪些部门发布。一般的信息是逐层上报，每个层级打开报送界面，系统会自动加载出需要报送的单位及人员，用户也可以自己重新选择对象报送。转接与报送的过程中，系统提供转接及报送的情况记录功能。
-  5.2.3.1.4. 工作催办
-  在应急系统需要时（如有公众报送需要核实、灾情等待上级审核时），根据账号与注册单位中的操作员关联来获取相应的目标接收者及其个人资料，然后周期性对目标接收者通过电话方式催办。
-  5.2.3.1.5. 跟踪解除
-  事件处理过程中，需要对事件的态势进行实时跟踪与解除。业务人员根据不同事件分级分类 设置定时回访时间，跟踪事件发展态势，及时变更事件状态。系统支持事件定时提醒及事件分级 分类变更。
-  事件的解除场景是通过核实发现事件不存在，或者是事件已经处置完成后。点击解除按钮，
-  事件的状态从处理中变成已处理。
-</div>
-</template>
-
-<style scoped lang="scss">
-
-</style>

src/views/subSystem/drainage/jcyj/dqyjGIS.vue

@@ -0,0 +1,590 @@
+<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.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>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="DqyjGIS">
+import { ref, reactive, computed, onMounted, nextTick } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import locationIcon from '@/assets/images/location.png'
+
+// ==================== 等级筛选 ====================
+const levelChecked = reactive({ severe: true, important: true, normal: true })
+
+// ==================== 模拟预警数据（12个点位）====================
+const warningList = ref([
+  { id: 1, name: '沅陵大桥液位计', level: '严重', time: '2026-06-12 08:23:15', type: '液位超限', value: '3.82m', threshold: '2.50m', location: '沅陵大桥南侧排水口', lng: 110.396, lat: 28.468 },
+  { id: 2, name: '太常路流量计', level: '重要', time: '2026-06-12 07:45:30', type: '流量异常', value: '1250m³/h', threshold: '800m³/h', location: '太常路与沅江路交汇', lng: 110.382, lat: 28.459 },
+  { id: 3, name: '沅江路液位计', level: '一般', time: '2026-06-12 09:10:05', type: '液位超限', value: '1.85m', threshold: '1.50m', location: '沅江路中段排水井', lng: 110.403, lat: 28.447 },
+  { id: 4, name: '龙舟路雨量计', level: '严重', time: '2026-06-12 06:30:22', type: '降雨预警', value: '85mm/h', threshold: '50mm/h', location: '龙舟路与建设路交汇', lng: 110.388, lat: 28.436 },
+  { id: 5, name: '城东泵站液位计', level: '重要', time: '2026-06-12 08:55:18', type: '液位超限', value: '4.12m', threshold: '3.00m', location: '城东开发区泵站', lng: 110.412, lat: 28.461 },
+  { id: 6, name: '一号泵站流量计', level: '一般', time: '2026-06-12 09:22:40', type: '流量异常', value: '680m³/h', threshold: '500m³/h', location: '沅陵大桥西侧泵站', lng: 110.391, lat: 28.465 },
+  { id: 7, name: '二号泵站液位计', level: '严重', time: '2026-06-12 05:18:33', type: '液位超限', value: '5.20m', threshold: '3.00m', location: '太常片区排水泵站', lng: 110.378, lat: 28.451 },
+  { id: 8, name: '沅水南岸流量计', level: '重要', time: '2026-06-12 07:32:10', type: '流量异常', value: '920m³/h', threshold: '600m³/h', location: '沅水南岸排水口', lng: 110.368, lat: 28.448 },
+  { id: 9, name: '建设路液位计', level: '一般', time: '2026-06-12 09:40:55', type: '液位超限', value: '2.10m', threshold: '1.80m', location: '建设路下穿通道', lng: 110.393, lat: 28.441 },
+  { id: 10, name: '城东下穿液位计', level: '严重', time: '2026-06-12 06:05:28', type: '液位超限', value: '3.95m', threshold: '2.00m', location: '城东立交桥下', lng: 110.415, lat: 28.457 },
+  { id: 11, name: '主城区管网流量计', level: '重要', time: '2026-06-12 08:12:45', type: '流量异常', value: '1100m³/h', threshold: '700m³/h', location: '主城区排水干管节点', lng: 110.390, lat: 28.460 },
+  { id: 12, name: '沅江路东段液位计', level: '一般', time: '2026-06-12 09:55:12', type: '液位超限', value: '1.62m', threshold: '1.50m', location: '沅江路东段检测井', lng: 110.407, lat: 28.455 }
+])
+
+// ==================== 统计计算 ====================
+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)
+    })
+  } 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(() => {
+  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>

src/views/subSystem/drainage/jcyj/lsyjGIS.vue

@@ -0,0 +1,608 @@
+<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="lsyjGISMap" 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.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 class="info-row">
+            <span class="info-label">处理状态</span>
+            <span class="info-value">
+              <el-tag :type="getStatusTagType(currentItem.status)" size="small">{{ currentItem.status }}</el-tag>
+            </span>
+          </div>
+          <div class="info-row" v-if="currentItem.processTime">
+            <span class="info-label">处理时间</span>
+            <span class="info-value">{{ currentItem.processTime }}</span>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="LsyjglGIS">
+import { ref, reactive, computed, onMounted, nextTick } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import locationIcon from '@/assets/images/location.png'
+
+// ==================== 等级筛选 ====================
+const levelChecked = reactive({ severe: true, important: true, normal: true })
+
+// ==================== 模拟历史预警数据（15个点位）====================
+const warningList = ref([
+  { id: 1, name: '沅陵大桥液位计', level: '严重', time: '2026-06-11 14:23:15', type: '液位超限', value: '4.10m', threshold: '2.50m', location: '沅陵大桥南侧排水口', status: '已处理', processTime: '2026-06-11 15:10:30', lng: 110.396, lat: 28.468 },
+  { id: 2, name: '太常路流量计', level: '重要', time: '2026-06-11 10:45:30', type: '流量异常', value: '1350m³/h', threshold: '800m³/h', location: '太常路与沅江路交汇', status: '已处理', processTime: '2026-06-11 11:30:20', lng: 110.382, lat: 28.459 },
+  { id: 3, name: '沅江路液位计', level: '一般', time: '2026-06-10 22:10:05', type: '液位超限', value: '1.92m', threshold: '1.50m', location: '沅江路中段排水井', status: '已关闭', processTime: '2026-06-11 08:00:00', lng: 110.403, lat: 28.447 },
+  { id: 4, name: '龙舟路雨量计', level: '严重', time: '2026-06-10 16:30:22', type: '降雨预警', value: '92mm/h', threshold: '50mm/h', location: '龙舟路与建设路交汇', status: '已处理', processTime: '2026-06-10 18:20:15', lng: 110.388, lat: 28.436 },
+  { id: 5, name: '城东泵站液位计', level: '重要', time: '2026-06-10 09:55:18', type: '液位超限', value: '3.80m', threshold: '3.00m', location: '城东开发区泵站', status: '已归档', processTime: '2026-06-10 14:00:00', lng: 110.412, lat: 28.461 },
+  { id: 6, name: '一号泵站流量计', level: '一般', time: '2026-06-09 20:22:40', type: '流量异常', value: '580m³/h', threshold: '500m³/h', location: '沅陵大桥西侧泵站', status: '已处理', processTime: '2026-06-09 21:15:00', lng: 110.391, lat: 28.465 },
+  { id: 7, name: '二号泵站液位计', level: '严重', time: '2026-06-09 15:18:33', type: '液位超限', value: '4.95m', threshold: '3.00m', location: '太常片区排水泵站', status: '已处理', processTime: '2026-06-09 16:45:00', lng: 110.378, lat: 28.451 },
+  { id: 8, name: '沅水南岸流量计', level: '重要', time: '2026-06-09 11:32:10', type: '流量异常', value: '1050m³/h', threshold: '600m³/h', location: '沅水南岸排水口', status: '已关闭', processTime: '2026-06-09 16:00:00', lng: 110.368, lat: 28.448 },
+  { id: 9, name: '建设路液位计', level: '一般', time: '2026-06-08 23:40:55', type: '液位超限', value: '2.05m', threshold: '1.80m', location: '建设路下穿通道', status: '已归档', processTime: '2026-06-09 09:00:00', lng: 110.393, lat: 28.441 },
+  { id: 10, name: '城东下穿液位计', level: '严重', time: '2026-06-08 18:05:28', type: '液位超限', value: '3.60m', threshold: '2.00m', location: '城东立交桥下', status: '已处理', processTime: '2026-06-08 19:30:00', lng: 110.415, lat: 28.457 },
+  { id: 11, name: '主城区管网流量计', level: '重要', time: '2026-06-08 12:12:45', type: '流量异常', value: '980m³/h', threshold: '700m³/h', location: '主城区排水干管节点', status: '已处理', processTime: '2026-06-08 13:40:00', lng: 110.390, lat: 28.460 },
+  { id: 12, name: '沅江路东段液位计', level: '一般', time: '2026-06-07 21:55:12', type: '液位超限', value: '1.72m', threshold: '1.50m', location: '沅江路东段检测井', status: '已关闭', processTime: '2026-06-08 06:00:00', lng: 110.407, lat: 28.455 },
+  { id: 13, name: '城北泵站液位计', level: '严重', time: '2026-06-07 14:28:50', type: '液位超限', value: '4.30m', threshold: '2.50m', location: '城北排水枢纽站', status: '已归档', processTime: '2026-06-07 17:00:00', lng: 110.385, lat: 28.472 },
+  { id: 14, name: '南岸雨量计', level: '重要', time: '2026-06-07 08:15:22', type: '降雨预警', value: '68mm/h', threshold: '50mm/h', location: '沅水南岸监测点', status: '已处理', processTime: '2026-06-07 10:30:00', lng: 110.372, lat: 28.443 },
+  { id: 15, name: '西郊流量计', level: '一般', time: '2026-06-06 17:40:08', type: '流量异常', value: '530m³/h', threshold: '500m³/h', location: '西郊排水管网节点', status: '已处理', processTime: '2026-06-06 18:50:00', lng: 110.360, lat: 28.455 }
+])
+
+// ==================== 统计计算 ====================
+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'
+}
+
+function getStatusTagType(status) {
+  const map = { '已处理': 'success', '已关闭': 'info', '已归档': '' }
+  return map[status] || ''
+}
+
+// ==================== 搜索功能 ====================
+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('lsyjGISMap')
+  if (!container || typeof BMapGL === 'undefined') {
+    console.warn('BMapGL 未加载或容器不存在')
+    return
+  }
+
+  try {
+    mapInstance = new BMapGL.Map('lsyjGISMap')
+    const centerPoint = new BMapGL.Point(110.393, 28.452)
+    mapInstance.centerAndZoom(centerPoint, 15)
+    mapInstance.enableScrollWheelZoom(true)
+
+    warningList.value.forEach(point => {
+      addMapMarker(point)
+    })
+  } 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(() => {
+  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>