<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>实时监控系统</title>
<link rel="stylesheet" href="font/iconfont.css" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/text/javascript" charset="utf-8"></script>
<script src="font/iconfont.js"></script>
<script src="js/moment.min.js"></script>
<style>
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.screen-container{
width: 100%;
height: 100%;
padding: 0 20px;
/* background-color: #161522; */
/* color: #fff; */
box-sizing:border-box;
}
.screen-header{
width: 100%;
height: 64px;
position: relative;
}
.screen-header >div{
/* width: 100%; */
}
.screen-header img{
width: 100%;
}
.screen-header .title{
position: absolute;
left: 50%;
top: 50%;
font-size: 20px;
transform: translate(-50%, -50%);
}
.screen-header .title-right {
align-items: center;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-80%);
}
.screen-header .datetime{
font-size: 15px;
margin-left: 10px;
}
.screen-body{
width: 100%;
height: 100%;
display: flex;
margin-top: 10px;
}
section> div{
border-radius: 5px;
border: lightblue 1px solid;
}
.screen-body .screen-left{
height: 100%;
width: 27.6%;
}
.screen-body .screen-left #left-top{
height: 53%;
position: relative;
}
.screen-body .screen-left #left-bottom{
height: 31%;
margin-top: 25px;
position: relative;
}
.screen-body .screen-middle{
height: 100%;
width: 41.5%;
margin-left: 1.6%;
margin-right: 1.6%;
}
.screen-body .screen-middle #middle-top{
width: 100%;
height: 56%;
position: relative;
}
.screen-body .screen-middle #middle-bottom{
margin-top: 25px;
width: 100%;
height: 28%;
position: relative;
}
.screen-body .screen-right{
height: 100%;
width: 27.6%;
}
.screen-body .screen-right #right-top{
height: 46%;
position: relative;
}
.screen-body .screen-right #right-bottom{
height: 38%;
margin-top: 25px;
position: relative;
}
.resize {
position: absolute;
right: 10px;
top: 10px;
border: none;
}
.fullscreen {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
z-index: 100;
background: beige;
}
</style>
</head>
<body>
<div id="app" class="screen-container">
<header class="screen-header">
<div><img :src="handerSrc" alt=""></div>
<span class="title">实时监控系统</span>
<div class="title-right">
<span class="datetime">{{ nowTime }}</span>
</div>
</header>
<div class="screen-body">
<section class="screen-left">
<div id="left-top" :class="[fullScreenStatus.div1 ? 'fullscreen' : '']">
<div class="resize">
<span @click="handleFullScreen('div1')" :class="['iconfont', fullScreenStatus.div1 ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
</div>
div1
</div>
<div id="left-bottom" :class="[fullScreenStatus.div2 ? 'fullscreen' : '']">
<div class="resize">
<span @click="handleFullScreen('div2')" :class="['iconfont', fullScreenStatus.div2 ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
</div>
div2
</div>
</section>
<section class="screen-middle">
<div id="middle-top" :class="[fullScreenStatus.div3 ? 'fullscreen' : '']">
<div class="resize">
<span @click="handleFullScreen('div3')" :class="['iconfont', fullScreenStatus.div3 ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
</div>
div3
</div>
<div id="middle-bottom" :class="[fullScreenStatus.div4 ? 'fullscreen' : '']">
<div class="resize">
<span @click="handleFullScreen('div4')" :class="['iconfont', fullScreenStatus.div4 ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
</div>
div4
</div>
</section>
<section class="screen-right">
<div id="right-top" :class="[fullScreenStatus.div5 ? 'fullscreen' : '']">
<div class="resize">
<span @click="handleFullScreen('div5')" :class="['iconfont', fullScreenStatus.div5 ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
</div>
div5
</div>
<div id="right-bottom" :class="[fullScreenStatus.div6 ? 'fullscreen' : '']">
<div class="resize">
<span @click="handleFullScreen('div6')" :class="['iconfont', fullScreenStatus.div6 ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
</div>
div6
</div>
</section>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
handerSrc:'./img/header_border_dark.png',
fullScreenStatus: {
div1: false,
div2: false,
div3: false,
div4: false,
div5: false,
div6: false
}
},
methods:{
handleFullScreen(statusChange){
this.fullScreenStatus[statusChange] = !this.fullScreenStatus[statusChange]
}
},
computed:{
nowTime() {
return moment().format('YYYY-MM-DD HH:mm')
}
}
})
</script>
</body>
</html>
