增加多个摄像头设置

src/views/realTimeMonitoring/index.vue

@@ -62,7 +62,64 @@
                 
             </a-col>
         </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>
 </template>
 
@@ -126,7 +183,7 @@ export default {
     },
     methods: {
         getClientHeight() {
-            this.clientHeight = this.$el.clientHeight - 80;
+            this.clientHeight = (this.$el.clientHeight /2)-20;
         },
         getRealTimeList(){
             

src/views/roadwayManage/model.vue

@@ -187,6 +187,32 @@
                             </a-select-option>
                         </a-select>
                     </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 v-else>
                     <a-form-item label="左侧球机" :label-col="formItemVerticalLayout.labelCol">
@@ -202,7 +228,7 @@
                             </a-select-option>
                         </a-select>
                     </a-form-item>
-                    <a-form-item label="右侧球机" :label-col="formItemVerticalLayout.labelCol">
+                    <a-form-item label="右侧货伸" :label-col="formItemVerticalLayout.labelCol">
                         <a-select
                             v-decorator="[
                                'camera2Name',
@@ -214,6 +240,32 @@
                             </a-select-option>
                         </a-select>
                     </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>
 
             </a-form>
@@ -276,6 +328,8 @@ export default {
                         rightSensorGunPort:newVal.rightSensorGunPort,
                         camera1Id:newVal.camera1Id,
                         camera2Id:newVal.camera2Id,
+                        camera3Id:newVal.camera3Id,
+                        camera4Id:newVal.camera4Id,
                         camera1Name:newVal.camera1Name,
                         camera2Name:newVal.camera2Name
                     })
@@ -351,6 +405,8 @@ export default {
                                 // console.log(this.mdata.camera1Id)
                                 values.camera1Id = this.mdata.camera1Id
                                 values.camera2Id = this.mdata.camera2Id
+                                values.camera3Id = this.mdata.camera3Id
+                                values.camera4Id = this.mdata.camera4Id
                             }
                             this.$api.httpApi.editStreet({
                                 data:values