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

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

@@ -5,7 +5,7 @@
       <img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="onClose">
       <img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
     </div>
-      <template v-if="list.length>0">
+    <template v-if="list.length > 0">
       <!-- <p>{{ list }}</p> -->
       <div class="videoPlayer">
         <!-- <videoView :url="slectedVideo" /> -->
@@ -17,13 +17,15 @@
           <div class="label">选择相机: </div>
           <div class="val">
             <el-select v-model="selectedCameraIndex" placeholder="请选择" size="mini" @change="onChangeCamera">
-                        <el-option v-for="item,index in list" :key="index" :label="item.camName" :value="index">
+              <el-option v-for="item, index in list" :key="index" :label="item.camName" :value="index">
               </el-option>
             </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>
+        <el-button type="primary" icon="el-icon-s-operation" class="controlCam" v-if="selectedCamera.ptzCtrl == 0"
-                  <CameraController :visible.sync="controlDialogVisible" v-if="controlDialogVisible" :deviceId="selectedCamera.camId" class="cameraControl"/>
+          @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: {
@@ -70,78 +91,91 @@ export default {
       type: Array,
       default: () => []
     },
-    visible:{
+    visible: {
-      type:Boolean,
+      type: Boolean,
-      default:false
+      default: false
     }
   },
   data() {
     return {
-      booooooool:true,
+      booooooool: true,
-       selectedCameraIndex:null,
+      selectedCameraIndex: null,
-       selectedCamera:{},
+      selectedCamera: {},
-       cameraInfo:[],
+      PanoramicCameraTypes,
-       controlDialogVisible:false
+      cameraInfo: [],
+      controlDialogVisible: false
     }
   },
-  watch:{
+  watch: {
-    list:{
+    list: {
-      handler(){
+      handler() {
         this.selectCamera();
       },
-      deep:true,
+      deep: true,
     }
   },
-  mounted(){
+  mounted() {
   },
-  methods:{
+  methods: {
-   onClose (){
+    controlClick: throttle(function (type) {
-    this.$emit("update:visible" , false)
+      controlCamera(this.selectedCamera.camId, type, false);
+    }, 150),
+    onClose() {
+      this.$emit("update:visible", false)
     },
-   onChangeCamera(val){
+    onChangeCamera(val) {
       this.selectCamera();
     },
-    selectCamera(){
+    async selectCamera() {
-      if(this.list.length <= 0){
+      if (this.list.length <= 0) {
         return
       }
-      if(this.selectedCameraIndex == null){
+      if (this.selectedCameraIndex == null) {
         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 },
+        { title: "道路名称", value: cmr.deptName },
-        {title:"道路编号", value:cmr.road },
+        { title: "道路编号", value: cmr.road },
-        {title:"设备名称", value:cmr.camName },
+        { title: "设备名称", value: cmr.camName },
-        {title:"设备编号", value:cmr.camId },
+        { title: "设备编号", value: cmr.camId },
-        {title:"设备桩号", value:cmr.pileNum },
+        { title: "设备桩号", value: cmr.pileNum },
-        {title:"相机类型", value:["球机","枪机"][+cmr.ptzCtrl] },
+        { title: "相机类型", value: childType ? CameraChildTypes[childType] : ["球机", "枪机"][+cmr.ptzCtrl] },
         // {title:"相机状态", value:cmr.camStatus }
       ];
     },
-    onControlCamera(val){
+    onControlCamera(val) {
-     console.log(val , "vallllllllll")
+      console.log(val, "vallllllllll")
     }
   }
 }
 </script>
 
 <style lang='scss' scoped>
-@mixin fontClass{
+@mixin fontClass {
-  fontSize:14px; color:#FFF;
+  fontSize: 14px;
+  color: #FFF;
 }
+
 $colorLabel: #3DE8FF;
-.compBox{
+
+.compBox {
   display: flex;
   flex-direction: column;
   position: relative;
-  .cameraControl{
+
+  .cameraControl {
     position: absolute;
     right: -2px;
-    top:-2px;
+    top: -2px;
     transform: translateX(100%);
   }
+
   .head {
     height: 48px;
     padding: 0 10px;
@@ -173,39 +207,74 @@ $colorLabel: #3DE8FF;
       top: 0;
     }
   }
-  .flex1{
+
-    flex: 1; height:0;
+  .flex1 {
+    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;
+  .operation {
-      .label{
+    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{
+
+    .controlCam {
       padding: 3px;
       font-size: 20px;
       background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
       border: none;
-      box-shadow: 0 0 4px rgba(0,0,0,0.3);
+      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;
+  .txtInfo {
-    .txtItem{
+    flex: 1;
-      width: 0; flex-basis: 50%; height: 34px;
+    overflow-y: scroll;
-      .label{
+    padding: 20px 20px 10px;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+
+    .txtItem {
+      width: 0;
+      flex-basis: 50%;
+      height: 34px;
+
+      .label {
         @include fontClass;
         color: $colorLabel;
       }
-      .val{
+
+      .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": "雨棚可变信息标志",