<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="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>
|
<div>
|
<span>指标</span>
|
<p>压力</p>
|
</div>
|
</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);
|
}
|
};
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this components only -->
|
<style scoped lang="scss">
|
@keyframes warn {
|
0% {
|
transform: scale(0.3);
|
-webkit-transform: scale(0.3);
|
opacity: 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;
|
}
|
}
|
|
@keyframes warn1 {
|
0% {
|
transform: scale(0.3);
|
-webkit-transform: scale(0.3);
|
opacity: 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;
|
}
|
}
|
|
@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;
|
}
|
}
|
|
.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 40px 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, 0.4), rgba(11, 255, 255, 0.2));
|
border: 1px solid rgba(54, 252, 252, 0.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, 0.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, 0.2), rgba(8, 109, 209, 0.4));
|
border: 1px solid rgba(54, 252, 252, 0.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-data {
|
position: absolute;
|
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%;
|
|
.data-area {
|
display: flex;
|
align-items: center;
|
border-bottom: 1px solid #00ffff;
|
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(255, 255, 255, 0.8);
|
|
span {
|
color: #00ffff;
|
}
|
}
|
}
|
|
.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(255, 255, 255, 0.8);
|
|
p {
|
margin-top: 6px;
|
color: #00ffff;
|
}
|
|
&:first-of-type {
|
border-right: 1px solid #36fcfc;
|
}
|
}
|
}
|
}
|
.section-1 {
|
position: absolute;
|
left: 70px;
|
top: -10px;
|
width: calc((200vw - 240px) / 7 + 60px);
|
height: 630px;
|
background: rgba(0, 100, 190, 0.1);
|
border: 1px solid rgba(0, 100, 190, 0.4);
|
border-radius: 8px;
|
}
|
.section-2 {
|
position: absolute;
|
left: calc((400vw - 480px) / 7 + 70px);
|
top: 150px;
|
width: calc((200vw - 240px) / 7 + 60px);
|
height: 470px;
|
background: rgba(0, 100, 190, 0.1);
|
border: 1px solid rgba(0, 100, 190, 0.4);
|
border-radius: 8px;
|
}
|
.section-3 {
|
position: absolute;
|
left: 100px;
|
top: 630px;
|
width: calc((500vw - 600px) / 7 + 30px);
|
height: 180px;
|
background: rgba(0, 100, 190, 0.1);
|
border: 1px solid rgba(0, 100, 190, 0.4);
|
border-radius: 8px;
|
}
|
}
|
}
|
</style>
|
