2 changed files with 41 additions and 14 deletions
+ 9
- 1
index.html
View File
| @@ -1,3 +1,11 @@ | |||
| <!-- | |||
| * @Author: whyafterme | |||
| * @Date: 2023-01-12 10:22:37 | |||
| * @LastEditTime: 2023-01-14 15:20:35 | |||
| * @LastEditors: whyafterme | |||
| * @Description: | |||
| * @FilePath: \forest\index.html | |||
| --> | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| @@ -12,7 +20,7 @@ | |||
| <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.23/skins/default/aliplayer-min.css" /> | |||
| <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.23/aliplayer-h5-min.js"></script> | |||
| <script type="text/javascript" src="EasyPlayer-element.min.js"></script> | |||
| <!-- <script type="text/javascript" src="EasyPlayer-element.min.js"></script> --> | |||
| </head> | |||
| <body> | |||
| <div id="app"></div> | |||
+ 32
- 13
src/views/dashboard/components/AirInfo.vue
View File
| @@ -29,13 +29,13 @@ | |||
| <div class="monitorList"> | |||
| <div class="innerMonitor"> | |||
| <div class="monitorName">机场内部监控</div> | |||
| <easy-player :video-url="innerVideoSrc" live="true" stretch="true" /> | |||
| <VideoPlayer id="video-inner" ref="innerVideoRef" /> | |||
| <!-- <easy-player :video-url="innerVideoSrc" live="true" stretch="true" /> --> | |||
| </div> | |||
| <div class="innerMonitor"> | |||
| <div class="monitorName">机场外部监控</div> | |||
| <easy-player :video-url="outVideoSrc" live="true" stretch="true" /> | |||
| <VideoPlayer id="video-outer" ref="outVideoRef" /> | |||
| <!-- <easy-player :video-url="outVideoSrc" live="true" stretch="true" /> --> | |||
| </div> | |||
| </div> | |||
| @@ -43,12 +43,13 @@ | |||
| </template> | |||
| <script> | |||
| import { reactive, toRefs, watch } from 'vue' | |||
| import { ref, reactive, toRefs, watch } from 'vue' | |||
| import { getAirportInfo } from '@/api/dashboard/index.js' | |||
| import VideoPlayer from '@/components/VideoPlayer/index.vue' | |||
| export default { | |||
| name: 'OneMap', | |||
| components: { }, | |||
| components: { VideoPlayer }, | |||
| props: { | |||
| data: { | |||
| type: Object, | |||
| @@ -56,6 +57,8 @@ export default { | |||
| } | |||
| }, | |||
| setup(props) { | |||
| const innerVideoRef = ref() | |||
| const outVideoRef = ref() | |||
| const data = reactive({ | |||
| detail: props.data, | |||
| indicatorList: [ | |||
| @@ -71,8 +74,6 @@ export default { | |||
| 'video-url': '' | |||
| }, | |||
| innerVideoSrc: '', | |||
| outVideoSrc: '', | |||
| status: null, | |||
| mountedName: null, | |||
| outsideMonitorOptions: { | |||
| @@ -89,14 +90,30 @@ export default { | |||
| }) | |||
| const initPlayer = (innerUrl, outerUrl) => { | |||
| const inner = { | |||
| width: '256px', | |||
| height: '198px', | |||
| source: innerUrl, | |||
| isLive: true | |||
| } | |||
| const outer = { | |||
| width: '256px', | |||
| height: '198px', | |||
| source: outerUrl, | |||
| isLive: true | |||
| } | |||
| innerVideoRef.value?.init(inner) | |||
| outVideoRef.value?.init(outer) | |||
| } | |||
| watch(() => props.data, (value) => { | |||
| if (JSON.stringify(value) !== '{}') { | |||
| // console.log(props.data) | |||
| data.detail = props.data | |||
| // data.innerMonitorOptions.video-url = data.detail.internalMonitorUrl | |||
| data.innerVideoSrc = data.detail.internalMonitorUrl | |||
| data.outVideoSrc = data.detail.externalMonitorUrl | |||
| innerVideoRef.value?.disposeVideo() | |||
| outVideoRef.value?.disposeVideo() | |||
| initPlayer(data.detail.internalMonitorUrl, data.detail.externalMonitorUrl) | |||
| getAirportInfo({ | |||
| airportId: data.detail.id | |||
| }) | |||
| @@ -136,7 +153,9 @@ export default { | |||
| }) | |||
| return { | |||
| ...toRefs(data) | |||
| ...toRefs(data), | |||
| innerVideoRef, | |||
| outVideoRef | |||
| } | |||
| } | |||
Loading…