monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 5d39e18d8431558dd845d760f01dcd92ac142a4c 1 parent 810e5219

tongWeb详情页开发迁移

Inline Side-by-side
Showing 3 changed files with 166 additions and 0 deletions
@@ -4751,6 +4751,28 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin', @@ -4751,6 +4751,28 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
4751 {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'}, 4751 {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
4752 {field: 'state', title: '资源状态', minWidth: x_110, align: 'center', sort: true, templet: '#resStateTpl'} 4752 {field: 'state', title: '资源状态', minWidth: x_110, align: 'center', sort: true, templet: '#resStateTpl'}
4753 ], 4753 ],
  4754 +
  4755 + "MIDDLEWARE_TONGWEB": [
  4756 + {field: 'ip', title: 'IP地址', minWidth: x_130, align: 'center', sort: true},
  4757 + {
  4758 + field: 'resName', title: '资源名称', minWidth: x_250, sort: true,
  4759 + templet: '#resindex_resName'
  4760 + },
  4761 + {field: 'resTypeName', title: '资源类型', minWidth: x_120, align: 'center'},
  4762 + {field: 'adminName', title: '负责人', minWidth: x_130, align: 'center', sort: true},
  4763 + {field: 'adminPhone', title: '负责人电话', minWidth: x_140, align: 'center', sort: true},
  4764 + {field: 'state', title: '资源状态', minWidth: x_120, align: 'center', sort: true, templet: '#resStateTpl'},
  4765 + {field: 'health', title: '健康状态', minWidth: x_120, align: 'center', sort: true, templet: '#healthTpl'},
  4766 + {field: 'lastColTime', title: '最近采集时间', minWidth: x_170, align: 'center', sort: true},
  4767 + {
  4768 + field: 'linkState',
  4769 + title: '连接状态',
  4770 + align: 'center',
  4771 + minWidth: x_120,
  4772 + templet: '#linkStateTpl',
  4773 + sort: true
  4774 + }
  4775 + ]
4754 }, 4776 },
4755 /** 4777 /**
4756 * 验证是否跳转详情页 4778 * 验证是否跳转详情页
  1 +layui.define(['tree', 'laypage', 'laytpl', 'commonDetail','common'], function (exports) {
  2 + var commonDetail = layui.commonDetail;
  3 + var common = layui.common;
  4 + var admin = layui.admin;
  5 + var $ = layui.$;
  6 + //对外暴露的接口
  7 + exports('middleware_tongweb', function (data) {
  8 + var resId = '';
  9 + var showFlag = common.getUrlParam("show");
  10 + if(showFlag && showFlag == '0'){
  11 + resId = common.getUrlParam("resId");
  12 + }else{
  13 + resId = data.resId;
  14 + }
  15 +
  16 + //基本信息
  17 + var jbxxKpi = "KPI30D23EF4,KPI0D4FF7D1,KPI899DBD7B,KPID3EBE40F";
  18 + //JVM信息
  19 + var JVMKpiIds = "KPI52EEAE15,KPIE4E53A03,KPI507E300A,KPI1DC8E10E,KPIFB096A94,KPI49DA0E19";
  20 + // 性能信息
  21 + var xnxxKpi = "KPI7C4BEB26,KPIB3E7A5C5,KPI2AE83DFC,KPI44DE46D5";
  22 +
  23 +
  24 + commonDetail.bindTips();
  25 +
  26 + renderPageInfo()
  27 +
  28 + //渲染页面
  29 + function renderPageInfo() {
  30 + //基本信息
  31 + commonDetail.renderText('tongWeb_baseinfo',resId,jbxxKpi);
  32 + //性能信息
  33 + commonDetail.renderText('tongWeb_xnxxinfo',resId,xnxxKpi);
  34 + //cpu使用率
  35 + commonDetail.renderGauge("tongWeb_cpurate", resId, "KPI7054BC34", false);
  36 + //内存使用率
  37 + commonDetail.renderGauge("tongWeb_memeryrate", resId, "KPI31CB8D97", false);
  38 + //JVM表格
  39 + commonDetail.renderText('tongWeb_JVMinfo',resId,JVMKpiIds);
  40 + //CPU使用率走势
  41 + commonDetail.renderLineCharat("tongWeb_cpurun",resId,"KPI7054BC34","CPU使用率","");
  42 + //内存使用率走势
  43 + commonDetail.renderLineCharat("tongWeb_memoryrun",resId,"KPI31CB8D97","内存使用率","");
  44 + // 告警信息
  45 + commonDetail.renderActiveAlarms('tongWeb_alarmlist', resId)
  46 + //JVM堆内存走势
  47 + commonDetail.renderLineCharat("tongWeb_heaprun",resId,"KPI6546E739","JVM堆内存走势","");
  48 + //JVM非堆内存走势
  49 + commonDetail.renderLineCharat("tongWeb_noHeaprun",resId,"KPI89306331","JVM非堆内存走势","");
  50 + }
  51 +
  52 + //定时任务
  53 + var timer = setInterval(function () {
  54 + renderPageInfo()
  55 + },commonDetail.timerTime);
  56 + commonDetail.detailTimer.push(timer);
  57 + });
  58 +});
  1 +<!--TONGWEB详细页面-->
  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">
  9 + <h5 class="lay-row-title">基本信息<i data-id="tongWeb_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5>
  10 + <ul class="info-table" id="tongWeb_baseinfo"></ul>
  11 + </div>
  12 + <div class="lay-row-item">
  13 + <h5 class="lay-row-title">CPU使用率</h5>
  14 + <ul id="tongWeb_cpurate" class="pie-wrap dasboard">
  15 + <li data-degree="0" class="pie-half pie-half-border-color-3">
  16 + <div class="pie-half-text">
  17 + <b>0%</b>
  18 + <span></span>
  19 + </div>
  20 + </li>
  21 + </ul>
  22 + </div>
  23 + <div class="lay-row-item">
  24 + <h5 class="lay-row-title">内存使用率</h5>
  25 + <ul id="tongWeb_memeryrate" class="pie-wrap dasboard">
  26 + <li data-degree="0" class="pie-half pie-half-border-color-3">
  27 + <div class="pie-half-text">
  28 + <b>0%</b>
  29 + <span></span>
  30 + </div>
  31 + </li>
  32 + </ul>
  33 + </div>
  34 + </div>
  35 +
  36 + <div class="lay-row">
  37 + <div class="lay-row-item">
  38 + <h5 class="lay-row-title">性能信息</h5>
  39 + <div class="info-table"id="tongWeb_xnxxinfo"></div>
  40 + </div>
  41 + <div class="lay-row-item">
  42 + <h5 class="lay-row-title">JVM信息</h5>
  43 + <div class="info-table" id="tongWeb_JVMinfo"></div>
  44 + </div>
  45 + </div>
  46 + <div class="lay-row">
  47 + <div class="lay-row-item">
  48 + <h5 class="lay-row-title">JVM堆内存走势</h5>
  49 + <div id="tongWeb_heaprun" class="detail_line_chart"></div>
  50 + </div>
  51 + <div class="lay-row-item">
  52 + <h5 class="lay-row-title">JVM非堆内存走势</h5>
  53 + <div id="tongWeb_noHeaprun" class="detail_line_chart"></div>
  54 + </div>
  55 + <div class="lay-row-item">
  56 + <h5 class="lay-row-title">cpu使用率走势</h5>
  57 + <div id="tongWeb_cpurun" class="detail_line_chart"></div>
  58 + </div>
  59 + <div class="lay-row-item">
  60 + <h5 class="lay-row-title">内存使用率走势</h5>
  61 + <div id="tongWeb_memoryrun" class="detail_line_chart"></div>
  62 + </div>
  63 + </div>
  64 + <div class="lay-row">
  65 + <div class="lay-row-item">
  66 + <h5 class="lay-row-title">实时告警动态</h5>
  67 + <div id="tongWeb_alarmlist"></div>
  68 + </div>
  69 + </div>
  70 + </div>
  71 + </div>
  72 + </div>
  73 + </div>
  74 +</article>
  75 +<textarea id="middleware_tongweb_param_id" style="display: none;">{{d}}</textarea>
  76 +<script>
  77 + layui.use('middleware_tongweb', function (fn) {
  78 + var $ = layui.$;
  79 + var parm = $("#middleware_tongweb_param_id").val();
  80 + if(parm.indexOf('{{d') != -1){
  81 + fn();
  82 + }else{
  83 + fn(JSON.parse(parm));
  84 + }
  85 + });
  86 +</script>