<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <title>kwebs云管</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <%include file="../include/static.html"/>
</head>

<body>
    <div id="app">
        <div style="background:#FFF">
            <div v-if="data.platform" style="padding-top:20px;height:80px;">
                <div style="float:left;margin-left:20px;width:50px;height:50px;">
                    <i v-if="data.platform.indexOf('Windows')!=-1" class="fa fa-windows" aria-hidden="true" style="font-size:60px;"></i>
                    <i v-else-if="data.platform.indexOf('centos')!=-1"><img src="${config.domain['kcwebsimg']}/icon/centos.png" style="float:left;height:60px" alt=""></i>
                    <i v-else class="fa fa-linux" aria-hidden="true" style="font-size:60px;"></i>
                </div>
                <div style="height:80px;float:left;margin-left:20px;padding-top:0px;width:calc(100% - 100px);overflow: hidden;">
                    <div v-if="data.platform" style="font-size:13px">{{data.platform}}</div>
                    <div style="font-size:13px">系统运行: {{data.sysrundate}}</div>
                    <div style="font-size:13px">控制板已不间断运行: {{data.rundate}}</div>
                </div>
            </div>
            <div v-if="cpumes.cpu" :style="'width:50%;float:left;text-align: center;padding-top:30px;background:#FFF;height:'+(winwidth/2)+'px'">
                <div>CPU使用率<br></div>
                <div v-if="cpumes.cpu.use > 90">
                    <van-circle v-model="cpumes.cpu.use" color="red" layer-color="#F5F5F5" :rate="cpumes.cpu.use" :text="cpumes.cpu.use+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-else-if="cpumes.cpu.use > 80">
                    <van-circle v-model="cpumes.cpu.use" color="#F56C6C" layer-color="#F5F5F5" :rate="cpumes.cpu.use" :text="cpumes.cpu.use+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-else-if="cpumes.cpu.use > 70">
                    <van-circle v-model="cpumes.cpu.use" color="#E6A23C" layer-color="#F5F5F5" :rate="cpumes.cpu.use" :text="cpumes.cpu.use+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-else>
                    <van-circle v-model="cpumes.cpu.use" color="#67C23A" layer-color="#F5F5F5" :rate="cpumes.cpu.use" :text="cpumes.cpu.use+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div style="font-size:12px">{{cpumes.cpu.count}}核心</div>
            </div>
            <div v-if="cpumes.cpu" :style="'width:50%;float:left;text-align: center;padding-top:30px;background:#FFF;height:'+(winwidth/2)+'px'">
                <div>物理内存使用率<br></div>
                <div v-if="cpumes.memory.physics.userate > 90">
                    <van-circle v-model="cpumes.memory.physics.userate" color="red" layer-color="#F5F5F5" :rate="cpumes.memory.physics.userate" :text="cpumes.memory.physics.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-else-if="cpumes.memory.physics.userate > 80">
                    <van-circle v-model="cpumes.memory.physics.userate" color="#F56C6C" layer-color="#F5F5F5" :rate="cpumes.memory.physics.userate" :text="cpumes.memory.physics.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-else-if="cpumes.memory.physics.userate > 70">
                    <van-circle v-model="cpumes.memory.physics.userate" color="#E6A23C" layer-color="#F5F5F5" :rate="cpumes.memory.physics.userate" :text="cpumes.memory.physics.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-else>
                    <van-circle v-model="cpumes.memory.physics.userate" color="#67C23A" layer-color="#F5F5F5" :rate="cpumes.memory.physics.userate" :text="cpumes.memory.physics.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div style="font-size:12px">{{Math.ceil(cpumes.memory.physics.used/1024/1024)}}MB / {{Math.ceil(cpumes.memory.physics.count/1024/1024)}}MB</div>
            </div>
            <div style="width:100%;height:8px;;float:left"></div>
            <div style="background:#FFF;width:100%;height:20px;;float:left"></div>

            <div v-if="cpumes.cpu" :style="'width:50%;float:left;text-align: center;padding-top:10px;background:#FFF;height:'+(winwidth/2)+'px'">
                <div>swap内存使用率<br></div>
                <div v-if="cpumes.memory.swap.userate > 90">
                    <van-circle v-model="cpumes.memory.swap.userate" color="red" layer-color="#F5F5F5" :rate="cpumes.memory.swap.userate" :text="cpumes.memory.swap.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-if="cpumes.memory.swap.userate > 80">
                    <van-circle v-model="cpumes.memory.swap.userate" color="#F56C6C" layer-color="#F5F5F5" :rate="cpumes.memory.swap.userate" :text="cpumes.memory.swap.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-if="cpumes.memory.swap.userate > 70">
                    <van-circle v-model="cpumes.memory.swap.userate" color="#E6A23C" layer-color="#F5F5F5" :rate="cpumes.memory.swap.userate" :text="cpumes.memory.swap.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-else>
                    <van-circle v-model="cpumes.memory.swap.userate" color="#67C23A" layer-color="#F5F5F5" :rate="cpumes.memory.swap.userate" :text="cpumes.memory.swap.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div style="font-size:12px">{{Math.ceil(cpumes.memory.swap.used/1024/1024)}}MB / {{Math.ceil(cpumes.memory.swap.count/1024/1024)}}MB</div>
            </div>
            <div v-for="item in disks.partitions" :style="'width:50%;float:left;text-align: center;padding-top:10px;background:#FFF;height:'+(winwidth/2)+'px'">
                <div>{{item.name}}<br></div>
                <div v-if="item.userate > 90">
                    <van-circle v-model="item.userate" color="red" layer-color="#F5F5F5" :rate="item.userate" :text="item.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-else-if="item.userate > 80">
                    <van-circle v-model="item.userate" color="#F56C6C" layer-color="#F5F5F5" :rate="item.userate" :text="item.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-else-if="item.userate > 70">
                    <van-circle v-model="item.userate" color="#E6A23C" layer-color="#F5F5F5" :rate="item.userate" :text="item.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-else>
                    <van-circle v-model="item.userate" color="#67C23A" layer-color="#F5F5F5" :rate="item.userate" :text="item.userate+'%'" :stroke-width="80" :size="(winwidth/3)+'px'" />
                </div>
                <div v-if="parseInt(item.used/1024/1024) >= 1" style="font-size:12px">{{parseInt(item.used/1024/1024/1024)}}GB / {{parseInt(item.count/1024/1024/1024)}}GB</div>
                <div v-else style="font-size:12px">{{parseInt(item.used/1024/1024)}}MB / {{parseInt(item.count/1024/1024)}}MB</div>
            </div>
            <div :style="'width:'+(winwidth-20)+'px;margin:10px auto;font-size:12px;float:left;margin-left:11px'">
                <div id="echarts" :style="'width: '+(winwidth-20)+'px;height:'+(winwidth/1.8)+'px;'"></div>
            </div>
        </div>
    </div>
    <script>
        var VU = new Vue({
            el: '#app',
            data: {
                winheight: document.documentElement.clientHeight,
                winwidth: document.documentElement.clientWidth,
                currentRate: 10,
                disks: {},
                cpumes: {},
                net: {
                    bytes_recv: [1],
                    bytes_sent: [1],
                    date: [],
                    syc: {
                        bytes_recv: -1,
                        bytes_sent: -1
                    } //上一次数据包
                },
                myChart: null,
                data: [],
            },
            mounted: function() {
                self = this
                window.onresize = function() {
                    self.winheight = document.documentElement.clientHeight
                    self.winwidth = document.documentElement.clientWidth
                }
                try {
                    parent.window.setheader({
                        height: 49,
                        type: '',
                        title: '首页',
                        icon: 'https://img.kwebapp.cn/icon/home.png',
                        lefturl: {
                            text: '',
                            url: ''
                        }
                    })
                } catch (exception) {}
                self.get("/index/index/index/homes").then(function(res) {
                    self.data = res.data
                    self.disk()
                })
            },
            methods: {
                disk: function() {
                    self = this
                    self.get("/index/index/index/disk").then(function(res) {
                        self.disks = res.data
                        self.cpume()
                    })
                },
                cpume: function() {
                    self = this
                    self.get("/index/index/index/cpume").then(function(res) {
                        self.test(res)
                    }).catch(function() {
                        setTimeout(function() {
                            self.cpume()
                        }, 1000);
                    });
                },
                test: function(res) {
                    self = this
                    self.cpumes = res.data
                    if (self.net.syc.bytes_recv > -1 && self.net.syc.bytes_sent > -1) {
                        if (self.net.bytes_sent.length > 30) {
                            self.net.bytes_sent.splice(0, 1);
                            self.net.bytes_recv.splice(0, 1);
                            self.net.date.splice(0, 1);
                        }
                        var date = new Date(res.time * 1000);
                        self.net.bytes_sent.push(((res.data.net.bytes_sent - self.net.syc.bytes_sent) / 1024).toFixed(2))
                        self.net.bytes_recv.push(((res.data.net.bytes_recv - self.net.syc.bytes_recv) / 1024).toFixed(2))
                        self.net.date.push(date.getHours() + "点" + date.getMinutes() + "分" + date.getSeconds())

                    }
                    self.net.syc.bytes_sent = res.data.net.bytes_sent
                    self.net.syc.bytes_recv = res.data.net.bytes_recv

                    var option = {
                        title: {
                            text: '当前网络波动'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['下行', '上行']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: "-100px",
                            right: '0%',
                            bottom: '1%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            data: self.net.date //['周一','周二','周三','周四','周五','周六','周日']
                        }],
                        yAxis: [{
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} kb/秒'
                            }
                        }],
                        series: [{
                            type: 'line',
                            name: "下行",
                            smooth: 0.8,
                            symbol: 'none',
                            lineStyle: {
                                color: 'green',
                                width: 5
                            },
                            markLine: {
                                symbol: ['none', 'none'],
                                label: {
                                    show: false
                                },
                                data: [{
                                    xAxis: 1
                                }, {
                                    xAxis: 3
                                }, {
                                    xAxis: 5
                                }, {
                                    xAxis: 7
                                }]
                            },
                            areaStyle: {},
                            data: self.net.bytes_recv
                        }, {
                            type: 'line',
                            name: "上行",
                            smooth: 0.8,
                            symbol: 'none',
                            lineStyle: {
                                color: 'green',
                                width: 5
                            },
                            markLine: {
                                symbol: ['none', 'none'],
                                label: {
                                    show: false
                                },
                                data: [{
                                    xAxis: 1
                                }, {
                                    xAxis: 3
                                }, {
                                    xAxis: 5
                                }, {
                                    xAxis: 7
                                }]
                            },
                            areaStyle: {},
                            data: self.net.bytes_sent
                        }, ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    if (!self.myChart) {
                        self.myChart = echarts.init(document.getElementById('echarts'));
                    }
                    self.myChart.setOption(option);
                    setTimeout(function() {
                        self.cpume()
                    }, 1000);
                }
            }
        });
    </script>
</body>

</html>