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.
1520 lines
41 KiB
1520 lines
41 KiB
<template>
|
|
<v-scale-screen width="3840" height="2160">
|
|
<div id="index">
|
|
<!-- 左边 -->
|
|
<div class="indexleftbox">
|
|
<!-- 客流 -->
|
|
<div class="keliu">
|
|
<span class="kliu_title">总服务人次趋势</span>
|
|
<div class="kliu_st">
|
|
<span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span>
|
|
<span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem2('m')">月</span>
|
|
<span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem3('d')">日</span>
|
|
</div>
|
|
</div>
|
|
<!-- 立体柱状图 -->
|
|
<div class="tongjitu" id="homebar">
|
|
<!-- 柱图，注意样式 -->
|
|
</div>
|
|
<!-- 几大场馆预警图 -->
|
|
<div class="cgflow">
|
|
<!-- 左边的流量预警 -->
|
|
<div class="cgflow_leftbox">
|
|
<!-- 体育场的流量预警 -->
|
|
<div class="cgfitem">
|
|
<span class="cgtitle">{{ groupNameData[0] }}</span>
|
|
<span class="cgval">{{ proportionData[0] }}</span>
|
|
<!-- <span class="cgtitle">体育场</span>
|
|
<span class="cgval">57.4%</span> -->
|
|
<span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
|
|
</div>
|
|
<!-- 体育馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgtitle">{{ groupNameData[1] }}</span>
|
|
<span class="cgval">{{ proportionData[1] }}</span>
|
|
<!-- <span class="cgtitle">体育馆</span>
|
|
<span class="cgval">57.45%</span> -->
|
|
<span class="cgimg"><img src="../assets/index/tyg_icon.png" /></span>
|
|
</div>
|
|
<!-- 游泳馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgtitle">{{ groupNameData[2] }}</span>
|
|
<span class="cgval">{{ proportionData[2] }}</span>
|
|
<!-- <span class="cgtitle">游泳場館</span>
|
|
<span class="cgval">5%</span> -->
|
|
<span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span>
|
|
</div>
|
|
</div>
|
|
<!-- 中间环形饼图 -->
|
|
<div id="indexPie1"></div>
|
|
<!-- 右边流量预警 -->
|
|
<div class="cgflow_rightbox">
|
|
<!-- 图书馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgimg"><img src="../assets/index/tsg_icon.png" /></span>
|
|
<span class="cgval">{{ proportionData[3] }}</span>
|
|
<span class="cgtitle">{{ groupNameData[3] }}</span>
|
|
<!-- <span class="cgval">56.56%</span>
|
|
<span class="cgtitle">劳务义工博物馆</span> -->
|
|
</div>
|
|
<!-- 文化馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgimg"><img src="../assets/index/whg_icon.png" /></span>
|
|
<span class="cgval">{{ proportionData[4] }}</span>
|
|
<span class="cgtitle">{{ groupNameData[4] }}</span>
|
|
<!-- <span class="cgval">56.666%</span>
|
|
<span class="cgtitle">图书馆</span> -->
|
|
</div>
|
|
<!-- 博物馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgimg"><img src="../assets/index/bwg_icon.png" /></span>
|
|
<span class="cgval">{{ proportionData[5] }}</span>
|
|
<span class="cgtitle">{{ groupNameData[5] }}</span>
|
|
<!-- <span class="cgval">5%</span>
|
|
<span class="cgtitle">文化馆</span> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 今日各场馆服务人次趋势 -->
|
|
<div class="gcgqs">
|
|
<div class="gcg_title">今日各场馆服务人次趋势</div>
|
|
<div id="kl-line" style="width: 90%; height: 2.3rem;margin-left: 10%;"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 中间 -->
|
|
<div class="centerbox">
|
|
<!-- 今日进馆人数 -->
|
|
<div class="jgrs jgrs1">
|
|
<span id="jgval1" class="jgval">{{ day_num }}</span>
|
|
<span class="jgdesc">今日进馆人数</span>
|
|
</div>
|
|
<!-- 本周进馆人数 -->
|
|
<div class="jgrs jgrs2">
|
|
<span id="jgval2" class="jgval">{{ week_num }}</span>
|
|
<span class="jgdesc">本周进馆人数</span>
|
|
</div>
|
|
<!-- 本月进馆人数 -->
|
|
<div class="jgrs jgrs3">
|
|
<span id="jgval3" class="jgval">{{ mon_num }}</span>
|
|
<span class="jgdesc">本月进馆人数</span>
|
|
</div>
|
|
<!-- 会动的体育馆image -->
|
|
<div class="tygpic"><img src="../assets/index/zt.png" /></div>
|
|
<!-- 年度进馆人数 -->
|
|
<div class="ndjgrs">
|
|
<span class="nddesc">年度服务人数</span>
|
|
<span class="ndval">{{ year_num }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 右边 -->
|
|
<div class="rbox">
|
|
<div class="rbox_title">各场馆实时服务人次</div>
|
|
<div class="rbox_con">
|
|
<!-- 各场馆实时人数 cg1 -->
|
|
<!-- v-for="(item, index) in 6" :key="index" -->
|
|
<div class="rbitem" v-for="item in ssjgNumDatas" :key="item.groupId">
|
|
<span class="rbcgname">{{ item.groupName||'博物馆' }}</span>
|
|
<span class="rbtitle">日累计人数</span>
|
|
<!-- <span class="rbval">4,738</span> -->
|
|
<span class="rbval">{{ item.allEnter }}</span>
|
|
<!-- <div class="rbrate"
|
|
:class="[{ rbrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { rbrate3: parseInt(item.proportion) >= 90 }]">{{
|
|
item.proportion }}
|
|
</div> -->
|
|
<div class="rbrate">{{ item.proportion }}</div>
|
|
<div class="rbrateBar">
|
|
<span :class="(item.proportion.split('%')[0])>0?'active':''"></span>
|
|
<span :class="(item.proportion.split('%')[0])>16.666?'active':''"></span>
|
|
<span :class="(item.proportion.split('%')[0])>33.333?'active':''"></span>
|
|
<span :class="(item.proportion.split('%')[0])>50?'active':''"></span>
|
|
<span :class="(item.proportion.split('%')[0])>66.666?'active':''"></span>
|
|
<span :class="(item.proportion.split('%')[0])==100?'active':''"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="rbitem">
|
|
<span class="rbcgname">图书馆</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">50%</span>
|
|
</div> -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</v-scale-screen>
|
|
</template>
|
|
<script>
|
|
// 引入echarts
|
|
import * as echarts from "echarts";
|
|
|
|
// 引入api
|
|
import * as homeApi from '@/api/home'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 年月日选中的样式,默认日
|
|
klselt: "d",
|
|
// 客流标题数组
|
|
kltdata: [],
|
|
// 客流值数组
|
|
klvdata: [],
|
|
day_num: 0,
|
|
week_num: 0,
|
|
mon_num: 0,
|
|
year_num: 0,
|
|
klqsXDatas: [],
|
|
klqsDatas: [],
|
|
dataP: [],//左侧饼图
|
|
ssjgNumDatas: [],
|
|
rsqsXData: [],
|
|
rsqsDatas: [],
|
|
rsqs_datas: {},
|
|
rsqsDataName: [],
|
|
rsqsData_z: [],
|
|
proportionData: [],
|
|
proportionData_z: [],
|
|
groupNameData: [],
|
|
timer1: null,//左上角定时器
|
|
timer2: null,//左下角定时器
|
|
timer0: null,//年月日切换定时器
|
|
};
|
|
},
|
|
//创建的时候修改背景图片
|
|
created() {
|
|
|
|
let cc = window.document.getElementById("app");
|
|
// 清除其他多余的classname
|
|
let len = cc.classList.length;
|
|
|
|
if (len > 1) {
|
|
cc.className = "btgym page_bg";
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
this.getStat();
|
|
this.getHomeBarData();
|
|
this.getInfoDatas();
|
|
this.getGcgNumDatas();
|
|
|
|
setTimeout(() => {
|
|
this.home_bar();
|
|
this.line_zone();
|
|
this.index_pie1();
|
|
}, 1000)
|
|
|
|
this.autoTimer0();
|
|
},
|
|
methods: {
|
|
autoTimer0(){
|
|
clearInterval(this.timer0);
|
|
this.timer0 = setInterval(() => {
|
|
if(this.klselt == 'y'){
|
|
this.klselt = 'm';
|
|
this.btgetdata2();
|
|
}else if(this.klselt == 'm'){
|
|
this.klselt = 'd';
|
|
this.btgetdata3();
|
|
}else if(this.klselt == 'd'){
|
|
this.klselt = 'y';
|
|
this.btgetdata();
|
|
}
|
|
}, 5000);
|
|
},
|
|
btgetdata() {
|
|
//年客流
|
|
let that = this;
|
|
that.proportionData = [];
|
|
that.groupNameData = [];
|
|
that.dataP = [];
|
|
// console.log(type)
|
|
// let rqtp;
|
|
// switch (this.klselt) {
|
|
// case 'd': rqtp = "daily"; break;
|
|
// case 'm': rqtp = "monthly"; break;
|
|
// case 'y': rqtp = "yearly"; break;
|
|
// }
|
|
// allTygGroupTimeNum
|
|
homeApi.allGroupTimeNum().then(res => {
|
|
const tmpdata = res.data.data.allTimeData
|
|
const dkeys = res.data.data.dkeys
|
|
const groupsData = res.data.data.groupsData
|
|
|
|
let datas = []
|
|
Object.values(tmpdata).forEach((value) => {
|
|
datas.push(value.num);
|
|
});
|
|
|
|
that.klqsDatas = datas;
|
|
that.klqsXDatas = dkeys;
|
|
|
|
that.proportionData = [];that.groupNameData=[];that.dataP=[];
|
|
groupsData.forEach((item) => {
|
|
that.proportionData.push(item.proportion);
|
|
that.groupNameData.push(item.groupName);
|
|
that.dataP.push({
|
|
name:item.groupName,
|
|
value:item.proportion.split('%')[0]
|
|
})
|
|
})
|
|
|
|
this.home_bar();
|
|
});
|
|
},
|
|
btgetdata2() {
|
|
//月客流
|
|
let that = this;
|
|
that.proportionData = [];
|
|
that.groupNameData = [];
|
|
that.dataP = [];
|
|
homeApi.allGroupTimeNum2().then(res => {
|
|
const tmpdata = res.data.data.allTimeData
|
|
const dkeys = res.data.data.dkeys
|
|
const groupsData = res.data.data.groupsData
|
|
|
|
let datas = []
|
|
Object.values(tmpdata).forEach((value) => {
|
|
datas.push(value.num);
|
|
});
|
|
|
|
that.klqsDatas = datas;
|
|
that.klqsXDatas = dkeys;
|
|
|
|
that.proportionData = [];that.groupNameData=[];that.dataP=[];
|
|
groupsData.forEach((item) => {
|
|
that.proportionData.push(item.proportion);
|
|
that.groupNameData.push(item.groupName);
|
|
that.dataP.push({
|
|
name:item.groupName,
|
|
value:item.proportion.split('%')[0]
|
|
})
|
|
})
|
|
|
|
this.home_bar();
|
|
});
|
|
},
|
|
btgetdata3() {
|
|
//日客流
|
|
let that = this;
|
|
that.proportionData = [];
|
|
that.groupNameData = [];
|
|
that.dataP = [];
|
|
homeApi.allGroupTimeNum3().then(res => {
|
|
const tmpdata = res.data.data.allTimeData
|
|
const dkeys = res.data.data.dkeys
|
|
const groupsData = res.data.data.groupsData
|
|
|
|
let datas = []
|
|
Object.values(tmpdata).forEach((value) => {
|
|
datas.push(value.num);
|
|
});
|
|
|
|
that.klqsDatas = datas;
|
|
that.klqsXDatas = dkeys;
|
|
|
|
that.proportionData = [];that.groupNameData=[];that.dataP=[];
|
|
groupsData.forEach((item) => {
|
|
that.proportionData.push(item.proportion);
|
|
that.groupNameData.push(item.groupName);
|
|
that.dataP.push({
|
|
name:item.groupName,
|
|
value:item.proportion.split('%')[0]
|
|
})
|
|
})
|
|
|
|
this.home_bar();
|
|
});
|
|
},
|
|
//选择年月日中的某个
|
|
selitem(type) {
|
|
// console.log(type);
|
|
this.klselt = type;
|
|
// this.getHomeBarData();
|
|
this.btgetdata();
|
|
this.autoTimer0();
|
|
},
|
|
selitem2(type) {
|
|
// console.log(type);
|
|
this.klselt = type;
|
|
this.btgetdata2();
|
|
this.autoTimer0();
|
|
},
|
|
selitem3(type) {
|
|
// console.log(type);
|
|
this.klselt = type;
|
|
this.btgetdata3();
|
|
this.autoTimer0();
|
|
},
|
|
|
|
// 透明背景柱状统计图--总服务人次趋势
|
|
home_bar() {
|
|
let that = this;
|
|
var chartDom = document.getElementById("homebar");
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
let xData = this.klqsXDatas.slice(-8,this.klqsXDatas.length);
|
|
var data = this.klqsDatas.slice(-8,this.klqsDatas.length);
|
|
let max=data[0];
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (data[i]>max) {
|
|
max = data[i];
|
|
}
|
|
}
|
|
let dataLenArr = [], dataBGArr = [];
|
|
data.map(item=>{
|
|
dataLenArr.push(1);// 获取和数据一样长度的底部图形数组；
|
|
dataBGArr.push(max);// 数组最大值做背景柱形
|
|
})
|
|
|
|
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: 30,
|
|
right: 0,
|
|
bottom: 10,
|
|
top: 20,
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
color: '#FFFFFF',
|
|
fontSize: 12,
|
|
interval: 0,
|
|
// show: false,
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#384267',
|
|
},
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
show: true,
|
|
},
|
|
data: xData,
|
|
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: data,
|
|
type: 'bar',
|
|
barMaxWidth: 'auto',
|
|
barWidth: 10,
|
|
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: data,
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '10',
|
|
symbolPosition: 'end',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '-50%'],
|
|
symbolSize: [10, 5],
|
|
zlevel: 2,
|
|
color: 'rgba(255,255,255,0.7)',
|
|
// 立体柱形的顶部图形
|
|
},
|
|
{
|
|
data: dataBGArr,
|
|
type: 'bar',
|
|
barGap: '-100%',
|
|
barMaxWidth: 'auto',
|
|
barWidth: 10,
|
|
zlevel: -1,
|
|
color: 'rgba(0, 75, 187, 0.2)',
|
|
// 立体柱形的背景图形
|
|
},
|
|
{
|
|
data: dataBGArr,
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '10',
|
|
symbolPosition: 'end',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '-50%'],
|
|
symbolSize: [10, 5],
|
|
zlevel: 2,
|
|
color: 'rgba(0, 75, 187, 0.5)',
|
|
// 立体柱形的背景图形顶部
|
|
},
|
|
],
|
|
tooltip: {
|
|
show: "true",
|
|
trigger: 'item',
|
|
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
|
|
padding: [8, 10], //内边距
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
|
|
|
|
},
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
function run(myChart) {
|
|
if(that.klselt == 'd'){
|
|
that.btgetdata3();
|
|
}else if(that.klselt == 'm'){
|
|
that.btgetdata2()
|
|
}else if(that.klselt == 'y'){
|
|
that.btgetdata()
|
|
}
|
|
let xData = that.klqsXDatas.slice(-8,that.klqsXDatas.length);
|
|
let data = that.klqsDatas.slice(-8,that.klqsDatas.length);
|
|
|
|
let max=data[0];
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (data[i]>max) {
|
|
max = data[i];
|
|
}
|
|
}
|
|
let dataLenArr = [], dataBGArr = [];
|
|
data.map(item=>{
|
|
dataLenArr.push(1);// 获取和数据一样长度的底部图形数组；
|
|
dataBGArr.push(max);// 数组最大值做背景柱形
|
|
})
|
|
myChart.setOption({
|
|
xAxis: {
|
|
data: xData
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
data: data
|
|
},
|
|
{
|
|
type: 'pictorialBar',
|
|
data: data
|
|
},
|
|
{
|
|
type: 'bar',
|
|
data: dataBGArr
|
|
},
|
|
{
|
|
type: 'pictorialBar',
|
|
data: dataBGArr
|
|
}
|
|
]
|
|
});
|
|
}
|
|
clearInterval(this.timer1)
|
|
that.timer1 = setInterval(function () {
|
|
myChart.clear();
|
|
option && myChart.setOption(option);
|
|
run(myChart);
|
|
}, 5000);
|
|
},
|
|
|
|
// 今日各场馆服务人次趋势
|
|
line_zone() {
|
|
let that = this;
|
|
var chartDom = document.getElementById("kl-line");
|
|
var option;
|
|
|
|
var xData = this.rsqsXData;
|
|
var gcolor = ['#ff9acc', '#6666FF', '#FF6600', '#02ff00', '#00ffff', '#fdff00']
|
|
|
|
var data = this.rsqsData_z;
|
|
|
|
var series = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
// console.log(gcolor[i])
|
|
|
|
series.push({
|
|
name: this.rsqsDataName[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: gcolor[i]
|
|
}, {
|
|
offset: 0.8,
|
|
color: '#fff',
|
|
}], false),
|
|
// shadowColor: 'rgba(255,255,255, 0.1)',
|
|
shadowBlur: 10,
|
|
opacity: 0.3,
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: gcolor[i],
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid' //'dotted'虚线 'solid'实线
|
|
},
|
|
borderColor: gcolor[i], //图形的描边颜色。支持的格式同 color
|
|
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: false,
|
|
},
|
|
opacity: 0.5,
|
|
}
|
|
},
|
|
data: data[i],
|
|
|
|
})
|
|
}
|
|
|
|
// setting option
|
|
option = {
|
|
// backgroundColor: "#141f56",
|
|
legend: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 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}<br />{a3}: {c3}<br />{a4}: {c4}<br />{a5}: {c5}',
|
|
backgroundColor: '#000', // 背景
|
|
padding: [8, 10], //内边距
|
|
extraCssText: 'box-shadow: 0 0 3px #fffff;', //添加阴影
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 10,
|
|
bottom: 20,
|
|
right: 0,
|
|
left: 50,
|
|
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,
|
|
}
|
|
function run(myChart){
|
|
// 获取新数据-处理
|
|
that.getGcgNumDatas();
|
|
setTimeout(() => {
|
|
var xData = that.rsqsXData;
|
|
var gcolor = ['#ff9acc', '#6666FF', '#FF6600', '#02ff00', '#00ffff', '#fdff00'];
|
|
|
|
var data = that.rsqsData_z;
|
|
|
|
var series = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
// console.log(gcolor[i])
|
|
|
|
series.push({
|
|
name: that.rsqsDataName[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: gcolor[i]
|
|
}, {
|
|
offset: 0.8,
|
|
color: '#fff',
|
|
}], false),
|
|
// shadowColor: 'rgba(255,255,255, 0.1)',
|
|
shadowBlur: 10,
|
|
opacity: 0.3,
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: gcolor[i],
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid' //'dotted'虚线 'solid'实线
|
|
},
|
|
borderColor: gcolor[i], //图形的描边颜色。支持的格式同 color
|
|
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: false,
|
|
},
|
|
opacity: 0.5,
|
|
}
|
|
},
|
|
data: data[i],
|
|
|
|
})
|
|
}
|
|
myChart.setOption({
|
|
xAxis: [{data: xData}],
|
|
series: series
|
|
});
|
|
}, 2000);
|
|
}
|
|
setTimeout(()=>{
|
|
var myChart = echarts.init(chartDom);
|
|
option && myChart.setOption(option);
|
|
setInterval(function () {
|
|
myChart.clear();
|
|
option && myChart.setOption(option);
|
|
run(myChart);
|
|
}, 3000);
|
|
}, 200)
|
|
},
|
|
|
|
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); // 数据跳转的速度控制
|
|
}
|
|
},
|
|
|
|
getStat() {
|
|
let that = this
|
|
homeApi.allGroupNum().then(res => {
|
|
// get allTimeData
|
|
const tmpdata = res.data.returnData
|
|
this.day_num = tmpdata.day.noRepeatInNum
|
|
this.week_num = tmpdata.week.noRepeatInNum
|
|
this.mon_num = tmpdata.month.noRepeatInNum
|
|
this.year_num = tmpdata.year.noRepeatInNum
|
|
});
|
|
},
|
|
|
|
getHomeBarData() {
|
|
let that = this;
|
|
that.proportionData = [];
|
|
that.groupNameData = [];
|
|
that.dataP = [];
|
|
homeApi.homeBarData().then(res => {
|
|
// /pass.passcc/allGroupTimeNum&granularity=daily
|
|
// get allTimeData
|
|
const tmpdata = res.data.data.allTimeData
|
|
const dkeys = res.data.data.dkeys
|
|
const groupsData = res.data.data.groupsData
|
|
|
|
let datas = []
|
|
Object.values(tmpdata).forEach((value) => {
|
|
datas.push(value.num);
|
|
});
|
|
|
|
that.klqsDatas = datas;
|
|
that.klqsXDatas = dkeys;
|
|
|
|
that.proportionData = [];that.groupNameData=[];that.dataP=[];
|
|
groupsData.forEach((item) => {
|
|
that.proportionData.push(item.proportion);
|
|
that.groupNameData.push(item.groupName);
|
|
that.dataP.push({
|
|
name:item.groupName,
|
|
value:item.proportion.split('%')[0]
|
|
})
|
|
})
|
|
|
|
});
|
|
},
|
|
|
|
// 查看拥挤并计算舒适度
|
|
getInfoDatas() {
|
|
let that = this
|
|
homeApi.allInfoDatas().then(res => {
|
|
// return;//Cannot read properties of undefined (reading 'returnData')
|
|
that.ssjgNumDatas = res.data.returnData
|
|
console.log(that.ssjgNumDatas, 'that.ssjgNumDatas')
|
|
that.ssjgNumDatas.forEach(item => {
|
|
let proportion = parseInt(item.proportion)
|
|
if (proportion >= 80 && proportion <= 90) {
|
|
this.$refs.proportionbox.addClass('rbrate2')
|
|
}
|
|
if (proportion > 90) {
|
|
this.$refs.proportionbox.addClass('rbrate3')
|
|
}
|
|
})
|
|
|
|
|
|
});
|
|
},
|
|
|
|
getGcgNumDatas() {
|
|
let that = this
|
|
that.rsqsDatas = [];
|
|
this.rsqsDataName = [];
|
|
that.rsqsData_z = [];
|
|
homeApi.allGcgNumDatas().then(res => {
|
|
// /pass.passcc/toDayGroupsEnterNum'
|
|
const tmpdata = res.data.data
|
|
tmpdata.forEach((item) => {
|
|
this.rsqsDataName.push(item.groupName);
|
|
that.rsqsDatas.push(item.list)
|
|
})
|
|
|
|
this.rsqsXData = res.data.data[0].list.dkeys;
|
|
this.rsqsDatas.forEach((item) => {
|
|
let rsqsData = []
|
|
Object.getOwnPropertyNames(item).forEach((value) => {
|
|
|
|
if(value=='dkeys'){
|
|
|
|
}
|
|
if(value=='dvalue'){
|
|
// console.log(item, value, '-----')
|
|
// rsqsData.push(item[value])
|
|
rsqsData = item[value];
|
|
}
|
|
});
|
|
that.rsqsData_z.push(rsqsData)
|
|
})
|
|
// console.log(this.rsqsData_z, 'rsqsData_z')
|
|
});
|
|
},
|
|
index_pie1(){
|
|
let that = this;
|
|
// var dataP = [
|
|
// {name: '体育场',value: 5,},
|
|
// {name: '体育馆',value: 20,},
|
|
// {name: '游泳场馆',value: 13,},
|
|
// {name: '图书馆',value: 12,},
|
|
// {name: '文化馆',value: 25,},
|
|
// {name: '博物馆',value: 12,},
|
|
// // {name: '',value: 13,}
|
|
// ];
|
|
var dataP = that.dataP;
|
|
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','#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,
|
|
},
|
|
],
|
|
}
|
|
|
|
function run(myChart){
|
|
// 获取新数据-处理
|
|
myChart.setOption({
|
|
series: [{
|
|
data: data1,
|
|
},
|
|
{
|
|
data: data1,
|
|
}
|
|
]
|
|
});
|
|
}
|
|
// 加延时器使图像绘制获取元素宽高最新的值
|
|
setTimeout(()=>{
|
|
var pieDom1 = document.getElementById("indexPie1");
|
|
var myChart = echarts.init(pieDom1);
|
|
option && myChart.setOption(option);
|
|
setInterval(function () {
|
|
myChart.clear();
|
|
option && myChart.setOption(option);
|
|
run(myChart);
|
|
}, 3000);
|
|
}, 200)
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.screen-box {
|
|
background: none !important;
|
|
}
|
|
</style>
|
|
<style>
|
|
.btgym {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('../assets/index/bg.png') !important;
|
|
background-size: 100% 100%;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
#index {
|
|
width: 100%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
.indexleftbox {
|
|
width: 7.48rem;
|
|
float: left;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: end;
|
|
margin-top: calc(-1.04rem + 0.16rem);
|
|
}
|
|
|
|
.indexleftbox .keliu {
|
|
background-image: url("../assets/index/left_t1_bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
width: 100%;
|
|
height: 7vh;
|
|
color: #FFF;
|
|
}
|
|
|
|
/* 客流趋势 */
|
|
.indexleftbox .kliu_title {
|
|
line-height: 0.58rem;
|
|
font-size: 0.31rem;
|
|
padding-left: 2rem;
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
.indexleftbox .kliu_st {
|
|
float: right;
|
|
line-height: 0.88rem;
|
|
font-size: 0.26rem;
|
|
padding-top: 0.18rem;
|
|
}
|
|
|
|
.indexleftbox .kliu_st span {
|
|
display: block;
|
|
background: url("../assets/index/sel_zone_bg.png") no-repeat 0 0;
|
|
background-position: 0 0;
|
|
background-size: 100%;
|
|
text-align: center;
|
|
width: 0.48rem;
|
|
height: 0.48rem;
|
|
line-height: 0.48rem;
|
|
float: left;
|
|
margin-left: 0.08rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.indexleftbox .kliu_st .spactive {
|
|
background-image: url("../assets/index/sel_zone_active_bg.png");
|
|
}
|
|
|
|
/* 统计图 */
|
|
.indexleftbox .tongjitu {
|
|
margin-top: 0.2rem;
|
|
width: 7.03rem;
|
|
height: 2.3rem;
|
|
}
|
|
|
|
/* 场馆流量预警 */
|
|
.indexleftbox .cgflow {
|
|
margin-top: 0.3rem;
|
|
background-image: url("../assets/index/left_t3_bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 center;
|
|
width: 7.03rem;
|
|
height: 3.53rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 场馆左侧 */
|
|
.indexleftbox .cgflow_leftbox {
|
|
width: 2.16rem;
|
|
}
|
|
|
|
.indexleftbox .cgflow_rightbox {
|
|
width: 2.16rem;
|
|
/* text-align: right; */
|
|
}
|
|
|
|
.indexleftbox .cgflow .cgfitem {
|
|
width: 100%;
|
|
height: 0.46rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* .indexleftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgtitle {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.indexleftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgval {
|
|
margin-right: 10px;
|
|
} */
|
|
|
|
.indexleftbox .cgflow .cgfitem span {
|
|
/* display: block;
|
|
margin-left: 12px;
|
|
float: left;
|
|
display: block; */
|
|
/* margin-right: 14px; */
|
|
/* display: block; */
|
|
|
|
}
|
|
|
|
.indexleftbox .cgflow .cgfitem .cgtitle {
|
|
color: #0096ff;
|
|
font-size: 14px;
|
|
/* flex: 1; */
|
|
width: 38%;
|
|
}
|
|
|
|
.indexleftbox .cgflow .cgfitem .cgval {
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
width: 38%;
|
|
}
|
|
|
|
.indexleftbox .cgflow .cgfitem .cgimg img {
|
|
width: 26px;
|
|
height: 26px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
/* 场馆左侧 */
|
|
.indexleftbox .cgflow .indexleftbox .cgflow_rightbox {
|
|
padding: 66px 0 0 12%;
|
|
float: right;
|
|
width: 30%;
|
|
margin-left: 4%;
|
|
}
|
|
#indexPie1{
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
/* 各场馆人流趋势 */
|
|
.indexleftbox .gcgqs {
|
|
/* float: left; */
|
|
width: 100%;
|
|
height: 30vh;
|
|
}
|
|
|
|
.indexleftbox .gcgqs .gcg_title {
|
|
background-image: url('../assets/index/left_t2_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 0.99rem;
|
|
font-size: 0.31rem;
|
|
line-height: 0.78rem;
|
|
padding-left: 2rem;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 中间的数据 */
|
|
.centerbox {
|
|
background-image: url('../assets/index/mid_bg.png');
|
|
background-position: 0 0;
|
|
background-size: 100% 100%;
|
|
width: 8.07rem;
|
|
height: 9.12rem;
|
|
float: left;
|
|
margin-left: 0.34rem;
|
|
padding: 2%;
|
|
margin-top: 0.53rem;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.centerbox .jgrs {
|
|
width: 1.8rem;
|
|
color: #fff;
|
|
position: absolute;
|
|
text-align: center;
|
|
}
|
|
.centerbox .jgrs1{
|
|
top: 1rem;
|
|
left: 1.03rem;
|
|
}
|
|
.centerbox .jgrs2{
|
|
top: 1rem;
|
|
left: 3.135rem;
|
|
}
|
|
.centerbox .jgrs3{
|
|
top: 1rem;
|
|
right: 1.03rem;
|
|
}
|
|
.centerbox .jgval {
|
|
font-size: 0.34rem;
|
|
display: block;
|
|
line-height: 0.28rem;
|
|
margin-bottom: 0.18rem;
|
|
}
|
|
|
|
.centerbox .jgdesc {
|
|
font-size: 0.2rem;
|
|
}
|
|
|
|
@keyframes tygpicmove {
|
|
0%{
|
|
transform: translateY(-10px);
|
|
opacity: 0.6;
|
|
}
|
|
25%{
|
|
transform: translateY(0px);
|
|
opacity: 1;
|
|
}
|
|
50%{
|
|
transform: translateY(10px);
|
|
opacity: 0.6;
|
|
}
|
|
75%{
|
|
transform: translateY(0px);
|
|
opacity: 1;
|
|
}
|
|
100%{
|
|
transform: translateY(-10px);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
.centerbox .tygpic {
|
|
clear: both;
|
|
width: 5.93rem;
|
|
height: 4.44rem;
|
|
text-align: center;
|
|
margin: 1rem auto 0px;
|
|
animation: tygpicmove 2s ease-out infinite;
|
|
}
|
|
|
|
.centerbox .tygpic img {
|
|
height: 4.5rem;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
.ndjgrs {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: white;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0.57rem;
|
|
left: 0;
|
|
}
|
|
|
|
.ndjgrs .nddesc {
|
|
font-size: 0.28rem;
|
|
display: block;
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
|
|
.ndjgrs .ndval {
|
|
display: block;
|
|
font-size: 0.5rem;
|
|
}
|
|
|
|
/* 右边 */
|
|
.rbox {
|
|
width: 7.34rem;
|
|
float: left;
|
|
margin-left: 0.34rem;
|
|
color: #fff;
|
|
margin-top: calc(-0.97rem + 0.16rem);
|
|
}
|
|
|
|
.rbox .rbox_title {
|
|
background-image: url('../assets/index/right_t1_bg.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
height: 0.97rem;
|
|
line-height: 0.76rem;
|
|
font-weight: 600;
|
|
font-size: 0.31rem;
|
|
text-align: right;
|
|
padding-right: 2.1rem;
|
|
color: #b5b7c5;
|
|
}
|
|
|
|
.rbox .rbox_con {
|
|
width: 100%;
|
|
margin-top: 0.36rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem {
|
|
background-image: url('../assets/index/rb_data_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 3rem;
|
|
width: 3.51rem;
|
|
margin-right: 0.08rem;
|
|
margin-bottom: 0.23rem;
|
|
padding-top: 0.2rem;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem span {
|
|
display: block;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem .rbcgname {
|
|
margin-top: 0.37rem;
|
|
color: #0096ff;
|
|
text-align: right;
|
|
padding-right: 0.28rem;
|
|
font-size: 0.21rem;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem .rbtitle {
|
|
text-align: left;
|
|
padding-left: 0.66rem;
|
|
padding-top: 0.08rem;
|
|
font-size: 0.24rem;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem .rbval {
|
|
font-size: 0.38rem;
|
|
font-weight: 600;
|
|
width: 60%;
|
|
height: 118px;
|
|
padding-left: 0.4rem;
|
|
line-height: 1.9rem;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem .rbrate {
|
|
width: 0.92rem;
|
|
/* float: left; */
|
|
height: 0.32rem;
|
|
text-align: right;
|
|
position: absolute;
|
|
bottom: 0.85rem;
|
|
right: 0.29rem;
|
|
/* color: #00D8FF; */
|
|
/* background-image: url(../assets/index/安静.png); */
|
|
/* background-size: 100% 100%; */
|
|
/* background-position: 100% 100%; */
|
|
/* background-repeat: no-repeat; */
|
|
font-size: 0.22rem;
|
|
}
|
|
.rbox .rbox_con .rbitem .rbrateBar{
|
|
/* width: 0.92rem; */
|
|
height: 0.3rem;
|
|
position: absolute;
|
|
bottom: 0.55rem;
|
|
right: 0.29rem;
|
|
z-index: 2;
|
|
}
|
|
.rbox .rbox_con .rbitem .rbrateBar span{
|
|
background-color: #45487a;
|
|
display:inline-block;
|
|
width: 0.15rem;
|
|
height: 0.3rem;
|
|
margin-left: 0.05rem;
|
|
}
|
|
.rbox .rbox_con .rbitem .rbrateBar span.active{
|
|
background-color: #0036ff;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem .rbrate2 {
|
|
background-image: url(../assets/index/舒适.png);
|
|
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem .rbrate3 {
|
|
background-image: url(../assets/index/拥挤.png);
|
|
|
|
}
|
|
|
|
/* 页面背景 */
|
|
/* .page_bg {
|
|
clear: both;
|
|
background-image: url("../assets/index/bg.jpg") !important;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('../assets/index/bg.jpg') !important;
|
|
background-size: 100% 100%;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
} */
|
|
|
|
|
|
.screen-box {
|
|
overflow: visible !important;
|
|
}
|
|
.screen-box .screen-wrapper{
|
|
/* // width: calc(24rem - 0.44rem) !important; */
|
|
height: 10.71rem !important;
|
|
overflow: visible !important;
|
|
margin: 0px 0.29rem 0px 0.15rem !important;
|
|
/* // margin: 0px auto !important; */
|
|
box-sizing: border-box !important;
|
|
/* // transform-origin: center top !important; */
|
|
transform: scale(1) !important;
|
|
}
|
|
#index{
|
|
/* // transform: scale(1.25); */
|
|
/* //浏览器缩小至1536时，匹配外盒子逻辑赋予的transform: scale(0.8, 0.8) */
|
|
transform-origin: 0 0;
|
|
/* // display: flex; */
|
|
/* // transform: scale(1.1); */
|
|
/* // width: 100%; */
|
|
/* // justify-content: space-between; */
|
|
}
|
|
</style>
|