|
|
@@ -0,0 +1,149 @@
|
|
|
+<!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="phone" label="手机号" ></el-table-column>
|
|
|
+ <el-table-column prop="kind_title" label="预约项目"></el-table-column>
|
|
|
+ <el-table-column prop="create_time" 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/appointment/getlistfy";
|
|
|
+ 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>
|
