453530270@qq.com
3 years ago
5 changed files with 392 additions and 2 deletions
@ -0,0 +1,17 @@ |
|||||
|
// 导入axios实例
|
||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
// 定义接口的传参
|
||||
|
const api={ |
||||
|
// 日客流趋势
|
||||
|
daily_klqs:'index.php/allGroupTimeNum?granularity=daily' |
||||
|
} |
||||
|
|
||||
|
// 获取群组
|
||||
|
export function allGroupTimeNum(param) { |
||||
|
return request({ |
||||
|
url: api.daily_klqs, |
||||
|
method: 'get', |
||||
|
param, |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,283 @@ |
|||||
|
|
||||
|
.gymbox { |
||||
|
margin-top: 3.2rem; |
||||
|
width: 100%; |
||||
|
background-image: url("../assets/img/gymbox_bg.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100%; |
||||
|
background-position: 0 0; |
||||
|
padding-top: 2.26rem; |
||||
|
height: 20rem; |
||||
|
} |
||||
|
|
||||
|
.gymbox .gympic { |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
padding-top: 0rem; |
||||
|
height: 12.68rem; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.gymbox .gympic img { |
||||
|
width: 90%; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
margin-top: 1rem; |
||||
|
display: block; |
||||
|
padding-top: 0.2rem; |
||||
|
height: 16rem; |
||||
|
} |
||||
|
|
||||
|
.gymbox .gymnum { |
||||
|
width: 60%; |
||||
|
margin: 0.6rem auto; |
||||
|
text-align: center; |
||||
|
height: 3rem; |
||||
|
padding-top: 1.4rem; |
||||
|
} |
||||
|
|
||||
|
.gymbox .gymnum span { |
||||
|
font-size: 0.86rem; |
||||
|
display: block; |
||||
|
line-height: 1.2rem; |
||||
|
} |
||||
|
|
||||
|
.gymbox .gymnum p { |
||||
|
line-height: 1.2; |
||||
|
height: 26px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 600; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/* 數據box */ |
||||
|
.numbox { |
||||
|
width: 100%; |
||||
|
height: 4rem; |
||||
|
line-height: 1.2; |
||||
|
margin-top: 2.6rem; |
||||
|
} |
||||
|
|
||||
|
.numbox .numicon { |
||||
|
display: block; |
||||
|
width: 20%; |
||||
|
height: 3.2rem; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.numbox .numdiv { |
||||
|
width: 72%; |
||||
|
background-image: url("../assets/img/num_bg.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: 0 center; |
||||
|
background-size: 100%; |
||||
|
float: left; |
||||
|
margin-left: 0.68rem; |
||||
|
height: 4rem; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.numbox .numdiv p { |
||||
|
display: block; |
||||
|
float: left; |
||||
|
width: 100%; |
||||
|
line-height: 0; |
||||
|
} |
||||
|
|
||||
|
.numbox .numdiv .ndtitle { |
||||
|
padding-top: 0.4rem; |
||||
|
font-size: 1.08rem; |
||||
|
} |
||||
|
|
||||
|
.numbox .numdiv .nddesc { |
||||
|
color: #ccc; |
||||
|
font-size: 0.4rem; |
||||
|
padding-bottom: 0.2rem; |
||||
|
} |
||||
|
|
||||
|
/** 客流趋势 */ |
||||
|
.klqs { |
||||
|
margin-top: 3rem; |
||||
|
background-image: url("../assets/img/klqs_bg.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100%; |
||||
|
height: 3.8rem; |
||||
|
background-position: -1.04rem 0.2rem; |
||||
|
} |
||||
|
|
||||
|
.klqs .klqs_bg { |
||||
|
float: left; |
||||
|
/* width: 80%; */ |
||||
|
margin-left: 4rem; |
||||
|
/* padding-left: 6.4rem; */ |
||||
|
font-size: 1.6rem; |
||||
|
} |
||||
|
|
||||
|
.klqs .klbtn { |
||||
|
float: left; |
||||
|
margin-left: 1.06rem; |
||||
|
} |
||||
|
|
||||
|
.klqs .klbtn span { |
||||
|
display: block; |
||||
|
float: left; |
||||
|
width: 2.2rem; |
||||
|
height: 2.2rem; |
||||
|
margin-left: 0.4rem; |
||||
|
line-height: 2.2rem; |
||||
|
text-align: center; |
||||
|
border: 1px solid #006bff; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
/* 选择年月日后的样式变化 */ |
||||
|
.klqs .klbtn span.spactive { |
||||
|
background-image: url('../assets/img/sactive_bg.png'); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100%; |
||||
|
background-position: 0 0; |
||||
|
} |
||||
|
|
||||
|
/** 場館飽和度 */ |
||||
|
.cgbox { |
||||
|
background-image: url("../assets/img/cgbox_bg.png"); |
||||
|
width: 100%; |
||||
|
height: 12rem; |
||||
|
background-position: center center; |
||||
|
background-size: 100% 100%; |
||||
|
margin-top: 2.4rem; |
||||
|
} |
||||
|
|
||||
|
/* 饼图 */ |
||||
|
.cgbox .cgpies { |
||||
|
width: 40%; |
||||
|
height: 12rem; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.cgbox .cgleft { |
||||
|
width: 30%; |
||||
|
height: 12rem; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.cgbox .cgleft>ul { |
||||
|
padding-left: 0.66rem; |
||||
|
} |
||||
|
|
||||
|
.cgbox .cgright { |
||||
|
width: 30%; |
||||
|
height: 12rem; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.cgbox .cgright>ul { |
||||
|
padding-left: 0.66rem; |
||||
|
} |
||||
|
|
||||
|
.cgbox .cglist { |
||||
|
margin-top: 3rem; |
||||
|
} |
||||
|
|
||||
|
.cgbox .cglist ul { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.cgbox .cglist ul li { |
||||
|
width: 100%; |
||||
|
list-style: none; |
||||
|
height: 0.66rem; |
||||
|
line-height: 0.66rem; |
||||
|
font-size: 0.66rem; |
||||
|
margin-top: 1rem; |
||||
|
} |
||||
|
|
||||
|
.cgbox .cglist ul li span { |
||||
|
display: block; |
||||
|
float: left; |
||||
|
margin-left: 0.46rem; |
||||
|
} |
||||
|
|
||||
|
.cgbox .cglist ul li span img { |
||||
|
width: 0.68rem; |
||||
|
height: 0.68rem; |
||||
|
} |
||||
|
|
||||
|
.cgbox .cgright { |
||||
|
width: 30%; |
||||
|
height: 12rem; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
/* 今日人數 */ |
||||
|
.today_rs { |
||||
|
margin-top: 2.6rem; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.today_rs .tdrs_title { |
||||
|
background-image: url("../assets/img/klqs_bg.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
background-position: 0 0; |
||||
|
height: 3.2rem; |
||||
|
line-height: 2.86rem; |
||||
|
background-position: -1.04rem 0.2rem; |
||||
|
padding-left: 4.6rem; |
||||
|
font-size: 1.6rem; |
||||
|
} |
||||
|
|
||||
|
/** 各場館實時 */ |
||||
|
.pcgrs { |
||||
|
clear: both; |
||||
|
margin-top: 2.6rem; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.pcgrs .pcgrs_title { |
||||
|
background-image: url("../assets/img/klqs_bg.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100%; |
||||
|
height: 3.8rem; |
||||
|
background-position: -1.04rem 0.2rem; |
||||
|
padding-left: 4.6rem; |
||||
|
font-size: 1.6rem; |
||||
|
} |
||||
|
|
||||
|
.pcgrs .pcg_item { |
||||
|
margin-top: 0.4rem; |
||||
|
background-image: url("../assets/img/pcg_bg.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
height: 12rem; |
||||
|
width: 48%; |
||||
|
float: left; |
||||
|
margin-left: 2%; |
||||
|
} |
||||
|
|
||||
|
.pcgrs .pcg_item .pcpos { |
||||
|
text-align: right; |
||||
|
font-size: 0.68rem; |
||||
|
display: block; |
||||
|
float: right; |
||||
|
margin-top: 1.6rem; |
||||
|
padding-right: 1.18rem; |
||||
|
} |
||||
|
|
||||
|
.pcgrs .pcg_item .pcval { |
||||
|
font-size: 1.086rem; |
||||
|
margin-top: 6rem; |
||||
|
width: 68%; |
||||
|
display: block; |
||||
|
float: left; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.pcgrs .pcg_item .pcrate { |
||||
|
/* width: 32%; */ |
||||
|
display: block; |
||||
|
float: left; |
||||
|
font-size: 0.86rem; |
||||
|
margin-top: 4rem; |
||||
|
text-align: center; |
||||
|
} |
||||
@ -0,0 +1,49 @@ |
|||||
|
import axios from 'axios' |
||||
|
|
||||
|
//https://www.jb51.net/article/246548.htm
|
||||
|
|
||||
|
// 创建一个 axios 实例
|
||||
|
const service = axios.create({ |
||||
|
//baseURL: '/api', // 所有的请求地址前缀部分
|
||||
|
//baseURL: publicConfig.BASE_API,
|
||||
|
//baseURL:ahost,
|
||||
|
timeout: 60000, // 请求超时时间毫秒
|
||||
|
withCredentials: true, // 异步请求携带cookie
|
||||
|
headers: { |
||||
|
// 设置后端需要的传参类型
|
||||
|
'Content-Type': 'application/json', |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
// 添加请求拦截器
|
||||
|
service.interceptors.request.use( |
||||
|
function (config) { |
||||
|
// 在发送请求之前做些什么
|
||||
|
return config |
||||
|
}, |
||||
|
function (error) { |
||||
|
// 对请求错误做些什么
|
||||
|
return Promise.reject(error) |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
// 添加响应拦截器
|
||||
|
service.interceptors.response.use( |
||||
|
function (response) { |
||||
|
//console.log(response)
|
||||
|
// 2xx 范围内的状态码都会触发该函数。
|
||||
|
// 对响应数据做点什么
|
||||
|
// dataAxios 是 axios 返回数据中的 data
|
||||
|
const dataAxios = response.data |
||||
|
// 这个状态码是和后端约定的
|
||||
|
const code = dataAxios.reset |
||||
|
return dataAxios |
||||
|
}, |
||||
|
function (error) { |
||||
|
// 超出 2xx 范围的状态码都会触发该函数。
|
||||
|
// 对响应错误做点什么
|
||||
|
console.log(error) |
||||
|
return Promise.reject(error) |
||||
|
} |
||||
|
) |
||||
|
export default service |
||||
Loading…
Reference in new issue