monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 4a80bc4e31d8a18678e043cf30fefc0c3f307444 1 parent da82a82b

杭州-阿里云详情页开发

Inline Side-by-side
Showing 4 changed files with 152 additions and 3 deletions
/**
* @desc 阿里云平台
* @author joke
* @date 2020/4/16 22:11
**/
layui.define(['commonDetail','common'], function (exports) {
var commonDetail = layui.commonDetail;
var common = layui.common;
//对外暴露的接口
exports('ali_cloud_plat', function (data) {
var resId = '';
var showFlag = common.getUrlParam("show");
if(showFlag && showFlag == '0'){
resId = common.getUrlParam("resId");
}else{
resId = data.resId;
}
commonDetail.bindTips();
//基本信息
var jbxxKpi = "KPIE13DD9A3,KPIF74D9D2B,KPI72E7FB4B";
//性能信息
var xnxxKpi = "KPI9E5E1B3E,KPIBFA3F5CD,KPI1584BE1C,KPIC40A80AC,KPI5B7998C9,KPI46BAA9BE";
reload()
//渲染页面
function reload() {
//资源状态
commonDetail.renderResHealth("ali_cloud_plat_state",resId);
//基本信息
commonDetail.renderText("ali_cloud_plat_baseinfo",resId,jbxxKpi);
//性能信息
commonDetail.renderTextCols("ali_cloud_plat_xnxxinfo",resId,xnxxKpi,1);
// CPU分配率
commonDetail.renderGauge("ali_cloud_plat_cpu_rate",resId,"KPIBFA3F5CD");
// 内存分配率
commonDetail.renderGauge("ali_cloud_plat_mem_rate",resId,"KPIC40A80AC");
// 存储分配率
commonDetail.renderGauge("ali_cloud_plat_storage_rate",resId,"KPI46BAA9BE");
// CPU分配率走势(12小时)
commonDetail.renderLineCharat("ali_cloud_plat_cpuset_linechart",resId,"KPIBFA3F5CD","CPU分配率","cpu");
// 内存分配率走势(12小时)
commonDetail.renderLineCharat("ali_cloud_plat_memeryset_linechart",resId,"KPIC40A80AC","内存分配率","mem");
// 存储分配率走势(12小时)
commonDetail.renderLineCharat("ali_cloud_plat_storageset_linechart",resId,"KPI46BAA9BE","存储分配率","storage", null, 'KPI6EB26394');
//活动告警
commonDetail.renderActiveAlarms("ali_cloud_plat_alarms",resId);
}
//定时任务
var timer = setInterval(function () {
reload()
},commonDetail.timerTime);
commonDetail.detailTimer.push(timer);
});
});
\ No newline at end of file
... ...
... ... @@ -459,7 +459,7 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
{field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
{field: 'memorySize', title: '内存大小', align: 'center', minWidth: x_120, sort: true, templet: '<div>{{d.memorySize}} GB</div>'},
{field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
{field: 'ptName', title: '所属平台', minWidth: x_130, align: 'center', sort: true},
// {field: 'ptName', title: '所属平台', minWidth: x_130, align: 'center', sort: true},
{field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
{field: 'adminName', title: '负责人', minWidth: x_120, align: 'center', sort: true},
{field: 'adminPhone', title: '负责人电话', minWidth: x_130, align: 'center', sort: true},
... ...
... ... @@ -153,8 +153,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
}
var $html = addIconByValue(valueStr);
var resStyle = obj.alarmEleMatchStyle(ar.flag, ar.id);
span += ' <span>' + ar.name + '</span>' +
'<span title="' + titleStr + '" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">'
span += ' <span style="text-align:left;width:40%">' + ar.name + '</span>' +
'<span title="' + titleStr + '" style="width:60%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">'
+ $html + valueStr +'</span>';
//补充空白区域
if (v.length < cols) {
... ...
<!--阿里云集群-->
<article class="page-container template">
<div class="page-panel">
<div class="main">
<div class="layui-card template_detail_content">
<div class="layui-card-body">
<div class="lay-row">
<div class="lay-row-item lay-row-item--auto-width">
<h5 class="lay-row-title">资源状态</h5>
<div class="res-state" id="ali_cloud_plat_state"></div>
</div>
<div class="lay-row-item lay-row-item--auto-width">
<h5 class="lay-row-title">基本信息<i data-id="ali_cloud_plat_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5>
<ul class="info-table" id="ali_cloud_plat_baseinfo"></ul>
</div>
<div class="lay-row-item lay-row-item--auto-width">
<h5 class="lay-row-title">资源使用概况</h5>
<ul class="info-table" id="ali_cloud_plat_xnxxinfo"></ul>
</div>
</div>
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">CPU分配率</h5>
<ul id="ali_cloud_plat_cpu_rate" class="pie-wrap dasboard">
<li data-degree="0" class="pie-half pie-half-border-color-3">
<div class="pie-half-text">
<b>0%</b>
<span></span>
</div>
</li>
</ul>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">内存分配率</h5>
<ul id="ali_cloud_plat_mem_rate" class="pie-wrap dasboard">
<li data-degree="0" class="pie-half pie-half-border-color-3">
<div class="pie-half-text">
<b>0%</b>
<span></span>
</div>
</li>
</ul>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">存储分配率</h5>
<ul id="ali_cloud_plat_storage_rate" class="pie-wrap dasboard">
<li data-degree="0" class="pie-half pie-half-border-color-3">
<div class="pie-half-text">
<b>0%</b>
<span></span>
</div>
</li>
</ul>
</div>
</div>
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">CPU分配率走势(12小时)</h5>
<div id="ali_cloud_plat_cpuset_linechart" class="detail_line_chart"></div>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">内存分配率走势(12小时)</h5>
<div id="ali_cloud_plat_memeryset_linechart" class="detail_line_chart"></div>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">存储分配率走势(12小时)</h5>
<div id="ali_cloud_plat_storageset_linechart" class="detail_line_chart"></div>
</div>
</div>
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">实时告警动态</h5>
<div id="ali_cloud_plat_alarms"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<textarea id="ali_cloud_plat_param_id" style="display: none;">{{d}}</textarea>
<script>
layui.use('ali_cloud_plat', function (fn) {
var $ = layui.$;
var parm = $("#ali_cloud_plat_param_id").val();
if(parm.indexOf('{{d') != -1){
fn();
}else{
fn(JSON.parse(parm));
}
});
</script>
\ No newline at end of file
... ...