From b2f7b2c66b5d5e1355de45231e4728d3a6e8127b Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 26 Aug 2025 16:37:05 +0800
Subject: [PATCH] feat:图斑绘制
---
src/views/resource/components/spotDetails.vue | 69 +++++++++++++++++++++++++++-------
1 files changed, 55 insertions(+), 14 deletions(-)
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index 38f75ee..7d9e9d2 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -1,5 +1,5 @@
<template>
- <el-dialog title="图斑详情" append-to-body v-model="uploadPatchDialog" width="70%" align-center>
+ <el-dialog :title="props.title" append-to-body v-model="uploadPatchDialog" width="80%" align-center>
<div class="container">
<!-- 信息展示区 -->
<div class="infoBox">
@@ -18,8 +18,8 @@
<!-- 图斑列表 -->
<div class="table-overlay">
<div class="table-content">
- <div>图斑列表</div>
- <el-table ref="polygonTableEle" :data="tableData" border style="width: 100%" @row-click="handleLocationPolygon">
+ <div class="tabname">图斑列表</div>
+ <el-table ref="polygonTableEle" highlight-current-row :data="tableData" border style="width: 100%" @row-click="handleLocationPolygon">
<el-table-column type="index" label="序号" width="80">
<template #default="{ $index }">
{{ ($index + 1).toString().padStart(2, '0') }}
@@ -30,7 +30,7 @@
<el-table-column label="操作" width="100" align="center">
<template #default="scope">
<el-button type="text">删除</el-button>
- <el-button type="text" @click="handleSelectionChange(scope.row)">编辑</el-button>
+ <el-button type="text" @click.stop="handleSelectionChange(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
@@ -38,13 +38,15 @@
<el-pagination
background
layout="prev, pager, next"
- :total="50"
+ :total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
+ <!--绘制按钮-->
+ <FunButton ref="funButtonEle" v-model:isBoxSelect="isBoxSelect" v-model:isDrawPolygon="isDrawPolygon" ></FunButton>
<!-- 地图 -->
<div id="spotMap" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
</div>
@@ -65,17 +67,28 @@
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import { ref, watch, onBeforeUnmount } from 'vue';
+import FunButton from '@/views/resource/components/FunButton.vue';
const uploadPatchDialog = defineModel('show');
+const props=defineProps(['title'])
const polygonTableEle = ref(null)
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
const homeViewer = shallowRef(null);
let tbJwdList = [];
+let total = ref(0)
// 当前选中的图斑面数据
let nowSelectObj = ref({})
// 记录上一次点击高亮
let lastHighlightRow = null
+// 功能按钮区域相关：编辑图斑等
+const funButtonEle = ref(null)
+const isBoxSelect = ref(false)
+const isDrawPolygon = ref(false)
+// 选中了哪些图斑
+const selectionIds = ref(null)
+// 当前在编辑状态的异常图斑
+let curCustomPolygon = null
const infoList = ref([
{ name: '文件名称', value: '55', field: 'job_info_num' },
{ name: '图斑类型', value: 'ee', field: 'name' },
@@ -116,6 +129,7 @@
...item,
dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
}));
+ total.value = res.data.data.pagination.total
// 先清空地图现有图斑
tbJwdList = [];
viewer.entities.removeAll(); // 清除所有实体
@@ -178,10 +192,7 @@
viewInstance.value.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting')
});
};
-// 编辑,选中当前图斑
-const handleSelectionChange =(row)=>{
- heightlightSpot(row)
-}
+
// 高亮当前选中图斑，并定位
const handleLocationPolygon = (data, Deselect) => {
heightlightSpot(data)
@@ -228,6 +239,7 @@
if (Nowentity && Nowentity.polygon) {
Nowentity.polygon.material = Cesium.Color.RED.withAlpha(0.3)
Nowentity.polygon.outlineColor = Cesium.Color.RED
+
}
homeViewer.value.scene.camera.setView({
@@ -235,6 +247,33 @@
})
lastHighlightRow = data
}
+// 清空选中的数据
+const clearSelect =()=>{
+lastHighlightRow = null
+selectionIds.value = null
+}
+// 编辑
+const handleSelectionChange =(row)=>{
+ console.log('编辑',row);
+ let curRowIsSelect = row
+ selectionIds.value = row.id
+ curRowIsSelect && handleLocationPolygon(row)
+ if (row.is_exception == 2 && curRowIsSelect) {
+ isDrawPolygon.value = true
+ funButtonEle.value.upDateDrawState(true)
+ handleLocationPolygon(row)
+ // clearSelect()
+ // curCustomPolygon = row
+ // ElMessage.warning('该图斑数据异常，请在地图区域重新绘制！！')
+ }else{
+ isDrawPolygon.value = false
+ }
+
+}
+provide('selectionIds', selectionIds)
+provide('homeViewer', homeViewer)
+provide('viewInstance', viewInstance)
+provide('clearSelect', clearSelect)
// 销毁
const destroyMap = () => {
if (viewer) {
@@ -338,11 +377,10 @@
position: absolute;
top: 0;
left: 0;
- width: 30%;
- height: 100%;
+ width: 23%;
+ height: 95%;
z-index: 999;
- // background: rgba(255, 255, 255, 0.9);
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ // background: rgba(31, 62, 122, 0.85);
padding: 10px;
display: flex;
flex-direction: column;
@@ -351,7 +389,9 @@
.table-content {
display: flex;
flex-direction: column;
- height: 90%;
+ height: 95%;
+ .tabname {
+ color: #102441;}
}
.pagination-container {
@@ -372,4 +412,5 @@
height: 100%;
width: 100%;
}
+
</style>
--
Gitblit v1.9.3