php_group
/
yyky


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据监控</title>
    <link rel="stylesheet" href="/static/js/node_modules/element-ui/lib/theme-chalk/index.css">
    <style>
        body,html,*{
            padding: 0px;
            margin: 0px;
        }
        body {
            /* 加载背景图 */
            background-image: url("/static/public/kjbg.jpg");
            /* 背景图垂直、水平均居中 */
            background-position: center center;
            /* 背景图不平铺 */
            background-repeat: no-repeat;
            /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
            background-attachment: fixed;
            /* 让背景图基于容器大小伸缩 */
            background-size: cover;
            /* 设置背景颜色，背景图加载过程中会显示背景色 */
            background-color: #5d9fbc;
            padding: 1em;
        }
        header{
            width: 100%;
            display: flex;
            flex-direction: row;
            gap:1em;
        }
        header .title{
            text-align: center;
            width: 100%;
            color: #fff;
            letter-spacing:1em;
            margin-bottom: 1em;
        }
        .el-table, .el-table__expanded-cell,.el-table th.el-table__cell{
            background-color: rgba(255, 255, 255, 0.4);
            color: #000;
        }
        .el-table tr{
            background:transparent ;
            color: #fff;
        }
        .el-table tr:hover{
            color: #000;
        }
        .el-pagination__total{
            color: #fff;
        }
        .el-pagination {
            display: flex;
            justify-content: center;
        }
        .block{
            margin-top: 1em;
        }
        .el-table__empty-text{
            color: #fff;
        }
    </style>
</head>
    
<body>
    <div id="app">
        <header class="">
            <h1 class="title">易益康养数据监控</h1>
        </header>
        <div>
            <el-table :data="tableData" style="width: 100%" :border="tableborder" :empty-text="emptytext">
                <el-table-column prop="name_center" label="日间照料中心名称" ></el-table-column>
                <el-table-column prop="mocount" label="套餐订单量"></el-table-column>
                <el-table-column prop="sacount" label="家政服务订单量"></el-table-column>
                <el-table-column prop="vcount" label="到访量"></el-table-column>
                <el-table-column prop="acount" label="常规业务量"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination 
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" 
                    :page-sizes="pagesizes" :page-size="size"
                    layout="sizes,total,prev, pager, next" :total="total"></el-pagination>
            </div>
        </div>
    </div>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/node_modules/element-ui/lib/index.js"></script>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                tableborder:false,
                tableData:[],
                total:0,  
                currentPage1:1,
                size:10,
                pagesizes:[10, 50, 100, 150],
                emptytext:'加载中'
            },
            methods:{
                getlist(){
                    var url="/index.php/api/statistics/getmealcenterlist";
                    var that =this
                    var param= {page:this.currentPage1,size:this.size}
                    $.post(url,param,function(res){
                        res= JSON.parse(res)
                        //console.log(res)
                        if(res.code!=200){
                            that.$notify({
                                title: '失败',
                                message:  res.msg,
                                type: 'error'
                            });
                        }else{
                            that.$notify({
                                title: '成功',
                                message:  res.msg,
                                type: 'success'
                            });
                            var data = res.data
                            that.currentPage1=data.page
                            that.size =data.size
                            that.total =data.count
                            that.tableData = data.list
                        }
                    },'json')
                },
                handleSizeChange(val){
                    this.size = val
                    this.currentPage1 =1
                    this.getlist()
                },
                handleCurrentChange(val){
                    this.currentPage1 = val
                    this.getlist()
                },
            },
            created(){
               this.getlist()
               var intid = setInterval(()=>{this.getlist()},30000)
                //this.getlist()
            }
        })
    </script>
</body>
</html>