From c2e29fdee2d0e664961a84e95adf3882efbaf67a Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 06 Sep 2025 14:23:52 +0800
Subject: [PATCH] Merge branch 'prod' into feature/v5.0/5.0.5
---
src/views/resource/components/spotDetails.vue | 217 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 141 insertions(+), 76 deletions(-)
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index 06c273d..091ca0c 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -65,24 +65,31 @@
:row-class-name="tableRowClassName"
:data="tableData"
@row-click="handleLocationPolygon"
+ @current-change="handleTableRowChange"
>
- <el-table-column type="index" align="center" width="30" label="序号">
+ <el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号">
<template #default="{ $index }">
{{
($index + 1 + (params.page - 1) * params.pageSize).toString().padStart(2, '0')
}}
</template>
</el-table-column>
- <el-table-column prop="dkbh" align="center" label="图斑名称" show-overflow-tooltip />
- <el-table-column prop="is_exception" align="center" label="图斑状态">
+ <el-table-column prop="dkbh" align="center" label="图斑名称" show-overflow-tooltip />
+ <el-table-column prop="is_exception" :width="pxToRemNum(50)" align="center" label="图斑状态">
<template #default="scope">
<span>{{ scope.row.is_exception === 2 ? '异常' : '正常' }}</span>
</template>
</el-table-column>
- <el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
+ <el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
<template #default="scope">
<span class="operationspan" @click="handleDelete(scope.row)">删除</span>
- <span class="operationspan" @click="handleSelectionChange(scope.row)">编辑</span>
+ <span
+ class="operationspan"
+ v-if="scope.row.is_exception == 2"
+ @click.stop="handleSelectionChange(scope.row)"
+ >
+ {{ isEditing && selectionIds === scope.row.id ? '取消编辑' : '编辑' }}
+ </span>
</template>
</el-table-column>
</el-table>
@@ -103,54 +110,60 @@
</div>
</div>
<!--绘制按钮-->
- <FunButton
- ref="funButtonEle"
- v-model:isBoxSelect="isBoxSelect"
- v-model:isDrawPolygon="isDrawPolygon"
- ></FunButton>
+
+ <DrawPolygon
+ ref="drawPolygonRef"
+ v-if="isEditing"
+ @upDateDrawState="handleUpDateDrawState"
+ />
<!-- 完成/取消 -->
<div class="btnGroups" v-if="props.title === '图斑编辑'">
<img @click="handleSave" src="@/assets/images/home/territory/savebtn.png" alt="" />
<img @click="handleCancel" src="@/assets/images/home/territory/cancelbtn.png" alt="" />
</div>
<!-- 地图 -->
- <div id="spotMap" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
+ <div id="spotMap" v-loading="loading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.7)" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
</div>
</div>
</el-dialog>
</template>
<script setup>
+import { pxToRem, pxToRemNum } from '@/utils/rem'
+import DrawPolygon from '@/views/resource/components/DrawPolygon.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
+import { findAreaName } from '@/utils/areaUtils';
import {
patchEditApi,
- spotManagementTableApi,
- searchManagementApi,
- uploadManagementApi,
tableMapListApi,
deletePatches,
+ AlltableMapListApi,
+ spotManagementTableApi,
} from '@/api/patchManagement/index';
import { getCenterPoint } from '@/utils/cesium/mapUtil.js';
-import { getPatchesSpotList } from '@/api/patchManagement/index';
+
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import { ref, watch, onBeforeUnmount, onMounted } from 'vue';
-import FunButton from '@/views/resource/components/FunButton.vue';
const uploadPatchDialog = defineModel('show');
-const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption']);
+const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption', 'regionalData']);
const polygonTableEle = ref(null);
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
const homeViewer = shallowRef(null);
let tbJwdList = [];
+const loading = ref(false);
+const tableData = ref([]);
+const AlltableData = ref([]);
let total = ref(0);
const refreshonload = inject('searchReset');
const initialFileName = ref('');
const initialSpotTypeId = ref('');
const initialSpotTypeLabel = ref('');
-// 当前选中的图斑面数据
-let nowSelectObj = ref({});
+const spotManagementData = ref(null);
+const isEditing = ref(false);
+const drawPolygonRef = ref(null);
// 记录上一次点击高亮
let lastHighlightRow = null;
// 功能按钮区域相关：编辑图斑等
@@ -191,48 +204,47 @@
{ immediate: true }
);
watch(
- () => props.detailList,
+ () => spotManagementData.value,
newVal => {
- if (newVal) {
- updateInfoList(newVal);
- }
+ if (newVal) updateInfoList(newVal);
},
{ immediate: true }
);
+
+// 图斑编辑详情
+const getspotManagementTableApi = () => {
+ spotManagementTableApi({ id: props.detailid }).then(res => {
+ spotManagementData.value = {
+ ...res.data.data.records[0],
+ dataFrom: res.data.data.records[0].date_from === 0 ? '本地上传' : '国土调查云',
+ areaName: findAreaName(res.data.data.records[0].area_code, props.regionalData, true),
+ };
+ });
+};
+
// 将 lot_type_id 转换为对应的 label
const getPatchTypeLabel = lotTypeId => {
const option = spotTypeOptions.value.find(opt => opt.value === String(lotTypeId));
return option ? option.label : '';
};
const updateInfoList = detailData => {
- if (detailData && (initialFileName.value === '' || initialSpotTypeId.value === '')) {
+ if (!detailData) return;
+ if (initialFileName.value === '' || initialSpotTypeId.value === '') {
initialFileName.value = detailData.file_name || '';
initialSpotTypeId.value = detailData.lot_type_id || '';
- initialSpotTypeLabel.value = detailData.patches_type_desc
- ? detailData.patches_type_desc
- : getPatchTypeLabel(detailData.lot_type_id);
+ initialSpotTypeLabel.value =
+ detailData.patches_type_desc || getPatchTypeLabel(detailData.lot_type_id);
}
-
infoList.value = infoList.value.map(item => {
- let value = detailData[item.field] !== undefined ? detailData[item.field] : item.value;
-
+ const value = detailData[item.field] ?? item.value;
if (item.name === '图斑类型') {
- if (detailData.patches_type_desc !== undefined) {
- return {
- ...item,
- value: detailData.patches_type_desc,
- originalValue: detailData.lot_type_id,
- };
- } else if (detailData.lot_type_id !== undefined) {
- return {
- ...item,
- value: getPatchTypeLabel(detailData.lot_type_id),
- originalValue: detailData.lot_type_id,
- };
- }
+ return {
+ ...item,
+ value: detailData.patches_type_desc || getPatchTypeLabel(detailData.lot_type_id),
+ originalValue: detailData.lot_type_id,
+ };
}
-
- return { ...item, value: value };
+ return { ...item, value };
});
};
const params = ref({
@@ -254,10 +266,35 @@
total.value = res.data.data.total || res.data.data.length;
tbJwdList = [];
viewer?.entities.removeAll();
- entitiesAddSpot();
+ if (!AlltableData.value) {
+ viewInstance.value?.flyToContour();
+ } else {
+ entitiesAddSpot();
+ }
});
};
+// 所有图斑数据
+const getAlltableMapListApi = () => {
+ loading.value = true;
+ const requestParams = {
+ patchesInfoId: props.detailid,
+ };
+ AlltableMapListApi(requestParams).then(res => {
+ AlltableData.value = res.data.data?.map(item => ({
+ ...item,
+ dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
+ }));
+ tbJwdList = [];
+ viewer?.entities.removeAll();
+ if (AlltableData.value.length < 1) {
+ viewInstance.value?.flyToContour();
+ } else {
+ entitiesAddSpot();
+ }
+ loading.value = false;
+ });
+};
const handleSizeChange = val => {
params.value.pageSize = val;
params.value.page = 1;
@@ -267,7 +304,7 @@
params.value.page = val;
getTableList();
};
-const tableData = ref([]);
+
// 地图
const initMap = () => {
if (!document.getElementById('spotMap')) {
@@ -284,11 +321,12 @@
viewer = publicCesiumInstance.getViewer();
viewInstance.value = publicCesiumInstance;
viewer.scene.globe.depthTestAgainstTerrain = true;
+ viewInstance.value.switchContour(true);
};
// 初始化所有图斑
const entitiesAddSpot = () => {
viewer?.entities.removeAll();
- tableData.value.forEach(item => {
+ AlltableData.value.forEach(item => {
// 取出当中经纬度
const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
if (!numbersWithCommas) return;
@@ -334,10 +372,7 @@
const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
homeViewer.value?.camera.flyToBoundingSphere(boundingSphere, {
duration: 0,
- offset: new Cesium.HeadingPitchRange(
- Cesium.Math.toRadians(-45),
- Cesium.Math.toRadians(-90)
- ),
+ offset: new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-90)),
});
}
viewInstance.value?.removeLeftClickEvent('spotHighlighting');
@@ -346,9 +381,6 @@
};
// 高亮当前选中图斑，并定位
-// const handleLocationPolygon = data => {
-// updateMapSpotInfo(data);
-// };
const getEntityByDataId = dataId => {
if (!homeViewer.value) return null;
const entityId = `polygon_dk${dataId}`;
@@ -356,6 +388,15 @@
};
const handleLocationPolygon = data => {
if (!data) return;
+
+ // 取消任何现有的绘制状态（与编辑取消逻辑一致）
+ if (isEditing.value) {
+ isEditing.value = false;
+ handleUpDateDrawState(false);
+ selectionIds.value = null;
+ selectionList.value = [];
+ }
+
const targetEntity = getEntityByDataId(data.id);
if (targetEntity) {
updateMapSpotInfo(targetEntity);
@@ -373,6 +414,7 @@
});
}
};
+
// 鼠标触发点击图斑高亮 pick：可以获取当前图斑数据
function spotHighlighting(click, pick, viewer) {
let entities = viewer?.scene
@@ -380,7 +422,7 @@
.filter(item => item.id)
.map(i => i.id)
.filter(i => i._customType === 'pattern_spot_polygon');
- if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
+ if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
const nowEntity = entities?.[0];
const nowData = nowEntity.customInfo;
const clickTableID = tableData.value.findIndex(i => i.id === nowData.id);
@@ -412,15 +454,14 @@
const lastData = lastEntity.customInfo;
const originalFillColor =
lastData.is_exception === 2
- ? Cesium.Color.RED.withAlpha(0.5)
- : Cesium.Color.YELLOW.withAlpha(0.5);
- const originalOutlineColor = lastData.is_exception == 2
- ? Cesium.Color.RED
- : Cesium.Color.YELLOW;
+ ? Cesium.Color.RED.withAlpha(0.5)
+ : Cesium.Color.YELLOW.withAlpha(0.5);
+ const originalOutlineColor =
+ lastData.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
- lastEntity.polygon.material = originalFillColor;
- lastEntity.polygon.outlineColor = originalOutlineColor;
- lastEntity.polyline.material = originalOutlineColor;
+ lastEntity.polygon.material = originalFillColor;
+ lastEntity.polygon.outlineColor = originalOutlineColor;
+ lastEntity.polyline.material = originalOutlineColor;
}
lastEntity = nowEntity;
const numbersWithCommas = nowData.dkfw.match(/\d+(\.\d+)?/g);
@@ -430,7 +471,7 @@
if (index % 2 === 0) acc.push(src.slice(index, index + 2));
return acc;
}, []);
- const polygonCenter = getCenterPoint(groupedArr);
+ const polygonCenter = getCenterPoint(groupedArr);
// 相机定位
homeViewer.value.scene.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(
@@ -452,15 +493,31 @@
// 编辑
const handleSelectionChange = row => {
let curRowIsSelect = row;
+ curRowIsSelect && handleLocationPolygon(row);
selectionIds.value = row.id;
selectionList.value = row;
- curRowIsSelect && handleLocationPolygon(row);
- if (row.is_exception == 2 && curRowIsSelect) {
- isDrawPolygon.value = true;
- funButtonEle.value.upDateDrawState(true);
- handleLocationPolygon(row);
+
+ if (isEditing.value) {
+ //当前已编辑 → 取消编辑（关闭绘制、重置状态）
+ isEditing.value = false;
+ handleUpDateDrawState(false); // 通知DrawPolygon取消绘制
} else {
- isDrawPolygon.value = false;
+ // 当前未编辑 → 开启编辑（仅异常图斑可编辑）
+ if (row.is_exception === 2 && curRowIsSelect) {
+ isEditing.value = true;
+ handleUpDateDrawState(true); // 通知DrawPolygon开启绘制
+ } else {
+ ElMessage.warning('仅异常图斑支持编辑绘制');
+ isEditing.value = false;
+ }
+ }
+};
+const handleUpDateDrawState = show => {
+ isEditing.value = show; // 同步编辑状态
+ if (!show) {
+ // 绘制关闭时，清空选中的编辑行
+ selectionIds.value = null;
+ selectionList.value = [];
}
};
// 删除
@@ -474,6 +531,8 @@
if (res.data.code !== 0) return ElMessage.warning('删除失败');
ElMessage.success('删除成功');
getTableList();
+ getspotManagementTableApi();
+ getAlltableMapListApi();
});
});
};
@@ -520,6 +579,10 @@
spotTypeItem.value = initialSpotTypeLabel.value;
spotTypeItem.originalValue = initialSpotTypeId.value;
}
+ if (isEditing.value) {
+ isEditing.value = false;
+ handleUpDateDrawState(false);
+ }
clearSelect();
isDrawPolygon.value = false; // 关闭地图绘制状态
uploadPatchDialog.value = false;
@@ -543,12 +606,12 @@
setTimeout(() => {
initMap();
getTableList();
+ getAlltableMapListApi();
+ getspotManagementTableApi();
}, 0);
} else {
- if (funButtonEle.value) {
- isBoxSelect.value = false;
- isDrawPolygon.value = false;
- }
+ isEditing.value = false;
+ handleUpDateDrawState(false);
destroyMap();
}
refreshonload();
@@ -701,6 +764,7 @@
color: #fff !important;
.cell {
padding: 0px !important;
+ font-size: 12px !important;
}
// 隔行变色
.even-row {
@@ -752,9 +816,10 @@
}
.operationspan {
cursor: pointer;
+ color: #409eff;
}
.operationspan:first-child {
- margin-right: 10px;
+ margin-right: 5px;
}
// 分页
--
Gitblit v1.9.3