From 8b598e50a0ed9c3c5b35a612e311dc423050aabd Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 04 Sep 2025 17:26:01 +0800
Subject: [PATCH] feat:11
---
src/views/resource/components/spotDetails.vue | 122 +++++++++++++++-------------------------
1 files changed, 45 insertions(+), 77 deletions(-)
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index aec18a0..065a045 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -3,7 +3,7 @@
class="spotDialog"
:title="props.title"
v-model="uploadPatchDialog"
- width="75%"
+ width="78%"
align-center
>
<div class="container">
@@ -160,7 +160,7 @@
const selectionList = ref([]);
// 当前在编辑状态的异常图斑
let curCustomPolygon = null;
-
+let lastEntity = null
// 表格隔行变色
const tableRowClassName = ({ rowIndex }) => {
return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
@@ -278,7 +278,7 @@
};
// 初始化所有图斑
const entitiesAddSpot = () => {
- viewer?.entities.removeAll(); //清除旧实体
+ viewer?.entities.removeAll();
tableData.value.forEach(item => {
// 取出当中经纬度
const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
@@ -290,11 +290,12 @@
...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;
- viewInstance.value?.removeById('polygon_dk' + item.id);
+
homeViewer.value?.entities?.add({
id: 'polygon_dk' + item.id,
customType: 'pattern_spot_polygon',
@@ -337,88 +338,56 @@
};
// 高亮当前选中图斑，并定位
-const handleLocationPolygon = (data, Deselect) => {
- heightlightSpot(data);
+const handleLocationPolygon = (data) => {
+ updateMapSpotInfo(data);
};
+
// 鼠标触发点击图斑高亮 pick：可以获取当前图斑数据
-const spotHighlighting = (click, pick, viewer) => {
- if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
- let clickTableID = tableData.value.findIndex(i => i.id == pick.id?.customInfo.id);
- // 计算表格滚动至中间位置
+function spotHighlighting(click, pick, viewer) {
+ let entities = viewer?.scene
+ .drillPick(click.position)
+ .filter(item => item.id)
+ .map(i => i.id)
+ .filter(i => i._customType === 'pattern_spot_polygon')
+ const nowEntity = entities?.[0]
+ const nowData = nowEntity.customInfo;
+ const clickTableID = tableData.value.findIndex(i => i.id === nowData.id);
const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
- let targetRow = rows[clickTableID];
+ const targetRow = rows[clickTableID];
+
nextTick(() => {
const table = polygonTableEle?.value;
- if (!table) return;
- if (targetRow) {
- targetRow.scrollIntoView({
- behavior: 'smooth',
- block: 'center',
- });
- polygonTableEle?.value.setCurrentRow(tableData.value[clickTableID]);
- }
+ if (!table || !targetRow) return;
+ // 表格滚动到中间位置
+ targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ // 同步表格选中状态
+ table.setCurrentRow(tableData.value[clickTableID]);
});
- // 表格也对应选中数据 TODO
- const data = pick.id?.customInfo;
- // 高亮图斑
- heightlightSpot(data);
-};
-// 选中列表或者点击地图内的图斑 高亮图斑
-const heightlightSpot = data => {
- nowSelectObj.value = data;
- if (!data) {
- clearSelect();
- return;
- }
- const numbersWithCommas = data.dkfw.match(/\d+(\.\d+)?/g);
- const groupedArr = numbersWithCommas.reduce((acc, val, index, src) => {
- if (index % 2 === 0) acc.push(src.slice(index, index + 2));
- return acc;
- }, []);
+ updateMapSpotInfo(nowEntity)
+}
- const polygonCenter = getCenterPoint(groupedArr);
- if (viewInstance.value.getEntityById('polygon_center')) {
- viewInstance.value.removeById('polygon_center');
- }
+// 更新上一个和这一个信息
+function updateMapSpotInfo(nowEntity) {
+ if (!nowEntity) return
+ if (nowEntity.customInfo.id === lastEntity?.customInfo.id) return
- // 恢复上一个高亮图斑的原始颜色
- if (lastHighlightRow) {
- let lastentity = homeViewer.value.entities?.getById('polygon_dk' + lastHighlightRow.id);
- if (lastentity && lastentity.polygon) {
- // 根据is_exception恢复原始颜色
- const originalColor =
- lastHighlightRow.is_exception == 2
- ? Cesium.Color.RED.withAlpha(0.5)
- : Cesium.Color.YELLOW.withAlpha(0.5);
- const originalOutline =
- lastHighlightRow.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
-
- lastentity.polygon.material = originalColor;
- lastentity.polygon.outlineColor = originalOutline;
- lastentity.polygon.outlineWidth = 2;
- }
- }
-
- let Nowentity = homeViewer.value.entities?.getById('polygon_dk' + data.id);
- if (Nowentity && Nowentity.polygon) {
- Nowentity.polygon.material = Cesium.Color.RED.withAlpha(0);
- Nowentity.polygon.outlineColor = Cesium.Color.RED;
- }
- homeViewer.value.scene.camera.setView({
- destination: Cesium.Cartesian3.fromDegrees(
- Number(polygonCenter.lng),
- Number(polygonCenter.lat),
- 1500
- ),
- zIndex: 100,
- });
- lastHighlightRow = data;
-};
+ // 设置新的
+ nowEntity.polygon.material = Cesium.Color.RED.withAlpha(0)
+ nowEntity.polyline.material = Cesium.Color.RED
+ // 重置上一个
+ if (lastEntity) {
+ lastEntity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.5)
+ lastEntity.polyline.material = Cesium.Color.YELLOW
+ }
+ lastEntity = nowEntity
+ // flyMapSpot(nowEntity?.customInfo)
+}
// 清空选中的数据
const clearSelect = () => {
lastHighlightRow = null;
selectionList.value = [];
+viewer?.entities.removeAll();
};
// 编辑
const handleSelectionChange = row => {
@@ -460,7 +429,6 @@
patchTypeItem.value !== '' &&
patchTypeItem.value !== null &&
patchTypeItem.value !== undefined;
- console.log('isValueNumber',isValueNumber);
if (isValueNumber) {
// 转换为数字类型
lotTypeId = Number(patchTypeItem.value);
@@ -485,7 +453,6 @@
const handleCancel = () => {
const fileNameItem = infoList.value.find(item => item.name === '文件名称');
const spotTypeItem = infoList.value.find(item => item.name === '图斑类型');
-
if (fileNameItem) {
fileNameItem.value = initialFileName.value;
}
@@ -703,7 +670,7 @@
// 表格主体
.el-table__body {
tr:hover > td {
- background-color: var(--el-table-row-hover-bg-color) !important;
+ background-color: rgba(0, 0, 0, 0.6) !important;
}
td {
@@ -713,7 +680,7 @@
// 选中行
.current-row td {
- background-color: var(--el-table-current-row-bg-color) !important;
+ background-color: rgba(0, 0, 0, 0.6) !important;
}
}
:deep(.el-table__body) {
@@ -785,6 +752,7 @@
position: absolute;
bottom: 49px;
left: 50%;
+ transform: translate(-50%);
img {
width: 125px;
height: 45px;
--
Gitblit v1.9.3