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 00000000..93dad3c7 Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/addbtn.png differ 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 00000000..728e9a97 Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jhbtn.png differ diff --git a/ruoyi-ui/src/views/index.vue b/ruoyi-ui/src/views/index.vue index f0216c36..05de035c 100644 --- a/ruoyi-ui/src/views/index.vue +++ b/ruoyi-ui/src/views/index.vue @@ -37,7 +37,7 @@
-
+
{{ 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({