<script name="BigScreenView" setup>
/**
* 大屏主页面
* 采用缩放的形式进行适配，搭配rem
* */
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import autoScalContainer from './components/autoScalContainer.vue'
import areaDanger from './components/areaDanger.vue'
import dangerCategory from './components/dangerCategory.vue'
import deptDangerTable from './components/deptDangerTable.vue'
import deptVideoPoint from './components/deptVideoPoint.vue'
import focusObject from './components/focusObject.vue'
import areaVideoPoint from './components/areaVideoPoint.vue'
import ViewHead from './components/viewHead.vue'
import video4 from './components/video4.vue'
import video6 from './components/video6.vue'
import videoCommon from './components/videoCommon.vue'
import { setRem } from './common/rem.js'
import bg from './assets/bg.png'
import boxBg from './assets/boxBg.png'
import areaDeviceCount from './components/areaDeviceCount.vue'
import realTimeClock from './realTimeClock.vue'
import { getDictByCode } from '@/api/system/dict'
const { proxy } = getCurrentInstance()
const route = useRoute()
const splitScreen = ref(4) // 几分屏
const showEchart = ref(false) // 1、4平下面的图是否显示
const dataContainer = reactive({
loading: false,
img: {
bg,
boxBg,
},
})
// contain : 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。使内容全部可见。
// cover : 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框
const fit = ref('cover') // 缩放模式
/**
* 缩放计算事件
* */
function handleResizeScreen(rect) {
rect = rect || {}
/**
* 计算缩放倍数 1920 * 1080
* 根据设计图自己配置
* */
const baseSize = 16 // 基础大小，相当于1rem = 16像素
const scale = rect.width / 1920
const fontSize = `${Math.round(baseSize * scale * 100) / 100}px`
setRem(fontSize)
}
const router = useRouter()
// 点击首页
const goHome = () => {
router.push({
path: '/realTime',
})
}
// 切屏
const handleChangeScreen = (count) => {
splitScreen.value = count
}
const handleChangeHide = () => {
showEchart.value = !showEchart.value
}
const secretLevelUserName = ref('')
const systemType = ref('')
onMounted(() => {
systemType.value = window.localStorage.getItem('systemType')
// 根据用户的m级标m
// getDictByCode('secretUserLevel').then((response) => {
// if (response.code === 200) {
// if (Array.isArray(response.data) && response.data.length) {
// const level = window.sessionStorage.getItem('secretUserLevel')
// const index = response.data.findIndex(item => item.value === level)
// if (index !== -1 && systemType.value === 'gm') {
// secretLevelUserName.value = response.data[index].name
// }
// }
// }
// })
})
</script>
<template>
<div class="big-screen-view">
<auto-scal-container
:ratio="1920 / 1080"
:fit="fit"
@on-resize-screen="handleResizeScreen"
>
<div
class="big-screen-view-container"
:style="{
'--bg-img': `url(${dataContainer.img.bg})`,
'--boxBg-img': `url(${dataContainer.img.boxBg})`,
}"
>
<div class="head">
<view-head :title="systemType === 'gm' ? `二院安全生产智慧监管平台-机密` : '二院安全生产智慧监管平台'">
<template #left>
<real-time-clock style="position: absolute;left: 10px;top: 10px;z-index: 999999;" />
</template>
<template #right>
<!-- <img v-if="proxy.hasPerm('/bigScreen/showEchart')" src="../../assets/bigScreen/hide.svg" class="split-screen" @click="handleChangeHide"> -->
<img v-if="proxy.hasPerm('/bigScreen/one')" src="../../assets/bigScreen/splitScreen1.svg" class="split-screen" @click="handleChangeScreen(1)">
<img v-if="proxy.hasPerm('/bigScreen/four')" src="../../assets/bigScreen/splitScreen4.svg" class="split-screen" @click="handleChangeScreen(4)">
<img v-if="proxy.hasPerm('/bigScreen/six')" src="../../assets/bigScreen/splitScreen6.svg" class="split-screen" @click="handleChangeScreen(6)">
<img v-if="proxy.hasPerm('/bigScreen/home')" src="../../assets/bigScreen/home.svg" class="home-button" @click="goHome">
</template>
</view-head>
</div>
<div class="content">
<div class="content">
<div class="left">
<div class="box">
<div class="box-title">
隐患分类<span v-if="secretLevelUserName">-{{ secretLevelUserName }}</span>
</div>
<danger-category />>
</div>
<div class="box">
<div class="box-title">
区域隐患分类<span v-if="secretLevelUserName">-{{ secretLevelUserName }}</span>
</div>
<area-danger />
</div>
<div class="box">
<div class="box-title">
单位隐患分布<span v-if="secretLevelUserName">-{{ secretLevelUserName }}</span>
</div>
<dept-danger-table />
</div>
</div>
<div class="middle">
<!-- <div v-if="!showEchart" class="video" :style="{ height: '100%' }"> -->
<!-- <video4 v-if="splitScreen !== 6" :show-echars="showEchart" :split-screen="splitScreen" /> -->
<!-- <video6 v-if="splitScreen === 6" /> -->
<!-- <video-common v-if="splitScreen === 6" :splitScreen="6"/> -->
<!-- </div> -->
<!-- <div v-if="showEchart" class="video" :style="{ height: '66%' }"> -->
<!-- <video4 v-if="splitScreen !== 6" :show-echars="showEchart" :split-screen="splitScreen" /> -->
<!-- <video6 v-if="splitScreen === 6" /> -->
<!-- <video-common v-if="splitScreen === 6" :splitScreen="6"/> -->
<!-- </div> -->
<div v-if="splitScreen === 6 || splitScreen === 4" class="video" :style="{ height: '100%' }">
<video-common :split-screen="splitScreen" />
</div>
<div v-if="splitScreen === 1" class="video" :style="{ height: '66%' }">
<video-common :split-screen="splitScreen" />
</div>
<div v-if="splitScreen === 1" class="chart-area">
<div class="chart-area-title">
各区域设备数量<span v-if="secretLevelUserName">-{{ secretLevelUserName }}</span>
</div>
<area-device-count />
</div>
</div>
<div class="right">
<div class="box">
<div class="box-title">
各区域接入视频点位<span v-if="secretLevelUserName">-{{ secretLevelUserName }}</span>
</div>
<area-video-point />
</div>
<div class="box">
<div class="box-title">
各单位接入视频点位<span v-if="secretLevelUserName">-{{ secretLevelUserName }}</span>
</div>
<dept-video-point />
</div>
<div class="box">
<div class="box-title">
关注对象<span v-if="secretLevelUserName">-{{ secretLevelUserName }}</span>
</div>
<focus-object />
</div>
</div>
</div>
</div>
</div>
</auto-scal-container>
<video class="videoBg" autoplay loop muted playsinline>
<source src="../../assets/bigScreen/bg.webm" type="video/webm">
</video>
</div>
</template>
<style lang="scss" scoped>
.big-screen-view {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #031045c7;
.videoBg {
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
top: 0;
left: 0;
object-fit: fill;
pointer-events: none;
}
.big-screen-view-container {
width: 100%;
height: 100%;
background-color: rgb(169, 169, 169);
display: flex;
flex-direction: column;
background-image: var(--bg-img);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
> .head {
height: 7rem;
.home-button {
width: 3rem;
height: 3rem;
cursor: pointer;
margin-top: -4rem;
z-index: 11;
}
.split-screen {
width: 2rem;
height: 2rem;
cursor: pointer;
z-index: 11;
margin-top: -3.5rem;
margin-right: 0.8rem;
}
}
> .content {
box-sizing: border-box;
display: flex;
flex-direction: column;
flex: 1 1 0;
width: 100%;
height: 0;
> .content {
box-sizing: border-box;
display: flex;
flex-direction: row;
// justify-content: space-around;
justify-content: center;
flex: 1 1 0;
width: 100%;
height: 0;
padding: 0 1rem 1rem 1rem;
box-sizing: border-box;
> .left,
> .right {
display: flex;
flex-direction: column;
z-index: 111;
> .box {
position: relative;
width: 100%;
flex: 1 1 0;
height: 0;
background-image: var(--boxBg-img);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
margin: 0 0 0.938rem 0;
padding: 1.2rem 0.6rem 1rem 0.6rem;
&:last-child {
margin: 0;
}
.box-title {
position: absolute;
color: #fcfcfc;
letter-spacing: 0.2rem;
white-space: noWrap;
font-weight: 600;
font-size: 1.2rem;
top: -0.8rem;
// 水平居中
left: 50%;
transform:translate(-50% , 0);
}
}
}
> .left {
height: 100%;
width: 18rem;
}
> .right {
height: 100%;
width: 18rem;
}
> .middle {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
> .video {
// flex: 1;
width: 100%;
z-index: 99;
box-sizing: border-box;
display: flex;
justify-content: center;
padding: 0 0.4rem;
}
> .chart-area {
position: relative;
box-sizing: border-box;
flex: 1;
z-index: 99;
margin: 1rem 0.4rem 0 0.4rem;
background-image: var(--boxBg-img);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
> .chart-area-title {
position: absolute;
color: #fcfcfc;
letter-spacing: 0.2rem;
white-space: noWrap;
font-weight: 600;
font-size: 1.2rem;
top: -0.8rem;
// 水平居中
left: 50%;
transform:translate(-50% , 0);
}
}
}
}
}
}
}
</style>
