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

feat: 拓扑编辑页面多语言翻译

Browse Source
This commit is contained in:
TsMask
2024-01-05 10:22:17 +08:00
parent 7e2f404ba7
commit 6936355ed9
8 changed files with 922 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

414
src/views/monitor/topologyBuild/components/GraphEditModal.vue
View File

@@ -1,37 +1,39 @@
<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { reactive, watch } from 'vue';
import useI18n from '@/hooks/useI18n';
import {
graphEvent,
selectSourceTargetOptions,
selectComboOptions,
} from '../hooks/useGraph';
import useEdge, {
edgeTypeOptions,
edgePositionOptions,
} from '../hooks/useEdge';
import useNode, {
nodeTypeOptions,
nodePositionOptions,
nodeDirectionOptions,
nodeImageClipCfgOptions,
nodeImageOptions,
} from '../hooks/useNode';
import useCombo, {
comboTypeOptions,
comboPositionOptions,
} from '../hooks/useCombo';
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 { edgeState, edgeStateForm, handleOkEdge, handleCancelEdge } = useEdge();
const {
edgeTypeOptions,
edgeLabelPositionOptions,
edgeState,
edgeStateForm,
handleOkEdge,
handleCancelEdge,
} = useEdge();
const {
nodeTypeOptions,
nodeLabelPositionOptions,
nodeDirectionOptions,
nodeImageClipCfgOptions,
nodeImageOptions,
nodeState,
nodeStateForm,
handleNodeTypeChange,
@@ -49,21 +51,21 @@ watch(graphEvent, v => {
if (type === 'canvas-create-edge') {
edgeState.origin = {};
edgeState.form.id = '#';
modalState.title = '新增边信息编辑';
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 = '新增节点信息编辑';
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 = '新增分组信息编辑';
modalState.title = t('views.monitor.topologyBuild.comboTitleAdd');
modalState.formType = 'combo';
modalState.visible = true;
}
@@ -72,7 +74,7 @@ watch(graphEvent, v => {
const edge = item.getModel();
edgeState.origin = JSON.parse(JSON.stringify(edge));
edgeState.form = Object.assign(edgeState.form, edge);
modalState.title = '边信息编辑';
modalState.title = t('views.monitor.topologyBuild.edgeTitleEdit');
modalState.formType = 'edge';
modalState.visible = true;
}
@@ -81,7 +83,7 @@ watch(graphEvent, v => {
const node = item.getModel();
nodeState.origin = JSON.parse(JSON.stringify(node));
nodeState.form = Object.assign(nodeState.form, node);
modalState.title = '节点信息编辑';
modalState.title = t('views.monitor.topologyBuild.nodeTitleEdit');
modalState.formType = 'node';
modalState.visible = true;
}
@@ -94,7 +96,7 @@ watch(graphEvent, v => {
if (Array.isArray(combo.children)) {
comboState.form.children = combo.children.map(item => item.id);
}
modalState.title = '分组信息编辑';
modalState.title = t('views.monitor.topologyBuild.comboTitleEdit');
modalState.formType = 'combo';
modalState.visible = true;
}
@@ -184,7 +186,7 @@ function fnModalCancel() {
@ok="fnModalOk"
@cancel="fnModalCancel"
>
<!-- 框排版 -->
<!-- 分组排版 -->
<a-form
v-if="modalState.formType === 'combo'"
name="modalStateFromCombo"
@@ -193,9 +195,9 @@ function fnModalCancel() {
:labelWrap="true"
>
<a-form-item
label="父节点分组"
:label="t('views.monitor.topologyBuild.comboFormParentId')"
name="parentId"
help="将当前分组点放入到另一个分组框中"
:help="t('views.monitor.topologyBuild.comboFormParentIdTip')"
:label-col="{ span: 3 }"
>
<a-select
@@ -207,7 +209,7 @@ function fnModalCancel() {
</a-form-item>
<a-form-item
label="分组ID"
:label="t('views.monitor.topologyBuild.comboFormId')"
name="type"
:label-col="{ span: 3 }"
v-bind="comboStateForm.validateInfos.id"
@@ -221,7 +223,7 @@ function fnModalCancel() {
</a-form-item>
<a-form-item
label="节点类型"
:label="t('views.monitor.topologyBuild.comboFormType')"
name="type"
:label-col="{ span: 3 }"
v-bind="comboStateForm.validateInfos.type"
@@ -238,19 +240,26 @@ function fnModalCancel() {
<!-- 圆形尺寸 -->
<a-row :gutter="16" v-if="comboState.form.type === 'circle'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="最小尺寸" name="size" help="半径">
<a-form-item
:label="t('views.monitor.topologyBuild.comboFormSize')"
name="size"
:help="t('views.monitor.topologyBuild.comboFormSizeCircle')"
>
<a-input-number
:min="0"
:max="99"
: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="内边距" name="padding">
<a-form-item
:label="t('views.monitor.topologyBuild.comboFormPadding')"
name="padding"
>
<a-input-number
:min="0"
:max="99"
:max="300"
v-model:value="comboState.form.padding"
></a-input-number>
</a-form-item>
@@ -261,15 +270,14 @@ function fnModalCancel() {
<a-row :gutter="16" v-if="comboState.form.type === 'rect'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="最小尺寸"
:label="t('views.monitor.topologyBuild.comboFormSize')"
name="size"
:help="['长', '高'].join('、')"
:help="t('views.monitor.topologyBuild.comboFormSizeRect')"
>
<a-input-group compact>
<a-input-number
v-for="(_, i) in comboState.form.size"
:key="i"
:title="['长', '高'][i]"
style="width: calc(100% / 2)"
:min="0"
:max="99"
@@ -280,15 +288,14 @@ function fnModalCancel() {
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="内边距"
:label="t('views.monitor.topologyBuild.comboFormPadding')"
name="padding"
:help="['上', '左', '下', '右'].join('、')"
:help="t('views.monitor.topologyBuild.comboFormPaddingRect')"
>
<a-input-group compact>
<a-input-number
v-for="(_, i) in comboState.form.padding"
:key="i"
:title="['上', '左', '下', '右'][i]"
style="width: calc(100% / 4)"
:min="0"
:max="99"
@@ -301,7 +308,10 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="节点填充色" name="fill">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleFill')"
name="fill"
>
<a-input
v-model:value="comboState.form.style.fill"
type="color"
@@ -309,7 +319,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="透明值" name="fillOpacity">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleFillOpacity')"
name="fillOpacity"
>
<a-input-number
v-model:value="comboState.form.style.fillOpacity"
style="width: 100%"
@@ -321,7 +334,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="描边颜色" name="stroke">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleStroke')"
name="stroke"
>
<a-input
v-model:value="comboState.form.style.stroke"
type="color"
@@ -329,7 +345,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="描边宽度" name="lineWidth">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleLineWidth')"
name="lineWidth"
>
<a-input-number
v-model:value="comboState.form.style.lineWidth"
style="width: 100%"
@@ -342,9 +361,9 @@ function fnModalCancel() {
</a-row>
<a-form-item
label="分组内元素"
:label="t('views.monitor.topologyBuild.comboFormChildren')"
name="children"
help="元素包括节点和分组"
:help="t('views.monitor.topologyBuild.comboFormChildrenTip')"
:label-col="{ span: 3 }"
v-if="comboState.form.id !== comboState.origin.id"
>
@@ -357,13 +376,15 @@ function fnModalCancel() {
></a-select>
</a-form-item>
<a-divider orientation="left"> 标签文本及其配置 </a-divider>
<a-divider orientation="left">
{{ t('views.monitor.topologyBuild.label') }}
</a-divider>
<a-form-item
label="标签文本"
:label="t('views.monitor.topologyBuild.formLabel')"
name="label"
:label-col="{ span: 3 }"
help="文本文字，如果没有则不会显示"
:help="t('views.monitor.topologyBuild.formLabelTip')"
>
<a-input
v-model:value="comboState.form.label"
@@ -375,7 +396,10 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="文本颜色" name="fill">
<a-form-item
:label="t('views.monitor.topologyBuild.formLabelStyleFill')"
name="fill"
>
<a-input
v-model:value="comboState.form.labelCfg.style.fill"
type="color"
@@ -383,7 +407,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="文本大小" name="fontSize">
<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%"
@@ -398,9 +425,9 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="x偏移"
:label="t('views.monitor.topologyBuild.formLabelRefX')"
name="labelCfg.refX"
help="标签在 x 方向的偏移量"
:help="t('views.monitor.topologyBuild.formLabelRefXTip')"
>
<a-input-number
v-model:value="comboState.form.labelCfg.refX"
@@ -413,9 +440,9 @@ function fnModalCancel() {
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="y偏移"
:label="t('views.monitor.topologyBuild.formLabelRefY')"
name="labelCfg.refY"
help="标签在 y 方向的偏移量"
:help="t('views.monitor.topologyBuild.formLabelRefYTip')"
>
<a-input-number
v-model:value="comboState.form.labelCfg.refY"
@@ -431,13 +458,13 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="位置"
:label="t('views.monitor.topologyBuild.formLabelPosition')"
name="labelCfg.position"
help="标签文本相对于边的位置"
:help="t('views.monitor.topologyBuild.comboFormLabelPosition')"
>
<a-select
v-model:value="comboState.form.labelCfg.position"
:options="comboPositionOptions"
:options="comboLabelPositionOptions"
>
</a-select>
</a-form-item>
@@ -454,9 +481,9 @@ function fnModalCancel() {
:labelWrap="true"
>
<a-form-item
label="节点分组"
:label="t('views.monitor.topologyBuild.nodeFormComboId')"
name="comboId"
help="将节点放入到分组框中"
:help="t('views.monitor.topologyBuild.nodeFormComboIdTip')"
:label-col="{ span: 3 }"
>
<a-select
@@ -468,7 +495,7 @@ function fnModalCancel() {
</a-form-item>
<a-form-item
label="节点ID"
:label="t('views.monitor.topologyBuild.nodeFormId')"
name="type"
:label-col="{ span: 3 }"
v-bind="nodeStateForm.validateInfos.id"
@@ -482,7 +509,7 @@ function fnModalCancel() {
</a-form-item>
<a-form-item
label="节点类型"
:label="t('views.monitor.topologyBuild.nodeFormType')"
name="type"
:label-col="{ span: 3 }"
v-bind="nodeStateForm.validateInfos.type"
@@ -498,7 +525,10 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="x 坐标" name="x">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormX')"
name="x"
>
<a-input-number
v-model:value="nodeState.form.x"
style="width: 100%"
@@ -507,7 +537,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="y 坐标" name="y">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormY')"
name="y"
>
<a-input-number
v-model:value="nodeState.form.y"
style="width: 100%"
@@ -525,9 +558,9 @@ function fnModalCancel() {
v-if="nodeState.form.type === 'circle'"
>
<a-form-item
label="节点大小"
:label="t('views.monitor.topologyBuild.nodeFormSize')"
name="size"
help="直径, 圆心位置对应节点的位置"
:help="t('views.monitor.topologyBuild.nodeFormSizeCircle')"
>
<a-input-number
v-model:value="nodeState.form.size"
@@ -543,9 +576,9 @@ function fnModalCancel() {
v-else-if="nodeState.form.type === 'star'"
>
<a-form-item
label="节点大小"
:label="t('views.monitor.topologyBuild.nodeFormSize')"
name="size"
help="星形的大小, 星星的中心位置是节点的位置"
:help="t('views.monitor.topologyBuild.nodeFormSizeStar')"
>
<a-input-number
v-model:value="nodeState.form.size"
@@ -561,9 +594,9 @@ function fnModalCancel() {
v-else-if="nodeState.form.type === 'donut'"
>
<a-form-item
label="节点大小"
:label="t('views.monitor.topologyBuild.nodeFormSize')"
name="size"
help="直径, 圆心位置对应节点的位置"
:help="t('views.monitor.topologyBuild.nodeFormSizeDonut')"
>
<a-input-number
v-model:value="nodeState.form.size"
@@ -579,9 +612,9 @@ function fnModalCancel() {
v-else-if="nodeState.form.type === 'triangle'"
>
<a-form-item
label="节点大小"
:label="t('views.monitor.topologyBuild.nodeFormSize')"
name="size"
help="边长, 三角形的中心位置是节点的位置"
:help="t('views.monitor.topologyBuild.nodeFormSizeTriangle')"
>
<a-input-number
:min="0"
@@ -594,23 +627,18 @@ function fnModalCancel() {
</a-col>
<a-col :lg="12" :md="12" :xs="24" v-else>
<a-form-item
label="节点大小"
:label="t('views.monitor.topologyBuild.nodeFormSize')"
name="size"
:help="
nodeState.form.type === 'ellipse'
? ['长轴直径', '短轴直径'].join('、')
: ['宽', '高'].join('、')
? 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"
:title="
nodeState.form.type === 'ellipse'
? ['长轴直径', '短轴直径'][i]
: ['宽', '高'][i]
"
style="width: calc(100% / 2)"
:min="0"
:max="1000"
@@ -625,7 +653,10 @@ function fnModalCancel() {
<template v-if="nodeState.form.type !== 'image'">
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="描边颜色" name="stroke">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleStroke')"
name="stroke"
>
<a-input
v-model:value="nodeState.form.style.stroke"
type="color"
@@ -633,7 +664,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="描边宽度" name="lineWidth">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleLineWidth')"
name="lineWidth"
>
<a-input-number
v-model:value="nodeState.form.style.lineWidth"
style="width: 100%"
@@ -644,7 +678,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="节点填充色" name="fill">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleFill')"
name="fill"
>
<a-input
v-model:value="nodeState.form.style.fill"
type="color"
@@ -657,7 +694,10 @@ function fnModalCancel() {
:xs="24"
v-if="nodeState.form.type === 'triangle'"
>
<a-form-item label="方向" name="direction">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormDirection')"
name="direction"
>
<a-select
v-model:value="nodeState.form.direction"
:options="nodeDirectionOptions"
@@ -668,13 +708,15 @@ function fnModalCancel() {
</a-row>
</template>
<a-divider orientation="left"> 标签文本及其配置 </a-divider>
<a-divider orientation="left">
{{ t('views.monitor.topologyBuild.label') }}
</a-divider>
<a-form-item
label="标签文本"
:label="t('views.monitor.topologyBuild.formLabel')"
name="label"
:label-col="{ span: 3 }"
help="文本文字，如果没有则不会显示"
:help="t('views.monitor.topologyBuild.formLabelTip')"
>
<a-input
v-model:value="nodeState.form.label"
@@ -686,7 +728,10 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="文本颜色" name="fill">
<a-form-item
:label="t('views.monitor.topologyBuild.formLabelStyleFill')"
name="fill"
>
<a-input
v-model:value="nodeState.form.labelCfg.style.fill"
type="color"
@@ -694,7 +739,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="文本大小" name="fontSize">
<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%"
@@ -709,19 +757,22 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="位置"
:label="t('views.monitor.topologyBuild.formLabelPosition')"
name="labelCfg.position"
help="文本相对于节点的位置"
:help="t('views.monitor.topologyBuild.nodeFormLabelPosition')"
>
<a-select
v-model:value="nodeState.form.labelCfg.position"
:options="nodePositionOptions"
:options="nodeLabelPositionOptions"
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="文本偏移" name="labelCfg.offset">
<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%"
@@ -734,20 +785,24 @@ function fnModalCancel() {
</a-row>
<template v-if="nodeState.form.type === 'image'">
<a-divider orientation="left"> 图片 </a-divider>
<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="裁剪功能" name="clipCfg.show">
<a-switch
v-model:checked="nodeState.form.clipCfg.show"
checked-children="是"
un-checked-children="否"
/>
<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="图片来源" name="img">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormImg')"
name="img"
>
<a-input-group compact>
<a-auto-complete
v-model:value="nodeState.form.img"
@@ -780,7 +835,10 @@ function fnModalCancel() {
<template v-if="nodeState.form.clipCfg.show">
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="裁剪的图片形状" name="direction">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormClipType')"
name="clipCfg.type"
>
<a-select
v-model:value="nodeState.form.clipCfg.type"
:options="nodeImageClipCfgOptions"
@@ -793,7 +851,10 @@ function fnModalCancel() {
<!-- 剪裁圆形 -->
<a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'circle'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="剪裁圆形的半径" name="clipCfg.r">
<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%"
@@ -808,7 +869,12 @@ function fnModalCancel() {
<!-- 剪裁矩形 -->
<a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'rect'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="剪裁矩形的宽度" name="clipCfg.width">
<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%"
@@ -819,7 +885,12 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="剪裁矩形的长度" name="clipCfg.height">
<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%"
@@ -834,7 +905,12 @@ function fnModalCancel() {
<!-- 剪裁椭圆 -->
<a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'ellipse'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="剪裁椭圆的长轴半径" name="clipCfg.rx">
<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%"
@@ -845,7 +921,12 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="剪裁椭圆的短轴半径" name="clipCfg.ry">
<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%"
@@ -860,7 +941,10 @@ function fnModalCancel() {
<!-- 裁剪图形坐标 -->
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="裁剪图形的 x 坐标" name="clipCfg.x">
<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%"
@@ -871,7 +955,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="裁剪图形的 y 坐标" name="clipCfg.y">
<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%"
@@ -893,20 +980,24 @@ function fnModalCancel() {
nodeState.form.type !== 'image'
"
>
<a-divider orientation="left"> 图标 </a-divider>
<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="是否显示" name="icon.show">
<a-switch
v-model:checked="nodeState.form.icon.show"
checked-children="是"
un-checked-children="否"
/>
<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="图标来源" name="icon.img">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormIconImg')"
name="icon.img"
>
<a-auto-complete
v-model:value="nodeState.form.icon.img"
:options="nodeImageOptions"
@@ -919,7 +1010,10 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="宽度" name="icon.width">
<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%"
@@ -930,7 +1024,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="高度" name="icon.height">
<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%"
@@ -944,7 +1041,10 @@ function fnModalCancel() {
<a-row :gutter="16" v-if="nodeState.form.type === 'triangle'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="偏移" name="icon.offset">
<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%"
@@ -967,7 +1067,7 @@ function fnModalCancel() {
:labelWrap="true"
>
<a-form-item
label="边类型"
:label="t('views.monitor.topologyBuild.edgeFormType')"
name="type"
:label-col="{ span: 3 }"
v-bind="edgeStateForm.validateInfos.type"
@@ -982,7 +1082,7 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="起始元素"
:label="t('views.monitor.topologyBuild.edgeFormSource')"
name="source"
v-bind="edgeStateForm.validateInfos.source"
>
@@ -996,7 +1096,7 @@ function fnModalCancel() {
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="结束元素"
:label="t('views.monitor.topologyBuild.edgeFormTarget')"
name="target"
v-bind="edgeStateForm.validateInfos.target"
>
@@ -1012,7 +1112,10 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="边的颜色" name="stroke">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleStroke')"
name="stroke"
>
<a-input
v-model:value="edgeState.form.style.stroke"
type="color"
@@ -1020,7 +1123,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="边宽度" name="lineWidth">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleLineWidth')"
name="lineWidth"
>
<a-input-number
v-model:value="edgeState.form.style.lineWidth"
style="width: 100%"
@@ -1035,39 +1141,33 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="开始端箭头"
:label="t('views.monitor.topologyBuild.edgeFormStartArrow')"
name="startArrow"
help="边的开始端绘制默认箭头"
:help="t('views.monitor.topologyBuild.edgeFormStartArrowTip')"
>
<a-switch
v-model:checked="edgeState.form.style.startArrow"
checked-children="是"
un-checked-children="否"
/>
<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="结束端箭头"
:label="t('views.monitor.topologyBuild.edgeFormEndArrow')"
name="endArrow"
help="边的结束端绘制默认箭头"
:help="t('views.monitor.topologyBuild.edgeFormEndArrowTip')"
>
<a-switch
v-model:checked="edgeState.form.style.endArrow"
checked-children="是"
un-checked-children="否"
/>
<a-switch v-model:checked="edgeState.form.style.endArrow" />
</a-form-item>
</a-col>
</a-row>
<a-divider orientation="left"> 标签文本及其配置 </a-divider>
<a-divider orientation="left">
{{ t('views.monitor.topologyBuild.label') }}
</a-divider>
<a-form-item
label="标签文本"
:label="t('views.monitor.topologyBuild.formLabel')"
name="label"
:label-col="{ span: 3 }"
help="文本文字，如果没有则不会显示"
:help="t('views.monitor.topologyBuild.formLabelTip')"
>
<a-input
v-model:value="edgeState.form.label"
@@ -1079,7 +1179,10 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="文本颜色" name="fill">
<a-form-item
:label="t('views.monitor.topologyBuild.formLabelStyleFill')"
name="fill"
>
<a-input
v-model:value="edgeState.form.labelCfg.style.fill"
type="color"
@@ -1087,7 +1190,10 @@ function fnModalCancel() {
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="文本大小" name="fontSize">
<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%"
@@ -1102,9 +1208,9 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="x偏移"
:label="t('views.monitor.topologyBuild.formLabelRefX')"
name="labelCfg.refX"
help="标签在 x 方向的偏移量"
:help="t('views.monitor.topologyBuild.formLabelRefXTip')"
>
<a-input-number
v-model:value="edgeState.form.labelCfg.refX"
@@ -1117,9 +1223,9 @@ function fnModalCancel() {
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="y偏移"
:label="t('views.monitor.topologyBuild.formLabelRefY')"
name="labelCfg.refY"
help="标签在 y 方向的偏移量"
:help="t('views.monitor.topologyBuild.formLabelRefYTip')"
>
<a-input-number
v-model:value="edgeState.form.labelCfg.refY"
@@ -1135,28 +1241,24 @@ function fnModalCancel() {
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="位置"
:label="t('views.monitor.topologyBuild.formLabelPosition')"
name="labelCfg.position"
help="标签文本相对于边的位置"
:help="t('views.monitor.topologyBuild.edgeFormLabelPosition')"
>
<a-select
v-model:value="edgeState.form.labelCfg.position"
:options="edgePositionOptions"
:options="edgeLabelPositionOptions"
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
label="跟随边旋转"
:label="t('views.monitor.topologyBuild.edgeFormLabelAutoRotate')"
name="labelCfg.autoRotate"
help="标签文字是否跟随边旋转"
:help="t('views.monitor.topologyBuild.edgeFormLabelAutoRotateTip')"
>
<a-switch
v-model:checked="edgeState.form.labelCfg.autoRotate"
checked-children="是"
un-checked-children="否"
/>
<a-switch v-model:checked="edgeState.form.labelCfg.autoRotate" />
</a-form-item>
</a-col>
</a-row>