|
|
|
@ -156,28 +156,37 @@ let barChart = null, lineChart = null, pieChart = null; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// 年月日选中的样式,默认日 |
|
|
|
klselt: "d", |
|
|
|
// 客流标题数组 |
|
|
|
kltdata: [], |
|
|
|
// 客流值数组 |
|
|
|
klvdata: [], |
|
|
|
day_num: 0, |
|
|
|
week_num: 0, |
|
|
|
mon_num: 0, |
|
|
|
year_num: 0, |
|
|
|
|
|
|
|
// 年月日选中的样式,默认日 |
|
|
|
klselt: "d", |
|
|
|
// 绘制数据 |
|
|
|
klqsXDatas: [], |
|
|
|
klqsDatas: [], |
|
|
|
klqsXDataD: [],//日数据 |
|
|
|
klqsDataD: [], |
|
|
|
klqsXDataM: [],//月数据 |
|
|
|
klqsDataM: [], |
|
|
|
klqsXDataY: [],//年数据 |
|
|
|
klqsDataY: [], |
|
|
|
|
|
|
|
dataP: [],//左侧饼图 |
|
|
|
proportionData: [], |
|
|
|
groupNameData: [], |
|
|
|
proportionData_z: [], |
|
|
|
|
|
|
|
// 各场馆实时服务人次 |
|
|
|
ssjgNumDatas: [], |
|
|
|
|
|
|
|
// 折线图数据 |
|
|
|
rsqsXData: [], |
|
|
|
rsqsDatas: [], |
|
|
|
rsqs_datas: {}, |
|
|
|
rsqsDataName: [], |
|
|
|
rsqsData_z: [], |
|
|
|
proportionData: [], |
|
|
|
proportionData_z: [], |
|
|
|
groupNameData: [], |
|
|
|
|
|
|
|
timer0: null,//年月日切换定时器 |
|
|
|
timer1: null,//左上角定时器 |
|
|
|
timer2: null,//左下角定时器 |
|
|
|
@ -199,14 +208,17 @@ export default { |
|
|
|
mounted() { |
|
|
|
|
|
|
|
this.getStat(); |
|
|
|
this.btgetdata('d'); |
|
|
|
this.btgetdata('m'); |
|
|
|
this.btgetdata('y'); |
|
|
|
this.getPieData(); |
|
|
|
this.getInfoDatas(); |
|
|
|
this.getGcgNumDatas(); |
|
|
|
this.autoTimer0(); |
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
// 加延时器使图像绘制获取元素宽高最新的值、等待接口返回数据 |
|
|
|
this.home_bar(); |
|
|
|
this.autoTimer0();//年月日切换 |
|
|
|
this.line_zone(); |
|
|
|
this.index_pie1(); |
|
|
|
}, 1000) |
|
|
|
@ -216,29 +228,43 @@ export default { |
|
|
|
methods: { |
|
|
|
autoTimer0(){ |
|
|
|
let that = this; |
|
|
|
this.btgetdata(); |
|
|
|
|
|
|
|
var chartDom = document.getElementById("homebar"); |
|
|
|
barChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
that.klqsDatas = that.klqsDataD; |
|
|
|
that.klqsXDatas = that.klqsXDataD; |
|
|
|
this.home_bar(); |
|
|
|
|
|
|
|
clearInterval(that.timer0); |
|
|
|
that.timer0 = setInterval(() => { |
|
|
|
if(this.klselt == 'y'){ |
|
|
|
this.klselt = 'm'; |
|
|
|
that.klqsDatas = that.klqsDataM; |
|
|
|
that.klqsXDatas = that.klqsXDataM; |
|
|
|
}else if(this.klselt == 'm'){ |
|
|
|
this.klselt = 'd'; |
|
|
|
that.klqsDatas = that.klqsDataD; |
|
|
|
that.klqsXDatas = that.klqsXDataD; |
|
|
|
}else if(this.klselt == 'd'){ |
|
|
|
this.klselt = 'y'; |
|
|
|
that.klqsDatas = that.klqsDataY; |
|
|
|
that.klqsXDatas = that.klqsXDataY; |
|
|
|
} |
|
|
|
this.btgetdata(); |
|
|
|
this.home_bar(); |
|
|
|
}, 5000); |
|
|
|
}, |
|
|
|
btgetdata() { |
|
|
|
btgetdata(klselt) { |
|
|
|
//年客流、月、日 |
|
|
|
let that = this; |
|
|
|
// console.log(type) |
|
|
|
let rqtp; |
|
|
|
switch (this.klselt) { |
|
|
|
switch (klselt) { |
|
|
|
case 'd': rqtp = "daily"; break; |
|
|
|
case 'm': rqtp = "monthly"; break; |
|
|
|
case 'y': rqtp = "yearly"; break; |
|
|
|
} |
|
|
|
|
|
|
|
// allTygGroupTimeNum // /pass.passcc/allGroupTimeNum |
|
|
|
homeApi.allTygGroupTimeNum({granularity:rqtp}).then(res => { |
|
|
|
if(!res.data){ |
|
|
|
@ -251,11 +277,21 @@ export default { |
|
|
|
Object.values(tmpdata).forEach((value) => { |
|
|
|
datas.push(value.num); |
|
|
|
}); |
|
|
|
switch (klselt) { |
|
|
|
case 'd': |
|
|
|
that.klqsDataD = datas; |
|
|
|
that.klqsXDataD = dkeys; |
|
|
|
break; |
|
|
|
case 'm': |
|
|
|
that.klqsDataM = datas; |
|
|
|
that.klqsXDataM = dkeys; |
|
|
|
break; |
|
|
|
case 'y': |
|
|
|
that.klqsDataY = datas; |
|
|
|
that.klqsXDataY = dkeys; |
|
|
|
break; |
|
|
|
} |
|
|
|
|
|
|
|
that.klqsDatas = datas; |
|
|
|
that.klqsXDatas = dkeys; |
|
|
|
|
|
|
|
this.home_bar(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
@ -270,9 +306,7 @@ export default { |
|
|
|
// 透明背景柱状统计图--总服务人次趋势 |
|
|
|
home_bar() { |
|
|
|
let that = this; |
|
|
|
var chartDom = document.getElementById("homebar"); |
|
|
|
var option; |
|
|
|
barChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
function run() { |
|
|
|
let xData = that.klqsXDatas.slice(-8,that.klqsXDatas.length); |
|
|
|
|
