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