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

监控看板功能优化、优化并修改bug

Browse Source 
1、监控看板功能优化
2、修改列表展示条数
3、优化并修改bug
This commit is contained in:
康冉冉
2025-11-19 18:52:05 +08:00
parent f8864457e1
commit 550bcc4685
14 changed files with 341 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Pagination/index.vue
+1 -1
View File
@@ -36,7 +36,7 @@ export default {
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50]
return [8, 10, 20, 30, 50]
}
},
// 移动端页码按钮的数量端默认值5
src/components/echartsList/line.vue
+43
View File
@@ -191,9 +191,27 @@
show: true,
},
},
// 配置高亮状态下的样式
emphasis: dataXY && dataXY.highlight ? {
itemStyle: {
borderWidth: 2, // 边框加粗
shadowBlur: 5, // 添加阴影光晕
},
label: {
show: false, // 高亮时显示标签
}
} : {},
series: series
};
lineDataListIntance.setOption(option);
if (dataXY && dataXY.highlight) {
// 然后高亮当前点击的数据点
lineDataListIntance.dispatchAction({
type: 'highlight', // 高亮类型
seriesIndex: 0, // 系列索引，从点击事件参数中获取
dataIndex: 0 // 数据索引，从点击事件参数中获取
});
}
if (dataXY && dataXY.unitSelList && dataXY.unitSelList.length > 0) {
// 初始化图表后，调用方法定位下拉框
this.positionYAxisSelector(lineDataListIntance);
@@ -207,6 +225,31 @@
lineDataListIntance.off('click');
lineDataListIntance.on("click", function(params) {
that.$emit("chartClickModel", {params: params});
if (dataXY && dataXY.highlight) {
// 首先取消之前可能存在的高亮状态
lineDataListIntance.dispatchAction({
type: 'downplay' // 取消所有数据点的高亮
});
// 然后高亮当前点击的数据点
setTimeout(() => {
lineDataListIntance.dispatchAction({
type: 'highlight', // 高亮类型
seriesIndex: params.seriesIndex, // 系列索引，从点击事件参数中获取
dataIndex: params.dataIndex // 数据索引，从点击事件参数中获取
});
},1000);
}
});
// 2. 关键：拦截默认的鼠标移出事件，不做任何操作（即不取消高亮）
lineDataListIntance.on('mouseover', (params) => {
// 这个函数体为空，或者只包含一些不涉及downplay的逻辑
// 这样就阻止了鼠标移出时高亮自动消失
});
// 2. 关键：拦截默认的鼠标移出事件，不做任何操作（即不取消高亮）
lineDataListIntance.on('mouseout', (params) => {
// 这个函数体为空，或者只包含一些不涉及downplay的逻辑
// 这样就阻止了鼠标移出时高亮自动消失
});
},
positionYAxisSelector(chartInstance) {
src/utils/request.js
+1 -1
View File
@@ -17,7 +17,7 @@ const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 10000
timeout: 30000
})
// request拦截器
src/views/earnManage/busValueCount/busValueCount.vue
+1 -1
View File
@@ -97,7 +97,7 @@
},
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 8,
total: 0,
},
}
src/views/earnManage/busValueCount/index.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="app-container" style="height: calc(100vh - 85px);">
<el-tabs class="h100" v-model="activeName">
<el-tabs style="height: calc(100% - 35px);" v-model="activeName">
<el-tab-pane label="1000计算方式" name="1000">
<busValueCount v-if="activeName === '1000'" :activeName="activeName"></busValueCount>
</el-tab-pane>
@@ -37,6 +37,6 @@
::v-deep .el-tabs__content{
height: 100%;
overflow: auto;
padding-bottom: 40px;
padding-bottom: 10px;
}
</style>
src/views/earnManage/businessIdent/businessIdent.vue
+1 -1
View File
@@ -23,7 +23,7 @@
<!-- 非编辑状态：显示文本 -->
<template v-if="!row.editStatus">
<span>{{ row.businessName }}</span>
<el-button icon="el-icon-edit" type="text" @click="rowDataChange(row)"></el-button>
<el-button icon="el-icon-edit" style="padding: 0px;" type="text" @click="rowDataChange(row)"></el-button>
</template>
<template v-else>
<!-- 编辑状态：显示输入框 -->
src/views/earnManage/server/index.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="app-container" style="height: calc(100vh - 85px);">
<el-tabs class="h100" v-model="activeName">
<el-tabs style="height: calc(100% - 35px);" v-model="activeName">
<el-tab-pane label="1000计算方式" name="1000">
<ServerTabs v-if="activeName === '1000'" :activeName="activeName"></ServerTabs>
</el-tab-pane>
@@ -37,6 +37,6 @@
::v-deep .el-tabs__content{
height: 100%;
overflow: auto;
padding-bottom: 40px;
padding-bottom: 10px;
}
</style>
src/views/earnManage/server/serverTabs.vue
+1 -1
View File
@@ -209,7 +209,7 @@
},
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 8,
total: 0,
bandwidthType: undefined,
hardwareSn: undefined,
src/views/earnManage/switch/index.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="app-container" style="height: calc(100vh - 85px);">
<el-tabs class="h100" v-model="activeName">
<el-tabs style="height: calc(100% - 35px);" v-model="activeName">
<el-tab-pane label="1000计算方式" name="1000">
<SwitchTabs v-if="activeName === '1000'" :activeName="activeName"></SwitchTabs>
</el-tab-pane>
@@ -37,6 +37,6 @@
::v-deep .el-tabs__content{
height: 100%;
overflow: auto;
padding-bottom: 40px;
padding-bottom: 10px;
}
</style>
src/views/earnManage/switch/switchTabs.vue
+1 -1
View File
@@ -252,7 +252,7 @@
},
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 8,
total: 0,
uplinkSwitch:undefined,
interfaceName:undefined,
src/views/resource/monitorBoard/dialogMonitor.vue
+1 -1
View File
@@ -58,7 +58,7 @@
id: {label: 'ID',hidden: true},
configName: {label: '配置名称', span: 18, type: 'input', required: true},
monitorStartTime: {label: '监控数据开始时间', span: 18, type: 'datetime', disabled: this.ruleFormData && this.ruleFormData.id ? true : false, required: true},
resourceType: {label: '资源类型', span: 18, type: 'select', eventName: 'change', options: this.dict.type.resource_type, disabled: this.ruleFormData && this.ruleFormData.id ? true : false},
resourceType: {label: '资源类型', span: 18, type: 'select', eventName: 'change', required: true, options: this.dict.type.resource_type, disabled: this.ruleFormData && this.ruleFormData.id ? true : false},
deployDevice: {label: '包含资源', span: 18, type: 'textarea', rows: 10, required: true, hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '1' ? false : true},
deployDeviceSwitch: {label: '包含资源', span: 18, type: 'cascader', options: [], hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '2' ? false : true},
businessName: {label: '包含业务', span: 18, type: 'select', options: [], disabled: this.ruleFormData && this.ruleFormData.id ? true : false, hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '3' ? false : true},
src/views/resource/monitorBoard/monitorBoard.vue
+56 -11
View File
@@ -1,16 +1,19 @@
<template>
<div class="app-container">
<template v-if="activeType === '1'">
<div class="w100" style="height: 60px;">
<div class="fr" style="text-align: right;">
<el-date-picker
v-model="datetimeModel"
style="width: 360px!important;margin-right: 10px;"
type="datetimerange"
unlink-panels
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期时间"
end-placeholder="结束日期时间"
:default-time="['00:00:00', '23:59:59']"
@change="dateChange">
</el-date-picker>
<el-select v-model="timeModel" placeholder="请选择" style="width: 100px;margin-right: 10px;" @change="fnTimeInter">
@@ -21,7 +24,8 @@
:value="item.value">
</el-option>
</el-select>
<el-button @click="viewMonitorChart">详情视图</el-button>
<el-button :type="activeType === '1' ? 'primary' : ''" @click="viewMonitorChart('1')">概览视图</el-button>
<el-button :type="activeType === '2' ? 'primary' : ''" @click="viewMonitorChart('2')">详情视图</el-button>
</div>
</div>
<div style="height: calc(100% - 60px);" class="w100">
@@ -56,16 +60,35 @@
<el-dialog title="添加配置" :visible.sync="open" width="800px" append-to-body>
<dialogMonitor :formModel="formModel" @dialogResult="fnDialogResult"></dialogMonitor>
</el-dialog>
</template>
<template v-else>
<monitorBoardView :timeModelOne="timeModel" :datetimeModelOne="datetimeModel" :activeType="activeType" @activeTypeChange="fnActiveTypeChange"></monitorBoardView>
</template>
</div>
</template>
<script>
import dialogMonitor from './dialogMonitor';
import monitorBoardView from './monitorBoardView';
import EchartsLine from "@/components/echartsList/line.vue";
import {monitorViewChart, delMonitorConfig} from "@/api/disRevenue/resource";
export default {
name: "monitorBoard",
components: {dialogMonitor, EchartsLine},
name: "monitor-board",
components: {dialogMonitor,monitorBoardView, EchartsLine},
props: {
timeModelDefault: {
type: String,
default: '30000'
},
datetimeModelDefault: {
type: Array,
default: () => []
},
activeTypeDefault: {
type: String,
default: '1'
}
},
data() {
return {
formModel: {},
@@ -74,6 +97,7 @@
timeModel: '30000',
timeInterModel: null,
open: false,
activeType: '1',
timeModelOptions: [
{value: '30000', label: '30s刷新'},
{value: '10000', label: '10s刷新'},
@@ -106,8 +130,8 @@
const prevDay = String(new Date().getDate() - 1).padStart(2, '0');
startData = `${year}-${month}-${prevDay} 00:00:00`;
endData = `${year}-${month}-${day} 23:59:59`;
this.currTimeList = {startTime: startData, endTime: endData};
this.datetimeModel = [startData, endData];
this.currTimeList = this.datetimeModelDefault && this.datetimeModelDefault.length > 0 ? {startTime: this.datetimeModelDefault[0], endTime: this.datetimeModelDefault[1]} : {startTime: startData, endTime: endData};
this.datetimeModel = this.datetimeModelDefault && this.datetimeModelDefault.length > 0 ? this.datetimeModelDefault : [startData, endData];
this.fnChartView({});
},
beforeDestroy() {
@@ -117,6 +141,7 @@
methods: {
// 查询流量图
fnChartView(unitVal,keyName) {
this.$modal.loading();
monitorViewChart(Object.assign({}, this.currTimeList, unitVal)).then(res => {
let dataList = {};
res && res.data.forEach(item => {
@@ -128,6 +153,16 @@
chart.unitSelList = [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}];
}
chart.lineXData = item && item.xData || [];
if (item && item.yData && item.yData.netInSpeedData) {
if (!item.yData.netInSpeedData.some(item => item && typeof Number(item) === 'number' && !isNaN(item))) {
item.yData.netInSpeedData[0] = '0';
}
}
if (item && item.yData && item.yData.netOutSpeedData) {
if (!item.yData.netOutSpeedData.some(item => item && typeof Number(item) === 'number' && !isNaN(item))) {
item.yData.netOutSpeedData[0] = '0';
}
}
chart.dataList[0].data = item && item.yData && item.yData.netInSpeedData || [];
chart.dataList[1].data = item && item.yData && item.yData.netOutSpeedData || [];
dataList[modelVal.configName + '_' + modelVal.id]['echartList'] = chart;
@@ -143,9 +178,11 @@
};
}
}
this.$modal.closeLoading();
// 循环定时查询
this.fnTimeInter(this.timeModel);
}).catch(() => {
this.$modal.closeLoading();
// 循环定时查询
this.fnTimeInter(this.timeModel);
});
@@ -159,9 +196,11 @@
fnTimeInter(val) {
clearInterval(this.timeInterModel);
this.timeInterModel = null;
if (val !== '0') {
this.timeInterModel = setInterval(() => {
this.fnChartView();
}, Number(val));
}
},
addMonitor() {
this.open = true;
@@ -179,12 +218,18 @@
}
this.open = false;
},
// 详细视图
viewMonitorChart() {
this.$router.push({
path: '/resource/monitorBoard/view',
query: {}
});
// 右上角点击详细视图
viewMonitorChart(val) {
this.activeType = val;
clearInterval(this.timeInterModel);
this.timeInterModel = null;
},
// 子页面点击切换返回该页面
fnActiveTypeChange(val) {
this.timeModel = val && val.timeModel;
this.activeType = val && val.activeType;
this.datetimeModel = val && val.datetimeModel;
this.fnChartView({});
},
// 右侧点击下拉按钮
handleCommand(val, chartKey, chartVal) {
src/views/resource/monitorBoard/monitorBoardView.vue
+75 -13
View File
@@ -1,5 +1,5 @@
<template>
<div class="app-container">
<div :class="datetimeModelOne && datetimeModelOne.length > 0 ? 'h100' : 'app-container'">
<div class="w100" style="height: 60px;">
<div class="fl" style="text-align: left;">
<el-select v-model="configModel" placeholder="请选择配置" style="margin-right: 10px;" @change="selectValChange">
@@ -19,11 +19,13 @@
v-model="datetimeModel"
style="width: 360px!important;margin-right: 10px;"
type="datetimerange"
unlink-panels
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期时间"
end-placeholder="结束日期时间"
:default-time="['00:00:00', '23:59:59']"
@change="dateChange">
</el-date-picker>
<el-select v-model="timeModel" placeholder="请选择" style="width: 100px;margin-right: 10px;" @change="fnTimeInter">
@@ -34,7 +36,8 @@
:value="item.value">
</el-option>
</el-select>
<el-button @click="viewMonitorChart">概览视图</el-button>
<el-button :type="activeType === '1' ? 'primary' : ''" @click="viewMonitorChart('1')">概览视图</el-button>
<el-button :type="activeType === '2' ? 'primary' : ''" @click="viewMonitorChart('2')">详情视图</el-button>
</div>
</div>
<div style="height: calc(100% - 60px);" class="w100">
@@ -66,6 +69,20 @@
export default {
name: "monitorBoardView",
components: {dialogMonitor, EchartsLine, TableList},
props: {
timeModelOne: {
type: String,
default: '30000'
},
datetimeModelOne: {
type: Array,
default: () => []
},
activeTypeOne: {
type: String,
default: '2'
}
},
data() {
return {
paramsData: {},
@@ -76,6 +93,7 @@
datetimeModel: [],
timeModel: '30000',
timeInterModel: null,
activeType: '2',
open: false,
timeModelOptions: [
{value: '30000', label: '30s刷新'},
@@ -86,6 +104,7 @@
title: ' ',
yAxisName: ' ',
unitModel: 'Kb',
highlight: true,
unitSelList: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}],
legend: {bottom: '0%'},
gridTop: '40px',
@@ -111,6 +130,7 @@
}
},
created() {
this.activeType = this.activeTypeOne;
this.paramsData = this.$route && this.$route.query;
this.configModel = this.paramsData && this.paramsData.id ? Number(this.paramsData.id) : '';
let startData = '';
@@ -121,9 +141,9 @@
const prevDay = String(new Date().getDate() - 1).padStart(2, '0');
startData = `${year}-${month}-${prevDay} 00:00:00`;
endData = `${year}-${month}-${day} 23:59:59`;
this.currTimeList = {startTime: startData, endTime: endData};
this.datetimeModel = [startData, endData];
this.lineDataParams['one'] = this.echartData;
this.currTimeList = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? {startTime: this.datetimeModelOne[0], endTime: this.datetimeModelOne[1]} : {startTime: startData, endTime: endData};
this.datetimeModel = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? this.datetimeModelOne : [startData, endData];
this.timeModel = this.timeModelOne;
this.fnConfigName();
if (this.configModel) {
this.fnChartView();
@@ -139,10 +159,10 @@
this.lineDataParams = {};
monitorViewChart(Object.assign(unitData || {},this.currTimeList, {monitorId: this.configModel})).then(res => {
let dataList = {};
let searchListData = {};
res && res.data.forEach(item => {
let chart = JSON.parse(JSON.stringify(this.echartData));
let modelVal = item && item.rmMonitorConfig || {id: 'one', configName: 'one'};
modelVal['deployDevice'] = modelVal.resourceType === '3' ? [] : item && item.yData && item.yData.deployDevice || [];
this.reserveForm = modelVal;
this.columns = {};
this.config = {};
@@ -153,8 +173,29 @@
chart.unitSelList = [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}];
}
chart.lineXData = item && item.xData || [];
chart.dataList[0].data = item && item.yData && item.yData.netInSpeedData || [];
chart.dataList[1].data = item && item.yData && item.yData.netOutSpeedData || [];
let netInSpeedData = [];
let netOutSpeedData = [];
if (item && item.yData && item.yData.netInSpeedData) {
if (!item.yData.netInSpeedData.some(item => item && typeof Number(item) === 'number' && !isNaN(item))) {
item.yData.netInSpeedData[0] = '0';
}
}
if (item && item.yData && item.yData.netOutSpeedData) {
if (!item.yData.netOutSpeedData.some(item => item && typeof Number(item) === 'number' && !isNaN(item))) {
item.yData.netOutSpeedData[0] = '0';
}
}
if (item && item.yData && item.yData.deployDevice && item.yData.deployDevice.length > 0) {
item && item.yData && item.yData.netInSpeedData.map((valData,index) => {
netInSpeedData.push({value: valData, clientId: item.yData['deployDevice'][index] || null});
});
item && item.yData && item.yData.netOutSpeedData.map((valData,index) => {
netOutSpeedData.push({value: valData, clientId: item.yData['deployDevice'][index] || null});
});
}
searchListData = {content: netInSpeedData && netInSpeedData[0], name: item && item.xData[0]};
chart.dataList[0].data = netInSpeedData || [];
chart.dataList[1].data = netOutSpeedData || [];
dataList[modelVal.configName + '_' + modelVal.id] = chart;
});
if (dataList && Object.keys(dataList).length > 0) {
@@ -162,6 +203,10 @@
} else {
this.lineDataParams['one'] = this.echartData;
}
this.roleList = [];
this.queryParams.total = 0;
// // 默认展示第一个点的数据
this.chartClickModel({params: {value: searchListData.content.value, name: searchListData.name, data: {clientId: searchListData.content.clientId}}});
// 循环定时查询
this.fnTimeInter(this.timeModel);
}).catch(() => {
@@ -219,9 +264,11 @@
fnTimeInter(val) {
clearInterval(this.timeInterModel);
this.timeInterModel = null;
if (val !== '0') {
this.timeInterModel = setInterval(() => {
this.fnChartView();
}, Number(val));
}
},
// 按钮操作弹窗
fnFormHandle(val) {
@@ -267,29 +314,44 @@
this.fnChartView();
},
// 详细视图
viewMonitorChart() {
viewMonitorChart(val) {
this.activeType = val;
if (val && val === '1') {
if (this.paramsData && this.paramsData.id) {
this.$router.push({
path: '/resource/monitorBoard',
});
} else {
this.$emit("activeTypeChange", {activeType: val, timeModel: this.timeModel, datetimeModel: this.datetimeModel});
}
}
},
// 点击图表
chartClickModel(chart) {
let paramsModel = {clientIds: this.reserveForm.deployDevice.toString(), startTime: chart.params.name, endTime: chart.params.name};
if (Number(chart.params.value) !== 0) {
let paramsModel = {clientIds: chart.params.data.clientId, startTime: chart.params.name, endTime: chart.params.name};
this.getList(paramsModel);
}
},
getList(val) {
if (this.reserveForm && (this.reserveForm.resourceType === '1' || this.reserveForm.resourceType === '3')) {
this.$modal.loading();
getBandWidthList(Object.assign({}, this.queryParams, val)).then(response => {
this.roleList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
});
} else if (this.reserveForm.resourceType === '2') {
this.$modal.loading();
getSwitchInfoList(Object.assign({}, this.queryParams, val)).then(response => {
this.roleList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
})
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
});
}
},
chartDataEvent(valData, unit) {
src/views/resource/serverRegister/index.vue
+5 -1
View File
@@ -307,8 +307,12 @@
},
/** 查询角色列表 */
getList() {
let params = JSON.parse(JSON.stringify(this.queryParams));
if (params && !params.queryParam) {
params.queryParam = null;
}
this.loading = true;
listHandle(this.addDateRange(this.queryParams)).then(response => {
listHandle(this.addDateRange(params)).then(response => {
this.roleList = response.rows;
this.queryParams.total = response.total;
this.loading = false;