加方向控制

src/pages/Monitor.vue

@@ -56,7 +56,7 @@
               	class="iconfont icon-quanping fSBtn"
       ></i>
       </div>
-      <div class="video-box">
+      <div class="video-box" style="display: flex;justify-content: space-between;align-items: center;padding-left: 13px;background: black;height: calc(60vh - 45px);min-height: calc(60vh - 45px);">
         <div class="fbg" v-if="fScreen"></div>
         <div
           class="fbgBtn"
@@ -86,45 +86,7 @@
               Idlist[count - 1]
             }}</span>
             <div class="vedio_btn_control">
-              <div class="direc">
-                <div
-                  @click.stop="configCamera(oneId, 'takephoto', '')"
-                  class="cameraCtr"
-                ></div>
-                <div
-                  @mousedown.stop="configCamera(oneId, 'move', 0)"
-                  @mouseup.stop="stopConfigCamera(oneId)"
-                  class="upCtr"
-                ></div>
-                <div
-                  @mousedown.stop="configCamera(oneId, 'move', 1)"
-                  @mouseup="stopConfigCamera(oneId)"
-                  class="downCtr"
-                ></div>
-                <div
-                  @mousedown.stop="configCamera(oneId, 'move', 2)"
-                  @mouseup="stopConfigCamera(oneId)"
-                  class="leftCtr"
-                ></div>
-                <div
-                  @mousedown.stop="configCamera(oneId, 'move', 3)"
-                  @mouseup="stopConfigCamera(oneId)"
-                  class="rightCtr"
-                ></div>
-              </div>
-              <div class="zoom">
-                <!-- 无论插件还是费插件都可以放大缩小 -->
-                <span
-                  class="addCtr"
-                  @mousedown.stop="configCamera(oneId, 'move', 8)"
-                  @mouseup="stopConfigCamera(oneId)"
-                ></span>
-                <span
-                  class="reduceCtr"
-                  @mousedown.stop="configCamera(oneId, 'move', 9)"
-                  @mouseup="stopConfigCamera(oneId)"
-                ></span>
-              </div>
+              
             </div>
             <i
               @click.stop="oneFullFun($event, count)"
@@ -140,6 +102,60 @@
             ></div>
           </div>
         </div>
+        <div style="padding-left: 13px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;"
+        >
+          <div class="direc">
+            <div
+              @mousedown="configCamera(id, 'move', 0)"
+              @mouseup="stopConfigCamera(id)"
+              class="upCtr"
+            ></div>
+            <div
+              @mousedown="configCamera(id, 'move', 1)"
+              @mouseup="stopConfigCamera(id)"
+              class="downCtr"
+            ></div>
+            <div
+              @mousedown="configCamera(id, 'move', 2)"
+              @mouseup="stopConfigCamera(id)"
+              class="leftCtr"
+            ></div>
+            <div
+              @mousedown="configCamera(id, 'move', 3)"
+              @mouseup="stopConfigCamera(id)"
+              class="rightCtr"
+            ></div>
+          </div> 
+          <div v-if="true" class="btnBox">
+            <div class="zoom">
+              <!-- 无论插件还是费插件都可以放大缩小  -->
+              <span
+                class="addCtr"
+                @mousedown="configCamera(id, 'move', 8)"
+                @mouseup="stopConfigCamera(id)"
+              ></span>
+              <span
+                class="reduceCtr"
+                @mousedown="configCamera(id, 'move', 9)"
+                @mouseup="stopConfigCamera(id)"
+              ></span>
+            </div>
+            <!-- <div
+              v-show="videotape == 1"
+              class="playBack"
+              @click="playBackDialogVisible = true"
+            ></div>
+            <div
+              @click="addEquipDialogVisible = true"
+              class="addequip"
+              style="padding-top: 20px"
+            ></div>
+            <div @click="fScreenFun()" class="fSBtn1"></div> -->
+          </div>
+        </div>
         <!-- <div class="split-screen">
           <span
             :class="divNum == 1 ? 'sp0 sp' : 'sp00 sp'"
@@ -213,54 +229,9 @@
             @click="splitPage('jia')"
           ></div>
         </div>
-        <!-- <div class="direc">
-          <div
-            @mousedown="configCamera(id, 'move', 0)"
-            @mouseup="stopConfigCamera(id)"
-            class="upCtr"
-          ></div>
-          <div
-            @mousedown="configCamera(id, 'move', 1)"
-            @mouseup="stopConfigCamera(id)"
-            class="downCtr"
-          ></div>
-          <div
-            @mousedown="configCamera(id, 'move', 2)"
-            @mouseup="stopConfigCamera(id)"
-            class="leftCtr"
-          ></div>
-          <div
-            @mousedown="configCamera(id, 'move', 3)"
-            @mouseup="stopConfigCamera(id)"
-            class="rightCtr"
-          ></div>
-        </div>  -->
-        <div v-if="false" class="btnBox">
-          <!-- <div class="zoom">
-             无论插件还是费插件都可以放大缩小 
-            <span
-              class="addCtr"
-              @mousedown="configCamera(id, 'move', 8)"
-              @mouseup="stopConfigCamera(id)"
-            ></span>
-            <span
-              class="reduceCtr"
-              @mousedown="configCamera(id, 'move', 9)"
-              @mouseup="stopConfigCamera(id)"
-            ></span>
-          </div> -->
-          <div
-            v-show="videotape == 1"
-            class="playBack"
-            @click="playBackDialogVisible = true"
-          ></div>
-          <div
-            @click="addEquipDialogVisible = true"
-            class="addequip"
-            style="padding-top: 20px"
-          ></div>
-          <div @click="fScreenFun()" class="fSBtn1"></div>
-        </div>
+        
+        
+        
       </div>
     </div>
     <!-- 拍照 -->
@@ -584,14 +555,17 @@ export default {
     //关闭方向
     stopConfigCamera(id) {
       if (id != "") {
-        this.$axios({
-          method: "POST",
-          url: "ctrl_camera",
-          data: this.qs.stringify({
-            device_id: id,
-            ctrl: "stop",
-          }),
-        });
+        setTimeout(()=>{
+          this.$axios({
+            method: "POST",
+            url: "ctrl_camera",
+            data: this.qs.stringify({
+              device_id: id,
+              ctrl: "stop",
+            }),
+          });
+        },500)
+        
       }
     },
     //分屏默认显示视频
@@ -1221,4 +1195,93 @@ li {
     }
   }
 }
+.direc {
+  position: relative;
+  z-index: 0;
+  text-align: center;
+  width: 160px;
+  height: 160px;
+  margin: 10px auto;
+  // position: relative;
+  background: url(../assets/images/monitor/direction-btn.png) no-repeat
+    center;
+  background-size: contain;
+  & > div {
+    position: absolute;
+    width: 53px;
+    height: 53px;
+    cursor: pointer;
+  }
+  .upCtr {
+    top: 0px;
+    transform: translateX(-50%);
+    margin-left: 50%;
+  }
+  .downCtr {
+    bottom: 0px;
+    transform: translateX(-50%);
+    margin-left: 50%;
+  }
+  .leftCtr {
+    transform: translateY(-50%);
+    left: 0;
+    margin-top: 50%;
+  }
+  .rightCtr {
+    transform: translateY(-50%);
+    right: 0;
+    margin-top: 50%;
+  }
+  .cameraCtr {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+}
+.btnBox {
+  .zoom,
+  .playBack,
+  .playtype0,
+  .playtype1,
+  .addequip,
+  .fSBtn1,
+  .fSBtn2 {
+    width: 140px;
+    height: 32px;
+    margin: auto;
+    margin-bottom: 5px;
+    cursor: pointer;
+  }
+  .zoom {
+    background: no-repeat center / 100%
+      url(../assets/images/monitor/zoom-btn.png);
+    display: flex;
+    & > span {
+      flex: 1;
+      height: 32px;
+    }
+  }
+  .playBack {
+    background: url(../assets/images/monitor/playback-btn.png) no-repeat
+      center;
+  }
+  .playtype0 {
+    background: url(../assets/images/monitor/playtype0.png) no-repeat
+      center;
+  }
+  .playtype1 {
+    background: url(../assets/images/monitor/playtype1.png) no-repeat
+      center;
+  }
+  .addequip {
+    background: url(../assets/images/monitor/addequip.png) no-repeat
+      center;
+  }
+  .fSBtn1 {
+    background: url(../assets/images/monitor/fS.png) no-repeat center;
+    position: relative;
+  }
+}
 </style>