TRKJ/profitManage1.2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

欢迎页和MTRAgent管理模块功能

Browse Source 
1、欢迎页布局和展示效果优化
2、MTRAgent管理模块
This commit is contained in:
康冉冉
2025-11-20 18:51:10 +08:00
parent 550bcc4685
commit 2d12879bab
6 changed files with 555 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/headerBg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

src/assets/images/itemBgc.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 313 KiB

src/router/index.js
+15
View File
@@ -748,6 +748,21 @@ export const dynamicRoutes = [
}
]
},
// mtrAgent管理
{
path: '/resource/mtrAgent/view',
component: Layout,
hidden: true,
permissions: ['resource:mtrAgent:view'],
children: [
{
path: ':id?',
component: () => import('@/views/resource/mtrAgent/mtrAgentView'),
name: 'remoteManageView',
meta: { title: 'MTRAgent信息', activeMenu: '/resource/mtrAgent' }
}
]
},
// agent更新
{
path: '/resource/agentUpdate/view',
src/views/resource/mtrAgent/mtrAgent.vue
+284
View File
@@ -0,0 +1,284 @@
<template>
<div class="app-container pageTopForm">
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="auto">
<el-col :span="6">
<el-form-item label="搜索" title="搜索" prop="queryParam">
<el-input
v-model="queryParams.queryParam"
placeholder="请输入MTRClientID/ClientID"
clearable
@keyup.enter.native="handleQuery"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="在线状态" title="在线状态" prop="onlineStatus">
<el-select
v-model="queryParams.onlineStatus"
placeholder="请选择在线状态"
clearable>
<el-option
v-for="dict in dict.type.rm_register_online_state"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="注册状态" title="注册状态" prop="registrationStatus">
<el-select
v-model="queryParams.registrationStatus"
placeholder="请选择注册状态"
clearable>
<el-option
v-for="dict in dict.type.rm_register_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标识" title="标识" prop="logicalNodeId">
<el-select
v-model="queryParams.logicalNodeId"
placeholder="请选择标识"
clearable>
<el-option
v-for="item in logicalNodeList"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="lastBtnSty">
<el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
</el-form>
<!-- 表格数据 -->
<TableList :columns="columns" :config="config" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<template #tempCopy="{ row, column}">
{{row.clientId}}<el-link :underline="false" icon="el-icon-document-copy" title="复制" v-clipboard:copy="row.clientId" v-clipboard:success="clipboardSuccess" style="margin-left: 10px;color: #409EFF;"></el-link>
</template>
<!-- 更新方式 -->
<template #tempMethod="{ row, column }">
<dict-tag :options="dict.type.policy_method" :value="row.method"/>
</template>
<!-- 多公网IP状态 -->
<template #tempMultipubStatus="{ row, column }">
<dict-tag :options="dict.type.rm_moreip_status" :value="row.multiPublicIpStatus"/>
</template>
<!-- 注册状态 -->
<template #tempStatus="{ row, column }">
<dict-tag :options="dict.type.rm_register_status" :value="row.registrationStatus"/>
</template>
<!-- 在线状态 -->
<template #tempOnlineStatus="{ row, column }">
<dict-tag :options="dict.type.rm_register_online_state" :value="row.onlineStatus"/>
</template>
</TableList>
<!-- 选择公网业务IP -->
<el-dialog title="配置更新策略" :visible.sync="viewOpen" width="800px" append-to-body style="padding-bottom: 20px;">
<mtrAgentView :open="`type_${viewOpen}`" :dialogRowData="dialogRowData" @dialogResult="fnDialogResult"></mtrAgentView>
</el-dialog>
</div>
</template>
<script setup name="Register">
import Form from '@/components/form/index.vue';
import {listHandle, networkList, getScriptResultBySn, getLogicalNode} from '@/api/disRevenue/resource';
import {listAllBusinessList} from "@/api/disRevenue/earnManage"
import TableList from '@/components/table/index.vue';
import mtrAgentView from './mtrAgentView';
export default {
name: 'mtrAgent',
components: {TableList,Form, mtrAgentView},
dicts: ['rm_moreip_status', 'rm_register_status', 'rm_register_online_state', 'policy_method'],
data() {
return {
roleList: [],
busNameList: [],
loading: true,
showSearch: true,
ids: [],
single: true,
meltiple: true,
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
mtrClientId: { label: `MTRClientID`, minWidth: '320', visible: true},
remarks:{ label: `描述`,minWidth: '90'},
machineCode:{ label: `版本`,minWidth: '160', visible: true},
registrationStatus: { label: `注册状态`, slotName: 'tempStatus', minWidth: '80', visible: true },
createTime:{ label: `注册时间`,minWidth: '160'},
logicalNodeId: { label: `标识`, minWidth: '120', visible: true},
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '100', visible: true },
heartbeatInterval: { label: `心跳时间间隔`, minWidth: '100'},
heartbeatCount: { label: `心跳次数`, minWidth: '80'},
businessName: { label: `网卡信息`, minWidth: '100'},
method: { label: `更新方式`,minWidth: '80', slotName: 'tempMethod'},
scheduledUpdateTime: { label: `定时更新时间`,minWidth: '160'},
fileUrl: { label: `文件地址`,minWidth: '200'},
fileMd5: {label: '文件MD5', minWidth: '200'},
lastUpdateResult: { label: `最后一次更新结果`,minWidth: '140', slotName: 'tempResult'},
lastUpdateTime: { label: `最后一次更新时间`,minWidth: '160'},
},
config: {
tableButton: {
top: [
{content: '配置更新策略', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:mtrAgent:add'},
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:mtrAgent:export'},
],
line: [
{content: '查看丢包率趋势', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'resource:mtrAgent:graphicAnalysis'},
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:mtrAgent:details'},
{title: '更多', more: [
{content: '配置更新策略', fnCode: 'edit', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:mtrAgent:edit'},
{content: '新建MTR探测策略', fnCode: 'addMtrDetect', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:mtrAgent:addMtrDetect'},
]
}
]
}
},
queryParams: {
pageNum: 1,
pageSize: 10,
total: 0
},
title: '',
formList: [],
ruleForm: {},
viewOpen: false,
dialogRowData: {},
logicalNodeList: [],
}
},
created() {
this.getList();
this.fnBusNameList();
this.fnLogicalNode();
},
activated() {
this.$nextTick(() => {
this.getList();
});
},
methods: {
fnBusNameList() {
listAllBusinessList().then(val => {
this.busNameList = val && val.data.map(item => {
return Object.assign({label: item.businessName, value: item.businessName});
});
});
},
fnLogicalNode() {
getLogicalNode().then(val => {
this.logicalNodeList = val && val.map(item => {
return Object.assign({label: item.logicalNodeId, value: item.logicalNodeId});
});
});
},
// 处理子组件传递的新值
handleValueChange(newValue) {
// 父组件更新自身数据，实现同步
this.showSearch = newValue;
// console.log('父组件拿到新值:', newValue);
},
/** 查询角色列表 */
getList() {
let params = JSON.parse(JSON.stringify(this.queryParams));
if (params && !params.queryParam) {
params.queryParam = null;
}
this.loading = true;
listHandle(this.addDateRange(params)).then(response => {
this.roleList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.$refs['queryRef'].resetFields();
this.queryParams = {pageNum: 1, pageSize: 10,total: 0};
// this.resetForm("queryRef");
this.handleQuery();
},
/** 多选框选中数据 */
handleSelectionChange(selection) {
this.ids = selection.map(item => item.roleId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
/** 复制代码成功 */
clipboardSuccess() {
this.$modal.msgSuccess("复制成功")
},
fnDialogResult(res){
this.viewOpen = false;
},
callback(result, rowData, selectChange, selectList) {
this.dialogRowData = {};
if (result && result.fnCode) {
switch (result.fnCode) {
case 'add':
this.viewOpen = true;
break;
case 'edit':
this.viewOpen = true;
this.dialogRowData = rowData;
break;
case 'details':
this.$router.push({
path:'/resource/mtrAgent/view',
query: {id: rowData.id, readonly: true}
});
break;
case 'echartView':
this.$router.push({
path:'/resource/serverRegister/monitorChart',
query: {clientId: rowData.clientId}
});
break;
case 'export':
// let dataList = [];
// Object.keys(this.columns).forEach(item => {
// if (item.visible) {
// dataList.push(item.prop);
// }
// });
// this.download("/system/registration/export", {properties: dataList,}, `资源管理_${new Date().getTime()}.xlsx`);
let paramsList = Object.assign({}, this.queryParams,rowData);
this.download("system/registration/export", paramsList, `服务器管理_${new Date().getTime()}.xlsx`, null, 'json');
break;
default:
}
}
},
}
}
</script>
<style scoped>
::v-deep .lastBtnSty .el-form-item__content{
margin-left: 10px!important;
}
::v-deep .el-dialog__body {
padding: 0 0 10px!important;
}
</style>
src/views/resource/mtrAgent/mtrAgentView.vue
+173
View File
@@ -0,0 +1,173 @@
<template>
<div class="app-container">
<Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" :config="config" @fnClick="callback"></Form>
</div>
</template>
<script setup name="Handle">
import Form from '@/components/form/index.vue';
import {addAgentManage, getAgentManage, updateAgentManage, getRegistList} from "@/api/disRevenue/resource"
export default {
name: 'mtrAgentView',
components: {Form},
dicts: ['policy_method', 'rm_register_online_state', 'agent_update_result', 'rm_register_status'],
props: {
open: {
type: String,
default: () => {}
},
dialogRowData: {
type: Object,
default: (() => {})
}
},
watch: {
open: {
handler(val) {
if (val === 'type_true') {
this.paramsData = {};
// this.$set(this.ruleForm, 'deployDevice', this.dialogRowData.mtrClientId);
} else if (val === 'type_false') {
// 清空form
this.$refs['formRef'].$refs.ruleForm.resetFields();
}
},
deep: true,
immediate: true
},
},
data() {
return {
ruleForm: {},
formList: [],
paramsData: {},
config: {},
includeList: {}
}
},
created() {
this.paramsData = this.$route && this.$route.query;
if (this.open) {
this.paramsData = {};
// this.$set(this.ruleFormData, 'deployDevice', this.dialogRowData.mtrClientId);
}
if (this.paramsData && this.paramsData.id) {
this.getFormDataList(this.paramsData.id);
} else {
this.fnFormList();
// this.getResNameList();
}
if (this.paramsData && this.paramsData.readonly) {
this.config = {
buttonGroup: [{title: '返回', fnCode: 'goBack'}]
};
}
},
methods: {
// formList集合
fnFormList(objVal) {
console.log('ddd')
this.formList = [{
config: {title: ' ', colSpan: '', readonly: this.paramsData.readonly},
controls: {
id: {label: 'ID',hidden: true},
mtrClientId: {label: 'MTRClientID', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
agentVersion: {label: '版本', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
type: {label: '标识', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
createTime: {label: '注册时间', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
registrationStatus: {label: '注册状态', span: 12, type: 'select', options: this.dict.type.rm_register_status, hidden: this.paramsData && this.paramsData.readonly ? false : true},
onlineStatus: {label: '在线状态', span: 12, type: 'select', options: this.dict.type.rm_register_online_state, hidden: this.paramsData && this.paramsData.readonly ? false : true},
heartbeatInterval: {label: '心跳时间间隔(s)', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
heartbeatCount: {label: '心跳次数', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
method: {label: '更新方式', span: 12, type: 'select', options: this.dict.type.policy_method, eventName: 'change', required: true},
scheduledUpdateTime: {label: '更新时间', span: 18, type: 'datetime', required: true, hidden: objVal && objVal.method === '1' ? false: true},
fileUrl: {label: '文件地址', span: 18, type: 'input', required: true, placeholder: '请输入外网地址', warningTitle: '如：http://www.tr.com/server-1.1.1.jar'},
fileMd5: {label: '文件MD5', span: 18, type: 'input', required: true},
deployDevice: {label: '部署设备', span: 18, type: 'textarea', rows:15, placeholder: '请粘贴/输入MTRClientID列表，如\nMTRClientID1\nMTRClientID2\n...', required: true, hidden: this.paramsData && this.paramsData.readonly ? true : false},
clientAllId: {label: '加载全部MTRClientID', span: 3, type: 'button', style: 'vertical-align: top', hidden: this.paramsData && this.paramsData.readonly ? true : this.paramsData && this.paramsData.id ? true : false},
lastUpdateResult: {label: '最后一次更新结果', span: 18, type: 'select', options: this.dict.type.agent_update_result, hidden: this.paramsData && this.paramsData.readonly ? false : true},
lastUpdateTime: {label: '最后一次更新时间', span: 18, type: 'datetime', hidden: this.paramsData && this.paramsData.readonly ? false : true},
includeIds: {label: '网卡信息', span: 24, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
managePublicIp: {label: '描述', span: 18, type: 'input', disabled: true, hidden: this.paramsData && this.paramsData.readonly ? false : true},
}
}];
},
// 获取详情
getFormDataList(id) {
getAgentManage(id).then(val => {
if (val && val.data) {
val.data['method'] = val.data && val.data['method'] || val.data['method'] === 0 ? val.data['method'].toString() : val.data['method'];
// val.data['fileUrlType'] = val.data['fileUrlType'].toString();
this.fnFormList(val.data);
this.ruleForm = val.data;
}
}).catch(() => {
// this.$modal.msgError("操作失败")
});
},
// // 包含设备
// getResNameList() {
// resNameList().then(val => {
// this.formList[0].controls['includeIds']['options']= val && val.map(item => {
// this.includeList[item.id] = item;
// return Object.assign({label: item.resourceName, key: item.id});
// });
// }).catch(() => {
// this.$modal.msgError("操作失败")
// });
// },
// 监听事件
callback(result, dataVal, formVal) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'method':
if (dataVal === '1') {
this.formList[0].controls.scheduledUpdateTime['hidden'] = false;
} else {
this.formList[0].controls.scheduledUpdateTime['hidden'] = true;
}
break;
case 'clientAllId':
this.$set(this.ruleForm, 'deployDevice', '');
getRegistList({resourceType: 1}).then(res => {
let str = '';
if (res && res.data) {
res && res.data.map(item => {
str+= item.clientId + '\n';
});
}
this.$set(this.ruleForm, 'deployDevice', str);
});
break;
case 'submit':
if (this.open) {
this.$emit("dialogResult", {open: false});
} else {
this.$router.push("/resource/mtrAgent")
}
// let fnType = addAgentManage;
// if (dataVal && dataVal.id) {
// fnType = updateAgentManage;
// }
// fnType(dataVal).then(response => {
// this.$modal.msgSuccess(response.msg);
// }).catch(() => {
// this.$modal.msgError("操作失败")
// });
break;
case 'cancel':
if (this.open) {
this.$emit("dialogResult", {open: false});
} else {
this.$router.push("/resource/mtrAgent")
}
break;
default:
}
}
}
}
}
</script>
<style>
</style>
src/views/welcome.vue
+83 -38
View File
@@ -14,14 +14,21 @@
<!-- </div>-->
<div class="welcome-container">
<div class="header-section textAlignCenter">
<div class="main-title">彤然科技-分布式SaaS收益管理平台</div>
<div class="welcome-text">欢迎您{{user.nickName}}：现在是{{newDateTime}}</div>
<div class="main-title" :style="{ backgroundImage: `url(${require('@/assets/images/headerBg.png')})`, height: '62px',backgroundSize: 'cover',backgroundRepeat: 'no-repeat',backgroundPosition: 'center', }">
<div style="margin-bottom: 13px;">分布式SaaS收益管理平台</div>
</div>
<div class="welcome-text">
<div class="animated-text class-method" :class="{ 'slide-in': showContent }" style="--animation-duration: 1200ms">
欢迎您{{user.nickName}}：现在是{{newDateTime}}
</div>
</div>
</div>
<div class="w100 plr-20">
<div class="w100 contentPad">
<div class="menu-container">
<div v-for="menuItem of menuList" @click="menuRouter(menuItem)" class="menu-item">
<div class="menu-item-content">{{menuItem.pageName}}</div>
<div v-for="menuItem of menuList" @click="menuRouter(menuItem)" class="menu-item" @mouseover="tranformType(menuItem)" :class="activeId === menuItem.id ? 'activeTranFormRotate' : '' "
:style="{backgroundImage: `url(${require('@/assets/images/itemBgc.png')})`,backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat',backgroundPosition: 'center'}">
<div class="menu-item-content" :class="activeId === menuItem.id ? 'textTranFormRotate' : ''">{{menuItem.pageName}}</div>
</div>
</div>
</div>
@@ -34,10 +41,12 @@
name: "welcome",
data() {
return {
showContent: false,
newDateTime: '',
getWeekday: {0: '星期日', 1: '星期一', 2: '星期二', 3: '星期三',4: '星期四', 5: '星期五', 6: '星期六'},
user: {},
menuList: []
menuList: [],
activeId: '',
}
},
created() {
@@ -54,6 +63,12 @@
let menu = this.$store.state.permission.sidebarRouters;
this.menuHandle(menu);
},
mounted() {
// 页面加载后自动触发动画
setTimeout(() => {
this.showContent = true;
}, 300);
},
methods: {
// 处理菜单
menuHandle(menu) {
@@ -84,7 +99,10 @@
this.$router.push({
path: menuLink.pageRoute
});
}
},
tranformType(val) {
this.activeId = val.id;
},
}
}
</script>
@@ -96,45 +114,49 @@
/*overflow: auto;*/
display: flex;
flex-direction: column;
padding: 20px;
/*padding: 20px;*/
margin-bottom: 20px;
}
/* 标题区域 */
.header-section {
margin-bottom: 30px;
margin-bottom: 6%;
}
.main-title {
font-size: 2.5rem;
color: #BFBF00;
font-size: 1.3rem;
color: #fff;
font-weight: 600;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
}
.welcome-text {
font-size: 1.5rem;
color: #666;
font-size: 1.2rem;
}
.contentPad {
padding: 0 20%;
}
/* 菜单区域 */
.menu-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* 改为左对齐 */
gap: 20px;
gap: 40px 20px;
/*max-width: 1200px;*/
margin: 0 auto;
}
.menu-item {
/*flex: 1 1 200px;*/
flex: 0 0 calc(20% - 16px); /* 固定宽度，确保每行显示5个 */
min-width: 200px;
height: 70px;
flex: 0 0 calc(25% - 16px); /* 固定宽度，确保每行显示5个 */
/*min-width: 150px;*/
height: 100px;
cursor: pointer;
transition: all 0.3s ease;
transition: none;
}
.menu-item-content {
@@ -143,27 +165,27 @@
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #02a7f099 0%, #0280c099 100%);
color: #fff;
/*background: linear-gradient(135deg, #02a7f099 0%, #0280c099 100%);*/
color: #000;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
/*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
padding: 10px;
text-align: center;
font-size: 1.1rem;
font-weight: 500;
transition: none;
}
.menu-item:hover .menu-item-content {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
background: linear-gradient(135deg, #0280c099 0%, #026aa099 100%);
/*transform: translateY(-5px);*/
/*box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);*/
/*background: linear-gradient(135deg, #0280c099 0%, #026aa099 100%);*/
}
/* 响应式设计 - 媒体查询 */
@media (max-width: 1200px) {
.main-title {
font-size: 2.2rem;
font-size: 1.2rem;
}
.welcome-text {
@@ -182,12 +204,8 @@
min-height: 100vh;
}
.pt50 {
padding-top: 30px;
}
.main-title {
font-size: 1.8rem;
font-size: 1.2rem;
}
.welcome-text {
@@ -195,11 +213,11 @@
}
.menu-container {
gap: 15px;
gap: 35px 15px;
}
.menu-item {
flex: 0 0 calc(33.333% - 10px); /* 平板每行3个 */
flex: 0 0 calc(25% - 12px); /* 平板每行4个 */
height: 60px;
}
@@ -213,20 +231,23 @@
padding: 10px;
}
.pt50 {
padding-top: 20px;
.contentPad {
padding: 0 10%;
}
.main-title {
font-size: 1.5rem;
font-size: 1.2rem;
}
.welcome-text {
font-size: 1rem;
}
.animated-text {
width: 100%!important;
}
.menu-container {
gap: 10px;
gap: 20px 10px;
justify-content: center; /* 小屏幕居中对齐 */
}
@@ -258,4 +279,28 @@
flex: 0 0 calc(16.666% - 17px); /* 大屏每行6个 */
}
}
/* 动画*/
.animated-text {
width: 550px;
position: relative;
}
/* 方法2: CSS类绑定样式 */
.class-method {
transform: translateX(-100%);
opacity: 0;
transition: all var(--animation-duration) linear;
}
.class-method.slide-in {
transform: translateX(0);
opacity: 1;
}
.activeTranFormRotate:hover {
transform: rotateY(180deg);
transition: transform 2s ease-in-out;
}
.textTranFormRotate:hover {
transform: rotateY(-180deg);
transition: transform 2s ease-in-out;
}
</style>