1270 lines
39 KiB
Vue
1270 lines
39 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, watch } from 'vue';
|
|
import useI18n from '@/hooks/useI18n';
|
|
import {
|
|
graphEvent,
|
|
selectSourceTargetOptions,
|
|
selectComboOptions,
|
|
} from '../hooks/useGraph';
|
|
import useEdge from '../hooks/useEdge';
|
|
import useNode from '../hooks/useNode';
|
|
import useCombo from '../hooks/useCombo';
|
|
|
|
const { t } = useI18n();
|
|
const {
|
|
comboTypeOptions,
|
|
comboLabelPositionOptions,
|
|
comboState,
|
|
comboStateForm,
|
|
handleComboTypeChange,
|
|
handleOkcombo,
|
|
handleCancelcombo,
|
|
} = useCombo();
|
|
const {
|
|
edgeTypeOptions,
|
|
edgeLabelPositionOptions,
|
|
edgeState,
|
|
edgeStateForm,
|
|
handleOkEdge,
|
|
handleCancelEdge,
|
|
} = useEdge();
|
|
const {
|
|
nodeTypeOptions,
|
|
nodeLabelPositionOptions,
|
|
nodeDirectionOptions,
|
|
nodeImageClipCfgOptions,
|
|
nodeImageOptions,
|
|
nodeState,
|
|
nodeStateForm,
|
|
handleNodeTypeChange,
|
|
handleOkNode,
|
|
handleCancelNode,
|
|
} = useNode();
|
|
|
|
/**图监听事件变更 */
|
|
watch(graphEvent, v => {
|
|
if (!v) return;
|
|
const { type, target, item } = v;
|
|
// console.log(type, target, item);
|
|
|
|
// 画布
|
|
if (type === 'canvas-create-edge') {
|
|
edgeState.origin = {};
|
|
edgeState.form.id = '#';
|
|
modalState.title = t('views.monitor.topologyBuild.edgeTitleAdd');
|
|
modalState.formType = 'edge';
|
|
modalState.visible = true;
|
|
}
|
|
if (type === 'canvas-create-node') {
|
|
nodeState.origin = {};
|
|
nodeState.form.id = '';
|
|
modalState.title = t('views.monitor.topologyBuild.nodeTitleAdd');
|
|
modalState.formType = 'node';
|
|
modalState.visible = true;
|
|
}
|
|
if (type === 'canvas-create-combo') {
|
|
comboState.origin = {};
|
|
comboState.form.id = '';
|
|
modalState.title = t('views.monitor.topologyBuild.comboTitleAdd');
|
|
modalState.formType = 'combo';
|
|
modalState.visible = true;
|
|
}
|
|
// 边
|
|
if (type === 'edge-edit' && item) {
|
|
const edge = item.getModel();
|
|
edgeState.origin = JSON.parse(JSON.stringify(edge));
|
|
edgeState.form = Object.assign(edgeState.form, edge);
|
|
modalState.title = t('views.monitor.topologyBuild.edgeTitleEdit');
|
|
modalState.formType = 'edge';
|
|
modalState.visible = true;
|
|
}
|
|
// 节点
|
|
if (type === 'node-edit' && item) {
|
|
const node = item.getModel();
|
|
nodeState.origin = JSON.parse(JSON.stringify(node));
|
|
nodeState.form = Object.assign(nodeState.form, node);
|
|
modalState.title = t('views.monitor.topologyBuild.nodeTitleEdit');
|
|
modalState.formType = 'node';
|
|
modalState.visible = true;
|
|
}
|
|
// 分组
|
|
if (type === 'combo-edit' && item) {
|
|
const combo = item.getModel();
|
|
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 = t('views.monitor.topologyBuild.comboTitleEdit');
|
|
modalState.formType = 'combo';
|
|
modalState.visible = true;
|
|
}
|
|
});
|
|
|
|
/**对话框对象信息状态类型 */
|
|
type ModalStateType = {
|
|
/**对话框是否显示 */
|
|
visible: boolean;
|
|
/**标题 */
|
|
title: string;
|
|
/**图元素表单类型 */
|
|
formType: 'edge' | 'node' | 'combo';
|
|
/**确定按钮 loading */
|
|
confirmLoading: boolean;
|
|
};
|
|
|
|
/**对话框对象信息状态 */
|
|
let modalState: ModalStateType = reactive({
|
|
visible: false,
|
|
title: '图信息',
|
|
formType: 'edge',
|
|
confirmLoading: false,
|
|
});
|
|
|
|
/**
|
|
* 对话框弹出确认执行函数
|
|
* 进行表达规则校验
|
|
*/
|
|
function fnModalOk() {
|
|
modalState.confirmLoading = true;
|
|
const type = modalState.formType;
|
|
// 边编辑确认
|
|
if (type === 'edge') {
|
|
handleOkEdge().then(result => {
|
|
modalState.visible = !result;
|
|
modalState.confirmLoading = false;
|
|
});
|
|
}
|
|
// 节点编辑确认
|
|
if (type === 'node') {
|
|
handleOkNode().then(result => {
|
|
modalState.visible = !result;
|
|
modalState.confirmLoading = false;
|
|
});
|
|
}
|
|
// 分租编辑确认
|
|
if (type === 'combo') {
|
|
handleOkcombo().then(result => {
|
|
modalState.visible = !result;
|
|
modalState.confirmLoading = false;
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 对话框弹出关闭执行函数
|
|
* 进行表达规则校验
|
|
*/
|
|
function fnModalCancel() {
|
|
modalState.visible = false;
|
|
const type = modalState.formType;
|
|
// 边编辑还原
|
|
if (type === 'edge') {
|
|
handleCancelEdge();
|
|
}
|
|
// 节点编辑还原
|
|
if (type === 'node') {
|
|
handleCancelNode();
|
|
}
|
|
// 分租编辑还原
|
|
if (type === 'combo') {
|
|
handleCancelcombo();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<DraggableModal
|
|
width="800px"
|
|
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
|
|
:keyboard="false"
|
|
:mask-closable="false"
|
|
:visible="modalState.visible"
|
|
:title="modalState.title"
|
|
:confirm-loading="modalState.confirmLoading"
|
|
@ok="fnModalOk"
|
|
@cancel="fnModalCancel"
|
|
>
|
|
<!-- 分组排版 -->
|
|
<a-form
|
|
v-if="modalState.formType === 'combo'"
|
|
name="modalStateFromCombo"
|
|
layout="horizontal"
|
|
:label-col="{ span: 6 }"
|
|
:labelWrap="true"
|
|
>
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.comboFormParentId')"
|
|
name="parentId"
|
|
:help="t('views.monitor.topologyBuild.comboFormParentIdTip')"
|
|
:label-col="{ span: 3 }"
|
|
>
|
|
<a-select
|
|
v-model:value="comboState.form.parentId"
|
|
:options="selectComboOptions"
|
|
:placeholder="t('common.selectPlease')"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.comboFormId')"
|
|
name="type"
|
|
:label-col="{ span: 3 }"
|
|
v-bind="comboStateForm.validateInfos.id"
|
|
>
|
|
<a-input
|
|
v-model:value="comboState.form.id"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:disabled="comboState.form.id === comboState.origin.id"
|
|
></a-input>
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.comboFormType')"
|
|
name="type"
|
|
:label-col="{ span: 3 }"
|
|
v-bind="comboStateForm.validateInfos.type"
|
|
>
|
|
<a-select
|
|
v-model:value="comboState.form.type"
|
|
:options="comboTypeOptions"
|
|
@change="handleComboTypeChange"
|
|
:placeholder="t('common.selectPlease')"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<!-- 圆形尺寸 -->
|
|
<a-row :gutter="16" v-if="comboState.form.type.startsWith('circle') ">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.comboFormSize')"
|
|
name="size"
|
|
:help="t('views.monitor.topologyBuild.comboFormSizeCircle')"
|
|
>
|
|
<a-input-number
|
|
:min="0"
|
|
:max="300"
|
|
v-model:value="comboState.form.size"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.comboFormPadding')"
|
|
name="padding"
|
|
>
|
|
<a-input-number
|
|
:min="0"
|
|
:max="300"
|
|
v-model:value="comboState.form.padding"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<!-- 矩形尺寸 -->
|
|
<a-row :gutter="16" v-if="comboState.form.type.startsWith('rect') ">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.comboFormSize')"
|
|
name="size"
|
|
:help="t('views.monitor.topologyBuild.comboFormSizeRect')"
|
|
>
|
|
<a-input-group compact>
|
|
<a-input-number
|
|
v-for="(_, i) in comboState.form.size"
|
|
:key="i"
|
|
style="width: calc(100% / 2)"
|
|
:min="0"
|
|
:max="99"
|
|
v-model:value="comboState.form.size[i]"
|
|
></a-input-number>
|
|
</a-input-group>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.comboFormPadding')"
|
|
name="padding"
|
|
:help="t('views.monitor.topologyBuild.comboFormPaddingRect')"
|
|
>
|
|
<a-input-group compact>
|
|
<a-input-number
|
|
v-for="(_, i) in comboState.form.padding"
|
|
:key="i"
|
|
style="width: calc(100% / 4)"
|
|
:min="0"
|
|
:max="99"
|
|
v-model:value="comboState.form.padding[i]"
|
|
></a-input-number>
|
|
</a-input-group>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formStyleFill')"
|
|
name="fill"
|
|
>
|
|
<a-input
|
|
v-model:value="comboState.form.style.fill"
|
|
type="color"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formStyleFillOpacity')"
|
|
name="fillOpacity"
|
|
>
|
|
<a-input-number
|
|
v-model:value="comboState.form.style.fillOpacity"
|
|
style="width: 100%"
|
|
:min="0.1"
|
|
:max="1"
|
|
:step="0.1"
|
|
placeholder="<=100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formStyleStroke')"
|
|
name="stroke"
|
|
>
|
|
<a-input
|
|
v-model:value="comboState.form.style.stroke"
|
|
type="color"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formStyleLineWidth')"
|
|
name="lineWidth"
|
|
>
|
|
<a-input-number
|
|
v-model:value="comboState.form.style.lineWidth"
|
|
style="width: 100%"
|
|
:min="1"
|
|
:max="100"
|
|
placeholder="<=100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.comboFormChildren')"
|
|
name="children"
|
|
:help="t('views.monitor.topologyBuild.comboFormChildrenTip')"
|
|
: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">
|
|
{{ t('views.monitor.topologyBuild.label') }}
|
|
</a-divider>
|
|
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabel')"
|
|
name="label"
|
|
:label-col="{ span: 3 }"
|
|
:help="t('views.monitor.topologyBuild.formLabelTip')"
|
|
>
|
|
<a-input
|
|
v-model:value="comboState.form.label"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelStyleFill')"
|
|
name="fill"
|
|
>
|
|
<a-input
|
|
v-model:value="comboState.form.labelCfg.style.fill"
|
|
type="color"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelStyleFontSize')"
|
|
name="fontSize"
|
|
>
|
|
<a-input-number
|
|
v-model:value="comboState.form.labelCfg.style.fontSize"
|
|
style="width: 100%"
|
|
:min="10"
|
|
:max="100"
|
|
placeholder="<=100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelRefX')"
|
|
name="labelCfg.refX"
|
|
:help="t('views.monitor.topologyBuild.formLabelRefXTip')"
|
|
>
|
|
<a-input-number
|
|
v-model:value="comboState.form.labelCfg.refX"
|
|
style="width: 100%"
|
|
:min="-100"
|
|
:max="100"
|
|
placeholder="<=100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelRefY')"
|
|
name="labelCfg.refY"
|
|
:help="t('views.monitor.topologyBuild.formLabelRefYTip')"
|
|
>
|
|
<a-input-number
|
|
v-model:value="comboState.form.labelCfg.refY"
|
|
style="width: 100%"
|
|
:min="-100"
|
|
:max="100"
|
|
placeholder="<=100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelPosition')"
|
|
name="labelCfg.position"
|
|
:help="t('views.monitor.topologyBuild.comboFormLabelPosition')"
|
|
>
|
|
<a-select
|
|
v-model:value="comboState.form.labelCfg.position"
|
|
:options="comboLabelPositionOptions"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
|
|
<!-- 节点排版 -->
|
|
<a-form
|
|
v-if="modalState.formType === 'node'"
|
|
name="modalStateFromNode"
|
|
layout="horizontal"
|
|
:label-col="{ span: 6 }"
|
|
:labelWrap="true"
|
|
>
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormComboId')"
|
|
name="comboId"
|
|
:help="t('views.monitor.topologyBuild.nodeFormComboIdTip')"
|
|
:label-col="{ span: 3 }"
|
|
>
|
|
<a-select
|
|
v-model:value="nodeState.form.comboId"
|
|
:options="selectComboOptions"
|
|
:placeholder="t('common.selectPlease')"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormId')"
|
|
name="type"
|
|
:label-col="{ span: 3 }"
|
|
v-bind="nodeStateForm.validateInfos.id"
|
|
>
|
|
<a-input
|
|
v-model:value="nodeState.form.id"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
:disabled="nodeState.form.id === nodeState.origin.id"
|
|
></a-input>
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormType')"
|
|
name="type"
|
|
:label-col="{ span: 3 }"
|
|
v-bind="nodeStateForm.validateInfos.type"
|
|
>
|
|
<a-select
|
|
v-model:value="nodeState.form.type"
|
|
:options="nodeTypeOptions"
|
|
@change="handleNodeTypeChange"
|
|
:placeholder="t('common.selectPlease')"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormX')"
|
|
name="x"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.x"
|
|
style="width: 100%"
|
|
:placeholder="t('common.inputPlease')"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormY')"
|
|
name="y"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.y"
|
|
style="width: 100%"
|
|
:placeholder="t('common.inputPlease')"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col
|
|
:lg="12"
|
|
:md="12"
|
|
:xs="24"
|
|
v-if="nodeState.form.type.startsWith('circle')"
|
|
>
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormSize')"
|
|
name="size"
|
|
:help="t('views.monitor.topologyBuild.nodeFormSizeCircle')"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.size"
|
|
style="width: 100%"
|
|
:placeholder="t('common.inputPlease')"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
:lg="12"
|
|
:md="12"
|
|
:xs="24"
|
|
v-else-if="nodeState.form.type.startsWith('star')"
|
|
>
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormSize')"
|
|
name="size"
|
|
:help="t('views.monitor.topologyBuild.nodeFormSizeStar')"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.size"
|
|
style="width: 100%"
|
|
:placeholder="t('common.inputPlease')"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
:lg="12"
|
|
:md="12"
|
|
:xs="24"
|
|
v-else-if="nodeState.form.type === 'donut'"
|
|
>
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormSize')"
|
|
name="size"
|
|
:help="t('views.monitor.topologyBuild.nodeFormSizeDonut')"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.size"
|
|
style="width: 100%"
|
|
:placeholder="t('common.inputPlease')"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
:lg="12"
|
|
:md="12"
|
|
:xs="24"
|
|
v-else-if="nodeState.form.type === 'triangle'"
|
|
>
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormSize')"
|
|
name="size"
|
|
:help="t('views.monitor.topologyBuild.nodeFormSizeTriangle')"
|
|
>
|
|
<a-input-number
|
|
:min="0"
|
|
:max="1000"
|
|
v-model:value="nodeState.form.size"
|
|
style="width: 100%"
|
|
:placeholder="t('common.inputPlease')"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24" v-else>
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormSize')"
|
|
name="size"
|
|
:help="
|
|
nodeState.form.type === 'ellipse'
|
|
? t('views.monitor.topologyBuild.nodeFormSizeEllipse')
|
|
: t('views.monitor.topologyBuild.nodeFormSizeOhter')
|
|
"
|
|
>
|
|
<a-input-group compact>
|
|
<a-input-number
|
|
v-for="(_, i) in nodeState.form.size"
|
|
:key="i"
|
|
style="width: calc(100% / 2)"
|
|
:min="0"
|
|
:max="1000"
|
|
v-model:value="nodeState.form.size[i]"
|
|
placeholder="0 ~ 1000"
|
|
></a-input-number>
|
|
</a-input-group>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<template v-if="!nodeState.form.type.startsWith('image')">
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formStyleStroke')"
|
|
name="stroke"
|
|
>
|
|
<a-input
|
|
v-model:value="nodeState.form.style.stroke"
|
|
type="color"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formStyleLineWidth')"
|
|
name="lineWidth"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.style.lineWidth"
|
|
style="width: 100%"
|
|
:min="1"
|
|
:max="100"
|
|
placeholder="<=100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formStyleFill')"
|
|
name="fill"
|
|
>
|
|
<a-input
|
|
v-model:value="nodeState.form.style.fill"
|
|
type="color"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
:lg="12"
|
|
:md="12"
|
|
:xs="24"
|
|
v-if="nodeState.form.type === 'triangle'"
|
|
>
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormDirection')"
|
|
name="direction"
|
|
>
|
|
<a-select
|
|
v-model:value="nodeState.form.direction"
|
|
:options="nodeDirectionOptions"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
|
|
<a-divider orientation="left">
|
|
{{ t('views.monitor.topologyBuild.label') }}
|
|
</a-divider>
|
|
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabel')"
|
|
name="label"
|
|
:label-col="{ span: 3 }"
|
|
:help="t('views.monitor.topologyBuild.formLabelTip')"
|
|
>
|
|
<a-input
|
|
v-model:value="nodeState.form.label"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelStyleFill')"
|
|
name="fill"
|
|
>
|
|
<a-input
|
|
v-model:value="nodeState.form.labelCfg.style.fill"
|
|
type="color"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelStyleFontSize')"
|
|
name="fontSize"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.labelCfg.style.fontSize"
|
|
style="width: 100%"
|
|
:min="10"
|
|
:max="100"
|
|
placeholder="10~100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelPosition')"
|
|
name="labelCfg.position"
|
|
:help="t('views.monitor.topologyBuild.nodeFormLabelPosition')"
|
|
>
|
|
<a-select
|
|
v-model:value="nodeState.form.labelCfg.position"
|
|
:options="nodeLabelPositionOptions"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormLabelOffset')"
|
|
name="labelCfg.offset"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.labelCfg.offset"
|
|
style="width: 100%"
|
|
:min="-100"
|
|
:max="100"
|
|
placeholder="-100~100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<template v-if="nodeState.form.type.startsWith('image')">
|
|
<a-divider orientation="left">
|
|
{{ t('views.monitor.topologyBuild.nodeFormTypeImage') }}
|
|
</a-divider>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormClipShow')"
|
|
name="clipCfg.show"
|
|
>
|
|
<a-switch v-model:checked="nodeState.form.clipCfg.show" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormImg')"
|
|
name="img"
|
|
>
|
|
<a-input-group compact>
|
|
<a-auto-complete
|
|
v-model:value="nodeState.form.img"
|
|
:options="nodeImageOptions"
|
|
allow-clear
|
|
:placeholder="t('common.selectPlease')"
|
|
style="width: calc(100% - 32px)"
|
|
/>
|
|
<a-upload
|
|
name="file"
|
|
list-type="text"
|
|
accept=".svg,.jpg,.png"
|
|
:max-count="1"
|
|
:show-upload-list="false"
|
|
:custom-request="(v: any) => console.log(v)"
|
|
:disabled="true"
|
|
>
|
|
<a-button type="primary" :loading="false">
|
|
<template #icon>
|
|
<UploadOutlined />
|
|
</template>
|
|
</a-button>
|
|
</a-upload>
|
|
</a-input-group>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<!-- 裁剪功能 -->
|
|
<template v-if="nodeState.form.clipCfg.show">
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormClipType')"
|
|
name="clipCfg.type"
|
|
>
|
|
<a-select
|
|
v-model:value="nodeState.form.clipCfg.type"
|
|
:options="nodeImageClipCfgOptions"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<!-- 剪裁圆形 -->
|
|
<a-row :gutter="16" v-if="nodeState.form.clipCfg.type.startsWith('circle') ">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormClipTypeCircle')"
|
|
name="clipCfg.r"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.clipCfg.r"
|
|
style="width: 100%"
|
|
:min="-200"
|
|
:max="200"
|
|
placeholder="-200 ~ 200"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<!-- 剪裁矩形 -->
|
|
<a-row :gutter="16" v-if="nodeState.form.clipCfg.type.startsWith('rect')">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="
|
|
t('views.monitor.topologyBuild.nodeFormClipTypeRectWidth')
|
|
"
|
|
name="clipCfg.width"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.clipCfg.width"
|
|
style="width: 100%"
|
|
:min="-200"
|
|
:max="200"
|
|
placeholder="-200 ~ 200"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="
|
|
t('views.monitor.topologyBuild.nodeFormClipTypeRectHeight')
|
|
"
|
|
name="clipCfg.height"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.clipCfg.height"
|
|
style="width: 100%"
|
|
:min="-200"
|
|
:max="200"
|
|
placeholder="-200 ~ 200"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<!-- 剪裁椭圆 -->
|
|
<a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'ellipse'">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="
|
|
t('views.monitor.topologyBuild.nodeFormClipTypeEllipseRx')
|
|
"
|
|
name="clipCfg.rx"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.clipCfg.rx"
|
|
style="width: 100%"
|
|
:min="-200"
|
|
:max="200"
|
|
placeholder="-200 ~ 200"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="
|
|
t('views.monitor.topologyBuild.nodeFormClipTypeEllipseRy')
|
|
"
|
|
name="clipCfg.ry"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.clipCfg.ry"
|
|
style="width: 100%"
|
|
:min="-200"
|
|
:max="200"
|
|
placeholder="-200 ~ 200"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<!-- 裁剪图形坐标 -->
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormClipX')"
|
|
name="clipCfg.x"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.clipCfg.x"
|
|
style="width: 100%"
|
|
:min="-200"
|
|
:max="200"
|
|
placeholder="-200 ~ 200"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormClipY')"
|
|
name="clipCfg.y"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.clipCfg.y"
|
|
style="width: 100%"
|
|
:min="-200"
|
|
:max="200"
|
|
placeholder="-200 ~ 200"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
</template>
|
|
|
|
<!-- 图标 排除矩形和图片 -->
|
|
<template
|
|
v-if="
|
|
nodeState.form.icon &&
|
|
!nodeState.form.type.startsWith('rect') &&
|
|
!nodeState.form.type.startsWith('image')
|
|
"
|
|
>
|
|
<a-divider orientation="left">
|
|
{{ t('views.monitor.topologyBuild.nodeFormIcon') }}
|
|
</a-divider>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormIconShow')"
|
|
name="icon.show"
|
|
>
|
|
<a-switch v-model:checked="nodeState.form.icon.show" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormIconImg')"
|
|
name="icon.img"
|
|
>
|
|
<a-auto-complete
|
|
v-model:value="nodeState.form.icon.img"
|
|
:options="nodeImageOptions"
|
|
allow-clear
|
|
:placeholder="t('common.selectPlease')"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormIconWidth')"
|
|
name="icon.width"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.icon.width"
|
|
style="width: 100%"
|
|
:min="10"
|
|
:max="100"
|
|
placeholder="10~100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormIconHeight')"
|
|
name="icon.height"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.icon.height"
|
|
style="width: 100%"
|
|
:min="10"
|
|
:max="100"
|
|
placeholder="10~100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16" v-if="nodeState.form.type === 'triangle'">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.nodeFormIconOffset')"
|
|
name="icon.offset"
|
|
>
|
|
<a-input-number
|
|
v-model:value="nodeState.form.icon.offset"
|
|
style="width: 100%"
|
|
:min="-200"
|
|
:max="200"
|
|
placeholder="-200 ~ 200"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
</a-form>
|
|
|
|
<!-- 边排版 -->
|
|
<a-form
|
|
v-if="modalState.formType === 'edge'"
|
|
name="modalStateFromEdge"
|
|
layout="horizontal"
|
|
:label-col="{ span: 6 }"
|
|
:labelWrap="true"
|
|
>
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.edgeFormType')"
|
|
name="type"
|
|
:label-col="{ span: 3 }"
|
|
v-bind="edgeStateForm.validateInfos.type"
|
|
>
|
|
<a-select
|
|
v-model:value="edgeState.form.type"
|
|
:options="edgeTypeOptions"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.edgeFormSource')"
|
|
name="source"
|
|
v-bind="edgeStateForm.validateInfos.source"
|
|
>
|
|
<a-select
|
|
v-model:value="edgeState.form.source"
|
|
:options="selectSourceTargetOptions"
|
|
:placeholder="t('common.selectPlease')"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.edgeFormTarget')"
|
|
name="target"
|
|
v-bind="edgeStateForm.validateInfos.target"
|
|
>
|
|
<a-select
|
|
v-model:value="edgeState.form.target"
|
|
:options="selectSourceTargetOptions"
|
|
:placeholder="t('common.selectPlease')"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formStyleStroke')"
|
|
name="stroke"
|
|
>
|
|
<a-input
|
|
v-model:value="edgeState.form.style.stroke"
|
|
type="color"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formStyleLineWidth')"
|
|
name="lineWidth"
|
|
>
|
|
<a-input-number
|
|
v-model:value="edgeState.form.style.lineWidth"
|
|
style="width: 100%"
|
|
:min="1"
|
|
:max="100"
|
|
placeholder="<=100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.edgeFormStartArrow')"
|
|
name="startArrow"
|
|
:help="t('views.monitor.topologyBuild.edgeFormStartArrowTip')"
|
|
>
|
|
<a-switch v-model:checked="edgeState.form.style.startArrow" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.edgeFormEndArrow')"
|
|
name="endArrow"
|
|
:help="t('views.monitor.topologyBuild.edgeFormEndArrowTip')"
|
|
>
|
|
<a-switch v-model:checked="edgeState.form.style.endArrow" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-divider orientation="left">
|
|
{{ t('views.monitor.topologyBuild.label') }}
|
|
</a-divider>
|
|
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabel')"
|
|
name="label"
|
|
:label-col="{ span: 3 }"
|
|
:help="t('views.monitor.topologyBuild.formLabelTip')"
|
|
>
|
|
<a-input
|
|
v-model:value="edgeState.form.label"
|
|
allow-clear
|
|
:placeholder="t('common.inputPlease')"
|
|
>
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelStyleFill')"
|
|
name="fill"
|
|
>
|
|
<a-input
|
|
v-model:value="edgeState.form.labelCfg.style.fill"
|
|
type="color"
|
|
></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelStyleFontSize')"
|
|
name="fontSize"
|
|
>
|
|
<a-input-number
|
|
v-model:value="edgeState.form.labelCfg.style.fontSize"
|
|
style="width: 100%"
|
|
:min="10"
|
|
:max="100"
|
|
placeholder="<=100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelRefX')"
|
|
name="labelCfg.refX"
|
|
:help="t('views.monitor.topologyBuild.formLabelRefXTip')"
|
|
>
|
|
<a-input-number
|
|
v-model:value="edgeState.form.labelCfg.refX"
|
|
style="width: 100%"
|
|
:min="-100"
|
|
:max="100"
|
|
placeholder="<=100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelRefY')"
|
|
name="labelCfg.refY"
|
|
:help="t('views.monitor.topologyBuild.formLabelRefYTip')"
|
|
>
|
|
<a-input-number
|
|
v-model:value="edgeState.form.labelCfg.refY"
|
|
style="width: 100%"
|
|
:min="-100"
|
|
:max="100"
|
|
placeholder="<=100"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.formLabelPosition')"
|
|
name="labelCfg.position"
|
|
:help="t('views.monitor.topologyBuild.edgeFormLabelPosition')"
|
|
>
|
|
<a-select
|
|
v-model:value="edgeState.form.labelCfg.position"
|
|
:options="edgeLabelPositionOptions"
|
|
>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item
|
|
:label="t('views.monitor.topologyBuild.edgeFormLabelAutoRotate')"
|
|
name="labelCfg.autoRotate"
|
|
:help="t('views.monitor.topologyBuild.edgeFormLabelAutoRotateTip')"
|
|
>
|
|
<a-switch v-model:checked="edgeState.form.labelCfg.autoRotate" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</DraggableModal>
|
|
</template>
|
|
|
|
<style lang="less" scoped></style>
|