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.
667 lines
16 KiB
667 lines
16 KiB
<template>
|
|
<div class="tyc">
|
|
<div class="topnav">体育</div>
|
|
<!-- 图形 -->
|
|
<div class="tyclogo">
|
|
<div class="tyname">体育</div>
|
|
<div class="tydesc">体育场|体育馆|游泳馆</div>
|
|
</div>
|
|
<!-- 总计进馆人数 -->
|
|
<div class="jgbox">
|
|
<div class="jg_title">总计进馆人数</div>
|
|
<div class="jgcon">
|
|
|
|
<div class="jgitem">
|
|
<div class="jgimg"><img src="../assets/img/icon01.png" /></div>
|
|
<span class="jgival">{{ tdnum }}</span>
|
|
<span class="jgdesc">今日进馆人数</span>
|
|
</div>
|
|
<div class="jgitem">
|
|
<div class="jgimg"><img src="../assets/img/icon02.png" /></div>
|
|
<span class="jgival">{{ tmdata }}</span>
|
|
<span class="jgdesc">本月进馆人数</span>
|
|
</div>
|
|
<div class="jgitem">
|
|
<div class="jgimg"><img src="../assets/img/icon03.png" /></div>
|
|
<span class="jgival">{{ tydata }}</span>
|
|
<span class="jgdesc">本年进馆人数</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 进馆人数统计 -->
|
|
<div class="gcins">
|
|
<div class="gcins_title">24小时总进馆人流趋势</div>
|
|
<div id="gcins_charts" style="height:16rem"></div>
|
|
</div>
|
|
<!-- 各场馆人次占比 -->
|
|
<div class="pcgrbox">
|
|
<div class="pcb_title">各场馆人次占比</div>
|
|
<div class="pcbcon">
|
|
|
|
<div class="pcbitem" v-for="cg in cgdata" :key="key">
|
|
<div class="pcbval">{{ cg.proportion }}</div>
|
|
<div class="pcbdesc">{{cg. groupName }}</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 各场馆人数趋势 -->
|
|
<div class="gcgrs">
|
|
<div class="gcgrs_title">各场馆人流趋势</div>
|
|
<div id="gc_charts" class="gcgrs_charts"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.tyc {
|
|
position: relative;
|
|
/** wait for chk */
|
|
/* background-color: #032461; */
|
|
}
|
|
|
|
.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;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.tyclogo {
|
|
margin-top: 1.6rem;
|
|
background-image: url("../assets/img/tyc_00.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-position: 0 0;
|
|
height: 12rem;
|
|
}
|
|
|
|
.tyclogo .tyname {
|
|
height: 2.5rem;
|
|
line-height: 2.5rem;
|
|
text-align: right;
|
|
padding-right: 7.3rem;
|
|
font-size: 1.7rem;
|
|
padding-top: 6.8rem;
|
|
}
|
|
|
|
.tyclogo .tydesc {
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
font-size: 1.03rem;
|
|
text-align: right;
|
|
padding-right: 1.06rem;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 总计进馆 */
|
|
.jgbox {
|
|
margin-top: 1.02rem;
|
|
width: 100%;
|
|
height: 12rem;
|
|
}
|
|
|
|
.jgbox .jg_title {
|
|
background-image: url('../assets/img/ty_jg_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
padding-left: 3.2rem;
|
|
height: 2.06rem;
|
|
line-height: 2.06rem;
|
|
}
|
|
|
|
.jgbox .jgcon {
|
|
width: 100%;
|
|
height: 7rem;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem {
|
|
width: 30%;
|
|
margin-left: 3%;
|
|
float: left;
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem .jgimg {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem span {
|
|
display: block;
|
|
text-align: center;
|
|
height: 1.8rem;
|
|
line-height: 1.8rem;
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem .jgival {
|
|
font-size: 1.06rem;
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem .jgdesc {
|
|
color: #666;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* 进馆人数统计 */
|
|
.gcins {
|
|
margin-top: 1.6rem;
|
|
}
|
|
|
|
.gcins .gcins_title {
|
|
background-image: url("../assets/img/tyc_tbg.png");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 1.8rem;
|
|
line-height: 1.8rem;
|
|
padding-left: 2.02rem;
|
|
}
|
|
|
|
/* 各场馆人次占比 */
|
|
.pcgrbox {
|
|
margin-top: 1.6rem;
|
|
padding-bottom: 4rem;
|
|
height: 8rem;
|
|
}
|
|
|
|
.pcgrbox .pcb_title {
|
|
background-image: url("../assets/img/tyc_tbg.png");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 1.8rem;
|
|
line-height: 1.8rem;
|
|
padding-left: 2.02rem;
|
|
}
|
|
|
|
.pcgrbox .pcbcon {
|
|
width: 100%;
|
|
margin-top: 2rem;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.pcgrbox .pcbcon .pcbitem {
|
|
width: 30%;
|
|
}
|
|
|
|
|
|
.pcgrbox .pcbcon .pcbitem div:first {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.pcgrbox .pcbcon .pcbitem .pcbval {
|
|
width: 110px;
|
|
/** 20230727 */
|
|
background-image: url('../assets/img/ty_pcb_item_bg.png');
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
border-radius: 100%;
|
|
line-height: 5rem;
|
|
text-align: center;
|
|
/* 动画效果 */
|
|
-webkit-animation: ani_fls 3s infinite forwards;
|
|
animation: ani_fls 3s infinite forwards;
|
|
}
|
|
|
|
/*闪瞎人的动画 */
|
|
@keyframes ani_fls{
|
|
0%{
|
|
opacity: 0.6;
|
|
scale: (0.4);
|
|
}
|
|
50%{
|
|
opacity: 1;
|
|
}
|
|
100%{
|
|
opacity: 0.6;
|
|
/* transform: rotate(1turn); */
|
|
scale: (1);
|
|
}
|
|
}
|
|
|
|
.pcgrbox .pcbcon .pcbitem .pcbdesc {
|
|
background-image: url('../assets/img/ty_pcb_desc.png');
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size: 0.8rem;
|
|
width: 5rem;
|
|
height: 2rem;
|
|
margin-top: 0.7rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
line-height: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 各场馆人数趋势 */
|
|
.gcgrs {
|
|
margin-top: 1.06rem;
|
|
}
|
|
|
|
.gcgrs .gcgrs_title {
|
|
background-image: url("../assets/img/wh_tbg.png");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 2.5rem;
|
|
line-height: 1.8rem;
|
|
padding-left: 2.62rem;
|
|
}
|
|
|
|
.gcgrs .gcgrs_charts {
|
|
/* margin-top: 2rem; */
|
|
width: 100%;
|
|
height: 19rem;
|
|
}
|
|
</style>
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import * as btApi from '../api/home'
|
|
import { ecMaxVal } from '@/utils/comm';
|
|
|
|
export default {
|
|
name: 'TycView',
|
|
data() {
|
|
return {
|
|
// 场馆数据
|
|
cgdata:[],
|
|
// 柱子图
|
|
ecbardata:[],
|
|
// 今日
|
|
tdnum:0,
|
|
// month
|
|
tmdata:0,
|
|
// year
|
|
tydata:0,
|
|
}
|
|
},
|
|
mounted() {
|
|
// 统计概况信息
|
|
this.csstat()
|
|
|
|
// 进馆人数统计
|
|
// -- this.cgsf_line()--
|
|
// 各场馆人数趋势
|
|
this.cg_line()
|
|
},
|
|
methods: {
|
|
// 110,210,310
|
|
// 查询场馆统计情况
|
|
csstat(){
|
|
let groupId = "110|210|310"
|
|
// 今日进馆数据
|
|
btApi.allGroupTimeNum({granularity:"daily",groupsId:groupId}).then(res=>{
|
|
const cgdata = res.data.data
|
|
// 场馆人次占比
|
|
const tgdata = cgdata.groupsData
|
|
this.cgdata = tgdata
|
|
tgdata.forEach(item=>{
|
|
this.tdnum += item.noRepeatInNum
|
|
});
|
|
|
|
// 24 小时
|
|
const vkdata = new Array;
|
|
const vvdata = new Array;
|
|
//
|
|
const dkeys = cgdata.dkeys
|
|
// allTimeData
|
|
const allTdata = cgdata.allTimeData
|
|
|
|
dkeys.forEach(function(item,idx){
|
|
// console.log(item)
|
|
vvdata.push( allTdata[item].num)
|
|
});
|
|
|
|
vkdata.push({
|
|
xname: dkeys,
|
|
xval: vvdata
|
|
})
|
|
|
|
this.ecbardata = vkdata
|
|
// 24h
|
|
this.cgsf_line()
|
|
});
|
|
|
|
// 本月
|
|
btApi.allGroupTimeNum({granularity:"monthly",groupsId:groupId}).then(res=>{
|
|
const cgdata = res.data.data
|
|
// 场馆人次占比
|
|
const tgdata = cgdata.groupsData
|
|
this.cgdata = tgdata
|
|
tgdata.forEach(item=>{
|
|
this.tmdata += item.noRepeatInNum
|
|
});
|
|
});
|
|
// 年度
|
|
btApi.allGroupTimeNum({granularity:"yearly",groupsId:groupId}).then(res=>{
|
|
const cgdata = res.data.data
|
|
// 场馆人次占比
|
|
const tgdata = cgdata.groupsData
|
|
this.cgdata = tgdata
|
|
tgdata.forEach(item=>{
|
|
this.tydata += item.noRepeatInNum
|
|
});
|
|
});
|
|
},
|
|
// 24H 进馆人数
|
|
cgsf_line() {
|
|
var chartDom = document.getElementById('gcins_charts');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: function (params) {
|
|
return params[0].name + "</br>" + params[0].value
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '3%',
|
|
top: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
data:this.ecbardata[0].xname,
|
|
// data: [
|
|
// '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
|
|
// ],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
show: true
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
// 使用深浅的间隔色
|
|
color: '#027eff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#0095FF',
|
|
}
|
|
}],
|
|
series: [{
|
|
type: 'bar',
|
|
barGap: '5%',
|
|
barWidth: '10%',
|
|
barCategoryGap: '60%',
|
|
stack: 1,
|
|
// animation
|
|
animationDurationUpdate:3000,
|
|
animationEasingUpdate:'quintcInOut',
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: [30, 30, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#00feff'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#0286ff'
|
|
}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
data: this.ecbardata[0].xval,
|
|
zlevel: 11
|
|
},
|
|
{
|
|
type: 'scatter',
|
|
stack: 1,
|
|
xAxisIndex: 0,
|
|
symbolOffset: [0, 0], //相对于原本位置的偏移量
|
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
symbolSize: 13,
|
|
zlevel: 10,
|
|
z: 2,
|
|
},
|
|
{
|
|
name: '背景',
|
|
type: 'bar',
|
|
barWidth: '10%',
|
|
barGap: '-100%',
|
|
data:ecMaxVal(this.ecbardata[0].xval),
|
|
//data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#004298',
|
|
barBorderRadius: 30,
|
|
}
|
|
},
|
|
z: 1,
|
|
},
|
|
]
|
|
}
|
|
|
|
option && myChart.setOption(option);
|
|
//消停几秒后开始，动画
|
|
|
|
setInterval(()=>{
|
|
myChart.clear()
|
|
option && myChart.setOption(option);
|
|
},4000);
|
|
},
|
|
// 场馆人流趋势
|
|
cg_line() {
|
|
var chartDom = document.getElementById("gc_charts");
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
var option
|
|
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
|
|
var name = ['体育场', '体育馆', '游泳场馆']
|
|
var data = [
|
|
[137, 34, 135, 161, 74, 152, 110, 100, 150],
|
|
[174, 137, 135, 34, 152, 135, 140, 160, 100],
|
|
[134, 74, 137, 135, 161, 137, 300, 220, 250],
|
|
]
|
|
|
|
var series = [];
|
|
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],
|
|
|
|
})
|
|
}
|
|
option = {
|
|
// backgroundColor: "#141f56",
|
|
legend: {
|
|
bottom: 0,
|
|
right: 20,
|
|
itemGap: 20,
|
|
itemWidth: 20,
|
|
itemHeight: 20,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '14'
|
|
},
|
|
data: [
|
|
{ icon: 'image://img/tyc_icon.png', name: '体育场' },
|
|
{ icon: 'image://img/tyg_icon.png', name: '体育馆' },
|
|
{ icon: 'image://img/yyg_icon.png', name: '游泳场馆' },
|
|
]
|
|
},
|
|
title: {
|
|
// text: "负面言论分领域趋势",
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '22',
|
|
fontWeight: 'normal',
|
|
},
|
|
subtextStyle: {
|
|
color: '#90979c',
|
|
fontSize: '16',
|
|
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
},
|
|
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
|
|
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: 240,
|
|
bottom: 240,
|
|
right: 20,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
inside: false,
|
|
interval: 0,
|
|
textStyle: {
|
|
color: '#FFFFFF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
},
|
|
data: xData,
|
|
}],
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#32346c ',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#0095FF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
formatter: '{value}',
|
|
},
|
|
},
|
|
series: series,
|
|
}
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|