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

feat: 拓扑编辑功能操作

Browse Source
This commit is contained in:
TsMask
2023-12-29 16:20:57 +08:00
parent f0ab5d5ea6
commit b50c5250bf
5 changed files with 192 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/views/monitor/topology-build/components/GraphEditModal.vue
View File

@@ -1,7 +1,11 @@
<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import useI18n from '@/hooks/useI18n';
import useGraph, { graphEvent } from '../hooks/useGraph';
import {
graphEvent,
selectSourceTargetOptions,
selectComboOptions,
} from '../hooks/useGraph';
import useEdge, {
edgeTypeOptions,
edgePositionOptions,
@@ -34,7 +38,6 @@ const {
handleOkNode,
handleCancelNode,
} = useNode();
const { selectSourceTargetOptions, selectComboOptions } = useGraph();
/**图监听事件变更 */
watch(graphEvent, v => {
@@ -43,27 +46,23 @@ watch(graphEvent, v => {
console.log(type, target, item);
// 画布
if (type === 'canvas-create-node') {
// const edge = item.getModel();
// edgeState.origin = JSON.parse(JSON.stringify(edge));
// edgeState.form = Object.assign(edgeState.form, edge);
modalState.title = '新增节点信息编辑';
modalState.formType = 'node';
modalState.visible = true;
}
if (type === 'canvas-create-edge') {
// const edge = item.getModel();
// edgeState.origin = JSON.parse(JSON.stringify(edge));
// edgeState.form = Object.assign(edgeState.form, edge);
edgeState.origin = {};
edgeState.form.id = '#';
modalState.title = '新增边信息编辑';
modalState.formType = 'edge';
modalState.visible = true;
}
if (type === 'canvas-create-node') {
nodeState.origin = {};
nodeState.form.id = '';
modalState.title = '新增节点信息编辑';
modalState.formType = 'node';
modalState.visible = true;
}
if (type === 'canvas-create-combo') {
// const edge = item.getModel();
// edgeState.origin = JSON.parse(JSON.stringify(edge));
// edgeState.form = Object.assign(edgeState.form, edge);
comboState.origin = {};
comboState.form.id = '';
modalState.title = '新增分组信息编辑';
modalState.formType = 'combo';
modalState.visible = true;
@@ -80,7 +79,6 @@ watch(graphEvent, v => {
// 节点
if (type === 'node-edit' && item) {
const node = item.getModel();
console.log(node.comboId);
nodeState.origin = JSON.parse(JSON.stringify(node));
nodeState.form = Object.assign(nodeState.form, node);
modalState.title = '节点信息编辑';
@@ -90,9 +88,12 @@ watch(graphEvent, v => {
// 分组
if (type === 'combo-edit' && item) {
const combo = item.getModel();
console.log(JSON.parse(JSON.stringify(combo)));
comboState.origin = JSON.parse(JSON.stringify(combo));
comboState.form = Object.assign(comboState.form, combo);
// 分组内元素
if (Array.isArray(combo.children)) {
comboState.form.children = combo.children.map(item => item.id);
}
modalState.title = '分组信息编辑';
modalState.formType = 'combo';
modalState.visible = true;
@@ -126,24 +127,27 @@ let modalState: ModalStateType = reactive({
function fnModalOk() {
modalState.confirmLoading = true;
const type = modalState.formType;
let result = false;
// 边编辑确认
if (type === 'edge') {
handleOkEdge().then(res => {
console.log(res);
handleOkEdge().then(result => {
modalState.visible = !result;
modalState.confirmLoading = false;
});
}
// 节点编辑确认
if (type === 'node') {
result = handleOkNode();
handleOkNode().then(result => {
modalState.visible = !result;
modalState.confirmLoading = false;
});
}
// 分租编辑确认
if (type === 'combo') {
result = handleOkcombo();
handleOkcombo().then(result => {
modalState.visible = !result;
modalState.confirmLoading = false;
});
}
console.log(type, result);
modalState.visible = !result;
modalState.confirmLoading = !result;
}
/**
@@ -212,7 +216,7 @@ function fnModalCancel() {
v-model:value="comboState.form.id"
allow-clear
:placeholder="t('common.inputPlease')"
:disabled="comboState.form.id !== ''"
:disabled="comboState.form.id === comboState.origin.id"
></a-input>
</a-form-item>
@@ -337,6 +341,22 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-form-item
label="分组内元素"
name="children"
help="元素包括节点和分组"
:label-col="{ span: 3 }"
v-if="comboState.form.id !== comboState.origin.id"
>
<a-select
v-model:value="comboState.form.children"
mode="tags"
style="width: 100%"
:options="selectSourceTargetOptions"
:placeholder="t('common.selectPlease')"
></a-select>
</a-form-item>
<a-divider orientation="left"> 标签文本及其配置 </a-divider>
<a-form-item
@@ -457,7 +477,7 @@ function fnModalCancel() {
v-model:value="nodeState.form.id"
allow-clear
:placeholder="t('common.inputPlease')"
:disabled="nodeState.form.id !== ''"
:disabled="nodeState.form.id === nodeState.origin.id"
></a-input>
</a-form-item>
@@ -725,12 +745,6 @@ function fnModalCancel() {
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="图片来源" name="img">
<a-input
v-model:value="nodeState.form.img"
allow-clear
:placeholder="t('common.inputPlease')"
>
</a-input>
<a-input-group compact>
<a-auto-complete
v-model:value="nodeState.form.img"

79
src/views/monitor/topology-build/hooks/useCombo.ts
View File

@@ -1,6 +1,6 @@
import { message, Form } from 'ant-design-vue/lib';
import { reactive, watch } from 'vue';
import { graphG6 } from './useGraph';
import { reactive, toRaw, watch } from 'vue';
import { graphG6, selectSourceTargetOptions } from './useGraph';
import useI18n from '@/hooks/useI18n';
/**图分组内置类型 */
@@ -60,9 +60,12 @@ export default function useCombo() {
size: [40, 40],
padding: [30, 30, 30, 30],
style: {
radius: 2,
fill: '#ffffff',
stroke: '#ffffff',
lineWidth: 1,
cursor: 'grab',
fillOpacity: 0.5,
},
label: '',
labelCfg: {
@@ -75,6 +78,7 @@ export default function useCombo() {
fontWeight: 500,
},
},
children: [], // 子元素
},
});
@@ -89,12 +93,13 @@ export default function useCombo() {
/**图分组编辑监听更新视图 */
watch(comboState.form, combo => {
const info = JSON.parse(JSON.stringify(combo));
// 新增不监听变化
const comboOriginId = comboState.origin.id;
const comboId = info.id;
if (comboId) {
if (comboId && comboId === comboOriginId) {
graphG6.value.clearItemStates(comboId, 'selected');
console.log(info);
const data = graphG6.value.save();
const item = data.combos.find((item: any) => item.id === combo.id);
const item = data.combos.find((item: any) => item.id === comboId);
Object.assign(item, combo);
// 无父组id时不要设置，避免导致绘制失败
if (!combo.parentId) {
@@ -119,43 +124,57 @@ export default function useCombo() {
/**图分组新增或更新 */
function handleOkcombo() {
const combo = JSON.parse(JSON.stringify(comboState.form));
if (!combo.id) {
message.warn({
content: `分组元素ID错误`,
duration: 2,
});
return false;
}
return comboStateForm
.validate()
.then(e => {
const combo = JSON.parse(JSON.stringify(comboState.form));
if (!combo.id) {
message.warn({
content: `分组元素ID错误`,
duration: 2,
});
return false;
}
const item = graphG6.value.findById(combo.id);
if (item) {
const data = graphG6.value.save();
const item = data.combos.find((item: any) => item.id === combo.id);
Object.assign(item, combo);
if (!combo.parentId) {
Reflect.deleteProperty(item, 'parentId');
}
graphG6.value.read(data);
} else {
graphG6.value.createCombo(combo, []);
}
comboStateForm.resetFields();
comboState.origin = {};
return true;
const item = graphG6.value.findById(combo.id);
if (item) {
const data = graphG6.value.save();
const item = data.combos.find((item: any) => item.id === combo.id);
Object.assign(item, combo);
// 无父组id时不要设置，避免导致绘制失败
if (!combo.parentId) {
Reflect.deleteProperty(item, 'parentId');
}
graphG6.value.read(data);
} else {
graphG6.value.createCombo(combo, combo.children);
}
comboStateForm.resetFields();
comboState.origin = {};
return true;
})
.catch(e => {
message.error(
t('common.errorFields', { num: e.errorFields.length }),
3
);
return false;
});
}
/**图分组取消还原 */
function handleCancelcombo() {
// 新增无原始数据
const origin = JSON.parse(JSON.stringify(comboState.origin));
if (origin.id) {
const data = graphG6.value.save();
const item = data.combos.find((combo: any) => combo.id === origin.id);
Object.assign(item, origin);
graphG6.value.read(data);
comboStateForm.resetFields();
comboState.origin = {};
}
comboStateForm.resetFields();
comboState.origin = {};
}
return {

14
src/views/monitor/topology-build/hooks/useEdge.ts
View File

@@ -110,6 +110,7 @@ export default function useEdge() {
/**图边编辑监听更新视图 */
watch(edgeState.form, edge => {
const info = JSON.parse(JSON.stringify(edge));
// 新增id是#不监听变化
const edgeId = info.id;
if (edgeId && edgeId !== '#') {
graphG6.value.clearItemStates(edgeId, 'selected');
@@ -131,10 +132,7 @@ export default function useEdge() {
return false;
}
debugger;
// graphG6.value.removeItem(edge.id);
// edge.id = `${edge.source}~${Date.now()}~${edge.target}`;
// graphG6.value.addItem('edge', edge);
// 存在更新，新增id是#不监听变化
const item = graphG6.value.findById(edge.id);
if (item) {
graphG6.value.updateItem(item, edge);
@@ -142,6 +140,7 @@ export default function useEdge() {
edge.id = `${edge.source}~${Date.now()}~${edge.target}`;
graphG6.value.addItem('edge', edge);
}
edgeStateForm.resetFields();
edgeState.origin = {};
return true;
@@ -157,14 +156,13 @@ export default function useEdge() {
/**图边取消还原 */
function handleCancelEdge() {
// 新增无原始数据
const origin = JSON.parse(JSON.stringify(edgeState.origin));
if (origin.id) {
graphG6.value.updateItem(origin.id, origin);
// graphG6.value.removeItem(edgeOrigin.id);
// graphG6.value.addItem('edge', edgeOrigin);
edgeStateForm.resetFields();
edgeState.origin = {};
}
edgeStateForm.resetFields();
edgeState.origin = {};
}
return { edgeState, edgeStateForm, handleOkEdge, handleCancelEdge };

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

@@ -32,6 +32,12 @@ export const graphEvent = ref<{
item: Item | null;
}>();
/**图元素选择开始结束点 */
export const selectSourceTargetOptions = ref<Record<string, any>[]>([]);
/**图元素选择嵌入分组 */
export const selectComboOptions = ref<Record<string, any>[]>([]);
/**图模式选择项 */
export const graphMode = ref<string>('default');
@@ -56,11 +62,11 @@ export default function useGraph() {
<div id="show" style="cursor: pointer; margin-bottom: 2px">
1. 显示所有隐藏项
</div>
<div id="create-node" style="cursor: pointer; margin-bottom: 2px">
2. 新增节点
</div>
<div id="create-edge" style="cursor: pointer; margin-bottom: 2px">
3. 新增边
2. 新增边
</div>
<div id="create-node" style="cursor: pointer; margin-bottom: 2px">
3. 新增节点
</div>
<div id="create-combo" style="cursor: pointer; margin-bottom: 2px">
4. 新增分组
@@ -71,8 +77,8 @@ export default function useGraph() {
console.log(target, item);
const targetId = target.id;
switch (targetId) {
case 'create-node':
case 'create-edge':
case 'create-node':
case 'create-combo':
graphEvent.value = { type: `canvas-${targetId}`, target, item };
break;
@@ -122,6 +128,9 @@ export default function useGraph() {
<div id="edit" style="cursor: pointer; margin-bottom: 2px">
1. 编辑
</div>
<div id="delete" style="cursor: pointer; margin-bottom: 2px">
2. 删除
</div>
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
2. 隐藏
</div>
@@ -135,6 +144,10 @@ export default function useGraph() {
case 'edit':
graphEvent.value = { type: `combo-${targetId}`, target, item };
break;
case 'delete':
graphG6.value.uncombo(item);
graphG6.value.updateCombos();
break;
case 'hide':
graphG6.value.hideItem(item);
break;
@@ -161,8 +174,11 @@ export default function useGraph() {
<div id="edit" style="cursor: pointer; margin-bottom: 2px">
1. 编辑
</div>
<div id="delete" style="cursor: pointer; margin-bottom: 2px">
2. 删除
</div>
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
2. 隐藏
3. 隐藏
</div>
</div>
`;
@@ -174,6 +190,9 @@ export default function useGraph() {
case 'edit':
graphEvent.value = { type: `node-${targetId}`, target, item };
break;
case 'delete':
graphG6.value.removeItem(item);
break;
case 'hide':
graphG6.value.hideItem(item);
break;
@@ -217,8 +236,11 @@ export default function useGraph() {
<div id="edit" style="cursor: pointer; margin-bottom: 2px">
1. 编辑
</div>
<div id="delete" style="cursor: pointer; margin-bottom: 2px">
2. 删除
</div>
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
2. 隐藏
3. 隐藏
</div>
</div>
`;
@@ -230,6 +252,9 @@ export default function useGraph() {
case 'edit':
graphEvent.value = { type: `edge-${targetId}`, target, item };
break;
case 'delete':
graphG6.value.removeItem(item);
break;
case 'hide':
graphG6.value.hideItem(item);
break;
@@ -312,12 +337,6 @@ export default function useGraph() {
});
}
/**图元素选择开始结束点 */
const selectSourceTargetOptions = ref<Record<string, any>[]>([]);
/**图元素选择嵌入分组 */
const selectComboOptions = ref<Record<string, any>[]>([]);
/**
* 图元素选择开始结束点数据获取
*/
@@ -507,8 +526,6 @@ export default function useGraph() {
}
return {
selectSourceTargetOptions,
selectComboOptions,
handleRanderGraph,
handleChangeMode,
};

92
src/views/monitor/topology-build/hooks/useNode.ts
View File

@@ -138,9 +138,10 @@ export default function useNode() {
/**图节点编辑监听更新视图 */
watch(nodeState.form, node => {
const info = JSON.parse(JSON.stringify(node));
console.log(info);
// 新增不监听变化
const nodeOriginId = nodeState.origin.id;
const nodeId = info.id;
if (nodeId) {
if (nodeId && nodeId === nodeOriginId) {
// 图片类型需要移除style属性，避免填充
if (info.type === 'image') {
Reflect.deleteProperty(info, 'style');
@@ -162,17 +163,17 @@ export default function useNode() {
function handleNodeTypeChange(type: any) {
// 设置图标属性
if (['circle', 'ellipse', 'diamond', 'star', 'donut'].includes(type)) {
let size: number[] | number = [40, 30];
if (['circle', 'star', 'donut'].includes(type)) {
size = 30;
}
const origin = nodeState.origin;
if (origin.icon) {
nodeState.form = Object.assign(nodeState.form, {
size: origin.size,
size,
icon: origin.icon,
});
} else {
let size: number[] | number = [30];
if (['circle', 'star', 'donut'].includes(type)) {
size = 30;
}
nodeState.form = Object.assign(nodeState.form, {
size,
icon: {
@@ -240,44 +241,65 @@ export default function useNode() {
});
}
}
// 设置矩形大小
if (type === 'rect') {
nodeState.form = Object.assign(nodeState.form, {
size: [40, 30],
});
}
}
/**图节点新增或更新 */
function handleOkNode() {
const node = JSON.parse(JSON.stringify(nodeState.form));
if (!node.id) {
message.warn({
content: `节点元素ID错误`,
duration: 2,
return nodeStateForm
.validate()
.then(e => {
const node = JSON.parse(JSON.stringify(nodeState.form));
if (!node.id) {
message.warn({
content: `节点元素ID错误`,
duration: 2,
});
return false;
}
// 存在更新，新增不监听变化
const item = graphG6.value.findById(node.id);
if (item) {
graphG6.value.updateItem(item, node);
} else {
graphG6.value.addItem('node', node);
}
// 三角和图片的样式变更需要重绘才生效
if (
node.type === 'triangle' ||
node.type === 'image' ||
node.comboId !== nodeState.origin.comboId
) {
graphG6.value.read(graphG6.value.save());
}
nodeStateForm.resetFields();
nodeState.origin = {};
return true;
})
.catch(e => {
message.error(
t('common.errorFields', { num: e.errorFields.length }),
3
);
return false;
});
return false;
}
// graphG6.value.removeItem(node.id);
// graphG6.value.addItem('node', node);
const item = graphG6.value.findById(node.id);
if (item) {
graphG6.value.updateItem(item, node);
} else {
graphG6.value.addItem('node', node);
}
// 三角和图片的样式变更需要重绘才生效
if (
node.type === 'triangle' ||
node.type === 'image' ||
node.comboId !== nodeState.origin.comboId
) {
graphG6.value.read(graphG6.value.save());
}
nodeStateForm.resetFields();
nodeState.origin = {};
return true;
}
/**图节点取消还原 */
function handleCancelNode() {
// 新增无原始数据
const origin = JSON.parse(JSON.stringify(nodeState.origin));
if (origin.id) {
graphG6.value.updateItem(origin.id, origin);
// 三角和图片的样式变更需要重绘才生效
if (
origin.type === 'triangle' ||
@@ -286,9 +308,9 @@ export default function useNode() {
) {
graphG6.value.read(graphG6.value.save());
}
nodeStateForm.resetFields();
nodeState.origin = {};
}
nodeStateForm.resetFields();
nodeState.origin = {};
}
return {