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

feat: 网元安装步骤页面

Browse Source
This commit is contained in:
TsMask
2024-04-01 15:58:06 +08:00
parent 3d40e0856e
commit 00e8b7acbb
6 changed files with 749 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

438
src/views/tool/neQuickSetup/components/StepActivate.vue
View File

@@ -1,115 +1,226 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, watch } from 'vue';
import { message, Form } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import { reactive, onMounted, toRaw, ref, onUnmounted } from 'vue';
import { message, Modal, Upload } from 'ant-design-vue/lib';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import { testNeHost } from '@/api/ne/neHost';
import useDictStore from '@/store/modules/dict';
const { getDict } = useDictStore();
import { useClipboard } from '@vueuse/core';
import { FileType } from 'ant-design-vue/lib/upload/interface';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
import { uploadFile } from '@/api/tool/file';
import {
codeNeLicense,
changeNeLicense,
stateNeLicense,
} from '@/api/ne/neLicense';
import useI18n from '@/hooks/useI18n';
import { stepState } from '../hooks/useStep';
import saveAs from 'file-saver';
const { copy } = useClipboard({ legacy: true });
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']);
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
editId: {
type: String,
default: '',
},
});
/**字典数据 */
let dict: {
/**认证模式 */
neHostAuthMode: DictType[];
} = reactive({
neHostAuthMode: [],
});
/**检查对象信息状态类型 */
type CheckStateType = {
/**标题 */
title: string;
/**服务器信息 */
info: Record<string, any>;
/**授权激活对象信息状态类型 */
type LicenseStateType = {
/**步骤 */
setp: 'license' | 'verify';
/**主机ID */
hostId: string;
/**表单数据 */
from: Record<string, any>;
from: {
neType: string;
neId: string;
activationRequestCode: string;
licensePath: string;
reload: boolean;
};
/**确定按钮 loading */
confirmLoading: boolean;
/**上传文件 */
uploadFiles: any[];
};
/**检查对象信息状态 */
let checkState: CheckStateType = reactive({
title: '检查服务器',
info: {
hostId: undefined,
hostType: 'ssh',
groupId: '1',
title: 'SSH_NE_22',
addr: '',
port: 22,
user: 'user',
authMode: '0',
password: 'user',
privateKey: '',
passPhrase: '',
remark: '',
},
/**授权激活对象信息状态 */
const licenseState: LicenseStateType = reactive({
setp: 'license',
hostId: '',
from: {
hostId: undefined,
hostType: 'ssh',
groupId: '1',
title: 'SSH_NE_22',
addr: '',
port: 22,
user: 'user',
authMode: '0',
password: 'user',
privateKey: '',
passPhrase: '',
remark: '',
neType: '',
neId: '',
activationRequestCode: '',
licensePath: '',
reload: true,
},
confirmLoading: false,
uploadFiles: [],
});
/**
* 对话框弹出测试连接
*/
function fnModalTest(row: Record<string, any>) {
if (checkState.confirmLoading) return;
checkState.confirmLoading = true;
/**表单上传前检查或转换压缩 */
function fnBeforeUploadFile(file: FileType) {
if (licenseState.confirmLoading) return false;
if (!file.name.endsWith('.ini')) {
message.error('只支持上传文件格式 .ini', 3);
return Upload.LIST_IGNORE;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('文件必须小于2MB', 3);
return Upload.LIST_IGNORE;
}
return true;
}
/**表单上传文件 */
function fnUploadFile(up: UploadRequestOption) {
// 发送请求
const hide = message.loading(t('common.loading'), 0);
testNeHost(row)
licenseState.confirmLoading = true;
let formData = new FormData();
formData.append('file', up.file);
formData.append('subPath', 'license');
uploadFile(formData)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: `${row.addr}:${row.port} ${t('views.ne.neHost.testOk')}`,
duration: 2,
});
message.success('上传成功', 3);
// 改为完成状态
const file = licenseState.uploadFiles[0];
file.percent = 100;
file.status = 'done';
// 预置到表单
const { fileName } = res.data;
licenseState.from.licensePath = fileName;
} else {
message.error({
content: `${row.addr}:${row.port} ${res.msg}`,
duration: 2,
});
message.error(res.msg, 3);
}
})
.finally(() => {
hide();
checkState.confirmLoading = false;
licenseState.confirmLoading = false;
});
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([getDict('ne_host_authMode')]).then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.neHostAuthMode = resArr[0].value;
/**复制授权申请码 */
function fnCopyCode() {
const code = licenseState.from.activationRequestCode;
if (!code) return;
copy(code).then(() => {
message.success('已成功复制', 3);
});
}
/**下载授权申请码文件 */
function fnDownCode() {
const { activationRequestCode, neType, neId } = licenseState.from;
if (!activationRequestCode) return;
Modal.confirm({
title: t('common.tipTitle'),
content: '确认将授权申请码下载为文件进行保存？',
onOk() {
const blob = new Blob([activationRequestCode], {
type: 'text/plain',
});
saveAs(blob, `${neType}_${neId}_code.txt`);
},
});
}
/**读取授权申请码 */
function fnGetCode() {
const { neType, neId } = licenseState.from;
licenseState.confirmLoading = true;
codeNeLicense(neType, neId).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
licenseState.from.activationRequestCode = res.data;
licenseState.confirmLoading = false;
} else {
message.error(res.msg, 3);
}
});
}
/**启动服务验证 */
function fnRunCheck() {
if (licenseState.confirmLoading) return;
const form = toRaw(licenseState.from);
if (form.activationRequestCode === '' || form.licensePath === '') {
message.error(t('common.errorFields', { num: 1 }), 3);
return;
}
Object.assign(form, { hostId: licenseState.hostId });
licenseState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
changeNeLicense(form)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success('网元开始进行校验', 3);
fnVerifyTask();
} else {
message.error(res.msg, 3);
}
})
.finally(() => {
hide();
licenseState.confirmLoading = false;
});
}
/**校验状态 */
const verifyState = reactive({
timer: null as any,
/**执行次数 */
count: 0,
/**信息日志 */
msgArr: [] as string[],
/**数据 sn expire */
data: null as any,
});
/**巡检校验任务 */
function fnVerifyTask() {
licenseState.setp = 'verify';
verifyState.timer = setInterval(() => {
if (verifyState.count > 15) {
clearTimeout(verifyState.timer);
verifyState.msgArr.unshift(
`第 ${
verifyState.count + 1
} 次：网元验证激活失败，请重新上传有效激活文件。`
);
return;
}
const { neType, neId } = licenseState.from;
stateNeLicense(neType, neId).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success(`${neType} ${neId} 网元激活成功`, 3);
verifyState.data = res.data;
// 记录当前步骤状态信息
stepState.states[stepState.current] = { from: res.data };
stepState.stepNext = true;
}
verifyState.count += 1;
verifyState.msgArr.unshift(`第 ${verifyState.count} 次：${res.msg}`);
});
}, 2_000);
}
/**巡检重新校验 */
function fnVerifyTaskStop() {
clearTimeout(verifyState.timer);
verifyState.count = 0;
verifyState.msgArr = [];
licenseState.setp = 'license';
}
onMounted(() => {
// 读取步骤：网元信息
const stepPrevFrom = stepState.states[1].from;
const { neType, neId } = stepPrevFrom;
licenseState.from.neType = neType;
licenseState.from.neId = neId;
licenseState.hostId = stepPrevFrom.hostIds.split(',')[0];
// 获取code
fnGetCode();
});
onUnmounted(() => {
clearTimeout(verifyState.timer);
});
</script>
@@ -117,64 +228,119 @@ onMounted(() => {
<a-form
name="modalStateFrom"
layout="horizontal"
autocomplete="off"
:validate-on-rule-change="false"
:validateTrigger="[]"
:label-col="{ span: 3 }"
:labelWrap="true"
:wrapper-col="{ span: 12 }"
:label-wrap="true"
>
<a-form-item label="激活码" name="comment">
<a-textarea
:auto-size="{ minRows: 4, maxRows: 6 }"
:maxlength="200"
:show-count="true"
:placeholder="
t('views.configManage.softwareManage.updateCommentPlease')
"
/>
</a-form-item>
<div>---- 授权申请</div>
<a-form-item label="授权文件" name="file">
<a-upload
name="file"
accept=".rpm,.deb"
list-type="text"
:max-count="1"
:show-upload-list="true"
>
<a-button type="default">
{{ t('views.configManage.softwareManage.selectFile') }}
</a-button>
</a-upload>
</a-form-item>
<template v-if="licenseState.setp === 'license'">
<a-form-item label="授权申请码" name="comment" :required="true">
<a-input-group compact>
<a-input
v-model:value="licenseState.from.activationRequestCode"
:disabled="true"
style="width: calc(100% - 200px)"
/>
<a-tooltip title="复制">
<a-button type="default" @click="fnCopyCode()">
<template #icon><CopyOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip title="下载">
<a-button type="primary" @click="fnDownCode()">
<template #icon><DownloadOutlined /></template>
</a-button>
</a-tooltip>
</a-input-group>
</a-form-item>
<a-form-item
name="test"
label="启动验证"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<div style="align-items: center">
<a-button
type="primary"
shape="round"
@click="fnModalTest({})"
:loading="checkState.confirmLoading"
<a-form-item label="授权激活文件" name="file" :required="true">
<a-upload
name="file"
v-model:file-list="licenseState.uploadFiles"
accept=".ini"
list-type="text"
:max-count="1"
:show-upload-list="{
showPreviewIcon: false,
showRemoveIcon: false,
showDownloadIcon: false,
}"
:before-upload="fnBeforeUploadFile"
:custom-request="fnUploadFile"
:disabled="licenseState.confirmLoading"
>
<template #icon><LinkOutlined /></template>
启动验证
</a-button>
</div>
</a-form-item>
<a-button type="default"> 上传文件 </a-button>
</a-upload>
</a-form-item>
---- 启动日志结果
<a-form-item name="check" :wrapper-col="{ span: 14, offset: 3 }">
<div style="align-items: center">
<a-button
type="primary"
shape="round"
@click="fnRunCheck()"
:loading="licenseState.confirmLoading"
>
<template #icon><LinkOutlined /></template>
授权校验
</a-button>
</div>
</a-form-item>
</template>
<a-form-item
name="info"
label="启动日志"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<div style="align-items: center">-----</div>
</a-form-item>
<div>---- 校验信息</div>
<template v-if="licenseState.setp === 'verify'">
<a-form-item
name="info"
label="巡检信息"
:label-col="{ span: 3 }"
:wrapper-col="{ span: 24 }"
:label-wrap="true"
>
<a-result
:status="verifyState.data ? 'success' : 'info'"
:title="verifyState.data ? '成功激活' : '请等待网元验证结果'"
>
<template #extra>
<a-button
@click="fnVerifyTaskStop()"
v-if="verifyState.data === null"
>
返回重新校验
</a-button>
</template>
<div class="verify-msg" v-if="verifyState.data === null">
<p
style="font-size: 16px"
v-for="(s, i) in verifyState.msgArr"
:key="i"
>
<close-circle-outlined :style="{ color: 'red' }" />
{{ s }}
</p>
</div>
<div v-else>
<p style="font-size: 16px">序列号：{{ verifyState.data.sn }}</p>
<p style="font-size: 16px">
许可证到期时间：{{ verifyState.data.expire }}
</p>
</div>
</a-result>
</a-form-item>
</template>
</a-form>
</template>
<style lang="less" scoped></style>
<style lang="less" scoped>
.verify-msg {
height: 200px;
overflow-y: auto;
}
</style>

348
src/views/tool/neQuickSetup/components/StepConfig.vue
View File

@@ -1,110 +1,16 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, watch } from 'vue';
import { message, Form } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import { testNeHost } from '@/api/ne/neHost';
import useDictStore from '@/store/modules/dict';
const { getDict } = useDictStore();
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']);
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
editId: {
type: String,
default: '',
},
});
import { reactive, onMounted, onBeforeMount } from 'vue';
import { message } from 'ant-design-vue/lib';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import { stepState } from '../hooks/useStep';
import { getConfigFile, saveConfigFile } from '@/api/ne/neInfo';
import { parseDateToStr } from '@/utils/date-utils';
/**字典数据 */
let dict: {
/**认证模式 */
neHostAuthMode: DictType[];
} = reactive({
neHostAuthMode: [],
});
/**检查对象信息状态类型 */
type CheckStateType = {
/**标题 */
title: string;
/**服务器信息 */
info: Record<string, any>;
/**表单数据 */
from: Record<string, any>;
/**确定按钮 loading */
confirmLoading: boolean;
};
/**检查对象信息状态 */
let checkState: CheckStateType = reactive({
title: '检查服务器',
info: {
hostId: undefined,
hostType: 'ssh',
groupId: '1',
title: 'SSH_NE_22',
addr: '',
port: 22,
user: 'user',
authMode: '0',
password: 'user',
privateKey: '',
passPhrase: '',
remark: '',
},
from: {
hostId: undefined,
hostType: 'ssh',
groupId: '1',
title: 'SSH_NE_22',
addr: '',
port: 22,
user: 'user',
authMode: '0',
password: 'user',
privateKey: '',
passPhrase: '',
remark: '',
},
confirmLoading: false,
});
/**
* 对话框弹出测试连接
*/
function fnModalTest(row: Record<string, any>) {
if (checkState.confirmLoading) return;
checkState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
testNeHost(row)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: `${row.addr}:${row.port} ${t('views.ne.neHost.testOk')}`,
duration: 2,
});
} else {
message.error({
content: `${row.addr}:${row.port} ${res.msg}`,
duration: 2,
});
}
})
.finally(() => {
hide();
checkState.confirmLoading = false;
});
}
/**文件树对象信息状态类型 */
type FileTreeState = {
/**配置对象信息状态类型 */
type ConfigState = {
/**展开指定的树节点 */
expandedKeys: string[];
/**设置选中的树节点 */
@@ -112,78 +18,210 @@ type FileTreeState = {
/**表单数据 */
treeData: any[];
/**等待 loading */
loading: boolean;
treeLoading: boolean;
/**选中的树节点 */
selected: { title: string; key: string };
/**设置选中的数据内容 */
keyTextData: string;
/**设置选中等待 loading */
keyTextLoading: boolean;
};
/**文件树对象信息状态 */
let fileTreeState: FileTreeState = reactive({
expandedKeys: ['0-0', '0-1'],
selectedKeys: [],
/**配置对象信息状态 */
let configState: ConfigState = reactive({
expandedKeys: ['000'],
selectedKeys: ['oam_manager.yaml'],
treeData: [
{
title: 'parent 0',
key: '0-0',
title: 'NE',
key: '000',
children: [
{
title: 'leaf 0-0',
key: '0-0-0',
isLeaf: true,
},
{
title: 'leaf 0-1',
key: '0-0-1',
isLeaf: true,
},
],
},
{
title: 'parent 1',
key: '0-1',
children: [
{
title: 'leaf 1-0',
key: '0-1-0',
isLeaf: true,
},
{
title: 'leaf 1-1',
key: '0-1-1',
isLeaf: true,
title: 'oam_manager',
key: 'oam_manager.yaml',
},
],
},
],
loading: false,
treeLoading: false,
selected: { title: 'oam_manager', key: 'oam_manager.yaml' },
keyTextData: '...',
keyTextLoading: false,
});
/**查询可选命令列表 */
function fnSelectConfigNode(_: any, info: any) {
const { title, key } = info.node;
configState.selectedKeys = [key];
configState.selected = { title, key };
fnGetConfigFile(key);
}
/**查询配置列表 */
function fnGetConfigFile(filePath: string = '') {
if (filePath) {
if (configState.keyTextLoading) return;
configState.keyTextLoading = true;
} else {
if (configState.treeLoading) return;
configState.treeLoading = true;
}
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
getConfigFile(stepNeInfo.neType, stepNeInfo.neId, filePath)
.then(res => {
// 目录列表
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
const treeItem = {
title: stepNeInfo.neType,
key: stepNeInfo.neId,
children: [] as any,
};
treeItem.children = res.data.map((fileName: string) => {
return {
title: fileName.replace(/\.[^.]+$/, ''),
key: fileName,
};
});
configState.treeData = [treeItem];
configState.expandedKeys = [stepNeInfo.neId];
// 选中加载显示内容
if (treeItem.children.length > 0) {
const fileItem = treeItem.children[0];
configState.selectedKeys = [fileItem.key];
configState.selected = fileItem;
fnGetConfigFile(fileItem.key);
}
}
// 单文件内容
if (res.code === RESULT_CODE_SUCCESS && typeof res.data === 'string') {
configState.keyTextData = res.data;
}
// 出错
if (res.code === RESULT_CODE_ERROR) {
message.error({
content: res.msg,
duration: 3,
});
}
})
.finally(() => {
if (filePath) {
configState.keyTextLoading = false;
} else {
configState.treeLoading = false;
}
});
}
/**保存配置文件 */
function fnSaveConfigFile() {
if (configState.keyTextLoading) return;
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
saveConfigFile({
neType: stepNeInfo.neType,
neId: stepNeInfo.neId,
filePath: configState.selected.key,
content: configState.keyTextData,
sync: true, // 同步到网元
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
saveState.saveTime = parseDateToStr(new Date(), 'HH:mm:ss');
// 记录当前步骤状态信息
stepState.states[stepState.current] = {
treeData: configState.treeData,
};
stepState.stepNext = true;
} else {
message.error({
content: res.msg,
duration: 3,
});
}
})
.finally(() => {
saveState.timer = null;
});
}
/**保存文件数据状态 */
const saveState = reactive({
timer: null as any,
saveTime: '',
});
/**文件数据变更 */
function fnChangekeyTextData(val: string) {
console.log(val);
// 在用户停止输入3秒后，执行保存请求的操作
if (saveState.timer) {
clearTimeout(saveState.timer);
}
stepState.stepNext = false;
saveState.timer = setTimeout(fnSaveConfigFile, 3_000);
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([getDict('ne_host_authMode')]).then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.neHostAuthMode = resArr[0].value;
}
});
fnGetConfigFile();
});
onBeforeMount(() => {
clearTimeout(saveState.timer);
});
</script>
<template>
<a-row :gutter="8">
<a-col :lg="6" :md="6" :xs="24">
<a-directory-tree
v-model:expandedKeys="fileTreeState.expandedKeys"
v-model:selectedKeys="fileTreeState.selectedKeys"
:tree-data="fileTreeState.treeData"
></a-directory-tree>
<a-spin :spinning="configState.treeLoading">
<a-directory-tree
v-model:expandedKeys="configState.expandedKeys"
v-model:selectedKeys="configState.selectedKeys"
@select="fnSelectConfigNode"
:tree-data="configState.treeData"
></a-directory-tree>
</a-spin>
</a-col>
<a-col :lg="18" :md="18" :xs="24">
<CodemirrorEdite
:value="JSON.stringify(fileTreeState.selectedKeys)"
:disabled="false"
:editor-style="{ height: '500px !important' }"
:placeholder="t('views.mmlManage.cmdAwait')"
></CodemirrorEdite>
<a-spin :spinning="configState.treeLoading || configState.keyTextLoading">
<CodemirrorEdite
v-model:value="configState.keyTextData"
:disabled="configState.keyTextLoading"
lang="yaml"
style="height: 500px"
@change="fnChangekeyTextData"
></CodemirrorEdite>
<div
class="edite-tip"
:class="{ 'edite-tip__ing': saveState.timer > 0 }"
>
{{ configState.selected.title }}
<template v-if="saveState.saveTime.length > 1">
| 最近保存: {{ saveState.saveTime }}
</template>
</div>
</a-spin>
</a-col>
</a-row>
</template>
<style lang="less" scoped></style>
<style lang="less" scoped>
.edite-tip {
min-height: 24px;
padding: 0 4px;
color: #fff;
line-height: 24px;
background: var(--ant-primary-color);
border-radius: 2px;
cursor: pointer;
transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
&__ing {
background: var(--ant-primary-color-disabled);
}
}
</style>

184
src/views/tool/neQuickSetup/components/StepFinish.vue
View File

@@ -1,37 +1,171 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, watch } from 'vue';
import { message, Form } from 'ant-design-vue/lib';
import { reactive, onMounted } from 'vue';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import { testNeHost } from '@/api/ne/neHost';
import useDictStore from '@/store/modules/dict';
const { getDict } = useDictStore();
import { stateNeInfo } from '@/api/ne/neInfo';
import { stepState } from '../hooks/useStep';
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']);
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
editId: {
type: String,
default: '',
},
/**状态数据 */
const state = reactive({
data: {} as Record<string, any>,
resoures: {} as Record<string, any>,
});
onMounted(() => {});
function getNeState() {
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
stateNeInfo(stepNeInfo.neType, stepNeInfo.neId).then(res => {
// 单文件内容
if (res.code === RESULT_CODE_SUCCESS) {
state.data = res.data;
let sysCpuUsage = 0;
let nfCpuUsage = 0;
if (res.data.cpu) {
nfCpuUsage = res.data.cpu.nfCpuUsage;
if (nfCpuUsage > 100) {
const nfCpu = +(res.data.cpu.nfCpuUsage / 100);
if (nfCpu > 100) {
nfCpuUsage = 100;
} else {
nfCpuUsage = +nfCpu.toFixed(2);
}
}
sysCpuUsage = res.data.cpu.sysCpuUsage;
if (sysCpuUsage > 100) {
const sysCpu = +(res.data.cpu.sysCpuUsage / 100);
if (sysCpu > 100) {
sysCpuUsage = 100;
} else {
sysCpuUsage = +sysCpu.toFixed(2);
}
}
}
let sysMemUsage = 0;
if (res.data.mem) {
let men = res.data.mem.sysMemUsage;
if (men > 100) {
men = +(men / 100).toFixed(2);
}
sysMemUsage = men;
}
let sysDiskUsage = 0;
if (res.data.disk && Array.isArray(res.data.disk.partitionInfo)) {
let disks: any[] = res.data.disk.partitionInfo;
disks = disks.sort((a, b) => +b.used - +a.used);
if (disks.length > 0) {
const { total, used } = disks[0];
sysDiskUsage = +((used / total) * 100).toFixed(2);
}
}
Reflect.set(state, 'resoures', {
sysDiskUsage,
sysMemUsage,
sysCpuUsage,
nfCpuUsage,
});
}
});
}
onMounted(() => {
getNeState();
});
</script>
<template>
<a-result title="网元状态">
<template #extra>
<div>版本：1.x</div>
<div>sn：0000</div>
</template>
</a-result>
<div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
<a-divider orientation="left">
{{ t('views.ne.neInfo.info') }}
</a-divider>
<div>
<span>{{ t('views.ne.neInfo.serviceState') }}：</span>
<a-tag :color="state.data.online ? 'processing' : 'error'">
{{
state.data.online
? t('views.ne.neInfo.normalcy')
: t('views.ne.neInfo.exceptions')
}}
</a-tag>
</div>
<div>
<span>{{ t('views.ne.neInfo.version') }}：</span>
<span>{{ state.data.version }}</span>
</div>
<div>
<span>{{ t('views.ne.neInfo.serialNum') }}：</span>
<span>{{ state.data.sn }}</span>
</div>
<div>
<span>{{ t('views.ne.neInfo.expiryDate') }}：</span>
<span>{{ state.data.expire }}</span>
</div>
<a-divider orientation="left">
{{ t('views.ne.neInfo.resourceInfo') }}
</a-divider>
<div>
<span>{{ t('views.ne.neInfo.neCpu') }}：</span>
<a-progress
status="normal"
:stroke-color="
state.resoures.nfCpuUsage < 30
? '#52c41a'
: state.resoures.nfCpuUsage > 70
? '#ff4d4f'
: '#1890ff'
"
:percent="state.resoures.nfCpuUsage"
/>
</div>
<div>
<span>{{ t('views.ne.neInfo.sysCpu') }}：</span>
<a-progress
status="normal"
:stroke-color="
state.resoures.sysCpuUsage < 30
? '#52c41a'
: state.resoures.sysCpuUsage > 70
? '#ff4d4f'
: '#1890ff'
"
:percent="state.resoures.sysCpuUsage"
/>
</div>
<div>
<span>{{ t('views.ne.neInfo.sysMem') }}：</span>
<a-progress
status="normal"
:stroke-color="
state.resoures.sysMemUsage < 30
? '#52c41a'
: state.resoures.sysMemUsage > 70
? '#ff4d4f'
: '#1890ff'
"
:percent="state.resoures.sysMemUsage"
/>
</div>
<div>
<span>{{ t('views.ne.neInfo.sysDisk') }}：</span>
<a-progress
status="normal"
:stroke-color="
state.resoures.sysDiskUsage < 30
? '#52c41a'
: state.resoures.sysDiskUsage > 70
? '#ff4d4f'
: '#1890ff'
"
:percent="state.resoures.sysDiskUsage"
/>
</div>
</div>
</template>
<style lang="less" scoped>

177
src/views/tool/neQuickSetup/components/StepInstall.vue
View File

@@ -1,21 +1,15 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, watch, ref } from 'vue';
import { reactive, onMounted, toRaw, ref } from 'vue';
import { message, Form, Upload } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import TerminalSSH from '@/components/TerminalSSH/index.vue';
import { ColumnsType } from 'ant-design-vue/lib/table';
import {
addNeSoftware,
installCheckNeSoftware,
listNeSoftware,
} from '@/api/ne/neSoftware';
import { checkInstallNeSoftware, listNeSoftware } from '@/api/ne/neSoftware';
import { parseDateToStr } from '@/utils/date-utils';
import { FileType } from 'ant-design-vue/lib/upload/interface';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
@@ -131,10 +125,10 @@ function fnTableSelectedRowKeys(
// 选择的表单数据填充
const row = selectedRows[0];
installState.from.neType = row.neType;
installState.from.fileName = row.fileName;
installState.from.name = row.name;
installState.from.path = row.path;
installState.from.version = row.version;
installState.from.comment = row.comment;
installState.from.description = row.description;
}
/**查询列表, pageNum初始页数 */
@@ -164,8 +158,6 @@ type InstallStateType = {
setp: 'pkg' | 'preinput' | 'ssh';
/**安装步骤命令 */
setpSSHArr: string[];
/**安装步骤命令-当前执行 */
setpSSHIdx: number;
/**主机ID */
hostId: string;
/**文件操作类型 上传 or 选择 */
@@ -174,34 +166,41 @@ type InstallStateType = {
from: {
/**网元类型 */
neType: string;
fileName: string;
name: string;
path: string;
version: string;
/**备注 */
comment: string;
description: string;
};
/**确定按钮 loading */
confirmLoading: boolean;
/**上传文件 */
uploadFiles: any[];
/**预输入 */
preinput: Record<string, any>;
};
/**安装对象信息状态 */
let installState: InstallStateType = reactive({
setp: 'pkg',
setpSSHArr: [],
setpSSHIdx: 0,
hostId: '',
optionType: 'upload',
from: {
neType: '',
fileName: '',
name: '',
path: '',
version: '',
comment: '',
description: '',
},
confirmLoading: false,
uploadFiles: [],
preinput: {
// IMS
pubIP: '192.168.5.57',
mcc: '001',
mnc: '01',
priIP: '172.16.16.51',
},
});
/**
@@ -219,10 +218,10 @@ function fnNeTypeChange(v: any) {
*/
function fnOptionTypeChange() {
if (installState.optionType === 'upload') {
installState.from.fileName = '';
installState.from.name = '';
installState.from.path = '';
installState.from.version = '';
installState.from.comment = '';
installState.from.description = '';
}
if (installState.optionType === 'option') {
tableState.queryParams.neType = installState.from.neType;
@@ -304,7 +303,7 @@ function fnUploadFile(up: UploadRequestOption) {
file.status = 'done';
// 预置到表单
const { fileName, originalFileName } = res.data;
installState.from.fileName = originalFileName;
installState.from.name = originalFileName;
installState.from.path = fileName;
} else {
message.error(res.msg, 3);
@@ -316,63 +315,29 @@ function fnUploadFile(up: UploadRequestOption) {
});
}
/**软件包上传安装 */
function fnInstallUpload() {
/**软件包运行检查 */
function fnRunCheck() {
if (installState.confirmLoading) return;
const form = toRaw(installState.from);
const hide = message.loading(t('common.loading'), 0);
installStateFrom
.validate()
.then(() => {
const form = toRaw(installState.from);
Object.assign(form, { hostId: installState.hostId });
installState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
// 新增软件包
addNeSoftware(form)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
// 安装网元
Object.assign(form, { hostId: installState.hostId });
return installCheckNeSoftware(form);
} else {
message.error(res.msg, 3);
}
})
.then(res => {
if (!res) return;
if (res.code === RESULT_CODE_SUCCESS) {
installState.setpSSHArr = res.data;
installState.setpSSHIdx = 0;
installState.setp = 'ssh';
} else {
message.error(res.msg, 3);
}
})
.finally(() => {
hide();
installState.confirmLoading = false;
});
return checkInstallNeSoftware(form);
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
});
}
/**软件包选择安装 */
function fnInstallOptions() {
if (installState.confirmLoading) return;
const form = toRaw(installState.from);
Object.assign(form, { hostId: installState.hostId });
installState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
installCheckNeSoftware(form)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
installState.setpSSHArr = res.data;
installState.setpSSHIdx = 0;
installState.setp = 'preinput';
} else {
message.error(res.msg, 3);
}
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
})
.finally(() => {
hide();
installState.confirmLoading = false;
@@ -385,13 +350,23 @@ function fnInstallPreinput() {
// IMS
if (installState.from.neType === 'IMS') {
const modipplmn = installState.setpSSHArr[1];
modipplmn.replace('{PUBIP}', '192.168.5.57');
modipplmn.replace('{MCC}', '001');
modipplmn.replace('{MNC}', '01');
if (modipplmn.includes('modipplmn.sh')) {
installState.setpSSHArr[1] = modipplmn
.replace('{PUBIP}', installState.preinput.pubIP)
.replace('{MCC}', installState.preinput.mcc)
.replace('{MNC}', installState.preinput.mnc);
}
const modintraip = installState.setpSSHArr[2];
modintraip.replace('{PRIIP}', '192.168.5.57');
if (modintraip.includes('modintraip.sh')) {
installState.setpSSHArr[2] = modintraip.replace(
'{PRIIP}',
installState.preinput.priIP
);
}
}
installState.setpSSHIdx = 0;
// 其他
//
installState.setp = 'ssh';
}
@@ -436,17 +411,16 @@ function fnTerminalMessage(res: Record<string, any>) {
// IMS预输入
if (data.includes('(P/I/S-CSCF Config)? <y/n>')) {
installTerminal.value.send('y');
installTerminal.value.send(installState.preinput.pisCSCF);
return;
}
// 命令结束后继续输入命令
if (data.endsWith('$ ')) {
console.log('结束');
const cmdStr = installState.setpSSHArr[installState.setpSSHIdx];
const cmdStr = installState.setpSSHArr.shift();
if (cmdStr) {
installTerminal.value.send(cmdStr);
installState.setpSSHIdx += 1;
}
return;
}
@@ -462,14 +436,13 @@ function fnTerminalClose(data: Record<string, any>) {
/**终端重新安装 */
function fnTerminalReset() {
installState.setpSSHIdx = 0;
installState.setp = 'pkg';
installState.optionType = 'option';
}
onMounted(() => {
// 读取上一步的网元信息
const stepPrevFrom = stepState.states[stepState.current - 1].from;
// 读取步骤：网元信息
const stepPrevFrom = stepState.states[1].from;
installState.from.neType = stepPrevFrom.neType;
installState.hostId = stepPrevFrom.hostIds.split(',')[0];
});
@@ -546,7 +519,7 @@ onMounted(() => {
v-bind="installStateFrom.validateInfos.comment"
>
<a-textarea
v-model:value="installState.from.comment"
v-model:value="installState.from.description"
:auto-size="{ minRows: 1, maxRows: 4 }"
:maxlength="500"
:show-count="true"
@@ -620,21 +593,10 @@ onMounted(() => {
</template>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<template v-if="installState.optionType === 'upload'">
<a-button
type="primary"
html-type="submit"
@click="fnInstallUpload()"
:loading="installState.confirmLoading"
>
安装检查
</a-button>
</template>
<a-button
v-if="installState.optionType === 'option'"
type="primary"
html-type="submit"
@click="fnInstallOptions()"
@click="fnRunCheck()"
:loading="installState.confirmLoading"
>
安装检查
@@ -654,6 +616,45 @@ onMounted(() => {
<div style="align-items: center">-----</div>
</a-form-item>
<!-- IMS 预输入 -->
<template v-if="installState.from.neType === 'IMS'">
<a-form-item label="P/I/S-CSCF Config" name="pisCSCF">
<a-input
v-model:value="installState.preinput.pisCSCF"
allow-clear
placeholder="P/I/S-CSCF Config"
></a-input>
</a-form-item>
<a-form-item label="modipplmn IP" name="pubIP">
<a-input
v-model:value="installState.preinput.pubIP"
allow-clear
placeholder="IMS modipplmn IP"
></a-input>
</a-form-item>
<a-form-item label="modipplmn mcc" name="mcc">
<a-input
v-model:value="installState.preinput.mcc"
allow-clear
placeholder="IMS modipplmn mcc"
></a-input>
</a-form-item>
<a-form-item label="modipplmn mnc" name="mnc">
<a-input
v-model:value="installState.preinput.mnc"
allow-clear
placeholder="IMS modipplmn mnc"
></a-input>
</a-form-item>
<a-form-item label="modintraip priIP" name="priIP">
<a-input
v-model:value="installState.preinput.priIP"
allow-clear
placeholder="IMS modintraip priIP"
></a-input>
</a-form-item>
</template>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<a-button
type="primary"

19
src/views/tool/neQuickSetup/components/StepNeInfo.vue
View File

@@ -203,24 +203,15 @@ function fnNeInfo() {
}
onMounted(() => {
// 读取上一步的主机信息
const statePerv = stepState.states[stepState.current - 1];
modalState.from.ip = statePerv.from.addr;
Object.assign(modalState.from.hosts[0], statePerv.from);
// 读取步骤：环境检查
const stepPrevFrom = stepState.states[0].from;
modalState.from.ip = stepPrevFrom.addr;
Object.assign(modalState.from.hosts[0], stepPrevFrom);
Object.assign(modalState.from.hosts[1], {
addr: modalState.from.ip,
addr: stepPrevFrom.addr,
user: 'admin',
password: 'admin',
});
// 状态还原
const state = stepState.states[stepState.current];
if (state) {
if (state.from) {
const from = toRaw(state.from);
Object.assign(modalState.from, from);
}
}
});
</script>

2
src/views/tool/neQuickSetup/index.vue
View File

@@ -33,7 +33,7 @@ import { stepState, fnStepPrev, fnStepNext } from './hooks/useStep';
<template #title>
<div>
{{ stepState.steps[stepState.current].title }}
Check, Install, Config, Activate, Finish
Check, NeInfo, Install, Config, Activate, Finish
</div>
</template>