feat: 拓扑编辑分组功能

2023-12-29 10:17:31 +08:00
parent a53fd939e1
commit aa0c92a8d1
5 changed files with 690 additions and 106 deletions
--- a/src/views/monitor/topology-build/hooks/useCombo.ts
+++ b/src/views/monitor/topology-build/hooks/useCombo.ts
@@ -0,0 +1,156 @@
+import { message, Form } from 'ant-design-vue/lib';
+import { reactive, watch } from 'vue';
+import { graphG6 } from './useGraph';
+import { number } from 'echarts';
+
+/**图分组内置类型 */
+export const comboTypeOptions = [
+  {
+    value: 'circle',
+    label: '圆形',
+  },
+  {
+    value: 'rect',
+    label: '矩形',
+  },
+];
+
+/**图分组标签文本位置 */
+export const comboPositionOptions = [
+  {
+    value: 'top',
+    label: '上',
+  },
+  {
+    value: 'left',
+    label: '左',
+  },
+  {
+    value: 'right',
+    label: '右',
+  },
+  {
+    value: 'bottom',
+    label: '下',
+  },
+  {
+    value: 'center',
+    label: '居中',
+  },
+];
+
+/**图分组信息状态类型 */
+type ComboStateType = {
+  /**图分组原始数据 */
+  origin: Record<string, any>;
+  /**图分组表单数据 */
+  form: Record<string, any>;
+};
+
+/**图分组信息状态 */
+export let comboState: ComboStateType = reactive({
+  origin: {},
+  form: {
+    id: '',
+    type: 'rect',
+    parentId: '',
+    size: [40, 40],
+    padding: [30, 30, 30, 30],
+    style: {
+      fill: '#ffffff',
+      stroke: '#ffffff',
+      lineWidth: 1,
+    },
+    label: '',
+    labelCfg: {
+      refX: 10,
+      refY: 10,
+      position: 'top',
+      style: {
+        fill: '#000000',
+        fontSize: 12,
+        fontWeight: 500,
+      },
+    },
+  },
+});
+
+/**图分组对话分组内表单属性和校验规则 */
+export const comboStateForm = Form.useForm(
+  comboState.form,
+  reactive({
+    id: [{ required: true, message: '分组唯一标识 ID' }],
+  })
+);
+
+/**图分组编辑监听更新视图 */
+watch(comboState.form, combo => {
+  const info = JSON.parse(JSON.stringify(combo));
+  const comboId = info.id;
+  if (comboId) {
+    graphG6.value.clearItemStates(comboId, 'selected');
+    console.log(info);
+    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);
+  }
+});
+
+/**图分组类型输入限制 */
+export function handleComboTypeChange(type: any) {
+  // 类型尺寸和边距
+  if (type === 'circle') {
+    comboState.form.size = 30;
+    comboState.form.padding = 30;
+  }
+  if (type === 'rect') {
+    comboState.form.size = [30, 20];
+    comboState.form.padding = [10, 20, 10, 20];
+  }
+}
+
+/**图分组新增或更新 */
+export function handleOkcombo() {
+  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;
+}
+
+/**图分组取消还原 */
+export 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 = {};
+  }
+}