qimall/backend/views/components/common/com-system.php

<template id="com-system">
    <el-card class="box-card" style="margin-bottom: 20px;">
        <div slot="header" class="clearfix">
            <span>状态</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div class="com-system-list">
            <div class="system-list">
                <div class="system-item site_system_item">
                    <div class="site_item">
                        <span style="margin-bottom: 10px">总站点数</span>
                        <span>{{ site_num }}</span>
                    </div>
                </div>
                <div class="system-item">
                    <div class="system-title">CPU使用率</div>
                    <el-progress type="circle" :percentage="cpu" :color="colors"></el-progress>
                </div>
                <div class="system-item">
                    <div class="system-title">内存使用率</div>
                    <el-progress type="circle" :percentage="memory.percent" :color="colors"></el-progress>
                    <div class="system-title">{{ memory.use_total }} / {{ memory.total }}（MB）</div>
                </div>
                <div class="system-item">
                    <div class="system-title">磁盘使用率</div>
                    <el-progress type="circle" :percentage="disk.percent" :color="colors"></el-progress>
                    <div class="system-title">{{ disk.use_total }} GB / {{ disk.total }} GB</div>
                </div>
                <div class="system-item">
                    <div class="system-title">redis使用率</div>
                    <el-progress type="circle" :percentage="redis.percent" :color="colors"></el-progress>
                    <div class="system-title">{{ redis.use_total }} / {{ redis.total }}</div>
                </div>
            </div>
        </div>
    </el-card>
</template>
<style>
    .system-list {
        display: flex;
    }
    .system-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 40px;
    }
    .system-title {
        color: #909399;
        font-size: 14px;
        line-height: 28px;
    }
    .site_system_item {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .site_item{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 20px;
        color: #909399;
        height: 150px;
        padding: 0 40px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
</style>
<script>
    Vue.component('com-system', {
        template: '#com-system',
        data() {
            return {
                cpu: 0,// cpu使用率
                memory: {
                    use_total: 0,
                    total: 0,
                    percent: 0
                },// 内存使用率
                disk: {
                    use_total: 0,
                    total: 0,
                    percent: 0
                },// 磁盘使用率
                redis: {
                    use_total: 0,
                    total: 0,
                    percent: 0
                },// redis使用率
                colors: [
                    {color: '#5cb87a', percentage: 50},
                    {color: '#e6a23c', percentage: 79},
                    {color: '#f56c6c', percentage: 80},
                ],
                site_num: 0,// 总站点数
            };
        },
        created() {
            this.systeminfo();
        },
        methods: {
            systeminfo() {
                request({
                    params: {
                        r: 'admin/system/get-system-info',
                    },
                    method: 'post'
                }).then(e => {
                    if (e.data.code == 0) {
                        this.cpu = e.data.data.cpu;
                        this.memory = e.data.data.memory;
                        this.disk = e.data.data.disk;
                        this.redis = e.data.data.redis;
                        this.site_num = e.data.data.site_num;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            }
        },
    });
</script>