Просмотр исходного кода

refactor: streamline PTZ control UI by removing unused configuration elements

- Remove PTZ configuration form for camera IP, username, and password from the UI
- Simplify PTZ control buttons by consolidating event handlers for better readability
- Eliminate unused speed control slider from the interface
- Enhance overall layout and maintainability of the webrtc-stream component
yb 2 недель назад
Родитель
Сommit
73d846239d
1 измененных файлов с 7 добавлено и 64 удалено
  1. 7 64
      src/views/demo/webrtc-stream.vue

+ 7 - 64
src/views/demo/webrtc-stream.vue

@@ -61,80 +61,30 @@
           <span>PTZ 云台控制</span>
         </div>
 
-        <!-- PTZ 配置 -->
-        <div class="ptz-config">
-          <el-form label-width="70px" size="small">
-            <el-form-item label="摄像头IP">
-              <el-input v-model="ptzConfig.host" placeholder="192.168.0.64" />
-            </el-form-item>
-            <el-form-item label="用户名">
-              <el-input v-model="ptzConfig.username" placeholder="admin" />
-            </el-form-item>
-            <el-form-item label="密码">
-              <el-input v-model="ptzConfig.password" type="password" show-password placeholder="密码" />
-            </el-form-item>
-          </el-form>
-        </div>
-
         <!-- PTZ 方向控制 九宫格 -->
         <div class="ptz-controls">
-          <div
-            class="ptz-btn"
-            @mousedown="handlePTZ('UP_LEFT')"
-            @mouseup="handlePTZStop"
-            @mouseleave="handlePTZStop"
-          >
+          <div class="ptz-btn" @mousedown="handlePTZ('UP_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
             <el-icon><TopLeft /></el-icon>
           </div>
-          <div
-            class="ptz-btn"
-            @mousedown="handlePTZ('UP')"
-            @mouseup="handlePTZStop"
-            @mouseleave="handlePTZStop"
-          >
+          <div class="ptz-btn" @mousedown="handlePTZ('UP')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
             <el-icon><Top /></el-icon>
           </div>
-          <div
-            class="ptz-btn"
-            @mousedown="handlePTZ('UP_RIGHT')"
-            @mouseup="handlePTZStop"
-            @mouseleave="handlePTZStop"
-          >
+          <div class="ptz-btn" @mousedown="handlePTZ('UP_RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
             <el-icon><TopRight /></el-icon>
           </div>
-          <div
-            class="ptz-btn"
-            @mousedown="handlePTZ('LEFT')"
-            @mouseup="handlePTZStop"
-            @mouseleave="handlePTZStop"
-          >
+          <div class="ptz-btn" @mousedown="handlePTZ('LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
             <el-icon><Back /></el-icon>
           </div>
           <div class="ptz-btn ptz-center" @click="handlePTZStop">
             <el-icon><Refresh /></el-icon>
           </div>
-          <div
-            class="ptz-btn"
-            @mousedown="handlePTZ('RIGHT')"
-            @mouseup="handlePTZStop"
-            @mouseleave="handlePTZStop"
-          >
+          <div class="ptz-btn" @mousedown="handlePTZ('RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
             <el-icon><Right /></el-icon>
           </div>
-          <div
-            class="ptz-btn"
-            @mousedown="handlePTZ('DOWN_LEFT')"
-            @mouseup="handlePTZStop"
-            @mouseleave="handlePTZStop"
-          >
+          <div class="ptz-btn" @mousedown="handlePTZ('DOWN_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
             <el-icon><BottomLeft /></el-icon>
           </div>
-          <div
-            class="ptz-btn"
-            @mousedown="handlePTZ('DOWN')"
-            @mouseup="handlePTZStop"
-            @mouseleave="handlePTZStop"
-          >
+          <div class="ptz-btn" @mousedown="handlePTZ('DOWN')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
             <el-icon><Bottom /></el-icon>
           </div>
           <div
@@ -146,12 +96,6 @@
             <el-icon><BottomRight /></el-icon>
           </div>
         </div>
-
-        <!-- 速度控制 -->
-        <div class="ptz-speed">
-          <span>速度</span>
-          <el-slider v-model="ptzSpeed" :min="10" :max="100" :step="10" />
-        </div>
       </div>
     </div>
 
@@ -274,7 +218,6 @@ const ptzConfig = reactive({
   username: 'admin',
   password: 'Wxc767718929'
 })
-const ptzSpeed = ref(50)
 
 // 播放状态
 const isPlaying = ref(false)