|
|
|
@ -8,14 +8,14 @@ |
|
|
|
</div> |
|
|
|
<div class="gymnum"> |
|
|
|
<span>年度进馆总人数</span> |
|
|
|
<p>23,556</p> |
|
|
|
<p>{{ year_num }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 今日进馆 --> |
|
|
|
<div class="numbox"> |
|
|
|
<span class="numicon"><img src="../assets/img/icon01.png" /></span> |
|
|
|
<div class="numdiv"> |
|
|
|
<p class="ndtitle">23566</p> |
|
|
|
<p class="ndtitle">{{ day_num }}</p> |
|
|
|
<p class="nddesc">今日进馆总人数</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -23,7 +23,7 @@ |
|
|
|
<div class="numbox"> |
|
|
|
<span class="numicon"><img src="../assets/img/icon02.png" /></span> |
|
|
|
<div class="numdiv"> |
|
|
|
<p class="ndtitle">23566</p> |
|
|
|
<p class="ndtitle">{{ week_num }}</p> |
|
|
|
<p class="nddesc">本周进馆总人数</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -31,7 +31,7 @@ |
|
|
|
<div class="numbox"> |
|
|
|
<span class="numicon"><img src="../assets/img/icon03.png" /></span> |
|
|
|
<div class="numdiv"> |
|
|
|
<p class="ndtitle">23566</p> |
|
|
|
<p class="ndtitle">{{ mon_num }}</p> |
|
|
|
<p class="nddesc">本月进馆总人数</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -59,13 +59,13 @@ |
|
|
|
<span><img src="../assets/img/tyc_icon.png" /></span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span>体育场</span> |
|
|
|
<span>20%</span> |
|
|
|
<span>体育馆</span> |
|
|
|
<span>12%</span> |
|
|
|
<span><img src="../assets/img/tyc_icon.png" /></span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span>体育场</span> |
|
|
|
<span>20%</span> |
|
|
|
<span>游泳场馆</span> |
|
|
|
<span>12%</span> |
|
|
|
<span><img src="../assets/img/tyc_icon.png" /></span> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
@ -78,17 +78,17 @@ |
|
|
|
<li> |
|
|
|
<span><img src="../assets/img/tyc_icon.png" /></span> |
|
|
|
<span>20%</span> |
|
|
|
<span>体育场</span> |
|
|
|
<span>图书馆</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span><img src="../assets/img/tyc_icon.png" /></span> |
|
|
|
<span>20%</span> |
|
|
|
<span>体育场</span> |
|
|
|
<span>12%</span> |
|
|
|
<span>文化馆</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span><img src="../assets/img/tyc_icon.png" /></span> |
|
|
|
<span>20%</span> |
|
|
|
<span>体育场</span> |
|
|
|
<span>12%</span> |
|
|
|
<span>博物馆</span> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
@ -107,41 +107,41 @@ |
|
|
|
<div class="pcgrs"> |
|
|
|
<div class="pcgrs_title">各场馆实时进馆人数</div> |
|
|
|
<!-- 場館實時 --> |
|
|
|
<div class="pcg_item"> |
|
|
|
<div class="pcg_item" v-for="item in ssjgNumDatas" :key="item.groupId"> |
|
|
|
<span class="pcpos">体育场</span> |
|
|
|
<p class="pcval">23,456</p> |
|
|
|
<span class="pcrate">40%</span> |
|
|
|
<p class="pcval">{{ item.allEnter }}</p> |
|
|
|
<span class="pcrate" :class="[{pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90},{pcrate3: parseInt(item.proportion) >= 90 }]">{{ item.proportion }}</span> |
|
|
|
</div> |
|
|
|
<!-- #2 --> |
|
|
|
<div class="pcg_item"> |
|
|
|
<span class="pcpos">体育场</span> |
|
|
|
|
|
|
|
<!-- <div class="pcg_item"> |
|
|
|
<span class="pcpos">图书馆</span> |
|
|
|
<p class="pcval">23,456</p> |
|
|
|
<span class="pcrate">40%</span> |
|
|
|
</div> |
|
|
|
<!-- 3 --> |
|
|
|
|
|
|
|
<div class="pcg_item"> |
|
|
|
<span class="pcpos">体育场</span> |
|
|
|
<span class="pcpos">体育馆</span> |
|
|
|
<p class="pcval">23,456</p> |
|
|
|
<span class="pcrate">40%</span> |
|
|
|
</div> |
|
|
|
<!-- 4 --> |
|
|
|
|
|
|
|
<div class="pcg_item"> |
|
|
|
<span class="pcpos">体育场</span> |
|
|
|
<span class="pcpos">文化馆</span> |
|
|
|
<p class="pcval">23,456</p> |
|
|
|
<span class="pcrate">40%</span> |
|
|
|
</div> |
|
|
|
<!-- 5 --> |
|
|
|
|
|
|
|
<div class="pcg_item"> |
|
|
|
<span class="pcpos">体育场</span> |
|
|
|
<span class="pcpos">游泳场馆</span> |
|
|
|
<p class="pcval">23,456</p> |
|
|
|
<span class="pcrate">40%</span> |
|
|
|
</div> |
|
|
|
<!-- 6 --> |
|
|
|
|
|
|
|
<div class="pcg_item"> |
|
|
|
<span class="pcpos">体育场</span> |
|
|
|
<span class="pcpos">博物馆</span> |
|
|
|
<p class="pcval">23,456</p> |
|
|
|
<span class="pcrate">40%</span> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
@ -153,6 +153,9 @@ |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import * as btApi from '../api/home' |
|
|
|
|
|
|
|
// 引入api |
|
|
|
import * as homeApi from '@/api/home' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'HomeView', |
|
|
|
data() { |
|
|
|
@ -160,37 +163,48 @@ export default { |
|
|
|
// 年月日选中的样式,默认日 |
|
|
|
klselt: "d", |
|
|
|
// 客流标题数组 |
|
|
|
kltdata:[], |
|
|
|
kltdata: [], |
|
|
|
// 客流值数组 |
|
|
|
klvdata:[], |
|
|
|
klvdata: [], |
|
|
|
day_num: 0, |
|
|
|
week_num: 0, |
|
|
|
mon_num: 0, |
|
|
|
year_num: 0, |
|
|
|
klqsDatas: [], |
|
|
|
ssjgNumDatas: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.showorders() |
|
|
|
this.cgrs_line() |
|
|
|
this.cgchart() |
|
|
|
|
|
|
|
this.getStat(); |
|
|
|
this.getHomeBarData(); |
|
|
|
this.getInfoDatas(); |
|
|
|
this.getGcgNumDatas() |
|
|
|
// 查询对应的数 |
|
|
|
// this.btgetdata(this.klselt) |
|
|
|
}, |
|
|
|
// 方法 |
|
|
|
methods: { |
|
|
|
// 获取对应的参数 |
|
|
|
btgetdata(type){ |
|
|
|
btgetdata(type) { |
|
|
|
console.log(type) |
|
|
|
let rqtp; |
|
|
|
switch(type) { |
|
|
|
case 'd':rqtp ="daily";break; |
|
|
|
case 'm':rqtp ="monthly";break; |
|
|
|
case 'y':rqtp ="yearly";break; |
|
|
|
switch (type) { |
|
|
|
case 'd': rqtp = "daily"; break; |
|
|
|
case 'm': rqtp = "monthly"; break; |
|
|
|
case 'y': rqtp = "yearly"; break; |
|
|
|
} |
|
|
|
// |
|
|
|
btApi.allGroupTimeNum({'granularity':rqtp}).then(res=>{ |
|
|
|
btApi.allGroupTimeNum({ 'granularity': rqtp }).then(res => { |
|
|
|
const kldata = res.data.data.allTimeData |
|
|
|
// 对应的键名 |
|
|
|
let kltd=new Array; |
|
|
|
let tmpkvd=new Array; |
|
|
|
let kltd = new Array; |
|
|
|
let tmpkvd = new Array; |
|
|
|
const dkeys = res.data.data.dkeys |
|
|
|
dkeys.forEach(function(item,idx){ |
|
|
|
dkeys.forEach(function (item, idx) { |
|
|
|
kltd.push(item) |
|
|
|
tmpkvd.push(kldata[item].num) |
|
|
|
}) |
|
|
|
@ -211,8 +225,8 @@ export default { |
|
|
|
// 指定图表的配置项和数据 |
|
|
|
var option; |
|
|
|
|
|
|
|
//var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120] |
|
|
|
var data = this.klvdata |
|
|
|
var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120] |
|
|
|
// var data = this.klvdata |
|
|
|
// var data = [Math.random() * 300] |
|
|
|
option = { |
|
|
|
// backgroundColor: '#031245', |
|
|
|
@ -576,6 +590,120 @@ export default { |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
getStat() { |
|
|
|
let that = this |
|
|
|
console.log(that); |
|
|
|
homeApi.allGroupNum().then(res => { |
|
|
|
// get allTimeData |
|
|
|
const tmpdata = res.data.returnData |
|
|
|
console.log(tmpdata); |
|
|
|
this.day_num = tmpdata.day.noRepeatInNum |
|
|
|
this.week_num_num = tmpdata.week.noRepeatInNum |
|
|
|
this.mon_num = tmpdata.month.noRepeatInNum |
|
|
|
this.year_num = tmpdata.year.noRepeatInNum |
|
|
|
|
|
|
|
// let btdata = new Array(); |
|
|
|
// let bvdata = new Array(); |
|
|
|
// tmpdata.foreach(function(item,index){ |
|
|
|
// console.log(item); |
|
|
|
// console.log(index); |
|
|
|
// }); |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
getHomeBarData() { |
|
|
|
let that = this |
|
|
|
console.log(that); |
|
|
|
homeApi.homeBarData().then(res => { |
|
|
|
// get allTimeData |
|
|
|
const tmpdata = res.data.data.allTimeData |
|
|
|
|
|
|
|
let datas = [] |
|
|
|
Object.values(tmpdata).forEach((value) => { |
|
|
|
console.log(value.num); |
|
|
|
datas.push(value.num) |
|
|
|
|
|
|
|
}); |
|
|
|
console.log(datas); |
|
|
|
this.klqsDatas = datas |
|
|
|
console.log(tmpdata); |
|
|
|
// this.day_num = tmpdata.day.noRepeatInNum |
|
|
|
// this.week_num_num = tmpdata.week.noRepeatInNum |
|
|
|
// this.mon_num = tmpdata.month.noRepeatInNum |
|
|
|
// this.year_num = tmpdata.year.noRepeatInNum |
|
|
|
|
|
|
|
// let btdata = new Array(); |
|
|
|
// let bvdata = new Array(); |
|
|
|
// tmpdata.foreach(function(item,index){ |
|
|
|
// console.log(item); |
|
|
|
// console.log(index); |
|
|
|
// }); |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
getInfoDatas() { |
|
|
|
let that = this |
|
|
|
console.log(that); |
|
|
|
homeApi.allInfoDatas().then(res => { |
|
|
|
// get allTimeData |
|
|
|
this.ssjgNumDatas = res.data.returnData |
|
|
|
// let ssjgNumDatas = this.ssjgNumDatas |
|
|
|
// ssjgNumDatas.forEach(item => { |
|
|
|
// console.log(parseInt(item.proportion)); |
|
|
|
// let proportion = parseInt(item.proportion) |
|
|
|
// if (proportion >= 80 && proportion <= 90) { |
|
|
|
// console.log('11111111'); |
|
|
|
// this.$refs.proportionbox.addClass('rbrate2') |
|
|
|
// } |
|
|
|
// if (proportion > 90) { |
|
|
|
// console.log('222222'); |
|
|
|
// // console.log(this.$refs.proportionbox) |
|
|
|
// this.$refs.proportionbox.addClass('rbrate3') |
|
|
|
// } |
|
|
|
// }) |
|
|
|
// console.log(tmpdata); |
|
|
|
// console.log(tmpdata.01.proportion); |
|
|
|
// let arr = JSON.stringify(tmpdata) |
|
|
|
// console.log(arr); |
|
|
|
// this.day_num = tmpdata.day.noRepeatInNum |
|
|
|
// this.week_num_num = tmpdata.week.noRepeatInNum |
|
|
|
// this.mon_num = tmpdata.month.noRepeatInNum |
|
|
|
// this.year_num = tmpdata.year.noRepeatInNum |
|
|
|
|
|
|
|
// let btdata = new Array(); |
|
|
|
// let bvdata = new Array(); |
|
|
|
// tmpdata.foreach(function(item,index){ |
|
|
|
// console.log(item); |
|
|
|
// console.log(index); |
|
|
|
// }); |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
getGcgNumDatas() { |
|
|
|
let that = this |
|
|
|
console.log(that); |
|
|
|
homeApi.allGcgNumDatas().then(res => { |
|
|
|
// get allTimeData |
|
|
|
const tmpdata = res.data.returnData |
|
|
|
console.log(tmpdata); |
|
|
|
// this.day_num = tmpdata.day.noRepeatInNum |
|
|
|
// this.week_num_num = tmpdata.week.noRepeatInNum |
|
|
|
// this.mon_num = tmpdata.month.noRepeatInNum |
|
|
|
// this.year_num = tmpdata.year.noRepeatInNum |
|
|
|
|
|
|
|
// let btdata = new Array(); |
|
|
|
// let bvdata = new Array(); |
|
|
|
// tmpdata.foreach(function(item,index){ |
|
|
|
// console.log(item); |
|
|
|
// console.log(index); |
|
|
|
// }); |
|
|
|
|
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
@ -645,11 +773,12 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.gymbox .gymnum p { |
|
|
|
line-height: 1.2; |
|
|
|
line-height: 26px; |
|
|
|
height: 26px; |
|
|
|
font-size: 14px; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 600; |
|
|
|
display: block; |
|
|
|
margin: 0.2667rem auto; |
|
|
|
} |
|
|
|
|
|
|
|
/* 數據box */ |
|
|
|
@ -687,13 +816,15 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.numbox .numdiv .ndtitle { |
|
|
|
padding-top: 0.4rem; |
|
|
|
padding-top: 0.2rem; |
|
|
|
font-size: 1.08rem; |
|
|
|
font-size: 1.1rem; |
|
|
|
margin: 1.3rem 0 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.numbox .numdiv .nddesc { |
|
|
|
color: #ccc; |
|
|
|
font-size: 0.4rem; |
|
|
|
font-size: 0.32rem; |
|
|
|
padding-bottom: 0.2rem; |
|
|
|
} |
|
|
|
|
|
|
|
@ -712,7 +843,9 @@ export default { |
|
|
|
/* width: 80%; */ |
|
|
|
margin-left: 4rem; |
|
|
|
/* padding-left: 6.4rem; */ |
|
|
|
font-size: 1.6rem; |
|
|
|
line-height: 2.8rem; |
|
|
|
font-size: 1.1rem; |
|
|
|
color: gray; |
|
|
|
} |
|
|
|
|
|
|
|
.klqs .klbtn { |
|
|
|
@ -801,6 +934,18 @@ export default { |
|
|
|
margin-left: 0.46rem; |
|
|
|
} |
|
|
|
|
|
|
|
.cgbox .cgleft ul li:nth-child(3) span:nth-child(2) { |
|
|
|
display: block; |
|
|
|
float: left; |
|
|
|
margin-left: 0.06rem; |
|
|
|
} |
|
|
|
|
|
|
|
.cgbox .cgleft ul li:nth-child(3) span:nth-child(3) { |
|
|
|
display: block; |
|
|
|
float: left; |
|
|
|
margin-left: 0.16rem; |
|
|
|
} |
|
|
|
|
|
|
|
.cgbox .cglist ul li span img { |
|
|
|
width: 0.68rem; |
|
|
|
height: 0.68rem; |
|
|
|
@ -824,10 +969,11 @@ export default { |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: 0 0; |
|
|
|
height: 3.2rem; |
|
|
|
line-height: 2.86rem; |
|
|
|
line-height: 2.8rem; |
|
|
|
background-position: -1.04rem 0.2rem; |
|
|
|
padding-left: 4.6rem; |
|
|
|
font-size: 1.6rem; |
|
|
|
font-size: 1.1rem; |
|
|
|
color: gray; |
|
|
|
} |
|
|
|
|
|
|
|
/** 各場館實時 */ |
|
|
|
@ -842,9 +988,11 @@ export default { |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100%; |
|
|
|
height: 3.8rem; |
|
|
|
line-height: 2.8rem; |
|
|
|
background-position: -1.04rem 0.2rem; |
|
|
|
padding-left: 4.6rem; |
|
|
|
font-size: 1.6rem; |
|
|
|
font-size: 1.1rem; |
|
|
|
color: gray; |
|
|
|
} |
|
|
|
|
|
|
|
.pcgrs .pcg_item { |
|
|
|
@ -855,31 +1003,61 @@ export default { |
|
|
|
width: 48%; |
|
|
|
float: left; |
|
|
|
margin-left: 2%; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.pcgrs .pcg_item .pcpos { |
|
|
|
text-align: right; |
|
|
|
font-size: 0.68rem; |
|
|
|
display: block; |
|
|
|
width: 3.5rem; |
|
|
|
text-align: left; |
|
|
|
float: right; |
|
|
|
margin-top: 1.6rem; |
|
|
|
padding-right: 1.18rem; |
|
|
|
/* padding-right: 0.9rem; */ |
|
|
|
} |
|
|
|
|
|
|
|
.pcgrs .pcg_item .pcval { |
|
|
|
font-size: 1.086rem; |
|
|
|
margin-top: 6rem; |
|
|
|
width: 68%; |
|
|
|
margin-top: 3.75rem; |
|
|
|
width: 69%; |
|
|
|
display: block; |
|
|
|
float: left; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* .pcgrs .pcg_item:nth-child(6) .pcval { |
|
|
|
font-size: 1.086rem; |
|
|
|
margin-top: 3.5rem; |
|
|
|
width: 66%; |
|
|
|
display: block; |
|
|
|
float: left; |
|
|
|
text-align: center; |
|
|
|
} */ |
|
|
|
|
|
|
|
.pcgrs .pcg_item .pcrate { |
|
|
|
/* width: 32%; */ |
|
|
|
width: 32%; |
|
|
|
height: 3.3rem; |
|
|
|
line-height: 3.3rem; |
|
|
|
display: block; |
|
|
|
float: left; |
|
|
|
font-size: 0.86rem; |
|
|
|
margin-top: 4rem; |
|
|
|
font-size: 0.46rem; |
|
|
|
margin-top: 3.78rem; |
|
|
|
text-align: center; |
|
|
|
}</style> |
|
|
|
position: absolute; |
|
|
|
bottom: 3.5rem; |
|
|
|
right: 0.8rem; |
|
|
|
background-image: url('../assets/img/安静.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
} |
|
|
|
|
|
|
|
.pcgrs .pcg_item .pcrate2 { |
|
|
|
background-image: url('../assets/img/舒适.png'); |
|
|
|
} |
|
|
|
|
|
|
|
.pcgrs .pcg_item .pcrate3 { |
|
|
|
background-image: url('../assets/img/拥挤.png'); |
|
|
|
} |
|
|
|
</style> |
123456
3 years ago
