|
|
@ -2,7 +2,7 @@ |
|
|
<v-scale-screen width="1920" height="1080"> |
|
|
<v-scale-screen width="1920" height="1080"> |
|
|
<div id="index"> |
|
|
<div id="index"> |
|
|
<!-- 左边 --> |
|
|
<!-- 左边 --> |
|
|
<div class="leftbox"> |
|
|
<div class="indexleftbox"> |
|
|
<!-- 客流 --> |
|
|
<!-- 客流 --> |
|
|
<div class="keliu"> |
|
|
<div class="keliu"> |
|
|
<span class="kliu_title">总服务人次趋势</span> |
|
|
<span class="kliu_title">总服务人次趋势</span> |
|
|
@ -39,6 +39,8 @@ |
|
|
<span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span> |
|
|
<span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 中间环形饼图 --> |
|
|
|
|
|
<div id="indexPie1"></div> |
|
|
<!-- 右边流量预警 --> |
|
|
<!-- 右边流量预警 --> |
|
|
<div class="cgflow_rightbox"> |
|
|
<div class="cgflow_rightbox"> |
|
|
<!-- 图书馆 --> |
|
|
<!-- 图书馆 --> |
|
|
@ -100,7 +102,7 @@ |
|
|
<!-- 各场馆实时人数 cg1 --> |
|
|
<!-- 各场馆实时人数 cg1 --> |
|
|
<!-- v-for="(item, index) in 6" :key="index" --> |
|
|
<!-- v-for="(item, index) in 6" :key="index" --> |
|
|
<div class="rbitem" v-for="item in ssjgNumDatas" :key="item.groupId"> |
|
|
<div class="rbitem" v-for="item in ssjgNumDatas" :key="item.groupId"> |
|
|
<span class="rbcgname">{{ item.groupName }}</span> |
|
|
<span class="rbcgname">{{ item.groupName||'\\' }}</span> |
|
|
<span class="rbtitle">当前人数</span> |
|
|
<span class="rbtitle">当前人数</span> |
|
|
<!-- <span class="rbval">4,738</span> --> |
|
|
<!-- <span class="rbval">4,738</span> --> |
|
|
<span class="rbval">{{ item.allEnter }}</span> |
|
|
<span class="rbval">{{ item.allEnter }}</span> |
|
|
@ -114,34 +116,6 @@ |
|
|
<span class="rbtitle">当前人数</span> |
|
|
<span class="rbtitle">当前人数</span> |
|
|
<span class="rbval">4,738</span> |
|
|
<span class="rbval">4,738</span> |
|
|
<span class="rbrate">50%</span> |
|
|
<span class="rbrate">50%</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="rbitem"> |
|
|
|
|
|
<span class="rbcgname">体育馆</span> |
|
|
|
|
|
<span class="rbtitle">当前人数</span> |
|
|
|
|
|
<span class="rbval">4,738</span> |
|
|
|
|
|
<span class="rbrate">80%</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="rbitem"> |
|
|
|
|
|
<span class="rbcgname">文化馆</span> |
|
|
|
|
|
<span class="rbtitle">当前人数</span> |
|
|
|
|
|
<span class="rbval">4,738</span> |
|
|
|
|
|
<span class="rbrate">25%</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="rbitem"> |
|
|
|
|
|
<span class="rbcgname">游泳场馆</span> |
|
|
|
|
|
<span class="rbtitle">当前人数</span> |
|
|
|
|
|
<span class="rbval">4,738</span> |
|
|
|
|
|
<span class="rbrate">90%</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="rbitem"> |
|
|
|
|
|
<span class="rbcgname">博物馆</span> |
|
|
|
|
|
<span class="rbtitle">当前人数</span> |
|
|
|
|
|
<span class="rbval">4,738</span> |
|
|
|
|
|
<span class="rbrate">75%</span> |
|
|
|
|
|
</div> --> |
|
|
</div> --> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
@ -172,9 +146,12 @@ export default { |
|
|
year_num: 0, |
|
|
year_num: 0, |
|
|
klqsXDatas: [], |
|
|
klqsXDatas: [], |
|
|
klqsDatas: [], |
|
|
klqsDatas: [], |
|
|
|
|
|
dataP: [],//左侧饼图 |
|
|
ssjgNumDatas: [], |
|
|
ssjgNumDatas: [], |
|
|
|
|
|
rsqsXData: [], |
|
|
rsqsDatas: [], |
|
|
rsqsDatas: [], |
|
|
rsqs_datas: {}, |
|
|
rsqs_datas: {}, |
|
|
|
|
|
rsqsDataName: [], |
|
|
rsqsData_z: [], |
|
|
rsqsData_z: [], |
|
|
proportionData: [], |
|
|
proportionData: [], |
|
|
proportionData_z: [], |
|
|
proportionData_z: [], |
|
|
@ -197,10 +174,12 @@ export default { |
|
|
this.getStat(); |
|
|
this.getStat(); |
|
|
this.getHomeBarData(); |
|
|
this.getHomeBarData(); |
|
|
this.getInfoDatas(); |
|
|
this.getInfoDatas(); |
|
|
this.getGcgNumDatas() |
|
|
this.getGcgNumDatas(); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
this.home_bar(); |
|
|
this.home_bar(); |
|
|
this.line_zone(); |
|
|
this.line_zone(); |
|
|
|
|
|
this.index_pie1(); |
|
|
}, 300) |
|
|
}, 300) |
|
|
|
|
|
|
|
|
// 首页线图 |
|
|
// 首页线图 |
|
|
@ -292,7 +271,7 @@ export default { |
|
|
this.btgetdata3() |
|
|
this.btgetdata3() |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 透明背景柱状统计图 |
|
|
// 透明背景柱状统计图--总服务人次趋势 |
|
|
home_bar() { |
|
|
home_bar() { |
|
|
let that = this; |
|
|
let that = this; |
|
|
var chartDom = document.getElementById("homebar"); |
|
|
var chartDom = document.getElementById("homebar"); |
|
|
@ -488,7 +467,7 @@ export default { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
option && myChart.setOption(option); |
|
|
function run() { |
|
|
function run(myChart) { |
|
|
that.getHomeBarData(); |
|
|
that.getHomeBarData(); |
|
|
console.log('重新绘制'); |
|
|
console.log('重新绘制'); |
|
|
that.klqsDatas = that.klqsDatas.sort(function(a,b){ |
|
|
that.klqsDatas = that.klqsDatas.sort(function(a,b){ |
|
|
@ -534,17 +513,18 @@ export default { |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
setInterval(function () { |
|
|
setInterval(function () { |
|
|
run(); |
|
|
myChart.clear(); |
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
|
|
run(myChart); |
|
|
}, 3000); |
|
|
}, 3000); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 今日各场馆进馆人数趋势 |
|
|
// 今日各场馆服务人次趋势 |
|
|
line_zone() { |
|
|
line_zone() { |
|
|
var chartDom = document.getElementById("kl-line"); |
|
|
var chartDom = document.getElementById("kl-line"); |
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
var option; |
|
|
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']; |
|
|
var xData = this.rsqsXData; |
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] |
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] |
|
|
var name = [] |
|
|
var name = [] |
|
|
// var data = [ |
|
|
// var data = [ |
|
|
@ -557,9 +537,9 @@ export default { |
|
|
var data = this.rsqsData_z |
|
|
var data = this.rsqsData_z |
|
|
|
|
|
|
|
|
var series = []; |
|
|
var series = []; |
|
|
for (var i = 0; i < 6; i++) { |
|
|
for (var i = 0; i < data.length; i++) { |
|
|
series.push({ |
|
|
series.push({ |
|
|
name: name[i], |
|
|
name: this.rsqsDataName[i], |
|
|
type: "line", |
|
|
type: "line", |
|
|
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] |
|
|
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] |
|
|
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' |
|
|
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' |
|
|
@ -705,8 +685,21 @@ export default { |
|
|
}, |
|
|
}, |
|
|
series: series, |
|
|
series: series, |
|
|
} |
|
|
} |
|
|
|
|
|
function run(myChart){ |
|
|
|
|
|
// 获取新数据-处理 |
|
|
|
|
|
myChart.setOption({ |
|
|
|
|
|
series: series |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
setTimeout(()=>{ |
|
|
|
|
|
var myChart = echarts.init(chartDom); |
|
|
option && myChart.setOption(option); |
|
|
option && myChart.setOption(option); |
|
|
|
|
|
setInterval(function () { |
|
|
|
|
|
myChart.clear(); |
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
|
|
run(myChart); |
|
|
|
|
|
}, 3000); |
|
|
|
|
|
}, 200) |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
addNumber(start, end, id) { |
|
|
addNumber(start, end, id) { |
|
|
@ -754,13 +747,19 @@ export default { |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
that.klqsDatas = datas |
|
|
that.klqsDatas = datas |
|
|
that.klqsXDatas = dkeys |
|
|
that.klqsXDatas = dkeys; |
|
|
|
|
|
|
|
|
// groupsData.forEach((item) => { |
|
|
that.proportionData = [];that.groupNameData=[];that.dataP=[]; |
|
|
// that.proportionData.push(item.proportion) |
|
|
groupsData.forEach((item) => { |
|
|
// that.groupNameData.push(item.groupName) |
|
|
that.proportionData.push(item.proportion) |
|
|
// }) |
|
|
that.groupNameData.push(item.groupName); |
|
|
|
|
|
that.dataP.push({ |
|
|
|
|
|
name:item.groupName, |
|
|
|
|
|
value:item.proportion.split('%')[0] |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
console.log(groupsData, 'groupsData', that.dataP); |
|
|
|
|
|
|
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
@ -769,10 +768,10 @@ export default { |
|
|
getInfoDatas() { |
|
|
getInfoDatas() { |
|
|
let that = this |
|
|
let that = this |
|
|
homeApi.allInfoDatas().then(res => { |
|
|
homeApi.allInfoDatas().then(res => { |
|
|
return;//Cannot read properties of undefined (reading 'returnData') |
|
|
// return;//Cannot read properties of undefined (reading 'returnData') |
|
|
that.ssjgNumDatas = res.data.returnData |
|
|
that.ssjgNumDatas = res.data.returnData |
|
|
|
|
|
console.log(that.ssjgNumDatas, 'that.ssjgNumDatas') |
|
|
ssjgNumDatas.forEach(item => { |
|
|
that.ssjgNumDatas.forEach(item => { |
|
|
let proportion = parseInt(item.proportion) |
|
|
let proportion = parseInt(item.proportion) |
|
|
if (proportion >= 80 && proportion <= 90) { |
|
|
if (proportion >= 80 && proportion <= 90) { |
|
|
this.$refs.proportionbox.addClass('rbrate2') |
|
|
this.$refs.proportionbox.addClass('rbrate2') |
|
|
@ -792,19 +791,174 @@ export default { |
|
|
homeApi.allGcgNumDatas().then(res => { |
|
|
homeApi.allGcgNumDatas().then(res => { |
|
|
const tmpdata = res.data.data |
|
|
const tmpdata = res.data.data |
|
|
tmpdata.forEach((item) => { |
|
|
tmpdata.forEach((item) => { |
|
|
|
|
|
this.rsqsDataName.push(item.groupName); |
|
|
that.rsqsDatas.push(item.list) |
|
|
that.rsqsDatas.push(item.list) |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.rsqsXData = res.data.data[0].list.dkeys; |
|
|
this.rsqsDatas.forEach((item) => { |
|
|
this.rsqsDatas.forEach((item) => { |
|
|
let rsqsData = [] |
|
|
let rsqsData = [] |
|
|
Object.values(item).forEach((value) => { |
|
|
Object.getOwnPropertyNames(item).forEach((value) => { |
|
|
rsqsData.push(value) |
|
|
|
|
|
|
|
|
if(value=='dkeys'){ |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
if(value=='dvalue'){ |
|
|
|
|
|
// console.log(item, value, '-----') |
|
|
|
|
|
// rsqsData.push(item[value]) |
|
|
|
|
|
rsqsData = item[value]; |
|
|
|
|
|
} |
|
|
}); |
|
|
}); |
|
|
that.rsqsData_z.push(rsqsData) |
|
|
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> |
|
|
</script> |
|
|
@ -828,7 +982,7 @@ export default { |
|
|
float: left; |
|
|
float: left; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox { |
|
|
.indexleftbox { |
|
|
width: 7.48rem; |
|
|
width: 7.48rem; |
|
|
float: left; |
|
|
float: left; |
|
|
display: flex; |
|
|
display: flex; |
|
|
@ -837,33 +991,33 @@ export default { |
|
|
margin-top: calc(-1.04rem + 0.16rem); |
|
|
margin-top: calc(-1.04rem + 0.16rem); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .keliu { |
|
|
.indexleftbox .keliu { |
|
|
background-image: url("../assets/index/left_t1_bg.png"); |
|
|
background-image: url("../assets/index/left_t1_bg.png"); |
|
|
background-size: 100% 100%; |
|
|
background-size: 100% 100%; |
|
|
background-repeat: no-repeat; |
|
|
background-repeat: no-repeat; |
|
|
background-position: 0 0; |
|
|
background-position: 0 0; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 7vh; |
|
|
height: 7vh; |
|
|
color: #b5b7c5; |
|
|
color: #FFF; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 客流趋势 */ |
|
|
/* 客流趋势 */ |
|
|
.leftbox .kliu_title { |
|
|
.indexleftbox .kliu_title { |
|
|
line-height: 0.88rem; |
|
|
line-height: 0.58rem; |
|
|
font-size: 20px; |
|
|
font-size: 0.31rem; |
|
|
padding-left: 2rem; |
|
|
padding-left: 2rem; |
|
|
display: block; |
|
|
display: block; |
|
|
float: left; |
|
|
float: left; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .kliu_st { |
|
|
.indexleftbox .kliu_st { |
|
|
float: right; |
|
|
float: right; |
|
|
line-height: 0.88rem; |
|
|
line-height: 0.88rem; |
|
|
font-size: 0.26rem; |
|
|
font-size: 0.26rem; |
|
|
padding-top: 0.18rem; |
|
|
padding-top: 0.18rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .kliu_st span { |
|
|
.indexleftbox .kliu_st span { |
|
|
display: block; |
|
|
display: block; |
|
|
background: url("../assets/index/sel_zone_bg.png") no-repeat 0 0; |
|
|
background: url("../assets/index/sel_zone_bg.png") no-repeat 0 0; |
|
|
background-position: 0 0; |
|
|
background-position: 0 0; |
|
|
@ -877,19 +1031,19 @@ export default { |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .kliu_st .spactive { |
|
|
.indexleftbox .kliu_st .spactive { |
|
|
background-image: url("../assets/index/sel_zone_active_bg.png"); |
|
|
background-image: url("../assets/index/sel_zone_active_bg.png"); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 统计图 */ |
|
|
/* 统计图 */ |
|
|
.leftbox .tongjitu { |
|
|
.indexleftbox .tongjitu { |
|
|
margin-top: 0.2rem; |
|
|
margin-top: 0.2rem; |
|
|
width: 7.03rem; |
|
|
width: 7.03rem; |
|
|
height: 2.3rem; |
|
|
height: 2.3rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 场馆流量预警 */ |
|
|
/* 场馆流量预警 */ |
|
|
.leftbox .cgflow { |
|
|
.indexleftbox .cgflow { |
|
|
margin-top: 0.3rem; |
|
|
margin-top: 0.3rem; |
|
|
background-image: url("../assets/index/left_t3_bg.png"); |
|
|
background-image: url("../assets/index/left_t3_bg.png"); |
|
|
background-size: 100% 100%; |
|
|
background-size: 100% 100%; |
|
|
@ -903,34 +1057,31 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 场馆左侧 */ |
|
|
/* 场馆左侧 */ |
|
|
.leftbox .cgflow_leftbox { |
|
|
.indexleftbox .cgflow_leftbox { |
|
|
/* padding:66px 0 0 6%; |
|
|
width: 2rem; |
|
|
float: left; */ |
|
|
|
|
|
/* width: 30%; */ |
|
|
|
|
|
margin-left: 10px; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .cgflow_rightbox { |
|
|
.indexleftbox .cgflow_rightbox { |
|
|
/* width: 30%; */ |
|
|
width: 2rem; |
|
|
text-align: right; |
|
|
text-align: right; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .cgflow .cgfitem { |
|
|
.indexleftbox .cgflow .cgfitem { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 0.46rem; |
|
|
height: 0.46rem; |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgtitle { |
|
|
.indexleftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgtitle { |
|
|
margin-right: 5px; |
|
|
margin-right: 5px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgval { |
|
|
.indexleftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgval { |
|
|
margin-right: 10px; |
|
|
margin-right: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .cgflow .cgfitem span { |
|
|
.indexleftbox .cgflow .cgfitem span { |
|
|
/* display: block; |
|
|
/* display: block; |
|
|
margin-left: 12px; |
|
|
margin-left: 12px; |
|
|
float: left; |
|
|
float: left; |
|
|
@ -940,18 +1091,18 @@ export default { |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .cgflow .cgfitem .cgtitle { |
|
|
.indexleftbox .cgflow .cgfitem .cgtitle { |
|
|
color: #0096ff; |
|
|
color: #0096ff; |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .cgflow .cgfitem .cgval { |
|
|
.indexleftbox .cgflow .cgfitem .cgval { |
|
|
color: white; |
|
|
color: white; |
|
|
font-weight: 700; |
|
|
font-weight: 700; |
|
|
font-size: 18px; |
|
|
font-size: 18px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .cgflow .cgfitem .cgimg img { |
|
|
.indexleftbox .cgflow .cgfitem .cgimg img { |
|
|
width: 26px; |
|
|
width: 26px; |
|
|
height: 26px; |
|
|
height: 26px; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
@ -960,27 +1111,30 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 场馆左侧 */ |
|
|
/* 场馆左侧 */ |
|
|
.leftbox .cgflow .leftbox .cgflow_rightbox { |
|
|
.indexleftbox .cgflow .indexleftbox .cgflow_rightbox { |
|
|
padding: 66px 0 0 12%; |
|
|
padding: 66px 0 0 12%; |
|
|
float: right; |
|
|
float: right; |
|
|
width: 30%; |
|
|
width: 30%; |
|
|
margin-left: 4%; |
|
|
margin-left: 4%; |
|
|
} |
|
|
} |
|
|
|
|
|
#indexPie1{ |
|
|
|
|
|
width: 2.32rem; |
|
|
|
|
|
height: 2.32rem; |
|
|
|
|
|
} |
|
|
/* 各场馆人流趋势 */ |
|
|
/* 各场馆人流趋势 */ |
|
|
.leftbox .gcgqs { |
|
|
.indexleftbox .gcgqs { |
|
|
// float: left; |
|
|
// float: left; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 30vh; |
|
|
height: 30vh; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.leftbox .gcgqs .gcg_title { |
|
|
.indexleftbox .gcgqs .gcg_title { |
|
|
background-image: url('../assets/index/left_t2_bg.png'); |
|
|
background-image: url('../assets/index/left_t2_bg.png'); |
|
|
background-repeat: no-repeat; |
|
|
background-repeat: no-repeat; |
|
|
background-size: 100% 100%; |
|
|
background-size: 100% 100%; |
|
|
height: 0.99rem; |
|
|
height: 0.99rem; |
|
|
font-size: 20px; |
|
|
font-size: 0.31rem; |
|
|
line-height: 0.88rem; |
|
|
line-height: 0.78rem; |
|
|
padding-left: 2rem; |
|
|
padding-left: 2rem; |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
} |
|
|
} |
|
|
@ -1019,14 +1173,14 @@ export default { |
|
|
right: 1.03rem; |
|
|
right: 1.03rem; |
|
|
} |
|
|
} |
|
|
.centerbox .jgval { |
|
|
.centerbox .jgval { |
|
|
font-size: 0.3rem; |
|
|
font-size: 0.34rem; |
|
|
display: block; |
|
|
display: block; |
|
|
line-height: 0.28rem; |
|
|
line-height: 0.28rem; |
|
|
margin-bottom: 0.18rem; |
|
|
margin-bottom: 0.18rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.centerbox .jgdesc { |
|
|
.centerbox .jgdesc { |
|
|
font-size: 0.18rem; |
|
|
font-size: 0.2rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes tygpicmove { |
|
|
@keyframes tygpicmove { |
|
|
@ -1100,9 +1254,9 @@ export default { |
|
|
background-size: 100%; |
|
|
background-size: 100%; |
|
|
background-repeat: no-repeat; |
|
|
background-repeat: no-repeat; |
|
|
height: 0.97rem; |
|
|
height: 0.97rem; |
|
|
line-height: 0.86rem; |
|
|
line-height: 0.76rem; |
|
|
font-weight: 600; |
|
|
font-weight: 600; |
|
|
font-size: 20px; |
|
|
font-size: 0.31rem; |
|
|
text-align: right; |
|
|
text-align: right; |
|
|
padding-right: 2.1rem; |
|
|
padding-right: 2.1rem; |
|
|
color: #b5b7c5; |
|
|
color: #b5b7c5; |
|
|
@ -1110,20 +1264,22 @@ export default { |
|
|
|
|
|
|
|
|
.rbox .rbox_con { |
|
|
.rbox .rbox_con { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
margin-top: 12px; |
|
|
margin-top: 0.36rem; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-wrap: wrap; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.rbox .rbox_con .rbitem { |
|
|
.rbox .rbox_con .rbitem { |
|
|
background-image: url('../assets/index/rb_data_bg.png'); |
|
|
background-image: url('../assets/index/rb_data_bg.png'); |
|
|
background-repeat: no-repeat; |
|
|
background-repeat: no-repeat; |
|
|
background-size: 100% 100%; |
|
|
background-size: 100% 100%; |
|
|
height: 2.4rem; |
|
|
height: 3rem; |
|
|
width: 46%; |
|
|
width: 3.51rem; |
|
|
margin-left: 0.28rem; |
|
|
margin-right: 0.08rem; |
|
|
float: left; |
|
|
margin-bottom: 0.23rem; |
|
|
margin-top: 0.46rem; |
|
|
|
|
|
padding-top: 0.2rem; |
|
|
padding-top: 0.2rem; |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
box-sizing: border-box; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.rbox .rbox_con .rbitem span { |
|
|
.rbox .rbox_con .rbitem span { |
|
|
@ -1131,44 +1287,44 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.rbox .rbox_con .rbitem .rbcgname { |
|
|
.rbox .rbox_con .rbitem .rbcgname { |
|
|
margin-top: 0.28rem; |
|
|
margin-top: 0.37rem; |
|
|
color: #0096ff; |
|
|
color: #0096ff; |
|
|
text-align: right; |
|
|
text-align: right; |
|
|
padding-right: 0.28rem; |
|
|
padding-right: 0.28rem; |
|
|
|
|
|
font-size: 0.21rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.rbox .rbox_con .rbitem .rbtitle { |
|
|
.rbox .rbox_con .rbitem .rbtitle { |
|
|
text-align: left; |
|
|
text-align: left; |
|
|
padding-left: 0.66rem; |
|
|
padding-left: 0.66rem; |
|
|
padding-top: 0.17rem; |
|
|
padding-top: 0.1rem; |
|
|
|
|
|
font-size: 0.24rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.rbox .rbox_con .rbitem .rbval { |
|
|
.rbox .rbox_con .rbitem .rbval { |
|
|
font-size: 25px; |
|
|
font-size: 0.38rem; |
|
|
font-weight: 600; |
|
|
font-weight: 600; |
|
|
width: 60%; |
|
|
width: 60%; |
|
|
height: 118px; |
|
|
height: 118px; |
|
|
text-align: center; |
|
|
padding-left: 0.4rem; |
|
|
/* line-height: 118px; */ |
|
|
line-height: 1.9rem; |
|
|
line-height: 160px; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.rbox .rbox_con .rbitem .rbrate { |
|
|
.rbox .rbox_con .rbitem .rbrate { |
|
|
width: 32%; |
|
|
width: 0.92rem; |
|
|
/* float: left; */ |
|
|
/* float: left; */ |
|
|
height: 82px; |
|
|
height: 0.92rem; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
line-height: 82px; |
|
|
line-height: 0.9rem; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
bottom: 8px; |
|
|
bottom: 0.25rem; |
|
|
right: 15px; |
|
|
right: 0.29rem; |
|
|
color: #00D8FF; |
|
|
color: #00D8FF; |
|
|
background-image: url(../assets/index/安静.png); |
|
|
background-image: url(../assets/index/安静.png); |
|
|
background-size: 100% 100%; |
|
|
background-size: 100% 100%; |
|
|
background-position: 100% 100%; |
|
|
background-position: 100% 100%; |
|
|
background-repeat: no-repeat; |
|
|
background-repeat: no-repeat; |
|
|
|
|
|
font-size: 0.19rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.rbox .rbox_con .rbitem .rbrate2 { |
|
|
.rbox .rbox_con .rbitem .rbrate2 { |
|
|
@ -1204,6 +1360,7 @@ export default { |
|
|
// margin: 0px 0.29rem 0px 0.15rem !important; |
|
|
// margin: 0px 0.29rem 0px 0.15rem !important; |
|
|
margin: 0px !important; |
|
|
margin: 0px !important; |
|
|
box-sizing: border-box !important; |
|
|
box-sizing: border-box !important; |
|
|
|
|
|
transform-origin: center top !important; |
|
|
} |
|
|
} |
|
|
#index{ |
|
|
#index{ |
|
|
// transform: scale(1.25); |
|
|
// transform: scale(1.25); |
|
|
|
