修改摄像头样式

This commit is contained in:
yangjun 2025-08-20 16:57:19 +08:00
parent c508b61bfe
commit 2162ca076f
22 changed files with 219 additions and 115 deletions

BIN
src/assets/iot/fxj.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/assets/iot/fxj_blue.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -2,10 +2,96 @@
<a-spin :spinning="confirmLoading">
<a-row>
<a-col :span="24">
<div id="video-container-preview"></div>
<div id="video-container-preview" style="min-height: 400px;"></div>
</a-col>
<a-col :span="20">
<a-col :span="24" style="padding: 5px;">
<!-- <a-col :span="24" style="margin-top: -120px;margin-left:40px;" v-show="formData.ptz == '1'"> -->
<a-col :span="24" style="margin-top: -120px;margin-left:40px;" >
<table style="width: 130px;height:96px;margin: 5px 0px 5px 0px;">
<tbody>
<tr>
<td></td>
<td style="width:100px;text-align:center;">
<div class="fxjImgUp" @mousedown="moveCtrl(1,1,1)" @mouseup="moveCtrl(1,0,1)"></div>
</td>
<td></td>
</tr>
<tr>
<td style="width:90px;text-align:center;">
<div class="fxjImgLeft" @mousedown="moveCtrl(3,1,1)" @mouseup="moveCtrl(3,0,1)"></div>
</td>
<td style="width:100px;text-align:center;">
<div class="fxjImgDown" @mousedown="moveCtrl(7,1,1)" @mouseup="moveCtrl(7,0,1)"></div>
</td>
<td style="width:100px;text-align:center;">
<div class="fxjImgRight" @mousedown="moveCtrl(5,1,1)" @mouseup="moveCtrl(5,0,1)"></div>
</td>
</tr>
</tbody>
</table>
</a-col>
<a-col :span="24" style="text-align: center;margin-top: 15px;margin-bottom: 15px;">
<!-- 对讲停止对讲 切换 -->
<!-- <img src="../../../../../assets/iot/monitor_1.png" class="buttonImg"/> -->
<span class="buttonSpan djImg" @click="startPhone" v-show="!izPhone"><span style="margin-left:30px;">对讲</span></span>
<span class="buttonSpan djImg" @click="stopPhone" v-show="izPhone"><span style="margin-left:30px;">结束</span></span>
<!-- 流畅超清 切换 -->
<span class="buttonSpan qxdImg" @click="switchResolution"><span style="margin-left:30px;">{{ resolution }}</span></span>
<!-- 录制结束录制 切换 -->
<span class="buttonSpan lzImg" @click="recordingStart" v-show="!izRecording"><span style="margin-left:30px;">录制</span></span>
<span class="buttonSpan lzImg" @click="recordingEnd" v-show="izRecording"><span style="margin-left:30px;">结束</span></span>
<span class="buttonSpan jtImg" @click="screenshot"><span style="margin-left:30px;">截图</span></span>
<span class="buttonSpan bjImg" @click="manualAlarm"><span style="margin-left:30px;">报警</span></span>
<a-popover >
<template #content>
<div style="text-align: center;">
<div class="selectDiv" @click="setFishEyeDisplayMode('ORIGIN')">原图</div>
<div class="selectDiv" @click="setFishEyeDisplayMode('FISHEYE_360D')">360全景</div>
<div class="selectDiv" @click="setFishEyeDisplayMode('FISHEYE_180D')">180全景</div>
<div class="selectDiv" @click="setFishEyeDisplayMode('FISHEYE_WIN_PLANE_TOP_QUAD')">四分屏</div>
<div class="selectDiv" @click="setFishEyeDisplayMode('FISHEYE_LONGITUDE')">全景拉伸</div>
</div>
</template>
<span class="buttonSpan fpImg"><span style="margin-left:30px;">分屏</span></span>
</a-popover>
<a-popover>
<template #content>
<div style="text-align: center;">
<div class="selectDiv" @click="changeSwitch('flip_type','off')">关闭</div>
<div class="selectDiv" @click="changeSwitch('flip_type','left_and_right')">左右</div>
<div class="selectDiv" @click="changeSwitch('flip_type','up_and_down')">上下</div>
<div class="selectDiv" @click="changeSwitch('flip_type','center')">中心</div>
</div>
</template>
<span class="buttonSpan hmxzImg"><span style="margin-left:30px;">画面旋转</span></span>
</a-popover>
<!-- <a-popover title="变焦">
<template #content>
<div style="line-height: 50px;">
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(9,1,1)" @mouseup="moveCtrl(9,0,1)" title="缩小">缩小</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(10,1,1)" @mouseup="moveCtrl(10,0,1)" title="放大">放大</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对近焦</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对远焦</a-button>
</span>
</div>
</template>
<span class="buttonSpan">
<img src="../../../../../assets/iot/a1.png" class="buttonImg"/>变焦
</span>
</a-popover> -->
</a-col>
<!-- <a-col :span="24">
<span style="margin-left: 5px;" v-show="!izPlaying">
<a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button>
</span>
@ -15,9 +101,6 @@
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:swap-outlined" @click="switchResolution">{{ resolution }}</a-button>
</span>
<!-- <span style="margin-left: 5px;">
<a-button preIcon="ant-design:phone-outlined" @click="screenshot">巡航*</a-button>
</span>-->
<span style="margin-left: 5px;" v-show="!izPhone">
<a-button preIcon="ant-design:phone-outlined" @click="startPhone">电话</a-button>
</span>
@ -29,6 +112,7 @@
ref="select"
v-model:value="fishEyeDisplayMode"
style="width: 120px"
@focus="focus"
@change="setFishEyeDisplayMode"
>
<a-select-option value="ORIGIN">原图</a-select-option>
@ -38,8 +122,6 @@
<a-select-option value="FISHEYE_LONGITUDE">全景拉伸</a-select-option>
</a-select>
</span>
</a-col>
<a-col :span="24" style="padding: 5px;">
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:picture-outlined" @click="screenshot">截图</a-button>
</span>
@ -50,7 +132,7 @@
<a-button type="primary" danger ghost preIcon="ant-design:video-camera-outlined" @click="recordingEnd">录制</a-button>
</span>
<span style="margin-left: 15px;">画面翻转
<a-select v-model:value="formData.flip_type" @change="(value) => changeSwitch('flip_type', value)" style="width: 80px;">
<a-select v-model:value="formData.flip_type" @change="(value) => changeSwitch('flip_type', value)">
<a-select-option value="off">关闭</a-select-option>
<a-select-option value="left_and_right">左右</a-select-option>
<a-select-option value="up_and_down">上下</a-select-option>
@ -60,56 +142,22 @@
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button>
</span>
</a-col>
<a-col :span="24" v-show="formData.ptz == '1' && formData.smartCode == '1' ">
<a-col :span="24" style="padding: 5px;display: flex;">
<span style="margin-left: 5px;">
变焦
</span>
<span style="margin-left: 5px;">
<!-- <a-button preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>-->
<a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(9,1,1)" @mouseup="moveCtrl(9,0,1)" title="缩小">缩小</a-button>
</span>
<span style="margin-left: 5px;">
<!-- <a-button preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>-->
<a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(10,1,1)" @mouseup="moveCtrl(10,0,1)" title="放大">放大</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对近焦</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对远焦</a-button>
</span>
<!-- <span style="margin-left: 5px;width: 60%">
<a-slider v-model:value="formData.zoom" :min="1.0" :max="4.0" :step="0.2" :marks="{1:1.0,2:2.0,3:3.0,4:4.0}" @afterChange="(value) => changeZoom(value)" />
</span>
<span style="margin-left: 5px;">
<a-input-number v-model:value="formData.zoom" :min="1" :max="4" @change="(value) => changeZoom(value)" :disabled="true"/>
</span>-->
</a-col>
</a-col>
</a-col>
<a-col :span="4" v-show="formData.ptz == '1'">
<table style="width: 96px;height:96px;margin: 5px 0px 5px 0px;">
<tbody>
<tr>
<td></td>
<td><a-button preIcon="ant-design:caret-up-outlined" @mousedown="moveCtrl(1,1,1)" @mouseup="moveCtrl(1,0,1)"></a-button></td>
<td></td>
</tr>
<tr>
<td><a-button preIcon="ant-design:caret-left-outlined" @mousedown="moveCtrl(3,1,1)" @mouseup="moveCtrl(3,0,1)"></a-button></td>
<td><a-button preIcon="ant-design:compress-outlined"></a-button></td>
<td><a-button preIcon="ant-design:caret-right-outlined" @mousedown="moveCtrl(5,1,1)" @mouseup="moveCtrl(5,0,1)"></a-button></td>
</tr>
<tr>
<td></td>
<td><a-button preIcon="ant-design:caret-down-outlined" @mousedown="moveCtrl(7,1,1)" @mouseup="moveCtrl(7,0,1)"></a-button></td>
<td></td>
</tr>
</tbody>
</table>
</a-col>
<span style="margin-left: 5px;">
变焦
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(9,1,1)" @mouseup="moveCtrl(9,0,1)" title="缩小">缩小</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(10,1,1)" @mouseup="moveCtrl(10,0,1)" title="放大">放大</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对近焦</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对远焦</a-button>
</span>
</a-col> -->
</a-row>
</a-spin>
</template>
@ -284,8 +332,8 @@
/**
* 鱼眼画面显示模式
*/
function setFishEyeDisplayMode(){
player.value.setFishEyeDisplayMode(fishEyeDisplayMode.value);
function setFishEyeDisplayMode(value){
player.value.setFishEyeDisplayMode(value);
}
/**
@ -381,7 +429,6 @@
izPhone.value = false;
}
/**
* 缩放
*/
@ -416,24 +463,6 @@
}
}
/**
* 变焦
*/
function changeZoom(value){
if(formData.sliderValue <= value){
moveCtrl(10,1,1);
let delayTime = value - formData.sliderValue;
formData.sliderValue = value;
delayExecute(moveCtrl,[10,0,1],delayTime*4500);
}else{
moveCtrl(9,1,1);
let delayTime = formData.sliderValue - value;
formData.sliderValue = value;
delayExecute(moveCtrl,[9,0,1],delayTime*4500);
}
}
/**
* 控制球机
*/
@ -480,37 +509,110 @@
height: 500px;
background: #1a1a1a;
}
.ant-input-number {
width: 50px;
.buttonSpan{
display: inline-flex; align-items: flex-end;
margin-left: 20px;
border: 1px solid #f6faff;
padding: 5px 10px;
}
tbody {
padding: 0;
margin: 0;
.buttonSpan:hover{
border: 1px solid #1ea0fa;
color: #1ea0fa;
border-radius: 10px;
cursor: pointer;
}
tr {
padding: 0;
margin: 0;
.buttonImg{
width:20px;margin-right:10px;vertical-align: bottom;
}
td {
padding: 0;
margin: 0;
.fxjImgUp{
width:50px;height: 50px;
margin-right:10px;vertical-align: bottom;
cursor: pointer;
border-radius: 5px;transform: rotate(270deg);
background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
}
td button{
padding: 0;
margin: 0;
width: 30px !important;
height: 30px;
border-color:white;
.fxjImgUp:hover{
background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
}
td button:hover{
padding: 0;
margin: 0;
border-color:white !important;
.fxjImgLeft{
width:50px;height: 50px;margin-right:10px;vertical-align: bottom;transform: rotate(180deg);
cursor: pointer;
background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
}
.fxjImgLeft:hover{
background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
}
.fxjImgDown{
width:50px;height: 50px;margin-right:10px;vertical-align: bottom;transform: rotate(90deg);
cursor: pointer;
background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
}
.fxjImgDown:hover{
background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
}
.fxjImgRight{
width:50px;height: 50px;margin-right:10px;vertical-align: bottom;
cursor: pointer;
background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
}
.fxjImgRight:hover{
background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
}
.selectDiv{
text-align: center;
border: 1px solid #f6faff;
padding: 3px 10px;
width: 100px;
margin-top:5px;
}
.selectDiv:hover{
border: 1px solid #a2a3a3;
background: #a2a3a3;
color:white;
border-radius: 10px;
cursor: pointer;
}
.djImg{
background: url('../../../../../assets/iot/monitor_1.png') left/contain no-repeat;
}
.djImg:hover{
background: url('../../../../../assets/iot/monitor_1_1.png') left/contain no-repeat;
}
.qxdImg{
background: url('../../../../../assets/iot/monitor_5.png') left/contain no-repeat;
}
.qxdImg:hover{
background: url('../../../../../assets/iot/monitor_5_1.png') left/contain no-repeat;
}
.lzImg{
background: url('../../../../../assets/iot/monitor_4.png') left/contain no-repeat;
}
.lzImg:hover{
background: url('../../../../../assets/iot/monitor_4_1.png') left/contain no-repeat;
}
.jtImg{
background: url('../../../../../assets/iot/monitor_3.png') left/contain no-repeat;
}
.jtImg:hover{
background: url('../../../../../assets/iot/monitor_3_1.png') left/contain no-repeat;
}
.bjImg{
background: url('../../../../../assets/iot/monitor_8.png') left/contain no-repeat;
}
.bjImg:hover{
background: url('../../../../../assets/iot/monitor_8_1.png') left/contain no-repeat;
}
.fpImg{
background: url('../../../../../assets/iot/monitor_6.png') left/contain no-repeat;
}
.fpImg:hover{
background: url('../../../../../assets/iot/monitor_6_1.png') left/contain no-repeat;
}
.hmxzImg{
background: url('../../../../../assets/iot/monitor_7.png') left/contain no-repeat;
}
.hmxzImg:hover{
background: url('../../../../../assets/iot/monitor_7_1.png') left/contain no-repeat;
}
</style>

View File

@ -1,9 +1,16 @@
<template>
<j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭" :bodyStyle="bodyStyle">
<!-- <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> -->
<a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true"
:footer-style="{ textAlign: 'right' }" @close="handleCancel">
<div v-if="showCamera">
<CameraPreviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPreviewForm>
</div>
</j-modal>
<template #footer>
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
</template>
</a-drawer>
<!-- </j-modal> -->
</template>
<script lang="ts" setup>
@ -12,16 +19,12 @@
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
const title = ref<string>('');
const width = ref<number>(600);
const width = ref<string>('70%');
const visible = ref<boolean>(false);
const showCamera = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['register', 'success']);
const bodyStyle = ref<any>({
'height': 'auto',
'overflow-y': 'auto',
});
// const player = ref();
@ -79,6 +82,5 @@
height: auto !important;
overflow: hidden !important;
}
</style>
<style lang="less" scoped></style>