feat(数据大屏): 改名字

This commit is contained in:
hzj 2025-09-25 17:08:28 +08:00
parent cb0f10d53d
commit db7bc0a97b

View File

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