實時監控系統大屏模組
阿新 • • 發佈:2020-12-07
<!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>