|
|
|
@ -5,48 +5,76 @@ |
|
|
|
<div class="main"> |
|
|
|
<div class="left"> |
|
|
|
<div class="tiyuBla"> |
|
|
|
<div style="position: absolute; right: 32%; top: 52%">体育</div> |
|
|
|
<span style="position: absolute; right: 12%; top: 72%;font-size: 16px;" class="wh_small">体育场 | |
|
|
|
<div style="position: absolute; right: 2.82rem; top: 1.66rem">体育</div> |
|
|
|
<div style="position: absolute; right: 1.2rem; top: 2.02rem;font-size: 0.3rem; |
|
|
|
background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,0.2),rgba(255,255,255,0.2)); |
|
|
|
-webkit-background-clip:text; |
|
|
|
-webkit-text-fill-color:transparent; ">STADIUM</div> |
|
|
|
<span style="right: 1.66rem; top: 2.53rem;" class="wh_small">体育场 | |
|
|
|
体育馆 | 游泳场馆</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="tongji"> |
|
|
|
<span class="institle">总计进馆人数</span> |
|
|
|
<span class="institle">累计服务人数</span> |
|
|
|
<!-- 今日进馆人数 --> |
|
|
|
<div class="insval"> |
|
|
|
<img src="../../assets/wh/td_ins.png" /> |
|
|
|
<span id="insv" class="insv">{{todayNum}}</span> |
|
|
|
<span class="inst">今日进馆人数</span> |
|
|
|
<div> |
|
|
|
<span id="insv" class="insv">{{todayNum}}</span> |
|
|
|
<span class="inst">今日进馆人数</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 本周进馆人数 --> |
|
|
|
<div class="insval"> |
|
|
|
<img src="../../assets/wh/tm_ins.png" /> |
|
|
|
<div> |
|
|
|
<span id="insv2" class="insv">{{weekNum}}</span> |
|
|
|
<span class="inst">本周进馆人数</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 本月进馆人数 --> |
|
|
|
<div class="insval"> |
|
|
|
<img src="../../assets/wh/tm_ins.png" /> |
|
|
|
<span id="insv2" class="insv">{{monthNum}}</span> |
|
|
|
<span class="inst">本月进馆人数</span> |
|
|
|
<div> |
|
|
|
<span id="insv2" class="insv">{{monthNum}}</span> |
|
|
|
<span class="inst">本月进馆人数</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 本年进馆人数 --> |
|
|
|
<div class="insval"> |
|
|
|
<img src="../../assets/wh/tyear_ins.png" /> |
|
|
|
<span id="insv3" class="insv">{{ yearNum }}</span> |
|
|
|
<span class="inst">本年进馆人数</span> |
|
|
|
<div> |
|
|
|
<span id="insv3" class="insv">{{ yearNum }}</span> |
|
|
|
<span class="inst">本年进馆人数</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="dinszone"> |
|
|
|
<span class="dins_title">24小时总进馆人流趋势</span> |
|
|
|
<span class="dins_title">24小时总服务人次趋势</span> |
|
|
|
<!-- 柱状统计图 --> |
|
|
|
<div class="dins_chart" ref="dinschart" style="height: 22vh; width: 100%"></div> |
|
|
|
<div class="dins_chart" ref="dinschart"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="center"> |
|
|
|
<div class="c_title">24小时进馆人数</div> |
|
|
|
<div class="c_l"></div> |
|
|
|
<div class="c_r"> |
|
|
|
<span class="c_r_num">21312</span> |
|
|
|
<span class="c_r_txt">体育场</span> |
|
|
|
<span class="c_r_num">21312</span> |
|
|
|
<span class="c_r_txt">体育馆</span> |
|
|
|
<span class="c_r_num">21312</span> |
|
|
|
<span class="c_r_txt">游泳场馆</span> |
|
|
|
</div> |
|
|
|
<!-- v-for=" item in videoData" :key="item.key" --> |
|
|
|
<!-- <div class="item" v-for=" item in videoData" :key="item.key" style="position: relative;"> |
|
|
|
<video style="width: 68%;height: 70%;position: absolute;left: 0.3rem;top: 0.3rem;" :id="item.key" |
|
|
|
autoplay></video> |
|
|
|
</div> --> |
|
|
|
<div class="item" style="position: relative;"> |
|
|
|
<!-- <div class="item" style="position: relative;"> |
|
|
|
<video style="width: 68%;height: 70%;position: absolute;top: 0.3rem;left: 0.3rem;" id="camera0" |
|
|
|
autoplay></video> |
|
|
|
</div> |
|
|
|
@ -55,43 +83,44 @@ |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<video style="width: 68%;margin-top: 0.3rem;height: 70%;margin-left: 0.3rem;" id="camera2" autoplay></video> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="right"> |
|
|
|
<!-- <div class="item"></div> --> |
|
|
|
<div class="pcgrliu"> |
|
|
|
<span class="pcg_title">各场馆人次占比</span> |
|
|
|
<div class="venue_proportion_box" style="width: 100%; height: 290px"> |
|
|
|
<div class="pcg_title"> |
|
|
|
各场馆服务人次占比 |
|
|
|
<span @click="rightTab=2" :class="rightTab==2?'current':'no-current'" style="margin-right: 0.21rem;"></span> |
|
|
|
<span @click="rightTab=1" :class="rightTab==1?'current':'no-current'" style="margin-right: 0.21rem;"></span> |
|
|
|
</div> |
|
|
|
<div class="iframe_box" v-if="rightTab==2"> |
|
|
|
<iframe src="https://www.js365.org.cn/pages/reserve/index " style="width: 100%; height: 6.96rem;transform: scale(0.3333);transform-origin: 0 0;"></iframe> |
|
|
|
</div> |
|
|
|
<div class="venue_proportion_box" style="width: 100%; height: 2.32rem;margin-top: 0.13rem;" v-if="rightTab==1"> |
|
|
|
<div class="venue_proportion"> |
|
|
|
<div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn"> |
|
|
|
<span class="venue_proportion_box_num" style="position: relative;cursor: pointer;"> |
|
|
|
<a target="tyg" style="text-decoration: none;color: #fff;z-index: 9999;"> |
|
|
|
{{ cgp_1 }} |
|
|
|
|
|
|
|
</a> |
|
|
|
<!-- v-show="istygShow == true" --> |
|
|
|
<div v-show="istygShow == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;" |
|
|
|
<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;">25%</div> |
|
|
|
<!-- <div v-show="istygShow == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;" |
|
|
|
@click="istygShowfn"> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<div class="venue_proportion_bo"> |
|
|
|
<span>{{ cgn_1 }}</span> |
|
|
|
<span>{{ cgn_1||0 }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="venue_proportion"> |
|
|
|
<div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn2"> |
|
|
|
<span class="venue_proportion_box_num" style="position: relative;cursor: pointer;"> |
|
|
|
<a target="tyg" style="text-decoration: none;color: #fff;z-index: 9999;"> |
|
|
|
{{ cgp_2 }} |
|
|
|
|
|
|
|
</a> |
|
|
|
<!-- v-show="istygShow == true" --> |
|
|
|
<div v-show="istygShow2 == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;" |
|
|
|
<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 v-show="istygShow2 == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;" |
|
|
|
@click="istygShowfn2"> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
</span> |
|
|
|
</div> |
|
|
|
@ -102,11 +131,11 @@ |
|
|
|
<div class="venue_proportion"> |
|
|
|
<div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn3"> |
|
|
|
<span class="venue_proportion_box_num" style="position: relative;cursor: pointer;"> |
|
|
|
{{ cgp_3 }} |
|
|
|
<!-- v-show="istygShow == true" --> |
|
|
|
<div v-show="istygShow3 == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;" |
|
|
|
<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 v-show="istygShow3 == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;" |
|
|
|
@click="istygShowfn3"> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
</span> |
|
|
|
</div> |
|
|
|
@ -118,10 +147,10 @@ |
|
|
|
</div> |
|
|
|
<!-- <div id="pcgchart1" style="width: 100%;height: 25vh;margin-top: 20px;"></div> --> |
|
|
|
</div> |
|
|
|
<!-- 各场馆人流趋势 --> |
|
|
|
<!-- 各场馆服务人次趋势 --> |
|
|
|
<div class="pcgrliu"> |
|
|
|
<span class="pcg_title2">各场馆人流趋势</span> |
|
|
|
<div id="pcgchart2" style="width: 100%; height: 290px"></div> |
|
|
|
<span class="pcg_title2">各场馆服务人次趋势</span> |
|
|
|
<div id="pcgchart2" style="width: 100%; height: 5.2rem"></div> |
|
|
|
</div> |
|
|
|
<!-- <div class="item"></div> --> |
|
|
|
</div> |
|
|
|
@ -153,10 +182,12 @@ export default { |
|
|
|
istygShow3: false, |
|
|
|
// 体育馆、体育场、游泳馆进场人数总计 |
|
|
|
todayNum:0, |
|
|
|
weekNum: 0, |
|
|
|
monthNum:0, |
|
|
|
yearNum:0, |
|
|
|
// 一天的数据 |
|
|
|
daData:[], |
|
|
|
data24h: [], |
|
|
|
// 场馆人次占比 |
|
|
|
cgp_1:'', |
|
|
|
cgp_2:'', |
|
|
|
@ -172,7 +203,8 @@ export default { |
|
|
|
oWebControl0: '', |
|
|
|
oWebControl1: '', |
|
|
|
oWebControl2: '', |
|
|
|
videoData: [] |
|
|
|
videoData: [], |
|
|
|
rightTab: 1 |
|
|
|
|
|
|
|
}; |
|
|
|
}, |
|
|
|
@ -189,11 +221,13 @@ export default { |
|
|
|
mounted() { |
|
|
|
let cc = window.document.getElementById("app"); |
|
|
|
// 清除其他多余的classname |
|
|
|
if (cc.className.indexOf('ty_bg') > -1) { |
|
|
|
cc.className = "btgym"; |
|
|
|
} else { |
|
|
|
cc.classList.add("ty_bg"); |
|
|
|
} |
|
|
|
setTimeout(() => { |
|
|
|
if (cc.className.indexOf("ty_bg") > -1) { |
|
|
|
cc.className = "btgym"; |
|
|
|
} else { |
|
|
|
cc.classList.add("ty_bg"); |
|
|
|
} |
|
|
|
}, 200); |
|
|
|
// // 计算三个馆的进馆人数 |
|
|
|
this.$nextTick( ()=>{ |
|
|
|
this.getStat() |
|
|
|
@ -204,7 +238,8 @@ export default { |
|
|
|
this.ty_bar1() |
|
|
|
// this.ty_bar2() |
|
|
|
this.ty_bar3() |
|
|
|
}) |
|
|
|
this.ty_pie1() |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// this.$nextTick(()=>{ |
|
|
|
@ -252,11 +287,22 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
ty_bar1() { |
|
|
|
var myChart = echarts.init(this.$refs.dinschart); |
|
|
|
|
|
|
|
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 = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000] |
|
|
|
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']; |
|
|
|
// console.log(that.daData.dkeys, 'that.daData.dkeys') |
|
|
|
var data24h = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000, 10000]; |
|
|
|
// data24h = that.data24h; |
|
|
|
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);// 数组最大值做背景柱形 |
|
|
|
}) |
|
|
|
|
|
|
|
var option = { |
|
|
|
tooltip: { |
|
|
|
@ -274,6 +320,7 @@ export default { |
|
|
|
containLabel: true |
|
|
|
}, |
|
|
|
xAxis: [{ |
|
|
|
// data: that.daData.dkeys, |
|
|
|
data: xData, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
@ -339,7 +386,7 @@ export default { |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
data: data, |
|
|
|
data: data24h, |
|
|
|
zlevel: 11 |
|
|
|
}, |
|
|
|
{ |
|
|
|
@ -347,7 +394,7 @@ export default { |
|
|
|
stack: 1, |
|
|
|
xAxisIndex: 0, |
|
|
|
symbolOffset: [0, 0], //相对于原本位置的偏移量 |
|
|
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
|
|
data: dataLenArr, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: '#fff' |
|
|
|
@ -362,7 +409,7 @@ export default { |
|
|
|
type: 'bar', |
|
|
|
barWidth: '10%', |
|
|
|
barGap: '-100%', |
|
|
|
data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000], |
|
|
|
data: dataBGArr, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: '#004298', |
|
|
|
@ -376,13 +423,55 @@ export default { |
|
|
|
] |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
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(()=>{ |
|
|
|
var myChart = echarts.init(this.$refs.dinschart); |
|
|
|
option && myChart.setOption(option); |
|
|
|
setInterval(function () { |
|
|
|
run(myChart); |
|
|
|
}, 3000); |
|
|
|
}, 200) |
|
|
|
}, |
|
|
|
|
|
|
|
ty_bar2() { |
|
|
|
var chartDom = document.getElementById("pcgchart1"); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
var option |
|
|
|
// var xData = function() { |
|
|
|
@ -547,11 +636,13 @@ export default { |
|
|
|
series: series, |
|
|
|
} |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
setTimeout(()=>{ |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
option && myChart.setOption(option); |
|
|
|
}, 200) |
|
|
|
}, |
|
|
|
ty_bar3() { |
|
|
|
var chartDom = document.getElementById("pcgchart2"); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
var option |
|
|
|
// var xData = function() { |
|
|
|
@ -631,7 +722,8 @@ export default { |
|
|
|
option = { |
|
|
|
// backgroundColor: "#141f56", |
|
|
|
legend: { |
|
|
|
top: 260, |
|
|
|
// top: 390, |
|
|
|
bottom: 0, |
|
|
|
right: 0, |
|
|
|
itemGap: 35, |
|
|
|
itemWidth: 20, |
|
|
|
@ -674,9 +766,9 @@ export default { |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
borderWidth: 0, |
|
|
|
top: 230, |
|
|
|
bottom: 240, |
|
|
|
right: 20, |
|
|
|
top: 50, |
|
|
|
// bottom: '2rem', |
|
|
|
right: 0, |
|
|
|
left: 50, |
|
|
|
textStyle: { |
|
|
|
color: "#fff" |
|
|
|
@ -736,8 +828,188 @@ export default { |
|
|
|
}, |
|
|
|
series: series, |
|
|
|
} |
|
|
|
|
|
|
|
setTimeout(()=>{ |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
option && myChart.setOption(option); |
|
|
|
}, 200) |
|
|
|
}, |
|
|
|
ty_pie1(){ |
|
|
|
let that = this; |
|
|
|
var dataP = [{ |
|
|
|
name: '谷峰差收益', |
|
|
|
value: 25, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '充电桩收益', |
|
|
|
value: 75, |
|
|
|
} |
|
|
|
]; |
|
|
|
function hexToRgba(hex, opacity) { |
|
|
|
return ( |
|
|
|
'rgba(' + |
|
|
|
parseInt('0x' + hex.slice(1, 3)) + |
|
|
|
',' + |
|
|
|
parseInt('0x' + hex.slice(3, 5)) + |
|
|
|
',' + |
|
|
|
parseInt('0x' + hex.slice(5, 7)) + |
|
|
|
',' + |
|
|
|
opacity + |
|
|
|
')' |
|
|
|
); |
|
|
|
} |
|
|
|
let color = ['#00d2ff', '#22e5d1', '#f4d64e', '#0072ff']; |
|
|
|
let color1=[], color2=[], color3=[]; |
|
|
|
// 设置每层圆环颜色和添加间隔的透明色 |
|
|
|
color.forEach((item) => { |
|
|
|
color1.push(item, 'transparent'); |
|
|
|
color2.push(hexToRgba(item, 0.4), 'transparent'); |
|
|
|
color3.push(hexToRgba(item, 0.7), 'transparent'); |
|
|
|
}); |
|
|
|
let data1 = []; |
|
|
|
let sum = 0; |
|
|
|
// 根据总值设置间隔值大小 |
|
|
|
dataP.forEach((item) => { |
|
|
|
sum += Number(item.value); |
|
|
|
}); |
|
|
|
// 给每个数据后添加特定的透明的数据形成间隔 |
|
|
|
dataP.forEach((item, index) => { |
|
|
|
if (item.value !== 0) { |
|
|
|
data1.push(item, { |
|
|
|
name: '', |
|
|
|
value: sum / 70, |
|
|
|
labelLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: 'transparent', |
|
|
|
}, |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
color: 'transparent', |
|
|
|
}, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
var option = { |
|
|
|
tooltip: { |
|
|
|
formatter: (params) => { |
|
|
|
if (params.name !== '') { |
|
|
|
return params.name + ' : ' + params.value + '\n' + '%'; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
grid: { |
|
|
|
top: 0, |
|
|
|
bottom: 0, |
|
|
|
left: 0, |
|
|
|
right: 0, |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
|
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['90%', '80%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
hoverAnimation: false, |
|
|
|
startAngle: 90, |
|
|
|
selectedMode: 'single', |
|
|
|
selectedOffset: 0, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: (params) => { |
|
|
|
console.log('params', params) |
|
|
|
return color2[params.dataIndex]; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
formatter: '{b}' + ' ' + '{c}', |
|
|
|
}, |
|
|
|
data: data1, |
|
|
|
z: 666, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['90%', '100%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
hoverAnimation: false, |
|
|
|
startAngle: 90, |
|
|
|
selectedMode: 'single', |
|
|
|
selectedOffset: 0, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: (params) => { |
|
|
|
return color3[params.dataIndex]; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
formatter: '{b}' + ' ' + '{c}', |
|
|
|
}, |
|
|
|
data: data1, |
|
|
|
z: 666, |
|
|
|
}, |
|
|
|
], |
|
|
|
} |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
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(()=>{ |
|
|
|
var pieDom1 = document.getElementById("pieChart1"); |
|
|
|
var myChart = echarts.init(pieDom1); |
|
|
|
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) |
|
|
|
}, |
|
|
|
|
|
|
|
// 总计 体育场馆的总数 |
|
|
|
@ -747,7 +1019,13 @@ export default { |
|
|
|
// DAILY |
|
|
|
homeApi.allTygGroupTimeNum({granularity:"daily",groupsId:groups}).then(res=>{ |
|
|
|
// 24h 人流趋势 |
|
|
|
that.daData = res.data.data |
|
|
|
that.daData = res.data.data; |
|
|
|
const tmpdata = res.data.data.allTimeData; |
|
|
|
let datas = [] |
|
|
|
Object.values(tmpdata).forEach((value) => { |
|
|
|
datas.push(value.num) |
|
|
|
}); |
|
|
|
that.data24h = datas; |
|
|
|
const day_tmp=res.data.data.groupsData |
|
|
|
|
|
|
|
//遍历加 |
|
|
|
@ -755,12 +1033,14 @@ export default { |
|
|
|
that.todayNum =+ item.noRepeatInNum |
|
|
|
}); |
|
|
|
// 赋值 |
|
|
|
that.cgp_1 = day_tmp[0].proportion |
|
|
|
that.cgn_1 = day_tmp[0].groupName |
|
|
|
that.cgp_2 = day_tmp[1].proportion |
|
|
|
that.cgn_2 = day_tmp[1].groupName |
|
|
|
that.cgp_3 = day_tmp[2].proportion |
|
|
|
that.cgn_3 = day_tmp[2].groupName |
|
|
|
if(day_tmp.length>0){ |
|
|
|
that.cgp_1 = day_tmp[0].proportion |
|
|
|
that.cgn_1 = day_tmp[0].groupName |
|
|
|
that.cgp_2 = day_tmp[1].proportion |
|
|
|
that.cgn_2 = day_tmp[1].groupName |
|
|
|
that.cgp_3 = day_tmp[2].proportion |
|
|
|
that.cgn_3 = day_tmp[2].groupName |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
// MONTHLY |
|
|
|
@ -1346,7 +1626,7 @@ export default { |
|
|
|
<style> |
|
|
|
.ty_bg { |
|
|
|
clear: both; |
|
|
|
background-image: url("../../assets/ty/tybg.jpg") !important; |
|
|
|
background-image: url("../../assets/ty/bg.png") !important; |
|
|
|
} |
|
|
|
|
|
|
|
.screen-box { |
|
|
|
@ -1356,37 +1636,31 @@ export default { |
|
|
|
<style lang="less" scoped> |
|
|
|
.main { |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
width: 33%; |
|
|
|
height: 75vh; |
|
|
|
// height: 100%; |
|
|
|
// border: 1px solid red; |
|
|
|
// margin-left: 2%; |
|
|
|
margin-top: -4%; |
|
|
|
width: 30%; |
|
|
|
width: 7.08rem; |
|
|
|
// height: 75vh; |
|
|
|
margin-top: calc(-3.32rem + 2.09rem); |
|
|
|
|
|
|
|
.tiyuBla { |
|
|
|
width: 100%; |
|
|
|
height: 40%; |
|
|
|
width: 7.48rem; |
|
|
|
height: 3.32rem; |
|
|
|
background-image: url("../../assets/ty/ins_title_bg.png"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
color: white; |
|
|
|
font-size: 38px; |
|
|
|
font-size: 0.56rem; |
|
|
|
font-weight: bold; |
|
|
|
position: relative; |
|
|
|
margin-left: -0.4rem; |
|
|
|
|
|
|
|
.wh_small { |
|
|
|
padding-top: 12px; |
|
|
|
font-size: 12px; |
|
|
|
text-align: right; |
|
|
|
padding-right: 10px; |
|
|
|
font-size: 0.19rem; |
|
|
|
color: white; |
|
|
|
position: absolute; |
|
|
|
right: 0; |
|
|
|
top: 0; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
@ -1394,11 +1668,15 @@ export default { |
|
|
|
.tongji { |
|
|
|
width: 100%; |
|
|
|
// float: left; |
|
|
|
height: 2.4rem; |
|
|
|
background-image: url("../../assets/wh/ins_count.png"); |
|
|
|
height: 2.69rem;//1920屏幕下==216px |
|
|
|
// height: 216px; |
|
|
|
background-image: url("../../assets/ty/ins_count.png"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-top: 0.48rem; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.institle { |
|
|
|
color: #00c6ff; |
|
|
|
@ -1407,13 +1685,16 @@ export default { |
|
|
|
height: 0.38rem; |
|
|
|
display: block; |
|
|
|
font-size: 16px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.insval { |
|
|
|
width: 30%; |
|
|
|
height: 1.68rem; |
|
|
|
float: left; |
|
|
|
margin-left: 0.16rem; |
|
|
|
width: 46%; |
|
|
|
height: 1.06rem; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
box-sizing: border-box; |
|
|
|
padding-left: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.insval:first { |
|
|
|
@ -1422,53 +1703,60 @@ export default { |
|
|
|
|
|
|
|
.insval img { |
|
|
|
padding-top: 0.268rem; |
|
|
|
display: block; |
|
|
|
// display: block; |
|
|
|
text-align: center; |
|
|
|
height: 0.78rem; |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
// margin-left: auto; |
|
|
|
// margin-right: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.insval span { |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
.insval .insv { |
|
|
|
height: 0.48rem; |
|
|
|
// height: 0.24rem; |
|
|
|
line-height: 0.18rem; |
|
|
|
font-size: 22px; |
|
|
|
font-size: 0.34rem; |
|
|
|
color: white; |
|
|
|
margin-bottom: 0.13rem; |
|
|
|
margin-top: -0.1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.insval .inst { |
|
|
|
color: #6a6c7c; |
|
|
|
font-size: 12px; |
|
|
|
height: 0.12rem; |
|
|
|
line-height: 0.12rem; |
|
|
|
color: #fff; |
|
|
|
font-size: 0.19rem; |
|
|
|
height: 0.18rem; |
|
|
|
line-height: 0.18rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.dinszone { |
|
|
|
margin-top: 0.22rem; |
|
|
|
margin-top: 0.28rem; |
|
|
|
width: 100%; |
|
|
|
height: 0.48rem; |
|
|
|
// height: 0.48rem; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
|
|
|
|
.dinszone .dins_title { |
|
|
|
display: block; |
|
|
|
height: 0.78rem; |
|
|
|
height: 0.76rem; |
|
|
|
line-height: 0.58rem; |
|
|
|
color: #fff; |
|
|
|
font-size: 0.2rem; |
|
|
|
background-image: url('../../assets/wh/dins_title_bg.png'); |
|
|
|
background-image: url('../../assets/ty/l_t_bg.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: 0 0; |
|
|
|
background-repeat: no-repeat; |
|
|
|
padding-left: 0.96rem; |
|
|
|
} |
|
|
|
.dins_chart{ |
|
|
|
margin-top: 0.2rem; |
|
|
|
width: 100%; |
|
|
|
height: 2.76rem; |
|
|
|
} |
|
|
|
|
|
|
|
.bfb { |
|
|
|
width: 100%; |
|
|
|
@ -1538,19 +1826,72 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.center { |
|
|
|
margin-top: 3%; |
|
|
|
width: 30%; |
|
|
|
height: 72vh; |
|
|
|
margin-top: 0.72rem; |
|
|
|
width: 35%; |
|
|
|
width: 7.63rem; |
|
|
|
height: 85vh; |
|
|
|
height: 8.41rem; |
|
|
|
// border: 1px solid #019ade; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
// align-items: center; |
|
|
|
align-content: center; |
|
|
|
justify-content: center; |
|
|
|
// justify-content: center; |
|
|
|
background-image: url("../../assets/ty/vbig_bg.png"); |
|
|
|
background-size: 100% 90%; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.c_title{ |
|
|
|
width: 4.63rem; |
|
|
|
height: 1.01rem; |
|
|
|
line-height: 1.01rem; |
|
|
|
background-image: url("../../assets/ty/c_bg_t.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
color: #fff; |
|
|
|
font-size: 0.41rem; |
|
|
|
font-weight: bold; |
|
|
|
text-align: center; |
|
|
|
position: absolute; |
|
|
|
top: -0.5rem; |
|
|
|
left: 1.62rem; |
|
|
|
} |
|
|
|
.c_l{ |
|
|
|
width: 4.08rem; |
|
|
|
height: 7.62rem; |
|
|
|
background-image: url("../../assets/ty/c_bg_l.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
margin: 1rem 0.15rem auto 0.49rem; |
|
|
|
} |
|
|
|
.c_r{ |
|
|
|
width: 2.46rem; |
|
|
|
height: 6.33rem; |
|
|
|
margin-top: 1.81rem; |
|
|
|
background-image: url("../../assets/ty/c_bg_r.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
|
|
.c_r_num{ |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
color: #fff; |
|
|
|
font-size: 0.38rem; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 0.45rem; |
|
|
|
text-align: center; |
|
|
|
margin-top: 0.2rem; |
|
|
|
} |
|
|
|
.c_r_txt{ |
|
|
|
width: 100%; |
|
|
|
color: #00A7FF; |
|
|
|
font-size: 0.27rem; |
|
|
|
display: block; |
|
|
|
text-align: center; |
|
|
|
margin-bottom: 1.72rem; |
|
|
|
} |
|
|
|
} |
|
|
|
.item { |
|
|
|
width: 70%; |
|
|
|
height: 34%; |
|
|
|
@ -1566,8 +1907,9 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
margin-top: 3%; |
|
|
|
width: 33%; |
|
|
|
margin-top: 0.41rem; |
|
|
|
width: 30%; |
|
|
|
width: 7.08rem; |
|
|
|
height: 76vh; |
|
|
|
|
|
|
|
.pcgrliu { |
|
|
|
@ -1578,25 +1920,25 @@ export default { |
|
|
|
|
|
|
|
.venue_proportion_box { |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
color: #00A7FF; |
|
|
|
font-size: 13px; |
|
|
|
|
|
|
|
.venue_proportion { |
|
|
|
flex: 1; |
|
|
|
// flex: 1; |
|
|
|
// text-align: center; |
|
|
|
|
|
|
|
|
|
|
|
.venue_proportion_top { |
|
|
|
text-align: center; |
|
|
|
width: 85%; |
|
|
|
height: 13vh; |
|
|
|
width: 2.04rem; |
|
|
|
height: 1.55rem; |
|
|
|
line-height: 13vh; |
|
|
|
margin: 0 auto; |
|
|
|
background-image: url('../../assets/ty/右1-4.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: 100% 100%; |
|
|
|
background-size: contain; |
|
|
|
background-position: 100% 50%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
|
|
.venue_proportion_box_num { |
|
|
|
@ -1604,11 +1946,11 @@ export default { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
display: block; |
|
|
|
width: 60%; |
|
|
|
height: 12vh; |
|
|
|
// width: 60%; |
|
|
|
// height: 12vh; |
|
|
|
line-height: 12vh; |
|
|
|
margin: 0 auto; |
|
|
|
background-image: url('../../assets/ty/右1-3.png'); |
|
|
|
// background-image: url('../../assets/ty/右1-3.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
@ -1621,7 +1963,7 @@ export default { |
|
|
|
width: 50%; |
|
|
|
height: 3vh; |
|
|
|
margin: 0 auto; |
|
|
|
margin-top: 20px; |
|
|
|
margin-top: 0.15rem; |
|
|
|
background-image: url('../../assets/ty/右1-5.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: 100% 100%; |
|
|
|
@ -1641,25 +1983,53 @@ export default { |
|
|
|
|
|
|
|
.pcg_title { |
|
|
|
display: block; |
|
|
|
height: 0.78rem; |
|
|
|
height: 0.76rem; |
|
|
|
line-height: 0.58rem; |
|
|
|
background: url('../../assets/wh/pcg_t_bg.png') no-repeat; |
|
|
|
background: url('../../assets/ty/r_t_bg_1.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: 0 center; |
|
|
|
padding-left: 0.98rem; |
|
|
|
color: #fff; |
|
|
|
font-size: 16px; |
|
|
|
// display: flex; |
|
|
|
// align-items: center; |
|
|
|
// justify-content: space-between; |
|
|
|
|
|
|
|
.current{ |
|
|
|
display: block; |
|
|
|
width: 0.21rem; |
|
|
|
height: 0.21rem; |
|
|
|
background: url('../../assets/ty/active.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-top: 0.21rem; |
|
|
|
float: right; |
|
|
|
} |
|
|
|
.no-current{ |
|
|
|
display: block; |
|
|
|
width: 0.21rem; |
|
|
|
height: 0.21rem; |
|
|
|
background: url('../../assets/ty/no_active.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-top: 0.21rem; |
|
|
|
float: right; |
|
|
|
} |
|
|
|
} |
|
|
|
.iframe_box{ |
|
|
|
width: 300%; |
|
|
|
height: 2.32rem; |
|
|
|
margin-top: 0.13rem; |
|
|
|
} |
|
|
|
.pcg_title2 { |
|
|
|
display: block; |
|
|
|
height: 0.78rem; |
|
|
|
height: 0.76rem; |
|
|
|
line-height: 0.58rem; |
|
|
|
background: url('../../assets/ty/右2-1.png') no-repeat; |
|
|
|
background: url('../../assets/ty/r_t_bg_2.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: 0 center; |
|
|
|
padding-left: 0.98rem; |
|
|
|
color: #fff; |
|
|
|
font-size: 16px; |
|
|
|
margin-top: 0.19rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -1676,4 +2046,18 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.screen-box{ |
|
|
|
overflow: visible !important; |
|
|
|
/deep/ .screen-wrapper{ |
|
|
|
width: calc(24rem - 1.14rem) !important; |
|
|
|
height: 10.71rem !important; |
|
|
|
overflow: visible !important; |
|
|
|
margin: 0px 0.57rem 0px 0.57rem !important; |
|
|
|
box-sizing: border-box !important; |
|
|
|
} |
|
|
|
} |
|
|
|
#ty{ |
|
|
|
// transform: scale(1.25);//浏览器缩小至1536时，匹配外盒子逻辑赋予的transform: scale(0.8, 0.8) |
|
|
|
transform-origin: 0 0; |
|
|
|
} |
|
|
|
</style> |
