云台

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

@@ -20,14 +20,12 @@
       </div>
 
       <!--右-->
-          <div class="rightButton" @mousedown="rightStart()"
-            @mouseup="stopMove()">
+      <div class="rightButton" @mousedown="rightStart()" @mouseup="stopMove()">
       </div>
     </a-row>
     <a-row>
       <!--下-->
-          <div class="downButton"  @mousedown="downStart()"
-            @mouseup="stopMove()">
+      <div class="downButton" @mousedown="downStart()" @mouseup="stopMove()">
       </div>
     </a-row>
 
@@ -462,11 +460,13 @@ 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));
   transition: all 1s ease-out;
   cursor: pointer
 }
+
 .leftButton {
   position: fixed;
   top: 50%;
@@ -475,6 +475,7 @@ input[type='range']::-webkit-slider-thumb:active {
   width: 50px;
   // background: green;
 }
+
 .leftButton:hover {
   background: linear-gradient(to left, transparent, 80%, rgba(59, 59, 238, 0.637));
   transition: all 1s ease-out;
@@ -483,7 +484,7 @@ input[type='range']::-webkit-slider-thumb:active {
 
 .rightButton {
   position: fixed;
-  left: 85%;
+  left: 97.4%;
   transform: translateY(-50%);
   top: 50%;
   height: 80vh;
@@ -492,6 +493,7 @@ input[type='range']::-webkit-slider-thumb:active {
   // 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;
@@ -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
 }
-
 </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')