feat 增加摄像头控制模块

ruoyi-ui/src/views/JiHeExpressway/components/VideoMulti/index.vue

@@ -1,28 +1,38 @@
 <template>
   <div class="video-container">
     <div class="header">
-      <ElSelect @change="showVideo" v-model="cameraId">
+      <ElSelect @change="cameraChange" v-model="cameraId">
-        <ElOption v-for="item in urls"
+        <ElOption v-for="item in urls" :key="item.id" :label="item.deviceName" :value="item.iotDeviceId">
-          :key="item.id" :label="item.deviceName" :value="item.iotDeviceId">
         </ElOption>
       </ElSelect>
+      <img @click="controlDialogVisible = true" v-if="[0, '0'].includes(
+        dialogData.parseOtherConfig &&
+        dialogData.parseOtherConfig.ptzCtrl
+      )
+        " src="@screen/images/camera-control-icon.svg" width="18px" height="18px"
+        style="cursor: pointer;background-color: #0d5f79;" />
     </div>
     <Transition name="fade" mode="out-in">
       <video controls autoplay muted class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
     </Transition>
+
+    <CameraControlDialog :deviceId="dialogData.iotDeviceId" :dialogData="dialogData" v-model="controlDialogVisible" />
   </div>
 </template>
 
 <script>
 import { HttpLivePlayer, openLiveVideo } from "./videoStream.js"
-
+import { find } from "lodash"
 import {
   getNearCameraNew,
 } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import CameraControlDialog from "@screen/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue";
 
 export default {
   name: 'VideoControls',
   components: {
+    CameraControlDialog,
+
   },
   props: {
     // 桩号
@@ -43,8 +53,10 @@ export default {
     return {
       active: "video",
       player: null,
-      urls:[],
+      urls: [],
-      cameraId: null
+      cameraId: null,
+      controlDialogVisible: false,
+      dialogData: {},
     }
   },
   async mounted() {
@@ -52,11 +64,16 @@ export default {
     this.$once("hook:beforeDestroy", () => this.player?.destroy());
   },
   methods: {
-    
+    cameraChange() {
+      const changeItem = find(this.urls, { iotDeviceId: this.cameraId });
+      this.dialogData = { ...changeItem, parseOtherConfig: changeItem.otherConfig && JSON.parse(changeItem.otherConfig) };
+      console.log(this.cameraId, this.dialogData)
+      this.showVideo();
+    },
     async playVideo() {
       this.player?.destroy();
 
-      let {code,data} = await getNearCameraNew(this.pileNum).catch(() => ({}));
+      let { code, data } = await getNearCameraNew(this.pileNum).catch(() => ({}));
       if (
         code != 200 ||
         (Array.isArray(data) ? !data?.length : !Object.keys(data || {}).length)
@@ -64,14 +81,17 @@ export default {
         Message.warning("未获取到附近的相机信息");
         return;
       }
-      if(data[this.rangeIndex]){
+      if (data[this.rangeIndex]) {
         this.urls = data[this.rangeIndex]
-        this.cameraId = data[this.rangeIndex][0]['iotDeviceId']
+        console.log(data[this.rangeIndex][0], this.rangeIndex, 'xxxx');
+        const firstItem = data[this.rangeIndex]?.[0] || {};
+        this.cameraId = firstItem['iotDeviceId'];
+        this.dialogData = { ...firstItem, parseOtherConfig: firstItem.otherConfig && JSON.parse(firstItem.otherConfig) }
         this.showVideo();
       }
     },
-    showVideo(){
+    showVideo() {
-      this.player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.cameraId});
+      this.player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.cameraId });
     }
   }
 }
@@ -102,6 +122,7 @@ export default {
     z-index: 999;
     display: flex;
     justify-content: space-between;
+
     .radio {
       background: #265A70;
       border-radius: 41px 41px 41px 41px;