monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit c2387574889dbc5dbd5ba3aefe04f3342060abac 2 parents e245a275 b2be86b0

Merge branch 'master-v32-xwx' into 'master' 

杭州-阿里云详情页开发



See merge request !171
Inline Side-by-side
Showing 5 changed files with 154 additions and 5 deletions
  1 +/**
  2 + * @desc 阿里云平台
  3 + * @author joke
  4 + * @date 2020/4/16 22:11
  5 + **/
  6 +layui.define(['commonDetail','common'], function (exports) {
  7 + var commonDetail = layui.commonDetail;
  8 + var common = layui.common;
  9 + //对外暴露的接口
  10 + exports('ali_cloud_plat', function (data) {
  11 + var resId = '';
  12 + var showFlag = common.getUrlParam("show");
  13 + if(showFlag && showFlag == '0'){
  14 + resId = common.getUrlParam("resId");
  15 + }else{
  16 + resId = data.resId;
  17 + }
  18 + commonDetail.bindTips();
  19 + //基本信息
  20 + var jbxxKpi = "KPIE13DD9A3,KPIF74D9D2B,KPI72E7FB4B";
  21 + //性能信息
  22 + var xnxxKpi = "KPI9E5E1B3E,KPIBFA3F5CD,KPI1584BE1C,KPIC40A80AC,KPI5B7998C9,KPI46BAA9BE";
  23 +
  24 + reload()
  25 +
  26 + //渲染页面
  27 + function reload() {
  28 + //资源状态
  29 + commonDetail.renderResHealth("ali_cloud_plat_state",resId);
  30 + //基本信息
  31 + commonDetail.renderText("ali_cloud_plat_baseinfo",resId,jbxxKpi);
  32 + //性能信息
  33 + commonDetail.renderTextCols("ali_cloud_plat_xnxxinfo",resId,xnxxKpi,1);
  34 + // CPU分配率
  35 + commonDetail.renderGauge("ali_cloud_plat_cpu_rate",resId,"KPIBFA3F5CD");
  36 + // 内存分配率
  37 + commonDetail.renderGauge("ali_cloud_plat_mem_rate",resId,"KPIC40A80AC");
  38 + // 存储分配率
  39 + commonDetail.renderGauge("ali_cloud_plat_storage_rate",resId,"KPI46BAA9BE");
  40 + // CPU分配率走势(12小时)
  41 + commonDetail.renderLineCharat("ali_cloud_plat_cpuset_linechart",resId,"KPIBFA3F5CD","CPU分配率","cpu");
  42 + // 内存分配率走势(12小时)
  43 + commonDetail.renderLineCharat("ali_cloud_plat_memeryset_linechart",resId,"KPIC40A80AC","内存分配率","mem");
  44 + // 存储分配率走势(12小时)
  45 + commonDetail.renderLineCharat("ali_cloud_plat_storageset_linechart",resId,"KPI46BAA9BE","存储分配率","storage", null, 'KPI6EB26394');
  46 + //活动告警
  47 + commonDetail.renderActiveAlarms("ali_cloud_plat_alarms",resId);
  48 + }
  49 +
  50 + //定时任务
  51 + var timer = setInterval(function () {
  52 + reload()
  53 + },commonDetail.timerTime);
  54 + commonDetail.detailTimer.push(timer);
  55 +
  56 + });
  57 +});
@@ -459,7 +459,7 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin', @@ -459,7 +459,7 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
459 {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true}, 459 {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
460 {field: 'memorySize', title: '内存大小', align: 'center', minWidth: x_120, sort: true, templet: '<div>{{d.memorySize}} GB</div>'}, 460 {field: 'memorySize', title: '内存大小', align: 'center', minWidth: x_120, sort: true, templet: '<div>{{d.memorySize}} GB</div>'},
461 {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true}, 461 {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
462 - {field: 'ptName', title: '所属平台', minWidth: x_130, align: 'center', sort: true}, 462 + // {field: 'ptName', title: '所属平台', minWidth: x_130, align: 'center', sort: true},
463 {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'}, 463 {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
464 {field: 'adminName', title: '负责人', minWidth: x_120, align: 'center', sort: true}, 464 {field: 'adminName', title: '负责人', minWidth: x_120, align: 'center', sort: true},
465 {field: 'adminPhone', title: '负责人电话', minWidth: x_130, align: 'center', sort: true}, 465 {field: 'adminPhone', title: '负责人电话', minWidth: x_130, align: 'center', sort: true},
@@ -153,8 +153,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -153,8 +153,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
153 } 153 }
154 var $html = addIconByValue(valueStr); 154 var $html = addIconByValue(valueStr);
155 var resStyle = obj.alarmEleMatchStyle(ar.flag, ar.id); 155 var resStyle = obj.alarmEleMatchStyle(ar.flag, ar.id);
156 - span += ' <span>' + ar.name + '</span>' +  
157 - '<span title="' + titleStr + '" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">' 156 + span += ' <span style="text-align:left;width:40%">' + ar.name + '</span>' +
  157 + '<span title="' + titleStr + '" style="width:60%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">'
158 + $html + valueStr +'</span>'; 158 + $html + valueStr +'</span>';
159 //补充空白区域 159 //补充空白区域
160 if (v.length < cols) { 160 if (v.length < cols) {
  1 +<!--阿里云集群-->
  2 +<article class="page-container template">
  3 + <div class="page-panel">
  4 + <div class="main">
  5 + <div class="layui-card template_detail_content">
  6 + <div class="layui-card-body">
  7 + <div class="lay-row">
  8 + <div class="lay-row-item lay-row-item--auto-width">
  9 + <h5 class="lay-row-title">资源状态</h5>
  10 + <div class="res-state" id="ali_cloud_plat_state"></div>
  11 + </div>
  12 + <div class="lay-row-item lay-row-item--auto-width">
  13 + <h5 class="lay-row-title">基本信息<i data-id="ali_cloud_plat_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5>
  14 + <ul class="info-table" id="ali_cloud_plat_baseinfo"></ul>
  15 + </div>
  16 + <div class="lay-row-item lay-row-item--auto-width">
  17 + <h5 class="lay-row-title">资源使用概况</h5>
  18 + <ul class="info-table" id="ali_cloud_plat_xnxxinfo"></ul>
  19 + </div>
  20 + </div>
  21 + <div class="lay-row">
  22 + <div class="lay-row-item">
  23 + <h5 class="lay-row-title">CPU分配率</h5>
  24 + <ul id="ali_cloud_plat_cpu_rate" class="pie-wrap dasboard">
  25 + <li data-degree="0" class="pie-half pie-half-border-color-3">
  26 + <div class="pie-half-text">
  27 + <b>0%</b>
  28 + <span></span>
  29 + </div>
  30 + </li>
  31 + </ul>
  32 + </div>
  33 + <div class="lay-row-item">
  34 + <h5 class="lay-row-title">内存分配率</h5>
  35 + <ul id="ali_cloud_plat_mem_rate" class="pie-wrap dasboard">
  36 + <li data-degree="0" class="pie-half pie-half-border-color-3">
  37 + <div class="pie-half-text">
  38 + <b>0%</b>
  39 + <span></span>
  40 + </div>
  41 + </li>
  42 + </ul>
  43 + </div>
  44 + <div class="lay-row-item">
  45 + <h5 class="lay-row-title">存储分配率</h5>
  46 + <ul id="ali_cloud_plat_storage_rate" class="pie-wrap dasboard">
  47 + <li data-degree="0" class="pie-half pie-half-border-color-3">
  48 + <div class="pie-half-text">
  49 + <b>0%</b>
  50 + <span></span>
  51 + </div>
  52 + </li>
  53 + </ul>
  54 + </div>
  55 + </div>
  56 + <div class="lay-row">
  57 + <div class="lay-row-item">
  58 + <h5 class="lay-row-title">CPU分配率走势(12小时)</h5>
  59 + <div id="ali_cloud_plat_cpuset_linechart" class="detail_line_chart"></div>
  60 + </div>
  61 + <div class="lay-row-item">
  62 + <h5 class="lay-row-title">内存分配率走势(12小时)</h5>
  63 + <div id="ali_cloud_plat_memeryset_linechart" class="detail_line_chart"></div>
  64 + </div>
  65 + <div class="lay-row-item">
  66 + <h5 class="lay-row-title">存储分配率走势(12小时)</h5>
  67 + <div id="ali_cloud_plat_storageset_linechart" class="detail_line_chart"></div>
  68 + </div>
  69 + </div>
  70 + <div class="lay-row">
  71 + <div class="lay-row-item">
  72 + <h5 class="lay-row-title">实时告警动态</h5>
  73 + <div id="ali_cloud_plat_alarms"></div>
  74 + </div>
  75 + </div>
  76 + </div>
  77 + </div>
  78 + </div>
  79 + </div>
  80 +</article>
  81 +<textarea id="ali_cloud_plat_param_id" style="display: none;">{{d}}</textarea>
  82 +<script>
  83 + layui.use('ali_cloud_plat', function (fn) {
  84 + var $ = layui.$;
  85 + var parm = $("#ali_cloud_plat_param_id").val();
  86 + if(parm.indexOf('{{d') != -1){
  87 + fn();
  88 + }else{
  89 + fn(JSON.parse(parm));
  90 + }
  91 + });
  92 +</script>
@@ -43,7 +43,7 @@ export default { @@ -43,7 +43,7 @@ export default {
43 {value:v.value,date:v.date} 43 {value:v.value,date:v.date}
44 ) 44 )
45 legendData.push( 45 legendData.push(
46 - {value:i+1,date:v.date} 46 + {value:v.number,date:v.date}
47 ) 47 )
48 }) 48 })
49 proxy.legendData=legendData 49 proxy.legendData=legendData
@@ -82,7 +82,7 @@ export default { @@ -82,7 +82,7 @@ export default {
82 }, 82 },
83 xAxis: { 83 xAxis: {
84 type: 'category', 84 type: 'category',
85 - data: proxy.legendData, 85 + data: proxy.legendData.reverse(),
86 axisLine:{ 86 axisLine:{
87 show:true,//是否显示坐标线 87 show:true,//是否显示坐标线
88 lineStyle: { 88 lineStyle: {