tornado硬件管理系统-内存与swap的实现（6）

定义仪表盘：

    def gauge_html(self, chart_id, title, val):
        gauge = Gauge(
            "{}-{}".format(self.dt, title),
            title_pos="center",
            width="100%",
            title_text_size=14,
            title_color="white",
            height=300
        )
        gauge.chart_id = chart_id
        gauge.add(
            "",
            "",
            val,
            scale_range=[0, 100],
            is_legend_show=False
        )
        return gauge.render_embed()

设置html部分：

 <div class="col-md-6 pad-left">
                        <div class="border border-white">{% raw data['swap_gauge'] %}</div>
                        <table class="table table-sm table-bordered">
                            <tr>
                                <td class="text-primary" style=" 30%">使用率（%）</td>
                                <td id="swap_percent" class="text-danger">{{ data['swap_info']['percent'] }}</td>
                            </tr>
                            <tr>
                                <td class="text-primary" style=" 30%">总量（GB）</td>
                                <td id="swap_total" class="text-danger">{{ data['swap_info']['total'] }}</td>
                            </tr>
                            <tr>
                                <td class="text-primary" style=" 30%">使用量（GB）</td>
                                <td id="swap_used" class="text-danger">{{ data['swap_info']['used'] }}</td>
                            </tr>
                            <tr>
                                <td class="text-primary" style=" 30%">剩余量（GB）</td>
                                <td id="swap_free" class="text-danger">{{ data['swap_info']['free'] }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

渲染：

#-*- conding: utf-8 -*-
# import tornado.web
from app.tools.monitor import Moniter
from app.tools.chart import Chart
from app.views.views_common import CommonHandler
#定义一个首页视图
class IndexHandler(CommonHandler):
    def get(self,*args,**kwargs):
        m = Moniter()
        c = Chart()
        cpu_info = m.cpu()
        mem_info = m.men()
        swap_info = m.swap()
        data = dict(
            cpu_info=cpu_info,
            mem_info=mem_info,
            swap_info=swap_info,
            cpu_liquid=c.liquid_html(chart_id="cpu_avg",title="Cpu-Percent",val=cpu_info['percent_avg']),
            mem_gauge=c.gauge_html("mem", "内存使用率", mem_info['percent']),
            swap_gauge=c.gauge_html("swap", "交换分区使用率", mem_info['percent']),
        )


        self.render("index.html",data=data
           )

实时更新：

  //实时更新内存
    option_mem.series[0].data[0].value = data['mem']['percent'];
    option_mem.title[0].text = data['dt']+"-内存使用率";
    myChart_mem.setOption(option_mem);
    document.getElementById("mem_percent").innerText = data['mem']['percent'];
    document.getElementById("mem_total").innerText = data['mem']['total'];
    document.getElementById("mem_used").innerText = data['mem']['used'];
    document.getElementById("mem_free").innerText = data['mem']['free'];


    //实时更新交换分区
    option_swap.series[0].data[0].value = data['swap']['percent'];
    option_swap.title[0].text = data['dt']+"-交换分区使用率";
    myChart_swap.setOption(option_swap);
    document.getElementById("swap_percent").innerText = data['swap']['percent'];
    document.getElementById("swap_total").innerText = data['swap']['total'];
    document.getElementById("swap_used").innerText = data['swap']['used'];
    document.getElementById("swap_free").innerText = data['swap']['free'];

结果：