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

feat: 页面调整组件属性升级

Browse Source
This commit is contained in:
TsMask
2024-10-28 11:02:39 +08:00
parent 670225a655
commit da0d49d306
125 changed files with 1775 additions and 3464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/monitor/cache/index.vue vendored
View File

@@ -9,8 +9,8 @@ import {
clearCacheSafe,
} from '@/api/monitor/cache';
import { PageContainer } from 'antdv-pro-layout';
import { ColumnsType } from 'ant-design-vue/lib/table/Table';
import { message } from 'ant-design-vue/lib';
import { ColumnsType } from 'ant-design-vue/es/table/Table';
import { message } from 'ant-design-vue/es';
import { hasPermissions } from '@/plugins/auth-user';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
@@ -268,7 +268,7 @@ onMounted(() => {
<template>
<PageContainer>
<a-row :gutter="20">
<a-row>
<a-col :lg="8" :md="8" :xs="24">
<a-card
:title="t('views.monitor.cache.cacheList')"

63
src/views/monitor/job/index.vue
View File

@@ -2,10 +2,11 @@
import { useRouter, useRoute } from 'vue-router';
import { reactive, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, Form } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { ProModal } from 'antdv-pro-modal';
import { message, Modal, Form } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import {
exportJob,
listJob,
@@ -190,9 +191,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
/**对话框对象信息状态类型 */
type ModalStateType = {
/**详情框是否显示 */
visibleByView: boolean;
openByView: boolean;
/**新增框或修改框是否显示 */
visibleByEdit: boolean;
openByEdit: boolean;
/**标题 */
title: string;
/**表单数据 */
@@ -200,13 +201,13 @@ type ModalStateType = {
/**确定按钮 loading */
confirmLoading: boolean;
/**cron生成框是否显示 */
visibleByCron: boolean;
openByCron: boolean;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByView: false,
visibleByEdit: false,
openByView: false,
openByEdit: false,
title: '任务',
from: {
jobId: undefined,
@@ -222,7 +223,7 @@ let modalState: ModalStateType = reactive({
remark: '',
},
confirmLoading: false,
visibleByCron: false,
openByCron: false,
});
/**对话框内表单属性和校验规则 */
@@ -273,7 +274,7 @@ function fnModalVisibleByVive(jobId: string | number) {
if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.monitor.job.viewJob');
modalState.visibleByView = true;
modalState.openByView = true;
} else {
message.error(t('views.monitor.job.viewInfoErr'), 2);
}
@@ -288,7 +289,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
if (!jobId) {
modalStateFrom.resetFields();
modalState.title = t('views.monitor.job.addJob');
modalState.visibleByEdit = true;
modalState.openByEdit = true;
} else {
if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0);
@@ -299,7 +300,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
if (res.code === RESULT_CODE_SUCCESS && res.data) {
modalState.from = Object.assign(modalState.from, res.data);
modalState.title = t('views.monitor.job.editJob');
modalState.visibleByEdit = true;
modalState.openByEdit = true;
} else {
message.error(t('views.monitor.job.viewInfoErr'), 2);
}
@@ -328,7 +329,7 @@ function fnModalOk() {
key,
duration: 2,
});
modalState.visibleByEdit = false;
modalState.openByEdit = false;
modalStateFrom.resetFields();
fnGetList(1);
} else {
@@ -353,8 +354,8 @@ function fnModalOk() {
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByEdit = false;
modalState.visibleByView = false;
modalState.openByEdit = false;
modalState.openByView = false;
modalStateFrom.resetFields();
}
@@ -362,7 +363,7 @@ function fnModalCancel() {
* 对话框弹出cron生成回调
*/
function fnModalCron(opt: boolean, cronStr?: string) {
modalState.visibleByCron = opt;
modalState.openByCron = opt;
if (cronStr) {
modalState.from.cronExpression = cronStr;
}
@@ -651,7 +652,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<div class="button-container">
<a-space :size="8" align="center">
<a-button
type="primary"
@click.prevent="fnModalVisibleByEdit()"
@@ -695,12 +696,12 @@ onMounted(() => {
<template #icon><SyncOutlined /></template>
{{ t('views.monitor.job.resetQueue') }}
</a-button>
</div>
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<div class="button-container">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template>
<a-switch
@@ -740,7 +741,7 @@ onMounted(() => {
</template>
</a-dropdown>
</a-tooltip>
</div>
</a-space>
</template>
<!-- 表格列表 -->
@@ -848,12 +849,12 @@ onMounted(() => {
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:open="modalState.openByView"
:title="modalState.title"
@cancel="fnModalCancel"
>
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.monitor.job.jobName')" name="jobName">
{{ modalState.from.jobName }}
@@ -869,7 +870,7 @@ onMounted(() => {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.job.invokeTarget')"
@@ -891,7 +892,7 @@ onMounted(() => {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.job.cronExpression')"
@@ -963,7 +964,7 @@ onMounted(() => {
:destroyOnClose="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByEdit"
:open="modalState.openByEdit"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
@@ -975,7 +976,7 @@ onMounted(() => {
:label-col="{ span: 6 }"
:label-wrap="true"
>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.job.jobName')"
@@ -1002,7 +1003,7 @@ onMounted(() => {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.job.jobGroup')"
@@ -1047,7 +1048,7 @@ onMounted(() => {
<template #title>
<div>{{ t('views.monitor.job.invokeTargetTip') }}</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip>
</template>
</a-input>
@@ -1073,7 +1074,7 @@ onMounted(() => {
{{ t('views.monitor.job.cronExpressionTip1') }}
</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
<InfoCircleOutlined style="opacity: 0.45; color: inherit" />
</a-tooltip>
</template>
<template #addonAfter>
@@ -1121,7 +1122,7 @@ onMounted(() => {
<!-- 生成cron表达式 -->
<CronModal
v-model:visible="modalState.visibleByCron"
v-model:open="modalState.openByCron"
:cron="modalState.from.cronExpression"
@ok="fnModalCron(false, $event)"
></CronModal>

33
src/views/monitor/job/log.vue
View File

@@ -2,10 +2,11 @@
import { useRoute, useRouter } from 'vue-router';
import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { ProModal } from 'antdv-pro-modal';
import { message, Modal } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import {
exportJobLog,
listJobLog,
@@ -216,7 +217,7 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
/**对话框对象信息状态类型 */
type ModalStateType = {
/**详情框是否显示 */
visibleByView: boolean;
open: boolean;
/**标题 */
title: string;
/**表单数据 */
@@ -225,7 +226,7 @@ type ModalStateType = {
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByView: false,
open: false,
title: '任务日志',
from: {
jobLogId: undefined,
@@ -246,14 +247,14 @@ let modalState: ModalStateType = reactive({
function fnModalVisibleByVive(row: Record<string, string>) {
modalState.from = Object.assign(modalState.from, row);
modalState.title = t('views.monitor.jobLog.viewLog');
modalState.visibleByView = true;
modalState.open = true;
}
/**
* 对话框弹出关闭执行函数
*/
function fnModalCancel() {
modalState.visibleByView = false;
modalState.open = false;
}
/**
@@ -503,7 +504,7 @@ onMounted(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<div class="button-container">
<a-space :size="8" align="center">
<a-button type="default" @click.prevent="fnClose()">
<template #icon><CloseOutlined /></template>
{{ t('common.close') }}
@@ -535,12 +536,12 @@ onMounted(() => {
<template #icon><ExportOutlined /></template>
{{ t('common.export') }}
</a-button>
</div>
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<div class="button-container">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template>
<a-switch
@@ -580,7 +581,7 @@ onMounted(() => {
</template>
</a-dropdown>
</a-tooltip>
</div>
</a-space>
</template>
<!-- 表格列表 -->
@@ -635,12 +636,12 @@ onMounted(() => {
<ProModal
:drag="true"
:width="800"
:visible="modalState.visibleByView"
:open="modalState.open"
:title="modalState.title"
@cancel="fnModalCancel"
>
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('common.rowId')" name="jobLogId">
{{ modalState.from.jobLogId }}
@@ -662,7 +663,7 @@ onMounted(() => {
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.jobLog.jobName')"
@@ -683,7 +684,7 @@ onMounted(() => {
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.jobLog.invokeTarget')"

6
src/views/monitor/monitor/index.vue
View File

@@ -466,7 +466,7 @@ onMounted(() => {
</a-form>
</a-card>
<a-row :gutter="16">
<a-row>
<a-col :lg="24" :md="24" :xs="24">
<a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
<!-- 插槽-卡片左侧侧 -->
@@ -496,7 +496,7 @@ onMounted(() => {
</a-card>
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
<!-- 插槽-卡片左侧侧 -->
@@ -554,7 +554,7 @@ onMounted(() => {
</a-card>
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
<!-- 插槽-卡片左侧侧 -->

8
src/views/monitor/online/index.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/lib';
import { message, Modal } from 'ant-design-vue/es';
import { forceLogout, listOnline } from '@/api/monitor/online';
import { parseDateToStr } from '@/utils/date-utils';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();

2
src/views/monitor/system/info.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { ColumnsType } from 'ant-design-vue/es/table';
import { getSystemInfo } from '@/api/monitor/system';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';

6
src/views/monitor/topology/index.vue
View File

@@ -4,7 +4,7 @@ import { PageContainer } from 'antdv-pro-layout';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { listAllNeInfo, stateNeInfo } from '@/api/ne/neInfo';
import { message } from 'ant-design-vue/lib';
import { message } from 'ant-design-vue/es';
import { randerGroph, switchLayout } from './graph';
import { parseDateToStr } from '@/utils/date-utils';
const { t } = useI18n();
@@ -61,7 +61,7 @@ function fnGetList(refresh: boolean = false) {
res.data.length > 0
) {
// 根网管
let rootNodeInfo = { neName: "OMC_001" };
let rootNodeInfo = { neName: 'OMC_001' };
const nodes = [];
const edges = [];
for (const item of res.data) {
@@ -139,7 +139,7 @@ function fnGetList(refresh: boolean = false) {
}
})
.then(hasNeList => {
if (!hasNeList) return;
if (!hasNeList) return;
if (refresh) {
// graphG6.value.get('canvas').set('localRefresh', true);
graphG6.value.destroy();

12
src/views/monitor/topologyArchitecture/index.vue
View File

@@ -6,7 +6,7 @@ import {
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import { listAllNeInfo } from '@/api/ne/neInfo';
import { message } from 'ant-design-vue/lib';
import { message } from 'ant-design-vue/es';
import { getGraphData } from '@/api/monitor/topology';
import { parseDateToStr } from '@/utils/date-utils';
import { Graph, GraphData, Menu, Tooltip } from '@antv/g6';
@@ -506,16 +506,20 @@ onBeforeUnmount(() => {
>
<!-- 插槽-卡片左侧侧 -->
<template #title>
<div class="button-container" style="margin-bottom: -12px">
<a-space :size="8" align="center">
<span>
{{ t('views.monitor.topologyBuild.graphGroup') }}：
{{ graphState.group }}
</span>
</div>
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-button type="default" @click.prevent="fnGraphDataLoad(true)">
<a-button
type="default"
size="small"
@click.prevent="fnGraphDataLoad(true)"
>
<template #icon><ReloadOutlined /></template>
{{ t('common.reloadText') }}
</a-button>

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

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { reactive, watch } from 'vue';
import { ProModal } from 'antdv-pro-modal';
import useI18n from '@/hooks/useI18n';
import {
graphEvent,
@@ -53,21 +54,21 @@ watch(graphEvent, v => {
edgeState.form.id = '#';
modalState.title = t('views.monitor.topologyBuild.edgeTitleAdd');
modalState.formType = 'edge';
modalState.visible = true;
modalState.open = true;
}
if (type === 'canvas-create-node') {
nodeState.origin = {};
nodeState.form.id = '';
modalState.title = t('views.monitor.topologyBuild.nodeTitleAdd');
modalState.formType = 'node';
modalState.visible = true;
modalState.open = true;
}
if (type === 'canvas-create-combo') {
comboState.origin = {};
comboState.form.id = '';
modalState.title = t('views.monitor.topologyBuild.comboTitleAdd');
modalState.formType = 'combo';
modalState.visible = true;
modalState.open = true;
}
// 边
if (type === 'edge-edit' && item) {
@@ -76,7 +77,7 @@ watch(graphEvent, v => {
edgeState.form = Object.assign(edgeState.form, edge);
modalState.title = t('views.monitor.topologyBuild.edgeTitleEdit');
modalState.formType = 'edge';
modalState.visible = true;
modalState.open = true;
}
// 节点
if (type === 'node-edit' && item) {
@@ -85,7 +86,7 @@ watch(graphEvent, v => {
nodeState.form = Object.assign(nodeState.form, node);
modalState.title = t('views.monitor.topologyBuild.nodeTitleEdit');
modalState.formType = 'node';
modalState.visible = true;
modalState.open = true;
}
// 分组
if (type === 'combo-edit' && item) {
@@ -98,14 +99,14 @@ watch(graphEvent, v => {
}
modalState.title = t('views.monitor.topologyBuild.comboTitleEdit');
modalState.formType = 'combo';
modalState.visible = true;
modalState.open = true;
}
});
/**对话框对象信息状态类型 */
type ModalStateType = {
/**对话框是否显示 */
visible: boolean;
open: boolean;
/**标题 */
title: string;
/**图元素表单类型 */
@@ -116,7 +117,7 @@ type ModalStateType = {
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visible: false,
open: false,
title: '图信息',
formType: 'edge',
confirmLoading: false,
@@ -132,21 +133,21 @@ function fnModalOk() {
// 边编辑确认
if (type === 'edge') {
handleOkEdge().then(result => {
modalState.visible = !result;
modalState.open = !result;
modalState.confirmLoading = false;
});
}
// 节点编辑确认
if (type === 'node') {
handleOkNode().then(result => {
modalState.visible = !result;
modalState.open = !result;
modalState.confirmLoading = false;
});
}
// 分租编辑确认
if (type === 'combo') {
handleOkcombo().then(result => {
modalState.visible = !result;
modalState.open = !result;
modalState.confirmLoading = false;
});
}
@@ -157,7 +158,7 @@ function fnModalOk() {
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visible = false;
modalState.open = false;
const type = modalState.formType;
// 边编辑还原
if (type === 'edge') {
@@ -179,10 +180,10 @@ function fnModalCancel() {
:drag="true"
:width="800"
:destroyOnClose="true"
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
:body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visible"
:open="modalState.open"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
@@ -240,7 +241,7 @@ function fnModalCancel() {
</a-form-item>
<!-- 圆形尺寸 -->
<a-row :gutter="16" v-if="comboState.form.type.startsWith('circle')">
<a-row v-if="comboState.form.type.startsWith('circle')">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -269,7 +270,7 @@ function fnModalCancel() {
</a-row>
<!-- 矩形尺寸 -->
<a-row :gutter="16" v-if="comboState.form.type.startsWith('rect')">
<a-row v-if="comboState.form.type.startsWith('rect')">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -308,7 +309,7 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleFill')"
@@ -396,7 +397,7 @@ function fnModalCancel() {
</a-input>
</a-form-item>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -424,7 +425,7 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.formLabelRefX')"
@@ -457,7 +458,7 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.formLabelPosition')"
@@ -525,7 +526,7 @@ function fnModalCancel() {
</a-select>
</a-form-item>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormX')"
@@ -552,7 +553,7 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col
:lg="12"
:md="12"
@@ -653,7 +654,7 @@ function fnModalCancel() {
</a-row>
<template v-if="!nodeState.form.type.startsWith('image')">
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleStroke')"
@@ -728,7 +729,7 @@ function fnModalCancel() {
</a-input>
</a-form-item>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -756,7 +757,7 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.formLabelPosition')"
@@ -791,7 +792,7 @@ function fnModalCancel() {
{{ t('views.monitor.topologyBuild.nodeFormTypeImage') }}
</a-divider>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormClipShow')"
@@ -835,7 +836,7 @@ function fnModalCancel() {
<!-- 裁剪功能 -->
<template v-if="nodeState.form.clipCfg.show">
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormClipType')"
@@ -851,10 +852,7 @@ function fnModalCancel() {
</a-row>
<!-- 剪裁圆形 -->
<a-row
:gutter="16"
v-if="nodeState.form.clipCfg.type.startsWith('circle')"
>
<a-row 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')"
@@ -872,10 +870,7 @@ function fnModalCancel() {
</a-row>
<!-- 剪裁矩形 -->
<a-row
:gutter="16"
v-if="nodeState.form.clipCfg.type.startsWith('rect')"
>
<a-row v-if="nodeState.form.clipCfg.type.startsWith('rect')">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="
@@ -911,7 +906,7 @@ function fnModalCancel() {
</a-row>
<!-- 剪裁椭圆 -->
<a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'ellipse'">
<a-row v-if="nodeState.form.clipCfg.type === 'ellipse'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="
@@ -947,7 +942,7 @@ function fnModalCancel() {
</a-row>
<!-- 裁剪图形坐标 -->
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormClipX')"
@@ -992,7 +987,7 @@ function fnModalCancel() {
{{ t('views.monitor.topologyBuild.nodeFormIcon') }}
</a-divider>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormIconShow')"
@@ -1016,7 +1011,7 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormIconWidth')"
@@ -1047,7 +1042,7 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-row :gutter="16" v-if="nodeState.form.type === 'triangle'">
<a-row v-if="nodeState.form.type === 'triangle'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.nodeFormIconOffset')"
@@ -1087,7 +1082,7 @@ function fnModalCancel() {
</a-select>
</a-form-item>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.edgeFormSource')"
@@ -1118,7 +1113,7 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.formStyleStroke')"
@@ -1146,7 +1141,7 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.edgeFormStartArrow')"
@@ -1185,7 +1180,7 @@ function fnModalCancel() {
</a-input>
</a-form-item>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -1213,7 +1208,7 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.formLabelRefX')"
@@ -1246,7 +1241,7 @@ function fnModalCancel() {
</a-col>
</a-row>
<a-row :gutter="16">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.formLabelPosition')"

2
src/views/monitor/topologyBuild/hooks/useCombo.ts
View File

@@ -1,4 +1,4 @@
import { message, Form } from 'ant-design-vue/lib';
import { message, Form } from 'ant-design-vue/es';
import { reactive, toRaw, watch } from 'vue';
import { graphG6, selectSourceTargetOptions } from './useGraph';
import useI18n from '@/hooks/useI18n';

2
src/views/monitor/topologyBuild/hooks/useEdge.ts
View File

@@ -1,4 +1,4 @@
import { message, Form } from 'ant-design-vue/lib';
import { message, Form } from 'ant-design-vue/es';
import { reactive, watch } from 'vue';
import useI18n from '@/hooks/useI18n';
import { graphG6 } from './useGraph';

2
src/views/monitor/topologyBuild/hooks/useNode.ts
View File

@@ -1,4 +1,4 @@
import { message, Form } from 'ant-design-vue/lib';
import { message, Form } from 'ant-design-vue/es';
import { reactive, watch } from 'vue';
import { graphG6 } from './useGraph';
import useI18n from '@/hooks/useI18n';

80
src/views/monitor/topologyBuild/index.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { reactive, onMounted, ref, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal';
import useI18n from '@/hooks/useI18n';
import GraphEditModal from './components/GraphEditModal.vue';
import useGraph, { graphG6 } from './/hooks/useGraph';
@@ -11,7 +12,7 @@ import {
saveGraphData,
} from '@/api/monitor/topology';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { Form, Modal, message } from 'ant-design-vue/lib';
import { Form, Modal, message } from 'ant-design-vue/es';
const { t } = useI18n();
const { graphMode, graphModeOptions, handleRanderGraph, handleChangeMode } =
useGraph();
@@ -95,7 +96,7 @@ function fnGraphDataLoad(reload: boolean = false) {
/**对话框对象信息状态类型 */
type ModalStateType = {
/**框是否显示 */
visible: boolean;
open: boolean;
/**标题 */
title: string;
/**表单数据 */
@@ -108,7 +109,7 @@ type ModalStateType = {
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visible: false,
open: false,
title: '图组',
form: {
group: '',
@@ -180,7 +181,7 @@ function fnModalOk() {
*/
function fnModalCancel() {
modalState.type = 'save';
modalState.visible = false;
modalState.open = false;
modalStateFrom.resetFields();
}
@@ -188,8 +189,8 @@ function fnModalCancel() {
function fnGraphDataSave() {
modalState.form.group = graphState.group;
modalState.type = 'save';
(modalState.title = t('views.monitor.topologyBuild.saveTtite')),
(modalState.visible = true);
modalState.title = t('views.monitor.topologyBuild.saveTtite');
modalState.open = true;
}
/**图组数据删除 */
@@ -244,57 +245,44 @@ onMounted(() => {
<template>
<PageContainer>
<a-card
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
<!-- 表格搜索栏 -->
<a-form :model="graphState" name="graphState" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="4" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.graphMode')"
name="graphMode"
>
<a-select
:value="graphMode"
:options="graphModeOptions"
@change="handleChangeMode"
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.graphGroup')"
name="group "
>
<a-select
v-model:value="graphState.group"
:options="graphState.groupOptions"
:placeholder="t('common.selectPlease')"
@change="fnGraphGroupChange"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<a-row :gutter="16">
<a-col>
<span>{{ t('views.monitor.topologyBuild.graphMode') }}:</span>&nbsp;
<a-select
:value="graphMode"
:options="graphModeOptions"
@change="handleChangeMode"
>
</a-select>
</a-col>
<a-col>
<span>{{ t('views.monitor.topologyBuild.graphGroup') }}:</span>&nbsp;
<a-select
v-model:value="graphState.group"
:options="graphState.groupOptions"
:placeholder="t('common.selectPlease')"
@change="fnGraphGroupChange"
/>
</a-col>
</a-row>
</a-card>
<a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<div class="button-container" style="margin-bottom: -12px">
<a-space :size="8" align="center">
<span>
{{ t('views.monitor.topologyBuild.graphGroup') }}：
{{ graphState.group }}
</span>
</div>
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<div class="button-container" style="margin-bottom: -12px">
<a-space :size="8" align="center">
<template v-if="graphMode === 'edit'">
<a-button type="primary" size="small" @click="fnGraphDataSave">
<template #icon>
@@ -315,7 +303,7 @@ onMounted(() => {
{{ t('views.monitor.topologyBuild.graphDelete') }}
</a-button>
</template>
</div>
</a-space>
</template>
<div ref="graphG6Dom" class="chart"></div>
@@ -329,7 +317,7 @@ onMounted(() => {
:drag="true"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visible"
:open="modalState.open"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
@@ -341,7 +329,7 @@ onMounted(() => {
:label-col="{ span: 6 }"
:labelWrap="true"
>
<a-row :gutter="16">
<a-row>
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
:label="t('views.monitor.topologyBuild.graphGroup')"