280 lines
6.9 KiB
Plaintext
280 lines
6.9 KiB
Plaintext
<template>
|
|
<div class="dashboard">
|
|
<div class="dashboard-header">
|
|
<h1>
|
|
<a href="#" @click="handleTitleClick">GRR Real-Time IRC Information</a>
|
|
</h1>
|
|
|
|
<div>
|
|
<span>{{ currentTime }}</span>
|
|
<el-button v-if="!isFullscreen" type="text" size="small" style="margin-left:10px" @click="loginOut">Sign Out</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-main">
|
|
<div class="left fl">
|
|
<div class="item box">
|
|
<workload-stats :area="area" />
|
|
</div>
|
|
<div class="item-center box">
|
|
<workload-of-months :area="area" />
|
|
</div>
|
|
<div class="item box">
|
|
<workload-of-reviewers :area="area" />
|
|
</div>
|
|
</div>
|
|
<div ref="mapContent" class="center fl">
|
|
<div ref="map" class="top box">
|
|
<distribution-map v-if="mapWidth" :area="area" :height="mapHeight" :width="mapWidth" />
|
|
</div>
|
|
<div ref="workloadList" class="bottom box" style="background:rgba(0, 35, 120, 0.36)">
|
|
|
|
<latest-reads v-if="bottomHeight" :height="bottomHeight" />
|
|
|
|
</div>
|
|
</div>
|
|
<div class="right fl">
|
|
<div class="item box">
|
|
|
|
<reviewers-stats :area="area" />
|
|
|
|
</div>
|
|
<div class="item-center box">
|
|
|
|
<enrollments-per-quarter :area="area" />
|
|
|
|
</div>
|
|
<div class="item box">
|
|
|
|
<enrollments-of-reviewers :area="area" />
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import screenfull from 'screenfull'
|
|
import WorkloadStats from './components/workload-stats'
|
|
import WorkloadOfMonths from './components/workload-of-months'
|
|
import WorkloadOfReviewers from './components/workload-of-reviewers'
|
|
import DistributionMap from './components/distribution-map'
|
|
import LatestReads from './components/latest-reads'
|
|
import ReviewersStats from './components/reviewers-stats'
|
|
import EnrollmentsPerQuarter from './components/enrollments-per-quarter'
|
|
import EnrollmentsOfReviewers from './components/enrollments-of-reviewers'
|
|
import moment from 'moment'
|
|
export default {
|
|
name: 'BigData',
|
|
components: {
|
|
WorkloadStats,
|
|
WorkloadOfMonths,
|
|
WorkloadOfReviewers,
|
|
DistributionMap,
|
|
LatestReads,
|
|
ReviewersStats,
|
|
EnrollmentsPerQuarter,
|
|
EnrollmentsOfReviewers
|
|
},
|
|
data() {
|
|
return {
|
|
area: '',
|
|
currentTime: '',
|
|
timer: '',
|
|
bottomHeight: '',
|
|
mapHeight: '',
|
|
mapWidth: '',
|
|
isFullscreen: false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.setHeight()
|
|
this.timer = setInterval(this.getCurrentTime, 1000)
|
|
const that = this
|
|
window.onresize = function() {
|
|
that.mapWidth = ''
|
|
that.bottomHeight = ''
|
|
that.setHeight()
|
|
}
|
|
},
|
|
destroyed() {
|
|
window.onresize = null
|
|
clearInterval(this.timer)
|
|
},
|
|
methods: {
|
|
setHeight() {
|
|
this.mapHeight = this.$refs['map'].clientHeight + 'px'
|
|
this.mapWidth = this.$refs['map'].clientWidth + 'px'
|
|
this.area = this.$refs['mapContent'].clientHeight * this.$refs['mapContent'].clientWidth + 'px'
|
|
this.bottomHeight = this.$refs['workloadList'].clientHeight + 'px'
|
|
},
|
|
getCurrentTime() {
|
|
this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
|
|
},
|
|
handleTitleClick() {
|
|
if (!screenfull.enabled) {
|
|
this.$message({
|
|
message: 'Your browser can not work',
|
|
type: 'warning'
|
|
})
|
|
return false
|
|
}
|
|
screenfull.toggle()
|
|
this.isFullscreen = !screenfull.isFullscreen
|
|
},
|
|
loginOut() {
|
|
this.$confirm('Sure to sign out', {
|
|
type: 'warning',
|
|
distinguishCancelAndClose: true,
|
|
confirmButtonText: 'Ok',
|
|
cancelButtonText: 'Cancel'
|
|
})
|
|
.then(() => {
|
|
this.$store.dispatch('user/logout').then(res => {
|
|
this.$router.push(`/login`)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.dashboard {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000d4a url(../../assets/bg.jpg) center top;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
box-sizing: border-box;
|
|
word-wrap: break-word !important;
|
|
word-break: keep-all;
|
|
overflow: hidden;
|
|
}
|
|
.dashboard a {
|
|
color: #fff;
|
|
}
|
|
.dashboard-header {
|
|
width: 100%;
|
|
height: 5rem;
|
|
background: url(../../assets/head_bg.png) no-repeat center center;
|
|
background-color: rgba(0, 126, 255, 0.2);
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
.dashboard-header h1 {
|
|
margin: 0;
|
|
color: #fff;
|
|
text-align: center;
|
|
/* font-size: 24px; */
|
|
font-size: 2rem;
|
|
line-height: 4rem;
|
|
}
|
|
.dashboard-header div {
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 3%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: rgba(255, 255, 255, 0.7);
|
|
/* font-size: 12px; */
|
|
font-size: .8rem;
|
|
}
|
|
.dashboard-main {
|
|
position: absolute;
|
|
top: 5rem;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
/* height: 100%;
|
|
height: calc(100%-5rem);
|
|
height: -moz-calc(100% - 5rem);
|
|
height: -webkit-calc(100% - 5rem); */
|
|
padding: 0 10px 10px 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
.dashboard-main .left {
|
|
width: 24%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.dashboard-main .center {
|
|
width: 50%;
|
|
height: 100%;
|
|
margin: 0px 1%;
|
|
box-sizing: border-box;
|
|
}
|
|
.dashboard-main .right {
|
|
width: 24%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.dashboard-main .item {
|
|
width: 100%;
|
|
height: 33%;
|
|
box-sizing: border-box;
|
|
}
|
|
.dashboard-main .item-center {
|
|
width: 100%;
|
|
height: calc(34%-20px);
|
|
height: -moz-calc(34% - 20px);
|
|
height: -webkit-calc(34% - 20px);
|
|
margin: 10px 0px;
|
|
box-sizing: border-box;
|
|
}
|
|
.dashboard-main .box {
|
|
position: relative;
|
|
border: 1px solid rgba(25, 186, 139, 0.17);
|
|
/* background:rgba(0, 35, 120, 0.36); */
|
|
background: rgba(255, 255, 255, 0.04) url(../../assets/line.png);
|
|
background-size: 100% auto;
|
|
z-index: 10;
|
|
transition: 0.3s;
|
|
}
|
|
.dashboard-main .box:before {
|
|
border-left: 0.03rem solid #0258f0;
|
|
border-top: 0.03rem solid #0258f0;
|
|
left: -1px;
|
|
top: -1px;
|
|
}
|
|
|
|
.dashboard-main .box:after,
|
|
.dashboard-main .box:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.dashboard-main .box:after {
|
|
border-right: 0.03rem solid #0258f0;
|
|
border-bottom: 0.03rem solid #0258f0;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
}
|
|
/* .dashboard-main .box:focus,
|
|
.dashboard-main .box:hover {
|
|
box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.1);
|
|
} */
|
|
.dashboard-main .top {
|
|
width: 100%;
|
|
height: 60%;
|
|
border: 1px solid rgba(25, 186, 139, 0.17);
|
|
background-color: rgba(255, 255, 255, 0.04);
|
|
color: #303133;
|
|
box-sizing: border-box;
|
|
}
|
|
.dashboard-main .bottom {
|
|
width: 100%;
|
|
height: calc(40%-10px);
|
|
height: -moz-calc(40% - 8px);
|
|
height: -webkit-calc(40% - 8px);
|
|
margin-top: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
.dashboard-main .fl {
|
|
float: left;
|
|
}
|
|
</style>
|