xiugai

src/App.vue

@@ -38,12 +38,12 @@
     <div
       id="alarmBox"
       class="alarm"
-      @touchstart.stop.prevent="touchStart"
-      @touchmove.stop.prevent="touchMove"
-      @touchend.stop.prevent="touchEnd"
+      @touchstart.stop="touchStart"
+      @touchmove.stop="touchMove"
+      @touchend.stop="touchEnd"
       :style="{ top: top }"
     >
-      <div class="header">报警信息</div>
+      <div class="header" @click="goup">报警信息</div>
       <div class="inner-list">
         <div class="item" v-for="item in 20" :key="item">
           <div class="key">监控</div>
@@ -53,6 +53,18 @@
         </div>
       </div>
     </div>
+    <div class="pop" v-if="showPop">
+      <img
+        v-if="!showProjectList"
+        @click="kc1"
+        src="./assets/image/logo2.png"
+        alt=""
+      />
+      <div class="poject-list" v-else>
+        <div class="title1">项目选择</div>
+        <div class="btn1" @click="kc2">陆家嘴滨江中心</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -65,11 +77,11 @@ export default {
   data() {
     return {
       navList: [
-        {
-          url: require("./assets/image/icon1.png"),
-          label: "欢迎页",
-          routerName: "welcome",
-        },
+        // {
+        //   url: require("./assets/image/icon1.png"),
+        //   label: "欢迎页",
+        //   routerName: "welcome",
+        // },
         {
           url: require("./assets/image/icon2.png"),
           label: "首页",
@@ -125,20 +137,17 @@ export default {
       ],
       activeIndex: 0,
       pageY: 0,
-      top: "90vh",
+      top: "720px",
+      startPageY: "",
+      endPageY: "",
+      showPop: false,
+      showProjectList: false,
     };
   },
   created() {
     // this.getBuildListData();
   },
   methods: {
-    // 点击logo触发开场动画
-    kc0() {
-      this.$axios.post("/osc/sendInt", {
-        arg: 0,
-        name: "/KC",
-      });
-    },
     getBuildListData() {
       this.$axios.get("/building/getBuildingList").then((e) => {
         this.$store.commit("setBuildList", e.data);
@@ -155,25 +164,33 @@ export default {
     },
     navClickHandle(index) {
       this.activeIndex = index;
-      if (index == 0) {
-        // 开场动画 1
-        this.$axios.post("/osc/sendInt", {
-          arg: 1,
-          name: "/KC",
+      // if (index == 0) {
+      //   // 开场动画 1
+      //   this.$axios.post("/osc/sendInt", {
+      //     arg: 1,
+      //     name: "/KC",
+      //   });
+      // } else {
+      //   // 一级动画
+      // }
+      this.$axios
+        .post("/osc/sendInt", {
+          arg: 0,
+          name: "/LY",
+        })
+        .then(() => {
+          this.$axios.post("/osc/sendInt", {
+            arg: index,
+            name: "/YJ",
+          });
         });
-      } else {
-        // 一级动画
-        this.$axios.post("/osc/sendInt", {
-          arg: index - 1,
-          name: "/YJ",
-        });
-      }
       let routerName = this.navList[index].routerName;
       if (routerName && routerName != this.$route.name) {
         this.$router.push({ name: routerName });
       }
     },
     touchStart(e) {
+      this.startPageY = e.targetTouches[0].pageY;
       if (this.pageY == 0) {
         this.pageY = e.targetTouches[0].pageY;
       }
@@ -181,17 +198,17 @@ export default {
     touchMove(e) {
       let pageY = e.targetTouches[0].pageY;
       this.top = pageY + "px";
+      this.endPageY = e.targetTouches[0].pageY;
     },
     touchEnd() {
+      if (!this.endPageY) return;
+      if (this.startPageY < 760 && this.startPageY > 730) return;
       setTimeout(() => {
         let pageY = this.top.replace("px", "");
-        console.log("pageY: ", pageY);
         if (pageY <= 690 && pageY >= 540) {
-          console.log(1);
-          this.top = 620 + "px";
+          // this.top = 620 + "px";
           this.moveToS(pageY, 620);
         } else if (pageY > 690) {
-          console.log(2);
           this.moveToS(pageY, 720);
         } else if (pageY < 540) {
           this.moveToS(pageY, 220);
@@ -200,9 +217,9 @@ export default {
     },
     moveToS(oldTop, newTop) {
       let count = 10;
-      console.log(111);
       // 总时长 300ms
       // let time1 = time || 300;
+      this.top = oldTop + "px";
       let sp = (newTop - oldTop) / count;
       let timer = setInterval(() => {
         this.top = Number(this.top.replace("px", "")) + Number(sp) + "px";
@@ -212,6 +229,38 @@ export default {
         }
       }, 20);
     },
+    goup() {
+      if (this.startPageY < 760 && this.startPageY > 730) {
+        this.moveToS(695, 220);
+      }
+    },
+    // 点击logo触发开场动画
+    kc0() {
+      this.$axios
+        .post("/osc/sendInt", {
+          arg: 0,
+          name: "/KC",
+        })
+        .then(() => {
+          console.log("showPop");
+          this.showPop = true;
+        });
+    },
+    kc1() {
+      this.showProjectList = true;
+      this.$axios.post("/osc/sendInt", {
+        arg: 1,
+        name: "/KC",
+      });
+    },
+    kc2() {
+      this.showPop = false;
+      this.showProjectList = false;
+      this.$axios.post("/osc/sendInt", {
+        arg: 2,
+        name: "/KC",
+      });
+    },
   },
 };
 </script>
@@ -382,15 +431,18 @@ export default {
     border-radius: 10px;
     color: #333;
     padding: 40px 30px;
+    padding-top: 0;
     box-sizing: border-box;
     overflow: scroll;
     .header {
-      position: absolute;
-      top: 10px;
-      left: 390px;
+      position: static;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
       font-size: 15px;
       font-weight: 400;
       color: #838a99;
+      z-index: 9;
     }
     .inner-list {
       background: #f0f0f6;
@@ -416,5 +468,51 @@ export default {
       }
     }
   }
+
+  @keyframes scaleDraw {
+    /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
+    0% {
+      transform: scale(1); /*开始为原始大小*/
+    }
+    50% {
+      transform: scale(0.96); /*放大1.1倍*/
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  .pop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      animation-name: scaleDraw; /*关键帧名称*/
+      animation-timing-function: ease-in-out; /*动画的速度曲线*/
+      animation-iteration-count: infinite; /*动画播放的次数*/
+      animation-duration: 4s; /*动画所花费的时间*/
+    }
+    .poject-list {
+      // background: #fff;
+      margin-top: -130px;
+      .title1 {
+        color: #737780;
+        font-size: 28px;
+        text-align: center;
+        margin-bottom: 40px;
+      }
+      .btn1 {
+        background: rgba(255, 255, 255, 0.2);
+        transform: scale(1.5);
+      }
+    }
+  }
 }
 </style>

src/views/anfang.vue

@@ -49,7 +49,7 @@
     </div>
     <div class="bottom">
       <div class="title-box">
-        <div class="title">设备型号</div>
+        <div class="title">设备列表</div>
         <div class="style-line"></div>
       </div>
       <div class="option-box">
@@ -144,6 +144,14 @@ export default {
   },
   created() {
     this.init();
+    this.$axios
+      .get("/smartSecurity/getInspectionLine", { lineId: 1 })
+      .then((e) => {
+        console.log(e);
+      });
+    this.$axios.get("/smartSecurity/getInspectionLineList").then((e) => {
+      console.log(e);
+    });
   },
   methods: {
     init() {

src/views/homepage.vue

 <template>
   <div class="homepage">
     <div class="title-box">
-      <div class="title">展示类型</div>
+      <div class="title">数值更改</div>
       <div class="style-line"></div>
     </div>
+    <input type="text" class="input-word" placeholder="请输入PM2.5值" />
     <div class="submit-box">
+      <div class="btn1 active">提交</div>
+    </div>
+    <!-- <div class="submit-box">
       <div
         class="btn1"
         :class="{ active: index == activeIndex }"
@@ -14,7 +18,7 @@
       >
         {{ item }}
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -33,6 +37,15 @@ export default {
 
 <style lang="less" scoped>
 .homepage {
+  .input-word {
+    width: 746px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid #adbad0;
+    opacity: 0.6;
+    box-sizing: border-box;
+    padding-left: 12px;
+  }
   .submit-box {
     margin-top: 20px;
     display: flex;