<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 video6 from './components/video6.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'
const route = useRoute()
const splitScreen = ref(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
}
</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="安全生产智慧监管平台" >
<template #right>
<img v-if="splitScreen === 4" src="../../assets/bigScreen/splitScreen1.svg" class="split-screen" @click="handleChangeScreen(1)">
<img v-if="splitScreen === 1" src="../../assets/bigScreen/splitScreen4.svg" class="split-screen" @click="handleChangeScreen(4)">
<img 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">隐患分类</div>
<danger-category />>
</div>
<div class="box">
<div class="box-title">区域隐患分类</div>
<area-danger />
</div>
<div class="box">
<div class="box-title">单位隐患分布</div>
<dept-danger-table />
</div>
</div>
<div class="middle">
<div class="video">
<video6 :splitScreen="splitScreen"/>
</div>
<div class="chart-area">
<div class="chart-area-title">各单位设备数量</div>
<area-device-count />
</div>
</div>
<div class="right">
<div class="box">
<div class="box-title">各区域接入视频点位</div>
<area-video-point />
</div>
<div class="box">
<div class="box-title">各单位接入视频点位</div>
<dept-video-point />
</div>
<div class="box">
<div class="box-title">关注对象</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: -50px;
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 1rem 1rem 1rem;
&: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: 23rem;
}
> .right {
height: 100%;
width: 23rem;
}
> .middle {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
> .video {
height: 66%;
// flex: 2;
width: 100%;
z-index: 99;
}
> .chart-area {
position: relative;
box-sizing: border-box;
flex: 1;
z-index: 99;
margin: 1rem 1rem 0 1rem;
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>
