<template>
|
<el-dialog
|
:title="props.title"
|
append-to-body
|
v-model="uploadPatchDialog"
|
width="80%"
|
align-center
|
>
|
<div class="container">
|
<!-- 信息展示区 -->
|
<div class="infoBox">
|
<div class="itemBoxLeft">
|
<div v-for="(item, index) in infoList" :key="index" class="itemCon">
|
<div class="itemBox">
|
<div class="itemTitle">{{ item.name }}：</div>
|
<div class="itemContent">
|
<template v-if="props.title === '图斑编辑' && item.editable">
|
<template v-if="item.name === '图斑类型'">
|
<el-select
|
v-model="item.value"
|
size="small"
|
placeholder="请选择图斑类型"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="opt in spotTypeOptions"
|
:key="opt.value"
|
:label="opt.label"
|
:value="opt.value"
|
/>
|
</el-select>
|
</template>
|
<template v-else-if="item.name === '文件名称'">
|
<el-input v-model="item.value" size="small" />
|
</template>
|
|
</template>
|
<template v-else>
|
<div class="itemValue">{{ item.value }}</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 地图和表格容器 -->
|
<div class="map-container">
|
<!-- 图斑列表 -->
|
<div class="table-overlay">
|
<div class="table-content">
|
<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') }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="dkbh" label="图斑名称" />
|
<el-table-column prop="investigate" label="图斑状态" />
|
<el-table-column label="操作" width="100" align="center" v-if="props.title === '图斑编辑'">
|
<template #default="scope">
|
<el-button type="text">删除</el-button>
|
<el-button type="text" @click.stop="handleSelectionChange(scope.row)"
|
>编辑</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pagination-container">
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
: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>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import {
|
getCenterPoint,
|
getLnglatDist,
|
getLnglatAltitude,
|
getPolygonMaxHeight,
|
cartesian3Convert,
|
getWaylineShowHeight,
|
} 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 } 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 spotTypeOptions = ref([
|
{ value: '1', label: '综合类' },
|
{ value: '2', label: '矿山类' },
|
{ value: '3', label: '农田类' },
|
]);
|
const infoList = ref([
|
{ name: '文件名称', value: '55', field: 'job_info_num', editable: true },
|
{ name: '图斑类型', value: 'ee', field: 'name', editable: true },
|
{ name: '图斑数量', value: '', field: 'industry_type_str', editable: false },
|
{ name: '异常图斑数量', value: '', field: 'event_number', editable: false },
|
{ name: '行政区划', value: '', field: 'device_names', editable: false },
|
{ name: '数据来源', value: '', field: 'dept_name', editable: false },
|
{ name: '创建时间', value: '', field: 'cycle_time_value', editable: false },
|
{ name: '创建人', value: '', field: 'ai_type_str', editable: false },
|
]);
|
const params = ref({
|
current: 1,
|
size: 20,
|
});
|
const handleSizeChange = () => {};
|
const handleCurrentChange = () => {};
|
const tableData = ref([]);
|
const polygonSearch = ref({
|
investigate: '',
|
isPush: '',
|
isException: '',
|
inRange: '1',
|
dkbh: '',
|
dkmj: '',
|
page: 1,
|
page_size: 1000,
|
total: 0,
|
workspaceId: 'ede19ef4-2e92-42f3-83cc-89afb54e95a7',
|
area_code: '360000000000',
|
device_sn: '',
|
});
|
// 获取列表数据
|
const getTableList = async () => {
|
tableData.value = [];
|
const res = await getPatchesSpotList(polygonSearch.value);
|
if (res.data.code !== 0) return;
|
tableData.value = res.data.data.list.map(item => ({
|
...item,
|
dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
|
}));
|
total.value = res.data.data.pagination.total;
|
// 先清空地图现有图斑
|
tbJwdList = [];
|
viewer.entities.removeAll(); // 清除所有实体
|
// 加载图斑
|
entitiesAddSpot();
|
};
|
|
// 地图
|
const initMap = () => {
|
if (!document.getElementById('spotMap')) {
|
return;
|
}
|
publicCesiumInstance = new PublicCesium({
|
dom: 'spotMap',
|
terrain: true,
|
flatMode: false,
|
layerMode: 4,
|
});
|
homeViewer.value = publicCesiumInstance.getViewer();
|
viewer = publicCesiumInstance.getViewer();
|
viewInstance.value = publicCesiumInstance;
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
};
|
// 初始化所有图斑
|
const entitiesAddSpot = () => {
|
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);
|
homeViewer.value.entities?.add({
|
id: 'polygon_dk' + item.id,
|
customType: 'pattern_spot_polygon',
|
customInfo: {
|
...item,
|
},
|
polygon: {
|
hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(grouped)),
|
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
outline: true,
|
outlineColor: Cesium.Color.YELLOW,
|
outlineWidth: 2,
|
clampToGround: true,
|
},
|
zIndex: 99,
|
});
|
if (tbJwdList.length > 0) {
|
const positions = tbJwdList.flatMap(item => Cesium.Cartesian3.fromDegreesArray(item.grouped));
|
homeViewer.value.camera.flyToBoundingSphere(new Cesium.BoundingSphere.fromPoints(positions));
|
}
|
viewInstance.value.removeLeftClickEvent('spotHighlighting');
|
viewInstance.value.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
|
});
|
};
|
|
// 高亮当前选中图斑，并定位
|
const handleLocationPolygon = (data, Deselect) => {
|
heightlightSpot(data);
|
};
|
// 鼠标触发点击图斑高亮 pick：可以获取当前图斑数据
|
const spotHighlighting = (click, pick, viewer) => {
|
if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
|
// 表格也对应选中数据 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;
|
}, []);
|
// 求出中心点
|
const polygonCenter = getCenterPoint(groupedArr);
|
if (viewInstance.value.getEntityById('polygon_center')) {
|
viewInstance.value.removeById('polygon_center');
|
}
|
// 高亮当前图斑，将上一个高亮图斑恢复
|
if (lastHighlightRow) {
|
let lastentity = homeViewer.value.entities?.getById('polygon_dk' + lastHighlightRow.id);
|
|
if (lastentity && lastentity.polygon) {
|
lastentity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.5);
|
lastentity.polygon.outlineColor = Cesium.Color.YELLOW;
|
}
|
}
|
let Nowentity = homeViewer.value.entities?.getById('polygon_dk' + data.id);
|
if (Nowentity && Nowentity.polygon) {
|
Nowentity.polygon.material = Cesium.Color.RED.withAlpha(0.3);
|
Nowentity.polygon.outlineColor = Cesium.Color.RED;
|
}
|
|
homeViewer.value.scene.camera.setView({
|
destination: Cesium.Cartesian3.fromDegrees(
|
Number(polygonCenter.lng),
|
Number(polygonCenter.lat),
|
2500.0
|
),
|
});
|
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);
|
provide('getTableList', getTableList)
|
// 销毁
|
const destroyMap = () => {
|
if (viewer) {
|
viewer.destroy();
|
viewer = null;
|
}
|
publicCesiumInstance = null;
|
};
|
|
watch(uploadPatchDialog, newVal => {
|
if (newVal) {
|
setTimeout(() => {
|
initMap();
|
getTableList();
|
}, 0);
|
} else {
|
destroyMap();
|
}
|
});
|
|
onBeforeUnmount(() => {
|
destroyMap();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
}
|
|
.infoBox {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 16px;
|
|
.itemBoxLeft {
|
flex: 1;
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
row-gap: 0;
|
padding: 10px;
|
font-size: 14px;
|
|
.itemCon:nth-last-child(-n + 2) {
|
border-bottom: 2px solid #efefef;
|
}
|
}
|
|
.itemBox {
|
display: flex;
|
align-items: center;
|
background: #fff;
|
height: 33px;
|
border-top: 2px solid #efefef;
|
|
.itemTitle {
|
flex: 0 0 150px;
|
color: #0b1d38;
|
text-align: center;
|
background: #f3f6ff;
|
height: 33px;
|
line-height: 33px;
|
padding-right: 10px;
|
border-top: 1px solid #efefef;
|
}
|
|
.itemContent {
|
flex: 1;
|
padding-left: 10px;
|
|
.el-input {
|
width: 100%;
|
|
:deep(.el-input__inner) {
|
height: 28px;
|
line-height: 28px;
|
background: transparent;
|
border: none;
|
padding: 0 10px;
|
color: #747e91;
|
}
|
}
|
|
.itemValue {
|
font-size: 14px;
|
color: #747e91;
|
text-align: left;
|
line-height: 33px;
|
}
|
}
|
}
|
}
|
|
.map-container {
|
position: relative;
|
height: 600px;
|
width: 100%;
|
}
|
.table-overlay {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 23%;
|
height: 95%;
|
z-index: 999;
|
// background: rgba(31, 62, 122, 0.85);
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.table-content {
|
display: flex;
|
flex-direction: column;
|
height: 95%;
|
.tabname {
|
color: #102441;
|
}
|
}
|
|
.pagination-container {
|
margin-top: auto; /* 将分页推到容器底部 */
|
padding: 10px 0;
|
background: white;
|
display: flex;
|
justify-content: center;
|
height: 20px;
|
}
|
|
.el-table {
|
flex: 1; /* 让表格占据剩余空间 */
|
overflow: auto;
|
}
|
|
#spotMap {
|
height: 100%;
|
width: 100%;
|
}
|
</style>
|
