修改摄像头样式
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.8 KiB |
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|