<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
    <style>
        .disk-info {
            width: 100%;
            height: 300px;
        }
        .cpu-info {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="layui-anim layui-anim-fadein">
    <div class="layui-card">
        <div id="app" class="layui-card-body" style="padding: 15px;" v-cloak>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12">
                    <blockquote class="layui-elem-quote">
                        <span><b>系统名称：</b></span><span>{{system.osName}}</span>
                        <span style="margin-left: 15px;"><b>java路径：</b></span><span>{{system.javaHome}}</span>
                        <span style="margin-left: 15px;"><b>java版本：</b></span><span>{{system.javaVersion}}</span>
                    </blockquote>
                </div>
            </div>
            <div class="layui-row layui-col-space15">
                <div :class="{'layui-col-sm12': diskList.length == 1, 'layui-col-sm6': diskList.length == 2, 'layui-col-sm4': diskList.length >= 3}" v-for="(disk, index) in diskList">
                    <div :id="'disk_' + index" class="disk-info"></div>
                </div>
            </div>
            <blockquote class="layui-elem-quote">
                <span><b>CPU使用情况（%）</b></span>
            </blockquote>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12">
                    <div id="cpu" class="cpu-info"></div>
                </div>
            </div>
            <blockquote class="layui-elem-quote">
                <span><b>内存使用情况（GB）</b></span>
            </blockquote>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12">
                    <div id="memory" class="cpu-info"></div>
                </div>
            </div>
            <blockquote class="layui-elem-quote">
                <span><b>JVM使用情况（MB）</b></span>
            </blockquote>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12">
                    <div id="jvm" class="cpu-info"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="assets/js/vue.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/echarts/echarts.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: 'assets/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'laydate'], function(){
        var $ = layui.$;
        var clientId = top.restAjax.params(window.location.href).clientId;
        var firstLoading = true;

        new Vue({
            el: '#app',
            data: {
                system: {
                    osName: '-',
                    javaHome: '-',
                    javaVersion: '-',
                },
                diskList: [],
                memoryQueue: [],
                jvmQueue: [],
                cpuQueue: []
            },
            methods: {
                initDiskEChart: function() {
                    var self = this;
                    for(var i = 0; i < self.diskList.length; i++) {
                        var disk = self.diskList[i];
                        var echart = echarts.init(document.getElementById('disk_'+ i));
                        echart.setOption({
                            title: {
                                text: '路径：'+ disk.path,
                                left: 'left'
                            },
                            tooltip: {
                                formatter: '{a} <br/>{b} : {c}GB'
                            },
                            series: [
                                {
                                    name: '磁盘占用情况',
                                    type: 'gauge',
                                    radius: '85%',
                                    axisLine: {
                                        lineStyle: {
                                            width: 10
                                        }
                                    },
                                    splitLine: {
                                        length: 10
                                    },
                                    min: 0,
                                    max: disk.total,
                                    detail: {formatter: '{value}GB'},
                                    data: [{value: (parseFloat(disk.total) - parseFloat(disk.usable)).toFixed(2), name: '磁盘占用'}]
                                }
                            ]
                        });
                    }
                },
                initCpuEChart: function() {
                    var self = this;
                    var xDataTimeArray = [];
                    var systemUseRateArray = [];
                    var userUseRateArray = [];
                    var freeRateArray = [];
                    var waitRateArray = [];
                    for(var i = 0, item; item = self.cpuQueue[i++];) {
                        xDataTimeArray.push(item.time);
                        systemUseRateArray.push(item.systemUseRate);
                        userUseRateArray.push(item.userUseRate);
                        freeRateArray.push(item.freeRate);
                        waitRateArray.push(item.waitRate);
                    }
                    var echart = echarts.init(document.getElementById('cpu'));
                    echart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            formatter: function(params, ticket, callback) {
                                var result = '';
                                for(var i = 0, item; item = params[i++];) {
                                    if(result.length == 0) {
                                        result += (item.name + '<br/>');
                                    } else {
                                        result += '<br/>';
                                    }
                                    result += (item.marker + item.seriesName + ': '+ item.data +'%');
                                }
                                return result;
                            }
                        },
                        legend: {
                            data: ['系统使用率', '用户使用率', '空闲率', '等待率']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dotted',
                                }
                            },
                            data: xDataTimeArray,
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dotted',
                                }
                            },
                        },
                        series: [
                            {
                                name: '系统使用率',
                                type: 'line',
                                data: systemUseRateArray
                            },
                            {
                                name: '用户使用率',
                                type: 'line',
                                data: userUseRateArray
                            },
                            {
                                name: '空闲率',
                                type: 'line',
                                data: freeRateArray
                            },
                            {
                                name: '等待率',
                                type: 'line',
                                data: waitRateArray
                            },
                        ]
                    })
                },
                initMemoryEChart: function() {
                    var self = this;
                    var xDataTimeArray = [];
                    var totalMemoryArray = [];
                    var usedMemoryArray = [];
                    var freePhysicalMemoryArray = [];
                    for(var i = 0, item; item = self.memoryQueue[i++];) {
                        xDataTimeArray.push(item.time);
                        totalMemoryArray.push(item.totalMemory);
                        usedMemoryArray.push(item.usedMemory);
                        freePhysicalMemoryArray.push(item.freePhysicalMemory);
                    }
                    var echart = echarts.init(document.getElementById('memory'));
                    echart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            formatter: function(params, ticket, callback) {
                                var result = '';
                                for(var i = 0, item; item = params[i++];) {
                                    if(result.length == 0) {
                                        result += (item.name + '<br/>');
                                    } else {
                                        result += '<br/>';
                                    }
                                    result += (item.marker + item.seriesName + ': '+ item.data +'GB');
                                }
                                return result;
                            }
                        },
                        legend: {
                            data: ['总量', '使用量', '空闲量']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dotted',
                                }
                            },
                            data: xDataTimeArray
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dotted',
                                }
                            },
                        },
                        series: [
                            {
                                name: '总量',
                                type: 'line',
                                data: totalMemoryArray
                            },
                            {
                                name: '使用量',
                                type: 'line',
                                data: usedMemoryArray
                            },
                            {
                                name: '空闲量',
                                type: 'line',
                                data: freePhysicalMemoryArray
                            },
                        ]
                    })
                },
                initJvmEChart: function() {
                    var self = this;
                    var xDataTimeArray = [];
                    var initTotalMemorySizeArray = [];
                    var maxMemorySizeArray = [];
                    var usedMemorySizeArray = [];
                    for(var i = 0, item; item = self.jvmQueue[i++];) {
                        xDataTimeArray.push(item.time);
                        initTotalMemorySizeArray.push(item.initTotalMemorySize);
                        maxMemorySizeArray.push(item.maxMemorySize);
                        usedMemorySizeArray.push(item.usedMemorySize);
                    }
                    var echart = echarts.init(document.getElementById('jvm'));
                    echart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            formatter: function(params, ticket, callback) {
                                var result = '';
                                for(var i = 0, item; item = params[i++];) {
                                    if(result.length == 0) {
                                        result += (item.name + '<br/>');
                                    } else {
                                        result += '<br/>';
                                    }
                                    result += (item.marker + item.seriesName + ': '+ item.data +'MB');
                                }
                                return result;
                            }
                        },
                        legend: {
                            data: ['初始值', '最大值', '使用值']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dotted',
                                }
                            },
                            data: xDataTimeArray
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dotted',
                                }
                            },
                        },
                        series: [
                            {
                                name: '初始值',
                                type: 'line',
                                data: initTotalMemorySizeArray
                            },
                            {
                                name: '最大值',
                                type: 'line',
                                data: maxMemorySizeArray
                            },
                            {
                                name: '使用值',
                                type: 'line',
                                data: usedMemorySizeArray
                            },
                        ]
                    })
                },
                initClientInfo: function() {
                    var self = this;
                    var loadLayerIndex;
                    top.restAjax.get(top.restAjax.path('api/client/getclientinfobyclientid/{clientId}', [clientId]), {}, null, function(code, data) {
                        self.system = data.data.system;
                        self.diskList = data.data.diskList;
                        self.$nextTick(function() {
                            self.initDiskEChart();
                        });
                        self.memoryQueue = data.data.memoryQueue;
                        self.$nextTick(function() {
                           self.initMemoryEChart();
                        });
                        self.jvmQueue = data.data.jvmQueue;
                        self.$nextTick(function() {
                           self.initJvmEChart();
                        });
                        self.cpuQueue = data.data.cpuQueue;
                        self.$nextTick(function() {
                            self.initCpuEChart();
                        })
                    }, function(code, data) {
                        top.dialog.msg(data.msg);
                    }, function() {
                        if(firstLoading) {
                            loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
                            firstLoading = false;
                        }
                    }, function() {
                        top.dialog.close(loadLayerIndex);
                    });
                }
            },
            mounted: function() {
                var self = this;
                self.initClientInfo();
                setInterval(function() {
                    self.initClientInfo();
                }, 17000);
            }
        })
    });
</script>
</body>
</html>