3002/gitddsy3/templates/admin/sysmonitor.html

{% extends 'admin/base.html' %}
{% block content %}
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<style>
   .ilist{
     margin-left:50px;
     line-height:40px;
     margin-right:12px;
   }
   .ttitle{
     color:#f40;
     font-size:18px;
     font-weight:500;
   }
   .et{
      border-top:3px solid #999;
      margin-top:10px;
   }
</style>
<div>
   <div class="tt">
        列表数据
   </div>
   <div class="et">

       <li  style="display:inline-block;width:320px;height:320px;text-align:center;">
             <span>cpu使用率</span>
             <div id="cpu" style="width:300px;height:300px;"></div>
       </li>
            <li  style="display:inline-block;width:320px;height:320px;text-align:center;">
             <span>memory使用率</span>
             <div id="memory" style="width:300px;height:300px;"></div>
       </li>
   </div>
</div>
<script>
   $.get('/admin/systeminfoj',function(res){
   console.log(res.data)
      if(res.code==200){
          html="";
          data=res.data;
          html+="<div class='ilist'><span class='ttitle'>系统信息:</span>"+data['system']+"</div>";
          html+="<div class='ilist'><span class='ttitle'>系统名称:</span>"+data['node']+"</div>";
          html+="<div class='ilist'><span class='ttitle'>当前版本:</span>"+data['version']+"</div>";
          html+="<div class='ilist'><span class='ttitle'>启动时间：</span>"+data['boottime']+"</div>";
          html+="<div class='ilist'><span class='ttitle'>cpu个数:</span>"+data['cpucount']+"</div>";
          $('.tt').html(html);

          var data=res.data;
          echartsGauge('cpu',data['cpupercent'],'cpu使用率');
          echartsGauge('memory',data['memorypercent'],'内存使用率');

      }
   })

function echartsGauge(dom,datapercent,title){
 // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(dom));

 var option = {
  series: [
    {
      type: 'gauge',
      progress: {
        show: true,
        width: 28
      },
      axisLine: {
        lineStyle: {
          width: 18
        }
      },
      axisTick: {
        show: true
      },
      splitLine: {
        length: 25,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      axisLabel: {
        distance: 25,
        color: '#999',
        fontSize: 16
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 25,
        itemStyle: {
          borderWidth: 8
        }
      },
      title: {
                text: title,
                show:true,
                textStyle: {     // 标题文本样式
                    fontSize: 30
                }
            },
      detail: {
        valueAnimation: true,
        fontSize: 40,
        formatter: '{value} %',
        offsetCenter: [0, '70%']
      },
      data: [
        {
          value: datapercent
        }
      ]
    }
  ]
};
 // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


}

</script>

{% endblock %}