|
|
@@ -147,6 +147,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch }
|
|
|
import { FullScreen, Location, MapLocation, Minus, Plus, RefreshRight, Search } from '@element-plus/icons-vue'
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
import { convertCoord } from '@/utils/coordTransform'
|
|
|
+import { getPipeNetworkOptions, getGasPipePointPage, getManholeList } from '@/api/pipeNetwork/basic'
|
|
|
|
|
|
const centerPoint = { lng: 110.386, lat: 28.445 }
|
|
|
|
|
|
@@ -180,87 +181,52 @@ const boundaryPoints = [
|
|
|
|
|
|
const pipelineData = [
|
|
|
{
|
|
|
- id: 'pipe-high-01',
|
|
|
- level: 'high',
|
|
|
- name: '燃气1',
|
|
|
- code: 'GX-HP-001',
|
|
|
- length: 4.1,
|
|
|
- material: 'L290N 无缝钢管',
|
|
|
- diameter: 'DN300',
|
|
|
- pressure: '高压A (4.0MPa)',
|
|
|
- road: '燃气1主干线',
|
|
|
- status: '运行正常',
|
|
|
- layingMethod: '直埋敷设',
|
|
|
- depth: '1.8m',
|
|
|
- commissioningDate: '2026-06',
|
|
|
- points: [
|
|
|
- { lng: 110.404947, lat: 28.433419 },
|
|
|
- { lng: 110.404836, lat: 28.433429 },
|
|
|
- { lng: 110.403275, lat: 28.433571 },
|
|
|
- { lng: 110.401084, lat: 28.433876 },
|
|
|
- { lng: 110.399601, lat: 28.433876 },
|
|
|
- { lng: 110.398112, lat: 28.433979 },
|
|
|
- { lng: 110.396717, lat: 28.434314 },
|
|
|
- { lng: 110.394299, lat: 28.434538 },
|
|
|
- { lng: 110.394352, lat: 28.434887 },
|
|
|
- { lng: 110.391969, lat: 28.434985 },
|
|
|
- { lng: 110.384374, lat: 28.435695 },
|
|
|
- { lng: 110.381418, lat: 28.43559 },
|
|
|
- { lng: 110.377993, lat: 28.436193 },
|
|
|
- { lng: 110.376062, lat: 28.436385 },
|
|
|
- { lng: 110.374231, lat: 28.43655 },
|
|
|
- { lng: 110.372584, lat: 28.437107 },
|
|
|
- { lng: 110.371292, lat: 28.4377 },
|
|
|
- { lng: 110.370581, lat: 28.438198 },
|
|
|
- { lng: 110.369831, lat: 28.438821 }
|
|
|
- ]
|
|
|
+ id: 'pipe-high-01', level: 'high', name: '燃气1', code: 'GX-HP-001', length: 4.1,
|
|
|
+ material: 'L290N 无缝钢管', diameter: 'DN300', pressure: '高压A (4.0MPa)', road: '燃气1主干线',
|
|
|
+ status: '运行正常', layingMethod: '直埋敷设', depth: '1.8m', commissioningDate: '2026-06',
|
|
|
+ points: [{lng:110.404947,lat:28.433419},{lng:110.404836,lat:28.433429},{lng:110.403275,lat:28.433571},{lng:110.401084,lat:28.433876},{lng:110.399601,lat:28.433876},{lng:110.398112,lat:28.433979},{lng:110.396717,lat:28.434314},{lng:110.394299,lat:28.434538},{lng:110.394352,lat:28.434887},{lng:110.391969,lat:28.434985},{lng:110.384374,lat:28.435695},{lng:110.381418,lat:28.43559},{lng:110.377993,lat:28.436193},{lng:110.376062,lat:28.436385},{lng:110.374231,lat:28.43655},{lng:110.372584,lat:28.437107},{lng:110.371292,lat:28.4377},{lng:110.370581,lat:28.438198},{lng:110.369831,lat:28.438821}]
|
|
|
},
|
|
|
{
|
|
|
- id: 'pipe-subhigh-01',
|
|
|
- level: 'subHigh',
|
|
|
- name: '燃气2',
|
|
|
- code: 'GX-SHP-002',
|
|
|
- length: 3.8,
|
|
|
- material: 'L245N 无缝钢管',
|
|
|
- diameter: 'DN250',
|
|
|
- pressure: '次高压A (1.6MPa)',
|
|
|
- road: '燃气2支线',
|
|
|
- status: '运行正常',
|
|
|
- layingMethod: '直埋敷设',
|
|
|
- depth: '1.6m',
|
|
|
- commissioningDate: '2026-03',
|
|
|
- points: [
|
|
|
- { lng: 110.361433, lat: 28.454979 },
|
|
|
- { lng: 110.362363, lat: 28.453169 },
|
|
|
- { lng: 110.362851, lat: 28.452213 },
|
|
|
- { lng: 110.364377, lat: 28.452443 },
|
|
|
- { lng: 110.365138, lat: 28.45246 },
|
|
|
- { lng: 110.366462, lat: 28.452157 },
|
|
|
- { lng: 110.369549, lat: 28.451441 },
|
|
|
- { lng: 110.37219, lat: 28.450897 },
|
|
|
- { lng: 110.372753, lat: 28.450901 },
|
|
|
- { lng: 110.373875, lat: 28.451194 },
|
|
|
- { lng: 110.373913, lat: 28.451107 },
|
|
|
- { lng: 110.374597, lat: 28.451476 }
|
|
|
- ]
|
|
|
+ id: 'pipe-subhigh-01', level: 'subHigh', name: '燃气2', code: 'GX-SHP-002', length: 3.8,
|
|
|
+ material: 'L245N 无缝钢管', diameter: 'DN250', pressure: '次高压A (1.6MPa)', road: '燃气2支线',
|
|
|
+ status: '运行正常', layingMethod: '直埋敷设', depth: '1.6m', commissioningDate: '2026-03',
|
|
|
+ points: [{lng:110.361433,lat:28.454979},{lng:110.362363,lat:28.453169},{lng:110.362851,lat:28.452213},{lng:110.364377,lat:28.452443},{lng:110.365138,lat:28.45246},{lng:110.366462,lat:28.452157},{lng:110.369549,lat:28.451441},{lng:110.37219,lat:28.450897},{lng:110.372753,lat:28.450901},{lng:110.373875,lat:28.451194},{lng:110.373913,lat:28.451107},{lng:110.374597,lat:28.451476}]
|
|
|
}
|
|
|
]
|
|
|
|
|
|
-const pipePointData = [
|
|
|
- { id: 'point-valve-01', type: 'valve', pipelineId: 'pipe-high-01', name: 'A点', code: 'GD-FM-001', road: '燃气1', status: '在线', deviceModel: 'Z45X-16Q', caliber: 'DN300', lng: 110.362851, lat: 28.452213 },
|
|
|
- { id: 'point-valve-02', type: 'valve', pipelineId: 'pipe-high-01', name: 'B点', code: 'GD-FM-002', road: '燃气1', status: '在线', deviceModel: 'Z41H-25C', caliber: 'DN300', lng: 110.369549, lat: 28.451441 },
|
|
|
- { id: 'point-valve-03', type: 'valve', pipelineId: 'pipe-subhigh-01', name: 'C点', code: 'GD-FM-003', road: '燃气2', status: '在线', deviceModel: 'Z45X-16Q', caliber: 'DN250', lng: 110.373913, lat: 28.451107 },
|
|
|
- { id: 'point-regulator-01', type: 'regulator', pipelineId: 'pipe-high-01', name: 'D点', code: 'GD-TY-001', road: '燃气1', status: '在线', deviceModel: 'RTZ-80/0.4F', caliber: 'DN300', lng: 110.401084, lat: 28.433876 },
|
|
|
- { id: 'point-regulator-02', type: 'regulator', pipelineId: 'pipe-high-01', name: 'E点', code: 'GD-TY-002', road: '燃气1', status: '在线', deviceModel: 'RTZ-50/0.4F', caliber: 'DN250', lng: 110.391969, lat: 28.434985 },
|
|
|
- { id: 'point-flowmeter-01', type: 'flowmeter', pipelineId: 'pipe-high-01', name: 'F点', code: 'GD-LL-001', road: '燃气1', status: '在线', deviceModel: 'LWQZ-150', caliber: 'DN300', lng: 110.376062, lat: 28.436385 },
|
|
|
- { id: 'point-flowmeter-02', type: 'flowmeter', pipelineId: 'pipe-subhigh-01', name: 'G点', code: 'GD-LL-002', road: '燃气2', status: '在线', deviceModel: 'LWQZ-100', caliber: 'DN200', lng: 110.370581, lat: 28.438198 }
|
|
|
-]
|
|
|
+const pipePointData = ref([])
|
|
|
+const manholeData = ref([])
|
|
|
|
|
|
-const manholeData = [
|
|
|
- { id: 'manhole-cover-01', type: 'cover', pipelineId: 'pipe-high-01', name: 'A点窨井盖', code: 'YJ-JG-001', road: '燃气1', status: '完好', material: '球墨铸铁', size: 'Φ700', lng: 110.362851, lat: 28.452213 },
|
|
|
- { id: 'manhole-cover-02', type: 'cover', pipelineId: 'pipe-high-01', name: 'B点窨井盖', code: 'YJ-JG-002', road: '燃气1', status: '完好', material: '球墨铸铁', size: 'Φ700', lng: 110.369549, lat: 28.451441 },
|
|
|
- { id: 'manhole-inspection-01', type: 'inspection', pipelineId: 'pipe-subhigh-01', name: 'C点检查井', code: 'YJ-JC-001', road: '燃气2', status: '巡检正常', material: '钢筋混凝土', size: '1000×1000', lng: 110.373913, lat: 28.451107 },
|
|
|
-]
|
|
|
+async function loadGisData() {
|
|
|
+ try {
|
|
|
+ const [pointRes, manholeRes] = await Promise.all([
|
|
|
+ getGasPipePointPage(1, 500, {}),
|
|
|
+ getManholeList()
|
|
|
+ ])
|
|
|
+ const points = (pointRes.data && pointRes.data.records) ? pointRes.data.records : []
|
|
|
+ pipePointData.value = points.filter(p => p.longitude && p.latitude).map(p => ({
|
|
|
+ id: 'point-' + p.pointId, type: mapPointType(p.pointType), pipelineId: p.networkId,
|
|
|
+ name: p.pointName, code: p.pointCode, road: p.networkName || '', status: '在线',
|
|
|
+ deviceModel: p.material || '', caliber: p.diameter ? p.diameter + 'mm' : '',
|
|
|
+ lng: Number(p.longitude), lat: Number(p.latitude)
|
|
|
+ }))
|
|
|
+ const manholes = manholeRes.data || []
|
|
|
+ manholeData.value = manholes.filter(m => m.longitude && m.latitude).map(m => ({
|
|
|
+ id: 'manhole-' + m.manholeId, type: 'cover', pipelineId: m.networkId || '',
|
|
|
+ name: m.manholeName, code: m.manholeCode, road: '', status: m.status === '0' ? '完好' : '异常',
|
|
|
+ material: m.material || '', size: m.manholeShape || '', lng: Number(m.longitude), lat: Number(m.latitude)
|
|
|
+ }))
|
|
|
+ if (mapInstance && typeof BMapGL !== 'undefined') renderMapScene()
|
|
|
+ } catch (e) { console.error(e) }
|
|
|
+}
|
|
|
+
|
|
|
+function mapPointType(type) {
|
|
|
+ if (!type) return 'terminal'
|
|
|
+ if (type.includes('阀门') || type === 'valve') return 'valve'
|
|
|
+ if (type.includes('调压') || type === 'regulator') return 'regulator'
|
|
|
+ if (type.includes('计量') || type.includes('流量') || type === 'flowmeter') return 'flowmeter'
|
|
|
+ return 'terminal'
|
|
|
+}
|
|
|
|
|
|
const colorMap = {
|
|
|
high: '#e63946',
|
|
|
@@ -302,8 +268,8 @@ let overlayClicked = false
|
|
|
|
|
|
const summaryStats = computed(() => ({
|
|
|
pipelineLength: pipelineData.reduce((sum, item) => sum + item.length, 0).toFixed(1),
|
|
|
- pipePointCount: pipePointData.length,
|
|
|
- manholeCount: manholeData.length,
|
|
|
+ pipePointCount: pipePointData.value.length,
|
|
|
+ manholeCount: manholeData.value.length,
|
|
|
coverageArea: '18.6'
|
|
|
}))
|
|
|
|
|
|
@@ -323,7 +289,7 @@ const searchableFeatures = computed(() => {
|
|
|
lat: getMidPoint(item.points).lat,
|
|
|
raw: item
|
|
|
}))
|
|
|
- const pipePoints = pipePointData.map(item => ({
|
|
|
+ const pipePoints = pipePointData.value.map(item => ({
|
|
|
kind: 'pipePoint',
|
|
|
type: item.type,
|
|
|
name: item.name,
|
|
|
@@ -333,7 +299,7 @@ const searchableFeatures = computed(() => {
|
|
|
lat: item.lat,
|
|
|
raw: item
|
|
|
}))
|
|
|
- const manholes = manholeData.map(item => ({
|
|
|
+ const manholes = manholeData.value.map(item => ({
|
|
|
kind: 'manhole',
|
|
|
type: item.type,
|
|
|
name: item.name,
|
|
|
@@ -352,6 +318,7 @@ watch(layerState, () => {
|
|
|
|
|
|
onMounted(async () => {
|
|
|
await nextTick()
|
|
|
+ await loadGisData()
|
|
|
waitForBMapGL()
|
|
|
document.addEventListener('fullscreenchange', handleFullscreenChange)
|
|
|
})
|
|
|
@@ -461,7 +428,6 @@ function renderMapScene() {
|
|
|
|
|
|
closeInfoWindow()
|
|
|
try { mapInstance.clearOverlays() } catch (_) { /* ignore */ }
|
|
|
- try { drawBoundary() } catch (e) { console.warn('绘制围栏失败:', e) }
|
|
|
try { drawPipelines() } catch (e) { console.warn('绘制管线失败:', e) }
|
|
|
try { drawPipePoints() } catch (e) { console.warn('绘制管点失败:', e) }
|
|
|
try { drawManholes() } catch (e) { console.warn('绘制窨井失败:', e) }
|
|
|
@@ -511,7 +477,7 @@ function drawPipelines() {
|
|
|
}
|
|
|
|
|
|
function drawPipePoints() {
|
|
|
- pipePointData.forEach(item => {
|
|
|
+ pipePointData.value.forEach(item => {
|
|
|
try {
|
|
|
if (!layerState.pipePoints[item.type]) return
|
|
|
const [plng, plat] = convertCoord(item.lng, item.lat)
|
|
|
@@ -526,7 +492,7 @@ function drawPipePoints() {
|
|
|
}
|
|
|
|
|
|
function drawManholes() {
|
|
|
- manholeData.forEach(item => {
|
|
|
+ manholeData.value.forEach(item => {
|
|
|
try {
|
|
|
if (!layerState.manholes[item.type]) return
|
|
|
const [mlng, mlat] = convertCoord(item.lng, item.lat)
|
|
|
@@ -712,13 +678,14 @@ function handleSearch() {
|
|
|
ElMessage.success(`已定位到 ${matched.name}`)
|
|
|
}
|
|
|
|
|
|
-function refreshScene() {
|
|
|
+async function refreshScene() {
|
|
|
layerState.pipelines = { high: true, subHigh: true, medium: true, low: true }
|
|
|
layerState.pipePoints = { valve: true, regulator: true, flowmeter: true, terminal: true }
|
|
|
layerState.manholes = { cover: true, inspection: true }
|
|
|
searchKeyword.value = ''
|
|
|
selectedFeature.value = null
|
|
|
closeInfoWindow()
|
|
|
+ await loadGisData()
|
|
|
locateCenter()
|
|
|
}
|
|
|
|