upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

增加多个摄像头设置

Browse Source
杭州-烟草
LAPTOP-S9HJSOEB\昊天 1 year ago
parent 98845c58d0
commit 5657382ed8
2 changed files with 116 additions and 3 deletions
Show Stats Download Patch File Download Diff File

61
src/views/realTimeMonitoring/index.vue
Unescape Escape View File

@ -62,7 +62,64 @@
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="20">
<a-col
v-for="(item, index) in cameras.slice(2, selectTab.videoStyleRow * selectTab.videoStyleColumn*2)"
:span="24 / selectTab.videoStyleColumn"
:key="index"
:style="{
height: videoHeight,
marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
}"
>
<div style="position: relative;width: 100%;">
<video :style="{ height: videoHeight,}" :id="`camera${item.id}`" autoplay muted controls>
</video>
<div class="operation-list">
<div class="operation-item">
<img :src="zoomSubUrl" alt="" @mousedown=zoomDecStart($event,item.id) @mouseleave=zoomDecStop($event,item.id)
>
<span>变倍</span>
<img :src="zoomAddUrl" alt="" @mousedown=zoomAddStart($event,item.id) @mouseleave=zoomAddStop($event,item.id)
>
</div>
<div class="operation-item">
<img :src="focusSubUrl" alt="" @mousedown=focusDecStart($event,item.id) @mouseleave=focusDecStop($event,item.id)
@mouseup=focusDecStop($event,item.id)>
<span>变焦</span>
<img :src="focusAddUrl" alt="" @mousedown=focusAddStart($event,item.id) @mouseleave=focusAddStop($event,item.id)
@mouseup=focusAddStop($event,item.id)>
</div>
<div class="operation-item">
<img :src="irisSubUrl" alt="" @mousedown=irisDecStart($event,item.id) @mouseup=irisDecStop($event,item.id) @mouseleave=irisDecStop($event,item.id)>
<span>光圈</span>
<img :src="irisAddUrl" alt="" @mousedown=irisAddStart($event,item.id) @mouseup=irisAddStop($event,item.id) @mouseleave=irisAddStop($event,item.id)>
</div>
</div>
<div class="direction-list">
<div class="direction-item">
<img :src="leftUpUrl" alt="" @mousedown=leftUpStart($event,item.id) @mouseup=leftUpStop($event,item.id) @mouseleave=leftUpStop($event,item.id)>
<img :src="upUrl" alt="" @mousedown=upStart($event,item.id) @mouseup=upStop($event,item.id) @mouseleave=upStop($event,item.id) >
<img :src="rightUpUrl" alt="" @mousedown=rightUpStart($event,item.id) @mouseup=rightUpStop($event,item.id) @mouseleave=rightUpStop($event,item.id) >
</div>
<div class="direction-item">
<img :src="leftUrl" alt="" @mousedown=leftStart($event,item.id) @mouseup=leftStop($event,item.id) @mouseleave=leftStop($event,item.id)>
<img :src="rightUrl" alt="" @mousedown=rightStart($event,item.id) @mouseup=rightStop($event,item.id) @mouseleave=rightStop($event,item.id)>
</div>
<div class="direction-item">
<img :src="leftDownUrl" alt="" @mousedown=leftDownStart($event,item.id)
@mouseup=leftDownStop($event,item.id) @mouseleave=leftDownStop($event,item.id)>
<img :src="downUrl" alt="" @mousedown=downStart($event,item.id) @mouseup=downStop($event,item.id) @mouseleave=downStop($event,item.id)>
<img :src="rightDownUrl" alt="" @mousedown=rightDownStart($event,item.id)
@mouseup=rightDownStop($event,item.id) @mouseleave=rightDownStop($event,item.id)>
</div>
</div>
</div>
</a-col>
</a-row>
</div> </div>
</template> </template>
@ -126,7 +183,7 @@ export default {
}, },
methods: { methods: {
getClientHeight() { getClientHeight() {
this.clientHeight = this.$el.clientHeight - 80; this.clientHeight = (this.$el.clientHeight /2)-20;
}, },
getRealTimeList(){ getRealTimeList(){

58
src/views/roadwayManage/model.vue
Unescape Escape View File

@ -187,6 +187,32 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="左侧球机" :label-col="formItemVerticalLayout.labelCol">
<a-select
v-decorator="[
'camera3Id',
]"
placeholder="选择球机"
@dropdownVisibleChange="handleSelectCamera"
>
<a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
{{item.name}}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="右侧球机" :label-col="formItemVerticalLayout.labelCol">
<a-select
v-decorator="[
'camera4Id',
]"
placeholder="选择球机"
>
<a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
{{item.name}}
</a-select-option>
</a-select>
</a-form-item>
</div> </div>
<div v-else> <div v-else>
<a-form-item label="左侧球机" :label-col="formItemVerticalLayout.labelCol"> <a-form-item label="左侧球机" :label-col="formItemVerticalLayout.labelCol">
@ -202,7 +228,7 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="右侧球机" :label-col="formItemVerticalLayout.labelCol"> <a-form-item label="右侧货伸" :label-col="formItemVerticalLayout.labelCol">
<a-select <a-select
v-decorator="[ v-decorator="[
'camera2Name', 'camera2Name',
@ -214,6 +240,32 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="左侧货伸" :label-col="formItemVerticalLayout.labelCol">
<a-select
v-decorator="[
'camera3Id',
]"
placeholder="选择球机"
@dropdownVisibleChange="handleSelectCamera"
>
<a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
{{item.name}}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="右侧球机" :label-col="formItemVerticalLayout.labelCol">
<a-select
v-decorator="[
'camera4Id',
]"
placeholder="选择球机"
>
<a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
{{item.name}}
</a-select-option>
</a-select>
</a-form-item>
</div> </div>
</a-form> </a-form>
@ -276,6 +328,8 @@ export default {
rightSensorGunPort:newVal.rightSensorGunPort, rightSensorGunPort:newVal.rightSensorGunPort,
camera1Id:newVal.camera1Id, camera1Id:newVal.camera1Id,
camera2Id:newVal.camera2Id, camera2Id:newVal.camera2Id,
camera3Id:newVal.camera3Id,
camera4Id:newVal.camera4Id,
camera1Name:newVal.camera1Name, camera1Name:newVal.camera1Name,
camera2Name:newVal.camera2Name camera2Name:newVal.camera2Name
}) })
@ -351,6 +405,8 @@ export default {
// console.log(this.mdata.camera1Id) // console.log(this.mdata.camera1Id)
values.camera1Id = this.mdata.camera1Id values.camera1Id = this.mdata.camera1Id
values.camera2Id = this.mdata.camera2Id values.camera2Id = this.mdata.camera2Id
values.camera3Id = this.mdata.camera3Id
values.camera4Id = this.mdata.camera4Id
} }
this.$api.httpApi.editStreet({ this.$api.httpApi.editStreet({
data:values data:values

Write Preview
Loading…
Cancel
Save