排水-监测设备 GIS 一张图

src/api/pipeNetwork/basic.js

@@ -73,6 +73,12 @@ export function getManholeAlarmDeviceList(data = {}) {
   return request({ url: '/manhole/device/getManholeDataList', method: 'post', data })
 }
 
+// ============ 设备 GIS 地图（按 rootTypeId 统一查询供水/窨井等） ============
+// rootTypeId: 1-供水设备 4-窨井设备（空=全部），对应后端 EquipmentGISController
+export function getEquipmentGisPoints(params) {
+  return request({ url: '/equipment-gis/points', method: 'get', params })
+}
+
 // 查询窨井关联设备的井下最新监测数据（e_real_time_data / radar_data）
 export function getManholeRelDeviceData(equipmentId) {
   return request({ url: '/manhole/device/rel/data/' + equipmentId, method: 'get' })

src/views/subSystem/manholeCover/device/deviceApicture.vue

@@ -1,646 +0,0 @@
-<!--监测设备一张图-->
-<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>

src/views/subSystem/waterSupply/components/WaterDeviceGisMap.vue → src/views/subSystem/pipeNetwork/assetInfo/equipmentBase/equipmentGIS.vue

@@ -171,14 +171,18 @@
 
 <script setup>
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import { CircleCheck, CircleClose, MapLocation, Monitor, Refresh, Warning, WarningFilled } from '@element-plus/icons-vue'
 import GisMapCanvas from '@/components/GisMapCanvas.vue'
-import { getDeviceGisAllPoints } from '@/api/pipeNetwork/waterSupply'
+import { getEquipmentGisPoints } from '@/api/pipeNetwork/basic'
 import { getEquipmentDetail } from '@/api/pipeNetwork/pdeviceInform'
-import { normalizeDeviceGisPoints, normalizeDeviceRow } from '@/utils/waterSupplyUiModel'
 import { gisPointStatusIcons } from '@/utils/gisMapColors'
 import { buildMinioAttachmentUrl } from '@/utils/minioAttachment'
 
+const route = useRoute()
+// 由菜单 query 注入（如 {"rootTypeId":1} 供水 / {"rootTypeId":4} 窨井），空=全部
+const rootTypeId = ref(route.query.rootTypeId ? Number(route.query.rootTypeId) : undefined)
+
 const mapCenter = { lng: 110.3965, lat: 28.4638 }
 
 const allDevices = ref([])
@@ -316,12 +320,30 @@ function resolveImageUrl(url) {
   return buildMinioAttachmentUrl(url)
 }
 
+// 将 EquipmentBaseVO（统一设备台账）映射为地图点位设备对象
+function normalizeEquipment(row) {
+  return {
+    equipmentId: row.equipmentId,
+    equipmentCode: row.equipmentCode,
+    equipmentName: row.equipmentName,
+    equipmentTypeId: row.equipmentTypeId,
+    equipmentTypeName: row.equipmentTypeName,
+    equipmentImage: row.equipmentImage,
+    onlineStatus: row.onlineStatus,
+    alarmStatus: row.alarmStatus,
+    currentStatus: row.currentStatus,
+    _longitude: row.longitude != null ? Number(row.longitude) : null,
+    _latitude: row.latitude != null ? Number(row.latitude) : null
+  }
+}
+
 async function loadData() {
   loading.value = true
   mapError.value = ''
   try {
-    const allResponse = await getDeviceGisAllPoints()
-    allDevices.value = normalizeDeviceGisPoints(allResponse).map(normalizeDeviceRow)
+    const allResponse = await getEquipmentGisPoints({ rootTypeId: rootTypeId.value })
+    const list = allResponse?.data ?? allResponse
+    allDevices.value = (Array.isArray(list) ? list : []).map(normalizeEquipment)
     await nextTick()
     gisMapRef.value?.fitBounds()
   } catch (error) {

src/views/subSystem/waterSupply/device/gis.vue

@@ -1,7 +0,0 @@
-<script setup>
-import WaterDeviceGisMap from '../components/WaterDeviceGisMap.vue'
-</script>
-
-<template>
-  <WaterDeviceGisMap />
-</template>