2 changed files with 41 additions and 14 deletions
+ 9
- 1
index.html
View File
| <!-- | |||||
| * @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> | <!DOCTYPE html> | ||||
| <html lang="en"> | <html lang="en"> | ||||
| <head> | <head> | ||||
| <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.23/skins/default/aliplayer-min.css" /> | <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 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> | </head> | ||||
| <body> | <body> | ||||
| <div id="app"></div> | <div id="app"></div> |
+ 32
- 13
src/views/dashboard/components/AirInfo.vue
View File
| <div class="monitorList"> | <div class="monitorList"> | ||||
| <div class="innerMonitor"> | <div class="innerMonitor"> | ||||
| <div class="monitorName">机场内部监控</div> | <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> | ||||
| <div class="innerMonitor"> | <div class="innerMonitor"> | ||||
| <div class="monitorName">机场外部监控</div> | <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> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import { reactive, toRefs, watch } from 'vue' | |||||
| import { ref, reactive, toRefs, watch } from 'vue' | |||||
| import { getAirportInfo } from '@/api/dashboard/index.js' | import { getAirportInfo } from '@/api/dashboard/index.js' | ||||
| import VideoPlayer from '@/components/VideoPlayer/index.vue' | |||||
| export default { | export default { | ||||
| name: 'OneMap', | name: 'OneMap', | ||||
| components: { }, | |||||
| components: { VideoPlayer }, | |||||
| props: { | props: { | ||||
| data: { | data: { | ||||
| type: Object, | type: Object, | ||||
| } | } | ||||
| }, | }, | ||||
| setup(props) { | setup(props) { | ||||
| const innerVideoRef = ref() | |||||
| const outVideoRef = ref() | |||||
| const data = reactive({ | const data = reactive({ | ||||
| detail: props.data, | detail: props.data, | ||||
| indicatorList: [ | indicatorList: [ | ||||
| 'video-url': '' | 'video-url': '' | ||||
| }, | }, | ||||
| innerVideoSrc: '', | |||||
| outVideoSrc: '', | |||||
| status: null, | status: null, | ||||
| mountedName: null, | mountedName: null, | ||||
| outsideMonitorOptions: { | outsideMonitorOptions: { | ||||
| }) | }) | ||||
| 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) => { | watch(() => props.data, (value) => { | ||||
| if (JSON.stringify(value) !== '{}') { | if (JSON.stringify(value) !== '{}') { | ||||
| // console.log(props.data) | // console.log(props.data) | ||||
| data.detail = 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({ | getAirportInfo({ | ||||
| airportId: data.detail.id | airportId: data.detail.id | ||||
| }) | }) | ||||
| }) | }) | ||||
| return { | return { | ||||
| ...toRefs(data) | |||||
| ...toRefs(data), | |||||
| innerVideoRef, | |||||
| outVideoRef | |||||
| } | } | ||||
| } | } |
Loading…