流程图1

package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}

ui/src/views/monitor/materialChild/materialChild1.vue

@@ -157,6 +157,72 @@
     </div>
 
 
+
+
+    <div class="line l_23">
+      <img src="@/assets/materialImg/arrow23.png" style="width:182px;height:26px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan23"> -->
+    </div>
+    <div class="line l_24">
+      <img src="@/assets/materialImg/arrow24.png" style="width:90px;height:12px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan24"> -->
+    </div>
+    <div class="line l_25">
+      <img src="@/assets/materialImg/arrow25.png" style="width:215px;height:2px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan25"> -->
+    </div>
+    <div class="line l_26">
+      <img src="@/assets/materialImg/arrow26.png" style="width:20px;height:137px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan26"> -->
+    </div>
+    <div class="line l_27">
+      <img src="@/assets/materialImg/arrow27.png" style="width:710px;height:65px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan27"> -->
+    </div>
+    <div class="line l_28">
+      <img src="@/assets/materialImg/arrow28.png" style="width:20px;height:64px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan28"> -->
+    </div>
+    <div class="line l_29">
+      <img src="@/assets/materialImg/arrow29.png" style="width:20px;height:272px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan29"> -->
+    </div>
+    <div class="line l_30">
+      <img src="@/assets/materialImg/arrow30.png" style="width:853px;height:65px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan30"> -->
+    </div>
+    <div class="line l_31">
+      <img src="@/assets/materialImg/arrow31.png" style="width:321px;height:12px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan31"> -->
+    </div>
+    <div class="line l_32">
+      <img src="@/assets/materialImg/arrow32.png" style="width:20px;height:165px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan32"> -->
+    </div>
+    <div class="line l_33">
+      <img src="@/assets/materialImg/arrow33.png" style="width:216px;height:2px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan33"> -->
+    </div>
+    <div class="line l_34">
+      <img src="@/assets/materialImg/arrow34.png" style="width:91px;height:12px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan34"> -->
+    </div>
+    <div class="line l_35">
+      <img src="@/assets/materialImg/arrow35.png" style="width:180px;height:26px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan35"> -->
+    </div>
+    <div class="line l_36">
+      <img src="@/assets/materialImg/arrow36.png" style="width:68px;height:20px">
+      <!-- <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan36"> -->
+    </div>
+
+
+
+
+
+
+
+
   </div>
 </template>
 
@@ -207,7 +273,7 @@ export default {
 
   .MImg1 {
     position: absolute;
-    top: 580px;
+    top: 582px;
     left: 437px;
   }
 
@@ -219,26 +285,26 @@ export default {
 
   .MImg3 {
     position: absolute;
-    top: 703px;
-    left: 447px;
+    top: 699px;
+    left: 458px;
   }
 
   .MImg4 {
     position: absolute;
-    top: 836px;
-    left: 447px;
+    top: 834px;
+    left: 457px;
   }
 
   .nodeImg1 {
     position: absolute;
     top: 620px;
-    left: 594px;
+    left: 603px;
   }
 
   .nodeImg2 {
     position: absolute;
     top: 925px;
-    left: 594px;
+    left: 602px;
   }
 
 
@@ -290,12 +356,12 @@ export default {
 
   .label_p8 {
     top: 791px;
-    left: 296px;
+    left: 307px;
   }
 
   .label_p9 {
     top: 828px;
-    left: 323px;
+    left: 335px;
   }
 
   .label_p10 {
@@ -416,29 +482,29 @@ export default {
   }
 
   .title_p4 {
-    width: 93px;
-    height: 40px;
+    width: 99px;
+    height: 48px;
     padding-left: 16px;
     top: 620px;
-    left: 202px;
+    left: 207px;
     background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
   }
 
   .title_p5 {
-    width: 93px;
-    height: 40px;
+    width: 99px;
+    height: 48px;
     padding-right: 16px;
-    top: 803px;
-    left: 202px;
+    top: 800px;
+    left: 210px;
     background: url('../../../assets/materialImg/title_b1.png') no-repeat 30%;
   }
 
   .title_p6 {
-    width: 93px;
-    height: 40px;
+    width: 99px;
+    height: 48px;
     padding-left: 16px;
-    top: 925px;
-    left: 202px;
+    top: 923px;
+    left: 206px;
     background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
   }
 
@@ -1218,8 +1284,8 @@ export default {
 
 
     &.l_23 {
-      left: 295px;
-      top: 472px;
+      left: 648px;
+      top: 630px;
 
       .aniMovelan23 {
         -webkit-animation-name: aniMovelan23;
@@ -1251,6 +1317,511 @@ export default {
         }
       }
     }
+
+
+
+    &.l_24 {
+      left: 518px;
+      top: 636px;
+
+      .aniMovelan24 {
+        -webkit-animation-name: aniMovelan24;
+        animation-name: aniMovelan24;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan24 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_25 {
+      left: 303px;
+      top: 630px;
+
+      .aniMovelan25 {
+        -webkit-animation-name: aniMovelan25;
+        animation-name: aniMovelan25;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan25 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_26 {
+      left: 508px;
+      top: 639px;
+
+      .aniMovelan26 {
+        -webkit-animation-name: aniMovelan26;
+        animation-name: aniMovelan26;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan26 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_27 {
+      left: 514px;
+      top: 712px;
+
+      .aniMovelan27 {
+        -webkit-animation-name: aniMovelan27;
+        animation-name: aniMovelan27;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan27 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_28 {
+      left: 1074px;
+      top: 712px;
+
+      .aniMovelan28 {
+        -webkit-animation-name: aniMovelan28;
+        animation-name: aniMovelan28;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan28 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_29 {
+      left: 617px;
+      top: 661px;
+
+      .aniMovelan29 {
+        -webkit-animation-name: aniMovelan29;
+        animation-name: aniMovelan29;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan29 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_30 {
+      left: 512px;
+      top: 733px;
+
+      .aniMovelan30 {
+        -webkit-animation-name: aniMovelan30;
+        animation-name: aniMovelan30;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan30 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_31 {
+      left: 305px;
+      top: 816px;
+
+      .aniMovelan31 {
+        -webkit-animation-name: aniMovelan31;
+        animation-name: aniMovelan31;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan31 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_32 {
+      left: 507px;
+      top: 789px;
+
+      .aniMovelan32 {
+        -webkit-animation-name: aniMovelan32;
+        animation-name: aniMovelan32;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan32 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_33 {
+      left: 301px;
+      top: 934px;
+
+      .aniMovelan33 {
+        -webkit-animation-name: aniMovelan33;
+        animation-name: aniMovelan33;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan33 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_34 {
+      left: 516px;
+      top: 940px;
+
+      .aniMovelan34 {
+        -webkit-animation-name: aniMovelan34;
+        animation-name: aniMovelan34;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan34 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_35 {
+      left: 295px;
+      top: 472px;
+
+      .aniMovelan35 {
+        -webkit-animation-name: aniMovelan35;
+        animation-name: aniMovelan35;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan35 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_36 {
+      left: 1364px;
+      top: 633px;
+
+      .aniMovelan36 {
+        -webkit-animation-name: aniMovelan36;
+        animation-name: aniMovelan36;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan36 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+
+
+    &.l_37 {
+      left: 295px;
+      top: 472px;
+
+      .aniMovelan37 {
+        -webkit-animation-name: aniMovelan37;
+        animation-name: aniMovelan37;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        -webkit-animation-iteration-count: infinite;
+        font-style: inherit;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+        position: absolute;
+        top: 0;
+        left: -2px;
+        transform: rotate(90deg);
+      }
+
+      @keyframes aniMovelan37 {
+        0% {
+          top: 154px;
+          opacity: 0;
+        }
+
+        100% {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
   }
 }
 </style>