Merge branch 'mes-ui20201118'

pages/welcome/index.vue

@@ -2,14 +2,13 @@
   <div class="router-main flex fc-m fa-m pr">
     <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>
     <div class="bdImg pr" @click="pageClick">
       <div
@@ -32,16 +31,89 @@
           </li>
         </ul>
       </div>
+      <!--    @click="removeLine(s)" -->
+      <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>
   </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: [879, 214],
+          end: [922,188],
+        },
+        {
+          start: [387, 277],
+          end: [420, 298],
+        },
+         {
+          start: [505 ,351],
+          end: [539, 372],        
+        },
+        {
+          start: [507 ,445],
+          end: [547, 423],
+        },
+        {
+          start: [639, 370],
+          end: [678 ,345],
+        },
+         {
+          start: [670, 400],
+          end: [762 ,403],
+        },
+        {
+          start: [637, 424],
+          end: [740, 483],
+        },
+         {
+          start: [874 ,474],
+          end: [837, 496],
+        },
+        {
+          start: [1050 ,187],
+          end: [1081, 205],
+        },
+         {
+          start: [1253, 251],
+          end: [1293 ,226],
+        },
+        {
+          start: [1312, 371],
+          end: [1341, 390],
+        },
+         {
+          start: [185 ,648],
+          end: [241 ,617],
+        },
+         {
+          start: [375 ,541],
+          end: [432 ,509],
+        },
+         {
+          start: [873 ,568],
+          end: [934 ,600],
+        },
+      ],
+      // start: 0,
+      // dotA: [],
+      // dotB: [],
+      // dots: [],
       menus: [],
       list: [],
       arrList: [],
@@ -56,37 +128,57 @@ export default {
   },
   mounted() {
     this.load();
+    // this.lineClick();
   },
   methods: {
     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';
-            }
-          })
-          console.log(this.menus)
+          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";
+            }
+          });
         }
       });
     },
-    pageClick() {
+    pageClick(event) {
+      // console.log("event", event);
+      // console.log(event.layerX, event.layerY);
       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) {
@@ -104,13 +196,13 @@ export default {
         this.menuPos = { left, top };
       }
     },
-    navClick(v,index) {
+    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{
+      } else {
         this.menu = false;
       }
     },
@@ -118,6 +210,23 @@ export default {
       this.oneShow = false;
       this.menu = false;
     },
+    removeLine(s){
+      this.lines.splice(s,1);
+    },
+    lineStyles(line, s) {
+      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.atan2(line.end[1] - line.start[1], line.end[0] - line.start[0]) /
+        0.017453292;
+      return {
+        width: l + "px",
+        transform: "rotate(" + sinA + "deg)",
+        top: line.start[1] + "px",
+        left: line.start[0] + "px",
+      };
+    },
   },
 };
 </script>
@@ -130,7 +239,6 @@ export default {
     top: 90px;
     left: 95px;
     .navMenuLi {
-      cursor: pointer;
       width: 185px;
       height: 99px;
       color: #ffffff;
@@ -165,7 +273,46 @@ 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: 85%;
+        }
+      }
+      // }
+    }
+    .line:hover{
+      border: 1px dotted red;
+      height: 6px;
+      cursor:pointer;
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      background: red;
+      border-radius: 50%;
+    }
   }
   .menu {
     width: 100px;