From 9458b8d7c50e56e96f21c70dd3bab7cc15b9a368 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期四, 15 九月 2022 10:11:54 +0800
Subject: [PATCH] Default Changelist
---
src/views/intellectInspect/intelligentMap/index.vue | 302 ++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 232 insertions(+), 70 deletions(-)
diff --git a/src/views/intellectInspect/intelligentMap/index.vue b/src/views/intellectInspect/intelligentMap/index.vue
index 3df2f3c..e44e7ec 100644
--- a/src/views/intellectInspect/intelligentMap/index.vue
+++ b/src/views/intellectInspect/intelligentMap/index.vue
@@ -1,23 +1,50 @@
<template>
<div class="container">
- <div class="big-title"><span></span>大型实验室智能巡检系统<span></span></div>
+ <div class="big-title" @click="goBack()"><span></span>国泰新华智能巡检系统<span></span></div>
<div style="font-size: 14px;color: #00ffff">{{present}}</div>
+ <div class="btns">
+ <div class="fullbtn" @click="onScreenfullClick">
+ <div class="toFull">
+ <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
+ </div>
+ <div>全屏</div>
+ </div>
+ <div class="backBtn" @click="goBack()">
+ <img src="../../../assets/loginPage/back-icon.png">
+ <div>退出</div>
+ </div>
+ </div>
<div class="blocks">
- <div class="current-data">
- <div class="data-area">
- <img src="../../../assets/loginPage/xj-icon.png">
- <div>当前巡检：<span>实验室装置区</span></div>
- </div>
- <div class="data-spot">
- <div>
- <span>巡检点</span>
- <p>3970A</p>
+ <div class="current-task">
+ <div class="task-des">
+ <div class="task-des-l">
+ <img src="../../../assets/loginPage/task-job-pic.png">
+ <div>巡检任务</div>
</div>
- <div>
- <span>指标</span>
- <p>压力</p>
+ <div class="task-des-r">
+ 该巡检路线沿途监测风机系统、循环水系统以及装置区的各巡检点指标是否正常。
</div>
</div>
+ <div class="current-data">
+ <div class="data-area">
+ <img src="../../../assets/loginPage/xj-icon.png">
+ <div>当前巡检：<span>实验室装置区</span></div>
+ </div>
+ <div class="data-spot">
+ <div>
+ <span>巡检点</span>
+ <p>3970A</p>
+ </div>
+ <div>
+ <span>指标</span>
+ <p>压力</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="star-pic">
+ <div class="star-bg"><img src="../../../assets/loginPage/star-bg.png"></div>
+ <div class="star"><img src="../../../assets/loginPage/device-pic.png"></div>
</div>
<div class="line-map">
<div class="item item-t item-l">
@@ -148,12 +175,12 @@
</div>
</div>
<div class="pic-tit water">
- <img src="../../../assets/loginPage/equipment.JPG">
+ <img src="../../../assets/loginPage/equipment.jpg">
<p>实验室装置区</p>
</div>
<div></div>
<div class="pic-tit">
- <img src="../../../assets/loginPage/wind.JPG">
+ <img src="../../../assets/loginPage/wind.jpg">
<p>实验室风机系统</p>
</div>
<div class="item item-l warning">
@@ -185,7 +212,7 @@
<div></div>
<div></div>
<div class="pic-tit water">
- <img src="../../../assets/loginPage/watersys.JPG">
+ <img src="../../../assets/loginPage/watersys.jpg">
<p>实验室循环水系统</p>
</div>
<div class="item item-t">
@@ -253,6 +280,10 @@
</template>
<script>
+import { ElMessage } from 'element-plus';
+import { ElMessageBox } from 'element-plus/es';
+import screenfull from 'screenfull';
+
export default {
name: 'NewForm',
props: {
@@ -260,18 +291,41 @@
},
data(){
return{
- present: ''
+ present: '',
+ isScreenfull: false
}
},
created() {
setInterval(() => {
this.present = new Date().toLocaleString()
}, 1000)
+ },
+ methods:{
+ goBack(){
+ window.history.go(-1)
+ },
+ // 全屏点击时
+ onScreenfullClick(){
+ const t = this
+ if (!screenfull.isEnabled) {
+ ElMessage.warning('暂不不支持全屏');
+ return false;
+ }
+ screenfull.toggle();
+ screenfull.on('change', () => {
+ if (screenfull.isFullscreen) {
+ t.isScreenfull = true
+ }
+ else{
+ t.isScreenfull = false
+ }
+ });
+ }
}
}
</script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
+<!-- Add "scoped" attribute to limit CSS to this components only -->
<style scoped lang="scss">
@keyframes warn {
0% {
@@ -375,7 +429,44 @@
margin: 0 20px;
}
}
+ .btns{
+ position: absolute;
+ z-index: 99999;
+ right: 60px;
+ top: 40px;
+ display: flex;
+ align-items: center;
+ .fullbtn{
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ .toFull{
+ font-weight: bolder;
+ color: #00FFFF;
+ margin-right: 10px;
+ }
+ div{
+ font-size: 16px;
+ color: #00FFFF;
+ }
+ }
+ .backBtn{
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ img{
+ width: 14px;
+ height: 14px;
+ margin-right: 10px;
+ }
+ div{
+ font-size: 16px;
+ color: #00FFFF;
+ }
+ }
+ }
.blocks{
position: relative;
width: 100%;
@@ -397,7 +488,7 @@
.item{
width: calc((100vw - 120px)/ 7);
height: calc((100vh - 130px)/ 5);
- padding: 20px 40px 20px 20px;
+ padding: 20px 30px 20px 20px;
position: relative;
box-sizing: border-box;
@@ -620,73 +711,144 @@
}
}
}
- .current-data{
+ .current-task{
position: absolute;
+ width: calc((500vw - 600px)/ 7);
z-index: 999999;
- width: 270px;
- height: 142px;
- left: 50%;
- padding: 20px 30px;
- box-sizing: border-box;
- transform: translateX(-65%);
- background: url("../../../assets/loginPage/xj-bg.png") no-repeat center;
- background-size: 100% 100%;
+ top: 0;
+ right: 0;
+ padding: 0 60px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
- .data-area{
+ .task-des{
+ padding: 10px 20px;
display: flex;
align-items: center;
- border-bottom: 1px solid #00FFFF;
- font-weight: bold;
- padding-bottom: 10px;
- box-sizing: border-box;
+ border: 1px solid #36FCFC;
- img{
- width: 30px;
- height: 30px;
- margin-right: 10px;
- animation: circle 1s ease-in-out infinite;
- }
-
- div{
- font-size: 15px;
- color: rgba(255,255,255,.8);
-
- span{
- color: #00FFFF;
- }
- }
- }
-
- .data-spot{
- display: flex;
- align-items: flex-start;
- margin-top: 10px;
-
- &>div{
+ .task-des-l{
display: flex;
flex-direction: column;
align-items: center;
- width: 50%;
- font-size: 14px;
- color: rgba(255,255,255,.8);
+ font-size: 20px;
+ color: #36FCFC;
+ border-right: 1px solid #36FCFC;
+ padding-right: 20px;
+ img{
+ margin-bottom: 10px;
+ }
+ }
+ .task-des-r{
+ width: calc((200vw - 240px)/ 7);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: 20px;
+ line-height: 28px;
+ color: #FCFC36;
+ padding-left: 20px;
+ }
+ }
+ .current-data{
+ width: 267px;
+ height: 138px;
+ padding: 20px 30px;
+ box-sizing: border-box;
+ background: url("../../../assets/loginPage/xj-bg.png") no-repeat center;
+ background-size: 100% 100%;
- p{
- margin-top: 6px;
- color: #00FFFF;
+ .data-area{
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid #040C3B;
+ font-weight: bold;
+ padding-bottom: 10px;
+ box-sizing: border-box;
+
+ img{
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+ animation: circle 1s ease-in-out infinite;
}
- &:first-of-type{
- border-right: 1px solid #36FCFC;
+ div{
+ font-size: 15px;
+ color: rgba(4,12,59,.8);
+
+ span{
+ color: #040C3B;
+ }
}
+ }
+
+ .data-spot{
+ display: flex;
+ align-items: flex-start;
+ margin-top: 10px;
+
+ &>div{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 50%;
+ font-size: 14px;
+ color: rgba(4,12,59,.8);
+
+ p{
+ margin-top: 6px;
+ color: #040C3B;
+ }
+
+ &:first-of-type{
+ border-right: 1px solid #040C3B;
+ }
+ }
+ }
+ }
+ }
+ .star-pic{
+ position: absolute;
+ width: calc((100vw - 120px)/ 7);
+ height: calc((100vw - 120px)/ 7);
+ z-index: 999999;
+ bottom: 40px;
+ right: 40px;
+ padding: 20px;
+
+ .star-bg{
+ position: inherit;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ img{
+ width: 100%;
+ height: auto;
+ animation: circle 30s linear infinite;
+ }
+ }
+
+ .star{
+ position: inherit;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ img{
+ width: 100%;
+ height: auto;
}
}
}
.section-1{
position: absolute;
left: 70px;
- top: -10px;
+ top: -20px;
width: calc((200vw - 240px) / 7 + 60px);
- height: 630px;
+ height: calc(80vh - 109px);
background: rgba(0,100,190,.1);
border: 1px solid rgba(0,100,190,.4);
border-radius: 8px;
@@ -694,9 +856,9 @@
.section-2{
position: absolute;
left: calc((400vw - 480px)/ 7 + 70px);
- top: 150px;
+ top: calc((100vh - 130px)/ 5 - 20px);
width: calc((200vw - 240px) / 7 + 60px);
- height: 470px;
+ height: calc((300vh - 390px)/ 5 - 5px);
background: rgba(0,100,190,.1);
border: 1px solid rgba(0,100,190,.4);
border-radius: 8px;
@@ -704,9 +866,9 @@
.section-3{
position: absolute;
left: 100px;
- top: 630px;
+ top: calc(80vh - 119px);
width: calc((500vw - 600px)/ 7 + 30px);
- height: 180px;
+ height: calc((100vh - 130px)/ 5 + 20px);
background: rgba(0,100,190,.1);
border: 1px solid rgba(0,100,190,.4);
border-radius: 8px;
--
Gitblit v1.9.2