云台1.0

components.d.ts

@@ -12,7 +12,6 @@ declare module '@vue/runtime-core' {
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
     ARow: typeof import('ant-design-vue/es')['Row']
     Aside: typeof import('./src/components/aside/index.vue')['default']
-    ATable: typeof import('ant-design-vue/es')['Table']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATree: typeof import('ant-design-vue/es')['Tree']

src/views/page/VideoControl/VideoControlSimple.vue

@@ -6,30 +6,34 @@
   */
   -->
 <template>
-  <div>
+    <div class="camera-control" @mousewheel="wheel">
-    <div class="camera-control">
-      <div class="camera-operate">
-        <div class="camera-direct">
 
-          <!--上-->
-          <div class="upButton" style="background-position:-30px 0" @mousedown="upStart()" @mouseup="stopMove()">
-          </div>
         
+        <a-row>
+           <!--上-->
+          <div class="upButton" @mousedown="upStart()" @mouseup="stopMove()">
+          </div>
+        </a-row>
+         <a-row>
           <!--左-->
-          <div class="leftButton" style="background-position:0 -30px" @mousedown="leftStart()" @mouseup="stopMove()">
+          <div class="leftButton"  @mousedown="leftStart()" @mouseup="stopMove()">
           </div>
         
           <!--右-->
-          <div class="rightButton" style="background-position:-60px -30px" @mousedown="rightStart()"
+          <div class="rightButton" @mousedown="rightStart()"
             @mouseup="stopMove()">
           </div>
-
+         </a-row>
+         <a-row>
           <!--下-->
-          <div class="downButton" style="background-position:-30px -60px" @mousedown="downStart()"
+          <div class="downButton"  @mousedown="downStart()"
             @mouseup="stopMove()">
           </div>
+         </a-row>
+          
+
+          
       
-        </div>
         <!-- <div class="camera-function">
           <div class="function-box">
             <div class="function-item"
@@ -58,11 +62,8 @@
               title="抓拍列表">
             </div>
           </div> -->
-        </div>
-      </div>
-    </div>
   
-  </div>
+      </div>
 </template>
 
 <script lang="ts" setup>
@@ -113,6 +114,7 @@ function onvifOperateHandler(url: any, method: any, params: any, callback: any =
       if (!res.Errors) {
         // console.log("成功");
         if (callback && typeof callback === 'function') {
+          // console.log("执行回调");
           callback(res)
         }
       } else {
@@ -130,12 +132,12 @@ function checkExistOnvif() {
   // Check onvif server is exists, if not exists , add it
   let params = { cameraId: ip.value }
   onvifOperateHandler(url.value.isExist, 'get', params, (res: any) => {
-    console.log(res);
+    // console.log(res);
     if (!res.isSuccess || res.data !== true) {
-      console.log("不存在，请先注册");
+      // console.log("不存在，请先注册");
       onvifOperateHandler(url.value.add, 'post', params, (res: any) => {
-        console.log("注册信息", res);
+        console.log("注册成功", res);
-        console.log("注册成功");
+        // console.log("注册成功");
       })
     }
   })
@@ -230,13 +232,19 @@ function rightStart() {
 }
 
 //变倍+
-function zoomIn() {
+async function zoomIn() {
   let instruct = 'zoomIn'
   let step = currentStep.value
   let params = { cameraId: ip.value }
   let ptzParams = createPtzParam(instruct, step)
   Object.assign(params, ptzParams)
-  onvifOperateHandler(url.value.ptzMove, 'post', params)
+  onvifOperateHandler(url.value.ptzMove, 'post', params, (res:any)=>{
+    setTimeout(()=>{
+      // console.log("回调");
+      stopMove()
+    },400) 
+  })
+
 }
 //变倍-
 function zoomOut() {
@@ -245,7 +253,12 @@ function zoomOut() {
   let params = { cameraId: ip.value }
   let ptzParams = createPtzParam(instruct, step)
   Object.assign(params, ptzParams)
-  onvifOperateHandler(url.value.ptzMove, 'post', params)
+  onvifOperateHandler(url.value.ptzMove, 'post', params,(res:any)=>{
+    setTimeout(()=>{
+      // console.log("回调");
+      stopMove()
+    },400) 
+  })
 }
 
 //变焦+
@@ -276,19 +289,41 @@ function openImgListDialog(){
 
 }
 
+function wheel(e:any){
+  console.log(e);
+  e.stopPropagation()
+  if(e.wheelDelta==120){
+    zoomIn();
+    // stopMove();
+    
+  }
+  else if(e.wheelDelta== -120 ){
+    zoomOut();
+    // stopMove();
+  }
+}
+
+
 </script>
 
 <style scoped lang="less">
 .camera-control {
   /* color: #080000; */
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  // background: blue;
+  z-index: 0;
 }
 
 .camera-control .camera-operate {
-  display: -webkit-flex;
+  // display: -webkit-flex;
-  /* Safari */
+  // /* Safari */
-  display: flex;
+  // display: flex;
-  flex-direction: row;
+  // flex-direction: row;
-  justify-content: center;
+  // justify-content: center;
 }
 
 
@@ -420,11 +455,64 @@ input[type='range']::-webkit-slider-thumb:active {
 
 
 .upButton{
-  width: 100%;
+  position: fixed;
-
+  left: 50%;
+  transform: translateX(-50%);
+  height: 5vh;
+  width: 60vw;
+  // background: red;
+}
+.upButton:hover{
+  background: linear-gradient(to top, transparent,rgba(59, 59, 238, 0.637));
+  transition:all 1s ease-out;
+  cursor:pointer
+}
+.leftButton{
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 80vh; 
+  width: 50px;
+  // background: green;
+}
+.leftButton:hover{
+  background: linear-gradient(to left, transparent,80%,rgba(59, 59, 238, 0.637));
+  transition:all 1s ease-out;
+  cursor:pointer
+}
+
+.rightButton{
+  position: fixed;
+  left: 85%;
+  transform: translateY(-50%);
+  top: 50%;
+  height: 80vh; 
+  width: 50px;
+  // background: url("@/assets/images/ptzIcons/a.png") center no-repeat;
+  // background-size: contain;
+  // transition:1s
+}
+.rightButton:hover{
+  background: linear-gradient(to right, transparent,80%,rgba(59, 59, 238, 0.637));
+  transition:all 1s ease-out;
+  cursor:pointer
+}
+
+
+.downButton{
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  bottom: 0;
+  height: 5vh;
+  width: 60vw;
+  // background: yellow;
+}
+.downButton:hover{
+  background: linear-gradient( transparent,rgba(59, 59, 238, 0.637));
+  transition:all 1s ease-out;
+  cursor:pointer
 }
 
-
-
-
 </style>

src/views/page/cameraCenter.vue

@@ -21,6 +21,7 @@
                 <span>1</span>
             </div>
         </div>
+            <VideoControlSimple></VideoControlSimple>      
     </div>
 </template>
 
@@ -33,6 +34,7 @@ import { useStore } from '@/store/index';
 import { apiUrl } from "@/axios";
 import { storeToRefs } from 'pinia';
 import Msg from "@/utils/message";
+import VideoControlSimple from "./VideoControl/VideoControlSimple.vue";
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 let piniaStore = useStore();
 let player = <HTMLVideoElement>document.querySelector('#videoPlayer')
@@ -312,7 +314,7 @@ onUnmounted(() => {
     height: 100vh;
     position: relative;
     overflow: hidden;
-
+    z-index: 1;
     #videoCanvas {
         position: absolute;
     }