矩形测风和对射测风动画

pages/home/detail/autodoor/autodoor.vue

@@ -364,11 +364,13 @@ export default {
           .getCameraById({ deviceid: IDString })
           .then((response) => {
             if (response.data.code == 200) {
+				if(response.data.result.records.length>0){
               this.viedeoUrl = response.data.result.records[0].addr;
               console.log(
                 response.data.result.records[0].addr,
                 "csssssssssssssss"
               );
+			  }
             } else {
               resolve(response);
             }

pages/home/detail/fanlocalAnimate/fanlocalAnimate.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/home/detail/windrectAnimate/windrectAnimate.vue

@@ -0,0 +1,195 @@
+<template>
+  <view style="width: 100%; height: 100%">
+            <div class="checkwind-echarts-div" v-if="type == 'windrect_rect'">
+                <div class="checkwind">
+                  <div class="sub_line" v-bind:class="state == '0'? 'top_state' : state == '1' ?  'middle_state' : state == '2' ?  'bottom_state' : 'bottom_state' " id="subline">
+                  </div>
+                </div>
+                <span>{{title}}</span>
+              </div>
+		<div class="checkwind-echarts-div" v-if="type == 'windrect_ds'">
+		      <div class="checkwind_ds">
+		        <div
+		          class="sub_line"
+		          v-bind:class="
+		            state == '0'
+		              ? 'top_state'
+		              : state == '1'
+		              ? 'middle_state'
+		              : state == '2'
+		              ? 'bottom_state'
+		              : 'bottom_state'
+		          "
+		          id="subline"
+		        ></div>
+		        <div
+		          class="sub_line1"
+		          v-bind:class="
+		            state == '0'
+		              ? 'top_state1'
+		              : state == '1'
+		              ? 'middle_state1'
+		              : state == '2'
+		              ? 'bottom_state1'
+		              : 'bottom_state1'
+		          "
+		          id="subline1"
+		        ></div>
+		        <div
+		          class="sub_line2"
+		          v-bind:class="
+		            state == '0'
+		              ? 'top_state2'
+		              : state == '1'
+		              ? 'middle_state2'
+		              : state == '2'
+		              ? 'bottom_state2'
+		              : 'bottom_state2'
+		          "
+		          id="subline2"
+		        ></div>
+		      </div>
+		      <span>{{ title }}</span>
+		    </div>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      height: "200px",
+    };
+  },
+  props: [
+    "state",
+    "title",
+    "height",
+    "type",
+  ],
+  methods: {},
+  onLoad(query) {},
+};
+</script>
+
+<style scoped>
+
+    /*门里面*/
+    div.checkwind{
+        width: 160px;
+        height: 160px;
+        background-image: url(../../../../static/wind.png);
+        background-size:100% 100%;
+        perspective: 800px;
+    }
+    /*左门/右门*/
+
+    div.checkwind .sub_line{
+        margin-top: 10px;
+        margin-left: 10px;
+        width:142px;
+        height:30px;
+        box-sizing:border-box;
+        float:left;
+        z-index: 1;
+        transition:all 2s ease;
+        background-image: url(../../../../static/line.png) ;
+        background-size:100% 100%;
+    }
+    div.checkwind .sub_line{
+        transform-origin:left center;
+        border-right:1px solid rgb(8, 8, 8);
+    }
+    .checkwind .top_state{
+      transform: translateY(5px);
+    }
+    .checkwind .middle_state{
+      transform: translateY(45px);
+    }
+    .checkwind .bottom_state{
+      transform: translateY(90px);
+    }
+</style>
+
+<style scoped>
+/*门里面*/
+div.checkwind_ds {
+  width: 160px;
+  height: 160px;
+  background-image: url(../../../../static/wind.png);
+  background-size: 100% 100%;
+  perspective: 800px;
+}
+/*左门/右门*/
+
+div.checkwind_ds .sub_line {
+  margin-top: 10px;
+  margin-left: 8px;
+  width: 180px;
+  height: 25px;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  transition: all 2s ease;
+  background-image: url(../../../../static/line_ds.png);
+  background-size: 100% 100%;
+}
+div.checkwind_ds .sub_line1 {
+  position: absolute;
+  top: 20px;
+  left: 12px;
+  width: 30px;
+  height: 35px;
+  box-sizing: border-box;
+  z-index: 4;
+  transition: all 2s ease;
+  background-image: url(../../../../static/wind_ds1.png);
+  background-size: 100% 100%;
+}
+div.checkwind_ds .sub_line2 {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 33px;
+  height: 38px;
+  box-sizing: border-box;
+  z-index: 4;
+  transition: all 2s ease;
+  background-image: url(../../../../static/wind_ds2.png);
+  background-size: 100% 100%;
+}
+div.checkwind_ds .sub_line {
+  transform-origin: left center;
+  border-right: 1px solid rgb(8, 8, 8);
+}
+.checkwind_ds .top_state {
+  transform: translateY(15px) rotateY(-40deg);
+  /* transform: rotateY(-20deg) */
+}
+.checkwind_ds .middle_state {
+  transform: translateY(45px) rotateY(0deg) scaleX(0.83);
+}
+.checkwind_ds .bottom_state {
+  transform: translateY(80px);
+}
+.checkwind_ds .top_state1 {
+  transform: translateY(0px);
+  /* transform: rotateY(-20deg) */
+}
+.checkwind_ds .middle_state1 {
+  transform: translateY(30px);
+}
+.checkwind_ds .bottom_state1 {
+  transform: translateY(65px);
+}
+.checkwind_ds .top_state2 {
+  transform: translateY(0px);
+  /* transform: rotateY(-20deg) */
+}
+.checkwind_ds .middle_state2 {
+  transform: translateY(35px);
+}
+.checkwind_ds .bottom_state2 {
+  transform: translateY(72px);
+}
+</style>