|
|
|
|
@ -45,11 +45,19 @@
|
|
|
|
|
style="color: #ffffff; font-size: 16px"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
<span
|
|
|
|
|
:class="dataRef.mouse ? 'title_mouse' : 'title_nomouse'"
|
|
|
|
|
@click="setNowShowAnnotationData(dataRef)"
|
|
|
|
|
>
|
|
|
|
|
{{ dataRef.title }}
|
|
|
|
|
</span>
|
|
|
|
|
<div class="buttonSwitch" v-if="dataRef.children">
|
|
|
|
|
<a-switch
|
|
|
|
|
v-model:checked="dataRef.showOrHide"
|
|
|
|
|
checked-children="显示"
|
|
|
|
|
un-checked-children="隐藏"
|
|
|
|
|
@change="changeWorkSpaceShowOrHide"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="buttonRight2" v-if="!dataRef.children && dataRef.mouse">
|
|
|
|
|
<a-tooltip placement="top">
|
|
|
|
|
@ -122,7 +130,9 @@
|
|
|
|
|
'setNowShowAnnotationData',
|
|
|
|
|
'setAllAnnotationData',
|
|
|
|
|
'deleteAnnotation',
|
|
|
|
|
'treeDataShowOrHide',
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const showMenuInfoName = ref('地图标注');
|
|
|
|
|
|
|
|
|
|
function updateShowMenuInfoList(type) {
|
|
|
|
|
@ -135,10 +145,40 @@
|
|
|
|
|
function changeLeftMenuShow() {
|
|
|
|
|
emits('changeLeftMenuShow');
|
|
|
|
|
}
|
|
|
|
|
// 项目级别的显示或者隐藏
|
|
|
|
|
function changeWorkSpaceShowOrHide() {
|
|
|
|
|
treeDataShowOrHideList = [];
|
|
|
|
|
treeData.value.forEach((tree) => {
|
|
|
|
|
treeDataShowOrHideList.push({
|
|
|
|
|
id: tree.key,
|
|
|
|
|
showOrHide: tree.showOrHide,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
let showIdList: any = [];
|
|
|
|
|
treeDataShowOrHideList.map((item) => {
|
|
|
|
|
if (item.showOrHide) {
|
|
|
|
|
showIdList.push(item.id);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
emits('treeDataShowOrHide', showIdList);
|
|
|
|
|
}
|
|
|
|
|
// 查找项目级别的显示或者隐藏
|
|
|
|
|
function getShowOrHide(id) {
|
|
|
|
|
if (treeDataShowOrHideList.length > 0) {
|
|
|
|
|
const item = treeDataShowOrHideList.find((item) => item.id === id);
|
|
|
|
|
return item ? item.showOrHide : true;
|
|
|
|
|
} else {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 地图标注-搜索
|
|
|
|
|
const treeData: any = ref([]);
|
|
|
|
|
// 记录项目级别的显示或者隐藏
|
|
|
|
|
let treeDataShowOrHideList: any = [];
|
|
|
|
|
// 展开
|
|
|
|
|
const expandedKeys: any = ref([]);
|
|
|
|
|
// 搜索
|
|
|
|
|
const searchValue = ref('');
|
|
|
|
|
function handleChangeAnnotationSearch() {
|
|
|
|
|
treeData.value = [];
|
|
|
|
|
@ -150,6 +190,7 @@
|
|
|
|
|
treeData.value.push({
|
|
|
|
|
key: item.Id,
|
|
|
|
|
title: item.WorkspaceName,
|
|
|
|
|
showOrHide: getShowOrHide(item.Id),
|
|
|
|
|
children: [],
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
@ -159,7 +200,6 @@
|
|
|
|
|
let allAnnotationDataList = props.allAnnotationDataList.sort((a, b) => {
|
|
|
|
|
return dayjs(a.createTime) - dayjs(b.createTime);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
allAnnotationDataList.forEach((annotation) => {
|
|
|
|
|
treeData.value.forEach((tree) => {
|
|
|
|
|
if (tree.key == annotation.workSpaceId) {
|
|
|
|
|
@ -178,6 +218,7 @@
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 地图标注-删除标注
|
|
|
|
|
function deleteAnnotation(show) {
|
|
|
|
|
show.deleteClickNum = 0;
|
|
|
|
|
@ -219,21 +260,28 @@
|
|
|
|
|
|
|
|
|
|
// 移动到中心位置
|
|
|
|
|
function handlerLocation(position) {
|
|
|
|
|
if (showMenuInfoName.value == '地图标注') {
|
|
|
|
|
if (position.geomtype == 'Circle') {
|
|
|
|
|
emits('handlerLocation', {
|
|
|
|
|
lng: parseFloat(position.coordinates[0]),
|
|
|
|
|
lat: parseFloat(position.coordinates[1]),
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
emits('handlerLocation', {
|
|
|
|
|
lng: parseFloat(position.coordinates[0]),
|
|
|
|
|
lat: parseFloat(position.coordinates[1]),
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
emits('handlerLocation', {
|
|
|
|
|
lng: parseFloat(position.properties.centerPoint[0]),
|
|
|
|
|
lat: parseFloat(position.properties.centerPoint[1]),
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => props.nowShowAnnotationData,
|
|
|
|
|
() => {
|
|
|
|
|
treeData.value.forEach((tree) => {
|
|
|
|
|
tree.children?.forEach((t) => {
|
|
|
|
|
if (t.id == props.nowShowAnnotationData.id) {
|
|
|
|
|
t.title = props.nowShowAnnotationData.name;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
deep: true,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
|
updateShowMenuInfoList,
|
|
|
|
|
});
|
|
|
|
|
@ -288,6 +336,7 @@
|
|
|
|
|
.leftMenuContent_tree {
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
max-height: 750px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -305,6 +354,7 @@
|
|
|
|
|
gap: 5px;
|
|
|
|
|
|
|
|
|
|
.eye {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
@ -312,20 +362,31 @@
|
|
|
|
|
height: 20px;
|
|
|
|
|
}
|
|
|
|
|
.title_mouse {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 135px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.title_nomouse {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 170px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.buttonSwitch {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 15px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
width: 60px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
}
|
|
|
|
|
.buttonRight2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: -15px;
|
|
|
|
|
right: 30px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -334,7 +395,7 @@
|
|
|
|
|
}
|
|
|
|
|
.buttonRight1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: -35px;
|
|
|
|
|
right: 5px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -363,13 +424,16 @@
|
|
|
|
|
::v-deep .ant-tree {
|
|
|
|
|
color: #ffffff !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .ant-tree-treenode {
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ant-tree-node-content-wrapper {
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ant-tree-switcher {
|
|
|
|
|
color: #ffffff !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ant-tree-node-selected {
|
|
|
|
|
background: #25384c !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//
|
|
|
|
|
</style>
|
|
|
|
|
|
