xioayue
/
btgym
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

体育馆PC端问题处理7

lite
‘daijinzheng@xingtongworld.com’ 3 years ago
parent
c41403230a
commit
ae3c1cc667
2 changed files with 165 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      src/App.vue
  2. 120
      src/views/index.vue

66
src/App.vue
View File

@ -4,10 +4,10 @@
<div class="topnav"> <div class="topnav">
<div class="toptxt"> <div class="toptxt">
<div style="margin-left: 2%" class="topTitle"> <div style="margin-left: 2%" class="topTitle">
累计进馆人数：3,435,123万人 累计进馆人数： {{ sumYear_num }} 人
</div> </div>
<img class="topImg" src="@/assets/index/top_title.png" /> <img class="topImg" src="@/assets/index/top_title.png" />
<div style="margin-right: 2%" class="topTitle"> {{nowtime}} {{ curtime }} </div> <div style="margin-right: 2%" class="topTitle"> {{ nowtime }} {{ curtime }} </div>
</div> </div>
<div class="links"> <div class="links">
<router-link to="/ty">体育</router-link> <router-link to="/ty">体育</router-link>
@ -24,39 +24,48 @@
<script> <script>
//https://www.jianshu.com/p/574b85349d40 //https://www.jianshu.com/p/574b85349d40
// 引入api
import * as homeApi from '@/api/home'
export default { export default {
data() { data() {
return { return {
// 当前时间 // 当前时间
date:new Date(), date: new Date(),
nowtime:"", nowtime: "",
curtime:'', curtime: '',
day_num: 0,
week_num: 0,
mon_num: 0,
year_num: 0,
sumYear_num: 0
}; };
}, },
created() { created() {
const cweeks =['星期一','星期二','星期三','星期四','星期五','星期六','星期日',] const cweeks = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日',]
// 取当前时间 // 取当前时间
const year = this.date.getFullYear(); const year = this.date.getFullYear();
const month = ('0' + (this.date.getMonth() + 1)).slice(-2); const month = ('0' + (this.date.getMonth() + 1)).slice(-2);
const day = ('0' + this.date.getDate()).slice(-2); const day = ('0' + this.date.getDate()).slice(-2);
// 周几 // 周几
const wday = this.date.getDay()-1; const wday = this.date.getDay() - 1;
// 创建时候附带时间 // 创建时候附带时间
const hours = ('0' + this.date.getHours()).slice(-2); const hours = ('0' + this.date.getHours()).slice(-2);
const minutes = ('0' + this.date.getMinutes()).slice(-2); const minutes = ('0' + this.date.getMinutes()).slice(-2);
const seconds = ('0' + this.date.getSeconds()).slice(-2); const seconds = ('0' + this.date.getSeconds()).slice(-2);
this.curtime = `${hours}:${minutes}:${seconds}` this.curtime = `${hours}:${minutes}:${seconds}`
this.nowtime = `${year}.${month}.${day} `+ cweeks[wday]; this.nowtime = `${year}.${month}.${day} ` + cweeks[wday];
}, },
mounted() { mounted() {
this.getTimespan(); this.getTimespan();
this.getStat()
}, },
methods: { methods: {
// //
getTimespan(){ getTimespan() {
// 时分秒 // 时分秒
setInterval(()=>{ setInterval(() => {
let tdate = new Date(); let tdate = new Date();
//this.curtime = new Date().get.toLocaleString() //this.curtime = new Date().get.toLocaleString()
const hours = ('0' + tdate.getHours()).slice(-2); const hours = ('0' + tdate.getHours()).slice(-2);
@ -64,8 +73,29 @@ export default {
const seconds = ('0' + tdate.getSeconds()).slice(-2); const seconds = ('0' + tdate.getSeconds()).slice(-2);
// console.log(seconds) // console.log(seconds)
this.curtime = `${hours}:${minutes}:${seconds}` this.curtime = `${hours}:${minutes}:${seconds}`
},1000) }, 1000)
} },
getStat() {
let that = this
homeApi.allGroupNum().then(res => {
// get allTimeData
const tmpdata = res.data.returnData
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
this.sumYear_num = tmpdata.sumYear.noRepeatInNum
// let btdata = new Array();
// let bvdata = new Array();
// tmpdata.foreach(function(item,index){
// console.log(item);
// console.log(index);
// });
});
},
}, },
}; };
</script> </script>
@ -79,9 +109,11 @@ body {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
#app{
#app {
height: 100vh; height: 100vh;
} }
// 基类 // 基类
.btgym { .btgym {
width: 100vw; width: 100vw;
@ -111,6 +143,7 @@ body {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.topTitle { .topTitle {
margin-top: 1%; margin-top: 1%;
color: #00c6ff; color: #00c6ff;
@ -145,14 +178,17 @@ body {
cursor: pointer; cursor: pointer;
margin-top: 12px; margin-top: 12px;
} }
// 总览 // 总览
a:nth-child(2) { a:nth-child(2) {
margin-top: 22px; margin-top: 22px;
background-image: url("assets/index/zl.png"); background-image: url("assets/index/zl.png");
} }
a:nth-child(1) { a:nth-child(1) {
background-image: url("assets/index/ty.png"); background-image: url("assets/index/ty.png");
} }
a:nth-child(3) { a:nth-child(3) {
background-image: url("assets/index/wh.png"); background-image: url("assets/index/wh.png");
} }
@ -160,17 +196,21 @@ body {
a.router-link-exact-active { a.router-link-exact-active {
color: #fff; color: #fff;
} }
a.router-link-exact-active:nth-child(1) { a.router-link-exact-active:nth-child(1) {
background-image: url("assets/index/ty_active.png"); background-image: url("assets/index/ty_active.png");
} }
a.router-link-exact-active:nth-child(2) { a.router-link-exact-active:nth-child(2) {
background-image: url("assets/index/zl_active.png"); background-image: url("assets/index/zl_active.png");
} }
a.router-link-exact-active:nth-child(3) { a.router-link-exact-active:nth-child(3) {
background-image: url("assets/index/wh_active.png"); background-image: url("assets/index/wh_active.png");
} }
} }
} }
//底部信息 //底部信息
.footer { .footer {
width: 100%; width: 100%;

120
src/views/index.vue
View File

@ -22,7 +22,7 @@
<!-- 体育场的流量预警 --> <!-- 体育场的流量预警 -->
<div class="cgfitem"> <div class="cgfitem">
<span class="cgtitle">体育场</span> <span class="cgtitle">体育场</span>
<span class="cgval">20%</span> <span class="cgval">{{ proportionData }}</span>
<span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span> <span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
</div> </div>
<!-- 体育馆 --> <!-- 体育馆 -->
@ -101,11 +101,13 @@
<!-- 各场馆实时人数 cg1 --> <!-- 各场馆实时人数 cg1 -->
<!-- v-for="(item, index) in 6" :key="index" --> <!-- v-for="(item, index) in 6" :key="index" -->
<div class="rbitem" v-for="item in ssjgNumDatas" :key="item.groupId"> <div class="rbitem" v-for="item in ssjgNumDatas" :key="item.groupId">
<span class="rbcgname">体育场</span> <span class="rbcgname">{{ item.groupName }}</span>
<span class="rbtitle">当前人数</span> <span class="rbtitle">当前人数</span>
<!-- <span class="rbval">4,738</span> --> <!-- <span class="rbval">4,738</span> -->
<span class="rbval">{{ item.allEnter }}</span> <span class="rbval">{{ item.allEnter }}</span>
<span class="rbrate" :class="[{rbrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90},{rbrate3: parseInt(item.proportion) >= 90 }]">{{ item.proportion }}</span> <span class="rbrate"
:class="[{ rbrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { rbrate3: parseInt(item.proportion) >= 90 }]">{{
item.proportion }}</span>
</div> </div>
<!-- <div class="rbitem"> <!-- <div class="rbitem">
@ -170,11 +172,16 @@ export default {
mon_num: 0, mon_num: 0,
year_num: 0, year_num: 0,
klqsDatas: [], klqsDatas: [],
ssjgNumDatas: [] ssjgNumDatas: [],
rsqsDatas: [],
rsqs_datas: {},
rsqsData_z: [],
proportionData: []
}; };
}, },
//创建的时候修改背景图片 //创建的时候修改背景图片
created() { created() {
let cc = window.document.getElementById("app"); let cc = window.document.getElementById("app");
// 清除其他多余的classname // 清除其他多余的classname
let len = cc.classList.length; let len = cc.classList.length;
@ -184,18 +191,28 @@ export default {
} }
}, },
mounted() { mounted() {
this.getStat();
this.getHomeBarData();
this.getInfoDatas();
this.getGcgNumDatas()
setTimeout(() => {
this.home_bar(this.klqsDatas);
this.line_zone(this.rsqsData_z);
}, 300)
// 首页线图 // 首页线图
this.home_bar(); // this.home_bar(this.klqsDatas);
// 折线图 // 折线图
this.line_zone(); // this.line_zone();
// this.addNumber(0, 345235, 'jgval1'); // this.addNumber(0, 345235, 'jgval1');
// this.addNumber(0, 345235, 'jgval2'); // this.addNumber(0, 345235, 'jgval2');
// this.addNumber(0, 345235, 'jgval3'); // this.addNumber(0, 345235, 'jgval3');
this.getStat(); // this.getStat();
this.getHomeBarData(); // this.getHomeBarData();
this.getInfoDatas(); // this.getInfoDatas();
this.getGcgNumDatas() // this.getGcgNumDatas()
// this.selitem('y') // this.selitem('y')
}, },
methods: { methods: {
@ -279,7 +296,7 @@ export default {
}, },
// 透明背景柱状统计图 // 透明背景柱状统计图
home_bar() { home_bar(klqsDatas) {
var chartDom = document.getElementById("homebar"); var chartDom = document.getElementById("homebar");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
@ -287,8 +304,9 @@ export default {
// var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00', '22:00']; // var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00', '22:00'];
var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120] // var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
// var data = this.klqsDatas console.log(klqsDatas);
var data = this.klqsDatas
// var data = [Math.random() * 300] // var data = [Math.random() * 300]
option = { option = {
// backgroundColor: '#031245', // backgroundColor: '#031245',
@ -447,7 +465,7 @@ export default {
zlevel: 2, zlevel: 2,
}, },
{ {
data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300], data: data,
type: 'bar', type: 'bar',
barMaxWidth: 'auto', barMaxWidth: 'auto',
barWidth: 15, barWidth: 15,
@ -508,6 +526,7 @@ export default {
}, },
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影 extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
formatter: function (params) { formatter: function (params) {
console.log(params);
if (params.seriesName != "") { if (params.seriesName != "") {
return params.name + ' : 有 ' + params.value + ' 人'; return params.name + ' : 有 ' + params.value + ' 人';
} }
@ -587,20 +606,24 @@ export default {
var chartDom = document.getElementById("kl-line"); var chartDom = document.getElementById("kl-line");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
console.log(this.rsqsData_z);
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00']; var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00'];
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
var name = [] var name = []
// var data = [
// [174, 137, 135, 34, 152, 135, 140, 160, 100, 174, 137, 135, 34],
// [134, 74, 137, 135, 161, 137, 300, 220, 250, 134, 74, 137, 135],
// [147, 134, 155, 131, 174, 122, 140, 160, 150, 127, 134, 175, 161],
// [124, 147, 175, 134, 122, 175, 180, 110, 130, 154, 187, 125, 134],
// [154, 174, 157, 175, 121, 157, 200, 250, 280, 134, 174, 157, 175],
// ]
var data = [ var data = [
[137, 34, 135, 161, 74, 152, 110, 100, 150, 137, 34, 135, 161], this.rsqsData_z,
[174, 137, 135, 34, 152, 135, 140, 160, 100, 174, 137, 135, 34], this.rsqsData_z,
[134, 74, 137, 135, 161, 137, 300, 220, 250, 134, 74, 137, 135], this.rsqsData_z,
[147, 134, 155, 131, 174, 122, 140, 160, 150, 127, 134, 175, 161], this.rsqsData_z,
[124, 147, 175, 134, 122, 175, 180, 110, 130, 154, 187, 125, 134], this.rsqsData_z,
[154, 174, 157, 175, 121, 157, 200, 250, 280, 134, 174, 157, 175], this.rsqsData_z
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
] ]
var series = []; var series = [];
@ -681,7 +704,7 @@ export default {
color: '#57617B' color: '#57617B'
} }
}, },
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}', formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}<br />{a4}: {c4}<br />{a5}: {c5}',
backgroundColor: 'rgba(0,0,0,0.7)', // 背景 backgroundColor: 'rgba(0,0,0,0.7)', // 背景
padding: [8, 10], //内边距 padding: [8, 10], //内边距
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影 extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
@ -802,6 +825,8 @@ export default {
homeApi.homeBarData().then(res => { homeApi.homeBarData().then(res => {
// get allTimeData // get allTimeData
const tmpdata = res.data.data.allTimeData const tmpdata = res.data.data.allTimeData
const dkeys = res.data.data.dkeys
const groupsData = res.data.data.groupsData
let datas = [] let datas = []
Object.values(tmpdata).forEach((value) => { Object.values(tmpdata).forEach((value) => {
@ -810,8 +835,26 @@ export default {
}); });
console.log(datas); console.log(datas);
this.klqsDatas = datas that.klqsDatas = datas
console.log(tmpdata); console.log(this.klqsDatas);
groupsData.forEach((item) => {
console.log(item);
that.proportionData = item.proportion
console.log(this.proportionData);
// console.log(value);
// datas.push(value)
})
// let rsqsData = []
// Object.values(this.rsqsDatas).forEach((value) => {
// console.log(value);
// rsqsData.push(value)
// console.log(rsqsData);
// that.rsqsData_z = rsqsData
// console.log(that.rsqsData_z);
// });
// this.day_num = tmpdata.day.noRepeatInNum // this.day_num = tmpdata.day.noRepeatInNum
// this.week_num_num = tmpdata.week.noRepeatInNum // this.week_num_num = tmpdata.week.noRepeatInNum
// this.mon_num = tmpdata.month.noRepeatInNum // this.mon_num = tmpdata.month.noRepeatInNum
@ -875,13 +918,23 @@ export default {
// get allTimeData // get allTimeData
const tmpdata = res.data.data const tmpdata = res.data.data
console.log(tmpdata); console.log(tmpdata);
let datas = [] tmpdata.forEach((item) => {
tmpdata.forEach((item) =>{ // console.log(item);
console.log(item); // console.log(item.list);
console.log(item.list); that.rsqsDatas = item.list
console.log(this.rsqsDatas);
// console.log(value); // console.log(value);
// datas.push(value) // datas.push(value)
}) })
let rsqsData = []
Object.values(this.rsqsDatas).forEach((value) => {
// console.log(value);
rsqsData.push(value)
// console.log(rsqsData);
that.rsqsData_z = rsqsData
// console.log(that.rsqsData_z);
});
// this.day_num = tmpdata.day.noRepeatInNum // this.day_num = tmpdata.day.noRepeatInNum
// this.week_num_num = tmpdata.week.noRepeatInNum // this.week_num_num = tmpdata.week.noRepeatInNum
// this.mon_num = tmpdata.month.noRepeatInNum // this.mon_num = tmpdata.month.noRepeatInNum
@ -993,10 +1046,11 @@ export default {
height: 0.46rem; height: 0.46rem;
} }
.leftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgtitle{ .leftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgtitle {
margin-right: 5px; margin-right: 5px;
} }
.leftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgval{
.leftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgval {
margin-right: 10px; margin-right: 10px;
} }

Write Preview
Loading…
Cancel
Save