lct

Your Name

2022-08-08 891c00081c70124f8060537db846dfc5016761f6

lct

 src/App.vue

@@ -77,10 +77,10 @@
                    (state.i18nLocale as string | null) = locale;
                });
                // 获取缓存中的布局配置
                if (Local.get('themeConfig')) {
                    storesThemeConfig.setThemeConfig(Local.get('themeConfig'));
                    document.documentElement.style.cssText = Local.get('themeConfigStyle');
                }
                // if (Local.get('themeConfig')) {
                //     storesThemeConfig.setThemeConfig(Local.get('themeConfig'));
                //     document.documentElement.style.cssText = Local.get('themeConfigStyle');
                // }
                // 获取缓存中的全屏配置
                if (Session.get('isTagsViewCurrenFull')) {
                    stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));

 src/assets/loginPage/back-icon.png

 src/assets/loginPage/device-pic.png

 src/assets/loginPage/star-bg.png

 src/assets/loginPage/task-job-pic.png

 src/assets/loginPage/xj-bg.png

 src/assets/loginPage/xj-icon.png

 src/views/intellectInspect/intelligentMap/index.vue

@@ -1,710 +1,829 @@
<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 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() {
            this.$router.go(-1);
            // this.$router.push('/discriminate');
        }
  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 {
  @keyframes warn {
    0% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 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;
      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;
      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;
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      opacity: 0.6;
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0;
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 0.0;
    }
}
  }

@keyframes warn1 {
  @keyframes warn1 {
    0% {
        transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 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;
      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;
      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;
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      opacity: 0.6;
    }

    100% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        opacity: 0;
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      opacity: 0.0;
    }
}

@keyframes circle {
  }
  
  @keyframes circle {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
      transform: rotate(0);
      -webkit-transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
    }
}
.container {
  }
  .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: 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;
    .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: center;
        justify-content: space-between;

        span {
            width: 60px;
            height: 1px;
            background: #36fcfc;
            margin: 0 20px;
        }
    }
        .task-des{
          padding: 10px 20px;
          display: flex;
          align-items: center;
          border: 1px solid #36FCFC;

    .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;
          .task-des-l{
            display: flex;
            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);
                }
            font-size: 20px;
            color: #36FCFC;
            border-right: 1px solid #36FCFC;
            padding-right: 20px;
            img{
              margin-bottom: 10px;
            }

            .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;
                }
            }
          }
          .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 {
            position: absolute;
            z-index: 999999;
            width: 270px;
            height: 142px;
            left: 50%;
            padding: 20px 30px;
        .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;
            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;
                    }
                }
            img{
              width: 30px;
              height: 30px;
              margin-right: 10px;
              animation: circle 1s ease-in-out infinite;
            }

            .data-spot {
                display: flex;
                align-items: flex-start;
                margin-top: 10px;
            div{
              font-size: 15px;
              color: rgba(4,12,59,.8);

                & > 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;
                    }
                }
              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;
              }
            }
          }
        }
        .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;
      }
      .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;
          }
        }
        .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;

        .star{
          position: inherit;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          img{
            width: 100%;
            height: auto;
          }
        }
        .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;
        }
      }
      .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>

 src/views/safeKnowledgeSys/index.vue

对比新文件
@@ -0,0 +1,39 @@
<template>
  <div class="home-container">
    <iframe src="http://39.104.85.193"></iframe>
  </div>
</template>

<script>
export default {
  name: 'safeKnowledgeSys',
  props: {

  },
  data(){
    return{

    }
  },
  created() {

  },
  methods:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .home-container{
    height: calc(100vh - 114px);
    box-sizing: border-box;
    overflow: hidden;

    iframe{
      width: 100%;
      height: 100%;
    }
  }
</style>