OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix: 拓扑信息编辑模式控制

Browse Source
This commit is contained in:
TsMask
2023-12-29 18:43:14 +08:00
parent 8523b34c19
commit 8f968839fa
1 changed files with 48 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/views/monitor/topology-build/hooks/useGraph.ts
View File

@@ -51,6 +51,9 @@ export default function useGraph() {
offseY: 10,
itemTypes: ['canvas'],
getContent(evt) {
console.log(evt);
if (!evt) return '无';
const edit = graphMode.value === 'edit';
return `
<div
style="
@@ -61,17 +64,23 @@ export default function useGraph() {
>
<h3>画布</h3>
<div id="show" style="cursor: pointer; margin-bottom: 2px">
1. 显示所有隐藏项
显示所有隐藏项
</div>
<div id="create-edge" style="cursor: pointer; margin-bottom: 2px">
2. 新增边
<div id="create-edge" style="cursor: pointer; margin-bottom: 2px; display: ${
edit ? 'black' : 'none'
}">
新增边
</div>
<div id="create-node" style="cursor: pointer; margin-bottom: 2px">
3. 新增节点
</div>
<div id="create-combo" style="cursor: pointer; margin-bottom: 2px">
4. 新增分组
<div id="create-node" style="cursor: pointer; margin-bottom: 2px; display: ${
edit ? 'black' : 'none'
}">
新增节点
</div>
<div id="create-combo" style="cursor: pointer; margin-bottom: 2px; display: ${
edit ? 'black' : 'none'
}">
新增分组
</div>
</div>`;
},
handleMenuClick(target, item) {
@@ -164,6 +173,9 @@ export default function useGraph() {
itemTypes: ['node'],
getContent(evt) {
console.log(evt);
if (!evt) return '无';
const item = evt.item?.getModel();
const edit = graphMode.value === 'edit';
return `
<div
style="
@@ -173,16 +185,21 @@ export default function useGraph() {
background: #e6f7ff;
"
>
<h3>节点</h3>
<div id="edit" style="cursor: pointer; margin-bottom: 2px">
1. 编辑
</div>
<div id="delete" style="cursor: pointer; margin-bottom: 2px">
2. 删除
</div>
<h3>节点:${item?.label || '无标签'}</h3>
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
3. 隐藏
隐藏
</div>
<div id="edit" style="cursor: pointer; margin-bottom: 2px; display: ${
edit ? 'black' : 'none'
}">
编辑
</div>
<div id="delete" style="cursor: pointer; margin-bottom: 2px; display: ${
edit ? 'black' : 'none'
}">
删除
</div>
</div>
`;
},
@@ -238,6 +255,9 @@ export default function useGraph() {
itemTypes: ['edge'],
getContent(evt) {
console.log(evt);
if (!evt) return '无';
const item = evt.item?.getModel();
const edit = graphMode.value === 'edit';
return `
<div
style="
@@ -247,16 +267,20 @@ export default function useGraph() {
background: #e6f7ff;
"
>
<h3>边</h3>
<div id="edit" style="cursor: pointer; margin-bottom: 2px">
1. 编辑
</div>
<div id="delete" style="cursor: pointer; margin-bottom: 2px">
2. 删除
</div>
<strong>边:${item?.label || '无标签'}</strong>
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
3. 隐藏
隐藏
</div>
<div id="edit" style="cursor: pointer; margin-bottom: 2px; display: ${
edit ? 'black' : 'none'
}">
编辑
</div>
<div id="delete" style="cursor: pointer; margin-bottom: 2px; display: ${
edit ? 'black' : 'none'
}">
删除
</div>
</div>
`;
},
@@ -288,7 +312,6 @@ export default function useGraph() {
if (!item?.label) {
return '无标签';
}
console.log(item);
return `
<div
style="