AriaNg 添加简单硬盘监测

引入

HTML

    

        可用储存空间：{{ShengYu}}
        
    

CSS

.disk {
    min-height: 38px;
    color: #fff;
    padding: 40px 20px !important;
    position: relative;
}

.disk span {
    display: inline-block;
    margin-bottom: 10px;
}

.el-progress.is-success .el-progress-bar__inner {
    background: #3399ff !important;
}

.el-progress-bar__outer {
    height: 20px !important;
}

.el-notification.right {
    z-index: 99999999999 !important;
}

JS

var MyVue = new Vue({
    el: '#app',
    data() {
        return {
            all: 25,
            percentage: 0,
            YiYong: 0,
            ShengYu: 0
        }
    },
    created() {
        this.GetDisk();
    },
    methods: {
        GetDisk() {
            $.ajax({
                url: 'http://**********/system.php',
                type: 'get',
                dataType: 'json',
                success: (res => {
                    // console.log(res[0].size);
                    this.$notify({
                        title: '硬盘使用情况：',
                        message: '已使用' + res[0].size[3] + '，剩余' + res[0].size[2],
                        type: 'success',
                    });
                    this.YiYong = res[0].size[3];
                    this.percentage = 100 - res[0].size[3].slice(0, -1);
                    this.ShengYu = res[0].size[2];
                })
            });
        }
    }
})

$('ul.nav.navbar-nav>li:nth-child(1)').click(function () {
    MyVue.GetDisk();
})