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.
1062 lines
29 KiB
1062 lines
29 KiB
<template>
|
|
<v-scale-screen width="1920" height="1080">
|
|
<div id="ty">
|
|
|
|
<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">体育场 |
|
|
体育馆 | 游泳场馆</span>
|
|
</div>
|
|
|
|
<div class="tongji">
|
|
<span class="institle">总计进馆人数</span>
|
|
<!-- 今日进馆人数 -->
|
|
<div class="insval">
|
|
<img src="../../assets/wh/td_ins.png" />
|
|
<span id="insv" class="insv">234,098</span>
|
|
<span class="inst">今日进馆人数</span>
|
|
</div>
|
|
<!-- 本月进馆人数 -->
|
|
<div class="insval">
|
|
<img src="../../assets/wh/tm_ins.png" />
|
|
<span id="insv2" class="insv">234,098</span>
|
|
<span class="inst">本月进馆人数</span>
|
|
</div>
|
|
<!-- 本年进馆人数 -->
|
|
<div class="insval">
|
|
<img src="../../assets/wh/tyear_ins.png" />
|
|
<span id="insv3" class="insv">234,098</span>
|
|
<span class="inst">本年进馆人数</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dinszone">
|
|
<span class="dins_title">24小时总进馆人流趋势</span>
|
|
<!-- 柱状统计图 -->
|
|
<div class="dins_chart" id="dinschart" style="height: 22vh; width: 100%"></div>
|
|
</div>
|
|
|
|
<!-- <div class="bfb">
|
|
<div class="renshu"><span><img src="../../assets/ty/rliu.png"></span>进馆人数</div>
|
|
|
|
<div class="num">24,352,345</div> -->
|
|
|
|
<!-- <div class="cntTxt">
|
|
<div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
|
|
<div style="color: #0082FF;font-size: 14px;">人流饱和</div>
|
|
</div> -->
|
|
|
|
<!-- <div class="cntTxt">
|
|
<canvas id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND" :width="cWidth" :height="cHeight" class="charts"
|
|
@click="tap" />
|
|
</div> -->
|
|
|
|
<!-- <div class="rsType">
|
|
<div class="typeItem">
|
|
<div>安静</div>
|
|
<img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/quiet.png" />
|
|
</div>
|
|
<div class="typeItem">
|
|
<div>舒适</div>
|
|
<img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/soft.png" />
|
|
</div>
|
|
<div class="typeItem">
|
|
<div>拥挤</div>
|
|
<img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/crowd.png" />
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="center">
|
|
<div class="item">
|
|
<Video :src="src" :poster="poster" />
|
|
</div>
|
|
<div class="item">
|
|
<Video :src="src" :poster="poster" />
|
|
</div>
|
|
<div class="item">
|
|
<Video :src="src" :poster="poster" />
|
|
</div>
|
|
<!-- <div class="item"></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="venue_proportion">
|
|
<div class="venue_proportion_top">
|
|
<!-- <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> -->
|
|
<span class="venue_proportion_box_num">25%</span>
|
|
</div>
|
|
<div class="venue_proportion_bo">
|
|
<!-- <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> -->
|
|
<span>体育场</span>
|
|
</div>
|
|
</div>
|
|
<div class="venue_proportion">
|
|
<div class="venue_proportion_top">
|
|
<!-- <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> -->
|
|
<span class="venue_proportion_box_num">25%</span>
|
|
</div>
|
|
<div class="venue_proportion_bo">
|
|
<!-- <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> -->
|
|
<span>体育馆</span>
|
|
</div>
|
|
</div>
|
|
<div class="venue_proportion">
|
|
<div class="venue_proportion_top">
|
|
<!-- <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> -->
|
|
<span class="venue_proportion_box_num">25%</span>
|
|
</div>
|
|
<div class="venue_proportion_bo">
|
|
<!-- <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> -->
|
|
<span>游泳场馆</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- <div id="pcgchart1" style="width: 100%;height: 25vh;margin-top: 20px;"></div> -->
|
|
</div>
|
|
<!-- 各场馆人流趋势 -->
|
|
<div class="pcgrliu">
|
|
<span class="pcg_title">各场馆人流趋势</span>
|
|
<div id="pcgchart2" style="width: 100%; height: 290px"></div>
|
|
</div>
|
|
<!-- <div class="item"></div> -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</v-scale-screen>
|
|
</template>
|
|
<script>
|
|
// 引入echarts
|
|
import * as echarts from "echarts";
|
|
|
|
import Video from '../../components/btgym/Video.vue'
|
|
export default {
|
|
components: {
|
|
Video
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
|
|
mounted() {
|
|
let cc = window.document.getElementById("app");
|
|
// 清除其他多余的classname
|
|
if (cc.className.indexOf('ty_bg') > -1) {
|
|
cc.className = "btgym";
|
|
} else {
|
|
cc.classList.add("ty_bg");
|
|
}
|
|
this.ty_bar1()
|
|
// this.ty_bar2()
|
|
this.ty_bar3()
|
|
this.addNumber(0, 234098, 'insv')
|
|
this.addNumber(0, 234098, 'insv2')
|
|
this.addNumber(0, 234098, 'insv3')
|
|
// window.onresize = () => {
|
|
// // 基于准备好的dom，初始化echarts实例
|
|
// let myChart = this.$echarts.init(document.getElementById('pcgchart2'));
|
|
// myChart.resize();
|
|
// };
|
|
},
|
|
methods: {
|
|
ty_bar1() {
|
|
var chartDom = document.getElementById("dinschart");
|
|
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','18:00', '20:00', '21:00', '22:00'];
|
|
|
|
// var data = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000]
|
|
// var data = [Math.random() * 300]
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: function (params) {
|
|
return params[0].name + "</br>" + params[0].value
|
|
}
|
|
},
|
|
// legend: {
|
|
// data: ['厂用电量']
|
|
// },
|
|
grid: {
|
|
left: 0,
|
|
right: 0,
|
|
bottom: '3%',
|
|
top: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
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: {
|
|
// interval: 0,
|
|
// rotate: 0
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
// name: ' 今日发电量( KWh )',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
// 使用深浅的间隔色
|
|
color: '#027eff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#0095FF',
|
|
}
|
|
}],
|
|
series: [{
|
|
// name: '厂用电量',
|
|
type: 'bar',
|
|
barGap: '5%',
|
|
barWidth: '10%',
|
|
barCategoryGap: '60%',
|
|
stack: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: [30, 30, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#00EAFF'
|
|
},
|
|
// {
|
|
// offset: 0.5,
|
|
// color: '#00feff'
|
|
// },
|
|
{
|
|
offset: 1,
|
|
color: '#001AFF'
|
|
}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
data: [
|
|
14000,
|
|
11000,
|
|
10000,
|
|
9000,
|
|
8000,
|
|
7000,
|
|
5000,
|
|
4000,
|
|
3000,
|
|
],
|
|
zlevel: 11
|
|
},
|
|
{
|
|
// name: '厂用电量',
|
|
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: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#004298',
|
|
barBorderRadius: 30,
|
|
// backgroundColor:'#091C24'
|
|
// borderColor:'#00D1F0'
|
|
}
|
|
},
|
|
z: 1,
|
|
},
|
|
]
|
|
}
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
ty_bar2() {
|
|
var chartDom = document.getElementById("pcgchart1");
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
var option
|
|
// var xData = function() {
|
|
// var data = [];
|
|
// for (var i = 2011; i < 2017; i++) {
|
|
// data.push(i + "年");
|
|
// }
|
|
// return data;
|
|
// }();
|
|
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],
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
|
|
]
|
|
|
|
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: {
|
|
top: 0,
|
|
itemGap: 15,
|
|
itemWidth: 15,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '14'
|
|
},
|
|
data: 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,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
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: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#32346c ',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#0095FF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
formatter: '{value}',
|
|
},
|
|
},
|
|
series: series,
|
|
}
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
ty_bar3() {
|
|
var chartDom = document.getElementById("pcgchart2");
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
var option
|
|
// var xData = function() {
|
|
// var data = [];
|
|
// for (var i = 2011; i < 2017; i++) {
|
|
// data.push(i + "年");
|
|
// }
|
|
// return data;
|
|
// }();
|
|
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
|
|
var name = ['体育场', '体育馆', '游泳场馆']
|
|
var data = [
|
|
[0, 134, 435, 561, 674, 552, 810, 300, 550, 460, 650, 790],
|
|
[0, 437, 535, 634, 752, 435, 740, 560, 900, 440, 580, 350],
|
|
[0, 0, 337, 635, 861, 637, 500, 620, 450, 630, 800, 320],
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
|
|
]
|
|
|
|
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,
|
|
}
|
|
},
|
|
markPoint: {
|
|
data: [
|
|
{
|
|
name: '最大值',
|
|
type: 'max'
|
|
}
|
|
]
|
|
|
|
},
|
|
data: data[i],
|
|
|
|
})
|
|
}
|
|
option = {
|
|
// backgroundColor: "#141f56",
|
|
legend: {
|
|
top: 270,
|
|
right: 0,
|
|
itemGap: 15,
|
|
itemWidth: 15,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '14'
|
|
},
|
|
data: 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: 230,
|
|
bottom: 240,
|
|
right: 20,
|
|
left: 36,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
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: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#32346c ',
|
|
}
|
|
},
|
|
splitNumber: 10,
|
|
// interval:4.10,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#0095FF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
formatter: '{value}',
|
|
},
|
|
},
|
|
series: series,
|
|
}
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
addNumber(start, end, id) {
|
|
var o = document.getElementById(id);
|
|
var i = start;
|
|
var Interval;
|
|
if (i < end) {
|
|
Interval = setInterval(function () {
|
|
i += 4000; // 设置每次增加的动态数字，可调整
|
|
if (i > end) {
|
|
clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
|
|
o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
|
|
i = 0;
|
|
} else {
|
|
o.innerHTML = i.toLocaleString();
|
|
}
|
|
}, 10); // 数据跳转的速度控制
|
|
}
|
|
}
|
|
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.ty_bg {
|
|
clear: both;
|
|
background-image: url("../../assets/ty/tybg.jpg") !important;
|
|
}
|
|
|
|
.screen-box {
|
|
background: none !important;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.main {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
|
|
.left {
|
|
width: 33%;
|
|
height: 75vh;
|
|
// height: 100%;
|
|
// border: 1px solid red;
|
|
// margin-left: 2%;
|
|
margin-top: -4%;
|
|
|
|
.tiyuBla {
|
|
width: 100%;
|
|
height: 40%;
|
|
background-image: url("../../assets/ty/ins_title_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
color: white;
|
|
font-size: 38px;
|
|
font-weight: bold;
|
|
position: relative;
|
|
|
|
.wh_small {
|
|
padding-top: 12px;
|
|
font-size: 12px;
|
|
text-align: right;
|
|
padding-right: 10px;
|
|
color: white;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
|
|
}
|
|
}
|
|
|
|
.tongji {
|
|
width: 100%;
|
|
// float: left;
|
|
height: 2.4rem;
|
|
background-image: url("../../assets/wh/ins_count.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-top: 0.48rem;
|
|
|
|
.institle {
|
|
color: #00c6ff;
|
|
padding-left: 0.9rem;
|
|
line-height: 0.38rem;
|
|
height: 0.38rem;
|
|
display: block;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.insval {
|
|
width: 30%;
|
|
height: 1.68rem;
|
|
float: left;
|
|
margin-left: 0.16rem;
|
|
}
|
|
|
|
.insval:first {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.insval img {
|
|
padding-top: 0.268rem;
|
|
display: block;
|
|
text-align: center;
|
|
height: 0.78rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.insval span {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.insval .insv {
|
|
height: 0.48rem;
|
|
line-height: 0.18rem;
|
|
font-size: 22px;
|
|
color: white;
|
|
}
|
|
|
|
.insval .inst {
|
|
color: #6a6c7c;
|
|
font-size: 12px;
|
|
height: 0.12rem;
|
|
line-height: 0.12rem;
|
|
}
|
|
}
|
|
|
|
.dinszone {
|
|
margin-top: 0.22rem;
|
|
width: 100%;
|
|
height: 0.48rem;
|
|
float: left;
|
|
}
|
|
|
|
.dinszone .dins_title {
|
|
display: block;
|
|
height: 0.58rem;
|
|
line-height: 0.44rem;
|
|
color: #fff;
|
|
font-size: 0.2rem;
|
|
background-image: url('../../assets/wh/dins_title_bg.png');
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
padding-left: 0.96rem;
|
|
}
|
|
|
|
.bfb {
|
|
width: 100%;
|
|
height: 25%;
|
|
background-image: url("../../assets/ty/pins_bh.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.renshu {
|
|
span {
|
|
margin-right: 5px;
|
|
|
|
img {
|
|
width: 10px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 10%;
|
|
color: #8199bd;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.num {
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
position: absolute;
|
|
top: 45%;
|
|
left: 6%;
|
|
}
|
|
|
|
.cntTxt {
|
|
width: 20%;
|
|
height: 60%;
|
|
// border: 1px solid red;
|
|
position: absolute;
|
|
top: -5%;
|
|
left: 30.5%;
|
|
text-align: center;
|
|
padding-top: 2.5%;
|
|
}
|
|
|
|
.rsType {
|
|
width: 30%;
|
|
height: 35%;
|
|
// border: 1px solid red;
|
|
position: absolute;
|
|
top: 30%;
|
|
right: 4%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.typeItem {
|
|
width: 30%;
|
|
height: 95%;
|
|
text-align: center;
|
|
color: #687c9e;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.center {
|
|
margin-top: 3%;
|
|
width: 30%;
|
|
height: 72vh;
|
|
// border: 1px solid #019ade;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
// align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
background-image: url("../../assets/ty/vbig_bg.png");
|
|
background-size: 100% 90%;
|
|
background-repeat: no-repeat;
|
|
|
|
.item {
|
|
width: 70%;
|
|
height: 34%;
|
|
|
|
background-image: url("../../assets/ty/vsmall_bg.png");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
|
|
&:nth-child(1) {
|
|
margin-top: -65px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
margin-top: 3%;
|
|
width: 33%;
|
|
height: 76vh;
|
|
// border: 1px solid #019ade;
|
|
// display: flex;
|
|
// flex-wrap: wrap;
|
|
|
|
.pcgrliu {
|
|
width: 100%;
|
|
// width: 634px;
|
|
// height: 290px;
|
|
flex: 1;
|
|
|
|
&:nth-child(2) {
|
|
// margin-top: 0.5rem;
|
|
}
|
|
|
|
.venue_proportion_box {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
color: #00A7FF;
|
|
font-size: 13px;
|
|
|
|
.venue_proportion {
|
|
flex: 1;
|
|
// text-align: center;
|
|
|
|
|
|
.venue_proportion_top {
|
|
text-align: center;
|
|
width: 75%;
|
|
height: 9vh;
|
|
line-height: 9vh;
|
|
margin: 0 auto;
|
|
background-image: url('../../assets/ty/右1-4.png');
|
|
background-size: 100% 100%;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
.venue_proportion_box_num {
|
|
color: white;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
display: block;
|
|
width: 60%;
|
|
height: 9vh;
|
|
line-height: 9vh;
|
|
margin: 0 auto;
|
|
background-image: url('../../assets/ty/右1-3.png');
|
|
background-size: 100% 100%;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.venue_proportion_bo {
|
|
|
|
text-align: center;
|
|
width: 50%;
|
|
height: 3vh;
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
background-image: url('../../assets/ty/右1-5.png');
|
|
background-size: 100% 100%;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
span {
|
|
line-height: 3vh;
|
|
}
|
|
|
|
// img {
|
|
// margin-left: 48px;
|
|
// }
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.pcg_title {
|
|
display: block;
|
|
height: 4vh;
|
|
line-height: 3vh;
|
|
background: url('../../assets/wh/pcg_t_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 center;
|
|
padding-left: 0.98rem;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
// align-items: center;
|
|
// align-content: center;
|
|
// justify-content: center;
|
|
// background-image: url("../../assets/ty/vbig_bg.png");
|
|
// background-size: contain;
|
|
// background-repeat: no-repeat;
|
|
|
|
// .item {
|
|
// width: 80%;
|
|
// height: 30%;
|
|
// margin-top: 5px;
|
|
// background-image: url("../../assets/ty/vsmall_bg.png");
|
|
// background-size: contain;
|
|
// background-repeat: no-repeat;
|
|
// }
|
|
|
|
// .item:nth-child(2),
|
|
// .item:nth-child(4) {
|
|
// margin-right: 60px;
|
|
// }
|
|
}
|
|
|
|
.charts {
|
|
width: 225px;
|
|
height: 150px;
|
|
}
|
|
|
|
.charts1 {
|
|
width: 550px;
|
|
height: 250px;
|
|
}
|
|
|
|
// .btgym {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// background-image: url('../../assets/index/bg.jpg') !important;
|
|
// background-size: 100% 100%;
|
|
// background-position: 100% 100%;
|
|
// background-repeat: no-repeat;
|
|
// }
|
|
|
|
|
|
// .wh_bg {
|
|
// clear: both;
|
|
// background-image: url("../../assets/wh/whbg.jpg") !important;
|
|
// }
|
|
}
|
|
</style>
|