1041 lines
44 KiB
HTML
1041 lines
44 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<script src="${base!}/assets/platform/plugins/echarts/echarts.min.js"></script>
|
|
<style>
|
|
.host-title {
|
|
width: 180px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
background: #D9DEE4;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.host-list {
|
|
top: 50px;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
min-height: 550px;
|
|
height: 100%;
|
|
}
|
|
|
|
.host-list ul {
|
|
padding-left: 0;
|
|
min-height: 550px;
|
|
height: 100%;
|
|
}
|
|
|
|
.host-list li {
|
|
background-color: #D9DEE4;
|
|
list-style: none;
|
|
padding-bottom: 10px;
|
|
height: 50px;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.host-list li:nth-child(1) {
|
|
padding-left: 40px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.host-list li span:nth-child(1) {
|
|
padding-left: 6px;
|
|
position: absolute;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.host-list li span:nth-child(2) {
|
|
padding-left: 6px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.host-list li.active {
|
|
background-color: #FFFFFF;
|
|
cursor: default;
|
|
}
|
|
|
|
.host-list li:hover {
|
|
background-color: #FFFFFF;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a:hover {
|
|
color: #0e78c5;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<div id="app" v-cloak style="height: 100%;">
|
|
<guava>
|
|
<el-row style="height: 100%;">
|
|
<el-col :span="4" style="background-color: #D9DEE4;height: 100%;">
|
|
<div class="host-list">
|
|
<ul>
|
|
<li @click="loaddata" :class="hostName==''?'active':''">
|
|
<span>主机列表</span>
|
|
</li>
|
|
<li v-for="o in hostList" @click="loadhost(o.hostName)" :class="hostName==o.hostName?'active':''">
|
|
<span>{{o.hostName}}</span>
|
|
<span>{{o.hostAddress}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="20">
|
|
|
|
<el-row class="header navbar bg-white">
|
|
<div class="btn-group tool-button mt5">
|
|
<span>主机: {{hostName==''?'全部主机':hostName}}</span>
|
|
<el-button v-if="hostName" style="margin-left:3px" type="text" icon="ti-stats-up"
|
|
@click="openCupMem" title="资源监控"></el-button>
|
|
<el-button style="margin-left:3px" type="text" icon="ti-timer"
|
|
@click="openTask" title="任务列表"></el-button>
|
|
<el-button style="margin-left:3px" type="text" icon="ti-reload"
|
|
@click="hostData" title="刷新数据"></el-button>
|
|
|
|
</div>
|
|
<div class="pull-right offscreen-right mt5" style="margin-right: 18%;">
|
|
<a class="el-button el-button--default el-button--medium" href="${base}/platform/sys/app/jar"
|
|
data-pjax>安装包</a>
|
|
<a class="el-button el-button--default el-button--medium"
|
|
href="${base}/platform/sys/app/conf">配置文件</a>
|
|
|
|
</div>
|
|
</el-row>
|
|
<el-row class="el-table-container">
|
|
<el-table
|
|
:data="appList"
|
|
size="small"
|
|
header-align="center"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column
|
|
prop="name"
|
|
label="实例名称"
|
|
header-align="center"
|
|
align="left"
|
|
width="130"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="processId"
|
|
label="进程ID"
|
|
width="56"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="hostName"
|
|
label="主机信息"
|
|
width="130"
|
|
:show-overflow-tooltip="true"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span style="font-size: 12px;">{{scope.row.hostName}}</span><br/>
|
|
<span style="font-size: 10px;">{{scope.row.hostAddress}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="hostName"
|
|
label="JVM"
|
|
width="180"
|
|
:show-overflow-tooltip="true"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>Total: {{scope.row.vmTotal}}MB</span>
|
|
<span>Use: {{scope.row.vmUse}}MB</span><br/>
|
|
<span>Free: {{scope.row.vmFree}}MB</span>
|
|
<span>Max: {{scope.row.vmMax}}MB</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="loglevel"
|
|
label="日志等级"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.loglevel}}</span>
|
|
<el-button style="padding: 10px 3px" type="text" icon="el-icon-edit"
|
|
title="更改日志等级"
|
|
@click="openLoglevel({action:'processId',name:scope.row.name,processId:scope.row.processId,loglevel:scope.row.loglevel})"></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="uptime"
|
|
label="运行时间">
|
|
<template slot-scope="scope">
|
|
{{formatUptime(scope.row.uptime)}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="appVersion"
|
|
label="运行版本"
|
|
width="132"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>
|
|
安装包: {{scope.row.appVersion?scope.row.appVersion:'未获取'}}
|
|
</span><br/>
|
|
<span>
|
|
配置文件: {{scope.row.confVersion?scope.row.confVersion:'未获取'}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
header-align="center"
|
|
align="left"
|
|
width="75">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" icon="ti-power-off"
|
|
title="停止"
|
|
:disabled="getOffDisabled(scope.row)" @click="openStop(scope.row)"></el-button>
|
|
<el-button type="text" icon="ti-desktop"
|
|
title="启动新实例"
|
|
:disabled="getStartDisabled(scope.row)"
|
|
@click="openStart(scope.row)"></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</guava>
|
|
|
|
|
|
<el-dialog
|
|
:title="stopTitle"
|
|
:visible.sync="stopDialogVisible"
|
|
width="40%">
|
|
<el-form :model="formData" ref="addForm" size="small" label-width="120px">
|
|
<el-form-item prop="name" label="实例名" style="margin-bottom:0">
|
|
{{formData.name}}
|
|
</el-form-item>
|
|
<el-form-item prop="processId" label="进程ID" style="margin-bottom:0">
|
|
{{formData.processId}}
|
|
</el-form-item>
|
|
<el-form-item prop="name" label="安装包版本" style="margin-bottom:0">
|
|
{{formData.appVersion}}
|
|
</el-form-item>
|
|
<el-form-item prop="name" label="配置文件版本" style="margin-bottom:0">
|
|
{{formData.confVersion}}
|
|
</el-form-item>
|
|
<el-alert
|
|
title="执行命令需要时间，注意不要把一个实例下所有进程都停止了哦……"
|
|
type="warning" :closable="false">
|
|
</el-alert>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="stopDialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="doStop">创建任务</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog
|
|
title="日志等级"
|
|
:visible.sync="loglevelDialogVisible"
|
|
width="40%">
|
|
<el-form label-width="20px">
|
|
<el-form-item>
|
|
实例名: {{formData.name}} 进程ID:{{formData.processId||"所有进程"}}
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-radio-group v-model="formData.loglevel" size="medium">
|
|
<el-radio label="INFO">INFO</el-radio>
|
|
<el-radio label="WARN">WARN</el-radio>
|
|
<el-radio label="ERROR">ERROR</el-radio>
|
|
<el-radio label="DEBUG">DEBUG</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="loglevelDialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="doLoglevel">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
:title="startTitle"
|
|
:visible.sync="startDialogVisible"
|
|
width="40%">
|
|
<el-form :model="formData" ref="addForm" :rules="formRules" size="small" label-width="120px">
|
|
|
|
<el-form-item prop="name" label="实例名" style="margin-bottom:0">
|
|
{{formData.name}}
|
|
</el-form-item>
|
|
<el-form-item prop="appVersion" label="安装包版本" style="margin-bottom:0">
|
|
<el-select v-model="formData.appVersion" clearable placeholder="请选择">
|
|
<el-option
|
|
v-for="item in appVerList"
|
|
:key="item.appVersion"
|
|
:label="item.appVersion"
|
|
:value="item.appVersion">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="confVersion" label="配置文件版本" style="margin-bottom:0">
|
|
<el-select v-model="formData.confVersion" clearable placeholder="请选择">
|
|
<el-option
|
|
v-for="item in confVerList"
|
|
:key="item.confVersion"
|
|
:label="item.confVersion"
|
|
:value="item.confVersion">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="startDialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="doStart">创建任务</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
title="任务列表"
|
|
:visible.sync="taskDialogVisible"
|
|
width="88%">
|
|
<el-row style="margin-top: -72px;margin-bottom: -50px;">
|
|
<el-button style="padding-left:88px;" type="text" icon="ti-reload"
|
|
@click="pageData" title="刷新数据"></el-button>
|
|
<el-table
|
|
:data="tableData"
|
|
@sort-change='pageOrder'
|
|
size="small"
|
|
header-align="center"
|
|
style="width: 100%"
|
|
:default-sort="{prop: 'createdAt', order: 'descending'}"
|
|
>
|
|
<el-table-column
|
|
sortable
|
|
prop="name"
|
|
label="实例名称"
|
|
header-align="center"
|
|
align="center"
|
|
width="150"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
sortable
|
|
prop="hostName"
|
|
label="主机名"
|
|
header-align="center"
|
|
align="center"
|
|
width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{scope.row.hostName}}<br/>
|
|
<span style="font-size: 10px;">{{scope.row.hostAddress}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="appVersion"
|
|
label="软件版本"
|
|
width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
安装包:{{scope.row.appVersion}}<br/>
|
|
配置文件:{{scope.row.confVersion}}<br/>
|
|
<span v-if="scope.row.processId">进程ID:{{scope.row.processId}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="action"
|
|
label="命令"
|
|
width="60"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
sortable
|
|
prop="status"
|
|
label="状态"
|
|
header-align="center"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.status==0">待执行</span>
|
|
<span v-if="scope.row.status==1">执行中</span>
|
|
<span v-if="scope.row.status==2">执行成功</span>
|
|
<span v-if="scope.row.status==3">执行失败</span>
|
|
<span v-if="scope.row.status==4">已撤销</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="pushAt"
|
|
label="执行时间"
|
|
header-align="center" align="center">
|
|
<template slot-scope="scope">
|
|
{{formatTaskAt(scope.row.pushAt)}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="pushResult"
|
|
label="执行结果"
|
|
header-align="center"
|
|
align="center"
|
|
width="100"
|
|
:show-overflow-tooltip="true"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
sortable
|
|
prop="createdAt"
|
|
label="创建时间"
|
|
header-align="center" align="center">
|
|
<template slot-scope="scope">
|
|
{{formatTaskAt(scope.row.createdAt)}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="createdBy"
|
|
label="创建人"
|
|
header-align="center" align="center">
|
|
<template slot-scope="scope">
|
|
{{scope.row.user.loginname}}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
label="操作"
|
|
width="80">
|
|
<template slot-scope="scope">
|
|
<el-button v-if="scope.row.status==0" @click="cannelTask(scope.row.id)" size="small"
|
|
type="text">撤销
|
|
</el-button>
|
|
<el-button v-if="scope.row.status!=0" size="small" type="text" disabled>撤销</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
@size-change="pageSizeChange"
|
|
@current-change="pageNumberChange"
|
|
:current-page="pageForm.pageNumber"
|
|
:page-sizes="[10, 20, 30, 50]"
|
|
:page-size="pageForm.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="pageForm.totalCount">
|
|
</el-pagination>
|
|
</el-row>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="taskDialogVisible = false">关 闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
:title="hostName+' '+hostHdd"
|
|
:visible.sync="cpuMemDialogVisible"
|
|
width="55%">
|
|
<el-row style="margin-top: -32px;margin-bottom: -50px;">
|
|
<el-button type="text" icon="ti-reload"
|
|
@click="getCpuMem" title="刷新数据"></el-button>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<div id="div_cpu" style="width:300px;height:200px"></div>
|
|
</el-col>
|
|
<el-col :span="12" style="padding-left: 5px;">
|
|
<div id="div_tcp" style="width:300px;height:200px"></div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12" style="padding-left: 5px;">
|
|
<div id="div_mem" style="width:300px;height:200px"></div>
|
|
</el-col>
|
|
<el-col :span="12" style="padding-left: 10px;">
|
|
<div id="div_net" style="width:300px;height:200px"></div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</el-row>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="cpuMemDialogVisible = false">关 闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
<script>
|
|
new Vue({
|
|
el: "#app",
|
|
data: function () {
|
|
return {
|
|
stopDialogVisible: false,
|
|
startDialogVisible: false,
|
|
taskDialogVisible: false,
|
|
cpuMemDialogVisible: false,
|
|
loglevelDialogVisible: false,
|
|
loglevelDialogTitle: "",
|
|
stopTitle: "",
|
|
startTitle: "",
|
|
hostName: "",
|
|
hostHdd: "",
|
|
hostList: [],
|
|
appList: [],
|
|
tableData: [],
|
|
pageForm: {
|
|
pageNumber: 1,
|
|
pageSize: 10,
|
|
totalCount: 0,
|
|
pageOrderName: "createdAt",
|
|
pageOrderBy: "descending",
|
|
},
|
|
formData: {
|
|
id: ""
|
|
},
|
|
formRules: {
|
|
confVersion: [
|
|
{required: true, message: '配置文件版本', trigger: 'blur'}
|
|
],
|
|
appVersion: [
|
|
{required: true, message: '安装包版本', trigger: 'blur'}
|
|
]
|
|
},
|
|
appVerList: [],
|
|
confVerList: [],
|
|
netOption: {},
|
|
cpuOption: {},
|
|
memOption: {}
|
|
}
|
|
},
|
|
methods: {
|
|
formatUptime: function (val) {
|
|
var up = moment(val * 1000);
|
|
var now = moment();
|
|
var hours = now.diff(up, 'hours');
|
|
var minutes = now.diff(up, 'minutes') % 60;
|
|
var seconds = now.diff(up, 'seconds') % 60;
|
|
return hours + "小时" + minutes + "分钟" + seconds + "秒";
|
|
},
|
|
pageOrder: function (column) {//按字段排序
|
|
this.pageForm.pageOrderName = column.prop;
|
|
this.pageForm.pageOrderBy = column.order;
|
|
this.pageData();
|
|
},
|
|
pageNumberChange: function (val) {//页码更新操作
|
|
this.pageForm.pageNumber = val;
|
|
this.pageData();
|
|
},
|
|
pageSizeChange: function (val) {//分页大小更新操作
|
|
this.pageForm.pageSize = val;
|
|
this.pageData();
|
|
},
|
|
pageData: function () {//加载分页数据
|
|
var self = this;
|
|
$.post(base + "/platform/sys/app/task/data", self.pageForm, function (data) {
|
|
sublime.closeLoadingbar();//关闭loading
|
|
if (data.code == 0) {
|
|
self.tableData = data.data.list;
|
|
self.pageForm.totalCount = data.data.totalCount;
|
|
} else {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
},
|
|
hostData: function () {//加载分页数据
|
|
var self = this;
|
|
sublime.showLoadingbar();//显示loading
|
|
$.post(base + "/platform/sys/app/data", {hostName: self.hostName}, function (data) {
|
|
sublime.closeLoadingbar();//关闭loading
|
|
if (data.code == 0) {
|
|
self.hostList = data.data.hostList;
|
|
self.appList = data.data.appList;
|
|
} else {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
},
|
|
formatAt: function (val) {
|
|
if (val && val > 0)
|
|
return moment(val * 1000).format("YYYY-MM-DD HH:mm");
|
|
return "";
|
|
},
|
|
formatTaskAt: function (val) {
|
|
if (val && val > 0)
|
|
return moment(val * 1000).format("MM-DD HH:mm");
|
|
return "";
|
|
},
|
|
formatCpuAt: function (val) {
|
|
if (val && val > 0)
|
|
return moment(val * 1000).format("HH:mm:ss");
|
|
return "";
|
|
},
|
|
loaddata: function () {
|
|
this.hostName = "";
|
|
this.hostData();
|
|
},
|
|
loadhost: function (h) {
|
|
this.hostName = h;
|
|
this.hostData();
|
|
},
|
|
getStartDisabled: function (obj) {
|
|
//判断是否可以启动主机,满足条件为获取版本号
|
|
if (obj.appVersion && obj.confVersion) {
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
getOffDisabled: function (obj) {
|
|
//判断是否可以关机,满足条件为能获取版本号,且运行实例数量大于1
|
|
var self = this;
|
|
var num = 0;
|
|
var enabled = false;
|
|
self.appList.forEach(function (app) {
|
|
if (app.name == obj.name && app.appVersion && app.confVersion) {
|
|
num++;
|
|
if (app.processId == obj.processId) {
|
|
enabled = true;
|
|
}
|
|
}
|
|
});
|
|
if (num > 1 && enabled) {
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
openStart: function (row) {
|
|
var self = this;
|
|
self.startTitle = "启动新实例";
|
|
self.startDialogVisible = true;
|
|
self.formData = {
|
|
name: row.name,
|
|
hostName: row.hostName,
|
|
hostAddress: row.hostAddress,
|
|
confVersion: "",
|
|
appVersion: "",
|
|
action: "start"
|
|
};
|
|
$.post(base + "/platform/sys/app/version", {name: self.formData.name}, function (data) {
|
|
if (data.code == 0) {
|
|
self.appVerList = data.data.appVerList;
|
|
self.confVerList = data.data.confVerList;
|
|
}
|
|
}, "json");
|
|
},
|
|
openStop: function (row) {
|
|
var self = this;
|
|
self.stopTitle = "停止实例";
|
|
self.stopDialogVisible = true;
|
|
self.formData = {
|
|
name: row.name,
|
|
hostName: row.hostName,
|
|
hostAddress: row.hostAddress,
|
|
confVersion: row.confVersion,
|
|
appVersion: row.appVersion,
|
|
processId: row.processId,
|
|
action: "stop"
|
|
};
|
|
},
|
|
doStart: function () {
|
|
var self = this;
|
|
self.$refs["addForm"].validate(function (valid) {
|
|
if (valid) {
|
|
$.post(base + "/platform/sys/app/task/addDo", self.formData, function (data) {
|
|
if (data.code == 0) {
|
|
self.$message({
|
|
message: "任务创建成功，可在任务列表中查看进度……",
|
|
type: 'success'
|
|
});
|
|
self.startDialogVisible = false;
|
|
} else {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
}
|
|
});
|
|
},
|
|
doStop: function () {
|
|
var self = this;
|
|
self.$refs["addForm"].validate(function (valid) {
|
|
if (valid) {
|
|
$.post(base + "/platform/sys/app/task/addDo", self.formData, function (data) {
|
|
if (data.code == 0) {
|
|
self.$message({
|
|
message: "任务创建成功，可在任务列表中查看进度……",
|
|
type: 'success'
|
|
});
|
|
self.stopDialogVisible = false;
|
|
} else {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
}
|
|
});
|
|
},
|
|
openTask: function () {
|
|
this.pageData();
|
|
this.taskDialogVisible = true;
|
|
},
|
|
cannelTask: function (id) {
|
|
var self = this;
|
|
$.post(base + "/platform/sys/app/task/cannel/" + id, {}, function (data) {
|
|
if (data.code == 0) {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'success'
|
|
});
|
|
self.pageData();
|
|
} else {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
},
|
|
getCpuMem: function () {
|
|
var self = this;
|
|
$.post(base + "/platform/sys/app/osData", {hostName: self.hostName}, function (data) {
|
|
if (data.code == 0) {
|
|
var list = data.data;
|
|
var net_sent = [];
|
|
var net_recv = [];
|
|
var net_tcp = [];
|
|
var time_list = [];
|
|
var cpu_percent = [];
|
|
var mem_used = [];
|
|
var mem_free = [];
|
|
var mem_percent = [];
|
|
var mem_total = 0;
|
|
var sent_temp = 0, recv_temp = 0;
|
|
var i = 0;
|
|
var disk = list[0];
|
|
self.hostHdd = "磁盘已用" + ((disk.hdd_used) / 1024 / 1024 / 1024).toFixed(2) + "GB/总共" + ((disk.hdd_total) / 1024 / 1024 / 1024).toFixed(2) + "GB";
|
|
list.forEach(function (o) {
|
|
net_sent.push(i === 0 ? 0.1 : ((o.net_sent - sent_temp) / 1024).toFixed(2));
|
|
net_recv.push(i === 0 ? 0.1 : ((o.net_recv - recv_temp) / 1024).toFixed(2));
|
|
net_tcp.push(o.net_tcp);
|
|
time_list.push(self.formatCpuAt(o.timestamp));
|
|
cpu_percent.push(o.cpu_percent);
|
|
mem_used.push(o.mem_used);
|
|
mem_free.push(o.mem_free);
|
|
mem_percent.push(o.mem_percent);
|
|
mem_total = o.mem_total;
|
|
sent_temp = o.net_sent;
|
|
recv_temp = o.net_recv;
|
|
i++;
|
|
});
|
|
var colors = ['#5793f3', '#d14a61', '#675bba', '#000000', '#EE0BD4', '#16E2BD'];
|
|
self.netOption = {
|
|
color: colors,
|
|
tooltip: {
|
|
trigger: 'none',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['出网kbps', '入网kbps']
|
|
},
|
|
grid: {
|
|
top: 50,
|
|
bottom: 50,
|
|
left: 50
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLine: {
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: colors[1]
|
|
}
|
|
},
|
|
axisPointer: {
|
|
label: {
|
|
formatter: function (params) {
|
|
return '入网 ' + params.value
|
|
+ (params.seriesData.length ? ' - ' + params.seriesData[0].data + 'kbps' : '');
|
|
}
|
|
}
|
|
},
|
|
data: time_list
|
|
},
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLine: {
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: colors[0]
|
|
}
|
|
},
|
|
axisPointer: {
|
|
label: {
|
|
formatter: function (params) {
|
|
return '出网 ' + params.value
|
|
+ (params.seriesData.length ? ' - ' + params.seriesData[0].data + 'kbps' : '');
|
|
}
|
|
}
|
|
},
|
|
data: time_list
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '出网kbps',
|
|
type: 'line',
|
|
xAxisIndex: 1,
|
|
smooth: true,
|
|
data: net_sent
|
|
},
|
|
{
|
|
name: '入网kbps',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: net_recv
|
|
}
|
|
]
|
|
};
|
|
var cpu_title = 'CPU占用情况';
|
|
self.cpuOption = {
|
|
color: colors[4],
|
|
tooltip: {
|
|
trigger: 'none',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
legend: {
|
|
data: [cpu_title]
|
|
},
|
|
grid: {
|
|
top: 30,
|
|
bottom: 50,
|
|
left: 50
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLine: {
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: colors[3]
|
|
}
|
|
},
|
|
axisPointer: {
|
|
label: {
|
|
formatter: function (params) {
|
|
return 'CPU ' + params.value
|
|
+ (params.seriesData.length ? ' - ' + params.seriesData[0].data + '%' : '');
|
|
}
|
|
}
|
|
},
|
|
data: time_list
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: cpu_title,
|
|
type: 'line',
|
|
xAxisIndex: 0,
|
|
smooth: true,
|
|
data: cpu_percent
|
|
}
|
|
]
|
|
};
|
|
var mem_title = '内存占用情况(总内存' + (mem_total / 1024 / 1024 / 1024).toFixed(2) + 'G)';
|
|
self.memOption = {
|
|
color: colors[5],
|
|
tooltip: {
|
|
trigger: 'none',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
legend: {
|
|
data: [mem_title]
|
|
},
|
|
grid: {
|
|
top: 30,
|
|
bottom: 50,
|
|
left: 50
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLine: {
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: colors[3]
|
|
}
|
|
},
|
|
axisPointer: {
|
|
label: {
|
|
formatter: function (params) {
|
|
var dataIndex = params.seriesData[0].dataIndex;
|
|
var temp = ' 已用:' + (mem_used[dataIndex] / 1024 / 1024 / 1024).toFixed(2) + 'G';
|
|
temp += ' 空闲:' + (mem_free[dataIndex] / 1024 / 1024 / 1024).toFixed(2) + 'G';
|
|
return '内存 ' + params.value
|
|
+ (params.seriesData.length ? ' - ' + params.seriesData[0].data + '%' + temp : '');
|
|
}
|
|
}
|
|
},
|
|
data: time_list
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: mem_title,
|
|
type: 'line',
|
|
xAxisIndex: 0,
|
|
smooth: true,
|
|
data: mem_percent
|
|
}
|
|
]
|
|
};
|
|
var tcp_title='TCP连接数';
|
|
self.tcpOption = {
|
|
color: colors[2],
|
|
tooltip: {
|
|
trigger: 'none',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
legend: {
|
|
data: [tcp_title]
|
|
},
|
|
grid: {
|
|
top: 30,
|
|
bottom: 50,
|
|
left: 50
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLine: {
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: colors[3]
|
|
}
|
|
},
|
|
axisPointer: {
|
|
label: {
|
|
formatter: function (params) {
|
|
return '连接数 ' + params.value
|
|
+ (params.seriesData.length ? ' - ' + params.seriesData[0].data + '个' : '');
|
|
}
|
|
}
|
|
},
|
|
data: time_list
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: tcp_title,
|
|
type: 'line',
|
|
xAxisIndex: 0,
|
|
smooth: true,
|
|
data: net_tcp
|
|
}
|
|
]
|
|
};
|
|
var div_cpu = document.getElementById("div_cpu");
|
|
div_cpu.style.width = div_cpu.clientWidth + "px";
|
|
self.echartCt = echarts.init(div_cpu);
|
|
self.echartCt.setOption(self.cpuOption, true);
|
|
var div_mem = document.getElementById("div_mem");
|
|
div_mem.style.width = div_mem.clientWidth + "px";
|
|
self.echartCt = echarts.init(div_mem);
|
|
self.echartCt.setOption(self.memOption, true);
|
|
var div_net = document.getElementById("div_net");
|
|
div_net.style.width = div_net.clientWidth + "px";
|
|
self.echartCt = echarts.init(div_net);
|
|
self.echartCt.setOption(self.netOption, true);
|
|
var div_tcp = document.getElementById("div_tcp");
|
|
div_tcp.style.width = div_tcp.clientWidth + "px";
|
|
self.echartCt = echarts.init(div_tcp);
|
|
self.echartCt.setOption(self.tcpOption, true);
|
|
}
|
|
}, "json");
|
|
},
|
|
openCupMem: function () {
|
|
var self = this;
|
|
self.cpuMemDialogVisible = true;
|
|
self.getCpuMem();
|
|
},
|
|
openLoglevel: function (obj) {
|
|
var self = this;
|
|
self.formData = obj;
|
|
if (obj.action == "name") {
|
|
self.loglevelDialogTitle = "实例名: " + obj.name;
|
|
}
|
|
if (obj.action == "processId") {
|
|
self.loglevelDialogTitle = "实例名: " + obj.name + " 进程ID: " + obj.processId;
|
|
}
|
|
self.loglevelDialogVisible = true;
|
|
},
|
|
doLoglevel: function () {
|
|
var self = this;
|
|
$.post(base + "/platform/sys/app/loglevel", self.formData, function (data) {
|
|
if (data.code == 0) {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'success'
|
|
});
|
|
self.loglevelDialogVisible = false;
|
|
self.hostData();
|
|
} else {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
}
|
|
},
|
|
created: function () {
|
|
this.hostData();
|
|
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#--> |