Gong-Ying-Lian-API/app/admin/view/dashboard/index.html

<template>
    <div style="max-width: 100%;">
        <el-row :gutter="10">
            <el-col :md="24" :xs="24" :sm="24">
                <div class="card-container">
                    <el-card shadow="always" body-style="padding-bottom:10px;">
                        <el-row>
                            <el-col :md="6" :sm="12" :xs="12">
                                <div class="style-1 bkcolor1">
                                    <div class="box">
                                        <div class="box-title">用户总数</div>
                                        <div class="box-number">{{panel[0]}}</div>
                                    </div>
                                    <i class="fa fa-user-circle-o"></i>
                                </div>
                            </el-col>
                            <el-col :md="6" :sm="12" :xs="12">
                                <div class="style-1 bkcolor2">
                                    <div class="box">
                                        <div class="box-title">在线人数</div>
                                        <div class="box-number">{{panel[1]}}</div>
                                    </div>
                                    <i class="fa fa-tasks"></i>
                                </div>
                            </el-col>
                            <el-col :md="6" :sm="12" :xs="12">
                                <div class="style-1 bkcolor4">
                                    <div class="box">
                                        <div class="box-title">当前结余</div>
                                        <div class="box-number">{{panel[3]}}</div>
                                    </div>
                                    <i class="fa fa-exchange"></i>
                                </div>
                            </el-col>
                            <el-col :md="6" :sm="12" :xs="12">
                                <div class="style-1 bkcolor3">
                                    <div class="box">
                                        <div class="box-title">月租用户</div>
                                        <div class="box-number">{{panel[2]}}</div>
                                    </div>
                                    <i class="fa fa-dashcube"></i>
                                </div>
                            </el-col>
                    
                        </el-row>
                    </el-card>
                </div>
              
              
                           <div class="card-container left">
                            <el-card shadow="always">
                                <template #header>
                                    <div class="header">
                                        <div class="title"><i class="fa fa-caret-right"></i>红薯品种</div>
                                    </div>
                                </template>
                                <el-row>
                                    <el-col :span="24">
                                        <div class="style-3">
                                            <div class="box">
                                    
                                                <div class="box-content">
                                                    <div class="box-content-right" v-for="item in list">
                                                        <div class="box-number-top">{{item.name}}</div>
                                                        <div class="box-number-bottom">{{item.num}}</div>
                                                    </div>
                                                </div>
                                
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </div>
                           <div class="card-container left">
                            <el-card shadow="always">
                                <template #header>
                                    <div class="header">
                                        <div class="title"><i class="fa fa-caret-right"></i>包装箱</div>
                                    </div>
                                </template>
                                <el-row>
                                    <el-col :span="24">
                                        <div class="style-3">
                                            <div class="box">
                                                <div class="box-content">
                                                    <div class="box-content-right" v-for="item in box">
                                                        <div class="box-number-top">{{item.name}}</div>
                                                        <div class="box-number-bottom">{{item.num}}</div>
                                                    </div>
                                                 
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </div>
          
                        <div class="card-container left">
                            <el-card shadow="always">
                                <template #header>
                                    <div class="header">
                                        <div class="title"><i class="fa fa-caret-right"></i>耗材</div>
                                    </div>
                                </template>
                                <el-row>
                                    <el-col :span="24">
                                        <div class="style-3">
                                            <div class="box">
                                                <div class="box-content">
                                                    <div class="box-content-right" v-for="item in material">
                                                        <div class="box-number-top">{{item.name}}</div>
                                                        <div class="box-number-bottom">{{item.num}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </div>
              
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default{
        data:{
            echarts:'',
            panel:[],
            list:[],
            box:[],
            material:[]
          
        },
        onLoad:function (){
            Yunqi.use('/assets/js/echarts.min.js').then(res=>{
                this.echarts=res;
                this.parseData();
            });
        },
        methods:{
            parseData:function (){
                Yunqi.ajax.get('dashboard/index',{}).then(res=>{
                    this.panel=res.panel;
                    this.list=res.variety;
                    this.box=res.box;
                    this.material=res.material;
                });
            },
        }
    }
</script>
<style>
.pay{
    text-align: center;
    padding: 10px;
}
.pay img{
    width: 180px;
    height: 180px;
}
.card-container{
    margin-bottom: 10px;
}
.card-container.left{
    padding-right: 10px;
}
@media screen and (max-width: 992px) {
    .card-container.left{
        padding-right: 0;
    }
}
.card-container .el-card__header{
    padding: 8px 20px;
}
.card-container .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-container .el-card__header .title{
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.card-container .el-card__header .title i{
    font-size: 22px;
    color: var(--el-color-primary);
    margin-right: 8px;
}
.style-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    width: 87%;
    margin:0 auto 10px;
    color: #fff;
}
.style-1 i{
    font-size: 42px;
    color: #fff;
}
.style-2{
    padding: 10px;
    width: 87%;
    margin:0 auto;
    text-align: center;
}
.style-3{
    padding: 10px;
    margin:0 auto;
    text-align: center;
}
.style-3 .box-title{
    text-align: left;
}
.style-3 .box{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.style-3 .box-content-left{
    text-align: left;
}
.style-3 .box-number-top{
    font-size: 20px;
}
.style-3 .box-number-bottom{
     font-size: 24px;
     color: blueviolet;
}
.style-3 .box-content{
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    flex-wrap: wrap;
}

.box-content .box-content-right{
    min-width: 150px;
    padding-bottom: 16px;
}
.style-3 .icon{
    color: #fff;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 32px;
}
.box .box-title{
    font-size: 18px;
}
.bkcolor1{
    background: linear-gradient(to right,var(--el-color-primary-light-3),var(--el-color-primary));
}
.bkcolor2{
    background: linear-gradient(to right,var(--el-color-warning-light-3),var(--el-color-warning));
}
.bkcolor3{
    background: linear-gradient(to right,var(--el-color-danger-light-3),var(--el-color-danger));
}
.bkcolor4{
    background: linear-gradient(to right,var(--el-color-success-light-3),var(--el-color-success));
}
.chart1{
    width: 100%;
    height: 305px;
}
.chart2{
    width: 100%;
    height: 310px;
    margin: 0 auto;
}
.chart3{
    width: 100%;
    height: 300px;
}
</style>