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

2

lite
luyisha 3 years ago
parent
c6a1639116
commit
28c1f8b03a
5 changed files with 194 additions and 125 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. 9
      src/api/home.js
  2. 9
      src/common/flexible.js
  3. 40
      src/views/cultrue/index.vue
  4. 5
      src/views/index.vue
  5. 252
      src/views/ty/index.vue

9
src/api/home.js
View File

@ -113,3 +113,12 @@ export function getID(param) {
param, param,
}) })
} }
// 24小时场馆总趋势
export function getAllfFlow(param) {
return request({
url: '/pass.passcc/getPassHoursData',
method: 'get',
param,
})
}

9
src/common/flexible.js
View File

@ -82,14 +82,19 @@
function refreshRem() { function refreshRem() {
var width = docEl.getBoundingClientRect().width; var width = docEl.getBoundingClientRect().width;
// 最小1366px，最大适配2560px // 最小1366px，最大适配2560px，修改最大适配3840px
if (width / dpr < 1366) { if (width / dpr < 1366) {
width = 1366 * dpr; width = 1366 * dpr;
} else if (width / dpr > 2560) { }
else if (width / dpr == 3840) {
width = 3840 * dpr;
}
else if (width / dpr > 2560) {
width = 2560 * dpr; width = 2560 * dpr;
} }
// 设置成24等份，设计稿时1920px的，这样1rem就是80px // 设置成24等份，设计稿时1920px的，这样1rem就是80px
var rem = width / 24; var rem = width / 24;
// var rem = width / 12;// 设置成12等份，设计稿时3840px的，这样1rem就是160px
docEl.style.fontSize = rem + "px"; docEl.style.fontSize = rem + "px";
flexible.rem = win.rem = rem; flexible.rem = win.rem = rem;
} }

40
src/views/cultrue/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-scale-screen width="1920" height="1080"> <v-scale-screen width="3840" height="2160">
<div id="cultrue"> <div id="cultrue">
<!-- 左侧 --> <!-- 左侧 -->
<div class="leftbox"> <div class="leftbox">
@ -116,9 +116,8 @@ export default {
}, 200); }, 200);
// 博物馆人数 // 博物馆人数
this.bwugrs(); this.bwugrs();
this.getData24h(); this.getData24h();//24小时总服务
this.cultrue_bar1();
this.cultrue_bar2(); this.cultrue_bar2();
this.cultrue_bar3(); this.cultrue_bar3();
this.addNumber(0, this.todayNum, 'insv') this.addNumber(0, this.todayNum, 'insv')
@ -130,7 +129,9 @@ export default {
// this.addNumber(0, this.tsg_num, 'cmdval3') // this.addNumber(0, this.tsg_num, 'cmdval3')
this.getTsgInfoDatas() this.getTsgInfoDatas()
// var name = ['图书馆', '文化馆', '博物馆'] // var name = ['图书馆', '文化馆', '博物馆']
setTimeout(() => {
this.cultrue_bar1();//24小时总服务
}, 200);
}, },
methods: { methods: {
cultrue_bar1() { cultrue_bar1() {
@ -298,7 +299,7 @@ export default {
myChart.setOption({ myChart.setOption({
animation: true, animation: true,
xAxis: { xAxis: {
data: xData data: that.data24hX
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
@ -890,8 +891,6 @@ export default {
Object.values(tmpdata).forEach((value) => { Object.values(tmpdata).forEach((value) => {
datas.push(value.num) datas.push(value.num)
}); });
that.data24h = datas;
that.data24hX = res.data.data.allTimeData;
}); });
}); });
@ -899,20 +898,20 @@ export default {
// 24小时趋势 // 24小时趋势
getData24h(){ getData24h(){
let that = this; let that = this;
homeApi.allGcgNumDatas().then(res=>{ homeApi.getID().then(res=>{
console.log(res, '====='); // console.log(res, '=====');
let id = res.data.data[1].groupId; let idArr = "";
// console.log(res.data.data, '=====') res.data.data.map(item=>{
return; if(item.type==1){
const tmpdata = res.data.data.allTimeData; idArr += "|"+item.groupId;
let datas = [] }
Object.values(tmpdata).forEach((value) => { })
datas.push(value.num) homeApi.getAllfFlow({groupsId:idArr}).then(res=>{
// console.log(res, '=====');
that.data24h = res.data.data.dvalue;
that.data24hX = res.data.data.dkeys;
}); });
that.data24h = datas;
that.data24hX = res.data.data.allTimeData;
}); });
} }
}, },
}; };
@ -1250,7 +1249,8 @@ export default {
overflow: visible !important; overflow: visible !important;
margin: 0px 0.57rem 0px 0.57rem !important; margin: 0px 0.57rem 0px 0.57rem !important;
box-sizing: border-box !important; box-sizing: border-box !important;
transform-origin: center top !important; // transform-origin: center top !important;
transform: scale(1) !important;
} }
} }
#cultrue{ #cultrue{

5
src/views/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-scale-screen width="1920" height="1080"> <v-scale-screen width="3840" height="2160">
<div id="index"> <div id="index">
<!-- 左边 --> <!-- 左边 -->
<div class="indexleftbox"> <div class="indexleftbox">
@ -1360,7 +1360,8 @@ export default {
// margin: 0px 0.29rem 0px 0.15rem !important; // margin: 0px 0.29rem 0px 0.15rem !important;
margin: 0px !important; margin: 0px !important;
box-sizing: border-box !important; box-sizing: border-box !important;
transform-origin: center top !important; // transform-origin: center top !important;
transform: scale(1) !important;
} }
#index{ #index{
// transform: scale(1.25); // transform: scale(1.25);

252
src/views/ty/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-scale-screen width="1920" height="1080"> <v-scale-screen width="3840" height="2160">
<div id="ty"> <div id="ty">
<div class="main"> <div class="main">
@ -102,7 +102,7 @@
<div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn"> <div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn">
<span class="venue_proportion_box_num" style="position: relative;cursor: pointer;"> <span class="venue_proportion_box_num" style="position: relative;cursor: pointer;">
<div id="pieChart1" style="height: 1.55rem;width: 1.55rem;margin: 0px auto;"></div> <div id="pieChart1" style="height: 1.55rem;width: 1.55rem;margin: 0px auto;"></div>
<div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;font-size: 0.22rem;">25%</div> <div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;font-size: 0.22rem;">{{ cgp_1 }}</div>
<!-- <div v-show="istygShow == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;" <!-- <div v-show="istygShow == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;"
@click="istygShowfn"> @click="istygShowfn">
</div> --> </div> -->
@ -110,14 +110,14 @@
</span> </span>
</div> </div>
<div class="venue_proportion_bo"> <div class="venue_proportion_bo">
<span>{{ cgn_1||0 }}</span> <span>{{ cgn_1 }}</span>
</div> </div>
</div> </div>
<div class="venue_proportion"> <div class="venue_proportion">
<div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn2"> <div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn2">
<span class="venue_proportion_box_num" style="position: relative;cursor: pointer;"> <span class="venue_proportion_box_num" style="position: relative;cursor: pointer;">
<div id="pieChart2" style="height: 1.55rem;width: 1.55rem;margin: 0px auto;"></div> <div id="pieChart2" style="height: 1.55rem;width: 1.55rem;margin: 0px auto;"></div>
<div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;">25%</div> <div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;">{{ cgp_2 }}</div>
<!-- <div v-show="istygShow2 == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;" <!-- <div v-show="istygShow2 == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;"
@click="istygShowfn2"> @click="istygShowfn2">
</div> --> </div> -->
@ -132,7 +132,7 @@
<div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn3"> <div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn3">
<span class="venue_proportion_box_num" style="position: relative;cursor: pointer;"> <span class="venue_proportion_box_num" style="position: relative;cursor: pointer;">
<div id="pieChart3" style="height: 1.55rem;width: 1.55rem;margin: 0px auto;"></div> <div id="pieChart3" style="height: 1.55rem;width: 1.55rem;margin: 0px auto;"></div>
<div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;">25%</div> <div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;">{{ cgp_3 }}</div>
<!-- <div v-show="istygShow3 == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;" <!-- <div v-show="istygShow3 == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;"
@click="istygShowfn3"> @click="istygShowfn3">
</div> --> </div> -->
@ -187,14 +187,22 @@ export default {
yearNum:0, yearNum:0,
// 一天的数据 // 一天的数据
daData:[], daData:[],
// 24小时的数据
data24hX:[],
data24h: [], data24h: [],
// 场馆人次占比 // 场馆人次占比
groupsData: [],
cgp_1:'', cgp_1:'',
cgp_2:'', cgp_2:'',
cgp_3:'', cgp_3:'',
cgn_1:'', cgn_1:'',
cgn_2:'', cgn_2:'',
cgn_3:'', cgn_3:'',
// 趋势图
rsqsXData: [],
rsqsDatas: [],
rsqsDataName: [],
rsqsDataAll: [],
initCount: 0, initCount: 0,
pubKey0: '', pubKey0: '',
@ -230,17 +238,20 @@ export default {
}, 200); }, 200);
// // 计算三个馆的进馆人数 // // 计算三个馆的进馆人数
this.$nextTick( ()=>{ this.$nextTick( ()=>{
this.getStat() this.getStat();
this.getData24h();//24小时总服务
this.gethomeBarData();//右上角占比
this.getGcgNumDatas();//右下角趋势图
}); });
this.$nextTick( ()=>{ this.$nextTick( ()=>{
setTimeout(() => { setTimeout(() => {
this.ty_bar1() this.ty_bar1()//24小时总服务
this.ty_pieDo()//右上角占比
this.ty_bar3()//右下角趋势图
}, 200); }, 200);
// this.ty_bar2() // this.ty_bar2()
this.ty_bar3()
this.ty_pie1()
}) })
@ -290,10 +301,8 @@ export default {
ty_bar1() { ty_bar1() {
let that = this; let that = this;
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 = that.data24hX;
// console.log(that.daData.dkeys, 'that.daData.dkeys') var data24h = that.data24h;
var data24h = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000, 10000];
// data24h = that.data24h;
let max=data24h[0]; let max=data24h[0];
for (let i = 0; i < data24h.length; i++) { for (let i = 0; i < data24h.length; i++) {
if (data24h[i]>max) { if (data24h[i]>max) {
@ -323,8 +332,7 @@ export default {
containLabel: true containLabel: true
}, },
xAxis: [{ xAxis: [{
// data: that.daData.dkeys, data: that.data24hX,
data: that.daData.dkeys,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#0095FF', color: '#0095FF',
@ -427,11 +435,8 @@ export default {
} }
function run(myChart){ function run(myChart){
that.getStat(); that.getData24h();
// console.log('乱序重新绘制', that.daData.dkeys, that.data24h, data24h); let data24h = that.data24h;
// data24h = data24h.sort(function(a,b){
// return Math.random() - 0.5;
// });
let max=data24h[0]; let max=data24h[0];
for (let i = 0; i < data24h.length; i++) { for (let i = 0; i < data24h.length; i++) {
if (data24h[i]>max) { if (data24h[i]>max) {
@ -446,7 +451,7 @@ export default {
myChart.setOption({ myChart.setOption({
animation: true, animation: true,
xAxis: { xAxis: {
data: that.daData.dkeys data: that.data24hX
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
@ -658,23 +663,15 @@ export default {
// } // }
// return data; // return data;
// }(); // }();
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00']; var xData = this.rsqsXData;
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
var name = ['体育场', '体育馆', '游泳场馆'] var name = this.rsqsDataName= ['体育场', '体育馆', '游泳场馆']
var data = [ console.log(this.rsqsDataName, 'this.rsqsDataName')
[0, 134, 435, 561, 674, 552, 810, 300, 550, 460, 650, 790], // = ['体育场', '体育馆', '游泳场馆'];
[0, 437, 535, 634, 752, 435, 740, 560, 900, 440, 580, 350], var data = this.rsqsDataAll;
[0, 0, 337, 635, 861, 637, 500, 620, 450, 630, 800, 320],
// [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],
// [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 = [];
for (var i = 0; i < 6; i++) { for (var i = 0; i < data.length; i++) {
series.push({ series.push({
name: name[i], name: name[i],
type: "line", type: "line",
@ -850,15 +847,36 @@ export default {
}, 3000); }, 3000);
}, 200) }, 200)
}, },
ty_pie1(){ ty_pieDo(){
let that = this; let that = this;
this.ty_pie("pieChart1",this.groupsData[0]);
this.ty_pie("pieChart2",this.groupsData[1]);
this.ty_pie("pieChart3",this.groupsData[2]);
function run(){
that.gethomeBarData();
setTimeout(() => {
this.ty_pie("pieChart1",this.groupsData[0]);
this.ty_pie("pieChart2",this.groupsData[1]);
this.ty_pie("pieChart3",this.groupsData[2]);
}, 200);
}
setInterval(function () {
run();
}, 3000);
},
ty_pie(ElementId,DD){
let that = this;
// console.log(num, '------')
if(!DD){
return;
}
var dataP = [{ var dataP = [{
name: '谷峰差收益', name: DD.groupName,
value: 25, value: (DD.proportion.split('%'))[0],
}, },
{ {
name: '充电桩收益', name: '/'+DD.groupName,
value: 75, value: 100-((DD.proportion.split('%'))[0]),
} }
]; ];
function hexToRgba(hex, opacity) { function hexToRgba(hex, opacity) {
@ -972,59 +990,11 @@ export default {
], ],
} }
function run(myChart){
// that.getStat();
// console.log('乱序重新绘制', that.daData.dkeys, that.data24h, data24h);
data24h = data24h.sort(function(a,b){
return Math.random() - 0.5;
});
let max=data24h[0];
for (let i = 0; i < data24h.length; i++) {
if (data24h[i]>max) {
max = data24h[i];
}
}
let dataLenArr = [], dataBGArr = [];
data24h.map(item=>{
dataLenArr.push(0);// 获取和数据一样长度的底部图形数组；
dataBGArr.push(max);// 数组最大值做背景柱形
})
myChart.setOption({
xAxis: {
data: that.daData.dkeys
},
series: [{
type: 'bar',
data: data24h,
},
{
type: 'scatter',
data: dataLenArr
},
{
name: '背景',
type: 'bar',
data: dataBGArr
},
]
});
}
// 加延时器使图像绘制获取元素宽高最新的值 // 加延时器使图像绘制获取元素宽高最新的值
setTimeout(()=>{ setTimeout(()=>{
var pieDom1 = document.getElementById("pieChart1"); var pieDom1 = document.getElementById(ElementId);
var myChart = echarts.init(pieDom1); var myChart = echarts.init(pieDom1);
option && myChart.setOption(option); option && myChart.setOption(option);
var pieDom2 = document.getElementById("pieChart2");
var myChart = echarts.init(pieDom2);
option && myChart.setOption(option);
var pieDom3 = document.getElementById("pieChart3");
var myChart = echarts.init(pieDom3);
option && myChart.setOption(option);
// setInterval(function () {
// run(myChart);
// }, 3000);
}, 200) }, 200)
}, },
@ -1041,7 +1011,7 @@ export default {
Object.values(tmpdata).forEach((value) => { Object.values(tmpdata).forEach((value) => {
datas.push(value.num) datas.push(value.num)
}); });
that.data24h = datas; // that.data24h = datas;
const day_tmp=res.data.data.groupsData const day_tmp=res.data.data.groupsData
//遍历加 //遍历加
@ -1049,14 +1019,14 @@ export default {
that.todayNum =+ item.noRepeatInNum that.todayNum =+ item.noRepeatInNum
}); });
// 赋值 // 赋值
if(day_tmp.length>0){ // if(day_tmp.length>0){
that.cgp_1 = day_tmp[0].proportion // that.cgp_1 = day_tmp[0].proportion
that.cgn_1 = day_tmp[0].groupName // that.cgn_1 = day_tmp[0].groupName
that.cgp_2 = day_tmp[1].proportion // that.cgp_2 = day_tmp[1].proportion
that.cgn_2 = day_tmp[1].groupName // that.cgn_2 = day_tmp[1].groupName
that.cgp_3 = day_tmp[2].proportion // that.cgp_3 = day_tmp[2].proportion
that.cgn_3 = day_tmp[2].groupName // that.cgn_3 = day_tmp[2].groupName
} // }
}) })
// MONTHLY // MONTHLY
@ -1075,6 +1045,88 @@ export default {
}) })
}, },
// 24小时趋势
getData24h(){
let that = this;
homeApi.getID().then(res=>{
// console.log(res, '=====');
let idArr = "";
res.data.data.map(item=>{
if(item.type==1){
idArr += "|"+item.groupId;
}
})
homeApi.getAllfFlow({groupsId:idArr}).then(res=>{
// console.log(res, '=====');
that.data24h = res.data.data.dvalue;
that.data24hX = res.data.data.dkeys;
});
});
},
// 人次占比
gethomeBarData(){
let that = this;
homeApi.getID().then(res=>{
// console.log(res, '=====');
let idArr = "";
res.data.data.map(item=>{
if(item.type==1){
idArr += "|"+item.groupId;
}
})
homeApi.homeBarData({groupsId:idArr}).then(res=>{
// console.log(res, '=====');
res.data.data.groupsData.forEach(item=>{
that.groupsData.push(item);
});
// console.log(that.groupsData, 'that.groupsData')
that.cgn_1 = that.groupsData[0].noRepeatInNum;
that.cgp_1 = that.groupsData[0].proportion;
that.cgn_2 = that.groupsData[1].noRepeatInNum;
that.cgp_2 = that.groupsData[1].proportion;
that.cgn_3 = that.groupsData[2]?that.groupsData[2].noRepeatInNum:'';
that.cgp_3 = that.groupsData[2]?that.groupsData[2].proportion:'';
});
});
},
// 折线趋势图
getGcgNumDatas(){
let that = this;
homeApi.getID().then(res=>{
// console.log(res, '=====');
let idArr = "";
res.data.data.map(item=>{
if(item.type==1){
idArr += "|"+item.groupId;
}
})
homeApi.allGcgNumDatas({groupsId:idArr}).then(res=>{
console.log(res, '=====');
const tmpdata = res.data.data;
tmpdata.forEach((item) => {
that.rsqsDataName.push(item.groupName);
that.rsqsDatas.push(item.list)
})
that.rsqsXData = res.data.data[0].list.dkeys;
that.rsqsDatas.forEach((item) => {
let rsqsData = []
Object.getOwnPropertyNames(item).forEach((value) => {
if(value=='dkeys'){
}
if(value=='dvalue'){
// console.log(item, value, '-----')
// rsqsData.push(item[value])
rsqsData = item[value];
}
});
that.rsqsDataAll.push(rsqsData)
})
});
});
},
// 动画加数从效果 // 动画加数从效果
addNumber(start, end, id) { addNumber(start, end, id) {
@ -2092,7 +2144,9 @@ export default {
overflow: visible !important; overflow: visible !important;
margin: 0px 0.57rem 0px 0.57rem !important; margin: 0px 0.57rem 0px 0.57rem !important;
box-sizing: border-box !important; box-sizing: border-box !important;
transform-origin: center top !important; // transform-origin: center top !important;
transform: scale(1) !important;
// animation: animationB 1s ease-in-out 3s;
} }
} }
#ty{ #ty{

Write Preview
Loading…
Cancel
Save