|
|
|
@ -7,12 +7,12 @@ |
|
|
|
<div class="keliu"> |
|
|
|
<span class="kliu_title">客流趋势</span> |
|
|
|
<div class="kliu_st"> |
|
|
|
<span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click.stop="selitem('y')">年</span> |
|
|
|
<span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')">月</span> |
|
|
|
<span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span> |
|
|
|
<span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span> |
|
|
|
<span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem2('m')">月</span> |
|
|
|
<span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem3('d')">日</span> |
|
|
|
</div> |
|
|
|
<!-- 柱状图 --> |
|
|
|
<div class="tongjitu" id="homebar" style="height: 230px; width: 100%"> |
|
|
|
<div class="tongjitu" id="homebar" style="height: 230px; width: 100%;"> |
|
|
|
<!-- 柱图，注意样式 --> |
|
|
|
</div> |
|
|
|
<!-- 几大场馆预警图 --> |
|
|
|
@ -199,16 +199,52 @@ export default { |
|
|
|
// this.selitem('y') |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
btgetdata(type) { |
|
|
|
console.log(type) |
|
|
|
let rqtp; |
|
|
|
switch (type) { |
|
|
|
case 'd': rqtp = "daily"; break; |
|
|
|
case 'm': rqtp = "monthly"; break; |
|
|
|
case 'y': rqtp = "yearly"; break; |
|
|
|
} |
|
|
|
btgetdata() { |
|
|
|
// console.log(type) |
|
|
|
// let rqtp; |
|
|
|
// switch (type) { |
|
|
|
// case 'd': rqtp = "daily"; break; |
|
|
|
// case 'm': rqtp = "monthly"; break; |
|
|
|
// case 'y': rqtp = "yearly"; break; |
|
|
|
// } |
|
|
|
// console.log(rqtp); |
|
|
|
// |
|
|
|
homeApi.allGroupTimeNum().then(res => { |
|
|
|
console.log(res); |
|
|
|
const kldata = res.data.data.allTimeData |
|
|
|
// 对应的键名 |
|
|
|
let kltd = new Array; |
|
|
|
let tmpkvd = new Array; |
|
|
|
const dkeys = res.data.data.dkeys |
|
|
|
dkeys.forEach(function (item, idx) { |
|
|
|
kltd.push(item) |
|
|
|
tmpkvd.push(kldata[item].num) |
|
|
|
}) |
|
|
|
this.kltdata = kltd |
|
|
|
this.klvdata = tmpkvd |
|
|
|
}); |
|
|
|
}, |
|
|
|
btgetdata2() { |
|
|
|
// |
|
|
|
homeApi.allGroupTimeNum({ 'granularity': rqtp }).then(res => { |
|
|
|
homeApi.allGroupTimeNum2().then(res => { |
|
|
|
console.log(res); |
|
|
|
const kldata = res.data.data.allTimeData |
|
|
|
// 对应的键名 |
|
|
|
let kltd = new Array; |
|
|
|
let tmpkvd = new Array; |
|
|
|
const dkeys = res.data.data.dkeys |
|
|
|
dkeys.forEach(function (item, idx) { |
|
|
|
kltd.push(item) |
|
|
|
tmpkvd.push(kldata[item].num) |
|
|
|
}) |
|
|
|
this.kltdata = kltd |
|
|
|
this.klvdata = tmpkvd |
|
|
|
}); |
|
|
|
}, |
|
|
|
btgetdata3() { |
|
|
|
// |
|
|
|
homeApi.allGroupTimeNum3().then(res => { |
|
|
|
console.log(res); |
|
|
|
const kldata = res.data.data.allTimeData |
|
|
|
// 对应的键名 |
|
|
|
let kltd = new Array; |
|
|
|
@ -227,7 +263,19 @@ export default { |
|
|
|
console.log('1111111111'); |
|
|
|
console.log(type); |
|
|
|
this.klselt = type; |
|
|
|
this.btgetdata(type) |
|
|
|
this.btgetdata() |
|
|
|
}, |
|
|
|
selitem2(type) { |
|
|
|
console.log('1111111111'); |
|
|
|
console.log(type); |
|
|
|
this.klselt = type; |
|
|
|
this.btgetdata2() |
|
|
|
}, |
|
|
|
selitem3(type) { |
|
|
|
console.log('1111111111'); |
|
|
|
console.log(type); |
|
|
|
this.klselt = type; |
|
|
|
this.btgetdata3() |
|
|
|
}, |
|
|
|
|
|
|
|
// 透明背景柱状统计图 |
|
|
|
@ -236,104 +284,6 @@ export default { |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
var option; |
|
|
|
|
|
|
|
// |
|
|
|
// let that = this; |
|
|
|
|
|
|
|
// option = { |
|
|
|
// xAxis: { |
|
|
|
// type: "category", |
|
|
|
// data: that.bar_tdata, |
|
|
|
// }, |
|
|
|
// yAxis: { |
|
|
|
// type: "value", |
|
|
|
// //网格线 |
|
|
|
// splitLine: { |
|
|
|
// lineStyle: { |
|
|
|
// type: "soild", |
|
|
|
// color: "#2F00FF", |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// series: [ |
|
|
|
// { |
|
|
|
// data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460], |
|
|
|
// //data: that.bar_data, |
|
|
|
// type: "bar", |
|
|
|
// showBackground: true, |
|
|
|
// // 设置顶部圆形 |
|
|
|
// symbolSize: function (d) { |
|
|
|
// console.log(d); |
|
|
|
// return d > 0 ? [10, 20] : [0, 0]; |
|
|
|
// }, |
|
|
|
// symbolPosition: "end", |
|
|
|
|
|
|
|
// // symbolPosition:'end', |
|
|
|
// // 背景颜色 |
|
|
|
// backgroundStyle: { |
|
|
|
// symbolPosition: "end", |
|
|
|
// symbolSize: [20, 20], |
|
|
|
// symbolOffset: [0, "-20%"], |
|
|
|
// opacity: 0.75, |
|
|
|
// //color: 'rgba(180, 180, 180, 0.2)' |
|
|
|
// color: { |
|
|
|
// type: "linear", |
|
|
|
// x: 0, |
|
|
|
// y: 1, |
|
|
|
// x2: 1, |
|
|
|
// y2: 1, |
|
|
|
// colorStops: [ |
|
|
|
// { |
|
|
|
// offset: 0, |
|
|
|
// color: "#2F00FF", // 0% 处的颜色 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// offset: 0.2, |
|
|
|
// color: "#000", // 50% 处的颜色 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// offset: 0.8, |
|
|
|
// color: "#000", // 50% 处的颜色 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// offset: 1, |
|
|
|
// color: "#2F00FF", // 0% 处的颜色 |
|
|
|
// }, |
|
|
|
// ], |
|
|
|
// global: false, // 缺省为 false |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
|
|
|
|
// // 条柱颜色 |
|
|
|
// color: { |
|
|
|
// type: "linear", |
|
|
|
// x: 0, |
|
|
|
// y: 1, |
|
|
|
// x2: 1, |
|
|
|
// y2: 1, |
|
|
|
// colorStops: [ |
|
|
|
// { |
|
|
|
// offset: 0, |
|
|
|
// color: "#00B4FF", // 0% 处的颜色 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// offset: 0.6, |
|
|
|
// color: "#2f00ff", |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// offset: 0.8, |
|
|
|
// color: "#2f00ff", |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// offset: 1, |
|
|
|
// color: "#00B4FF", // 100% 处的颜色 |
|
|
|
// }, |
|
|
|
// ], |
|
|
|
// global: false, // 缺省为 false |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// ], |
|
|
|
// }; |
|
|
|
|
|
|
|
|
|
|
|
// 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']; |
|
|
|
|
|
|
|
@ -882,7 +832,9 @@ export default { |
|
|
|
console.log(that); |
|
|
|
homeApi.allInfoDatas().then(res => { |
|
|
|
// get allTimeData |
|
|
|
this.ssjgNumDatas = res.data.returnData |
|
|
|
console.log(res); |
|
|
|
this.ssjgNumDatas = res.msg |
|
|
|
// this.ssjgNumDatas = res.data.returnData |
|
|
|
// let ssjgNumDatas = this.ssjgNumDatas |
|
|
|
// ssjgNumDatas.forEach(item => { |
|
|
|
// console.log(parseInt(item.proportion)); |
|
|
|
@ -998,13 +950,14 @@ export default { |
|
|
|
|
|
|
|
/* 统计图 */ |
|
|
|
.leftbox .keliu .tongjitu { |
|
|
|
padding-top: 0.56rem; |
|
|
|
/* padding-top: 0.56rem; */ |
|
|
|
width: 100%; |
|
|
|
top: 0.56rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* 场馆流量预警 */ |
|
|
|
.leftbox .cgflow { |
|
|
|
margin-top: 0.2rem; |
|
|
|
margin-top: 0.8rem; |
|
|
|
background-image: url("../assets/index/left_t3_bg.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
|
‘daijinzheng@xingtongworld.com’
3 years ago
