init
This commit is contained in:
@ -12,16 +12,16 @@
|
||||
@node-click="isMenuVisible = false"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span @dblclick="handlePosition(data)">{{ data.name }}</span>
|
||||
<span @dblclick="handlePosition(data, node)">{{ data.name }}</span>
|
||||
</template>
|
||||
</el-tree-v2>
|
||||
<div>
|
||||
<div class="ol-map" id="olMap"></div>
|
||||
<div class="h15" v-if="!selectLayer.length"></div>
|
||||
<div class="m-0 c-white text-3 flex" v-else>
|
||||
<div class="h15 mt-2" v-if="!selectLayer.length"></div>
|
||||
<div class="m-0 c-white text-3 flex w-237.5 mt-2 flex-wrap" v-else>
|
||||
<p
|
||||
v-for="(item, index) in selectLayer"
|
||||
class="pl-xl border-rd pr mt-2 p-3 w-111 mr-1 bg-#909399 flex items-center cursor-pointer justify-between"
|
||||
class="pl-xl border-rd pr p-3 w-111 mr-1 bg-#909399 flex items-center cursor-pointer justify-between"
|
||||
@click="delLayer(index)"
|
||||
>
|
||||
{{ item.location.name + '被选中为' + item.option }}
|
||||
@ -35,6 +35,8 @@
|
||||
<el-radio value="1" size="large">光伏板</el-radio>
|
||||
<el-radio value="2" size="large">桩点/支架</el-radio>
|
||||
<el-radio value="3" size="large">方阵</el-radio>
|
||||
<el-radio value="4" size="large">逆变器</el-radio>
|
||||
<el-radio value="5" size="large">箱变</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
@ -50,6 +52,12 @@
|
||||
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('方阵')">
|
||||
<i class="fa-solid fa-times mr-2"></i>方阵
|
||||
</li>
|
||||
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('逆变器')">
|
||||
<i class="fa-solid fa-times mr-2"></i>逆变器
|
||||
</li>
|
||||
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('箱变')">
|
||||
<i class="fa-solid fa-times mr-2"></i>箱变
|
||||
</li>
|
||||
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('名称')">
|
||||
<i class="fa-solid fa-times mr-2"></i>名称
|
||||
</li>
|
||||
@ -78,8 +86,9 @@ import { Circle, Style, Stroke, Fill, Icon, Text } from 'ol/style'; // OpenLayer
|
||||
import LineString from 'ol/geom/LineString'; // OpenLayers的线几何类，用于表示线状的地理数据
|
||||
import Polygon from 'ol/geom/Polygon'; // OpenLayers的多边形几何类，用于表示面状的地理数据
|
||||
import * as turf from '@turf/turf';
|
||||
import { FeatureCollection } from 'geojson';
|
||||
import { TreeInstance } from 'element-plus';
|
||||
import { addProjectFacilities, addProjectPilePoint, addProjectSquare, listDXFProject } from '@/api/project/project';
|
||||
import { addProjectFacilities, addProjectPilePoint, addProjectSquare, listDXFProject, addInverter, addBoxTransformer } from '@/api/project/project';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const props = defineProps({
|
||||
@ -121,15 +130,16 @@ const jsonData = computed(() => {
|
||||
return arr; // treeData.value;
|
||||
});
|
||||
console.log(jsonData);
|
||||
|
||||
const handlePosition = (data: any) => {
|
||||
const handlePosition = (data: any, node) => {
|
||||
//切换中心点
|
||||
centerPosition.value = fromLonLat(turf.center(data).geometry.coordinates);
|
||||
console.log(turf.center(data));
|
||||
const featureCollection: FeatureCollection = { type: 'FeatureCollection', features: treeData.value[data.index].features } as FeatureCollection;
|
||||
|
||||
centerPosition.value = fromLonLat(turf.center(featureCollection).geometry.coordinates);
|
||||
|
||||
map.getView().setCenter(centerPosition.value);
|
||||
};
|
||||
const handleCheckChange = (data: any, bool) => {
|
||||
// 处理树形结构的选中变化
|
||||
let features = treeData.value[data.index].features;
|
||||
if (isMenuVisible.value) isMenuVisible.value = false;
|
||||
if (bool) {
|
||||
@ -308,11 +318,16 @@ const showMenu = (event: MouseEvent, data) => {
|
||||
// 处理菜单项点击事件的方法
|
||||
const handleMenuItemClick = (option: string) => {
|
||||
isMenuVisible.value = false;
|
||||
if (selectLayer.value.length == 2) {
|
||||
ElMessage.warning('最多只能选择两个图层');
|
||||
return;
|
||||
|
||||
if (selectLayer.value.some((item) => item.location.name === contextMenu.value.name)) {
|
||||
return proxy?.$modal.msgError('已选择该图层，请勿重复选择');
|
||||
}
|
||||
if (selectLayer.value.some((item) => item.option !== '名称')) {
|
||||
if (option !== '名称') return proxy?.$modal.msgError('只能选择一个类型');
|
||||
}
|
||||
selectLayer.value.push({ location: contextMenu.value, option });
|
||||
console.log('selectLayer.value', selectLayer.value);
|
||||
|
||||
emit('handleCheckChange', selectLayer.value);
|
||||
};
|
||||
|
||||
@ -350,62 +365,143 @@ const onUnmounted = () => {
|
||||
window.removeEventListener('click', closeMenuOnClickOutside);
|
||||
};
|
||||
|
||||
const addFacilities = async () => {
|
||||
console.log(layerType.value);
|
||||
// const addFacilities = async () => {
|
||||
// console.log(layerType.value);
|
||||
|
||||
if (!layerType.value) {
|
||||
return proxy?.$modal.msgError('请选择图层类型');
|
||||
}
|
||||
if (!selectLayer.value.length) {
|
||||
return proxy?.$modal.msgError('请选择需要上传的图层');
|
||||
// if (!layerType.value) {
|
||||
// return proxy?.$modal.msgError('请选择图层类型');
|
||||
// }
|
||||
// if (!selectLayer.value.length) {
|
||||
// return proxy?.$modal.msgError('请选择需要上传的图层');
|
||||
// }
|
||||
// const data = {
|
||||
// projectId: props.projectId,
|
||||
// nameGeoJson: null,
|
||||
// locationGeoJson: null,
|
||||
// pointGeoJson: null
|
||||
// };
|
||||
|
||||
// if (layerType.value == 1) {
|
||||
// if (!checkOptions(selectLayer.value, '光伏板')) {
|
||||
// return proxy?.$modal.msgError('请选择名称和光伏板');
|
||||
// }
|
||||
// loading.value = true;
|
||||
// if (selectLayer.value[0].option == '名称') {
|
||||
// data.nameGeoJson = treeData.value[selectLayer.value[0].location.index];
|
||||
// data.locationGeoJson = treeData.value[selectLayer.value[1].location.index];
|
||||
// } else {
|
||||
// data.nameGeoJson = treeData.value[selectLayer.value[1].location.index];
|
||||
// data.locationGeoJson = treeData.value[selectLayer.value[0].location.index];
|
||||
// }
|
||||
|
||||
// await addProjectFacilities(data);
|
||||
// await proxy?.$modal.msgSuccess('添加成功');
|
||||
// } else if (layerType.value == 2) {
|
||||
// if (selectLayer.value.length > 1) return proxy?.$modal.msgError('最多选择一个桩点/支架');
|
||||
// if (selectLayer.value[0].option != '桩点/支架') return proxy?.$modal.msgError('请选择类型为桩点/支架');
|
||||
// loading.value = true;
|
||||
// data.pointGeoJson = treeData.value[selectLayer.value[0].location.index];
|
||||
// await addProjectPilePoint(data);
|
||||
// await proxy?.$modal.msgSuccess('添加成功');
|
||||
// } else if (layerType.value == 3) {
|
||||
// if (!checkOptions(selectLayer.value, '方阵')) {
|
||||
// return proxy?.$modal.msgError('请选择名称和方阵');
|
||||
// }
|
||||
// loading.value = true;
|
||||
// if (selectLayer.value[0].option == '名称') {
|
||||
// data.nameGeoJson = treeData.value[selectLayer.value[0].location.index];
|
||||
// data.locationGeoJson = treeData.value[selectLayer.value[1].location.index];
|
||||
// } else {
|
||||
// data.nameGeoJson = treeData.value[selectLayer.value[1].location.index];
|
||||
// data.locationGeoJson = treeData.value[selectLayer.value[0].location.index];
|
||||
// }
|
||||
|
||||
// await addProjectSquare(data);
|
||||
// await proxy?.$modal.msgSuccess('添加成功');
|
||||
// }
|
||||
// reset();
|
||||
// loading.value = false;
|
||||
// };
|
||||
type LayerConfig = {
|
||||
optionB: string;
|
||||
apiFunc: (data: any) => Promise<any>;
|
||||
};
|
||||
|
||||
const LAYER_CONFIG: Record<number, LayerConfig> = {
|
||||
1: { optionB: '光伏板', apiFunc: addProjectFacilities },
|
||||
3: { optionB: '方阵', apiFunc: addProjectSquare },
|
||||
4: { optionB: '逆变器', apiFunc: addInverter },
|
||||
5: { optionB: '箱变', apiFunc: addBoxTransformer }
|
||||
};
|
||||
|
||||
const showError = (msg: string) => proxy?.$modal.msgError(msg);
|
||||
const showSuccess = (msg: string) => proxy?.$modal.msgSuccess(msg);
|
||||
|
||||
const getGeoJsonData = (nameOption = '名称', secondOption: string): { nameGeoJson: any[]; locationGeoJson: any | null } | null => {
|
||||
const nameLayers = selectLayer.value.filter((item) => item.option === nameOption);
|
||||
const secondLayer = selectLayer.value.find((item) => item.option === secondOption);
|
||||
|
||||
if (!nameLayers.length || !secondLayer) {
|
||||
showError(`请选择${nameOption}和${secondOption}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
const nameGeoJson = nameLayers.map((item) => treeData.value[item.location.index]);
|
||||
const locationGeoJson = treeData.value[secondLayer.location.index];
|
||||
|
||||
return { nameGeoJson, locationGeoJson };
|
||||
};
|
||||
|
||||
const handleTwoLayerUpload = async (optionB: string, apiFunc: (data: any) => Promise<any>) => {
|
||||
const geoJson = getGeoJsonData('名称', optionB);
|
||||
if (!geoJson) return;
|
||||
|
||||
const data = {
|
||||
projectId: props.projectId,
|
||||
nameGeoJson: geoJson.nameGeoJson,
|
||||
locationGeoJson: geoJson.locationGeoJson,
|
||||
pointGeoJson: null
|
||||
};
|
||||
|
||||
loading.value = true;
|
||||
await apiFunc(data);
|
||||
await showSuccess('添加成功');
|
||||
};
|
||||
|
||||
const handlePointUpload = async () => {
|
||||
if (selectLayer.value.length > 1) return showError('最多选择一个桩点/支架');
|
||||
if (selectLayer.value[0].option !== '桩点/支架') return showError('请选择类型为桩点/支架');
|
||||
|
||||
const data = {
|
||||
projectId: props.projectId,
|
||||
nameGeoJson: null,
|
||||
locationGeoJson: null,
|
||||
pointGeoJson: null
|
||||
pointGeoJson: treeData.value[selectLayer.value[0].location.index]
|
||||
};
|
||||
|
||||
if (layerType.value == 1) {
|
||||
if (!checkOptions(selectLayer.value, '光伏板')) {
|
||||
return proxy?.$modal.msgError('请选择名称和光伏板');
|
||||
}
|
||||
loading.value = true;
|
||||
if (selectLayer.value[0].option == '名称') {
|
||||
data.nameGeoJson = treeData.value[selectLayer.value[0].location.index];
|
||||
data.locationGeoJson = treeData.value[selectLayer.value[1].location.index];
|
||||
} else {
|
||||
data.nameGeoJson = treeData.value[selectLayer.value[1].location.index];
|
||||
data.locationGeoJson = treeData.value[selectLayer.value[0].location.index];
|
||||
}
|
||||
loading.value = true;
|
||||
await addProjectPilePoint(data);
|
||||
await showSuccess('添加成功');
|
||||
};
|
||||
|
||||
await addProjectFacilities(data);
|
||||
await proxy?.$modal.msgSuccess('添加成功');
|
||||
} else if (layerType.value == 2) {
|
||||
if (selectLayer.value.length > 1) return proxy?.$modal.msgError('最多选择一个桩点/支架');
|
||||
if (selectLayer.value[0].option != '桩点/支架') return proxy?.$modal.msgError('请选择类型为桩点/支架');
|
||||
loading.value = true;
|
||||
data.pointGeoJson = treeData.value[selectLayer.value[0].location.index];
|
||||
await addProjectPilePoint(data);
|
||||
await proxy?.$modal.msgSuccess('添加成功');
|
||||
} else if (layerType.value == 3) {
|
||||
if (!checkOptions(selectLayer.value, '方阵')) {
|
||||
return proxy?.$modal.msgError('请选择名称和方阵');
|
||||
}
|
||||
loading.value = true;
|
||||
if (selectLayer.value[0].option == '名称') {
|
||||
data.nameGeoJson = treeData.value[selectLayer.value[0].location.index];
|
||||
data.locationGeoJson = treeData.value[selectLayer.value[1].location.index];
|
||||
} else {
|
||||
data.nameGeoJson = treeData.value[selectLayer.value[1].location.index];
|
||||
data.locationGeoJson = treeData.value[selectLayer.value[0].location.index];
|
||||
}
|
||||
const addFacilities = async () => {
|
||||
if (!layerType.value) return showError('请选择图层类型');
|
||||
if (!selectLayer.value.length) return showError('请选择需要上传的图层');
|
||||
|
||||
await addProjectSquare(data);
|
||||
await proxy?.$modal.msgSuccess('添加成功');
|
||||
const config = LAYER_CONFIG[layerType.value];
|
||||
|
||||
try {
|
||||
if (layerType.value == 2) {
|
||||
await handlePointUpload();
|
||||
} else if (config) {
|
||||
await handleTwoLayerUpload(config.optionB, config.apiFunc);
|
||||
} else {
|
||||
showError('不支持的图层类型');
|
||||
}
|
||||
} finally {
|
||||
reset();
|
||||
loading.value = false;
|
||||
}
|
||||
reset();
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
@ -446,7 +542,20 @@ watch(
|
||||
onMounted(() => {
|
||||
// 地图初始化
|
||||
initOLMap();
|
||||
console.log(props.designId);
|
||||
// creatPoint(
|
||||
// [
|
||||
// [
|
||||
// [107.13205125908726, 23.806785824010216],
|
||||
// [107.13218187963494, 23.806867960389773],
|
||||
// [107.13215698891558, 23.806902336258318],
|
||||
// [107.13202636835067, 23.8068201998575],
|
||||
// [107.13205125908726, 23.806785824010216]
|
||||
// ]
|
||||
// ],
|
||||
// 'Polygon',
|
||||
// '1',
|
||||
// '测试方阵'
|
||||
// );
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user