feat(数据大屏): 改名字
This commit is contained in:
hzj
parent
cb0f10d53d
commit
db7bc0a97b
@ -1,11 +1,18 @@
|
||||
<template>
|
||||
<div class="app-container-datav">
|
||||
<div ref="datavFullscreen" class="office-efficiency-index" @dblclick="screen">
|
||||
<div
|
||||
ref="datavFullscreen"
|
||||
class="office-efficiency-index"
|
||||
@dblclick="screen"
|
||||
>
|
||||
<div v-if="!mobile" class="office-header">
|
||||
<div class="title-info">数据大屏</div>
|
||||
<div class="analysis-info">实时数据预览</div>
|
||||
</div>
|
||||
<el-row v-if="buttonPermissions.includes('datav:query')" class="office-content">
|
||||
<el-row
|
||||
v-if="buttonPermissions.includes('datav:query')"
|
||||
class="office-content"
|
||||
>
|
||||
<el-col :xs="24" :sm="6">
|
||||
<el-row>
|
||||
<el-col>
|
||||
@ -27,18 +34,21 @@
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="18">
|
||||
<el-row>
|
||||
<el-col v-if="buttonPermissions.includes('datav:paid:preview')" :span="24">
|
||||
<el-col
|
||||
v-if="buttonPermissions.includes('datav:paid:preview')"
|
||||
:span="24"
|
||||
>
|
||||
<div id="online-info" class="col-info">
|
||||
<div class="title">今日付费预览</div>
|
||||
<div class="content">
|
||||
<purchase-count />
|
||||
<purchase-count />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-col :span="24">
|
||||
<div id="online-info-tim-chat" class="col-info">
|
||||
<div class="title">LotFun在线</div>
|
||||
<div class="title">Likei在线</div>
|
||||
<div class="content">
|
||||
<online-user-count-origin origin="LOTFUN" />
|
||||
</div>
|
||||
@ -52,9 +62,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-col> -->
|
||||
|
||||
</el-row>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -63,60 +71,59 @@
|
||||
|
||||
<script>
|
||||
// import OnlineUserMap from './online-user-map'
|
||||
import LatestPurchase from './latest-purchase'
|
||||
import LatestPurchase from "./latest-purchase";
|
||||
// import LatestPurchaseTimChat from './latest-purchase-timchat'
|
||||
import OnlineUserCountOrigin from './online-user-count-origin'
|
||||
import PurchaseCount from './purchase-count'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { mobile } from '@/utils/device'
|
||||
import OnlineUserCountOrigin from "./online-user-count-origin";
|
||||
import PurchaseCount from "./purchase-count";
|
||||
import { mapGetters } from "vuex";
|
||||
import { mobile } from "@/utils/device";
|
||||
export default {
|
||||
name: 'DatavContent',
|
||||
name: "DatavContent",
|
||||
components: { LatestPurchase, OnlineUserCountOrigin, PurchaseCount },
|
||||
data() {
|
||||
return {
|
||||
mobile: mobile()
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permissionsSysOriginPlatforms', 'buttonPermissions']),
|
||||
...mapGetters(["permissionsSysOriginPlatforms", "buttonPermissions"]),
|
||||
permissionsSysOriginCode() {
|
||||
if (!this.permissionsSysOriginPlatforms) {
|
||||
return []
|
||||
return [];
|
||||
}
|
||||
return this.permissionsSysOriginPlatforms.map(item => item.value)
|
||||
return this.permissionsSysOriginPlatforms.map(item => item.value);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
screen() {
|
||||
const element = this.$refs.datavFullscreen
|
||||
const element = this.$refs.datavFullscreen;
|
||||
if (this.fullscreen) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
document.exitFullscreen();
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
document.webkitCancelFullScreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
} else {
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen()
|
||||
element.requestFullscreen();
|
||||
} else if (element.webkitRequestFullScreen) {
|
||||
element.webkitRequestFullScreen()
|
||||
element.webkitRequestFullScreen();
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen()
|
||||
element.mozRequestFullScreen();
|
||||
} else if (element.msRequestFullscreen) {
|
||||
// IE11
|
||||
element.msRequestFullscreen()
|
||||
element.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
this.fullscreen = !this.fullscreen
|
||||
this.fullscreen = !this.fullscreen;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.app-container-datav {
|
||||
@ -124,45 +131,72 @@ export default {
|
||||
min-height: calc(100vh - 50px);
|
||||
background-color: #22284a;
|
||||
.office-efficiency-index {
|
||||
font-family:PingFangSC-Semibold,PingFang SC;background-color:#22284A;background-size:cover;
|
||||
/*头部样式*/
|
||||
.office-header{
|
||||
background: url("./../../assets/datav/office_efficiency_header_bg.png")no-repeat center center;background-size: 100% 100%;
|
||||
.title-info{color:#03C2EC;text-align: center;font-size: 0.26rem;font-family:'cuhei';font-weight: 600;line-height: 0.6rem;vertical-align: middle;}
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
background-color: #22284a;
|
||||
background-size: cover;
|
||||
/*头部样式*/
|
||||
.office-header {
|
||||
background: url("./../../assets/datav/office_efficiency_header_bg.png")
|
||||
no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.title-info {
|
||||
color: #03c2ec;
|
||||
text-align: center;
|
||||
font-size: 0.26rem;
|
||||
font-family: "cuhei";
|
||||
font-weight: 600;
|
||||
line-height: 0.6rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.analysis-info{line-height:0.6rem;vertical-align:middle;padding: 0px 0.2rem; font-size: 0.24rem;font-weight: 600;background-image: linear-gradient(#D8AE22, #DC9546);-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 60s infinite linear;}
|
||||
/*数据模块样式*/
|
||||
.office-content {
|
||||
margin-top: 20px;
|
||||
.col-info{
|
||||
margin:0px 10px 20px 10px;
|
||||
border-radius:.1rem;
|
||||
background-color:#181C41;
|
||||
.title{
|
||||
line-height:0.5rem;
|
||||
vertical-align:middle;
|
||||
padding: .2rem .3rem;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 600;
|
||||
color:#03C2EC;
|
||||
text-align: left;
|
||||
}
|
||||
.content{vertical-align:middle;padding:0px 10px;font-size:0.14rem;color:#fff;}
|
||||
}
|
||||
#today-pay {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#real-time-charts {
|
||||
height: 5.6rem;
|
||||
}
|
||||
#online-map {
|
||||
height: 7.3rem;
|
||||
.content {
|
||||
padding-top: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.analysis-info {
|
||||
line-height: 0.6rem;
|
||||
vertical-align: middle;
|
||||
padding: 0px 0.2rem;
|
||||
font-size: 0.24rem;
|
||||
font-weight: 600;
|
||||
background-image: linear-gradient(#d8ae22, #dc9546);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-animation: hue 60s infinite linear;
|
||||
}
|
||||
/*数据模块样式*/
|
||||
.office-content {
|
||||
margin-top: 20px;
|
||||
.col-info {
|
||||
margin: 0px 10px 20px 10px;
|
||||
border-radius: 0.1rem;
|
||||
background-color: #181c41;
|
||||
.title {
|
||||
line-height: 0.5rem;
|
||||
vertical-align: middle;
|
||||
padding: 0.2rem 0.3rem;
|
||||
font-size: 0.4rem;
|
||||
font-weight: 600;
|
||||
color: #03c2ec;
|
||||
text-align: left;
|
||||
}
|
||||
.content {
|
||||
vertical-align: middle;
|
||||
padding: 0px 10px;
|
||||
font-size: 0.14rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
#today-pay {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#real-time-charts {
|
||||
height: 5.6rem;
|
||||
}
|
||||
#online-map {
|
||||
height: 7.3rem;
|
||||
.content {
|
||||
padding-top: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user