From 5571ed73b6d4b0996af6f9c881fa2e45cf08fc4d Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期三, 21 九月 2022 16:03:20 +0800
Subject: [PATCH] Default Changelist
---
/dev/null | 878 ----------------------------------------------------------
1 files changed, 0 insertions(+), 878 deletions(-)
diff --git a/src/views/intellectInspect/inspectBigScreen/index.vue b/src/views/intellectInspect/inspectBigScreen/index.vue
deleted file mode 100644
index 6d33be2..0000000
--- a/src/views/intellectInspect/inspectBigScreen/index.vue
+++ /dev/null
@@ -1,704 +0,0 @@
-<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>
diff --git a/src/views/intellectInspect/intelligentMap/index.vue b/src/views/intellectInspect/intelligentMap/index.vue
deleted file mode 100644
index e44e7ec..0000000
--- a/src/views/intellectInspect/intelligentMap/index.vue
+++ /dev/null
@@ -1,878 +0,0 @@
-<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="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">
- <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>
-import { ElMessage } from 'element-plus';
-import { ElMessageBox } from 'element-plus/es';
-import screenfull from 'screenfull';
-
-export default {
- name: 'NewForm',
- props: {
-
- },
- data(){
- return{
- 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 components 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;
- }
- }
- .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%;
- 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>
--
Gitblit v1.9.2