<template>
|
<!-- <div>-->
|
<div class="body" style=" padding: 30px 10px 0 20px;background-color: #eaecef;" :style="{height:mainHeight+'px'}">
|
<div style="">
|
<div class="title"><i class="el-icon-s-fold" style="margin-right: 5px" />实时数据</div>
|
<div class="top">
|
<div class="top_card">
|
<div class="top_card_title">登录用户</div>
|
<div class="top_card_content">
|
<div class="images1 images" />
|
<div class="top_card_content_flex">
|
<div class="content" style="width: 84%">
|
<div class="content_title1">今日登录</div>
|
<div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">15/
|
<countTo :start-val="0" :end-val="40" :duration="3000" />
|
</div>
|
</div>
|
<div id="barTop01" class="barTop" style="width: 100%;" />
|
<div class="content" style="width: 84%">
|
<div class="content_title1">昨日登录</div>
|
<div class="content_end1">18/
|
<countTo :start-val="0" :end-val="40" :duration="3000" />
|
</div>
|
</div>
|
<div id="barTop02" class="barTop" style="width: 92%;" />
|
</div>
|
</div>
|
</div>
|
<div class="top_card">
|
<div class="top_card_title">活跃用户</div>
|
<div class="top_card_content">
|
<div class="images2 images" />
|
<div class="top_card_content_flex">
|
<div class="content" style="width: 84%">
|
<div class="content_title1">今日活跃</div>
|
<div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">15/
|
<countTo :start-val="0" :end-val="40" :duration="3000" />
|
</div>
|
</div>
|
<div id="barTop03" class="barTop" style="width: 100%;" />
|
<div class="content" style="width: 84%">
|
<div class="content_title1">昨日活跃</div>
|
<div class="content_end1">18/
|
<countTo :start-val="0" :end-val="40" :duration="3000" />
|
</div>
|
</div>
|
<div id="barTop04" class="barTop" style="width: 92%;" />
|
</div>
|
</div>
|
</div>
|
<div class="top_card">
|
<div class="top_card_title">Web活跃</div>
|
<div class="top_card_content">
|
<div class="images3 images" />
|
<div class="top_card_content_flex">
|
<div class="content" style="width: 84%">
|
<div class="content_title1">今日活跃</div>
|
<div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">15/
|
<countTo :start-val="0" :end-val="40" :duration="3000" />
|
</div>
|
</div>
|
<div id="barTop05" class="barTop" style="width:100%;" />
|
<div class="content" style="width: 84%">
|
<div class="content_title1">昨日活跃</div>
|
<div class="content_end1">18/
|
<countTo :start-val="0" :end-val="40" :duration="3000" />
|
</div>
|
</div>
|
<div id="barTop06" class="barTop" style="width: 92%;" />
|
</div>
|
</div>
|
</div>
|
<div class="top_card">
|
<div class="top_card_title">APP活跃</div>
|
<div class="top_card_content">
|
<div class="images4 images" />
|
<div class="top_card_content_flex">
|
<div class="content" style="width: 84%">
|
<div class="content_title1">今日活跃</div>
|
<div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/
|
<countTo :start-val="0" :end-val="40" :duration="3000" />
|
</div>
|
</div>
|
<div id="barTop07" class="barTop" style="width: 92%;" />
|
<div class="content" style="width: 84%">
|
<div class="content_title1">昨日活跃</div>
|
<div class="content_end1">0/
|
<countTo :start-val="0" :end-val="40" :duration="3000" />
|
</div>
|
</div>
|
<div id="barTop08" class="barTop" style="width: 92%;" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="center">
|
<div class="title" style="margin-top: 20px"><i class="el-icon-s-fold" style="margin-right: 5px" />用户概况</div>
|
<div class="center_content">
|
<div class="content" :style="{height: isIpad?'300px':'400px'}">
|
<div class="content_title">活跃时段</div>
|
<div>
|
<div
|
id="line01"
|
style="width: 100%;"
|
:style="{height:isIpad?'200px':'300px'}"
|
/>
|
</div>
|
</div>
|
<div class="content" :style="{height: isIpad?'300px':'400px'}">
|
<div class="content_title">Top用户</div>
|
<div
|
id="bar01"
|
style="width: 100%;"
|
:style="{height:isIpad?'200px':'300px'}"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- </div>-->
|
</template>
|
|
<script>
|
import { bar01, barTop, line01, loadEcharts } from '@/utils/myEcharts'
|
import countTo from 'vue-count-to'
|
|
export default {
|
name: 'Index',
|
components: { countTo },
|
data() {
|
return {
|
isIpad: false,
|
mainHeight: 0,
|
tableHeight: 0,
|
barTopColor01: ['42,197,137', '187,236,218'],
|
barTopColor02: ['248,216,76', '255,250,188'],
|
barTopColor03: ['42,197,137', '187,236,218'],
|
barTopColor04: ['232,103,103', '253,240,240']
|
}
|
},
|
activated() { window.addEventListener('resize', this.getHeight) this.getHeight() }, created() {
|
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
setTimeout(() => {
|
this.handleEcharts()
|
}, 10)
|
},
|
methods: {
|
// 获取页面高度
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight - 120
|
// this.mainHeight = window.innerHeight - 200
|
// this.tableHeight = this.mainHeight - 100
|
|
// this.isIpad = this.mainHeight <= 768
|
this.isIpad = window.innerHeight < 769
|
})
|
},
|
handleEcharts() {
|
this.getTopData()
|
this.getBar01()
|
this.getLine01()
|
},
|
getTopData() {
|
loadEcharts('barTop01', barTop(15, this.barTopColor01))
|
loadEcharts('barTop02', barTop(18, this.barTopColor01))
|
loadEcharts('barTop03', barTop(15, this.barTopColor02))
|
loadEcharts('barTop04', barTop(18, this.barTopColor02))
|
loadEcharts('barTop05', barTop(15, this.barTopColor03))
|
loadEcharts('barTop06', barTop(18, this.barTopColor03))
|
loadEcharts('barTop07', barTop(0, this.barTopColor04))
|
loadEcharts('barTop08', barTop(0, this.barTopColor04))
|
},
|
async getBar01() {
|
// const res=await xxx()
|
let data = [
|
{ key: '杨发法', value: 494 },
|
{ key: '楼先生', value: 566 },
|
{ key: '徐天然', value: 481 },
|
{ key: '蓝光秀', value: 462 },
|
{ key: '张旭', value: 333 },
|
{ key: '小宋', value: 354 },
|
{ key: '侯先友', value: 275 },
|
{ key: '刘金贵', value: 259 },
|
{ key: '刘水娇', value: 267 },
|
{ key: '刘凤妹', value: 288 }
|
]
|
data = data.sort((a, b) => b.value - a.value)
|
loadEcharts('bar01', bar01(data))
|
},
|
async getLine01() {
|
// if (this.isIpad) {
|
// document.getElementById('line01').style.height = '200px'
|
// } else {
|
// document.getElementById('line01').style.height = '300px'
|
// }
|
// console.log(document.getElementById('line01'))
|
const data2 = [
|
{ key: '2', value: 0 },
|
{ key: '4', value: 0 },
|
{ key: '6', value: 0 },
|
{ key: '8', value: 8 },
|
{ key: '10', value: 10 },
|
{ key: '12', value: 10 },
|
{ key: '14', value: 6 },
|
{ key: '16', value: 8 },
|
{ key: '18', value: 3 },
|
{ key: '20', value: 2 },
|
{ key: '22', value: 1 },
|
{ key: '24', value: 0 }
|
]
|
loadEcharts('line01', line01(data2))
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.title {
|
margin-left: 1%;
|
font-size: 18px;
|
font-weight: 400;
|
}
|
|
.top {
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-around;
|
|
.top_card {
|
background-color: #fff;
|
width: 24%;
|
height: 200px;
|
border-radius: 5px;
|
|
.top_card_title {
|
margin: 20px 0 0 20px;
|
}
|
|
.top_card_content {
|
display: flex;
|
|
.images {
|
width: 69px;
|
height: 69px;
|
margin: 30px calc((10% - 20px));
|
}
|
|
.images1 {
|
background: url("../../assets/images/msg_app.png") no-repeat;
|
}
|
|
.images2 {
|
background: url("../../assets/images/msg_huoyue.png") no-repeat;
|
}
|
|
.images3 {
|
background: url("../../assets/images/msg_web.png") no-repeat;
|
}
|
|
.images4 {
|
background: url("../../assets/images/msg_zhuceyonghu.png") no-repeat;
|
}
|
|
.content {
|
display: flex;
|
justify-content: space-between;
|
width: 65%;
|
height: 18px
|
|
}
|
}
|
}
|
|
.top_card:hover{
|
transform: scale(1.02);
|
}
|
}
|
|
.center {
|
//margin-top: 10px;
|
//display: flex;
|
//justify-content: space-around;
|
.center_content {
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-around;
|
|
.content {
|
width: 49%;
|
//height: 400px;
|
|
background-color: #fff;
|
border-radius: 5px;
|
|
.content_title {
|
margin: 20px;
|
}
|
}
|
|
.content:hover{
|
transform: scale(1.01);
|
}
|
}
|
}
|
|
.top_card_content_flex {
|
display: flex;
|
flex-direction: column;
|
width: 70%;
|
}
|
|
.barTop {
|
width: 85%;
|
height: 40px;
|
margin: 10px 0 0 0;
|
}
|
</style>
|
