353 lines
12 KiB
TypeScript
353 lines
12 KiB
TypeScript
import { getMarkerList, updateInfo } from '@/views/largeScreen/components/api';
|
|
import { initMapData } from './initMapData';
|
|
import { useTreeNode } from './treeNode';
|
|
import app from '@/main';
|
|
export const useTree = () => {
|
|
const rightMenuRef: any = ref(); //右键菜单的实例
|
|
const { cusNodeIcon, getSelectedNodes, cusSelectNode, nodeType } = useTreeNode();
|
|
const urlParams = new URLSearchParams(new URL(window.location.href).search);
|
|
const projectIdTwo = urlParams.get('projectId');
|
|
const treeObj = ref(); //树形的实例
|
|
// 树的数据
|
|
const zNodes = ref([
|
|
{
|
|
id: 1,
|
|
parentId: 0,
|
|
sourceName: '111',
|
|
isShow: true,
|
|
sourceType: 'directory',
|
|
params: ''
|
|
}
|
|
]);
|
|
const nodes: any = ref([]);
|
|
/**
|
|
* 显示、定位右键菜单组件并返回菜单数组
|
|
*/
|
|
const showRightMenu = (event: any, treeObj: any) => {
|
|
const selectedNodes = getSelectedNodes(treeObj);
|
|
let arr: any = [];
|
|
// 右键菜单的宽高
|
|
const rightMenuHeight = window.getComputedStyle(window['$']('#rMenu')[0]).getPropertyValue('height');
|
|
const rightMenuWidth = window.getComputedStyle(window['$']('#rMenu')[0]).getPropertyValue('width');
|
|
const getNumber = (string: any) => {
|
|
return Number(string.replace('px', ''));
|
|
};
|
|
console.log('event', event);
|
|
console.log('右键菜单的宽高');
|
|
console.log(getNumber(rightMenuHeight));
|
|
console.log(getNumber(rightMenuWidth));
|
|
let x = Math.abs(event.clientX - window['$']('.treeBox')[0].getBoundingClientRect().left);
|
|
let y = Math.abs(event.clientY - window['$']('.treeBox')[0].getBoundingClientRect().top);
|
|
y += document.body.scrollTop + 20;
|
|
x += document.body.scrollLeft + 40;
|
|
const bodyWidth = window['$']('body')?.width() || 0;
|
|
const bodyHeight = window['$']('body')?.height() || 0;
|
|
if (event.screenX + getNumber(rightMenuWidth) + 40 > bodyWidth) {
|
|
x = bodyWidth - getNumber(rightMenuWidth) - window['$']('.treeBox')[0].getBoundingClientRect().left;
|
|
}
|
|
if (event.screenY + getNumber(rightMenuHeight) + 20 > bodyHeight) {
|
|
y = (bodyHeight - window['$']('.treeBox')[0].getBoundingClientRect().top) / 2;
|
|
}
|
|
window['$']('#rMenu').css({
|
|
top: y + 'px',
|
|
left: x + 'px',
|
|
visibility: 'visible'
|
|
});
|
|
console.log('selectedNodes', selectedNodes);
|
|
if (Object.prototype.toString.call(selectedNodes) === '[object Array]' && selectedNodes.length > 1) {
|
|
arr = ['del'];
|
|
} else {
|
|
if (selectedNodes.length == 0) arr = ['addDirectory'];
|
|
else {
|
|
try {
|
|
arr = nodeType[selectedNodes[0].sourceType].rightMenus;
|
|
} catch (e) {
|
|
console.log('e', e);
|
|
arr = [];
|
|
}
|
|
}
|
|
}
|
|
return arr;
|
|
};
|
|
/**
|
|
* 用于捕获zTree上鼠标按键按下后的事件回调函数
|
|
* @param event
|
|
* @param treeId
|
|
* @param treeNode
|
|
*/
|
|
const onMouseDown = (event: MouseEvent, treeId: string, treeNode: any) => {
|
|
const isShift = event.shiftKey;
|
|
const isCtrl = event.ctrlKey;
|
|
if ((!isShift && !isCtrl) || !treeNode) {
|
|
nodes.value = [];
|
|
}
|
|
if (treeNode) {
|
|
//判断是否是图层文件
|
|
if (isCtrl) {
|
|
const isSelected = window['treeObj'].getSelectedNodes().some((node: any) => node.id === treeNode.id);
|
|
if (isSelected) {
|
|
// 如果节点已选中，则取消选中
|
|
nodes.value = nodes.value.filter((node: any) => node.id !== treeNode.id);
|
|
} else {
|
|
// 如果节点未选中，则添加到选中列表
|
|
nodes.value.push(treeNode);
|
|
}
|
|
}
|
|
} else {
|
|
window['treeObj'].cancelSelectedNode();
|
|
window['$']('#rMenu')[0].style.visibility = 'hidden';
|
|
}
|
|
};
|
|
/**
|
|
* 树形节点右键点击
|
|
* @param event 事件对象
|
|
* @param treeId 树形结构id
|
|
* @param treeNode 鼠标右键点击时所在节点的 JSON 数据对象
|
|
*/
|
|
const onRightClick = (event: MouseEvent, treeId: string, treeNode: any) => {
|
|
event.preventDefault();
|
|
console.log('treeObj', treeObj);
|
|
const selectNodes = getSelectedNodes(treeObj.value);
|
|
let isnewSelect = true; //是否为新选中
|
|
selectNodes.forEach((item: any) => {
|
|
if (treeNode && item.id == treeNode.id) isnewSelect = false;
|
|
});
|
|
if (!event.ctrlKey && (selectNodes.length < 2 || isnewSelect)) cusSelectNode(treeObj.value, treeNode);
|
|
const menus = showRightMenu(event, treeObj.value);
|
|
console.log('menus', menus);
|
|
// if (menus.length == 0) {
|
|
// return;
|
|
// }
|
|
nextTick(() => {
|
|
rightMenuRef.value.initMenus(menus, treeNode);
|
|
});
|
|
};
|
|
/**
|
|
* 捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
|
|
* @param event
|
|
* @param treeId
|
|
* @param treeNode
|
|
*/
|
|
const onCheck = async (event: any, treeId: any, treeNode: any) => {
|
|
console.log(treeNode, 'treeNode');
|
|
const parentNode = treeNode.getParentNode();
|
|
|
|
let params = treeNode.params;
|
|
if (typeof treeNode.params === 'string') {
|
|
params = JSON.parse(treeNode.params);
|
|
}
|
|
let entityObject;
|
|
if (treeNode.sourceType == 'pressModel') {
|
|
// const params = JSON.parse(treeNode.params);
|
|
const id = treeNode.id + '_' + params.modelId;
|
|
const data = (window as any).pressModelMap.get(id);
|
|
data.isShow = treeNode.isShow;
|
|
entityObject = (window as any).pressModelEntities.get(treeNode.id);
|
|
|
|
if (!entityObject && treeNode.isShow) {
|
|
const entity = window['Earth1'].entityMap.get(params.modelId).entity;
|
|
entityObject = new window['YJ'].Analysis.Flat(window['Earth1'], entity, {
|
|
positions: params.positions,
|
|
height: params.height,
|
|
name: treeNode.sourceName
|
|
})(window as any).pressModelEntities.set(treeNode.id, entityObject);
|
|
}
|
|
} else {
|
|
entityObject = window['Earth1'].entityMap.get(treeNode.id);
|
|
}
|
|
if (entityObject) {
|
|
entityObject.show = treeNode.isShow;
|
|
} else {
|
|
// 需要深拷贝
|
|
const params = JSON.parse(treeNode.params);
|
|
const params2 = JSON.stringify(params);
|
|
initMapData(treeNode.sourceType, JSON.parse(params2), treeNode.id).then((res) => {
|
|
entityObject = window['Earth1'].entityMap.get(res.id);
|
|
entityObject.show = treeNode.isShow;
|
|
});
|
|
}
|
|
// entityObject.show = treeNode.isShow;
|
|
treeNode.sourceType != 'pressModel' && (params.show = treeNode.isShow);
|
|
const params2 = {
|
|
'id': treeNode.id,
|
|
params: params,
|
|
'isShow': treeNode.isShow ? 1 : 0
|
|
};
|
|
updateInfo(params2).then((res) => {
|
|
if (res.code == 200) app.config.globalProperties.$message.success('操作成功');
|
|
});
|
|
|
|
// 如果当前节点有父节点，检查所有子节点状态
|
|
if (parentNode) {
|
|
checkChildNodes(parentNode);
|
|
}
|
|
|
|
// 检查子节点状态，更新父节点
|
|
function checkChildNodes(parentNode) {
|
|
const children = parentNode.children;
|
|
if (!children || children.length === 0) return;
|
|
|
|
// 检查是否所有子节点都未被选中
|
|
let allUnchecked = true;
|
|
for (let i = 0; i < children.length; i++) {
|
|
const childNode = children[i];
|
|
// 如果有任何一个子节点被选中，则父节点不应被取消
|
|
if (childNode.isShow) {
|
|
allUnchecked = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 如果所有子节点都未被选中，且父节点当前是选中状态，则取消父节点选择
|
|
if (allUnchecked && parentNode.isShow) {
|
|
window['treeObj'].checkNode(parentNode, false, true);
|
|
|
|
// 递归检查上一级父节点
|
|
const grandParent = parentNode.getParentNode();
|
|
if (grandParent) {
|
|
checkChildNodes(grandParent);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
/**
|
|
* 树形节点左键双击
|
|
* @param event 事件对象
|
|
* @param treeId 树形结构id
|
|
* @param treeNode 鼠标右键点击时所在节点的 JSON 数据对象
|
|
*/
|
|
const onDblClick = (event: MouseEvent, treeId: string, treeNode: any) => {
|
|
console.log('treeNode', treeNode);
|
|
if (treeNode.params && typeof treeNode.params === 'string') {
|
|
treeNode.params = JSON.parse(treeNode.params);
|
|
}
|
|
|
|
let entityObject;
|
|
if (treeNode.sourceType == 'pressModel') {
|
|
entityObject = (window as any).pressModelEntities.get(treeNode.id);
|
|
} else if (treeNode.sourceType === 'roam') {
|
|
app.config.globalProperties.$message.warning('单击鼠标右键可结束当前漫游');
|
|
window['YJ'].Global.FlyRoam.flyTo(window['Earth1'], treeNode.params.points);
|
|
return;
|
|
} else {
|
|
entityObject = window['Earth1'].entityMap.get(treeNode.id);
|
|
}
|
|
console.log('entityObject', entityObject);
|
|
entityObject.flyTo();
|
|
};
|
|
//树的配置项
|
|
const setting = {
|
|
edit: {
|
|
enable: true,
|
|
showRemoveBtn: false,
|
|
showRenameBtn: false,
|
|
drag: {
|
|
isMove: true,
|
|
isCopy: false
|
|
}
|
|
},
|
|
check: {
|
|
enable: true,
|
|
nocheckInherit: false,
|
|
chkboxType: { Y: 'ps', N: 's' }
|
|
},
|
|
view: {
|
|
selectedMulti: true
|
|
// autoCancelSelected: true
|
|
},
|
|
data: {
|
|
key: {
|
|
//zdatas数据中表示节点name的属性key
|
|
name: 'sourceName',
|
|
checked: 'isShow'
|
|
},
|
|
simpleData: {
|
|
enable: true,
|
|
idKey: 'id',
|
|
pIdKey: 'parentId',
|
|
nameKey: 'sourceName'
|
|
}
|
|
},
|
|
callback: {
|
|
onMouseDown: onMouseDown,
|
|
onRightClick: onRightClick,
|
|
// onClick: onClick,
|
|
// onDrop: onDrop,
|
|
// beforeDrop: beforeDrop,
|
|
onCheck: onCheck,
|
|
onDblClick: onDblClick
|
|
}
|
|
};
|
|
|
|
const initTreeCallBack = () => {
|
|
const arr = ['ArcgisWXImagery', 'ArcgisBLUEImagery', 'ArcgisLWImagery', 'GDLWImagery', 'GDWXImagery', 'GDSLImagery', 'layer'];
|
|
const layers: any = [];
|
|
console.log("window['Earth1']", window['Earth1']);
|
|
if (window['Earth1']) {
|
|
for (let i = 0; i < zNodes.value.length; i++) {
|
|
if (zNodes.value[i].sourceType === 'directory') {
|
|
continue;
|
|
}
|
|
const params = JSON.parse(zNodes.value[i].params || '{}');
|
|
const detail = JSON.parse(zNodes.value[i]['detail'] || '{}');
|
|
if (!params.id) {
|
|
params.id = zNodes.value[i].id;
|
|
}
|
|
if (!params.name) {
|
|
params.name = zNodes.value[i].sourceName;
|
|
}
|
|
if (arr.includes(zNodes.value[i].sourceType)) {
|
|
layers.push({
|
|
sourceType: zNodes.value[i].sourceType,
|
|
params: { ...detail, ...params }
|
|
});
|
|
} else {
|
|
if (zNodes.value[i].isShow) initMapData(zNodes.value[i].sourceType, { ...detail, ...params }, null);
|
|
}
|
|
}
|
|
layers.sort((obj1, obj2) => {
|
|
return obj1.params.layerIndex - obj2.params.layerIndex;
|
|
});
|
|
console.log(layers, 'layers');
|
|
for (let i = 0; i < layers.length; i++) {
|
|
// if (layers[i].sourceType == null) layers[i].sourceType = 'tileset';
|
|
initMapData(layers[i].sourceType, layers[i].params, null);
|
|
}
|
|
}
|
|
};
|
|
const initTree = async (selector: string = '#treeDemo') => {
|
|
const res = await getMarkerList();
|
|
if (res.code == 200) {
|
|
res.data.sort((a: any, b: any) => {
|
|
if (a.treeIndex && b.treeIndex) {
|
|
return a.treeIndex - b.treeIndex;
|
|
}
|
|
if (a.treeIndex) {
|
|
return -1;
|
|
}
|
|
if (b.treeIndex) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
});
|
|
for (let i = res.data.length - 1; i >= 0; i--) {
|
|
res.data[i].icon = await cusNodeIcon(res.data[i]);
|
|
res.data[i].class = 'xxxx';
|
|
res.data[i].className = 'xxxx';
|
|
}
|
|
zNodes.value = [...res.data];
|
|
// console.log('getMarkerList·res', zNodes.value);
|
|
// 初始化树
|
|
treeObj.value = window['$'].fn.zTree.init(window['$'](selector), setting, zNodes.value);
|
|
window['treeObj'] = treeObj.value;
|
|
initTreeCallBack();
|
|
}
|
|
|
|
};
|
|
return {
|
|
initTree,
|
|
setting,
|
|
rightMenuRef
|
|
};
|
|
};
|