master

src/components/fan.vue

@@ -0,0 +1,636 @@
+<template>
+  <div>
+    <div class="tip">
+      <!-- <img src="../assets/img/shop/tips.png" alt="" /> -->
+    </div>
+    <div class="img">
+      <div
+        id="fan"
+        v-drag="{
+          go,
+          setPan,
+          getPan,
+          getA,
+          setA,
+          getB,
+          setB,
+          getC,
+          setC,
+          getD,
+          setD,
+          getE,
+          setE,
+        }"
+      >
+        <img src="../assets/img/fan/1.png" alt="" />
+      </div>
+      <div
+        id="motor"
+        v-drag="{
+          go,
+          setPan,
+          getPan,
+          getA,
+          setA,
+          getB,
+          setB,
+          getC,
+          setC,
+          getD,
+          setD,
+          getE,
+          setE,
+        }"
+      >
+        <img src="../assets/img/fan/2.png" alt="" />
+      </div>
+      <div
+        id="base"
+        v-drag="{
+          go,
+          setPan,
+          getPan,
+          getA,
+          setA,
+          getB,
+          setB,
+          getC,
+          setC,
+          getD,
+          setD,
+          getE,
+          setE,
+        }"
+      >
+        <img src="../assets/img/fan/3.png" alt="" />
+      </div>
+      <div
+        id="a4"
+        v-drag="{
+          go,
+          setPan,
+          getPan,
+          getA,
+          setA,
+          getB,
+          setB,
+          getC,
+          setC,
+          getD,
+          setD,
+          getE,
+          setE,
+        }"
+      >
+        <img src="../assets/img/fan/4.png" alt="" />
+      </div>
+      <div
+        id="screan"
+        v-drag="{
+          go,
+          setPan,
+          getPan,
+          getA,
+          setA,
+          getB,
+          setB,
+          getC,
+          setC,
+          getD,
+          setD,
+          getE,
+          setE,
+        }"
+      >
+        <img src="../assets/img/fan/5.png" alt="" />
+      </div>
+      <div
+        id="line"
+        v-drag="{
+          go,
+          setPan,
+          getPan,
+          getA,
+          setA,
+          getB,
+          setB,
+          getC,
+          setC,
+          getD,
+          setD,
+          getE,
+          setE,
+        }"
+      >
+        <img src="../assets/img/fan/6.png" alt="" />
+      </div>
+    </div>
+    <div class="right"><img src="../assets/img/right.png" alt="" /></div>
+    <div class="button">进入CocoBlockly编程平台</div>
+    <video
+      id="musicC"
+      :src="require('../assets/music/click.mp3')"
+      v-show="false"
+    ></video>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      that: this,
+      panThing: "",
+      aaa: 0,
+      bbb: 0,
+      ccc: 0,
+      ddd: 0,
+      eee: 0,
+    };
+  },
+  directives: {
+    drag: {
+      // 指令的定义
+      inserted: function (el, binding) {
+        // el.drag();
+        console.log(el);
+        //获取元素
+        // var dv = document.getElementById("dv");
+        let x = 0;
+        let y = 0;
+        let l = 0;
+        let t = 0;
+        let isDown = false;
+        var fan = document.getElementById("fan");
+        var motor = document.getElementById("motor");
+        var base = document.getElementById("base");
+        var a4 = document.getElementById("a4");
+        var screan = document.getElementById("screan");
+        var line = document.getElementById("line");
+        var musicC = document.getElementById("musicC");
+
+        //鼠标按下事件
+        el.onmousedown = function (e) {
+          //获取x坐标和y坐标
+          e.preventDefault();
+          x = e.clientX;
+          y = e.clientY;
+
+          //获取左部和顶部的偏移量
+          l = el.offsetLeft;
+          t = el.offsetTop;
+          //开关打开
+          isDown = true;
+          //设置样式
+          el.style.cursor = "move";
+          subiao(el);
+        };
+        function subiao(cdiv) {
+          document.onmousemove = function (e) {
+            if (isDown == false) {
+              return;
+            }
+            //获取x和y
+            var nx = e.clientX;
+            var ny = e.clientY;
+            //计算移动后的左偏移量和顶部的偏移量
+            var nl = nx - (x - l);
+            var nt = ny - (y - t);
+
+            cdiv.style.left = nl + "px";
+            cdiv.style.top = nt + "px";
+
+            if (el.id == "fan") {
+              binding.value.setPan("fan");
+              moveP(nl, nt, 1);
+            }
+
+            if (el.id == "motor") {
+              binding.value.setPan("motor");
+              moveP(nl, nt, 2);
+            }
+
+            if (el.id == "base") {
+              binding.value.setPan("base");
+              moveP(nl, nt, 3);
+            }
+
+            if (el.id == "a4") {
+              binding.value.setPan("a4");
+              moveP(nl, nt, 4);
+            }
+
+            if (el.id == "screan") {
+              binding.value.setPan("screan");
+              moveP(nl, nt, 5);
+            }
+
+            if (el.id == "line") {
+              binding.value.setPan("line");
+              moveP(nl, nt, 6);
+            }
+          };
+        }
+        //鼠标抬起事件
+        el.onmouseup = function (e) {
+          //开关关闭
+          isDown = false;
+          el.style.cursor = "default";
+          document.onmousemove = null;
+          var nx = e.clientX;
+          var ny = e.clientY;
+          var nl = nx - (x - l);
+          var nt = ny - (y - t);
+
+          if (binding.value.getPan() == "fan") {
+            st(nl, nt, 1);
+          }
+
+          if (binding.value.getPan() == "motor") {
+            st(nl, nt, 2);
+          }
+
+          if (binding.value.getPan() == "base") {
+            st(nl, nt, 3);
+          }
+
+          if (binding.value.getPan() == "a4") {
+            st(nl, nt, 4);
+          }
+
+          if (binding.value.getPan() == "screan") {
+            st(nl, nt, 5);
+          }
+
+          if (binding.value.getPan() == "line") {
+            st(nl, nt, 6);
+          }
+          pan();
+        };
+        function pan() {
+          var fanL = fan.offsetLeft;
+          var fanT = fan.offsetTop;
+
+          var motorL = motor.offsetLeft;
+          var motorT = motor.offsetTop;
+
+          var baseL = base.offsetLeft;
+          var baseT = base.offsetTop;
+
+          var a4L = a4.offsetLeft;
+          var a4T = a4.offsetTop;
+
+          var screanL = screan.offsetLeft;
+          var screanT = screan.offsetTop;
+
+          var lineL = line.offsetLeft;
+          var lineT = line.offsetTop;
+
+          var btn = document.getElementsByClassName("button")[0];
+          var right = document.getElementsByClassName("right")[0];
+
+          if (
+            binding.value.getA() == 1 &&
+            binding.value.getB() == 1 &&
+            binding.value.getC() == 1 &&
+            binding.value.getD() == 1 &&
+            binding.value.getE() == 1
+          ) {
+            btn.className = "button dark";
+            btn.onclick = function () {
+              binding.value.go();
+            };
+            right.style.display = "block";
+            right.style.left = baseL + 435 + "px";
+            right.style.top = baseT + 65 + "px";
+          } else {
+            btn.className = "button";
+            btn.onclick = null;
+            right.style.display = "none";
+          }
+        }
+        function st(nl, nt, type) {
+          var fanL = fan.offsetLeft;
+          var fanT = fan.offsetTop;
+
+          var motorL = motor.offsetLeft;
+          var motorT = motor.offsetTop;
+
+          var baseL = base.offsetLeft;
+          var baseT = base.offsetTop;
+
+          var a4L = a4.offsetLeft;
+          var a4T = a4.offsetTop;
+
+          var screanL = screan.offsetLeft;
+          var screanT = screan.offsetTop;
+
+          var lineL = line.offsetLeft;
+          var lineT = line.offsetTop;
+
+          var mbL = motorL - baseL;
+          var mbT = motorT - baseT;
+
+          var sbL = screanL - baseL;
+          var sbT = screanT - baseT;
+
+          var abL = a4L - baseL;
+          var abT = a4T - baseT;
+
+          var fmL = fanL - motorL;
+          var fmT = fanT - motorT;
+
+          var lbL = lineL - baseL;
+          var lbT = lineT - baseT;
+
+          if (270 < mbL && mbL < 310 && -140 < mbT && mbT < -100 && type == 2) {
+            motor.style.left = baseL + 292 + "px";
+            motor.style.top = baseT - 121 + "px";
+            binding.value.setA(1);
+            playMusic();
+          } else if (type == 2) {
+            binding.value.setA(0);
+          }
+
+          if (
+            270 < mbL &&
+            mbL < 310 &&
+            -140 < mbT &&
+            mbT < -100 &&
+            type == 1 &&
+            binding.value.getD() == 1
+          ) {
+            motor.style.left = baseL + 292 + "px";
+            motor.style.top = baseT - 121 + "px";
+            fan.style.left = baseL + 292 - 141 + "px";
+            fan.style.top = baseT - 121 - 126 + "px";
+            binding.value.setA(1);
+            playMusic();
+          } else if (type == 1 && binding.value.getD() == 1) {
+            binding.value.setA(0);
+          }
+
+          if (-40 < sbL && sbL < 20 && -250 < sbT && sbT < -210 && type == 5) {
+            screan.style.left = baseL - 19 + "px";
+            screan.style.top = baseT - 231 + "px";
+            binding.value.setB(1);
+            playMusic();
+          } else if (type == 5) {
+            binding.value.setB(0);
+          }
+
+          if (73 < abL && abL < 113 && 77 < abT && abT < 117 && type == 4) {
+            a4.style.left = baseL + 93 + "px";
+            a4.style.top = baseT + 97 + "px";
+            binding.value.setC(1);
+            playMusic();
+          } else if (type == 4) {
+            binding.value.setC(0);
+          }
+
+          if (
+            -161 < fmL &&
+            fmL < -121 &&
+            -146 < fmT &&
+            fmT < -106 &&
+            type == 1 &&
+            binding.value.getD() == 0
+          ) {
+            fan.style.left = motorL - 141 + "px";
+            fan.style.top = motorT - 126 + "px";
+            binding.value.setD(1);
+            playMusic();
+          } else if (type == 1 && binding.value.getD() == 0) {
+            binding.value.setD(0);
+          }
+
+          if (
+            -132 < lbL &&
+            lbL < -92 &&
+            -64 < lbT &&
+            lbT < -24 &&
+            type == 6 &&
+            binding.value.getA() == 1 &&
+            binding.value.getB() == 1 &&
+            binding.value.getC() == 1
+          ) {
+            line.style.left = baseL - 112 + "px";
+            line.style.top = baseT - 44 + "px";
+            binding.value.setE(1);
+            playMusic();
+          } else if (type == 6) {
+            binding.value.setE(0);
+          } else if (
+            !(
+              binding.value.getA() == 1 &&
+              binding.value.getB() == 1 &&
+              binding.value.getC() == 1
+            )
+          ) {
+            binding.value.setE(0);
+          }
+        }
+        function playMusic() {
+          musicC.play();
+        }
+
+        function moveP(nl, nt, type) {
+          if (binding.value.getA() == 1 && type == 3) {
+            motor.style.left = nl + 292 + "px";
+            motor.style.top = nt - 121 + "px";
+          }
+
+          if (
+            binding.value.getA() == 1 &&
+            binding.value.getD() == 1 &&
+            type == 3
+          ) {
+            fan.style.left = nl + 292 - 141 + "px";
+            fan.style.top = nt - 121 - 126 + "px";
+          }
+
+          if (binding.value.getB() == 1 && type == 3) {
+            screan.style.left = nl - 19 + "px";
+            screan.style.top = nt - 231 + "px";
+          }
+
+          if (binding.value.getC() == 1 && type == 3) {
+            a4.style.left = nl + 93 + "px";
+            a4.style.top = nt + 97 + "px";
+          }
+
+          if (binding.value.getD() == 1 && type == 1) {
+            motor.style.left = nl + 141 + "px";
+            motor.style.top = nt + 126 + "px";
+          }
+
+          if (binding.value.getD() == 1 && type == 2) {
+            fan.style.left = nl - 141 + "px";
+            fan.style.top = nt - 126 + "px";
+          }
+
+          if (binding.value.getE() == 1 && type == 3) {
+            line.style.left = nl - 112 + "px";
+            line.style.top = nt - 44 + "px";
+          }
+        }
+      },
+    },
+  },
+  methods: {
+    go() {
+      this.$router.push("/blockly");
+    },
+    setPan(value) {
+      this.panThing = value;
+    },
+    getPan() {
+      return this.panThing;
+    },
+    setA(value) {
+      this.aaa = value;
+    },
+    getA() {
+      return this.aaa;
+    },
+    setB(value) {
+      this.bbb = value;
+    },
+    getB() {
+      return this.bbb;
+    },
+    setC(value) {
+      this.ccc = value;
+    },
+    getC() {
+      return this.ccc;
+    },
+    setD(value) {
+      this.ddd = value;
+    },
+    getD() {
+      return this.ddd;
+    },
+    setE(value) {
+      this.eee = value;
+    },
+    getE() {
+      return this.eee;
+    },
+  },
+};
+</script>
+
+<style scoped>
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.tip {
+  margin: 25px 0 30px 20px;
+}
+
+#fan > img,
+#motor > img,
+#base > img,
+#line > img,
+.right > img,
+#a4 > img,
+#screan > img {
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+
+.img {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin: auto;
+  width: 70%;
+  /* position: relative; */
+}
+
+#fan {
+  width: 425px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 5;
+}
+
+#base {
+  width: 423.33px;
+  position: absolute;
+  top: 64%;
+  left: 15%;
+  transform: translateY(-50%);
+  z-index: 4;
+}
+
+#motor {
+  width: 134.16px;
+  position: absolute;
+  top: 40%;
+  left: 40%;
+  transform: translateY(-50%);
+  z-index: 3;
+}
+
+#a4 {
+  width: 231.66px;
+  position: absolute;
+  left: 21%;
+  top: 36%;
+  transform: translateY(-50%);
+  z-index: 5;
+}
+#screan {
+  width: 178.33px;
+  position: absolute;
+  left: 39%;
+  top: 70%;
+  transform: translateY(-50%);
+  z-index: 3;
+}
+#line {
+  width: 470.83px;
+  position: absolute;
+  left: 72%;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+
+.button {
+  color: #fff;
+  background: #8ca1de;
+  width: 550px;
+  height: 55px;
+  font-size: 20px;
+  text-align: center;
+  line-height: 55px;
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  user-select: none;
+}
+
+.right {
+  width: 40px;
+  position: absolute;
+  left: 55%;
+  top: 70%;
+  display: none;
+}
+
+.dark {
+  background: #5b79d0;
+  cursor: pointer;
+}
+</style>

src/router/index.js

@@ -20,6 +20,7 @@ import necklace from '@/components/necklace'
 import login from '@/components/login'
 import SlideVerify from 'vue-monoplasty-slide-verify';
 import unity from '@/components/unity';
+import fan from '@/components/fan';
 
 Vue.use(Router).use(ElementUI).use(SlideVerify);
 
@@ -31,6 +32,11 @@ export default new Router({
       name: 'police',
       component: police
     },
+    {
+      path: '/fan',
+      name: 'fan',
+      component: fan
+    },
     {
       path: '/blockly',
       name: 'blockly',