|
@@ -7,12 +7,12 @@
|
|
|
<div class="map-tab" :class="{ active: mapTab === '雨水分区' }" @click="switchMapTab('雨水分区')">雨水分区</div>
|
|
<div class="map-tab" :class="{ active: mapTab === '雨水分区' }" @click="switchMapTab('雨水分区')">雨水分区</div>
|
|
|
<div class="map-tab" :class="{ active: mapTab === '污水分区' }" @click="switchMapTab('污水分区')">污水分区</div>
|
|
<div class="map-tab" :class="{ active: mapTab === '污水分区' }" @click="switchMapTab('污水分区')">污水分区</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div id="psfqglMainMap" class="map-container" style="height: 350px;"></div>
|
|
|
|
|
|
|
+ <div id="psfqglMainMap" class="map-container" style="height: 350px;"></div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 搜索区域 -->
|
|
<!-- 搜索区域 -->
|
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" class="search-form">
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" class="search-form">
|
|
|
- <el-form-item label="监测点名称">
|
|
|
|
|
|
|
+ <el-form-item label="分区名称">
|
|
|
<el-input v-model="queryParams.name" placeholder="请输入" clearable style="width: 200px" />
|
|
<el-input v-model="queryParams.name" placeholder="请输入" clearable style="width: 200px" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
<el-form-item label="地点">
|
|
<el-form-item label="地点">
|
|
@@ -39,7 +39,7 @@
|
|
|
<el-table v-loading="loading" :data="filteredList" border style="width: 100%"
|
|
<el-table v-loading="loading" :data="filteredList" border style="width: 100%"
|
|
|
@selection-change="handleSelectionChange">
|
|
@selection-change="handleSelectionChange">
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column label="监测点名称" prop="name" min-width="160" />
|
|
|
|
|
|
|
+ <el-table-column label="分区名称" prop="name" min-width="160" />
|
|
|
<el-table-column label="地点" prop="district" min-width="100" />
|
|
<el-table-column label="地点" prop="district" min-width="100" />
|
|
|
<el-table-column label="分区类型" prop="partitionType" min-width="100" />
|
|
<el-table-column label="分区类型" prop="partitionType" min-width="100" />
|
|
|
<el-table-column label="数据时间" prop="time" min-width="120" />
|
|
<el-table-column label="数据时间" prop="time" min-width="120" />
|
|
@@ -72,7 +72,7 @@
|
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
|
<div class="info-item">
|
|
<div class="info-item">
|
|
|
- <span class="info-label">监测点名称:</span>
|
|
|
|
|
|
|
+ <span class="info-label">分区名称:</span>
|
|
|
<span class="info-value">{{ currentRow.name }}</span>
|
|
<span class="info-value">{{ currentRow.name }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</el-col>
|
|
</el-col>
|
|
@@ -128,7 +128,7 @@
|
|
|
<!-- 地图区域 -->
|
|
<!-- 地图区域 -->
|
|
|
<div class="map-section">
|
|
<div class="map-section">
|
|
|
<div class="map-tabs">
|
|
<div class="map-tabs">
|
|
|
- <div class="map-tab active">位置标记</div>
|
|
|
|
|
|
|
+ <div class="map-tab active">分区面预览</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div id="psfqglViewMap" class="map-container"></div>
|
|
<div id="psfqglViewMap" class="map-container"></div>
|
|
|
</div>
|
|
</div>
|
|
@@ -140,8 +140,8 @@
|
|
|
<el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="100px">
|
|
<el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="100px">
|
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="监测点名称" prop="name">
|
|
|
|
|
- <el-input v-model="editForm.name" placeholder="请输入监测点名称" />
|
|
|
|
|
|
|
+ <el-form-item label="分区名称" prop="name">
|
|
|
|
|
+ <el-input v-model="editForm.name" placeholder="请输入分区名称" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
@@ -159,7 +159,8 @@
|
|
|
</el-col>
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
|
<el-form-item label="分区类型" prop="partitionType">
|
|
<el-form-item label="分区类型" prop="partitionType">
|
|
|
- <el-select v-model="editForm.partitionType" placeholder="请选择分区类型" style="width:100%">
|
|
|
|
|
|
|
+ <el-select v-model="editForm.partitionType" placeholder="请选择分区类型" style="width:100%"
|
|
|
|
|
+ @change="handlePartitionTypeChange">
|
|
|
<el-option label="雨水分区" value="雨水分区" />
|
|
<el-option label="雨水分区" value="雨水分区" />
|
|
|
<el-option label="污水分区" value="污水分区" />
|
|
<el-option label="污水分区" value="污水分区" />
|
|
|
</el-select>
|
|
</el-select>
|
|
@@ -193,12 +194,15 @@
|
|
|
<!-- 地图标点区域 -->
|
|
<!-- 地图标点区域 -->
|
|
|
<div class="map-section" style="margin-top: 16px;">
|
|
<div class="map-section" style="margin-top: 16px;">
|
|
|
<div class="map-tabs">
|
|
<div class="map-tabs">
|
|
|
- <div class="map-tab active">位置标记</div>
|
|
|
|
|
- <div class="map-tab-action" @click="clearEditMarkers">清除标记</div>
|
|
|
|
|
|
|
+ <div class="map-tab active">分区面绘制</div>
|
|
|
|
|
+ <div v-if="isPolygonPartition" class="map-tab-action" @click="togglePolygonDrawing">
|
|
|
|
|
+ {{ isDrawingPolygon ? '完成绘制' : '开始绘制' }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="map-tab-action" @click="clearEditMarkers">清除边界</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div id="psfqglEditMap" class="map-container" style="height: 350px;"></div>
|
|
<div id="psfqglEditMap" class="map-container" style="height: 350px;"></div>
|
|
|
<div class="marker-count">
|
|
<div class="marker-count">
|
|
|
- 经度:{{ editForm.longitude || '未标记' }},纬度:{{ editForm.latitude || '未标记' }}
|
|
|
|
|
|
|
+ {{ isPolygonPartition ? `已绘制 ${editPolygonPoints.length} 个点` : '请选择分区类型后绘制面' }}
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -219,11 +223,12 @@
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-form>
|
|
</el-form>
|
|
|
|
|
|
|
|
- <el-table ref="bindTableRef" v-loading="bindLoading" :data="bindTableData" row-key="equipmentId" border
|
|
|
|
|
|
|
+ <el-table ref="bindTableRef" v-loading="bindLoading" :data="bindTableData" row-key="equipmentId" border
|
|
|
style="width: 100%" height="400">
|
|
style="width: 100%" height="400">
|
|
|
<el-table-column label="选择" width="55" align="center">
|
|
<el-table-column label="选择" width="55" align="center">
|
|
|
<template #default="{ row }">
|
|
<template #default="{ row }">
|
|
|
- <el-radio v-model="selectedEquipmentId" :label="row.equipmentId"> </el-radio>
|
|
|
|
|
|
|
+ <el-checkbox :model-value="selectedEquipmentIds.includes(String(row.equipmentId))"
|
|
|
|
|
+ @change="toggleEquipment(row, $event)" />
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
<el-table-column label="设备名称" prop="equipmentName" min-width="160" />
|
|
<el-table-column label="设备名称" prop="equipmentName" min-width="160" />
|
|
@@ -283,6 +288,29 @@ let mainMapInstance = null
|
|
|
const mainMapMarkers = ref([])
|
|
const mainMapMarkers = ref([])
|
|
|
const mapTab = ref('all')
|
|
const mapTab = ref('all')
|
|
|
|
|
|
|
|
|
|
+function parsePolygonPoints(value) {
|
|
|
|
|
+ if (!value) return []
|
|
|
|
|
+ try {
|
|
|
|
|
+ const points = typeof value === 'string' ? JSON.parse(value) : value
|
|
|
|
|
+ return Array.isArray(points)
|
|
|
|
|
+ ? points.map(point => ({ lng: Number(point.lng), lat: Number(point.lat) }))
|
|
|
|
|
+ .filter(point => Number.isFinite(point.lng) && Number.isFinite(point.lat))
|
|
|
|
|
+ : []
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ return []
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function getPartitionCenter(item) {
|
|
|
|
|
+ const points = parsePolygonPoints(item.points)
|
|
|
|
|
+ if (points.length) {
|
|
|
|
|
+ const lng = points.reduce((sum, point) => sum + point.lng, 0) / points.length
|
|
|
|
|
+ const lat = points.reduce((sum, point) => sum + point.lat, 0) / points.length
|
|
|
|
|
+ return { lng, lat }
|
|
|
|
|
+ }
|
|
|
|
|
+ return { lng: Number(item.longitude), lat: Number(item.latitude) }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
function switchMapTab(tab) {
|
|
function switchMapTab(tab) {
|
|
|
mapTab.value = tab
|
|
mapTab.value = tab
|
|
|
renderMainMapMarkers()
|
|
renderMainMapMarkers()
|
|
@@ -310,16 +338,32 @@ function renderMainMapMarkers() {
|
|
|
})
|
|
})
|
|
|
mainMapMarkers.value = []
|
|
mainMapMarkers.value = []
|
|
|
|
|
|
|
|
- const list = tableData.value.filter(item => item.longitude && item.latitude)
|
|
|
|
|
|
|
+ const list = tableData.value.filter(item => parsePolygonPoints(item.points).length >= 3 || (item.longitude && item.latitude))
|
|
|
const filtered = mapTab.value === 'all'
|
|
const filtered = mapTab.value === 'all'
|
|
|
? list
|
|
? list
|
|
|
: list.filter(item => item.partitionType === mapTab.value)
|
|
: list.filter(item => item.partitionType === mapTab.value)
|
|
|
|
|
|
|
|
filtered.forEach(item => {
|
|
filtered.forEach(item => {
|
|
|
- const bPoint = new BMapGL.Point(item.longitude, item.latitude)
|
|
|
|
|
const color = item.partitionType === '污水分区' ? '#e6a23c' : '#409eff'
|
|
const color = item.partitionType === '污水分区' ? '#e6a23c' : '#409eff'
|
|
|
- const label = createMapMarker(mainMapInstance, bPoint, item.name, color)
|
|
|
|
|
- mainMapMarkers.value.push(label)
|
|
|
|
|
|
|
+ const points = parsePolygonPoints(item.points)
|
|
|
|
|
+ if (points.length >= 3) {
|
|
|
|
|
+ const polygon = new BMapGL.Polygon(points.map(point => new BMapGL.Point(point.lng, point.lat)), {
|
|
|
|
|
+ strokeColor: color,
|
|
|
|
|
+ fillColor: color,
|
|
|
|
|
+ strokeWeight: 2,
|
|
|
|
|
+ strokeOpacity: 0.8,
|
|
|
|
|
+ fillOpacity: 0.25
|
|
|
|
|
+ })
|
|
|
|
|
+ mainMapInstance.addOverlay(polygon)
|
|
|
|
|
+ mainMapMarkers.value.push(polygon)
|
|
|
|
|
+ const center = getPartitionCenter(item)
|
|
|
|
|
+ const label = createMapMarker(mainMapInstance, new BMapGL.Point(center.lng, center.lat), item.name, color)
|
|
|
|
|
+ mainMapMarkers.value.push(label)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ const bPoint = new BMapGL.Point(item.longitude, item.latitude)
|
|
|
|
|
+ const label = createMapMarker(mainMapInstance, bPoint, item.name, color)
|
|
|
|
|
+ mainMapMarkers.value.push(label)
|
|
|
|
|
+ }
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -445,16 +489,20 @@ function initViewMap() {
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
|
viewMapInstance = new BMapGL.Map('psfqglViewMap')
|
|
viewMapInstance = new BMapGL.Map('psfqglViewMap')
|
|
|
- const centerLng = currentRow.value.longitude || 110.393
|
|
|
|
|
- const centerLat = currentRow.value.latitude || 28.452
|
|
|
|
|
|
|
+ const center = getPartitionCenter(currentRow.value)
|
|
|
|
|
+ const centerLng = center.lng || 110.393
|
|
|
|
|
+ const centerLat = center.lat || 28.452
|
|
|
const centerPoint = new BMapGL.Point(centerLng, centerLat)
|
|
const centerPoint = new BMapGL.Point(centerLng, centerLat)
|
|
|
viewMapInstance.centerAndZoom(centerPoint, 15)
|
|
viewMapInstance.centerAndZoom(centerPoint, 15)
|
|
|
viewMapInstance.enableScrollWheelZoom(true)
|
|
viewMapInstance.enableScrollWheelZoom(true)
|
|
|
|
|
|
|
|
- // 如果有坐标,显示标记
|
|
|
|
|
- if (currentRow.value.longitude && currentRow.value.latitude) {
|
|
|
|
|
- const bPoint = new BMapGL.Point(currentRow.value.longitude, currentRow.value.latitude)
|
|
|
|
|
- createMapMarker(viewMapInstance, bPoint, currentRow.value.name)
|
|
|
|
|
|
|
+ const points = parsePolygonPoints(currentRow.value.points)
|
|
|
|
|
+ if (points.length >= 3) {
|
|
|
|
|
+ viewMapInstance.addOverlay(new BMapGL.Polygon(points.map(point => new BMapGL.Point(point.lng, point.lat)), {
|
|
|
|
|
+ strokeColor: '#409eff', fillColor: '#409eff', strokeWeight: 2, fillOpacity: 0.25
|
|
|
|
|
+ }))
|
|
|
|
|
+ } else if (currentRow.value.longitude && currentRow.value.latitude) {
|
|
|
|
|
+ createMapMarker(viewMapInstance, new BMapGL.Point(currentRow.value.longitude, currentRow.value.latitude), currentRow.value.name)
|
|
|
}
|
|
}
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
|
console.error('百度地图初始化失败:', e)
|
|
console.error('百度地图初始化失败:', e)
|
|
@@ -463,7 +511,7 @@ function initViewMap() {
|
|
|
|
|
|
|
|
// ==================== 新增/修改对话框 ====================
|
|
// ==================== 新增/修改对话框 ====================
|
|
|
const editDialogVisible = ref(false)
|
|
const editDialogVisible = ref(false)
|
|
|
-const editDialogTitle = ref('新增监测点')
|
|
|
|
|
|
|
+const editDialogTitle = ref('新增排水分区')
|
|
|
const editFormRef = ref(null)
|
|
const editFormRef = ref(null)
|
|
|
const isEditMode = ref(false)
|
|
const isEditMode = ref(false)
|
|
|
const editRowId = ref(null)
|
|
const editRowId = ref(null)
|
|
@@ -477,21 +525,28 @@ const editForm = ref({
|
|
|
waterlogging: 0,
|
|
waterlogging: 0,
|
|
|
level: 1,
|
|
level: 1,
|
|
|
longitude: null,
|
|
longitude: null,
|
|
|
- latitude: null
|
|
|
|
|
|
|
+ latitude: null,
|
|
|
|
|
+ points: ''
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
const editRules = {
|
|
const editRules = {
|
|
|
- name: [{ required: true, message: '请输入监测点名称', trigger: 'blur' }],
|
|
|
|
|
|
|
+ name: [{ required: true, message: '请输入分区名称', trigger: 'blur' }],
|
|
|
time: [{ required: true, message: '请选择数据时间', trigger: 'change' }]
|
|
time: [{ required: true, message: '请选择数据时间', trigger: 'change' }]
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 编辑弹窗地图相关
|
|
// 编辑弹窗地图相关
|
|
|
let editMapInstance = null
|
|
let editMapInstance = null
|
|
|
let editMarkerLabel = null
|
|
let editMarkerLabel = null
|
|
|
|
|
+let editPolygonOverlay = null
|
|
|
|
|
+const editPolygonPoints = ref([])
|
|
|
|
|
+const isDrawingPolygon = ref(false)
|
|
|
|
|
+const editPointOverlays = ref([])
|
|
|
|
|
+const polygonPartitionTypes = ['雨水分区', '污水分区']
|
|
|
|
|
+const isPolygonPartition = computed(() => polygonPartitionTypes.includes(editForm.value.partitionType))
|
|
|
|
|
|
|
|
function handleAdd() {
|
|
function handleAdd() {
|
|
|
isEditMode.value = false
|
|
isEditMode.value = false
|
|
|
- editDialogTitle.value = '新增监测点'
|
|
|
|
|
|
|
+ editDialogTitle.value = '新增排水分区'
|
|
|
editRowId.value = null
|
|
editRowId.value = null
|
|
|
editForm.value = {
|
|
editForm.value = {
|
|
|
name: '',
|
|
name: '',
|
|
@@ -502,14 +557,15 @@ function handleAdd() {
|
|
|
waterlogging: 0,
|
|
waterlogging: 0,
|
|
|
level: 1,
|
|
level: 1,
|
|
|
longitude: null,
|
|
longitude: null,
|
|
|
- latitude: null
|
|
|
|
|
|
|
+ latitude: null,
|
|
|
|
|
+ points: ''
|
|
|
}
|
|
}
|
|
|
editDialogVisible.value = true
|
|
editDialogVisible.value = true
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function handleEdit(row) {
|
|
function handleEdit(row) {
|
|
|
isEditMode.value = true
|
|
isEditMode.value = true
|
|
|
- editDialogTitle.value = '修改监测点'
|
|
|
|
|
|
|
+ editDialogTitle.value = '修改排水分区'
|
|
|
editRowId.value = row.id
|
|
editRowId.value = row.id
|
|
|
editForm.value = {
|
|
editForm.value = {
|
|
|
name: row.name,
|
|
name: row.name,
|
|
@@ -520,7 +576,8 @@ function handleEdit(row) {
|
|
|
waterlogging: row.waterlogging,
|
|
waterlogging: row.waterlogging,
|
|
|
level: row.level,
|
|
level: row.level,
|
|
|
longitude: row.longitude,
|
|
longitude: row.longitude,
|
|
|
- latitude: row.latitude
|
|
|
|
|
|
|
+ latitude: row.latitude,
|
|
|
|
|
+ points: row.points || ''
|
|
|
}
|
|
}
|
|
|
editDialogVisible.value = true
|
|
editDialogVisible.value = true
|
|
|
}
|
|
}
|
|
@@ -528,9 +585,13 @@ function handleEdit(row) {
|
|
|
function handleEditClose() {
|
|
function handleEditClose() {
|
|
|
editDialogVisible.value = false
|
|
editDialogVisible.value = false
|
|
|
if (editMapInstance) {
|
|
if (editMapInstance) {
|
|
|
- editMapInstance = null
|
|
|
|
|
|
|
+ editMapInstance = null
|
|
|
}
|
|
}
|
|
|
editMarkerLabel = null
|
|
editMarkerLabel = null
|
|
|
|
|
+ editPolygonOverlay = null
|
|
|
|
|
+ editPointOverlays.value = []
|
|
|
|
|
+ editPolygonPoints.value = []
|
|
|
|
|
+ isDrawingPolygon.value = false
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function onEditDialogOpened() {
|
|
function onEditDialogOpened() {
|
|
@@ -551,22 +612,15 @@ function initEditMap() {
|
|
|
editMapInstance.centerAndZoom(centerPoint, 15)
|
|
editMapInstance.centerAndZoom(centerPoint, 15)
|
|
|
editMapInstance.enableScrollWheelZoom(true)
|
|
editMapInstance.enableScrollWheelZoom(true)
|
|
|
|
|
|
|
|
- // 如果已有坐标,显示标记
|
|
|
|
|
- if (editForm.value.longitude && editForm.value.latitude) {
|
|
|
|
|
- const bPoint = new BMapGL.Point(editForm.value.longitude, editForm.value.latitude)
|
|
|
|
|
- editMarkerLabel = createMapMarker(editMapInstance, bPoint, editForm.value.name)
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ editPolygonPoints.value = parsePolygonPoints(editForm.value.points)
|
|
|
|
|
+ renderEditPolygon()
|
|
|
|
|
|
|
|
- // 点击地图更新标记
|
|
|
|
|
editMapInstance.addEventListener('click', function (e) {
|
|
editMapInstance.addEventListener('click', function (e) {
|
|
|
- editForm.value.longitude = e.latlng.lng
|
|
|
|
|
- editForm.value.latitude = e.latlng.lat
|
|
|
|
|
- // 清除旧标记,添加新标记
|
|
|
|
|
- if (editMarkerLabel) {
|
|
|
|
|
- editMapInstance.removeOverlay(editMarkerLabel)
|
|
|
|
|
- }
|
|
|
|
|
- const bPoint = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
|
|
|
|
|
- editMarkerLabel = createMapMarker(editMapInstance, bPoint, editForm.value.name)
|
|
|
|
|
|
|
+ if (!isDrawingPolygon.value || !isPolygonPartition.value) return
|
|
|
|
|
+ const point = e.latLng || e.latlng
|
|
|
|
|
+ if (!point) return
|
|
|
|
|
+ editPolygonPoints.value.push({ lng: point.lng, lat: point.lat })
|
|
|
|
|
+ renderEditPolygon()
|
|
|
})
|
|
})
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
|
console.error('百度地图初始化失败:', e)
|
|
console.error('百度地图初始化失败:', e)
|
|
@@ -574,18 +628,90 @@ function initEditMap() {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function clearEditMarkers() {
|
|
function clearEditMarkers() {
|
|
|
- if (editMapInstance && editMarkerLabel) {
|
|
|
|
|
- editMapInstance.removeOverlay(editMarkerLabel)
|
|
|
|
|
- editMarkerLabel = null
|
|
|
|
|
|
|
+ if (editMapInstance && editPolygonOverlay) editMapInstance.removeOverlay(editPolygonOverlay)
|
|
|
|
|
+ if (editMapInstance && editMarkerLabel) editMapInstance.removeOverlay(editMarkerLabel)
|
|
|
|
|
+ if (editMapInstance) {
|
|
|
|
|
+ editPointOverlays.value.forEach(overlay => editMapInstance.removeOverlay(overlay))
|
|
|
}
|
|
}
|
|
|
|
|
+ editPolygonOverlay = null
|
|
|
|
|
+ editMarkerLabel = null
|
|
|
|
|
+ editPointOverlays.value = []
|
|
|
|
|
+ editPolygonPoints.value = []
|
|
|
|
|
+ editForm.value.points = ''
|
|
|
editForm.value.longitude = null
|
|
editForm.value.longitude = null
|
|
|
editForm.value.latitude = null
|
|
editForm.value.latitude = null
|
|
|
|
|
+ isDrawingPolygon.value = false
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function handlePartitionTypeChange(type) {
|
|
|
|
|
+ if (!polygonPartitionTypes.includes(type)) clearEditMarkers()
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function renderEditPolygon() {
|
|
|
|
|
+ if (!editMapInstance) return
|
|
|
|
|
+ if (editPolygonOverlay) editMapInstance.removeOverlay(editPolygonOverlay)
|
|
|
|
|
+ editPointOverlays.value.forEach(overlay => editMapInstance.removeOverlay(overlay))
|
|
|
|
|
+ editPointOverlays.value = []
|
|
|
|
|
+ editPolygonPoints.value.forEach(point => {
|
|
|
|
|
+ const overlay = new BMapGL.Circle(new BMapGL.Point(point.lng, point.lat), 5, {
|
|
|
|
|
+ strokeColor: '#ffffff',
|
|
|
|
|
+ strokeWeight: 2,
|
|
|
|
|
+ strokeOpacity: 1,
|
|
|
|
|
+ fillColor: '#409eff',
|
|
|
|
|
+ fillOpacity: 1
|
|
|
|
|
+ })
|
|
|
|
|
+ editMapInstance.addOverlay(overlay)
|
|
|
|
|
+ editPointOverlays.value.push(overlay)
|
|
|
|
|
+ })
|
|
|
|
|
+ if (editPolygonPoints.value.length < 2) return
|
|
|
|
|
+ const points = editPolygonPoints.value.map(point => new BMapGL.Point(point.lng, point.lat))
|
|
|
|
|
+ const OverlayType = editPolygonPoints.value.length >= 3 ? BMapGL.Polygon : BMapGL.Polyline
|
|
|
|
|
+ editPolygonOverlay = new OverlayType(points, {
|
|
|
|
|
+ strokeColor: '#409eff',
|
|
|
|
|
+ strokeWeight: 2,
|
|
|
|
|
+ strokeOpacity: 0.9,
|
|
|
|
|
+ fillColor: '#409eff',
|
|
|
|
|
+ fillOpacity: 0.25
|
|
|
|
|
+ })
|
|
|
|
|
+ editMapInstance.addOverlay(editPolygonOverlay)
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function togglePolygonDrawing() {
|
|
|
|
|
+ if (!isPolygonPartition.value) return
|
|
|
|
|
+ if (isDrawingPolygon.value && editPolygonPoints.value.length < 3) {
|
|
|
|
|
+ ElMessage.warning('分区面至少需要绘制3个点')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ isDrawingPolygon.value = !isDrawingPolygon.value
|
|
|
|
|
+ if (!isDrawingPolygon.value) finalizePolygon()
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function finalizePolygon() {
|
|
|
|
|
+ if (editPolygonPoints.value.length < 3) return false
|
|
|
|
|
+ const points = editPolygonPoints.value.map(point => ({
|
|
|
|
|
+ lng: Number(point.lng.toFixed(8)),
|
|
|
|
|
+ lat: Number(point.lat.toFixed(8))
|
|
|
|
|
+ }))
|
|
|
|
|
+ editPolygonPoints.value = points
|
|
|
|
|
+ editForm.value.points = JSON.stringify(points)
|
|
|
|
|
+ editForm.value.longitude = points.reduce((sum, point) => sum + point.lng, 0) / points.length
|
|
|
|
|
+ editForm.value.latitude = points.reduce((sum, point) => sum + point.lat, 0) / points.length
|
|
|
|
|
+ renderEditPolygon()
|
|
|
|
|
+ return true
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function handleEditSubmit() {
|
|
function handleEditSubmit() {
|
|
|
editFormRef.value.validate(async valid => {
|
|
editFormRef.value.validate(async valid => {
|
|
|
if (!valid) return
|
|
if (!valid) return
|
|
|
|
|
|
|
|
|
|
+ if (isPolygonPartition.value) {
|
|
|
|
|
+ if (isDrawingPolygon.value) finalizePolygon()
|
|
|
|
|
+ if (editPolygonPoints.value.length < 3) {
|
|
|
|
|
+ ElMessage.warning('分区面至少需要在地图上绘制3个点')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
const formData = {
|
|
const formData = {
|
|
|
...editForm.value
|
|
...editForm.value
|
|
|
}
|
|
}
|
|
@@ -674,18 +800,15 @@ const bindTotal = ref(0)
|
|
|
const bindPageNum = ref(1)
|
|
const bindPageNum = ref(1)
|
|
|
const bindPageSize = ref(10)
|
|
const bindPageSize = ref(10)
|
|
|
const bindLoading = ref(false)
|
|
const bindLoading = ref(false)
|
|
|
-const selectedEquipmentId = ref('')
|
|
|
|
|
|
|
+const selectedEquipmentIds = ref([])
|
|
|
async function handleBind(row) {
|
|
async function handleBind(row) {
|
|
|
currentPartitionId.value = row.id
|
|
currentPartitionId.value = row.id
|
|
|
bindDialogVisible.value = true
|
|
bindDialogVisible.value = true
|
|
|
bindPageNum.value = 1
|
|
bindPageNum.value = 1
|
|
|
bindQueryParams.value.equipmentName = ''
|
|
bindQueryParams.value.equipmentName = ''
|
|
|
- // 回显已关联设备(取第一个)
|
|
|
|
|
- if (row.equipmentId) {
|
|
|
|
|
- selectedEquipmentId.value = row.equipmentId.split(',')[0].trim()
|
|
|
|
|
- } else {
|
|
|
|
|
- selectedEquipmentId.value = ''
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ selectedEquipmentIds.value = row.equipmentId
|
|
|
|
|
+ ? row.equipmentId.split(',').map(id => id.trim()).filter(Boolean)
|
|
|
|
|
+ : []
|
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
|
loadBindData()
|
|
loadBindData()
|
|
|
})
|
|
})
|
|
@@ -713,18 +836,26 @@ async function loadBindData() {
|
|
|
function closeBindDialog() {
|
|
function closeBindDialog() {
|
|
|
bindDialogVisible.value = false
|
|
bindDialogVisible.value = false
|
|
|
currentPartitionId.value = null
|
|
currentPartitionId.value = null
|
|
|
- selectedEquipmentId.value = ''
|
|
|
|
|
|
|
+ selectedEquipmentIds.value = []
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function toggleEquipment(row, checked) {
|
|
|
|
|
+ const id = String(row.equipmentId)
|
|
|
|
|
+ const ids = new Set(selectedEquipmentIds.value)
|
|
|
|
|
+ if (checked) ids.add(id)
|
|
|
|
|
+ else ids.delete(id)
|
|
|
|
|
+ selectedEquipmentIds.value = [...ids]
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
async function submitBind() {
|
|
async function submitBind() {
|
|
|
- if (!selectedEquipmentId.value) {
|
|
|
|
|
|
|
+ if (!selectedEquipmentIds.value.length) {
|
|
|
ElMessage.warning('请选择要关联的设备')
|
|
ElMessage.warning('请选择要关联的设备')
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
try {
|
|
try {
|
|
|
const res = await bindPartitionEquipment({
|
|
const res = await bindPartitionEquipment({
|
|
|
partitionId: currentPartitionId.value,
|
|
partitionId: currentPartitionId.value,
|
|
|
- equipmentIds: [selectedEquipmentId.value]
|
|
|
|
|
|
|
+ equipmentIds: selectedEquipmentIds.value
|
|
|
})
|
|
})
|
|
|
if (res.code === 0 || res.code === 200) {
|
|
if (res.code === 0 || res.code === 200) {
|
|
|
ElMessage.success('关联成功')
|
|
ElMessage.success('关联成功')
|