<template>
|
<div class="container">
|
<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-task">
|
<div class="task-des">
|
<div class="task-des-l">
|
<img src="../../../assets/loginPage/task-job-pic.png">
|
<div>巡检任务</div>
|
</div>
|
<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">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>73017</span></div>
|
<div><span>定位状态：</span><span>已完成</span></div>
|
<div><span>压力：</span><span>3.6Bar</span></div>
|
</div>
|
</div>
|
<div class="item item-l">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>73018</span></div>
|
<div><span>定位状态：</span><span>已完成</span></div>
|
<div><span>压力：</span><span>3.6Bar</span></div>
|
</div>
|
</div>
|
<div></div>
|
<div></div>
|
<div></div>
|
<div></div>
|
<div></div>
|
<div class="item item-l">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>73016</span></div>
|
<div><span>定位状态：</span><span>已完成</span></div>
|
<div><span>压力：</span><span>3.6Bar</span></div>
|
</div>
|
</div>
|
<div class="item item-l">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>73019</span></div>
|
<div><span>定位状态：</span><span>已完成</span></div>
|
<div><span>温度：</span><span>80℃</span></div>
|
</div>
|
</div>
|
<div></div>
|
<div></div>
|
<div class="item item-t item-l undone">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>3970C</span></div>
|
<div><span>定位状态：</span><span>未完成</span></div>
|
<div><span>压力：</span><span>--</span></div>
|
</div>
|
</div>
|
<div class="item item-t undone">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>3970D</span></div>
|
<div><span>定位状态：</span><span>未完成</span></div>
|
<div><span>压力：</span><span>--</span></div>
|
</div>
|
</div>
|
<div class="item finish">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<span></span>
|
<p>
|
完成巡检
|
</p>
|
</div>
|
<div class="item start">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<span></span>
|
<p>
|
开始巡检
|
</p>
|
</div>
|
<div class="item item-l">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>73020</span></div>
|
<div><span>定位状态：</span><span>已完成</span></div>
|
<div><span>压力：</span><span>3.6Bar</span></div>
|
</div>
|
</div>
|
<div></div>
|
<div></div>
|
<div class="item item-l undone">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>3970B</span></div>
|
<div><span>定位状态：</span><span>未完成</span></div>
|
<div><span>压力：</span><span>--</span></div>
|
</div>
|
</div>
|
<div class="pic-tit water">
|
<img src="../../../assets/loginPage/equipment.jpg">
|
<p>实验室装置区</p>
|
</div>
|
<div></div>
|
<div class="pic-tit">
|
<img src="../../../assets/loginPage/wind.jpg">
|
<p>实验室风机系统</p>
|
</div>
|
<div class="item item-l warning">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>73021</span></div>
|
<div><span>定位状态：</span><span>已完成</span></div>
|
<div><span>温度：</span><span>130℃</span></div>
|
</div>
|
</div>
|
<div></div>
|
<div></div>
|
<div class="item item-l undone">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>3970A</span></div>
|
<div><span>定位状态：</span><span>未完成</span></div>
|
<div><span>压力：</span><span>--</span></div>
|
</div>
|
</div>
|
<div></div>
|
<div></div>
|
<div class="pic-tit water">
|
<img src="../../../assets/loginPage/watersys.jpg">
|
<p>实验室循环水系统</p>
|
</div>
|
<div class="item item-t">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>80210</span></div>
|
<div><span>定位状态：</span><span>已完成</span></div>
|
<div><span>温度：</span><span>80摄氏度</span></div>
|
</div>
|
</div>
|
<div class="item item-t">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>80211</span></div>
|
<div><span>定位状态：</span><span>已完成</span></div>
|
<div><span>温度：</span><span>80摄氏度</span></div>
|
</div>
|
</div>
|
<div class="item item-t">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>80212</span></div>
|
<div><span>定位状态：</span><span>已完成</span></div>
|
<div><span>温度：</span><span>80摄氏度</span></div>
|
</div>
|
</div>
|
<div class="item">
|
<section>
|
<div class="dot"></div>
|
<div class="pulse"></div>
|
<div class="pulse1"></div>
|
</section>
|
<div>
|
<div><span>巡检点：</span><span>80213</span></div>
|
<div><span>定位状态：</span><span>已完成</span></div>
|
<div><span>温度：</span><span>80摄氏度</span></div>
|
</div>
|
</div>
|
<div></div>
|
<div></div>
|
</div>
|
<div class="section-1">
|
|
</div>
|
<div class="section-2">
|
|
</div>
|
<div class="section-3">
|
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'NewForm',
|
props: {
|
|
},
|
data(){
|
return{
|
present: ''
|
}
|
},
|
created() {
|
setInterval(() => {
|
this.present = new Date().toLocaleString()
|
}, 1000)
|
},
|
methods:{
|
goBack(){
|
window.history.go(-1)
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style scoped lang="scss">
|
@keyframes warn {
|
0% {
|
transform: scale(0.3);
|
-webkit-transform: scale(0.3);
|
opacity: 0.0;
|
}
|
|
25% {
|
transform: scale(0.3);
|
-webkit-transform: scale(0.3);
|
opacity: 0.1;
|
}
|
|
50% {
|
transform: scale(0.5);
|
-webkit-transform: scale(0.5);
|
opacity: 0.3;
|
}
|
|
75% {
|
transform: scale(0.8);
|
-webkit-transform: scale(0.8);
|
opacity: 0.6;
|
}
|
|
100% {
|
transform: scale(1);
|
-webkit-transform: scale(1);
|
opacity: 0.0;
|
}
|
}
|
|
@keyframes warn1 {
|
0% {
|
transform: scale(0.3);
|
-webkit-transform: scale(0.3);
|
opacity: 0.0;
|
}
|
|
25% {
|
transform: scale(0.3);
|
-webkit-transform: scale(0.3);
|
opacity: 0.1;
|
}
|
|
50% {
|
transform: scale(0.3);
|
-webkit-transform: scale(0.3);
|
opacity: 0.3;
|
}
|
|
75% {
|
transform: scale(0.5);
|
-webkit-transform: scale(0.5);
|
opacity: 0.6;
|
}
|
|
100% {
|
transform: scale(0.8);
|
-webkit-transform: scale(0.8);
|
opacity: 0.0;
|
}
|
}
|
|
@keyframes circle {
|
0% {
|
transform: rotate(0);
|
-webkit-transform: rotate(0);
|
}
|
100% {
|
transform: rotate(360deg);
|
-webkit-transform: rotate(360deg);
|
}
|
}
|
.container{
|
width: 100%;
|
height: 100%;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
background: url("../../../assets/loginPage/map-bg.jpg") no-repeat center;
|
background-size: 100% 100%;
|
.big-title{
|
height: 40px;
|
line-height: 40px;
|
font-size: 28px;
|
font-weight: bold;
|
margin: 10px 0 20px;
|
text-align: center;
|
color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
span{
|
width: 60px;
|
height: 1px;
|
background: #36FCFC;
|
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%;
|
height: 100%;
|
padding: 20px 20px 20px 100px;
|
box-sizing: border-box;
|
.line-map{
|
position: absolute;
|
width: calc(100% - 120px);
|
left: 110px;
|
top: 10px;
|
flex-direction: column;
|
align-items: center;
|
z-index: 99;
|
display: grid;
|
grid-template-columns: repeat(7,1fr);
|
grid-gap: 0;
|
|
.item{
|
width: calc((100vw - 120px)/ 7);
|
height: calc((100vh - 130px)/ 5);
|
padding: 20px 30px 20px 20px;
|
position: relative;
|
box-sizing: border-box;
|
|
section{
|
width: 28px;
|
height: 28px;
|
border-radius: 50%;
|
position: absolute;
|
border: 1px solid #00ff66;
|
top: -14px;
|
left: -14px;
|
|
.dot {
|
position: absolute;
|
width: 18px;
|
height: 18px;
|
left: 4px;
|
top: 4px;
|
-webkit-border-radius: 50%;
|
-moz-border-radius: 50%;
|
border: 1px solid #00ff66;
|
border-radius: 50%;
|
background-color:#00ff66;
|
z-index: 2;
|
}
|
.pulse {
|
position: absolute;
|
width: 56px;
|
height: 56px;
|
left: -15px;
|
top: -15px;
|
border: 1px solid #00ff66;
|
-webkit-border-radius: 50%;
|
-moz-border-radius: 50%;
|
border-radius: 50%;
|
z-index: 1;
|
opacity: 0;
|
-webkit-animation: warn 2s ease-out;
|
-moz-animation: warn 2s ease-out;
|
animation: warn 2s ease-out;
|
-webkit-animation-iteration-count: infinite;
|
-moz-animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
box-shadow: 1px 1px 30px #00ff66;
|
}
|
.pulse1 {
|
position: absolute;
|
width: 56px;
|
height: 56px;
|
left: -15px;
|
top: -15px;
|
border: 1px solid #3399ff;
|
-webkit-border-radius: 50%;
|
-moz-border-radius: 50%;
|
border-radius: 50%;
|
z-index: 1;
|
opacity: 0;
|
-webkit-animation: warn1 2s ease-out;
|
-moz-animation: warn1 2s ease-out;
|
animation: warn1 2s ease-out;
|
-webkit-animation-iteration-count: infinite;
|
-moz-animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
box-shadow: 1px 1px 30px #3399ff;
|
}
|
}
|
&>div{
|
padding: 10px 0;
|
border-radius: 8px;
|
background-image: linear-gradient(to right,rgba(8,109,209,.4),rgba(11,255,255,.2));
|
border: 1px solid rgba(54,252,252,.6);
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
|
div{
|
&:nth-of-type(2){
|
margin: 5px 0;
|
}
|
|
span{
|
display: inline-block;
|
width: 50%;
|
font-size: 14px;
|
color: #fff;
|
text-align: left;
|
|
&:first-of-type{
|
text-align: right;
|
color: rgba(255,255,255,.8);
|
}
|
}
|
}
|
}
|
|
p{
|
width: 140px;
|
height: 50px;
|
font-size: 18px;
|
line-height: 48px;
|
text-align: center;
|
color: #fff;
|
border-radius: 8px;
|
background-image: linear-gradient(to right,rgba(11,255,255,.2),rgba(8,109,209,.4));
|
border: 1px solid rgba(54,252,252,.6);
|
}
|
}
|
|
.item-t{
|
border-top: 1px solid #36FCFC;
|
}
|
.item-l{
|
border-left: 1px solid #36FCFC;
|
}
|
.warning{
|
&>section{
|
border: 1px solid #ff0000;
|
|
.dot{
|
border: 1px solid #ff0000;
|
background: #ff0000;
|
}
|
.pulse{
|
border: 1px solid #ff0000;
|
box-shadow: 1px 1px 30px #ff0000;
|
}
|
.pulse1{
|
border: 1px solid #ff0000;
|
box-shadow: 1px 1px 30px #ff0000;
|
}
|
}
|
|
&>div{
|
div:last-of-type{
|
span:nth-of-type(2){
|
color: #ff0000;
|
}
|
}
|
}
|
}
|
.undone{
|
&>section{
|
border: 1px solid #ccc;
|
|
.dot{
|
border: 1px solid #ccc;
|
background: #ccc;
|
}
|
.pulse{
|
display: none;
|
}
|
.pulse1{
|
display: none;
|
}
|
}
|
}
|
.pic-tit{
|
display: flex;
|
width: calc((100vw - 120px)/ 7);
|
height: 160px;
|
padding: 20px;
|
transform: translate(-20px,-40%);
|
flex-direction: column;
|
align-items: flex-start;
|
|
img{
|
width: calc((100vw - 120px)/ 7 - 40px);
|
height: 90px;
|
margin-bottom: 10px;
|
border-radius: 4px;
|
}
|
p{
|
font-size: 16px;
|
color: #00ffff;
|
font-weight: bold;
|
}
|
}
|
|
.water{
|
transform: none;
|
}
|
.start{
|
padding: 40px 0;
|
p{
|
margin-top: -21px;
|
margin-left: 20px;
|
}
|
span{
|
width: 1px;
|
height: 50px;
|
background: #36FCFC;
|
position: absolute;
|
top: -10px;
|
left: 0;
|
}
|
section{
|
position: absolute;
|
top: 30px;
|
left: -14px;
|
}
|
}
|
.finish{
|
padding: 0 40px;
|
p{
|
margin-top: -25px;
|
margin-left: 4px;
|
}
|
span{
|
width: 100%;
|
height: 1px;
|
background: #36FCFC;
|
position: absolute;
|
top: 0;
|
left: calc(40px - 100%);
|
}
|
section{
|
position: absolute;
|
top: -14px;
|
left: 30px;
|
}
|
}
|
}
|
.current-task{
|
position: absolute;
|
width: calc((500vw - 600px)/ 7);
|
z-index: 999999;
|
top: 0;
|
right: 0;
|
padding: 0 60px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.task-des{
|
padding: 10px 20px;
|
display: flex;
|
align-items: center;
|
border: 1px solid #36FCFC;
|
|
.task-des-l{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
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%;
|
|
.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;
|
}
|
|
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: -20px;
|
width: calc((200vw - 240px) / 7 + 60px);
|
height: calc(80vh - 109px);
|
background: rgba(0,100,190,.1);
|
border: 1px solid rgba(0,100,190,.4);
|
border-radius: 8px;
|
}
|
.section-2{
|
position: absolute;
|
left: calc((400vw - 480px)/ 7 + 70px);
|
top: calc((100vh - 130px)/ 5 - 20px);
|
width: calc((200vw - 240px) / 7 + 60px);
|
height: calc((300vh - 390px)/ 5 - 5px);
|
background: rgba(0,100,190,.1);
|
border: 1px solid rgba(0,100,190,.4);
|
border-radius: 8px;
|
}
|
.section-3{
|
position: absolute;
|
left: 100px;
|
top: calc(80vh - 119px);
|
width: calc((500vw - 600px)/ 7 + 30px);
|
height: calc((100vh - 130px)/ 5 + 20px);
|
background: rgba(0,100,190,.1);
|
border: 1px solid rgba(0,100,190,.4);
|
border-radius: 8px;
|
}
|
}
|
}
|
</style>
|
