云台

components.d.ts

@@ -10,6 +10,7 @@ declare module '@vue/runtime-core' {
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    ARow: typeof import('ant-design-vue/es')['Row']
     ATree: typeof import('ant-design-vue/es')['Tree']
     Draggable: typeof import('./src/components/Draggable.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/views/page/VideoControl/VideoControlSimple.vue

@@ -6,35 +6,33 @@
   */
   -->
 <template>
-    <div class="camera-control" @mousewheel="wheel">
+  <div class="camera-control" @mousewheel="wheel">
-
+
-        
+
-        <a-row>
+    <a-row>
-           <!--上-->
+      <!--上-->
-          <div class="upButton" @mousedown="upStart()" @mouseup="stopMove()">
+      <div class="upButton" @mousedown="upStart()" @mouseup="stopMove()">
-          </div>
+      </div>
-        </a-row>
+    </a-row>
-         <a-row>
+    <a-row>
-          <!--左-->
+      <!--左-->
-          <div class="leftButton"  @mousedown="leftStart()" @mouseup="stopMove()">
+      <div class="leftButton" @mousedown="leftStart()" @mouseup="stopMove()">
-          </div>
+      </div>
-        
+
-          <!--右-->
+      <!--右-->
-          <div class="rightButton" @mousedown="rightStart()"
+      <div class="rightButton" @mousedown="rightStart()" @mouseup="stopMove()">
-            @mouseup="stopMove()">
+      </div>
-          </div>
+    </a-row>
-         </a-row>
+    <a-row>
-         <a-row>
+      <!--下-->
-          <!--下-->
+      <div class="downButton" @mousedown="downStart()" @mouseup="stopMove()">
-          <div class="downButton"  @mousedown="downStart()"
+      </div>
-            @mouseup="stopMove()">
+    </a-row>
-          </div>
+
-         </a-row>
+
-          
+
-
+
-          
+    <!-- <div class="camera-function">
-      
-        <!-- <div class="camera-function">
           <div class="function-box">
             <div class="function-item"
               style="background-position:-128px 0;border-right: 1px rgba(179, 177, 177, 0.97) dotted;"
@@ -44,7 +42,7 @@
               title="变倍-">
             </div>
           </div> -->
-          <!-- <div class="function-box">
+    <!-- <div class="function-box">
             <div class="function-item"
               style="background-position:-128px -30px;border-right:1px rgba(179, 177, 177, 0.97) dotted; "
               @mousedown="focusIn()" @mouseup="focusStop()" title="变焦+">
@@ -53,7 +51,7 @@
               @mouseup="focusStop()" title="变焦-">
             </div>
           </div> -->
-          <!-- <div class="function-box">
+    <!-- <div class="function-box">
             <div class="function-item"
               style="background-position:-202px 0; border-right:1px rgba(179, 177, 177, 0.97) dotted;"
               @mousedown="handleScreenSnap()" title="抓拍">
@@ -62,8 +60,8 @@
               title="抓拍列表">
             </div>
           </div> -->
-  
+
-      </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -238,11 +236,11 @@ async function zoomIn() {
   let params = { cameraId: ip.value }
   let ptzParams = createPtzParam(instruct, step)
   Object.assign(params, ptzParams)
-  onvifOperateHandler(url.value.ptzMove, 'post', params, (res:any)=>{
+  onvifOperateHandler(url.value.ptzMove, 'post', params, (res: any) => {
-    setTimeout(()=>{
+    setTimeout(() => {
       // console.log("回调");
       stopMove()
-    },400) 
+    }, 400)
   })
 
 }
@@ -253,11 +251,11 @@ function zoomOut() {
   let params = { cameraId: ip.value }
   let ptzParams = createPtzParam(instruct, step)
   Object.assign(params, ptzParams)
-  onvifOperateHandler(url.value.ptzMove, 'post', params,(res:any)=>{
+  onvifOperateHandler(url.value.ptzMove, 'post', params, (res: any) => {
-    setTimeout(()=>{
+    setTimeout(() => {
       // console.log("回调");
       stopMove()
-    },400) 
+    }, 400)
   })
 }
 
@@ -281,23 +279,23 @@ function focusStop() {
 }
 
 //抓拍
-function handleScreenSnap(){
+function handleScreenSnap() {
 
 }
-function openImgListDialog(){
+function openImgListDialog() {
 
 
 }
 
-function wheel(e:any){
+function wheel(e: any) {
   console.log(e);
   e.stopPropagation()
-  if(e.wheelDelta==120){
+  if (e.wheelDelta == 120) {
     zoomIn();
     // stopMove();
-    
+
   }
-  else if(e.wheelDelta== -120 ){
+  else if (e.wheelDelta == -120) {
     zoomOut();
     // stopMove();
   }
@@ -454,7 +452,7 @@ input[type='range']::-webkit-slider-thumb:active {
 }
 
 
-.upButton{
+.upButton {
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
@@ -462,44 +460,48 @@ input[type='range']::-webkit-slider-thumb:active {
   width: 60vw;
   // background: red;
 }
-.upButton:hover{
+
-  background: linear-gradient(to top, transparent,80%,rgba(59, 59, 238, 0.637));
+.upButton:hover {
-  transition:all 1s ease-out;
+  background: linear-gradient(to top, transparent, 80%, rgba(59, 59, 238, 0.637));
-  cursor:pointer
+  transition: all 1s ease-out;
+  cursor: pointer
 }
-.leftButton{
+
+.leftButton {
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
-  height: 80vh; 
+  height: 80vh;
   width: 50px;
   // background: green;
 }
-.leftButton:hover{
+
-  background: linear-gradient(to left, transparent,80%,rgba(59, 59, 238, 0.637));
+.leftButton:hover {
-  transition:all 1s ease-out;
+  background: linear-gradient(to left, transparent, 80%, rgba(59, 59, 238, 0.637));
-  cursor:pointer
+  transition: all 1s ease-out;
+  cursor: pointer
 }
 
-.rightButton{
+.rightButton {
   position: fixed;
-  left: 85%;
+  left: 97.4%;
   transform: translateY(-50%);
   top: 50%;
-  height: 80vh; 
+  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));
+.rightButton:hover {
-  transition:all 1s ease-out;
+  background: linear-gradient(to right, transparent, 80%, rgba(59, 59, 238, 0.637));
-  cursor:pointer
+  transition: all 1s ease-out;
+  cursor: pointer
 }
 
 
-.downButton{
+.downButton {
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
@@ -509,10 +511,10 @@ input[type='range']::-webkit-slider-thumb:active {
   width: 60vw;
   // background: yellow;
 }
-.downButton:hover{
-  background: linear-gradient( transparent,80%,rgba(59, 59, 238, 0.637));
-  transition:all 1s ease-out;
-  cursor:pointer
-}
 
+.downButton:hover {
+  background: linear-gradient(transparent, 80%, rgba(59, 59, 238, 0.637));
+  transition: all 1s ease-out;
+  cursor: pointer
+}
 </style>

src/views/page/aside/cameraLeftMenu.vue

@@ -152,6 +152,7 @@ function loadTreeData() {
     height: 21vw;
     background: url(@/assets/images/loginBG.png);
     background-size: 100% 100%;
+    z-index: 1;
 }
 
 .messageTitle {

src/views/page/cameraCenter.vue

@@ -35,7 +35,7 @@
 
         <CameraLeftMenu></CameraLeftMenu>
         <CameraRightMenu></CameraRightMenu>
-
+        <VideoControlSimple></VideoControlSimple>
     </div>
 </template>
 
@@ -54,6 +54,7 @@ import CameraLeftMenu from '@/views/page/Aside/cameraLeftMenu.vue'
 import CameraRightMenu from '@/views/page/Aside/cameraRightMenu.vue'
 import LabelEditModel from '@/views/page/Model/LabelEditModel.vue'
 import popup from "@/utils/popup";
+import VideoControlSimple from './VideoControl/VideoControlSimple.vue';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 let piniaStore = useStore();
 let player = <HTMLVideoElement>document.querySelector('#videoPlayer')