From 7259e83c1687881bc78d6ff620f126c29f119f37 Mon Sep 17 00:00:00 2001 From: IAMHERE <446961233@qq.com> Date: Fri, 29 Dec 2023 21:13:58 +0800 Subject: [PATCH] =?UTF-8?q?fix-=E5=83=8F=E6=9C=BA=E6=8E=A7=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/api/map/index.js | 24 +++ ruoyi-ui/src/assets/screen/xtb/addbtn.png | Bin 0 -> 1433 bytes ruoyi-ui/src/assets/screen/xtb/jhbtn.png | Bin 0 -> 1298 bytes ruoyi-ui/src/views/index.vue | 179 +++++++++++++++++----- ruoyi-ui/src/views/map/index.vue | 8 +- 5 files changed, 166 insertions(+), 45 deletions(-) create mode 100644 ruoyi-ui/src/assets/screen/xtb/addbtn.png create mode 100644 ruoyi-ui/src/assets/screen/xtb/jhbtn.png diff --git a/ruoyi-ui/src/api/map/index.js b/ruoyi-ui/src/api/map/index.js index c5b02931..95a8036e 100644 --- a/ruoyi-ui/src/api/map/index.js +++ b/ruoyi-ui/src/api/map/index.js @@ -9,4 +9,28 @@ export function getEnergyBoardAPi(params){ method:'get', 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 + }) } \ No newline at end of file diff --git a/ruoyi-ui/src/assets/screen/xtb/addbtn.png b/ruoyi-ui/src/assets/screen/xtb/addbtn.png new file mode 100644 index 0000000000000000000000000000000000000000..93dad3c714aff6e65fedb28bb344bc6d261fa73d GIT binary patch literal 1433 zcmV;K1!nq*P)Px)Q%OWYR9HvVneR_qRT#&=hnC<#!d<{D4kK+)aq?r}qFFT4vWzi}i6zn3bFX~K zcgz9=Rph81abi5Vu7T3~F6q-EJ+j4Uf*KU_xdG2e50=`Hlf?Y(V{ z&znMf&pDs-+~=I4HBB_Rv-;2Qh-bYh(k2|1kaHe zhW-5CkqJkwBC7#FOe#PVuA+{_JcO9Txi{u3YNmWpi7ng=!lO?^!nfaSdk08A1h&(_ z&O_i?26(n-{M_gTnwx;;=YY27ffqEOqb)b0Knl7D;e7Acb}{S$M>l-f%Ul5vP#qKK zk9)x8y&Rm~5eZM|6J5qc42#3-8N=|2RJm@-125hj2lOfR>Iu5BWq?-0UOr|8Pa}g6 zF7(Zm>bf-WkL#1r<&^4x9=)|yxkt-Qj9z}d3+OtQeNs$eq&HNoS#e-1Y+|!|UM)t_ z-3bhImxV42Y{D`GuCD`JSoN^B7U0ZDW3i&Jrw;=&W~FY#(b5fI=TSXSb7OEp5}KC5 z#KD-(2j*^&$*iaaR*x_!A0BCVJww*rBOf@jwgO-fcm4uy+;-&I;7LCwKYR;w%eOGI zlyKCCYSiBiywb_PVi@TgHap4zUtRwULSDh+e}HSh1CO6N8Z0{gF#@k0N9z7A{9k_K zs1MbMaXk9A@hKX{%&eFLUR+D63`Wn=!w#)#z#QM)IhYa8_4)ag0lb(9LNt6@L{-Fmksz)UJkk7bDfrL(E^%wH=t%TpJ8-%e(D5CCjbyR(n^Azfw3>LB6&?3vffRwc;52;yOUcqP z@al1lpB;d9q^abT20PoKH8&ysRN579N46dNTZTNsyHcm z9WMP}xOx2UHio|XwshZP@2THy1798Di9WMiZEcmZ>`|z_vod z&cHQE9PBhNBo^0`kkW^%%fKUN1&?(yHCc2l?9ZO!FmbV;mj4gi8W77R4jwXBH|@Up zqR-XD!)8695{Fr-Q3$!_qTtR>p(emQGV$o7QnOL~a1$)M7u#`v)q%~V!NI*PN3-Q+ zHa%CNo~Sx7#gD`pWD-NRe??K zN~Cb!dPJf}&BaGA^O$5RkQI76{P_h02mJ02q4X;2V17z*$y7KG9`lV-lVTrr2?xd^ zY5J3QF?aoT`E*;V|2KQGdYg!2q<6@CG#~hf4IjK2mYe^rkU~9zMLUm0d!8YDkdt8# zOI4Az%K)a;jCf?Km#${IFqek;%>+jB<=4VuU}SYlT?sIb30*IJjmd#03l=-N3}Lk2 zka{gvTy8a?`EWgSwp*p65JQpVbn3MVA*=kl+;{?1-`aUz_6_1de^V_bPr2+{ayx%OfPlMNFXwSQk% z8L$b@tO#)tQUr^6qQv*ctte!O;$EfgodKJpgp(RtcLUHx076jb=antJZ(Q9nE`>+~ ndK@~o&>&;jZH-~f`PJ>eeHB|74~5M+00000NkvXXu0mjfxRa?< literal 0 HcmV?d00001 diff --git a/ruoyi-ui/src/assets/screen/xtb/jhbtn.png b/ruoyi-ui/src/assets/screen/xtb/jhbtn.png new file mode 100644 index 0000000000000000000000000000000000000000..728e9a976da4c4ec631cfeb434b1eaf46b398532 GIT binary patch literal 1298 zcmV+t1?~EYP)Px(%t=H+R9HvVncHt0MHI%ru^j;oQH&Z?p(5faNTK9HLM1?;f{p41Bpw_Io@xJr zHjg|de&R9VFDN`Ctp4=`-PtoiJ7Le9u!9#+LKJUJ zt=4m0ANZ^7B^Yv9IbcM8-fKOgjV8t@KQ{`Do+v*lmJyzeI=$u$Y=_<2?OaryNXAbB zGvf`RYXfUoroi{x02fv-YQG$FHo&9xF88lD`BxZ zrz?TE8DO^*Z5p5(VFgr`FK zXAAhs_IU_-8TbDIuKonv|F^%u%;Wi&%zPG}1zi;_;6yg3Di|Zn2)n`b&cTX!c4~}B zCU9aa0_lmV=&t|Z22_jTomb1dh72J*oic&rnHV4H}oFXysAa?_9Ez+dY3 z^=tjl-Rl1@bC^*E3h)h%iNkbYao}Qeqn()nM*M2=2_!PBkm90hYS=5d(exH4#YY11 zY*Mw2EWyA3=|)`OspG&alYoKG32YXNjUUYh+>OSLj(f5|p1@piethv==Uc~4P2RTf z2rQM~*f*VW-yJ^-uPeVz1FyXM8ZL!qx&pKK*|%8T*sAZ_2HaFiY<}<_W}hDE3UK=7 zKIT6B)Y*4MN+h;(kTQTP*MNJ@4Nu_s5YE3m(G}petsK%f>+Dc$?B6`ivD4zPEdL+2 zH6Udb4jwWyyIqOkk)7&(LKP0(sZj{I+92_dJaU^3cx2+yNtI@^`N_F1jUxq6RIp@ek!8-VTyZ6rR=ccxye|P8RhaZ$#$m8<{%L0>uI?J!a$D*Ql4sTmB?88!3JbMYiikcCROuf?8bO^07%x@MEu9RPE zi-GaXvbqvr9uvA(`WlM^PZn%;3>n4zv?=x4%vo;L(0sTTI-8XSj<7_jFKFALsRr%j zJ1+w;n$#Vr^3WV2TYJ&f+7-;4UQ!E@$`Gqzr=%=Km5q(kgTbq?Xm!pupAz;b&D|rW z4y!Z`&W5Q~(U5QiWkgL-S_(z)1^aH`w4*k@l(D}_g%gtZbCuU#x64;voCqgizxEpN znpa*FLj3%+U3;;DNzWqYo4>DX4OqjoDnh&uDI!jhsPnyfD+(E
-
+
{{ item.tit }}:
{{ item.txt }}
@@ -94,19 +94,20 @@
+
选择相机:
- - + +
-
+
{{ item.txt }}:
{{ item.val }}
@@ -114,9 +115,15 @@
-
+
+
+
+
+
+
{{ item.txt }}
+
+
-
@@ -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', - cameraOptList: [ - { - value: '1', - label: '一号相机' - }, - { - value: '2', - label: '二号相机' - } - ], + videoUrl: '', + cameraVal: '', + cameraOptList: [], 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: 4002, dir: 'up', le: '46%', to: '4%', ro: 90 }, - { id: 4003, dir: 'right', le: '65%', to: '33%', ro: 180 }, - { id: 4004, dir: 'downward', le: '46%', to: '62%', ro: 267 } + { id: 4001, cmd: 23, dir: 'left', le: '26%', to: '33%', ro: 0 }, + { id: 4002, cmd: 21, dir: 'up', le: '46%', to: '4%', ro: 90 }, + { id: 4003, cmd: 24, dir: 'right', le: '65%', to: '33%', ro: 180 }, + { 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: { - // data: { - // // 自动触发,只能使用handler - // handler(newVal, oldVal) { - // // console.log(newVal); - // // console.log(oldVal); - // } - // // true表示侦听器立即触发(immediate默认为false) - // // immediate: true, - // // true表示深度侦听，侦听对象属性的变化 - // // deep: true - // } - // }, + watch: { + cameraVal: { + // 自动触发,只能使用handler + handler(newVal, oldVal) { + this.getEnergyCameraVideoFn() + // console.log(newVal); + // console.log(oldVal); + }, + // true表示侦听器立即触发(immediate默认为false) + // immediate: 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%; diff --git a/ruoyi-ui/src/views/map/index.vue b/ruoyi-ui/src/views/map/index.vue index a0b28de0..8e601e22 100644 --- a/ruoyi-ui/src/views/map/index.vue +++ b/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({