You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1300 lines
31 KiB
1300 lines
31 KiB
<template>
|
|
<div class="home">
|
|
<div class="topnav">宝安区公共文化体育服务中心展示平台</div>
|
|
<!-- 图片 -->
|
|
<div class="gymbox">
|
|
<div class="gympic">
|
|
<img src="../assets/img/gymbg.png" />
|
|
</div>
|
|
<div class="gymnum">
|
|
<span>年度进馆总人数</span>
|
|
<p id="ycdn">{{ year_num }}</p>
|
|
</div>
|
|
</div>
|
|
<!-- 今日进馆 -->
|
|
<div class="numbox">
|
|
<span class="numicon"><img src="../assets/img/icon01.png" /></span>
|
|
<div class="numdiv">
|
|
<p class="ndtitle" id="dynum">{{ day_num }}</p>
|
|
<p class="nddesc">今日进馆总人数</p>
|
|
</div>
|
|
</div>
|
|
<!-- 本周进馆 -->
|
|
<div class="numbox">
|
|
<span class="numicon"><img src="../assets/img/icon02.png" /></span>
|
|
<div class="numdiv">
|
|
<p class="ndtitle" id="wknum">{{ week_num }}</p>
|
|
<p class="nddesc">本周进馆总人数</p>
|
|
</div>
|
|
</div>
|
|
<!-- 本月进馆 -->
|
|
<div class="numbox">
|
|
<span class="numicon"><img src="../assets/img/icon03.png" /></span>
|
|
<div class="numdiv">
|
|
<p class="ndtitle" id="mnum">{{ mon_num }}</p>
|
|
<p class="nddesc">本月进馆总人数</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 客流趋势 -->
|
|
<div class="klqs">
|
|
<div class="klqs_bg">客流趋势</div>
|
|
<div class="klbtn">
|
|
<span :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span>
|
|
<span :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')">月</span>
|
|
<span :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="echartzone" id="showorders" style='width:100%;height:14rem;'></div>
|
|
|
|
<!-- 场馆饱和度 -->
|
|
<div class="cgbox">
|
|
<!-- 左侧 -->
|
|
<div class="cglist cgleft">
|
|
<ul>
|
|
<li>
|
|
<span style="width: 38%">{{ circularData.groupName[0] }}</span>
|
|
<span>{{ circularData.proportion[0] }}</span>
|
|
<span style="width: 0.68rem;"><img src="../assets/img/tyc_icon.png" /></span>
|
|
</li>
|
|
<li>
|
|
<span style="width: 38%">{{ circularData.groupName[1] }}</span>
|
|
<span>{{ circularData.proportion[1] }}</span>
|
|
<span style="width: 0.68rem;"><img src="../assets/img/tyg_icon.png" /></span>
|
|
</li>
|
|
<li>
|
|
<span style="width: 38%">{{ circularData.groupName[2] }}</span>
|
|
<span>{{ circularData.proportion[2] }}</span>
|
|
<span style="width: 0.68rem;"><img src="../assets/img/yyg_icon.png" /></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 場館圖表 -->
|
|
<div id="cgchart" class="cgpies"></div>
|
|
<!-- 右侧 -->
|
|
<div class="cglist cgright">
|
|
<ul>
|
|
<li>
|
|
<span style="width: 0.68rem;"><img src="../assets/img/tsg_icon.png" /></span>
|
|
<span>{{ circularData.proportion[3] }}</span>
|
|
<span style="width: 38%">{{ circularData.groupName[3] }}</span>
|
|
</li>
|
|
<li>
|
|
<span style="width: 0.68rem;"><img src="../assets/img/whg_icon.png" /></span>
|
|
<span>{{ circularData.proportion[4] }}</span>
|
|
<span style="width: 38%">{{ circularData.groupName[4] }}</span>
|
|
</li>
|
|
<li>
|
|
<span style="width: 0.68rem;"><img src="../assets/img/bwg_icon.png" /></span>
|
|
<span>{{ circularData.proportion[5] }}</span>
|
|
<span style="width: 38%">{{ circularData.groupName[5] }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 今日场馆人数 -->
|
|
<div class="today_rs">
|
|
<div class="tdrs_title">
|
|
今日各场馆服务人次趋势
|
|
</div>
|
|
<div id="tdrs" style="width:100%;height:12rem;"></div>
|
|
</div>
|
|
|
|
<!-- 個場館實時進館人數 -->
|
|
<div class="pcgrs">
|
|
<div class="pcgrs_title">各场馆实时服务人次</div>
|
|
<!-- 場館實時 -->
|
|
<div class="pcg_item" v-for="item in ssjgNumDatas" :key="item.groupId">
|
|
<span class="pcpos">{{item.groupName}}</span>
|
|
<span class="rbtitle">日累计人数</span>
|
|
<p class="pcval" :class="'pcani'" :id="item.groupId">{{ item.allEnter }}</p>
|
|
<!-- <span class="pcrate"
|
|
:class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 },'pcani']">{{
|
|
item.proportion }}</span> -->
|
|
<div class="rbrate0"
|
|
:class="parseInt(item.proportion)<50||parseInt(item.proportion)==50?'rbrate2':
|
|
(parseInt(item.proportion)<100||parseInt(item.proportion)==100?'rbrate3':'rbrate4')
|
|
"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rbox_label">
|
|
<span></span>舒适
|
|
<span></span>拥挤
|
|
<span></span>爆满
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import * as btApi from '../api/home'
|
|
|
|
// 数字变化效果
|
|
import { numGrow,ecMaxVal,numberGrow} from '@/utils/comm';
|
|
|
|
// 引入api
|
|
import * as homeApi from '@/api/home'
|
|
let ws = null;
|
|
export default {
|
|
name: 'HomeView',
|
|
data() {
|
|
return {
|
|
// 年月日选中的样式,默认日
|
|
klselt: "d",
|
|
// 客流标题数组
|
|
kltdata: [],
|
|
// 客流值数组
|
|
klvdata: [],
|
|
// 环图数据
|
|
kcdata:[],
|
|
// 环形的比例值
|
|
// tyc
|
|
tycra:[],
|
|
//tyg
|
|
tygra:[],
|
|
//yyg
|
|
yygra:[],
|
|
// bwg
|
|
bwgra:[],
|
|
circularData: {groupName:[],proportion:[]},
|
|
|
|
day_num: 0,
|
|
week_num: 0,
|
|
mon_num: 0,
|
|
year_num: 0,
|
|
// 客流趋势
|
|
klqsDatas: [],
|
|
// 实时进馆人数
|
|
ssjgNumDatas: [],
|
|
|
|
//折线区域的数据 y
|
|
zxliddata:[],
|
|
// x 轴
|
|
zxlindata:[],
|
|
// 折线名
|
|
zxndata:[],
|
|
|
|
//websocket
|
|
wsobj:null,
|
|
// 心跳
|
|
wsheart:false,
|
|
// reconect time
|
|
reconntime:0,
|
|
}
|
|
},
|
|
// created() {
|
|
// // 初始化ws 链接
|
|
// this.getsckdata();
|
|
// },
|
|
mounted() {
|
|
// 客流趋势
|
|
this.btgetdata(this.klselt)
|
|
// 各场馆客流趋势
|
|
this.getGcgNumDatas()
|
|
//统计日月年进馆总数
|
|
this.getStat();
|
|
//
|
|
// get data in webscoket
|
|
this.getsckdata();
|
|
|
|
},
|
|
// 方法
|
|
methods: {
|
|
// 获取对应的参数
|
|
btgetdata(type) {
|
|
let nrq;
|
|
switch (type) {
|
|
case 'd': nrq = "daily"; break;
|
|
case 'm': nrq = "monthly"; break;
|
|
case 'y': nrq = "yearly"; break;
|
|
default:nrq="daily";break;
|
|
}
|
|
//return nrq;
|
|
this.getDataIn(nrq)
|
|
},
|
|
|
|
// 获取不同时期的数据
|
|
getDataIn(reqType){
|
|
let that = this;
|
|
//
|
|
btApi.allGroupTimeNum({ 'granularity': reqType }).then(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
|
|
// 圆柱
|
|
this.showorders()
|
|
// 环图数据
|
|
const ccdata = res.data.data.groupsData
|
|
|
|
let tcdata =new Array;
|
|
that.circularData.groupName=[];
|
|
that.circularData.proportion=[];
|
|
|
|
ccdata.forEach(function(item,idx){
|
|
// idx
|
|
tcdata.push({
|
|
// value: item.proportion,
|
|
value: item.noRepeatInNum,
|
|
name: item.groupName
|
|
})
|
|
that.circularData.groupName.push(item.groupName)
|
|
that.circularData.proportion.push(item.proportion)
|
|
});
|
|
//
|
|
this.kcdata = tcdata
|
|
// 环形图
|
|
this.cgchart()
|
|
});
|
|
},
|
|
|
|
//选择年月日中的某个
|
|
selitem(type) {
|
|
this.klselt = type;
|
|
// this.btgetdata(type)
|
|
},
|
|
// 圆柱图
|
|
showorders() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var chartDom = document.getElementById('showorders');
|
|
var myChart = echarts.init(chartDom);
|
|
// 指定图表的配置项和数据
|
|
var option;
|
|
|
|
//var cdata = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
|
|
var cdata = this.klvdata.slice(-8,this.klvdata.length)
|
|
// var data = [Math.random() * 300]
|
|
option = {
|
|
// backgroundColor: '#031245',
|
|
color: [
|
|
'#63caff',
|
|
'#49beff',
|
|
'#03387a',
|
|
'#03387a',
|
|
'#03387a',
|
|
'#6c93ee',
|
|
'#a9abff',
|
|
'#f7a23f',
|
|
'#27bae7',
|
|
'#ff6d9d',
|
|
'#cb79ff',
|
|
'#f95b5a',
|
|
'#ccaf27',
|
|
'#38b99c',
|
|
'#93d0ff',
|
|
'#bd74e0',
|
|
'#fd77da',
|
|
'#dea700',
|
|
],
|
|
grid: {
|
|
containLabel: true,
|
|
left: 20,
|
|
right: 20,
|
|
bottom: 10,
|
|
top: 40,
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
color: '#FFFFFF',
|
|
fontSize: 10,
|
|
interval: 0,
|
|
rotate: 45,
|
|
// show: true,
|
|
// inside:false
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#384267',
|
|
},
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
show: true,
|
|
},
|
|
data: this.kltdata.slice(-8,this.kltdata.length),
|
|
type: 'category',
|
|
},
|
|
yAxis: {
|
|
// show:false,
|
|
axisLabel: {
|
|
color: '#0095FF',
|
|
fontSize: 14,
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
},
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
type: 'solid',
|
|
},
|
|
},
|
|
// 坐标轴显示状况
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
show: false,
|
|
},
|
|
name: '',
|
|
},
|
|
series: [
|
|
{
|
|
data: cdata,
|
|
type: 'bar',
|
|
barMaxWidth: 'auto',
|
|
barWidth: 15,
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
color: function () {
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
|
|
{ offset: 0, color: "#00B4FF" },
|
|
{ offset: 1, color: "#2F00FF" }
|
|
], false)
|
|
},
|
|
label: {
|
|
show: false,//柱状上的数据
|
|
}
|
|
},
|
|
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
distance: 15,
|
|
color: '#fff',
|
|
},
|
|
},
|
|
{
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
type: 'bar',
|
|
barMaxWidth: '15',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '50%'],
|
|
symbolSize: [10, 5],
|
|
color: '#fff',
|
|
},
|
|
{
|
|
data: cdata,
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '15',
|
|
symbolPosition: 'end',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '-50%'],
|
|
symbolSize: [15, 7],
|
|
zlevel: 2,
|
|
},
|
|
// 背景柱子的数值
|
|
{
|
|
data: ecMaxVal(cdata),
|
|
type: 'bar',
|
|
barMaxWidth: 'auto',
|
|
barWidth: 15,
|
|
barGap: '-100%',
|
|
zlevel: -1,
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
},
|
|
}
|
|
},
|
|
{
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1],
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '15',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '50%'],
|
|
symbolSize: [15, 7],
|
|
zlevel: -2,
|
|
},
|
|
{
|
|
data:ecMaxVal(cdata),
|
|
//data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '15',
|
|
symbolPosition: 'end',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '-50%'],
|
|
symbolSize: [15, 7],
|
|
zlevel: -1,
|
|
itemStyle: {
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
shadowBlur: 15
|
|
}
|
|
},
|
|
],
|
|
|
|
// // 动画效果
|
|
// animation:true,
|
|
// animationDuration:0,
|
|
// animationDurationUpdate:300,
|
|
animationEasing:"linear",
|
|
animationEasingUpdate:"linear"
|
|
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
// 圆饼图
|
|
cgchart() {
|
|
var chartDom = document.getElementById('cgchart');
|
|
|
|
chartDom.removeAttribute('_echarts_instance_');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
option = {
|
|
|
|
// color: ["#F2A0CE", "#0780e2", "#FF6504", "#01FE00", "#00FFFF", "#fdff00"],
|
|
color: ['#ff9acc', '#6666ff', '#a9eeff', '#02ff00','#00ffff', '#fdff00'],
|
|
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['70%', '80%'], //曲线范围
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 40,
|
|
// borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: this.kcdata
|
|
}
|
|
]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
// 场馆入场人数折线图
|
|
cgrs_line() {
|
|
|
|
var chartDom = document.getElementById('tdrs');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
var color = ['#a9eeff', '#6666FF', '#FF6600', '#02ff00', '#00ffff', '#fdff00'];
|
|
var name = this.zxndata
|
|
|
|
var xData = this.zxlindata
|
|
var data = this.zxliddata
|
|
var series = [];
|
|
// loop data
|
|
for (var i = 0; i < 6; i++) {
|
|
series.push({
|
|
name: name[i],
|
|
type: "line",
|
|
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
|
|
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
smooth: true, //是否平滑曲线显示
|
|
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: color[i]
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(255,255,255,0)'
|
|
}], false),
|
|
// shadowColor: 'rgba(255,255,255, 0.1)',
|
|
shadowBlur: 10,
|
|
opacity: 0.3,
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: color[i],
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid' //'dotted'虚线 'solid'实线
|
|
},
|
|
borderColor: color[i], //图形的描边颜色。支持的格式同 color
|
|
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: false,
|
|
},
|
|
opacity: 0.5,
|
|
}
|
|
},
|
|
data: data[i],
|
|
|
|
})
|
|
}
|
|
// contruct
|
|
option = {
|
|
// legend
|
|
legend: {
|
|
top:0,
|
|
right: 0,
|
|
// bottom: 40,
|
|
itemGap: 15,
|
|
itemWidth: 15,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '14'
|
|
},
|
|
data: name
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
},
|
|
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)', // 背景
|
|
padding: [8, 10], //内边距
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 160,
|
|
bottom: 160,
|
|
right: 20,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0B0765',
|
|
}
|
|
},
|
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: '#FFFFFF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
},
|
|
data: xData,
|
|
}],
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0B0765 ',
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0B0765 ',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#0095FF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
formatter: '{value}',
|
|
},
|
|
},
|
|
series: series,
|
|
}
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
},
|
|
|
|
// 统计概况
|
|
getStat() {
|
|
let that = this
|
|
homeApi.allGroupNum().then(res => {
|
|
// get allTimeData
|
|
const tmpdata = res.data.returnData
|
|
|
|
//年度总人数
|
|
const ycount= tmpdata.year.noRepeatInNum
|
|
numGrow("ycdn",ycount);
|
|
//今日
|
|
numGrow("dynum",tmpdata.day.noRepeatInNum)
|
|
// week
|
|
numGrow("wknum",tmpdata.week.noRepeatInNum)
|
|
// month
|
|
numGrow("mnum",tmpdata.month.noRepeatInNum)
|
|
});
|
|
},
|
|
|
|
// 获取实时进馆数据
|
|
getInfoDatas() {
|
|
// interface
|
|
homeApi.tdGroupRealTimeEnter().then(res=>{
|
|
this.ssjgNumDatas = res.data.returnData
|
|
})
|
|
},
|
|
|
|
// udp
|
|
getsckdata(){
|
|
let that = this;
|
|
// websocket
|
|
ws = new WebSocket(publicConfig.WS_URL_ZL);
|
|
ws.onopen = function() {
|
|
// console.log("ws connected success!")
|
|
};
|
|
ws.onclose = function(event) {
|
|
// console.log('WebSocket连接已关闭');
|
|
};
|
|
ws.onmessage = (e)=> {
|
|
var jstr = JSON.parse(e.data);
|
|
if(!jstr){
|
|
return;
|
|
}
|
|
|
|
// 客流趋势饼图
|
|
const klpie = jstr.allGroupTimeNumDay.data.data.groupsData
|
|
// 对数据进行排序
|
|
//const yord=[2,0,4,5,1,3]
|
|
// array
|
|
that.circularData.groupName=[];
|
|
that.circularData.proportion=[];
|
|
that.kcdata=[];
|
|
// 按照yord 进行填充
|
|
for(let x=0;x<klpie.length;x++){
|
|
//let item = klpie[yord[x]] // 取对应的值
|
|
//console.log("yord_item",item.groupName)
|
|
let item = klpie[x];
|
|
that.circularData.groupName.push(item.groupName)
|
|
that.circularData.proportion.push(item.proportion)
|
|
that.kcdata.push({
|
|
name:item.groupName,
|
|
value:item.proportion.split('%')[0]
|
|
})
|
|
}
|
|
// 环形图
|
|
this.cgchart()
|
|
|
|
// 各场馆实时服务人次数据
|
|
const pieData = jstr.realTimeData.data;
|
|
that.ssjgNumDatas = pieData;// 各场馆实时服务人次数据
|
|
// 折线图数据
|
|
function handleLine(){
|
|
that.rsqsDatas = [];that.rsqsDataName = [];
|
|
that.zxliddata = [];
|
|
const tmpdata = jstr.toDayGroupsEnterNum.data;
|
|
tmpdata.forEach((item) => {
|
|
that.rsqsDataName.push(item.groupName);
|
|
that.rsqsDatas.push(item.list)
|
|
})
|
|
|
|
that.zxlindata = jstr.toDayGroupsEnterNum.data[0].list.dkeys;
|
|
that.rsqsDatas.forEach((item) => {
|
|
let rsqsData = []
|
|
Object.getOwnPropertyNames(item).forEach((value) => {
|
|
|
|
if(value=='dkeys'){}
|
|
if(value=='dvalue'){
|
|
rsqsData = item[value];
|
|
}
|
|
});
|
|
that.zxliddata.push(rsqsData)
|
|
|
|
// 场馆人流趋势线面图
|
|
that.cgrs_line();
|
|
})
|
|
}
|
|
handleLine();
|
|
|
|
// 柱形数据
|
|
function handleBar(){
|
|
let tmpklqsdata, dkeys, datas=[];
|
|
switch (that.klselt) {
|
|
case 'd':
|
|
tmpklqsdata = jstr.allGroupTimeNumDay.data.data.allTimeData;
|
|
dkeys = jstr.allGroupTimeNumDay.data.data.dkeys;
|
|
break;
|
|
case 'm':
|
|
tmpklqsdata = jstr.allGroupTimeNumMonth.data.data.allTimeData;
|
|
dkeys = jstr.allGroupTimeNumMonth.data.data.dkeys;
|
|
break;
|
|
case 'y':
|
|
tmpklqsdata = jstr.allGroupTimeNumYear.data.data.allTimeData;
|
|
dkeys = jstr.allGroupTimeNumYear.data.data.dkeys;
|
|
break;
|
|
}
|
|
|
|
Object.values(tmpklqsdata).forEach((value) => {
|
|
datas.push(value.num);
|
|
});
|
|
that.kltdata = dkeys;
|
|
that.klvdata = datas;
|
|
// 圆柱
|
|
that.showorders();
|
|
}
|
|
handleBar();
|
|
|
|
// 顶部数据
|
|
numGrow("ycdn",jstr.allGroupNum.data.year.noRepeatInNum);
|
|
//今日
|
|
numGrow("dynum",jstr.allGroupNum.data.day.noRepeatInNum)
|
|
// week
|
|
numGrow("wknum",jstr.allGroupNum.data.week.noRepeatInNum)
|
|
// month
|
|
numGrow("mnum",jstr.allGroupNum.data.month.noRepeatInNum)
|
|
};
|
|
},
|
|
|
|
|
|
// 各个场馆的人流
|
|
getGcgNumDatas() {
|
|
homeApi.tdGroupRealTimeEnter().then(res => {
|
|
// get allTimeData
|
|
const tmpdata = res.data.data
|
|
// X 轴的名称字段
|
|
const narr = new Array
|
|
const xarr =new Array
|
|
const darr =new Array;
|
|
tmpdata.forEach(function(item,idx){
|
|
// 读取list
|
|
const list = item.list
|
|
narr.push(item.groupName)
|
|
xarr.push(list.dkeys)
|
|
darr.push(list.dvalue)
|
|
})
|
|
|
|
// console.log(darr)
|
|
this.zxndata = narr
|
|
this.zxlindata = xarr
|
|
this.zxliddata = darr
|
|
|
|
// 场馆人流趋势线面图
|
|
this.cgrs_line();
|
|
});
|
|
}
|
|
|
|
},
|
|
beforeUnmount(){
|
|
ws.close();
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home {
|
|
position: relative;
|
|
}
|
|
|
|
.topnav {
|
|
height: 46px;
|
|
line-height: 46px;
|
|
text-align: center;
|
|
padding: 12rpx;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 90;
|
|
color: #fff;
|
|
left: 0;
|
|
top: 0;
|
|
/* background-color: #080A25; */
|
|
background-color: #032461;
|
|
box-shadow: 0px 3px 4px 0px rgba(255, 255, 255, 0.1);
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.gymbox {
|
|
margin-top: 3.2rem;
|
|
width: 100%;
|
|
background-image: url("../assets/img/gymbox_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
padding-top: 2.26rem;
|
|
height: 20rem;
|
|
position: relative;
|
|
}
|
|
|
|
.gymbox .gympic {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-top: 0rem;
|
|
/* height: 12.68rem; */
|
|
width: 100%;
|
|
/* 动画效果 */
|
|
-webkit-animation: ani_gym 4s infinite forwards;
|
|
animation: ani_gym 4s infinite forwards;
|
|
}
|
|
@keyframes ani_gym {
|
|
0% {
|
|
opacity: 1;
|
|
margin-top: 0%;
|
|
}
|
|
25% {
|
|
opacity: 0.7;
|
|
margin-top: 3%;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
margin-top: 5%;
|
|
}
|
|
75% {
|
|
opacity: 0.7;
|
|
margin-top: 3%;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
margin-top: 0%;
|
|
}
|
|
}
|
|
|
|
.gymbox .gympic img {
|
|
width: 90%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
/* margin-top: 1rem; */
|
|
display: block;
|
|
/* padding-top: 0.2rem; */
|
|
height: 16rem;
|
|
}
|
|
|
|
.gymbox .gymnum {
|
|
width: 100%;
|
|
/* margin: 0.6rem auto; */
|
|
text-align: center;
|
|
height: 3rem;
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
/* padding-top: 0.7rem; */
|
|
}
|
|
|
|
.gymbox .gymnum span {
|
|
font-size: 0.86rem;
|
|
display: block;
|
|
line-height: 1.2rem;
|
|
}
|
|
|
|
.gymbox .gymnum p {
|
|
line-height: 26px;
|
|
height: 26px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
display: block;
|
|
margin: 0;
|
|
margin-top: 0.5rem;
|
|
/* margin: 0.5rem 0 1.7rem; */
|
|
}
|
|
|
|
/* 數據box */
|
|
.numbox {
|
|
width: 100%;
|
|
height: 4rem;
|
|
line-height: 1.2;
|
|
margin-top: 0.6rem;
|
|
}
|
|
|
|
.numbox .numicon {
|
|
display: block;
|
|
width: 20%;
|
|
height: 3.2rem;
|
|
float: left;
|
|
width: 5rem;
|
|
height: 4rem;
|
|
}
|
|
.numbox .numicon img{
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 0.7rem;
|
|
}
|
|
|
|
.numbox .numdiv {
|
|
width: 72%;
|
|
background-image: url("../assets/img/num_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 center;
|
|
background-size: 100%;
|
|
float: left;
|
|
margin-left: 0.68rem;
|
|
height: 4rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.numbox .numdiv p {
|
|
display: block;
|
|
float: left;
|
|
width: 100%;
|
|
/* line-height: 0; */
|
|
}
|
|
|
|
.numbox .numdiv .ndtitle {
|
|
padding-top: 0.2rem;
|
|
font-size: 1.08rem;
|
|
font-size: 1.1rem;
|
|
margin: 0.7rem 0 0;
|
|
}
|
|
|
|
.numbox .numdiv .nddesc {
|
|
color: #ccc;
|
|
font-size: 0.9rem !important;
|
|
/* padding-bottom: 0.2rem; */
|
|
margin: 0;
|
|
}
|
|
|
|
/** 客流趋势 */
|
|
.klqs {
|
|
margin-top: 2rem;
|
|
background-image: url("../assets/img/klqs_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
height: 3.8rem;
|
|
background-position: -1.04rem 0.2rem;
|
|
}
|
|
|
|
.klqs .klqs_bg {
|
|
float: left;
|
|
/* width: 80%; */
|
|
margin-left: 5rem;
|
|
/* padding-left: 6.4rem; */
|
|
line-height: 2.8rem;
|
|
font-size: 1.1rem;
|
|
color: #999;
|
|
}
|
|
|
|
.klqs .klbtn {
|
|
float: right;
|
|
margin-left: 1.06rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.klqs .klbtn span {
|
|
display: block;
|
|
float: left;
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
margin-left: 0.4rem;
|
|
line-height: 2.2rem;
|
|
text-align: center;
|
|
border: 1px solid #006bff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 选择年月日后的样式变化 */
|
|
.klqs .klbtn span.spactive {
|
|
background-image: url('../assets/img/sactive_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
/** 場館飽和度 */
|
|
.cgbox {
|
|
background-image: url("../assets/img/cgbox_bg.png");
|
|
width: 100%;
|
|
height: 12rem;
|
|
background-position: center center;
|
|
background-size: 100% 100%;
|
|
margin-top: 2.4rem;
|
|
}
|
|
|
|
/* 饼图 */
|
|
.cgbox .cgpies {
|
|
width: 34%;
|
|
height: 12rem;
|
|
float: left;
|
|
}
|
|
|
|
.cgbox .cgleft {
|
|
width: 33%;
|
|
float: left;
|
|
}
|
|
.cgbox .cgleft ul li{
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|
|
|
|
.cgbox .cgleft>ul {
|
|
padding-left: 0rem;
|
|
padding-right: 0.3rem;
|
|
}
|
|
|
|
.cgbox .cgright {
|
|
width: 33%;
|
|
/* height: 12rem; */
|
|
float: left;
|
|
}
|
|
|
|
.cgbox .cgright>ul {
|
|
padding-left: 0.2rem;
|
|
}
|
|
|
|
.cgbox .cglist {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.cgbox .cglist ul {
|
|
display: block;
|
|
/* width: 100%; */
|
|
}
|
|
|
|
.cgbox .cglist ul li {
|
|
width: 100%;
|
|
list-style: none;
|
|
height: 0.66rem;
|
|
line-height: 0.66rem;
|
|
font-size: 0.66rem;
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
white-space: nowrap;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.cgbox .cglist ul li span {
|
|
display: block;
|
|
float: left;
|
|
width: 30%;
|
|
/* margin-left: 0.46rem; */
|
|
}
|
|
|
|
/* .cgbox .cgleft ul li:nth-child(3) span:nth-child(2) {
|
|
display: block;
|
|
float: left;
|
|
margin-left: 0.06rem;
|
|
}
|
|
|
|
.cgbox .cgleft ul li:nth-child(3) span:nth-child(3) {
|
|
display: block;
|
|
float: left;
|
|
margin-left: 0.16rem;
|
|
} */
|
|
|
|
.cgbox .cglist ul li span img {
|
|
width: 0.68rem;
|
|
height: 0.68rem;
|
|
}
|
|
|
|
/* 今日人數 */
|
|
.today_rs {
|
|
margin-top: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.today_rs .tdrs_title {
|
|
background-image: url("../assets/img/left_t2_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: -1.04rem 0.2rem;
|
|
height: 3.2rem;
|
|
line-height: 3.5rem;
|
|
padding-left: 5rem;
|
|
font-size: 1.1rem;
|
|
color: #999;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
/** 各場館實時 */
|
|
.pcgrs {
|
|
clear: both;
|
|
margin-top: 2.6rem;
|
|
width: 100%;
|
|
display: inline-block;/**撑开高度 */
|
|
}
|
|
|
|
.pcgrs .pcgrs_title {
|
|
background-image: url("../assets/img/left_t3_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
height: 3.8rem;
|
|
line-height: 2.8rem;
|
|
background-position: -1.04rem 0.2rem;
|
|
padding-left: 5.5rem;
|
|
font-size: 1.1rem;
|
|
color: #999;
|
|
}
|
|
|
|
.pcgrs .pcg_item {
|
|
margin-top: 0.4rem;
|
|
background-image: url("../assets/img/pcg_bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
/* height: 12rem; */
|
|
width: 48%;
|
|
float: left;
|
|
margin-left: 2%;
|
|
position: relative;
|
|
margin-bottom: 1.6rem;
|
|
}
|
|
|
|
.pcgrs .pcg_item .pcpos {
|
|
text-align: right;
|
|
font-size: 0.68rem;
|
|
display: block;
|
|
/* width: 3.5rem; */
|
|
text-align: left;
|
|
float: right;
|
|
margin-top: 1.6rem;
|
|
margin-right: 1.1rem;
|
|
/* padding-right: 0.9rem; */
|
|
color: #3E96F7;
|
|
}
|
|
|
|
.pcgrs .pcg_item .pcval {
|
|
font-size: 1.086rem;
|
|
margin-top: 3.75rem;
|
|
width: 69%;
|
|
display: block;
|
|
float: left;
|
|
text-align: left;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
/** 数据动态绑定后持续动画效果 */
|
|
.pcgrs .pcg_item .pcani{
|
|
/* 动画效果 */
|
|
-webkit-animation: ani_txt 8s infinite linear;
|
|
animation: ani_txt 8s infinite linear;
|
|
}
|
|
|
|
@keyframes ani_txt {
|
|
0%{
|
|
text-shadow: 0 0 0 30px #fff;
|
|
}
|
|
40%{
|
|
color:rgba(255, 255, 255, 0);
|
|
text-shadow: 0 0 0 30px #fff;
|
|
}
|
|
70%{
|
|
color:rgba(255, 255, 255, 0.4);
|
|
text-shadow: 0 0 0 10px #fff;
|
|
}
|
|
90%{
|
|
color:rgba(255, 255, 255, 0.5);
|
|
text-shadow: 0 0 0 30px #fff;
|
|
}
|
|
100%{
|
|
text-shadow: 0 0 0 40px #fff;
|
|
}
|
|
}
|
|
|
|
/* .pcgrs .pcg_item:nth-child(6) .pcval {
|
|
font-size: 1.086rem;
|
|
margin-top: 3.5rem;
|
|
width: 66%;
|
|
display: block;
|
|
float: left;
|
|
text-align: center;
|
|
} */
|
|
.pcgrs .pcg_item .rbtitle{
|
|
position: absolute;
|
|
top: 2.7rem;
|
|
left: 2rem;
|
|
font-size: 0.2rem;
|
|
}
|
|
.pcgrs .pcg_item .rbrate0 {
|
|
/* width: 32%; */
|
|
width: 3.4rem;
|
|
height: 3.4rem;
|
|
line-height: 3.4rem;
|
|
display: block;
|
|
float: left;
|
|
font-size: 0.46rem;
|
|
margin-top: 3.78rem;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0.4rem;
|
|
right: 0.63rem;
|
|
}
|
|
|
|
.pcgrs .pcg_item .rbrate2 {
|
|
background-image: url('../assets/img/2.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.pcgrs .pcg_item .rbrate3 {
|
|
background-image: url('../assets/img/3.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.pcgrs .pcg_item .rbrate4 {
|
|
background-image: url('../assets/img/1.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.rbox_label{
|
|
/* width: 100%; */
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
font-size: 0.8rem;
|
|
color: #aaa;
|
|
margin-right: 0.5rem;
|
|
}
|
|
.rbox_label span{
|
|
display: inline-block;
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
margin: 0px 0.5rem;
|
|
}
|
|
.rbox_label span:nth-of-type(1){
|
|
background: url('../assets/img/舒适.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.rbox_label span:nth-of-type(2){
|
|
background: url('../assets/img/拥挤.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.rbox_label span:nth-of-type(3){
|
|
background: url('../assets/img/爆满.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
</style>
|