From 5808f76456ca0d40de5074f132b73a5a488e3e13 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 09 Dec 2025 09:12:03 +0800
Subject: [PATCH] Merge branch 'refs/heads/feature/v9.0/9.0.1' into test
---
src/views/resource/components/spotDetails.vue | 352 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 207 insertions(+), 145 deletions(-)
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index 7b8831f..1a923a1 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -30,6 +30,7 @@
v-model="item.value"
placeholder="请选择图斑类型"
style="width: 102%"
+ :disabled="item.value ==='综合类'"
>
<el-option
v-for="opt in spotTypeOptions"
@@ -60,20 +61,25 @@
<div class="table-overlay">
<div class="table-content">
<div class="tabname">图斑列表</div>
- <el-table
+ <div class="tabBoxLoading"
+ v-loading="tableLoading"
+ element-loading-text="加载中..."
+ element-loading-background="rgba(0, 0, 0, 0.1)"
+ >
+ <el-table
+ v-if="tableData.length > 0"
+
ref="polygonTableEle"
highlight-current-row
:row-class-name="tableRowClassName"
:data="tableData"
@row-click="handleLocationPolygon"
- @current-change="handleTableRowChange"
+
>
<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>
+ <template #default="{ $index }">
+ {{ ($index + 1).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" :width="pxToRemNum(50)" align="center" label="图斑状态">
@@ -83,31 +89,35 @@
</el-table-column>
<el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
<template #default="scope">
- <span class="operationspan" @click="handleDelete(scope.row)">删除</span>
- <span
+ <!-- <span class="operationspan" @click="handleDelete(scope.row)">删除</span> -->
+ <el-button icon="el-icon-delete" link @click="handleDelete(scope.row)"></el-button>
+ <!-- <span
class="operationspan"
v-if="scope.row.is_exception == 2"
@click.stop="handleSelectionChange(scope.row)"
>
{{ isEditing && selectionIds === scope.row.id ? '取消编辑' : '编辑' }}
- </span>
+ </span> -->
+ <template v-if="scope.row.is_exception == 2">
+ <el-button
+ v-if="!isEditing || selectionIds !== scope.row.id"
+ icon="el-icon-edit"
+ link
+ @click.stop="handleSelectionChange(scope.row)"
+ />
+ <el-button
+ v-else
+ icon="el-icon-circle-close"
+ link
+ @click.stop="handleSelectionChange(scope.row)"
+
+ />
+ </template>
</template>
</el-table-column>
</el-table>
- <div class="pagination-container">
- <el-pagination
- :current-page="params.page"
- :page-size="params.pageSize"
- background
- layout="prev, pager, next, ..."
- :pager-count="3"
- prev-text="上一页"
- next-text="下一页"
- :total="total"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- </div>
+ </div>
+
</div>
</div>
<!--绘制按钮-->
@@ -116,6 +126,7 @@
ref="drawPolygonRef"
v-if="isEditing"
@upDateDrawState="handleUpDateDrawState"
+
/>
<!-- 完成/取消 -->
<div class="btnGroups" v-if="props.title === '图斑编辑'">
@@ -130,6 +141,7 @@
</template>
<script setup>
+import { flyVisual } from '@/utils/cesium/mapUtil'
import { pxToRem, pxToRemNum } from '@/utils/rem'
import DrawPolygon from '@/views/resource/components/DrawPolygon.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
@@ -146,6 +158,8 @@
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import { ref, watch, onBeforeUnmount, onMounted } from 'vue';
+// 标记地图是否初始化完成
+const isMapReady = ref(false);
const uploadPatchDialog = defineModel('show');
const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption', 'regionalData']);
const polygonTableEle = ref(null);
@@ -155,6 +169,7 @@
const homeViewer = shallowRef(null);
let tbJwdList = [];
const loading = ref(false);
+const tableLoading = ref(true);
const tableData = ref([]);
const AlltableData = ref([]);
let total = ref(0);
@@ -252,65 +267,37 @@
page: 1,
pageSize: 10,
});
+const isInit = ref(true);
// 图斑管理表格
const getTableList = () => {
+ tableLoading.value = true;
const requestParams = {
patchesInfoId: props.detailid,
- page: params.value.page,
- pageSize: params.value.pageSize,
};
- tableMapListApi(requestParams).then(res => {
- tableData.value = res.data.data.records?.map(item => ({
+ AlltableMapListApi(requestParams).then(res => {
+ tableData.value = res.data.data?.map(item => ({
...item,
dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
}));
total.value = res.data.data.total || res.data.data.length;
tbJwdList = [];
viewer?.entities.removeAll();
- if (!AlltableData.value) {
+ if (!tableData.value) {
viewInstance.value?.flyToContour();
} else {
entitiesAddSpot();
}
+ }).finally(() => {
+ tableLoading.value = false;
});
};
-// 所有图斑数据
-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;
- getTableList();
-};
-const handleCurrentChange = val => {
- params.value.page = val;
- getTableList();
-};
+
// 地图
const initMap = () => {
- if (!document.getElementById('spotMap')) {
- return;
- }
+ if (!document.getElementById('spotMap') || isMapReady.value) return;
+
publicCesiumInstance = new PublicCesium({
dom: 'spotMap',
flatMode: false,
@@ -318,41 +305,80 @@
layerMode: 4,
contour: false,
});
+
homeViewer.value = publicCesiumInstance.getViewer();
viewer = publicCesiumInstance.getViewer();
- viewInstance.value = publicCesiumInstance;
+ viewInstance.value = publicCesiumInstance;
viewer.scene.globe.depthTestAgainstTerrain = true;
viewInstance.value.switchContour(true);
+
+ // 确保 readyPromise 存在
+ if (viewer.readyPromise) {
+ viewer.readyPromise.then(() => {
+ isMapReady.value = true;
+ getTableList();
+ }).catch((error) => {
+ console.error('地图加载失败：', error);
+ ElMessage.error('地图加载失败，请刷新重试');
+ });
+ } else {
+
+ // 如果没有 readyPromise
+ setTimeout(() => {
+ isMapReady.value = true;
+ getTableList();
+ }, 1000);
+ }
+};
+
+
+// 仅弹框初始化时执行的定位逻辑
+const initMapLocation = () => {
+ if (tbJwdList.length === 0 || !homeViewer.value) return;
+
+ // 计算所有图斑的包围球（用于初始化定位）
+ const allPositions = tbJwdList.flatMap(item =>
+ Cesium.Cartesian3.fromDegreesArray(item.grouped)
+ );
+ const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions);
+
+ // 初始化定位（仅执行一次）
+ homeViewer.value.camera.flyToBoundingSphere(boundingSphere, {
+ duration: 0,
+ offset: new Cesium.HeadingPitchRange(
+ Cesium.Math.toRadians(0),
+ Cesium.Math.toRadians(-90)
+ ),
+ });
};
// 初始化所有图斑
const entitiesAddSpot = () => {
+if (!isMapReady.value || !viewer) return;
viewer?.entities.removeAll();
- AlltableData.value.forEach(item => {
- // 取出当中经纬度
+ tbJwdList = []; // 重置经纬度列表
+
+ tableData.value.forEach(item => {
const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
if (!numbersWithCommas) return;
- // 绘制图斑
- const grouped = numbersWithCommas.map(item => Number(item));
- // 为框选存储对比值
- tbJwdList.push({
- ...item,
- grouped: grouped,
- });
- viewInstance.value.removeById('polygon_dk' + item.id);
- // 根据 is_exception 设置颜色
- const color =
- item.is_exception == 2 ? Cesium.Color.RED.withAlpha(0.5) : Cesium.Color.YELLOW.withAlpha(0.5);
- const outlineColor = item.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
+
+ const grouped = numbersWithCommas.map(Number);
+ tbJwdList.push({ ...item, grouped }); // 存储经纬度用于后续操作
+
+ // 绘制图斑（保留原有逻辑，仅移除定位相关代码）
+ const fillColor = item.is_exception === 2
+ ? Cesium.Color.RED.withAlpha(0.5)
+ : Cesium.Color.YELLOW.withAlpha(0.5);
+ const outlineColor = item.is_exception === 2
+ ? Cesium.Color.RED
+ : Cesium.Color.YELLOW;
homeViewer.value?.entities?.add({
- id: 'polygon_dk' + item.id,
+ id: `polygon_dk${item.id}`,
customType: 'pattern_spot_polygon',
- customInfo: {
- ...item,
- },
+ customInfo: item,
polygon: {
hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(grouped)),
- material: color,
+ material: fillColor,
outline: true,
outlineColor: outlineColor,
outlineWidth: 2,
@@ -362,23 +388,22 @@
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(grouped),
width: 2,
- material: color,
+ material: outlineColor,
clampToGround: true,
},
zIndex: 99,
});
-
- if (tbJwdList.length > 0) {
- const positions = tbJwdList.flatMap(item => Cesium.Cartesian3.fromDegreesArray(item.grouped));
- const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
- homeViewer.value?.camera.flyToBoundingSphere(boundingSphere, {
- duration: 0,
- offset: new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-90)),
- });
- }
- viewInstance.value?.removeLeftClickEvent('spotHighlighting');
- viewInstance.value?.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
});
+
+ // 仅在初始化阶段执行定位（关键：通过isInit控制）
+ if (isInit.value) {
+ initMapLocation();
+ isInit.value = false; // 初始化完成，后续不再执行定位
+ }
+
+ // 保留图斑点击高亮事件（原有逻辑不变）
+ viewInstance.value?.removeLeftClickEvent('spotHighlighting');
+ viewInstance.value?.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
};
// 高亮当前选中图斑，并定位
@@ -441,16 +466,12 @@
updateMapSpotInfo(nowEntity);
}
-
-// 更新上一个和这一个信息
function updateMapSpotInfo(nowEntity) {
const nowData = nowEntity.customInfo;
if (!nowEntity) return;
if (nowEntity.customInfo.id === lastEntity?.customInfo.id) return;
- // 设置新的
nowEntity.polygon.material = Cesium.Color.RED.withAlpha(0);
nowEntity.polyline.material = Cesium.Color.RED;
- // 重置上一个
if (lastEntity) {
const lastData = lastEntity.customInfo;
const originalFillColor =
@@ -459,7 +480,6 @@
: 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;
@@ -467,23 +487,20 @@
lastEntity = nowEntity;
const numbersWithCommas = nowData.dkfw.match(/\d+(\.\d+)?/g);
if (numbersWithCommas) {
- // 解析经纬度数组
- const groupedArr = numbersWithCommas.reduce((acc, val, index, src) => {
- if (index % 2 === 0) acc.push(src.slice(index, index + 2));
- return acc;
- }, []);
- const polygonCenter = getCenterPoint(groupedArr);
- // 相机定位
- homeViewer.value.scene.camera.setView({
- destination: Cesium.Cartesian3.fromDegrees(
- Number(polygonCenter.lng),
- Number(polygonCenter.lat),
- 1500
- ),
- zIndex: 100,
+
+ const positionsData = [];
+ for (let i = 0; i < numbersWithCommas.length; i += 2) {
+ const lon = Number(numbersWithCommas[i]);
+ const lat = Number(numbersWithCommas[i + 1]);
+ positionsData.push([lon, lat, 10]);
+ }
+ flyVisual({
+ positionsData: positionsData,
+ viewer: homeViewer.value,
+ multiple: 15,
+
});
}
- // flyMapSpot(nowEntity?.customInfo)
}
// 清空选中的数据
const clearSelect = () => {
@@ -492,26 +509,31 @@
viewer?.entities.removeAll();
};
// 编辑
+
const handleSelectionChange = row => {
- let curRowIsSelect = row;
- curRowIsSelect && handleLocationPolygon(row);
+ // 如果是同一个图斑且正在编辑，则取消编辑
+ if (selectionIds.value === row.id && isEditing.value) {
+ isEditing.value = false;
+ handleUpDateDrawState(false);
+ selectionIds.value = null;
+ selectionList.value = [];
+ return;
+ }
+
+ // 定位到选中的图斑
+ handleLocationPolygon(row);
+
+ // 仅异常图斑可编辑
+ if (row.is_exception !== 2) {
+ ElMessage.warning('仅异常图斑支持编辑绘制');
+ return;
+ }
+
+ // 设置编辑状态
selectionIds.value = row.id;
selectionList.value = row;
-
- if (isEditing.value) {
- //当前已编辑 → 取消编辑（关闭绘制、重置状态）
- isEditing.value = false;
- handleUpDateDrawState(false); // 通知DrawPolygon取消绘制
- } else {
- // 当前未编辑 → 开启编辑（仅异常图斑可编辑）
- if (row.is_exception === 2 && curRowIsSelect) {
- isEditing.value = true;
- handleUpDateDrawState(true); // 通知DrawPolygon开启绘制
- } else {
- ElMessage.warning('仅异常图斑支持编辑绘制');
- isEditing.value = false;
- }
- }
+ isEditing.value = true;
+ handleUpDateDrawState(true);
};
const handleUpDateDrawState = show => {
isEditing.value = show; // 同步编辑状态
@@ -522,7 +544,7 @@
}
};
// 删除
-const handleDelete = row => {
+const handleDelete = (row) => {
ElMessageBox.confirm('确认删除当前行图斑?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@@ -531,9 +553,27 @@
deletePatches({ ids: row.id }).then(res => {
if (res.data.code !== 0) return ElMessage.warning('删除失败');
ElMessage.success('删除成功');
- getTableList();
- getspotManagementTableApi();
- getAlltableMapListApi();
+ tableData.value = tableData.value.filter(item => item.id !== row.id);
+ //从地图上移除对应的图斑实体
+ const entityId = `polygon_dk${row.id}`;
+ viewer?.entities.removeById(entityId);
+ const exceptionCountItem = infoList.value.find(item => item.name === '异常图斑数量');
+ if (exceptionCountItem && row.is_exception === 2) {
+ exceptionCountItem.value = Math.max(0, parseInt(exceptionCountItem.value) - 1);
+ }
+ const totalCountItem = infoList.value.find(item => item.name === '图斑数量');
+ if (totalCountItem) {
+ totalCountItem.value = Math.max(0, parseInt(totalCountItem.value) - 1);
+ }
+
+ // 清除选中状态
+ if (selectionIds.value === row.id) {
+ selectionIds.value = null;
+ selectionList.value = [];
+ isEditing.value = false;
+ handleUpDateDrawState(false);
+ }
+
});
});
};
@@ -602,18 +642,24 @@
publicCesiumInstance = null;
};
+
watch(uploadPatchDialog, newVal => {
if (newVal) {
+ isInit.value = true;
+ isMapReady.value = false;
setTimeout(() => {
- initMap();
- getTableList();
- getAlltableMapListApi();
- getspotManagementTableApi();
+ initMap();
+ getspotManagementTableApi();
}, 0);
} else {
+ tableLoading.value = false;
+ tableData.value = [];
isEditing.value = false;
handleUpDateDrawState(false);
destroyMap();
+ isInit.value = false;
+ clearSelect();
+ isMapReady.value = false;
}
refreshonload();
});
@@ -634,6 +680,10 @@
font-size: 16px !important;
color: #363636 !important;
}
+:global(.spotDialog .el-dialog__body) {
+ padding: 2rem 2rem 0 !important;
+
+ }
.container {
display: flex;
flex-direction: column;
@@ -724,8 +774,8 @@
z-index: 99;
width: 277px;
overflow: hidden;
- background: rgba(0, 0, 0, 0.6);
- // backdrop-filter: blur(5px);
+ background: rgba(0, 0, 0, 0.8);
+
border-radius: 8px 8px 8px 8px;
padding: 6px 10px 0 10px;
display: flex;
@@ -794,7 +844,7 @@
// 表格主体
.el-table__body {
tr:hover > td {
- background-color: rgba(0, 0, 0, 0.6) !important;
+ background-color: rgba(64, 158, 255,0.3) !important;
}
td {
@@ -804,7 +854,8 @@
// 选中行
.current-row td {
- background-color: rgba(0, 0, 0, 0.6) !important;
+
+ background-color: rgba(64, 158, 255,0.3) !important;
}
}
:deep(.el-table__body) {
@@ -868,9 +919,15 @@
z-index: 9999 !important;
max-width: 300px;
}
+.tabBoxLoading {
+height: 100%;
+
+}
+
.el-table {
- flex: 1;
- overflow: auto;
+height: 98%;
+overflow: auto;
+
}
.btnGroups {
position: absolute;
@@ -890,4 +947,9 @@
height: 100%;
width: 100%;
}
+.el-button {
+ padding: 0;
+ color: #fff;
+ width: 17px;
+}
</style>
--
Gitblit v1.9.3