加方向控制

config/index.js

@@ -16,6 +16,7 @@ module.exports = {
         // target: 'http://192.168.1.106:8000/',
         // target: 'http://192.168.1.66:9000/',
         target: 'http://192.168.1.107:8000/',
+        // target: 'http://192.168.1.102:8006/',//孙加可
         changeOrigin: true,
         pathRewrite: {
           '/': '' //重写接口

src/pages/Monitor.vue

@@ -55,7 +55,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"
@@ -151,6 +151,65 @@
             ></div>
           </div>
         </div>
+
+        
+        <div style="padding-left: 13px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;"
+        >
+          <!-- {{ id }} -->
+          <div class="direc">
+            <!-- <div
+              @click.stop="configCamera(id, 'takephoto', '')"
+              class="cameraCtr"
+            ></div> -->
+            <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 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="taskFacility"  v-show="addrPolt" class="addequip"></div> -->
+            <!-- <div @click="addEquipDialogVisible = true" class="addequip"></div>
+            <div @click="fScreenFun()" class="fSBtn1"></div> -->
+          </div>
+        </div>
       </div>
       <div style="width: 100%;height: 4px;background: #4844DB;margin-top: 40px;margin-bottom: 5px;text-align: center;">
         <img style="width: 23px;position: relative;top: -7px;cursor: pointer;transition: .3s;
@@ -224,51 +283,9 @@
             @click="splitPage('jia')"
           ></span> -->
         </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" style="margin: 50px 0 0 0">
-          <!-- <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="taskFacility"  v-show="addrPolt" class="addequip"></div> -->
-          <div @click="addEquipDialogVisible = true" class="addequip"></div>
-          <div @click="fScreenFun()" class="fSBtn1"></div>
-        </div>
+        
+        
+        
       </div>
     </div>
     <!-- 拍照 -->
@@ -563,6 +580,7 @@ export default {
     },
     //上下左右和拍照
     configCamera(id, ctrl, movenum) {
+      console.log(id+'---'+ctrl+'---'+movenum)
       if (id != "") {
         if (ctrl == "takephoto") {
           this.$axios({
@@ -606,14 +624,16 @@ 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)
       }
     },
     //分屏默认显示视频
@@ -1238,6 +1258,7 @@ li {
       }
     }
   }
+  
 
   .vedio_btn_control {
     display: none;
@@ -1304,6 +1325,96 @@ 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;
+  }
+}
+
 // .select-veido>>>.el-input--small .el-input__inner {
 //     background: none;
 // }