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

挂载文件系统监控提示框添加存储使用大小字段和添加懒加载功能

Browse Source 
1、优化table列表操作按钮点击后的效果展示
2、监控看板打开弹窗form重置功能、关闭弹窗数据闪烁问题
3、消息推送提示人手机根据推送方式的必填状态变化
4、网卡流量图表请求顺序展示
5、升级到最新a
This commit is contained in:
康冉冉
2026-01-28 18:50:58 +08:00
parent 3d5bdcd0c4
commit e19cdd4c09
8 changed files with 179 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/table/index.vue
+11 -1
View File
@@ -115,7 +115,7 @@
<template v-else>
<!-- <el-tooltip v-if="item && item.content" :content="item.content" placement="top">-->
<template v-if="item && item.content">
<el-button size="mini" plain link :type="item.type || 'primary'" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" v-if="item && item.hasPermi ? checkPermi([item.hasPermi]) : true">{{item.content}}</el-button>
<el-button :ref="`${item.content}_${scope.row.id}`" size="mini" plain link :type="item.type || 'primary'" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" v-if="item && item.hasPermi ? checkPermi([item.hasPermi]) : true">{{item.content}}</el-button>
</template>
<!-- <el-button v-if="item && item.content" size="mini" link :type="item.type" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>-->
<!-- </el-tooltip>-->
@@ -323,6 +323,16 @@
default:
this.$emit("fnClick", result, row, this.ids, this.selectList);
}
// 点击按钮后，通过设置失去焦点使其按钮恢复点击前状态
if (row && this.$refs && this.$refs[result.content +'_'+row.id]) {
if (Array.isArray(this.$refs[result.content +'_'+row.id])) {
this.$refs[result.content +'_'+row.id].forEach(refItem => {
refItem.$el.blur();
});
} else {
this.$refs[result.content +'_'+row.id].$el.blur();
}
}
}
},
// 导出弹窗 默认选中项
src/views/resource/messagePush/details.vue
+9 -3
View File
@@ -25,8 +25,9 @@
this.paramsData = this.$route && this.$route.query;
if (this.paramsData && this.paramsData.id) {
this.getFormDataList(this.paramsData.id);
} else {
this.fnFormList();
}
this.fnFormList();
},
methods: {
// formList集合
@@ -38,9 +39,9 @@
id: {label: 'ID',hidden: true},
configName: {label: '配置名称', span: spanNum, type: 'input', required: true},
pushMethod: {label: '推送方式', span: spanNum, type: 'select', eventName: 'change', options: this.dict.type.push_method, required: true},
pushAddress: {label: '推送地址', span: spanNum, type: 'input', required: true},
pushAddress: {label: '推送地址', span: spanNum, type: 'input', required: true, hidden: this.ruleForm.pushMethod === '2' ? true : false},
pushAlarmTypes: {label: '推送告警类型', span: spanNum, type: 'select', options: this.dict.type.alarm_type, required: true},
contactPhones: {label: '提示人手机号', span: spanNum, type: 'input', warningTitle: '可填多个手机号，以英文逗号隔开'},
contactPhones: {label: '提示人手机号', span: spanNum, type: 'input', warningTitle: '可填多个手机号，以英文逗号隔开',required: this.ruleForm.pushMethod === '2'},
createBy: {label: '创建人', span: spanNum, type: 'input', hidden: !(this.paramsData && this.paramsData.readonly)},
createTime: {label: '创建时间', span: spanNum, type: 'datetime', hidden: !(this.paramsData && this.paramsData.readonly)},
updateTime: {label: '修改时间', span: spanNum, type: 'datetime', hidden: !(this.paramsData && this.paramsData.readonly)},
@@ -53,6 +54,7 @@
getAlarmPush(id).then(val => {
if (val && val.data) {
this.ruleForm = val.data;
this.fnFormList();
}
}).catch(() => {
this.$modal.msgError("操作失败")
@@ -80,9 +82,13 @@
case 'pushMethod':
if (dataVal === '1') {
this.formList[0].controls.pushAddress['hidden'] = false;
this.formList[0].controls.contactPhones['required'] = false;
} else if (dataVal === '2') {
this.formList[0].controls.pushAddress['hidden'] = true;
this.formList[0].controls.contactPhones['required'] = true;
}
// 强制更新表单
this.$set(this.ruleForm, 'updateFormVal', Date.now());
break;
case 'cancel':
this.$router.push("/resource/messagePush");
src/views/resource/monitorBoard/dialogMonitor.vue
+1
View File
@@ -45,6 +45,7 @@
} else if (val && val.resourceType === '3') {
this.businessList();
}
this.$refs.formRef.$refs.ruleForm.resetFields();
this.ruleFormData = JSON.parse(JSON.stringify(val));
this.groupModel = this.ruleFormData && this.ruleFormData['groupId'] || '';
this.fnFormList();
src/views/resource/monitorBoard/monitorBoard.vue
+4 -3
View File
@@ -110,7 +110,7 @@
formModel: {},
currTimeList: {},
datetimeModel: [],
timeModel: '0',
timeModel: '30000',
timeInterModel: null,
open: false,
title: '',
@@ -126,8 +126,9 @@
unitModel: 'Kb',
legend: {bottom: '0%'},
gridTop: '40px',
gridRight: '40px',
gridBotm: '15%',
lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sa', 'Sun'],
lineXData: [],
dataList: [
{name: '入方向总流量', data: []},
{name: '出方向总流量', data: []}
@@ -267,7 +268,7 @@
},
// 查询流量图
fnChartView(times, unitVal,keyName, groupId) {
this.$modal.loading();
// this.$modal.loading();
let groupObj = {};
if (groupId) {
groupObj = {groupId: groupId};
src/views/resource/monitorBoard/monitorBoardView.vue
+7 -2
View File
@@ -67,7 +67,7 @@
</div>
<!-- 弹窗 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<dialogMonitor :formModel="formModel" @dialogResult="fnDialogResult"></dialogMonitor>
<dialogMonitor v-if="open" :formModel="formModel" @dialogResult="fnDialogResult"></dialogMonitor>
</el-dialog>
</div>
</template>
@@ -374,6 +374,7 @@
},
// 按钮操作弹窗
fnFormHandle(val) {
this.formModel = {};
if (val === 'add') {
this.title = '添加配置';
this.open = true;
@@ -395,6 +396,8 @@
'<p style="height: 0px;margin-bottom: 50px;">删除 ' + this.reserveForm.configName + ' 配置后，相应的服务器/交换机集合的总流量的相关数据都将删除</p>';
this.$modal.confirm(content).then(() => {
delMonitorConfig(this.reserveForm.id).then(res => {
this.reserveForm = {};
this.lineDataParams = {};
this.fnConfigName(this.groupData);
});
}).catch(() => {});
@@ -419,7 +422,9 @@
},
fnDialogResult(res){
this.open = false;
this.groupListData();
if (res && res.type === 'submit') {
this.groupListData();
}
// this.fnConfigName(this.groupData);
// this.fnChartView();
},
src/views/resource/serverRegister/details.vue
+92 -27
View File
@@ -1,5 +1,5 @@
<template>
<div class="app-container" style="padding: 8px 10px 20px;">
<div class="app-container" style="padding: 8px 10px 20px;" @scroll="handleScroll">
<!-- header box -->
<div>
<div v-for="item of headerList" class="headerBox" :style="`width: ${100/headerList.length}%`">
@@ -51,7 +51,7 @@
<template v-if="formModel['maxAgentVersion']">
<div v-if="!compareVersions(model,formModel['maxAgentVersion'])" class="disInlineBlock ml10">
最新版本({{formModel.maxAgentVersion}})
<el-button class="ml10" style="background-color: #169bd5;border-color: #169bd5;" type="primary" size="mini" @click="upMaxVersion(formModel)">升级到最新</el-button>
<el-button v-if="newVersionType" class="ml10" style="background-color: #169bd5;border-color: #169bd5;" type="primary" size="mini" @click="upMaxVersion(formModel)">升级到最新</el-button>
</div>
</template>
</template>
@@ -62,15 +62,16 @@
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
<!-- 网卡流量监控 -->
<el-tab-pane label="网卡流量监控" name="网卡流量监控">
<serRegisTabsChart ref="layoutChart" v-if="activeName === '网卡流量监控'" :key="activeName" :interCartList="interCartList" :activeName="activeName" :modelVal="systemModel" :chartModelList="mapDataList['网卡流量监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent"></serRegisTabsChart>
<serRegisTabsChart v-if="activeName === '网卡流量监控'" :key="activeName" :interCartList="interCartList" :activeName="activeName" :modelVal="systemModel" :chartModelList="mapDataList['网卡流量监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent"></serRegisTabsChart>
</el-tab-pane>
<!-- 硬盘设备监控 -->
<el-tab-pane label="硬盘设备监控" name="硬盘设备监控">
<serRegisTable v-if="activeName === '硬盘设备监控'" :key="activeName" :activeName="activeName" :clientId="paramsData.clientId" :modelVal="mapDataList['硬盘设备监控']" @diskTableData="fnDiskTableData('硬盘设备监控')"></serRegisTable>
<!-- <serRegisTabsChart ref="layoutChart" v-if="activeName === '硬盘设备监控'" :key="activeName" :activeName="activeName" :chartModelList="mapDataList['硬盘设备监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent" @lazyLoad="fnLazyLoad"></serRegisTabsChart>-->
</el-tab-pane>
<!-- 挂载文件系统监控 -->
<el-tab-pane label="挂载文件系统监控" name="挂载文件系统监控">
<serRegisTabsChart v-if="activeName === '挂载文件系统监控'" :key="activeName" :activeName="activeName" :chartModelList="mapDataList['挂载文件系统监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent"></serRegisTabsChart>
<serRegisTabsChart ref="layoutChart" v-if="activeName === '挂载文件系统监控'" :key="activeName" :activeName="activeName" :chartModelList="mapDataList['挂载文件系统监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent" @lazyLoad="fnLazyLoad"></serRegisTabsChart>
</el-tab-pane>
<!-- 网卡信息 -->
<el-tab-pane label="网卡信息" name="网卡信息">
@@ -105,7 +106,7 @@
import memoryImg from '@/assets/images/memory.svg';
import diskSizeImg from '@/assets/images/diskSize.png';
import {getHandle, trafficSerDetails, agentIsNew, virNetInterfaceChild, frpMsgByClient, getPppoeConfig, updateAgentManage, postInterFaceName,
mountNameList, diskNameList, trafficEcharts, spaceRate, speedEcharts, trafficIPv4Echarts, trafficIPv6Echarts,cpuTemperatureChartData,
mountNameList, diskNameList, diskAllNames, trafficEcharts, spaceRate, speedEcharts, trafficIPv4Echarts, trafficIPv6Echarts,cpuTemperatureChartData,
cpuLoadData, memoryUtilization, usedSpacechartsData, networkList, pingDroppedEchars, getAlarmLogServerMsg} from "@/api/disRevenue/resource";
import {listBandWidth} from "@/api/disRevenue/earnManage";
import serRegisFormOther from './formOther';
@@ -139,7 +140,7 @@
echartFors: [
{title: '的空间利用率(%)', oneName: '利用率'},
],
echartList: []
echartList: [null]
},
net: {
title: '网络接口interface eth0',
@@ -178,6 +179,8 @@
hiddenTime: true,
yAxisName: ' ',
gridTop: '35%',
gridLeft: '40px',
gridRight: '40px',
legend: {top: '15%', left: '10%'},
lineXData: [],
dataList: [
@@ -193,6 +196,8 @@
hiddenTime: true,
yAxisName: ' ',
gridTop: '35%',
gridLeft: '40px',
gridRight: '40px',
legend: {top: '15%', left: '10%'},
lineXData: [],
dataList: [
@@ -202,24 +207,27 @@
}
],
echartData: {
title: 'GE1/0/1的丢包数',
title: ' ',
dataVal: {
hiddenTime: true,
titleVal: {textAlign: 'left', left: '1%'},
yAxisName: ' ',
gridTop: '30%',
// gridLeft: '7%',
// gridRight: undefined,
legend: {top: '15%', left: '10%'},
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
gridLeft: '40px',
gridRight: '40px',
legend: {top: '15%', left: '90px'},
lineXData: [],
dataList: [{
name: '入站丢包',
data: [120, 132, 101, 134, 90, 230, 210],
name: ' ',
data: [],
}]
}
},
activeShowList: [],
interCartList: {},
eventKeyName: {},
scrollTimeout: '',
newVersionType: true,
}
},
created() {
@@ -234,6 +242,14 @@
this.handleClick();
},
methods: {
handleScroll() {
if (this.$refs.layoutChart && !this.scrollTimeout) {
this.scrollTimeout = setTimeout(() => {
this.$refs.layoutChart.scrollContent();
this.scrollTimeout = null;
}, 500); // 500ms 节流间隔
}
},
fnFormList(objVal) {
this.formList = [{
config: {title: '',readonly: true},
@@ -324,9 +340,12 @@
let agentType = await this.fnAgentIsNew(model);
if (agentType && agentType.newFlag) {
let params = {deployDevice: model.clientId, method: '0', fileUrl: agentType.fileUrl, fileMd5: agentType.fileMd5};
updateAgentManage(params).then(res => {
console.log('res===',res);
});
this.$modal.confirm('是否升级到最新？').then(() => {
updateAgentManage(params).then(res => {
this.newVersionType = false;
this.$modal.msgSuccess("升级成功！");
});
}).catch(() => {});
} else {
let content = `<p style="font-size: 1rem;font-weight: 600;">升级警告</p>` +
`<p style="height: 0px;margin-bottom: 50px;">未找到最新版本${model.maxAgentVersion}的下载地址，请到【AGENT更新】中添加一条版本${model.maxAgentVersion}的更新策略，才可自动进行升级更新`;
@@ -499,9 +518,23 @@
this.$set(this.mapDataList, keyName, [{tableList: newList, queryParams: {total: 0}}]);
}
});
// diskAllNames({clientId: this.paramsData.clientId}).then(res => {
// if (res && res.data.length > 0) {
// let tabNameList = {};
// res && res.data.forEach(async(item,index) => {
// let oneData = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
// oneData.title = item && item.name;
// oneData.toTitle = '硬盘设备';
// oneData.clientId = this.paramsData.clientId;
// tabNameList[item.name] = oneData;
// });
// this.$set(this.mapDataList, keyName, tabNameList);
// }
// });
},
// 回调
fnTimeChangeData(val) {
this.eventKeyName = {};
if (this.activeName && this.activeName === '网卡流量监控' && this.mapDataList[this.activeName]) {
this.fnNetChartList('网卡流量监控', val.currTimeList, val.interCardName, val.onlyInterCard);
} else if (this.activeName && this.activeName === '挂载文件系统监控' && this.mapDataList[this.activeName]) {
@@ -525,40 +558,53 @@
}
}
} else {
Object.keys(this.mapDataList[keyVal]).forEach(async (keyName,index) => {
for (const keyName of Object.keys(this.mapDataList[keyVal])) {
if (keyName === '网卡信息') {
// this.mapDataList[keyVal][keyName].echartList = [];
if (await this.getNetEcharts(time, keyVal, keyName, interCardName)) {
if (await this.getNetPingDropCharts(time, keyVal, keyName, interCardName)) {
if (this.interCartList[interCardName].businessFlag) {
if (await this.getNetIPv4Echarts(time, keyVal, keyName, interCardName)) {
this.getNetIPv6Echarts(time, keyVal, keyName, interCardName)
await this.getNetIPv6Echarts(time, keyVal, keyName, interCardName)
}
}
}
}
} else if (keyName === 'CPU使用率') {
this.getCpuLoadData(time, keyVal, keyName)
await this.getCpuLoadData(time, keyVal, keyName)
} else if (keyName === '内存使用率') {
this.getMemoryUtilizationData(time, keyVal, keyName)
await this.getMemoryUtilizationData(time, keyVal, keyName)
} else if (keyName === 'HDD磁盘空间') {
this.fnUsedSpaceCharts(time, keyVal, keyName);
await this.fnUsedSpaceCharts(time, keyVal, keyName);
} else if (keyName === 'CPU温度') {
this.fnCpuTemperatureCharts(time, keyVal, keyName);
}
});
}
// Object.keys(this.mapDataList[keyVal]).forEach(async (keyName,index) => {
// });
}
},
// 挂载文件系统监控
fnMountCharList(keyVal, time){
Object.keys(this.mapDataList[keyVal]).forEach(async keyName => {
this.getSpaceRate(time, keyVal, keyName);
Object.keys(this.mapDataList[keyVal]).forEach(async (keyName,index) => {
if (Object.keys(this.mapDataList[keyVal]).length > 3) {
if (index <= 2) {
this.getSpaceRate(time, keyVal, keyName);
}
} else {
this.getSpaceRate(time, keyVal, keyName);
}
});
},
// 硬盘设备
fnDiskCharList(keyVal, time){
Object.keys(this.mapDataList[keyVal]).forEach(async keyName => {
this.getSpaceRate(time, keyVal, keyName);
Object.keys(this.mapDataList[keyVal]).forEach(async (keyName,index) => {
if (Object.keys(this.mapDataList[keyVal]).length > 3) {
if (index <= 2) {
this.getSpeedEcharts(time, keyVal, keyName);
}
} else {
this.getSpeedEcharts(time, keyVal, keyName);
}
});
},
// 网卡 流量
@@ -723,6 +769,7 @@
},
// 挂载文件 空间利用率
getSpaceRate(times, keyVal, titleName) {
this.eventKeyName[titleName] = true;
let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
mountCollect['titleTo'] = titleName;
let mountEcharts = JSON.parse(JSON.stringify(this.echartData));
@@ -737,6 +784,9 @@
name: content.echartFors[0].oneName,
data: res.data && res.data.yData['vfsUtilData'] || []
};
if (res.data && res.data.yData && res.data.yData['usedData'] && res.data.yData['usedData'].length > 0) {
mountEcharts.dataVal.otherModel = {name: '存储使用大小', value: res.data && res.data.yData['usedData'] || []};
}
}
mountCollect['echartList'][0] = mountEcharts;
this.$set(this.mapDataList[keyVal], titleName, mountCollect);
@@ -747,6 +797,7 @@
},
// 硬盘设备 读写速率
getSpeedEcharts(times, keyVal, titleName) {
this.eventKeyName[titleName] = true;
let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
mountCollect['titleTo'] = titleName;
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
@@ -871,6 +922,20 @@
}
},
// 滚动监听事件
fnLazyLoad(val) {
if (val) {
if (this.mapDataList[this.activeName]) {
if (this.mapDataList[this.activeName][val.key] && !(this.mapDataList[this.activeName][val.key].echartList[0] && this.mapDataList[this.activeName][val.key].echartList[0].title)) {
if (this.activeName === '挂载文件系统监控' && !this.eventKeyName[val.key]) {
this.getSpaceRate(val.currTimeList, this.activeName, val.key);
} else if (this.activeName === '硬盘设备监控' && !this.eventKeyName[val.key]) {
this.getSpeedEcharts(val.currTimeList, this.activeName, val.key);
}
}
}
}
},
// 监听事件
callback(result, dataVal, formVal) {
src/views/resource/serverRegister/flowForm.vue
+5 -5
View File
@@ -56,13 +56,13 @@
readonly: true,
paramsData: {},
ruleForm: {
detectFlag: '1',
frequency: '每天',
// detectFlag: '1',
// frequency: '每天',
detectTimes: []
},
formModel: {
detectFlag: '1',
frequency: '每天',
// detectFlag: '1',
// frequency: '每天',
detectTimes: []
},
inputVisible: false,
@@ -154,7 +154,7 @@
if (!this.readonly) {
this.formSumbit();
} else {
this.ruleForm = Object.assign({}, this.ruleForm, {typeName: 111});
this.ruleForm = Object.assign({}, this.ruleForm, {frequency: '每天'});
this.readonly = !this.readonly;
this.fnFormList(this.readonly);
}
src/views/resource/serverRegister/tabsChart.vue
+50 -13
View File
@@ -44,20 +44,20 @@
</div>
<template v-if="echartDataList && Object.keys(echartDataList).length > 0">
<template v-for="(val, key, index) of echartDataList">
<div v-for="(item, chartIndex) of val.echartList" class="disInlineBlock mt10 mb10 plr-10" :style="`width: calc(100% / ${layoutModel}); height:300px;position: relative;`">
<div v-for="(item, chartIndex) of val.echartList" :ref="`scroll_${val.title}`" class="disInlineBlock mt10 mb10 plr-10" :style="`width: calc(100% / ${layoutModel}); height:300px;position: relative;`">
<!-- 图表标题 -->
<div style="width: 100%;position: absolute;top: 12px;left: 30px;z-index:999;cursor: default;">
<template v-if="val && val.serverIp">
<div class="w45 disInlineBlock" :title="`${val.toTitle}${val.titleTo}${item.title}`">
<div class="w45 disInlineBlock" :title="`${val && val.toTitle || 'toTitle'}${val && val.titleTo || 'titleTo'}${item && item.title || ''}`">
<span v-if="val && val.toTitle" class="disInlineBlock" style="vertical-align: middle;">{{val.toTitle}}</span>
<span class="disInlineBlock" style="width:25%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;">{{val.titleTo}}</span>
<span class="disInlineBlock" style="width:25%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;">{{val && val.titleTo || ''}}</span>
<span class="disInlineBlock" style="vertical-align: middle;">{{item && item.title}}</span>
</div>
<div class="disInlineBlock" style="vertical-align: bottom;">{{val.serverIp}}</div>
</template>
<div v-else class="w100" :title="`${val.toTitle}${val.titleTo}${item.title}`">
<div v-else class="w100" :title="`${val && val.toTitle || 'toTitle'}${val && val.titleTo || 'titleTo'}${item && item.title || ''}`">
<span v-if="val && val.toTitle" class="disInlineBlock" style="vertical-align: middle;">{{val.toTitle}}</span>
<span class="disInlineBlock" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;">{{val.titleTo}}</span>
<span class="disInlineBlock" style="max-width: calc(100% - 240px);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;">{{val.titleTo}}</span>
<span class="disInlineBlock" style="vertical-align: middle;">{{item && item.title}}</span>
</div>
</div>
@@ -124,7 +124,7 @@
this.interCardName = Object.keys(this.interCartList)[0];
this.radioTimeChange(this.timeModel);
});
} else if (this.activeName === '挂载文件系统监控') {
} else if (this.activeName === '挂载文件系统监控' || this.activeName === '硬盘设备监控') {
setTimeout(() => {
this.radioTimeChange(this.timeModel);
},500);
@@ -189,12 +189,47 @@
this.timedRefresh = null;
},
methods: {
scrollContent() {
Object.keys(this.$refs).forEach(key => {
if (key.includes('scroll_')) {
if (this.$refs[key]) {
const ref = this.$refs[key];
if (Array.isArray(ref)) {
ref.forEach(item => {
const rect = item.getBoundingClientRect();
const windowHeight = (window.innerHeight || document.documentElement.clientHeight) + (800 / Number(this.layoutModel));
if (rect.top <= windowHeight) {
let originalKey = key.split('scroll_')[1];
this.$emit('lazyLoad', {key: originalKey,currTimeList: this.currTimeList});
}
})
} else if (ref) {
const rect = ref.getBoundingClientRect();
const windowHeight = (window.innerHeight || document.documentElement.clientHeight) + (800 / Number(this.layoutModel));
if (rect.top <= windowHeight) {
let originalKey = key.split('scroll_')[1];
this.$emit('lazyLoad', {key: originalKey,currTimeList: this.currTimeList});
}
}
}
}
})
},
// 定时刷新下拉
fnTimeInter(val) {
clearInterval(this.timedRefresh);
this.timedRefresh = null;
if (val !== '0') {
this.timedRefresh = setInterval(() => {
if (this.timeModel === '6') {
this.getTimeInterval();
} else if (this.timeModel === '24') {
this.get24Time();
} else if (this.timeModel === '-1') {
this.get24Time('-1');
} else if (this.timeModel === '7') {
this.get7dayTime();
}
this.$emit('timeChangeData', {currTimeList: this.currTimeList, interCardName: this.interCardName});
}, Number(val));
}
@@ -235,13 +270,15 @@
this.$nextTick(() => {
// 遍历所有图表实例，分别调用 resize
Object.keys(this.$refs).forEach(key => {
const chartRefs = this.$refs[key];
if (Array.isArray(chartRefs)) {
chartRefs.forEach(chartRef => {
if (chartRef.resizeChart) {
chartRef.resizeChart();
}
});
if (!key.includes('scroll_')) {
const chartRefs = this.$refs[key];
if (Array.isArray(chartRefs)) {
chartRefs.forEach(chartRef => {
if (chartRef.resizeChart) {
chartRef.resizeChart();
}
});
}
}
});
});