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 | 115 +++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 83 insertions(+), 32 deletions(-)
diff --git a/src/views/intellectInspect/intelligentMap/index.vue b/src/views/intellectInspect/intelligentMap/index.vue
index b365a52..e44e7ec 100644
--- a/src/views/intellectInspect/intelligentMap/index.vue
+++ b/src/views/intellectInspect/intelligentMap/index.vue
@@ -1,10 +1,18 @@
<template>
<div class="container">
- <div class="big-title" @click="goBack()"><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-task">
@@ -167,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">
@@ -204,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">
@@ -272,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: {
@@ -279,7 +291,8 @@
},
data(){
return{
- present: ''
+ present: '',
+ isScreenfull: false
}
},
created() {
@@ -290,12 +303,29 @@
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% {
@@ -399,23 +429,42 @@
margin: 0 20px;
}
}
- .backBtn{
+ .btns{
position: absolute;
z-index: 99999;
- right: 150px;
+ right: 60px;
top: 40px;
display: flex;
align-items: center;
- cursor: pointer;
-
- img{
- width: 18px;
- height: 18px;
- margin-right: 10px;
+ .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;
+ }
}
- 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{
@@ -439,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;
@@ -683,17 +732,20 @@
display: flex;
flex-direction: column;
align-items: center;
- font-size: 16px;
+ font-size: 20px;
color: #36FCFC;
border-right: 1px solid #36FCFC;
padding-right: 20px;
+ img{
+ margin-bottom: 10px;
+ }
}
.task-des-r{
- width: 320px;
+ width: calc((200vw - 240px)/ 7);
display: flex;
flex-direction: column;
align-items: center;
- font-size: 16px;
+ font-size: 20px;
line-height: 28px;
color: #FCFC36;
padding-left: 20px;
@@ -759,12 +811,11 @@
}
.star-pic{
position: absolute;
- width: calc(40vh - 80px);
- height: calc(40vh - 80px);
+ width: calc((100vw - 120px)/ 7);
+ height: calc((100vw - 120px)/ 7);
z-index: 999999;
- top: calc(40vh - 120px);
- left: 50%;
- transform: translateX(-65%);
+ bottom: 40px;
+ right: 40px;
padding: 20px;
.star-bg{
@@ -795,9 +846,9 @@
.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;
@@ -805,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;
@@ -815,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