进度填报单选优化,项目列表地图功能修正

This commit is contained in:
Teo
2025-06-03 19:57:53 +08:00
parent 6758437892
commit 80c9d517ab
4 changed files with 301 additions and 55 deletions

View File

@ -22,7 +22,7 @@
<p
v-for="(item, index) in selectLayer"
class="pl-xl border-rd pr p-3 w-111 mr-1 bg-#909399 flex items-center cursor-pointer justify-between"
@click="delLayer(index)"
@click="delLayer(index, item.option)"
>
{{ item.location.name + '被选中为' + item.option }}
<el-icon>
@ -30,35 +30,27 @@
</el-icon>
</p>
</div>
<el-form-item label="类型" class="items-center">
<!-- <el-form-item label="类型" class="items-center">
<el-radio-group v-model="layerType">
<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 :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>
</el-form-item> -->
</div>
<div v-if="isMenuVisible" :style="{ left: menuX + 'px', top: menuY + 'px' }" class="fixed bg-white shadow-md rounded-md overflow-hidden">
<ul class="py-1 pl-0">
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('光伏板')">
<i class="fa-solid fa-check mr-2"></i>光伏板
<li
v-for="(item, index) in layerTypeList"
class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
@click="handleMenuItemClick(item, index + 1)"
>
<i class="fa-solid fa-check mr-2"></i>{{ item }}
</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>
<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('名称')">
<li class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" @click="handleMenuItemClick('名称', null)">
<i class="fa-solid fa-times mr-2"></i>名称
</li>
</ul>
@ -98,6 +90,7 @@ const props = defineProps({
});
const treeData = ref<any>([]);
const layerType = ref(null);
const layerTypeList = ref(['光伏板', '桩点/支架', '方阵', '逆变器', '箱变']);
const contextMenu = ref(null);
const selectLayer = ref([]);
const treeRef = ref<TreeInstance>();
@ -325,7 +318,7 @@ const showMenu = (event: MouseEvent, data) => {
};
// 处理菜单项点击事件的方法
const handleMenuItemClick = (option: string) => {
const handleMenuItemClick = (option: string, index: number) => {
isMenuVisible.value = false;
if (selectLayer.value.some((item) => item.location.name === contextMenu.value.name)) {
@ -335,14 +328,17 @@ const handleMenuItemClick = (option: string) => {
if (option !== '名称' && option !== '箱变') return proxy?.$modal.msgError('只能选择一个类型');
}
selectLayer.value.push({ location: contextMenu.value, option });
console.log('selectLayer.value', selectLayer.value);
layerType.value = index ? index : layerType.value; // 设置 layerType 为对应的索引值
emit('handleCheckChange', selectLayer.value);
};
//删除菜单
const delLayer = (index) => {
const delLayer = (index, option) => {
selectLayer.value.splice(index, 1);
if (option != '名称') {
if (selectLayer.value.every((item) => item.option == '名称')) layerType.value = null;
}
emit('handleCheckChange', selectLayer.value);
};
@ -478,9 +474,7 @@ const addFacilities = async () => {
const reset = () => {
selectLayer.value = [];
treeRef.value?.setCheckedKeys([]);
for (const key in layerData) {
map.removeLayer(layerData[key]);
}
sharedSource.clear(); // 清空共享 source 中的所有要素
layerType.value = null;
};