<!DOCTYPE html>
<html lang="<@t.page 'lang'/>">
<head>
    <meta charset="utf-8">
    <title><@t.page 'report.cms'/></title>
    <link href="${base}/resource/themes/css/core.css?version=6" rel="stylesheet" media="screen"/>
    <link href="${base}/resource/themes/toptry/style.css" rel="stylesheet" media="screen"/>
</head>
<body style="overflow: auto;">
<div class="pageFormContent card" layoutH>
    <fieldset>
        <legend><@t.page 'report.cms'/></legend>
        <div class="unit clearfix">
            <div id="memory_count" style="width:50%;min-width:400px;float:left;"></div>
            <div id="disk" style="width:50%;min-width:400px;float:left;"></div>
        </div>
        <div class="unit">
            <div id="memory" style="width:100%;min-width:400px;float:left;"></div>
        </div>
    </fieldset>
</div>
<script src="${base}/resource/js/jquery-1.12.4.min.js"></script>
<script src="${base}/resource/js/echarts.common.min.js"></script>
<script>
document.getElementById('memory_count').style.height=document.getElementById('memory_count').offsetWidth*0.4+'px';
document.getElementById('disk').style.height=document.getElementById('disk').offsetWidth*0.4+'px';
document.getElementById('memory').style.height=document.getElementById('memory').offsetWidth*0.3+'px';
var memoryChart={
    chart:echarts.init(document.getElementById('memory')),
    countChart:echarts.init(document.getElementById('memory_count')),
    data:{
        usedMemory:[],
        unUsedMemory:[],
        freeMemory:[]
    },
    time:[],
    toDecimal:function(number) {  
        var value = parseFloat(number);  
        if (isNaN(value)) {  
            return 0;  
        }  
        value = Math.round(number*100)/100;  
        return value;  
    }  
};
memoryChart.chart.setOption({
    title: {
        text: '<@t.page 'report.memory.history'/>'
    },
    tooltip : {
        trigger: 'axis'
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: memoryChart.time
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'<@t.page 'report.used'/>',
            type:'line',
            stack: 'temp',
            areaStyle: {normal: {}},
            data:memoryChart.data.usedMemory
       },
       {
           name:'<@t.page 'report.unused'/>',
           type:'line',
           stack: 'temp',
           areaStyle: {normal: {}},
           data:memoryChart.data.unUsedMemory
       },
       {
           name:'<@t.page 'report.memory.free'/>',
           type:'line',
           stack: 'temp',
           areaStyle: {normal: {}},
           data:memoryChart.data.freeMemory
      }]
});
memoryChart.countChart.setOption({
    title : {
        text: '<@t.page 'report.memory'/>',
        subtext: '<@t.page 'report.memory.use'/>',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
        position: [10, 10]
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series : [
        {
            name: '<@t.page 'report.memory.use'/>',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:0, name:'<@t.page 'report.used'/>'},
                {value:0, name:'<@t.page 'report.unused'/>'}
            ]
        }
    ]
});
<@_disk>
echarts.init(document.getElementById('disk')).setOption({
    title : {
        text: '<@t.page 'report.disk'/>:<@t.fileSize totalSpace/>',
        subtext: '${(rootPath?js_string)!}',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
        position: [10, 10]
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series : [
        {
            name: '<@t.page 'report.disk.space'/>',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:${(totalSpace-freeSpace)/1024/1024}, name:'<@t.page 'report.used'/>'},
                {value:${freeSpace/1024/1024}, name:'<@t.page 'report.unused'/>'}
            ]
        }
    ]
});
</@_disk>
function refreshMemory(){
    if(document.getElementById('memory')){
        $.getJSON("../sysSite/memory.html", function(data) {
            memoryChart.time.push(data.time);
            memoryChart.data.usedMemory.push(memoryChart.toDecimal((data.totalMemory-data.freeMemory)/1048576));
            memoryChart.data.freeMemory.push(memoryChart.toDecimal((data.maxMemory-data.totalMemory)/1048576));
            memoryChart.data.unUsedMemory.push(memoryChart.toDecimal(data.freeMemory/1048576));
            if(memoryChart.time.length > 200){
                memoryChart.time.shift();
                memoryChart.data.usedMemory.shift();
                memoryChart.data.freeMemory.shift();
                memoryChart.data.unUsedMemory.shift();
            }
            memoryChart.countChart.setOption({
                title:{
                    subtext: '<@t.page 'report.memory.use'/>:'+memoryChart.toDecimal(data.totalMemory/1048576)+'MB'
                },
                series: [{
                     name: '<@t.page 'report.memory.use'/>',
                     type: 'pie',
                     radius : '55%',
                     center: ['50%', '60%'],
                     data:[
                         {value:memoryChart.toDecimal((data.totalMemory-data.freeMemory)/1048576), name:'<@t.page 'report.used'/>'},
                         {value:memoryChart.toDecimal(data.freeMemory/1048576), name:'<@t.page 'report.unused'/>'}
                     ]
                 }]
            });
            memoryChart.chart.setOption({
                xAxis: {
                    data: memoryChart.time
                },
                series: [
                     {
                        name:'<@t.page 'report.used'/>',
                        type:'line',
                        stack: 'temp',
                        areaStyle: {normal: {}},
                        data:memoryChart.data.usedMemory
                    },
                    {
                        name:'<@t.page 'report.unused'/>',
                        type:'line',
                        stack: 'temp',
                        areaStyle: {normal: {}},
                        data:memoryChart.data.unUsedMemory
                    },
                    {
                        name:'<@t.page 'report.memory.free'/>',
                        type:'line',
                        stack: 'temp',
                        areaStyle: {normal: {}},
                        data:memoryChart.data.freeMemory
                    }]
            });
        });
    } else {
        if(window.memoryInterval){
            clearInterval(window.memoryInterval);
        }
    }
}
window.memoryInterval=setInterval(function () {
    refreshMemory();
}, 10000);
refreshMemory();
</script>
</body>
</html>