fix-像机控制

ruoyi-ui/src/api/map/index.js

@@ -10,3 +10,27 @@ export function getEnergyBoardAPi(params){
     params
    })
 }
+// 查询地图附近像机
+export function getEnergyCameraBoardAPi(params){
+   return request({
+    url:'/video/nearCamListPileNum',
+    method:'get',
+    params
+   })
+}
+// 获取地图首页点位视频流
+export function getEnergyCameraVideoAPi(params){
+   return request({
+    url:'/video/externalVideoStreaming',
+    method:'get',
+    params
+   })
+}
+// 获取地图首页点位视频流
+export function getEnergyCameraControlAPi(params){
+   return request({
+    url:'/video/PTZControl',
+    method:'get',
+    params
+   })
+}

ruoyi-ui/src/views/index.vue

@@ -37,7 +37,7 @@
               <el-tabs v-model="activeName" @tab-click="tabClickFn">
                 <el-tab-pane label="详情信息" name="first">
                   <div class="show_bottom_tab_box">
-                    <div class="show_bottom_tab_item" v-for="item in tabInfoList" :key="item.id">
+                    <div class="show_bottom_tab_item" v-for="item in tabDataInfoList" :key="item.id">
                       <div class="show_bottom_tab_item_l">{{ item.tit }}: </div>
                       <div class="show_bottom_tab_item_r" :style="{'color':item.col}"> {{ item.txt }}</div>
                     </div>
@@ -94,19 +94,20 @@
           <div class="info_right_camera">
             <div class="info_right_camera_top">
               <!-- 视频组件 -->
+              <videoView :url="videoUrl" />
             </div>
             <div class="info_right_camera_bom">
               <div class="camera_bom_left">
                 <div class="camera_bom_left_item">
                   <div class="camera_bom_left_item_txt">选择相机: </div>
                   <div class="camera_bom_left_item_val">
-                    <el-select v-model="cameraVal" placeholder="请选择" size="mini" style="width:120px">
+                    <el-select v-model="cameraVal" placeholder="请选择" size="mini" style="width:130px" @change="cameraValChangeFn">
-                      <el-option v-for="item in cameraOptList" :key="item.value" :label="item.label" :value="item.value">
+                      <el-option v-for="item in cameraOptList" :key="item.camId" :label="item.camName" :value="item.camId">
                       </el-option>
                     </el-select>
                   </div>
                 </div>
-                <div class="camera_bom_left_item" v-for="item in cameraDataList" :key="item.id">
+                <div class="camera_bom_left_item" v-for="item in cameraDataVideoList" :key="item.id">
                   <div class="camera_bom_left_item_txt">{{ item.txt }}: </div>
                   <div class="camera_bom_left_item_val">{{ item.val }}</div>
                 </div>
@@ -114,9 +115,15 @@
               <div class="camera_bom_right">
                 <div class="camera_bom_right_t">
                   <div class="camera_bom_right_t_box"></div>
-                  <div class="camera_bom_right_t_h_po" v-for="item in cameraBtnList" :key="item.id" :style="{'left':item.le,top:item.to,'transform':'rotate('+item.ro+'deg)'}"></div>
+                  <div class="camera_bom_right_t_h_po" v-for="item in cameraBtnList" :key="item.id" @click="cameraControlBtnFn(item)" :style="{'left':item.le,top:item.to,'transform':'rotate('+item.ro+'deg)'}"></div>
+                </div>
+                <div class="camera_bom_right_b">
+                  <div class="camera_bom_right_b_btn" v-for="item in cameraControlList" :key="item.id">
+                    <div class="camera_bom_right_b_btn_l" @click="cameraControlLeFn(item.numL)"></div>
+                    <div class="camera_bom_right_b_btn_c">{{ item.txt }}</div>
+                    <div class="camera_bom_right_b_btn_r" @click="cameraControlLeFn(item.numR)"></div>
+                  </div>
                 </div>
-                <div class="camera_bom_right_b"></div>
               </div>
             </div>
           </div>
@@ -215,22 +222,16 @@ import editBoard from '@/views/boardView/editInfo.vue'
 import { invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device.js'
 import { getAllVmsTemplate, deleteTemplate } from '@/api//board/template.js'
 import { getDicts } from '@/api/system/dict/data.js'
+import { getEnergyCameraBoardAPi, getEnergyCameraVideoAPi, getEnergyCameraControlAPi } from '@/api//map/index.js'
 import roadView from '@/views/map/Thumbnail/index.vue'
+import videoView from '@/views/components/videoPlayer/myVideo.vue'
 export default {
   name: 'indexView',
   data() {
     return {
-      cameraVal: '1',
+      videoUrl: '',
-      cameraOptList: [
+      cameraVal: '',
-        {
+      cameraOptList: [],
-          value: '1',
-          label: '一号相机'
-        },
-        {
-          value: '2',
-          label: '二号相机'
-        }
-      ],
       editOutlineData: {},
       formData: [],
       mapIds: '',
@@ -294,7 +295,7 @@ export default {
         { id: 1005, bt: '突发事件', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] },
         { id: 1006, bt: '警情播报', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] }
       ],
-
+      tabDataInfoList: [],
       tabInfoList: [
         { id: 401, tit: '设备名称', txt: '门架式可变信息标志', col: '#fff' },
         { id: 402, tit: '道路名称', txt: 'G35济菏高速', col: '#fff' },
@@ -303,6 +304,7 @@ export default {
         { id: 405, tit: '设备厂商', txt: '光电比特', col: '#fff' },
         { id: 406, tit: '设备状态', txt: '离线', col: '#888' }
       ],
+      cameraDataVideoList: [],
       cameraDataList: [
         { id: 3001, txt: '设备名称', val: '疲劳唤醒设备1' },
         { id: 3002, txt: '设备编号', val: 'G00030497B0180001' },
@@ -313,17 +315,22 @@ export default {
         { id: 3007, txt: '方向', val: '菏泽' }
       ],
       cameraBtnList: [
-        { id: 4001, dir: 'left', le: '26%', to: '33%', ro: 0 },
+        { id: 4001, cmd: 23, dir: 'left', le: '26%', to: '33%', ro: 0 },
-        { id: 4002, dir: 'up', le: '46%', to: '4%', ro: 90 },
+        { id: 4002, cmd: 21, dir: 'up', le: '46%', to: '4%', ro: 90 },
-        { id: 4003, dir: 'right', le: '65%', to: '33%', ro: 180 },
+        { id: 4003, cmd: 24, dir: 'right', le: '65%', to: '33%', ro: 180 },
-        { id: 4004, dir: 'downward', le: '46%', to: '62%', ro: 267 }
+        { id: 4004, cmd: 22, dir: 'downward', le: '46%', to: '62%', ro: 267 }
+      ],
+      cameraControlList: [
+        { id: 5001, txt: '变倍', numL: 11, numR: 12 },
+        { id: 5002, txt: '光圈', numL: 16, numR: 15 },
+        { id: 5003, txt: '聚焦', numL: 14, numR: 13 }
       ]
     }
   },
 
   props: [],
   // 注册组件
-  components: { GaoDeMap, carECharts, addBoard, editBoard, roadView },
+  components: { GaoDeMap, carECharts, addBoard, editBoard, roadView, videoView },
   // 计算属性
   computed: {},
   // 生命周期函数
@@ -332,43 +339,104 @@ export default {
     // this.getTemplateFn()
   },
   // // 侦听器
-  // watch: {
+  watch: {
-  //   data: {
+    cameraVal: {
-  //     // 自动触发,只能使用handler
+      // 自动触发,只能使用handler
-  //     handler(newVal, oldVal) {
+      handler(newVal, oldVal) {
-  //       // console.log(newVal);
+        this.getEnergyCameraVideoFn()
-  //       // console.log(oldVal);
+        // console.log(newVal);
-  //     }
+        // console.log(oldVal);
-  //     // true表示侦听器立即触发(immediate默认为false)
+      },
-  //     // immediate: true,
+      // true表示侦听器立即触发(immediate默认为false)
-  //     // true表示深度侦听，侦听对象属性的变化
+      // immediate: true
-  //     // deep: true
+      // true表示深度侦听，侦听对象属性的变化
-  //   }
+      deep: true
-  // },
+    }
+  },
   // 事件函数
   methods: {
     // 地图点位
     mapClickEvent(e) {
       this.dialogInfoList = []
       console.log('父组件地图点位', e)
+      this.videoUrl = ''
+      this.cameraOptList = []
       this.dialogInfoLeft = true
       this.mapIds = e.target._opts.extData.deviceId
       this.screenDataSize = e.target._opts.extData.sceenSize
       this.dialogTit = e.target._opts.extData.deviceName
+      // this.tabDataInfoList = e.target._opts.extData
+      this.tabDataInfoList = [
+        { id: 401, tit: '设备名称', txt: e.target._opts.extData.deviceName, col: '#fff' },
+        { id: 402, tit: '道路名称', txt: e.target._opts.extData.roadName, col: '#fff' },
+        { id: 403, tit: '所属机构', txt: e.target._opts.extData.organization, col: '#fff' },
+        { id: 404, tit: '设备桩号', txt: e.target._opts.extData.pileNumber, col: '#fff' },
+        { id: 405, tit: '设备厂商', txt: e.target._opts.extData.brind, col: '#fff' },
+        { id: 406, tit: '设备状态', txt: e.target._opts.extData.deviceState, col: '#888' }
+      ]
       this.getTemplateHeaderFn()
       this.onSubmit(this.mapIds)
+      this.getEnergyCameraBoardFn(e.target._opts.extData.pileNumber)
       // this.mapDialogTop = e.pixel.y + 'px'
       // this.mapDialogLeft = e.pixel.x + 'px'
       // this.$refs.mapDialog.style.top = e.pixel.y + 'px'
       // this.$refs.mapDialog.style.left = e.pixel.x + 'px'
       // console.log(this.$refs.mapDialog)
     },
+    getEnergyCameraBoardFn(pileNumber) {
+      getEnergyCameraBoardAPi({ pileNum: pileNumber }).then(res => {
+        console.log('获取到附近的像机', res)
+        this.cameraVal = res.data[0].camId
+        this.cameraOptList = res.data
+        this.cameraValCha(this.cameraOptList, this.cameraVal)
+        this.getEnergyCameraVideoFn()
+      })
+    },
+    getEnergyCameraVideoFn() {
+      getEnergyCameraVideoAPi({ camId: this.cameraVal }).then(res => {
+        // console.log('获取到视频', res)
+        this.videoUrl = res.data.liveUrl
+      })
+    },
+    cameraControlBtnFn(item) {
+      this.getEnergyCameraControlFn(item.cmd, 5)
+    },
+    cameraControlLeFn(item) {
+      // console.log('按钮点击事件', item)
+      this.getEnergyCameraControlFn(item, 5)
+    },
+    getEnergyCameraControlFn(cmd, spe) {
+      getEnergyCameraControlAPi({ camId: this.cameraVal, cmdType: cmd, speed: spe }).then(res => {
+        // console.log('控制返回结果', res)
+        // this.videoUrl = res.data.liveUrl
+      })
+    },
+    cameraValChangeFn() {
+      console.log('点击切换按钮', this.cameraVal)
+      this.cameraValCha(this.cameraOptList, this.cameraVal)
+    },
+    // cameraDataVideoList
+    cameraValCha(date, num) {
+      let str = {
+        0: '正常',
+        1: '网络中断',
+        2: '网络正常无图像',
+        3: '有图像图可能存在问题'
+      }
+      date.forEach(i => {
+        if (i.camId === num) {
+          this.cameraDataVideoList = [
+            { id: 3001, txt: '设备名称', val: i.camName },
+            { id: 3002, txt: '设备编号', val: i.camId },
+            { id: 3003, txt: '设备桩号', val: i.pileNum },
+            { id: 3005, txt: '道路名称', val: i.deptName },
+            { id: 3006, txt: '道路状况', val: i.status == '-1' ? '未启用' : str[Number(i.status)] }
+          ]
+        }
+      })
+    },
     // 信息发布
     InformationReleaseFn() {
-      // invokedFunction('65', '').then(res => {
-      //   console.log(res)
-      // })
-
       this.$confirm('是否确定发布情报板?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -483,7 +551,7 @@ export default {
           })
         })
         .catch(e => {
-          this.$modal.msgError('回读失败,请重试')
+          // this.$modal.msgError('回读失败,请重试')
         })
       // this.deviceId = deviceId
 
@@ -1343,6 +1411,35 @@ export default {
   background-repeat: no-repeat;
   background-position: center;
 }
+.camera_bom_right_b_btn {
+  width: 100%;
+  padding: 0vh 2vw 1vh 2vw;
+  display: flex;
+  justify-content: space-between;
+}
+.camera_bom_right_b_btn_l {
+  width: 1.2vw;
+  height: 2.4vh;
+  border-radius: 50%;
+  background-image: url('~@/assets/screen/xtb/jhbtn.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
+.camera_bom_right_b_btn_c {
+  color: #fff;
+}
+.camera_bom_right_b_btn_r {
+  width: 1.2vw;
+  height: 2.4vh;
+  border-radius: 50%;
+  background-image: url('~@/assets/screen/xtb/addbtn.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
 //   background-color: #104b65;
 //   background-image: url('~@/assets/screen/xtb/qbbtit.png');
 //   background-size: 100% 100%;

ruoyi-ui/src/views/map/index.vue

@@ -364,16 +364,16 @@ export default {
             // 创建一个 Marker 实例：创建点标记
             let marker = new AMap.Marker({
               position: new AMap.LngLat(...item.lnp.split(',')), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-              offset: new AMap.Pixel(-25, -50),
+              offset: new AMap.Pixel(-25, -30),
               title: item.deviceName,
               map: this.map,
               extData: item,
               icon: new AMap.Icon({
-                size: new AMap.Size(50, 50), // 图标尺寸
+                size: new AMap.Size(30, 30), // 图标尺寸
                 // image: item.imgUrl, // Icon的图像
-                image: require('@/assets/screen/xtb/fwqdot.png'), // Icon的图像
+                image: item.deviceState == 'online' ? require('@/assets/screen/xtb/lcsb/qbb.png') : require('@/assets/screen/xtb/lcsb/qb.png'), // Icon的图像
                 imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-                imageSize: new AMap.Size(50, 50) // 根据所设置的大小拉伸或压缩图片
+                imageSize: new AMap.Size(30, 30) // 根据所设置的大小拉伸或压缩图片
               })
             })
             marker.setLabel({