引导页画图

pages/welcome/index.vue

 <template>
   <div class="router-main flex fc-m fa-m pr">
-    <ul class="pa navMenu">
+    <!-- <ul class="pa navMenu">
       <li
-        class="navMenuLi flex fc-m fa-m pr"
-        v-for="(item, index) in menus"
-        :key="index"
-        @mouseenter="navClick(item,index)"
+        class="navMenuLi flex fc-m fa-m pr cursor"
+        v-for="(item, indx) in menus"
+        :key="indx"
+        @mouseenter="navClick(item, indx)"
       >
         <Icon :type="item.icons" class="f16" />{{ item.name }}
       </li>
-
-    </ul>
+    </ul> -->
     <div class="bdImg pr" @click="pageClick">
-      <div
+      <!-- <div
         class="one pa cursor"
         :class="{ oneHover: oneShow && isIndex == index }"
         v-for="(item, index) in arrList"
         :key="index"
         v-bind:style="item.style"
         @mouseenter="getPosition(item, index)"
-      ></div>
+      ></div> -->
       <div class="pa menu" v-bind:style="menuPos" v-show="menu">
         <ul class="bdTitleBox" @mouseleave="leavePosition">
           <li
@@ -32,16 +31,41 @@
           </li>
         </ul>
       </div>
+      <!--  @mouseenter="a()" -->
+      <div
+        v-for="(line, s) in lines"
+        class="pa line"
+        :style="lineStyles(line,s)"
+        :key="'s'+s"
+        :title="line.start.join()+':'+line.end.join()"
+      >
+        <div class="lineMarker pa"></div>
+      </div>
+      <div v-for="(dot,iv) in dots" class="pa dot" :style="dot" :key="'v'+iv"></div>
     </div>
   </div>
 </template>
 
 <script>
-import { isInteger } from "lodash";
+import { has, hasIn, isInteger } from "lodash";
 import viewerVue from "../test/viewer.vue";
 export default {
   data() {
     return {
+      lines: [
+        {
+          start: [100, 100],
+          end: [250, 100],
+        },
+         {
+          start: [100, 100],
+          end: [250, 100],
+        },
+      ],
+      start:0,
+      dotA:[],
+      dotB:[],
+      dots:[],
       menus: [],
       list: [],
       arrList: [],
@@ -56,37 +80,81 @@ export default {
   },
   mounted() {
     this.load();
+    // this.lineClick();
   },
   methods: {
+    lineList(event) {
+      console.log(event);
+    },
+    // lineClick() {
+    //   let pos = -6;
+    //   var id;
+    //   let idx;
+    //   this.lineList.map((z, i) => {
+    //     if (z.left == "-6px") {
+    //       idx = i;
+    //       id = setInterval(frame, 100); //无限循环
+    //     }
+    //   });
+    //   var _this = this;
+    //   function frame() {
+    //     if (pos == 38) {
+    //       pos = 0;
+    //     } else {
+    //       pos++;
+    //       _this.$nextTick(() => {
+    //         _this.lineList[idx].left = pos + "px";
+    //       });
+    //     }
+    //   }
+    // },
     load() {
       this.$api.get(`${systemUrl}/menu/getusermenu?id=mes_roter`).then((r) => {
         if (r.result) {
           let arr = r.result[0].children.map((l) => {
-            if ( !this.$u.isNull(l.description) &&  l.description.indexOf("{") > -1 ) {
+            if (
+              !this.$u.isNull(l.description) &&
+              l.description.indexOf("{") > -1
+            ) {
               l.style = eval("(" + l.description + ")");
             }
             return l;
           });
           this.arrList = arr;
-          this.arrList.map(v=>{
-            if(v.name=='项目管理'){
-                this.menus[0]=v;
-                this.menus[0].icons='ios-list-box-outline';
-            }else if(v.name=='文档管理'){
-                this.menus[1]=v;
-                this.menus[1].icons='md-document';
-            }else if(v.name=='大屏展示'){
-                this.menus[2]=v;
-                this.menus[2].icons='ios-stats';
+          this.arrList.map((v) => {
+            if (v.name == "项目管理") {
+              this.menus[0] = v;
+              this.menus[0].icons = "ios-list-box-outline";
+            } else if (v.name == "文档管理") {
+              this.menus[1] = v;
+              this.menus[1].icons = "md-document";
+            } else if (v.name == "大屏展示") {
+              this.menus[2] = v;
+              this.menus[2].icons = "ios-stats";
             }
-          })
-          console.log(this.menus)
+          });
         }
       });
     },
-    pageClick() {
-      this.menu = false;
-      this.oneShow = false;
+    pageClick(event) {
+      // console.log("event", event);
+      // console.log(event.pageX, event.pageY);
+      // this.menu = false;
+      // this.oneShow = false;
+      this.dots.push({
+        left:event.layerX+'px',top:event.layerY+'px'
+      })
+      if(this.start===0){
+        this.dotA=[event.layerX,event.layerY];
+        this.start=1;
+      }else{
+        this.dotB=[event.layerX,event.layerY];
+        this.start=0;
+        this.lines.push({
+          start:this.dotA,
+          end:this.dotB
+        })
+      }
     },
     clickLi(v) {
       if (v) {
@@ -95,28 +163,52 @@ export default {
       this.menu = false;
     },
     getPosition(item, index) {
-      if (item) {
-        this.isIndex = index;
-        this.oneShow = true;
-        this.list = item.children;
-        this.menu = true;
-        var { left, top } = item.style;
-        this.menuPos = { left, top };
-      }
+      // if (item) {
+      //   this.isIndex = index;
+      //   this.oneShow = true;
+      //   this.list = item.children;
+      //   this.menu = true;
+      //   var { left, top } = item.style;
+      //   this.menuPos = { left, top };
+      // }
     },
-    navClick(v,index) {
-      if (v.children && v.children.length > 0) {
-        var { left, top } = v.style;
-        this.list = v.children;
-         this.menuPos = { left, top };
-        this.menu = true;
-      }else{
-          this.menu = false;
-      }
+    navClick(v, index) {
+      // if (v.children && v.children.length > 0) {
+      //   var { left, top } = v.style;
+      //   this.list = v.children;
+      //   this.menuPos = { left, top };
+      //   this.menu = true;
+      // } else {
+      //   this.menu = false;
+      // }
     },
     leavePosition() {
-      this.oneShow = false;
-      this.menu = false;
+      // this.oneShow = false;
+      // this.menu = false;
+    },
+    lineStyles(line,s) {
+      // console.log(line);
+      let w = (line.end[0] - line.start[0]);
+      let h =line.end[1] - line.start[1];
+      let l = Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
+      let sinA =Math.sin(h/l)* 180 / Math.PI;
+      // // if(line.end[1]>line.start[1]){
+      // //   sinA=-sinA;
+      // // }
+      // var sinA=0;
+      // if(s>0){
+      //   sinA=45;
+      // }
+     
+       let sinB =Math.cos(w/l)* 180 / Math.PI;
+      console.warn("line",w,h,sinA,sinB);
+      console.log(sinA);
+      return {
+        width: l + "px",
+        transform: "rotate(" + sinA + "deg)",
+        top: line.start[1] + "px",
+        left: line.start[0] + "px",
+      };
     },
   },
 };
@@ -130,7 +222,6 @@ export default {
     top: 90px;
     left: 95px;
     .navMenuLi {
-      cursor: pointer;
       width: 185px;
       height: 99px;
       color: #ffffff;
@@ -165,7 +256,42 @@ export default {
   .bdImg {
     height: 822px;
     width: 1700px;
-    background: url("../../assets/images/home/router/routerMain.png") no-repeat;
+    background: url("../../assets/images/home/router/welcome.png") no-repeat;
+    .line {
+      height: 2px;
+      // top: 50px;
+      // left: 50px;
+      // width: 200px;
+      background: linear-gradient(to right, #A7C4D8, #24BDDD);
+      transform-origin:left;
+      .lineMarker {
+        display: inline-block;
+        width: 7px;
+        height: 7px;
+        left: 0;
+        top: 0;
+        transform: rotate(50deg) translateY(-4px);
+        animation: myfirst 1s infinite;
+        background: url("../../assets/images/home/router/linemarker.png")
+          no-repeat;
+      }
+      @keyframes myfirst {
+        from {
+          left: 0%;
+        }
+        to {
+          left: 95%;
+        }
+      }
+      // }
+    }
+    .dot{
+      width: 8px;
+      height: 8px;
+      background: red;
+      border-radius: 50%;
+      
+    }
   }
   .menu {
     width: 100px;