|
|
@@ -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)
|