康冉冉
e19cdd4c09
1、优化table列表操作按钮点击后的效果展示 2、监控看板打开弹窗form重置功能、关闭弹窗数据闪烁问题 3、消息推送提示人手机根据推送方式的必填状态变化 4、网卡流量图表请求顺序展示 5、升级到最新a
972 lines
48 KiB
Vue
972 lines
48 KiB
Vue
<template>
|
||
<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}%`">
|
||
<div class="boxChild w100 h100">
|
||
<div class="disInlineBlock w80" style="padding-left: 10px;">
|
||
<div>{{item.name}}</div>
|
||
<div v-if="item.num || item.num === 0" class="mt20" style="font-size: 2rem;">{{item.num}}{{item.unit}}</div>
|
||
<div v-else style="margin-top: 40px;font-size: 14px;color: #f00;">暂无数据</div>
|
||
</div>
|
||
<div class="disInlineBlock w20 " style="vertical-align: top;">
|
||
<img class="w100" :src="item.imgUrl" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- form -->
|
||
<div class="mt20 plr-10">
|
||
<Form :formList="formList" :ruleFormData="ruleForm" :config=" {labelWidth: '92px', buttonGroup: []}" @fnClick="callback">
|
||
<!-- SN -->
|
||
<template #tempClient="{field, model, formModel}">
|
||
{{model}}
|
||
<div class="disInlineBlock" style="margin: 0 10px;">
|
||
<dict-tag class="disInlineBlock ml10 mr10" :options="dict.type.rm_register_status" :value="formModel.registrationStatus"/>
|
||
<dict-tag class="disInlineBlock" :options="dict.type.rm_register_online_state" :value="formModel.onlineStatus"/>
|
||
</div>
|
||
<div class="disInlineBlock" style="margin: 0 10px;">
|
||
<el-button style="background-color: #169bd5;border-color: #169bd5;" type="primary" size="mini" @click="outProvinceFlow(formModel)">查看出省流量</el-button>
|
||
</div>
|
||
<el-tag class="disInlineBlock dynamic-tag ml5" v-for="(tag, tagIndex) in formModel.remark" :closable="false" :disable-transitions="false">
|
||
{{ tag }}
|
||
</el-tag>
|
||
</template>
|
||
<!-- ip -->
|
||
<template #tempIp1public="{field, model, formModel}">
|
||
{{model}}
|
||
<div class="disInlineBlock" style="color: #0052d9;">
|
||
<span class="disInlineBlock" style="margin: 0 20px;">{{formModel.ip1Province}}</span>
|
||
<span>{{formModel.ip1Isp}}</span>
|
||
</div>
|
||
</template>
|
||
<!-- 不同label宽度 -->
|
||
<template #dynamicLabelWidth="{field, model, formModel}">
|
||
<div class="disInlineBlock" style="padding-right: 12px;color: #C0C4CC;font-weight: 700;" :style="field.inlineSty">{{field.label}}：</div>
|
||
{{model}}
|
||
</template>
|
||
<!-- 最新版本号 -->
|
||
<template #tempMaxVersion="{ field, model, formModel }">
|
||
{{model}}
|
||
<template v-if="formModel['maxAgentVersion']">
|
||
<div v-if="!compareVersions(model,formModel['maxAgentVersion'])" class="disInlineBlock ml10">
|
||
最新版本({{formModel.maxAgentVersion}})
|
||
<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>
|
||
</Form>
|
||
</div>
|
||
<!-- tab___echarts/form/table -->
|
||
<div class="mt20 plr-10">
|
||
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
|
||
<!-- 网卡流量监控 -->
|
||
<el-tab-pane label="网卡流量监控" name="网卡流量监控">
|
||
<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 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="网卡信息">
|
||
<serRegisTable v-if="activeName === '网卡信息'" :key="activeName" :activeName="activeName" :modelVal="mapDataList['网卡信息']"></serRegisTable>
|
||
</el-tab-pane>
|
||
<!-- 虚拟网卡信息 -->
|
||
<el-tab-pane label="虚拟网卡信息" name="虚拟网卡信息">
|
||
<serRegisTable v-if="activeName === '虚拟网卡信息'" :key="activeName" :activeName="activeName" :modelVal="mapDataList['虚拟网卡信息']"></serRegisTable>
|
||
</el-tab-pane>
|
||
<!-- 收益查看 -->
|
||
<el-tab-pane label="收益查看" name="收益查看">
|
||
<serRegisTable v-if="activeName === '收益查看'" :key="activeName" :activeName="activeName" :modelVal="mapDataList['收益查看']" @fnPaging="fnPaging"></serRegisTable>
|
||
</el-tab-pane>
|
||
<!-- FRP信息 -->
|
||
<el-tab-pane label="FRP信息" name="FRP信息">
|
||
<serRegisFormOther v-if="activeName === 'FRP信息'" :key="activeName" :activeName="activeName" :modelVal="mapDataList['FRP信息']"></serRegisFormOther>
|
||
</el-tab-pane>
|
||
<!-- PPPoE配置 -->
|
||
<el-tab-pane label="PPPoE配置" name="PPPoE配置">
|
||
<PPPoEConfig v-if="activeName === 'PPPoE配置'" :key="activeName" :modelVal="mapDataList['PPPoE配置']" @poeDataChange="fnPoeDataChange"></PPPoEConfig>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Form from '@/components/form/index.vue';
|
||
import cpuUseImg from '@/assets/images/cpuUse.svg';
|
||
import bandWImg from '@/assets/images/bandwidth.svg';
|
||
import cpuImg from '@/assets/images/cpu.svg';
|
||
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, 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';
|
||
import serRegisTable from './table';
|
||
import serRegisTabsChart from './tabsChart';
|
||
import PPPoEConfig from "./PPPoEConfig";
|
||
export default {
|
||
name: "server_register_details",
|
||
components: {PPPoEConfig, Form, serRegisFormOther, serRegisTabsChart, serRegisTable},
|
||
dicts: ['rm_register_status','rm_register_online_state'],
|
||
data() {
|
||
return {
|
||
mapDataList: {},
|
||
ruleForm: {},
|
||
formList: [],
|
||
paramsData: {},
|
||
systemModel: {},
|
||
headerList: [
|
||
{name: 'CPU使用率(%)', num: 0, imgUrl: cpuUseImg},
|
||
{name: '带宽', num: 0, unit: 'Mbps', imgUrl: bandWImg},
|
||
{name: 'CPU', num: 0, unit: '核', imgUrl: cpuImg},
|
||
{name: '内存', num: 0, unit: 'G', imgUrl: memoryImg},
|
||
{name: '磁盘容量', num: 0, unit: 'GB', imgUrl: diskSizeImg},
|
||
],
|
||
activeName: '网卡流量监控',
|
||
echartList: {},
|
||
linuxSystem: {
|
||
mount: {
|
||
title: '挂载文件系统',
|
||
type: 'mount',
|
||
echartFors: [
|
||
{title: '的空间利用率(%)', oneName: '利用率'},
|
||
],
|
||
echartList: [null]
|
||
},
|
||
net: {
|
||
title: '网络接口interface eth0',
|
||
type: 'net',
|
||
echartFors: [
|
||
{title: '的流量', oneName: '出站流量', twoName: '入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
|
||
{title: 'PING丢包率', oneName: 'ping丢包率'},
|
||
{title: '的IPv4流量', oneName: 'IPv4出站流量', twoName: 'IPv4入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
|
||
{title: '的IPv6流量', oneName: 'IPv6出站流量', twoName: 'IPv6入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
|
||
],
|
||
echartList: [null, null]
|
||
},
|
||
disk: {
|
||
title: '硬盘',
|
||
type: 'disk',
|
||
echartFors: [
|
||
{title: '的读写速率(KB/s)', oneName: '磁盘写入速率', twoName: '磁盘读取速率'}
|
||
],
|
||
echartList: [null]
|
||
},
|
||
dock: {
|
||
title: '容器',
|
||
type: 'dock',
|
||
echartFors: [
|
||
{title: '的CPU利用率(%)', oneName: 'CPU利用率'},
|
||
{title: '的内存利用率(%)', oneName: '内存利用率'},
|
||
],
|
||
echartList: [null, null, null]
|
||
},
|
||
},
|
||
tabsListData: {},
|
||
resultData: [
|
||
{
|
||
dataVal: {
|
||
titleVal: {textAlign: 'left', left: '1%'},
|
||
hiddenTime: true,
|
||
yAxisName: ' ',
|
||
gridTop: '35%',
|
||
gridLeft: '40px',
|
||
gridRight: '40px',
|
||
legend: {top: '15%', left: '10%'},
|
||
lineXData: [],
|
||
dataList: [
|
||
{name: 'CPU使用率', data: []},
|
||
{name: 'CPU的1分钟负载', data: []},
|
||
{name: 'CPU的5分钟负载', data: []},
|
||
{name: 'CPU的15分钟负载', data: []},
|
||
]
|
||
}
|
||
},{
|
||
dataVal: {
|
||
titleVal: {textAlign: 'left', left: '1%'},
|
||
hiddenTime: true,
|
||
yAxisName: ' ',
|
||
gridTop: '35%',
|
||
gridLeft: '40px',
|
||
gridRight: '40px',
|
||
legend: {top: '15%', left: '10%'},
|
||
lineXData: [],
|
||
dataList: [
|
||
{name: '内存使用率', data: []}
|
||
]
|
||
}
|
||
}
|
||
],
|
||
echartData: {
|
||
title: ' ',
|
||
dataVal: {
|
||
hiddenTime: true,
|
||
titleVal: {textAlign: 'left', left: '1%'},
|
||
yAxisName: ' ',
|
||
gridTop: '30%',
|
||
gridLeft: '40px',
|
||
gridRight: '40px',
|
||
legend: {top: '15%', left: '90px'},
|
||
lineXData: [],
|
||
dataList: [{
|
||
name: ' ',
|
||
data: [],
|
||
}]
|
||
}
|
||
},
|
||
activeShowList: [],
|
||
interCartList: {},
|
||
eventKeyName: {},
|
||
scrollTimeout: '',
|
||
newVersionType: true,
|
||
}
|
||
},
|
||
created() {
|
||
this.paramsData = this.$route && this.$route.query;
|
||
if (this.paramsData && this.paramsData.id) {
|
||
this.getFormDataList(this.paramsData.id);
|
||
}
|
||
if (this.paramsData && this.paramsData.target) {
|
||
this.activeName = this.paramsData.target;
|
||
}
|
||
this.fnFormList();
|
||
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},
|
||
controls: {
|
||
id: {label: 'ID',hidden: true},
|
||
clientId: {label: 'SN', span: 24, slotName: 'tempClient'},
|
||
// registrationStatus: {label: '', span: 3, type: 'select', options: this.dict.type.rm_register_status},
|
||
// onlineStatus: {label: '', span: 3, type: 'select', options: this.dict.type.rm_register_online_state},
|
||
// remark: {label: '', span: 14, type: 'dynamicTags'},
|
||
ip1PublicIp: {label: 'IP', span: 24, slotName: 'tempIp1public'},
|
||
}
|
||
}, {
|
||
config: {title: '标识信息',readonly: true},
|
||
controls: {
|
||
id: {label: 'ID',hidden: true},
|
||
businessName: {label: '业务名称', span: 8, type: 'input'},
|
||
logicalNodeId: {label: '逻辑节点标识', span: 4, inlineSty: 'margin-left: -18px;', labelWidthNull: true, slotName: 'dynamicLabelWidth'},
|
||
hardwareSn: {label: '设备SN', span: 12, type: 'input'},
|
||
machineCode: {label: '金山machineCode', span: 24, labelWidthNull: true, slotName: 'dynamicLabelWidth'},
|
||
}
|
||
},{
|
||
config: {title: '时间信息',readonly: true},
|
||
controls: {
|
||
id: {label: 'ID',hidden: true},
|
||
createTime: {label: '注册时间', span: 8, type: 'input'},
|
||
onboardTime: {label: '上机时间', span: 8, type: 'input'},
|
||
}
|
||
},{
|
||
config: {title: '其他',readonly: true},
|
||
controls: {
|
||
id: {label: 'ID',hidden: true},
|
||
agentVersion: {label: 'agent版本', span: 8, slotName: 'tempMaxVersion'},
|
||
heartbeatInterval: {label: '心跳间隔(s)', span: 6, type: 'input'},
|
||
heartbeatCount: {label: '心跳次数', span: 6, type: 'input'},
|
||
}
|
||
}];
|
||
},
|
||
// 获取详情
|
||
getFormDataList(id) {
|
||
let params = id;
|
||
let fnName = getHandle;
|
||
if (this.paramsData && this.paramsData.type === 'alarmLog') {
|
||
params = {clientId: this.paramsData.id};
|
||
fnName = getAlarmLogServerMsg;
|
||
}
|
||
fnName(params).then(val => {
|
||
if (val && val.data) {
|
||
this.headerFourData(val.data);
|
||
val.data['remark'] = val.data && val.data['remark'] ? val.data['remark'].split(',') : null;
|
||
this.ruleForm = val && val.data;
|
||
}
|
||
}).catch(() => {
|
||
this.$modal.msgError("操作失败")
|
||
});
|
||
},
|
||
// 顶部四块信息
|
||
headerFourData(data) {
|
||
this.headerList[1].num = data.reportedBandwidth;
|
||
trafficSerDetails({clientId: data.clientId, name: data.ip1InterfaceName}).then(res => {
|
||
if (res && res.data) {
|
||
this.headerList[0].num = res.data.cpuUti;
|
||
this.headerList[2].num = res.data.cpuCores;
|
||
this.headerList[3].num = res.data.memTotalSize;
|
||
this.headerList[4].num = res.data.diskTotal;
|
||
}
|
||
});
|
||
},
|
||
// 判断版本是否相同
|
||
compareVersions(targetVer, version2) {
|
||
if (targetVer && version2) {
|
||
const v1 = targetVer.split('.').map(Number);
|
||
const v2 = version2.split('.').map(Number);
|
||
|
||
const maxLength = Math.max(v1.length, v2.length);
|
||
|
||
for (let i = 0; i < maxLength; i++) {
|
||
const num1 = v1[i] || 0;
|
||
const num2 = v2[i] || 0;
|
||
if (num1 !== num2) {
|
||
return false;
|
||
}
|
||
}
|
||
return true; // 相等
|
||
}
|
||
},
|
||
// 更新到最新版本
|
||
async upMaxVersion(model) {
|
||
let agentType = await this.fnAgentIsNew(model);
|
||
if (agentType && agentType.newFlag) {
|
||
let params = {deployDevice: model.clientId, method: '0', fileUrl: agentType.fileUrl, fileMd5: agentType.fileMd5};
|
||
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}的更新策略，才可自动进行升级更新`;
|
||
this.$modal.confirm(content, {submitTitle: '去添加'}).then(() => {
|
||
this.$router.push("/resource/agentUpdate");
|
||
}).catch(() => {});
|
||
}
|
||
},
|
||
//agent版本是否为最新版本
|
||
fnAgentIsNew(model) {
|
||
return agentIsNew({clientId: model.clientId, agentVersion: model.maxAgentVersion}).then(res => {
|
||
return res && res.data;
|
||
});
|
||
},
|
||
// 查看出省流量
|
||
outProvinceFlow() {
|
||
this.$router.push({
|
||
path:'/resource/serverRegister/flowForm',
|
||
query: {clientId: this.paramsData.clientId, id: this.paramsData.id}
|
||
});
|
||
},
|
||
// tab栏点击事件
|
||
handleClick() {
|
||
if (this.activeName === '网卡流量监控') {
|
||
this.fnSwitchNetNames('网卡流量监控');
|
||
} else if (this.activeName === '挂载文件系统监控') {
|
||
this.fnInterFaceNameList('挂载文件系统监控');
|
||
} else if (this.activeName === '硬盘设备监控') {
|
||
this.fnDiskNames('硬盘设备监控');
|
||
} else if (this.activeName === '网卡信息') {
|
||
this.interNetCard(this.activeName);
|
||
} else if (this.activeName === '虚拟网卡信息') {
|
||
this.virtualNetCard(this.activeName);
|
||
} else if (this.activeName === 'FRP信息') {
|
||
this.fnFRPData(this.activeName);
|
||
} else if (this.activeName === '收益查看') {
|
||
this.serverBandWidth(this.activeName);
|
||
} else if (this.activeName === 'PPPoE配置') {
|
||
this.fnPppoeConfig(this.activeName);
|
||
}
|
||
// if (!this.mapDataList[this.activeName] || this.mapDataList[this.activeName].length <= 0) {
|
||
// }
|
||
},
|
||
// 收益信息的分页回调
|
||
fnPaging(val) {
|
||
this.serverBandWidth(this.activeName,val);
|
||
},
|
||
// 收益信息
|
||
serverBandWidth(keyName, val) {
|
||
let newParams = Object.assign({}, {pageNum: 1, pageSize: 10, clientId: this.paramsData.clientId, resourceType: 1, calculationMode: 1000}, val);
|
||
listBandWidth(newParams).then(res => {
|
||
newParams['total'] = res && res.total;
|
||
this.$set(this.mapDataList, keyName, [{tableList: res && res.rows, queryParams: newParams}]);
|
||
})
|
||
},
|
||
// FRP信息
|
||
fnFRPData(keyName) {
|
||
frpMsgByClient({clientId: this.paramsData.clientId}).then(res => {
|
||
if (res && res.data) {
|
||
this.$set(this.mapDataList, keyName, [res.data]);
|
||
}
|
||
});
|
||
},
|
||
// 网卡信息
|
||
interNetCard(keyName) {
|
||
networkList({clientId: this.ruleForm.clientId, newFlag: 1}).then(res => {
|
||
let newList = [];
|
||
let oneData = [];
|
||
let twoData = [];
|
||
res && res.data.map(item => {
|
||
if (item.ipv4Address && item.ipv4Address !== 'N/A') {
|
||
oneData.push(item);
|
||
} else {
|
||
twoData.push(item);
|
||
}
|
||
});
|
||
newList = oneData.concat(twoData);
|
||
this.$set(this.mapDataList, keyName, [{tableList: newList, queryParams: {total: 0}}]);
|
||
});
|
||
},
|
||
// 虚拟网卡信息
|
||
virtualNetCard(keyName) {
|
||
virNetInterfaceChild({clientId: this.paramsData.clientId}).then(resVal => {
|
||
if (resVal && resVal.data) {
|
||
let newList = [];
|
||
let oneData = [];
|
||
let twoData = [];
|
||
resVal.data.forEach(item => {
|
||
if (item.ipv4Address && item.ipv4Address !== 'N/A') {
|
||
oneData.push(item);
|
||
} else {
|
||
twoData.push(item);
|
||
}
|
||
});
|
||
newList = oneData.concat(twoData);
|
||
this.$set(this.mapDataList, keyName, [{tableList: newList, queryParams: {total: 0}}]);
|
||
}
|
||
});
|
||
},
|
||
// pppoe回调
|
||
fnPoeDataChange() {
|
||
this.fnPppoeConfig('PPPoE配置');
|
||
},
|
||
// PPPoE配置
|
||
fnPppoeConfig(keyName) {
|
||
getPppoeConfig({clientId: this.paramsData.clientId}).then(res => {
|
||
if (res && res.data) {
|
||
res.data['pppoeEnabled'] = res.data && res.data['pppoeEnabled'] ? res.data['pppoeEnabled'].toString() : res.data['pppoeEnabled'];
|
||
res.data['clientId'] = res.data && res.data['clientId'] ? res.data['clientId'] : this.paramsData.clientId;
|
||
this.$set(this.mapDataList, keyName, [res.data]);
|
||
}
|
||
});
|
||
},
|
||
// 网络接口 ---所有网络接口名称
|
||
fnSwitchNetNames(keyName) {
|
||
this.$set(this.mapDataList, keyName,
|
||
{
|
||
'网卡信息': {title: '网卡信息', toTitle: '网卡', clientId: this.paramsData.clientId, echartList: []},
|
||
'CPU使用率': {title: 'CPU使用率(%)', titleTo: 'CPU使用率(%)', clientId: this.paramsData.clientId},
|
||
'内存使用率': {title: '内存使用率(%)', titleTo: '内存使用率(%)', clientId: this.paramsData.clientId},
|
||
'HDD磁盘空间': {title: 'HDD磁盘空间', titleTo: 'HDD磁盘空间使用情况', clientId: this.paramsData.clientId},
|
||
'CPU温度': {title: 'CPU温度', titleTo: 'CPU温度(℃)', clientId: this.paramsData.clientId},
|
||
});
|
||
// this.getMonitorData();
|
||
this.interNetCardList().then(res => {
|
||
if (res && res.length > 0) {
|
||
this.interCartList = {};
|
||
res && res.forEach(async(item,index) => {
|
||
this.$set(this.interCartList, item.interfaceName, item);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 网卡信息数据
|
||
interNetCardList() {
|
||
return postInterFaceName({clientId: this.paramsData.clientId,resourceType: 1});
|
||
},
|
||
// getMonitorData() {
|
||
// serverMonitorData({clientId: this.paramsData.clientId}).then(res => {
|
||
// if (res && res.data) {
|
||
// this.systemModel = res.data;
|
||
// }
|
||
// });
|
||
// },
|
||
// 挂载文件 === 接口名称
|
||
fnInterFaceNameList(keyName) {
|
||
mountNameList({clientId: this.paramsData.clientId}).then(res => {
|
||
if (res && res.data && res.data.length > 0) {
|
||
let tabNameList = {};
|
||
res && res.data.forEach(async(item,index) => {
|
||
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
|
||
oneData.title = item && item.mount;
|
||
oneData.toTitle = '文件系统';
|
||
oneData.clientId = this.paramsData.clientId;
|
||
tabNameList[item.mount] = oneData;
|
||
});
|
||
this.$set(this.mapDataList, keyName, tabNameList);
|
||
}
|
||
});
|
||
},
|
||
// 硬盘设备监控 列表回调
|
||
fnDiskTableData(keyName) {
|
||
this.fnDiskNames(keyName);
|
||
},
|
||
// 硬盘设备
|
||
fnDiskNames(keyName) {
|
||
diskNameList({clientId: this.paramsData.clientId}).then(res => {
|
||
if (res && res.data) {
|
||
let newList = res.data;
|
||
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]) {
|
||
this.fnMountCharList('挂载文件系统监控', val.currTimeList);
|
||
}
|
||
// else if (this.activeName && this.activeName === '硬盘设备监控' && this.mapDataList[this.activeName]) {
|
||
// this.fnDiskCharList('硬盘设备监控', val.currTimeList);
|
||
// }
|
||
},
|
||
// 网卡流量监控
|
||
async fnNetChartList(keyVal, time, interCardName, onlyInterCard) {
|
||
if (onlyInterCard) {
|
||
this.mapDataList[keyVal]['网卡信息'].echartList = [this.mapDataList[keyVal]['网卡信息'].echartList[0]];
|
||
if (await this.getNetEcharts(time, keyVal, '网卡信息', interCardName)) {
|
||
if (await this.getNetPingDropCharts(time, keyVal, '网卡信息', interCardName)) {
|
||
if (this.interCartList[interCardName].businessFlag) {
|
||
if (await this.getNetIPv4Echarts(time, keyVal, '网卡信息', interCardName)) {
|
||
this.getNetIPv6Echarts(time, keyVal, '网卡信息', interCardName);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
for (const keyName of Object.keys(this.mapDataList[keyVal])) {
|
||
if (keyName === '网卡信息') {
|
||
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)) {
|
||
await this.getNetIPv6Echarts(time, keyVal, keyName, interCardName)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} else if (keyName === 'CPU使用率') {
|
||
await this.getCpuLoadData(time, keyVal, keyName)
|
||
} else if (keyName === '内存使用率') {
|
||
await this.getMemoryUtilizationData(time, keyVal, keyName)
|
||
} else if (keyName === 'HDD磁盘空间') {
|
||
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,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,index) => {
|
||
if (Object.keys(this.mapDataList[keyVal]).length > 3) {
|
||
if (index <= 2) {
|
||
this.getSpeedEcharts(time, keyVal, keyName);
|
||
}
|
||
} else {
|
||
this.getSpeedEcharts(time, keyVal, keyName);
|
||
}
|
||
});
|
||
},
|
||
// 网卡 流量
|
||
getNetEcharts(times, keyVal, titleName, interCardName, unitData) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
|
||
mountCollect['titleTo'] = interCardName;
|
||
mountCollect['serverIp'] = this.interCartList[interCardName].serverIp;
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
||
netEcharts.fnEvent = 'getNetEcharts';
|
||
return trafficEcharts(Object.assign(unitData || {}, {name : interCardName,clientId: mountCollect.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = content.echartFors[0].title;
|
||
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
||
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
||
if (content.echartFors[0].unitSel) {
|
||
netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
|
||
netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
|
||
}
|
||
let ledgendArr = [];
|
||
if (res.data && res.data.showRealation) {
|
||
Object.keys(res.data.showRealation).forEach((key,index) => {
|
||
ledgendArr.push(res.data.showRealation[key]);
|
||
netEcharts.dataVal.dataList[index] = {
|
||
name: res.data.showRealation[key],
|
||
data: res.data && res.data.yData[key] || []
|
||
};
|
||
});
|
||
}
|
||
if (res.data && res.data.showRealation && Object.keys(res.data.showRealation).length > 5) {
|
||
netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: false, legendSelect: ledgendArr, data: ledgendArr});
|
||
} else {
|
||
netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: true, data: ledgendArr});
|
||
}
|
||
mountCollect['echartList'][0] = netEcharts;
|
||
this.$set(this.mapDataList[keyVal], titleName, mountCollect);
|
||
}
|
||
return true;
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
// 网卡 PING丢包率
|
||
getNetPingDropCharts(times, keyVal, titleName, interCardName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
|
||
mountCollect['titleTo'] = interCardName;
|
||
mountCollect['serverIp'] = this.interCartList[interCardName].serverIp;
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
||
netEcharts.fnEvent = 'getNetPingDropCharts';
|
||
return pingDroppedEchars(Object.assign({}, {name : interCardName,clientId: mountCollect.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = content.echartFors[1].title;
|
||
// netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
||
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
||
netEcharts.dataVal.dataList[0] = {
|
||
name: content.echartFors[1].oneName,
|
||
data: res.data && res.data.yData['pingDropped'] || []
|
||
};
|
||
// if (content.echartFors[1].unitSel) {
|
||
// netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
|
||
// netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
|
||
// }
|
||
// let ledgendArr = [];
|
||
// if (res.data && res.data.showRealation) {
|
||
// Object.keys(res.data.showRealation).forEach((key,index) => {
|
||
// ledgendArr.push(res.data.showRealation[key]);
|
||
// netEcharts.dataVal.dataList[index] = {
|
||
// name: res.data.showRealation[key],
|
||
// data: res.data && res.data.yData[key] || []
|
||
// };
|
||
// });
|
||
// }
|
||
// if (res.data && res.data.showRealation && Object.keys(res.data.showRealation).length > 5) {
|
||
// netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: false, legendSelect: ledgendArr, data: ledgendArr});
|
||
// } else {
|
||
// netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: true, data: ledgendArr});
|
||
// }
|
||
mountCollect['echartList'][1] = netEcharts;
|
||
this.$set(this.mapDataList[keyVal], titleName, mountCollect);
|
||
}
|
||
return true;
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
// 网卡 IPv4流量
|
||
getNetIPv4Echarts(times, keyVal, titleName, interCardName, unitData) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
|
||
mountCollect['titleTo'] = interCardName;
|
||
mountCollect['serverIp'] = this.interCartList[interCardName].serverIp;
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
||
netEcharts.fnEvent = 'getNetIPv4Echarts';
|
||
return trafficIPv4Echarts(Object.assign(unitData || {}, {name : interCardName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[2].title;
|
||
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
||
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
||
if (content.echartFors[2].unitSel) {
|
||
netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
|
||
netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
|
||
}
|
||
let ledgendArr = [];
|
||
if (res.data && res.data.showRealation) {
|
||
Object.keys(res.data.showRealation).forEach((key,index) => {
|
||
ledgendArr.push(res.data.showRealation[key]);
|
||
netEcharts.dataVal.dataList[index] = {
|
||
name: res.data.showRealation[key],
|
||
data: res.data && res.data.yData[key] || []
|
||
};
|
||
});
|
||
}
|
||
if (res.data && res.data.showRealation && Object.keys(res.data.showRealation).length > 5) {
|
||
netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: false, legendSelect: ledgendArr, data: ledgendArr});
|
||
}
|
||
mountCollect['echartList'][2] = netEcharts;
|
||
this.$set(this.mapDataList[keyVal], titleName, mountCollect);
|
||
}
|
||
return true;
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
// 网卡 IPv6流量
|
||
getNetIPv6Echarts(times, keyVal, titleName, interCardName, unitData) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.mapDataList[keyVal][titleName]));
|
||
mountCollect['titleTo'] = interCardName;
|
||
mountCollect['serverIp'] = this.interCartList[interCardName].serverIp;
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
||
netEcharts.fnEvent = 'getNetIPv6Echarts';
|
||
return trafficIPv6Echarts(Object.assign(unitData || {}, {name : interCardName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[3].title;
|
||
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
||
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
||
if (content.echartFors[3].unitSel) {
|
||
netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
|
||
netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
|
||
}
|
||
let ledgendArr = [];
|
||
if (res.data && res.data.showRealation) {
|
||
Object.keys(res.data.showRealation).forEach((key,index) => {
|
||
ledgendArr.push(res.data.showRealation[key]);
|
||
netEcharts.dataVal.dataList[index] = {
|
||
name: res.data.showRealation[key],
|
||
data: res.data && res.data.yData[key] || []
|
||
};
|
||
});
|
||
}
|
||
if (res.data && res.data.showRealation && Object.keys(res.data.showRealation).length > 5) {
|
||
netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: false, legendSelect: ledgendArr, data: ledgendArr});
|
||
}
|
||
mountCollect['echartList'][3] = netEcharts;
|
||
this.$set(this.mapDataList[keyVal], titleName, mountCollect);
|
||
}
|
||
return true;
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
// 挂载文件 空间利用率
|
||
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));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
|
||
mountEcharts.fnEvent = 'getSpaceRate';
|
||
spaceRate(Object.assign({}, {mount : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
mountEcharts.title = content.echartFors[0].title;
|
||
mountEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
||
mountEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
||
mountEcharts.dataVal.dataList[0] = {
|
||
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);
|
||
this.$modal.closeLoading();
|
||
}).catch(() => {
|
||
this.$modal.closeLoading();
|
||
});
|
||
},
|
||
// 硬盘设备 读写速率
|
||
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));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
|
||
netEcharts.fnEvent = 'getSpeedEcharts';
|
||
return speedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = content.echartFors[0].title;
|
||
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
||
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
||
netEcharts.dataVal.dataList[0] = {
|
||
name: content.echartFors[0].oneName,
|
||
data: res.data && res.data.yData['writeSpeedData'] || []
|
||
};
|
||
netEcharts.dataVal.dataList[1] = {
|
||
name: content.echartFors[0].twoName,
|
||
data: res.data && res.data.yData['readSpeedData'] || []
|
||
};
|
||
mountCollect['echartList'][0] = netEcharts;
|
||
this.$set(this.mapDataList[keyVal], titleName, mountCollect);
|
||
}
|
||
this.$modal.closeLoading();
|
||
return true;
|
||
}).catch(() => {
|
||
this.$modal.closeLoading();
|
||
return true;
|
||
});
|
||
},
|
||
getCpuLoadData(val, keyVal, titleName) {
|
||
let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
|
||
cpuData['fnEvent'] = 'getCpuLoadData';
|
||
return cpuLoadData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
||
if (res && res.data) {
|
||
cpuData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
||
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
||
cpuData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['utiData'] && res.data['yData']['utiData'].length > 0 ? res.data['yData']['utiData'] : [];
|
||
cpuData.dataVal.dataList[1].data = res && res.data && res.data['yData'] && res.data['yData']['load1Data'] && res.data['yData']['load1Data'].length > 0 ? res.data['yData']['load1Data'] : [];
|
||
cpuData.dataVal.dataList[2].data = res && res.data && res.data['yData'] && res.data['yData']['load5Data'] && res.data['yData']['load5Data'].length > 0 ? res.data['yData']['load5Data'] : [];
|
||
cpuData.dataVal.dataList[3].data = res && res.data && res.data['yData'] && res.data['yData']['load15Data'] && res.data['yData']['load15Data'].length > 0 ? res.data['yData']['load15Data'] : [];
|
||
}
|
||
let paramsCpu = Object.assign({}, this.mapDataList[keyVal][titleName], {echartList: [cpuData]});
|
||
this.$set(this.mapDataList[keyVal], titleName, paramsCpu);
|
||
return true;
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
getMemoryUtilizationData(val, keyVal, titleName) {
|
||
let memoryUtilizaData = JSON.parse(JSON.stringify(this.resultData[1]));
|
||
memoryUtilizaData['fnEvent'] = 'getMemoryUtilizationData';
|
||
return memoryUtilization(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
||
if (res && res.data) {
|
||
memoryUtilizaData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
||
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
||
memoryUtilizaData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['memoryUtilizationData'] && res.data['yData']['memoryUtilizationData'].length > 0 ? res.data['yData']['memoryUtilizationData'] : [];
|
||
if (memoryUtilizaData.dataVal.dataList[0].data.length > 0 && memoryUtilizaData.dataVal.dataList[0].data.some(num => num < 0)) {
|
||
memoryUtilizaData.dataVal.gridLeft = '-7%';
|
||
}
|
||
}
|
||
let paramsCpus = Object.assign({}, this.mapDataList[keyVal][titleName], {echartList: [memoryUtilizaData]});
|
||
this.$set(this.mapDataList[keyVal], titleName, paramsCpus);
|
||
return true;
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
// HDD磁盘空间使用情况
|
||
fnUsedSpaceCharts(times, keyVal, titleName,interCardName, unitData) {
|
||
let chartData = JSON.parse(JSON.stringify(this.resultData[1]));
|
||
chartData['fnEvent'] = 'fnUsedSpaceCharts';
|
||
return usedSpacechartsData(Object.assign(unitData || {},{clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
if (res.data.unit) {
|
||
chartData.dataVal['unitModel'] = res.data.unit || '';
|
||
chartData.dataVal['unitSelList'] = [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}];
|
||
}
|
||
chartData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
||
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
||
chartData.dataVal.dataList[0].name = '已使用';
|
||
chartData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['usedSpace'] && res.data['yData']['usedSpace'].length > 0 ? res.data['yData']['usedSpace'] : [];
|
||
if (chartData.dataVal.dataList[0].data.length > 0 && chartData.dataVal.dataList[0].data.some(num => num < 0)) {
|
||
chartData.dataVal.gridLeft = '-7%';
|
||
}
|
||
}
|
||
let paramsCpus = Object.assign({}, this.mapDataList[keyVal][titleName], {echartList: [chartData]});
|
||
this.$set(this.mapDataList[keyVal], titleName, paramsCpus);
|
||
return true;
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
// CPU温度
|
||
fnCpuTemperatureCharts(times, keyVal, titleName,interCardName, unitData) {
|
||
let chartData = JSON.parse(JSON.stringify(this.resultData[1]));
|
||
chartData['fnEvent'] = 'fnCpuTemperatureCharts';
|
||
return cpuTemperatureChartData(Object.assign(unitData || {},{clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
chartData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
||
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
||
chartData.dataVal.dataList[0].name = '温度';
|
||
chartData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['temperatureData'] && res.data['yData']['temperatureData'].length > 0 ? res.data['yData']['temperatureData'] : [];
|
||
if (chartData.dataVal.dataList[0].data.length > 0 && chartData.dataVal.dataList[0].data.some(num => num < 0)) {
|
||
chartData.dataVal.gridLeft = '-7%';
|
||
}
|
||
}
|
||
let paramsCpus = Object.assign({}, this.mapDataList[keyVal][titleName], {echartList: [chartData]});
|
||
this.$set(this.mapDataList[keyVal], titleName, paramsCpus);
|
||
return true;
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
|
||
chartFnEvent(valData, fnName, tabName, unit, keyVal, interCardName) {
|
||
// 检查函数是否存在，避免报错
|
||
if (typeof this[fnName] === 'function') {
|
||
let unitData = unit ? {unit: unit} : {};
|
||
// 调用实际函数，并传递参数（如选中的值、当前项）
|
||
this[fnName](valData, keyVal, tabName, interCardName, unitData);
|
||
} else {
|
||
console.warn(`函数 ${fnName} 未定义`);
|
||
}
|
||
},
|
||
|
||
// 滚动监听事件
|
||
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) {
|
||
if (result && result.fnCode) {
|
||
switch (result.fnCode) {
|
||
case 'cancel':
|
||
// if (this.paramsData && this.paramsData.type === 'alarmLog') {
|
||
// // this.$router.push("/resource/alarmLog");
|
||
// history.go(-1);
|
||
// } else {
|
||
// this.$router.push("/resource/serverRegister");
|
||
// }
|
||
break;
|
||
default:
|
||
}
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.headerBox {
|
||
display: inline-block;
|
||
height: 120px;
|
||
padding: 0 10px;
|
||
vertical-align: top;
|
||
}
|
||
.boxChild {
|
||
border: 1px solid #ddd;
|
||
padding: 15px 5px 15px 15px;
|
||
}
|
||
</style>
|