feat 更新情报板中摄像头雨刷和子类型

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

@@ -22,8 +22,10 @@
             </el-select>
           </div>
         </div>
-                  <el-button type="primary" icon="el-icon-s-operation" class="controlCam" v-if="selectedCamera.ptzCtrl == 0" @click="controlDialogVisible=!controlDialogVisible"></el-button>
-                  <CameraController :visible.sync="controlDialogVisible" v-if="controlDialogVisible" :deviceId="selectedCamera.camId" class="cameraControl"/>
+        <el-button type="primary" icon="el-icon-s-operation" class="controlCam" v-if="selectedCamera.ptzCtrl == 0"
+          @click="controlDialogVisible = !controlDialogVisible"></el-button>
+        <CameraController :visible.sync="controlDialogVisible" v-if="controlDialogVisible"
+          :deviceId="selectedCamera.camId" class="cameraControl" />
 
       </div>
       <div class="flex1 txtInfo">
@@ -31,7 +33,21 @@
           <span class="label">{{ item.title }}: </span>
           <span class="val">{{ item.value }}</span>
         </p>
+        <div v-if="PanoramicCameraTypes.indexOf(selectedCamera.childType) == -1" style="width: 50%; display: flex;">
+          <span style="
+                color: #3de8ff;
+                font-size: 15px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                line-height: 18px;
+              ">
+            雨刷:
+          </span>
+          <Button style="margin-left: 5px" @click.native="controlClick(49)">开</Button>
+          <Button style="margin-left: 5px" @click.native="controlClick(48)">关</Button>
+        </div>
       </div>
+
       <!-- <div class="camera_bom_right">
                 <div class="camera_bom_right_t">
                   <div class="camera_bom_right_t_box"></div>
@@ -58,11 +74,16 @@
 
 import Video from "@screen/components/Video"
 import CameraController from "./CameraController.vue";
+import { controlCamera, getDeviceInfo } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import { PanoramicCameraTypes, CameraChildTypes } from "@screen/utils/enum.js";
+import { throttle } from "lodash";
+import Button from "@screen/components/Buttons/Button.vue";
 
 export default {
   name: '',
   components: {
     Video,
+    Button,
     CameraController
   },
   props: {
@@ -80,6 +101,7 @@ export default {
       booooooool: true,
       selectedCameraIndex: null,
       selectedCamera: {},
+      PanoramicCameraTypes,
       cameraInfo: [],
       controlDialogVisible: false
     }
@@ -95,13 +117,16 @@ export default {
   mounted() {
   },
   methods: {
+    controlClick: throttle(function (type) {
+      controlCamera(this.selectedCamera.camId, type, false);
+    }, 150),
     onClose() {
       this.$emit("update:visible", false)
     },
     onChangeCamera(val) {
       this.selectCamera();
     },
-    selectCamera(){
+    async selectCamera() {
       if (this.list.length <= 0) {
         return
       }
@@ -109,6 +134,10 @@ export default {
         this.selectedCameraIndex = 0;
       }
       this.selectedCamera = this.list[this.selectedCameraIndex];
+
+      const deviceInfo = (await getDeviceInfo(this.selectedCamera.camId))?.[0] || {};
+      const childType = deviceInfo.childType;
+      this.$set(this.selectedCamera, 'childType', childType);
       let cmr = this.selectedCamera;
       this.cameraInfo = [
         { title: "道路名称", value: cmr.deptName },
@@ -116,7 +145,7 @@ export default {
         { title: "设备名称", value: cmr.camName },
         { title: "设备编号", value: cmr.camId },
         { title: "设备桩号", value: cmr.pileNum },
-        {title:"相机类型", value:["球机","枪机"][+cmr.ptzCtrl] },
+        { title: "相机类型", value: childType ? CameraChildTypes[childType] : ["球机", "枪机"][+cmr.ptzCtrl] },
         // {title:"相机状态", value:cmr.camStatus }
       ];
     },
@@ -129,19 +158,24 @@ export default {
 
 <style lang='scss' scoped>
 @mixin fontClass {
-  fontSize:14px; color:#FFF;
+  fontSize: 14px;
+  color: #FFF;
 }
+
 $colorLabel: #3DE8FF;
+
 .compBox {
   display: flex;
   flex-direction: column;
   position: relative;
+
   .cameraControl {
     position: absolute;
     right: -2px;
     top: -2px;
     transform: translateX(100%);
   }
+
   .head {
     height: 48px;
     padding: 0 10px;
@@ -173,22 +207,46 @@ $colorLabel: #3DE8FF;
       top: 0;
     }
   }
+
   .flex1 {
-    flex: 1; height:0;
+    flex: 1;
+    height: 0;
+  }
+
+  .videoPlayer {
+    height: 246px;
+
+    .video-stream {
+      width: 100%;
+      height: 100%;
     }
-  .videoPlayer { height: 246px;
-    .video-stream{ width: 100%; height: 100%;}
   }
+
   .operation {
-    display: flex; flex-direction: row; height: 36px; justify-content: space-between; align-items: center; padding: 0 20px; border-bottom:1px solid #3DE8FF; position: relative;
-    .selectCam{ display: flex; flex-direction: row;
+    display: flex;
+    flex-direction: row;
+    height: 36px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    border-bottom: 1px solid #3DE8FF;
+    position: relative;
+
+    .selectCam {
+      display: flex;
+      flex-direction: row;
+
       .label {
         margin-right: 6px;
         @include fontClass;
         color: $colorLabel;
       }
-      .val{ width: 220px; }
+
+      .val {
+        width: 220px;
+      }
     }
+
     .controlCam {
       padding: 3px;
       font-size: 20px;
@@ -197,14 +255,25 @@ $colorLabel: #3DE8FF;
       box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
     }
   }
+
   .txtInfo {
-    flex: 1; overflow-y: scroll; padding: 20px 20px 10px; display: flex; flex-wrap: wrap;  align-content:flex-start;
+    flex: 1;
+    overflow-y: scroll;
+    padding: 20px 20px 10px;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+
     .txtItem {
-      width: 0; flex-basis: 50%; height: 34px;
+      width: 0;
+      flex-basis: 50%;
+      height: 34px;
+
       .label {
         @include fontClass;
         color: $colorLabel;
       }
+
       .val {
         @include fontClass;
       }

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js

@@ -237,6 +237,33 @@ export function getDeviceList(deviceType, options) {
   });
 }
 
+export function getDeviceInfo(iotDeviceId, options) {
+  return new Promise((resolve, reject) => {
+    const data = {
+      iotDeviceId,
+      ...options,
+    };
+
+    request({
+      url: "/business/device/query",
+      method: "GET",
+      params: data,
+    })
+      .then(({ code, data }) => {
+        if (code != 200) {
+          reject();
+          // return Message.error(`${DeviceTypeMap[deviceType]}设备加载失败!`);
+        }
+
+        resolve(data);
+      })
+      .catch(() => {
+        // Message.error(`${DeviceTypeMap[deviceType]}设备加载失败!`);
+        reject();
+      });
+  });
+}
+
 /**
  * 获取 所属机构
  * @param {*} iotDeviceId 设备ID iotDeviceId

ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

@@ -970,7 +970,7 @@ export const SchedulingEnum = {
   },
 };
 
-const CameraChildTypes = {
+export const CameraChildTypes = {
   "1-1": "高清网络枪型固定摄像机",
   "1-2": "高清网络球形摄像机",
   "1-3": "桥下高清网络球形摄像机",
@@ -978,7 +978,7 @@ const CameraChildTypes = {
   "1-5": "180°全景摄像机",
 };
 
-const BoardChildTypes = {
+export const BoardChildTypes = {
   "2-1": "门架式可变信息标志",
   "2-2": "大学城入口站前板",
   "2-3": "雨棚可变信息标志",