From b367f29698fa0631173b939355803c22a9dba651 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期一, 08 八月 2022 12:14:48 +0800
Subject: [PATCH] 添加修改页面
---
src/assets/loginPage/star-bg.png | 0
src/assets/loginPage/xj-bg.png | 0
src/assets/loginPage/back-icon.png | 0
src/assets/loginPage/task-job-pic.png | 0
src/views/intellectInspect/intelligentMap/index.vue | 227 ++++++++++++++++++++++++++++++++++++++++++--------------
src/assets/loginPage/xj-icon.png | 0
src/assets/loginPage/device-pic.png | 0
7 files changed, 169 insertions(+), 58 deletions(-)
diff --git a/src/assets/loginPage/back-icon.png b/src/assets/loginPage/back-icon.png
new file mode 100644
index 0000000..ea6dea7
--- /dev/null
+++ b/src/assets/loginPage/back-icon.png
Binary files differ
diff --git a/src/assets/loginPage/device-pic.png b/src/assets/loginPage/device-pic.png
new file mode 100644
index 0000000..c52a119
--- /dev/null
+++ b/src/assets/loginPage/device-pic.png
Binary files differ
diff --git a/src/assets/loginPage/star-bg.png b/src/assets/loginPage/star-bg.png
new file mode 100644
index 0000000..929927e
--- /dev/null
+++ b/src/assets/loginPage/star-bg.png
Binary files differ
diff --git a/src/assets/loginPage/task-job-pic.png b/src/assets/loginPage/task-job-pic.png
new file mode 100644
index 0000000..fc42c6c
--- /dev/null
+++ b/src/assets/loginPage/task-job-pic.png
Binary files differ
diff --git a/src/assets/loginPage/xj-bg.png b/src/assets/loginPage/xj-bg.png
index f4b281f..e2317d1 100644
--- a/src/assets/loginPage/xj-bg.png
+++ b/src/assets/loginPage/xj-bg.png
Binary files differ
diff --git a/src/assets/loginPage/xj-icon.png b/src/assets/loginPage/xj-icon.png
index 62111ab..a82b8fc 100644
--- a/src/assets/loginPage/xj-icon.png
+++ b/src/assets/loginPage/xj-icon.png
Binary files differ
diff --git a/src/views/intellectInspect/intelligentMap/index.vue b/src/views/intellectInspect/intelligentMap/index.vue
index 3df2f3c..b365a52 100644
--- a/src/views/intellectInspect/intelligentMap/index.vue
+++ b/src/views/intellectInspect/intelligentMap/index.vue
@@ -1,23 +1,42 @@
<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="backBtn" @click="goBack()">
+ <img src="../../../assets/loginPage/back-icon.png">
+ <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">
@@ -267,6 +286,11 @@
setInterval(() => {
this.present = new Date().toLocaleString()
}, 1000)
+ },
+ methods:{
+ goBack(){
+ window.history.go(-1)
+ }
}
}
</script>
@@ -375,7 +399,25 @@
margin: 0 20px;
}
}
+ .backBtn{
+ position: absolute;
+ z-index: 99999;
+ right: 150px;
+ top: 40px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ img{
+ width: 18px;
+ height: 18px;
+ margin-right: 10px;
+ }
+ div{
+ font-size: 16px;
+ color: #00FFFF;
+ }
+ }
.blocks{
position: relative;
width: 100%;
@@ -620,65 +662,134 @@
}
}
}
- .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: 16px;
+ color: #36FCFC;
+ border-right: 1px solid #36FCFC;
+ padding-right: 20px;
+ }
+ .task-des-r{
+ width: 320px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: 16px;
+ 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(40vh - 80px);
+ height: calc(40vh - 80px);
+ z-index: 999999;
+ top: calc(40vh - 120px);
+ left: 50%;
+ transform: translateX(-65%);
+ 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{
--
Gitblit v1.9.2