|
@@ -2,21 +2,27 @@
|
|
|
<div class="important-area-focus">
|
|
|
<div class="left">
|
|
|
<template v-for="(item, index) in videoData">
|
|
|
- <div class="list-item" :class="{active: currentInfo.id === item.id}" @click="currentInfo = item">
|
|
|
+ <div class="list-item" :class="{active: currentInfo.areaType === item.areaType}" @click="currentInfo = item">
|
|
|
{{item.areaName}}
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <div class="right-title">最新布控结果</div>
|
|
|
- <div class="right-content">
|
|
|
- <template v-for="(item, index) in currentInfo.videoList">
|
|
|
- <div class="video-item">
|
|
|
- <div class="video-item-title">{{item.name}}</div>
|
|
|
- <video controls autoplay :src="item.url"/>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
+ <template v-if="test.flvUrl">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <FlvVideo :url="test.flvUrl"/>
|
|
|
+ <FlvVideo :url="test.flvUrlProxy"/>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+<!-- <div class="right-title">{{ currentInfo.areaName }}</div>-->
|
|
|
+<!-- <div class="right-content">-->
|
|
|
+<!-- <template v-for="(item, index) in currentInfo.viseoRecords?.filter((v, i) => i < 8)">-->
|
|
|
+<!-- <div class="video-item" v-if="item.flvUrl">-->
|
|
|
+<!-- <div class="video-item-title">{{item.name}}</div>-->
|
|
|
+<!-- <FlvVideo :url="item.flvUrl"/>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -37,90 +43,416 @@ import {
|
|
|
import {useStore} from 'vuex'
|
|
|
import axios from "axios";
|
|
|
import {ElMessage, ElMessageBox} from "element-plus";
|
|
|
+import FlvVideo from "./flv-video.vue";
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'App',
|
|
|
- components: {},
|
|
|
+ components: {FlvVideo},
|
|
|
setup() {
|
|
|
const store = useStore()
|
|
|
const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
|
|
|
const state = reactive({
|
|
|
// videoData: [],
|
|
|
+ test: {},
|
|
|
+ secret: '035c73f7-bb6b-4889-a715-d9eb2d1925cc',
|
|
|
currentInfo: {},
|
|
|
- videoData: [{
|
|
|
- "id": "1",
|
|
|
- "areaName": "博鳌会展中心",
|
|
|
- "videoList": [{
|
|
|
- "name": "公安类——博鳌——xx点位_B",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/67baf78f32df10414361a8f945c1f875.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_A",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/6023eb715089f071f336f3f8d895e9ab.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_B",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/67baf78f32df10414361a8f945c1f875.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_A",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/6023eb715089f071f336f3f8d895e9ab.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_B",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/67baf78f32df10414361a8f945c1f875.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_A",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/6023eb715089f071f336f3f8d895e9ab.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_B",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/67baf78f32df10414361a8f945c1f875.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_A",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/6023eb715089f071f336f3f8d895e9ab.mp4"
|
|
|
- }]
|
|
|
- }, {
|
|
|
- "id": "2",
|
|
|
- "areaName": "永庄水库",
|
|
|
- "videoList": [{
|
|
|
- "name": "公安类——博鳌——xx点位_B",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/67baf78f32df10414361a8f945c1f875.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_A",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/6023eb715089f071f336f3f8d895e9ab.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_B",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/67baf78f32df10414361a8f945c1f875.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_A",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/6023eb715089f071f336f3f8d895e9ab.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_B",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/67baf78f32df10414361a8f945c1f875.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_A",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/6023eb715089f071f336f3f8d895e9ab.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_B",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/67baf78f32df10414361a8f945c1f875.mp4"
|
|
|
- }]
|
|
|
- }, {
|
|
|
- "id": "3",
|
|
|
- "areaName": "海口市会展中心",
|
|
|
- "videoList": [{
|
|
|
- "name": "公安类——博鳌——xx点位_B",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/67baf78f32df10414361a8f945c1f875.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_A",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/6023eb715089f071f336f3f8d895e9ab.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_B",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/67baf78f32df10414361a8f945c1f875.mp4"
|
|
|
- }, {
|
|
|
- "name": "公安类——博鳌——xx点位_A",
|
|
|
- "url": "http://images.cnwomen.com.cn:80/hdvideo/fmp/3/video/2022/05/24/03/6023eb715089f071f336f3f8d895e9ab.mp4"
|
|
|
- }]
|
|
|
- }]
|
|
|
+ videoData: [
|
|
|
+ {
|
|
|
+ "areaName": "码头前沿",
|
|
|
+ "areaType": 1,
|
|
|
+ "viseoRecords": [
|
|
|
+ {
|
|
|
+ "code": "46017701001325000091",
|
|
|
+ "name": "1号泊位球机",
|
|
|
+ "sort": 1,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/W4d0I-PrFG8E_pdwnm3baQ",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/W4d0I-PrFG8E_pdwnm3baQ",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/W4d0I-PrFG8E_pdwnm3baQ"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000140",
|
|
|
+ "name": "码头前沿7号立杆球机",
|
|
|
+ "sort": 2,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/B-HYd1AKjWXpCVxToVV8Zw",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/B-HYd1AKjWXpCVxToVV8Zw",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/B-HYd1AKjWXpCVxToVV8Zw"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000128",
|
|
|
+ "name": "9号泊位升降桥-1",
|
|
|
+ "sort": 3,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/rZBI2abJWCf6ZrrSnS5Jqw",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/rZBI2abJWCf6ZrrSnS5Jqw",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/rZBI2abJWCf6ZrrSnS5Jqw"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000098",
|
|
|
+ "name": "海口港海关离岛免税监管点2号泊位升降桥-1",
|
|
|
+ "sort": 4,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/HUbOzHszBaWJPl-mqZ43XA",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/HUbOzHszBaWJPl-mqZ43XA",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/HUbOzHszBaWJPl-mqZ43XA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000099",
|
|
|
+ "name": "海口港海关离岛免税监管点2号泊位升降桥-2",
|
|
|
+ "sort": 5,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/1O7BG8vzNZRTG2UWaB44Bw",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/1O7BG8vzNZRTG2UWaB44Bw",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/1O7BG8vzNZRTG2UWaB44Bw"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000104",
|
|
|
+ "name": "海口港海关离岛免税监管点3号泊位升降桥-1",
|
|
|
+ "sort": 6,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/G18ox6IuOAKEgNzasIX-OQ",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/G18ox6IuOAKEgNzasIX-OQ",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/G18ox6IuOAKEgNzasIX-OQ"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000105",
|
|
|
+ "name": "海口港海关离岛免税监管点3号泊位升降桥-2",
|
|
|
+ "sort": 7,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/AwXBOM_tPTc4gtQTm0Uwgw",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/AwXBOM_tPTc4gtQTm0Uwgw",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/AwXBOM_tPTc4gtQTm0Uwgw"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000113",
|
|
|
+ "name": "海口港海关离岛免税监管点4号泊位升降桥-2",
|
|
|
+ "sort": 8,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/RYvu_rvJbJVL23hMnYteAA",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/RYvu_rvJbJVL23hMnYteAA",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/RYvu_rvJbJVL23hMnYteAA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000117",
|
|
|
+ "name": "海口港海关离岛免税监管点5号泊位升降桥-2",
|
|
|
+ "sort": 9,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/pQnxq-HwSjCAXyUkSklrgA",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/pQnxq-HwSjCAXyUkSklrgA",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/pQnxq-HwSjCAXyUkSklrgA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000123",
|
|
|
+ "name": "海口港海关离岛免税监管点6号泊位升降桥-2",
|
|
|
+ "sort": 10,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/4f7dQGmym7NvthNKlo7l5A",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/4f7dQGmym7NvthNKlo7l5A",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/4f7dQGmym7NvthNKlo7l5A"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000125",
|
|
|
+ "name": "海口港海关离岛免税监管点7号泊位升降桥-2",
|
|
|
+ "sort": 11,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/F4R-BIWwh3tdjMuVxAuRTA",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/F4R-BIWwh3tdjMuVxAuRTA",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/F4R-BIWwh3tdjMuVxAuRTA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000127",
|
|
|
+ "name": "海口港海关离岛免税监管点8号泊位升降桥-2",
|
|
|
+ "sort": 12,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/NLZE0O7gfH3dXoQp5Q2lrw",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/NLZE0O7gfH3dXoQp5Q2lrw",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/NLZE0O7gfH3dXoQp5Q2lrw"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000129",
|
|
|
+ "name": "海口港海关离岛免税监管点9号泊位升降桥-2",
|
|
|
+ "sort": 13,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/nSZarI2j9wQ43-qCcWAaFg",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/nSZarI2j9wQ43-qCcWAaFg",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/nSZarI2j9wQ43-qCcWAaFg"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000087",
|
|
|
+ "name": "海口港海关离岛免税监管点10号泊位升降桥-1",
|
|
|
+ "sort": 14,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/9ayokoqjpEl_-kT7TyELFg",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/9ayokoqjpEl_-kT7TyELFg",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/9ayokoqjpEl_-kT7TyELFg"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46017701001325000088",
|
|
|
+ "name": "海口港海关离岛免税监管点10号泊位升降桥-2",
|
|
|
+ "sort": 15,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/T9uuYlFXvDEsT0y-wfLopQ",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/T9uuYlFXvDEsT0y-wfLopQ",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/T9uuYlFXvDEsT0y-wfLopQ"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "areaName": "三亚鸿洲游艇会",
|
|
|
+ "areaType": 2,
|
|
|
+ "viseoRecords": [
|
|
|
+ {
|
|
|
+ "code": "46620000081325000020",
|
|
|
+ "name": "海口三亚海关鸿洲保税仓库02",
|
|
|
+ "sort": 1,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/PRNUEblr5FpPGoJiAK5ztg",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/PRNUEblr5FpPGoJiAK5ztg",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/PRNUEblr5FpPGoJiAK5ztg"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000022",
|
|
|
+ "name": "海口三亚海关鸿洲码头01",
|
|
|
+ "sort": 2,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/N24gLd3Fk-1TkZ6Hql6mjw",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/N24gLd3Fk-1TkZ6Hql6mjw",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/N24gLd3Fk-1TkZ6Hql6mjw"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000024",
|
|
|
+ "name": "海口三亚海关鸿洲码头02",
|
|
|
+ "sort": 3,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/vyE2O7P4Bl6aEDHA6sCcPg",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/vyE2O7P4Bl6aEDHA6sCcPg",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/vyE2O7P4Bl6aEDHA6sCcPg"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000026",
|
|
|
+ "name": "海口三亚海关鸿洲码头03",
|
|
|
+ "sort": 4,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/I1ad1iB2MHI8F6AoUuSqqA",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/I1ad1iB2MHI8F6AoUuSqqA",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/I1ad1iB2MHI8F6AoUuSqqA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000028",
|
|
|
+ "name": "海口三亚海关鸿洲码头04",
|
|
|
+ "sort": 5,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/nynwe6hUdx4X3OWQIStFUA",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/nynwe6hUdx4X3OWQIStFUA",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/nynwe6hUdx4X3OWQIStFUA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000030",
|
|
|
+ "name": "海口三亚海关鸿洲码头05",
|
|
|
+ "sort": 6,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/zFhXf0XXKkUt3RsNx8tXgQ",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/zFhXf0XXKkUt3RsNx8tXgQ",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/zFhXf0XXKkUt3RsNx8tXgQ"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000032",
|
|
|
+ "name": "海口三亚海关鸿洲码头06",
|
|
|
+ "sort": 7,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/0xA5wFALQBP1b4MRtbOHIQ",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/0xA5wFALQBP1b4MRtbOHIQ",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/0xA5wFALQBP1b4MRtbOHIQ"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000034",
|
|
|
+ "name": "海口三亚海关鸿洲码头07",
|
|
|
+ "sort": 8,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/F7iKKzLaDstiWp1GrNuzIA",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/F7iKKzLaDstiWp1GrNuzIA",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/F7iKKzLaDstiWp1GrNuzIA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000219",
|
|
|
+ "name": "三亚鸿洲游艇码头-东河码头1",
|
|
|
+ "sort": 9,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/TrnMuXHRg5aUZ3Fh0drF8A",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/TrnMuXHRg5aUZ3Fh0drF8A",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/TrnMuXHRg5aUZ3Fh0drF8A"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000050",
|
|
|
+ "name": "三亚鸿洲游艇码头-东河码头5",
|
|
|
+ "sort": 10,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/V6UHPnN9BhB9yxDRHoV7xA",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/V6UHPnN9BhB9yxDRHoV7xA",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/V6UHPnN9BhB9yxDRHoV7xA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000052",
|
|
|
+ "name": "三亚鸿洲游艇码头-东河码头9",
|
|
|
+ "sort": 11,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/UVUJJ32HmFL-a7DLJ4t2tQ",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/UVUJJ32HmFL-a7DLJ4t2tQ",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/UVUJJ32HmFL-a7DLJ4t2tQ"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000046",
|
|
|
+ "name": "西河码头8号泊位",
|
|
|
+ "sort": 12,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/fASZkf4Sbh7yzyQdX7DoWQ",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/fASZkf4Sbh7yzyQdX7DoWQ",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/fASZkf4Sbh7yzyQdX7DoWQ"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000036",
|
|
|
+ "name": "西河码头10号泊位",
|
|
|
+ "sort": 13,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/1EgNAn0m5BZJ4XL3_iPc1A",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/1EgNAn0m5BZJ4XL3_iPc1A",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/1EgNAn0m5BZJ4XL3_iPc1A"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000038",
|
|
|
+ "name": "西河码头11号泊位",
|
|
|
+ "sort": 14,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/1wXlldRi_TF4CjRvDOKoXg",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/1wXlldRi_TF4CjRvDOKoXg",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/1wXlldRi_TF4CjRvDOKoXg"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000040",
|
|
|
+ "name": "西河码头12号泊位",
|
|
|
+ "sort": 15,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/MHm6tn0nMmoPdoHXkzj19g",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/MHm6tn0nMmoPdoHXkzj19g",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/MHm6tn0nMmoPdoHXkzj19g"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000042",
|
|
|
+ "name": "西河码头13号泊位",
|
|
|
+ "sort": 16,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/VVyOSrINLLI_C3zHFTtQiA",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/VVyOSrINLLI_C3zHFTtQiA",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/VVyOSrINLLI_C3zHFTtQiA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000044",
|
|
|
+ "name": "西河码头14号泊位",
|
|
|
+ "sort": 17,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/38FgpfDVgqPDMfEN8ODGLA",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/38FgpfDVgqPDMfEN8ODGLA",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/38FgpfDVgqPDMfEN8ODGLA"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "46620000081325000048",
|
|
|
+ "name": "西河码头水泥平台",
|
|
|
+ "sort": 18,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/qx3wuNw0zZIPL54zdvUFbg",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/qx3wuNw0zZIPL54zdvUFbg",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/qx3wuNw0zZIPL54zdvUFbg"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "areaName": "中免三亚凤凰机场离岛免税店",
|
|
|
+ "areaType": 3,
|
|
|
+ "viseoRecords": [
|
|
|
+ {
|
|
|
+ "code": "64029231101322020001",
|
|
|
+ "name": "海口三亚中免凤凰机场店01",
|
|
|
+ "sort": 1,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/EjsqjBaLUDxgQ1Di64gO2g",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/EjsqjBaLUDxgQ1Di64gO2g",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/EjsqjBaLUDxgQ1Di64gO2g"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "64029231101322020002",
|
|
|
+ "name": "海口三亚中免凤凰机场店02",
|
|
|
+ "sort": 2,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/wELTkUhPxcX4JO_0QKTr0g",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/wELTkUhPxcX4JO_0QKTr0g",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/wELTkUhPxcX4JO_0QKTr0g"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "64029231101322020003",
|
|
|
+ "name": "海口三亚中免凤凰机场店03",
|
|
|
+ "sort": 3,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/Vm4ebnsiQdJK9H9rWBMw7A",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/Vm4ebnsiQdJK9H9rWBMw7A",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/Vm4ebnsiQdJK9H9rWBMw7A"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "64029231101322020004",
|
|
|
+ "name": "海口三亚中免凤凰机场店04",
|
|
|
+ "sort": 4,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/-fsS-iEk2siIIcc2LcgBOw",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/-fsS-iEk2siIIcc2LcgBOw",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/-fsS-iEk2siIIcc2LcgBOw"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "64029231101322020005",
|
|
|
+ "name": "海口三亚中免凤凰机场店05",
|
|
|
+ "sort": 5,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/PgUVb7WjjFJ1_tJezCSp2Q",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/PgUVb7WjjFJ1_tJezCSp2Q",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/PgUVb7WjjFJ1_tJezCSp2Q"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "64029231101322020006",
|
|
|
+ "name": "海口三亚中免凤凰机场店06",
|
|
|
+ "sort": 6,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/3vfwxRZ5IImqX8fY-eHyHw",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/3vfwxRZ5IImqX8fY-eHyHw",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/3vfwxRZ5IImqX8fY-eHyHw"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "64029231101322020007",
|
|
|
+ "name": "海口三亚中免凤凰机场店07",
|
|
|
+ "sort": 7,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/_HskccDbfFDnNM7TEcQQFw",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/_HskccDbfFDnNM7TEcQQFw",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/_HskccDbfFDnNM7TEcQQFw"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "code": "64029231101322020008",
|
|
|
+ "name": "海口三亚中免凤凰机场店08",
|
|
|
+ "sort": 8,
|
|
|
+ "rtspUrl": "rtsp://10.110.80.105:554/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/g6FK-MZ4rE4KiXJdSoubmg",
|
|
|
+ "rtmpUrl": "rtmp://10.110.80.105:556/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/g6FK-MZ4rE4KiXJdSoubmg",
|
|
|
+ "hlsUrl": "http://1.1.1.1:1/live/374a0894-93bf-4bbe-ae07-b2ebc762a8b0/g6FK-MZ4rE4KiXJdSoubmg"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
});
|
|
|
watch(() => state.videoData, (n) => {
|
|
|
state.currentInfo = n?.[0] || {}
|
|
|
})
|
|
|
+ watch(() => state.currentInfo, (n: any) => {
|
|
|
+ n?.viseoRecords.forEach((v: any) => {
|
|
|
+ getStream(v)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ const getStream = (obj: any) => {
|
|
|
+ let url_1 = `/${store.state.app.apiProxy.tesApi}/index/api/addFFmpegSource?`
|
|
|
+ const streamId = obj.hlsUrl.substring(obj.hlsUrl.indexOf('/live/') + 6)
|
|
|
+ const params = {
|
|
|
+ 'secret': state.secret,
|
|
|
+ 'src_url': `${obj.hlsUrl}/rtmp`,
|
|
|
+ 'dst_url': `rtmp://127.0.0.1/live/${streamId}`,
|
|
|
+ 'timeout_ms': 10000,
|
|
|
+ 'enable_hls': 0,
|
|
|
+ 'enable_mp4': 0
|
|
|
+ }
|
|
|
+ Object.entries(params).forEach(([k, v], i) => {
|
|
|
+ if (i > 0) {
|
|
|
+ url_1 += '&'
|
|
|
+ }
|
|
|
+ url_1 += `${k}=${v}`
|
|
|
+ })
|
|
|
+ axios.get(url_1).then(res => {
|
|
|
+ if (res.status === 200 && res.data?.code === 0 && res.data.data?.key) {
|
|
|
+ let url_2 = `/${store.state.app.apiProxy.tesApi}/index/api/getMediaList?`
|
|
|
+ const params = {
|
|
|
+ 'secret': state.secret,
|
|
|
+ 'stream': streamId,
|
|
|
+ }
|
|
|
+ Object.entries(params).forEach(([k, v], i) => {
|
|
|
+ if (i > 0) {
|
|
|
+ url_2 += '&'
|
|
|
+ }
|
|
|
+ url_2 += `${k}=${v}`
|
|
|
+ })
|
|
|
+ axios.get(url_2).then(res => {
|
|
|
+ if (res.status === 200 && res.data?.code === 0) {
|
|
|
+ obj.flvUrl = `ws://10.110.31.81/odae-video/live/${streamId}.live.flv`
|
|
|
+ obj.flvUrlProxy = `ws://${location.host}/${store.state.app.apiProxy.tesApi}/live/${streamId}.live.flv`
|
|
|
+ }
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(() => {})
|
|
|
+ }
|
|
|
onMounted(() => {
|
|
|
window.addEventListener("message", function (event) {
|
|
|
const result = event.data;
|
|
@@ -133,6 +465,15 @@ export default defineComponent({
|
|
|
variable: "videoIframeLoading",
|
|
|
value: true,
|
|
|
}, "*")
|
|
|
+
|
|
|
+ const arr: any = []
|
|
|
+ state.videoData.forEach(p => {
|
|
|
+ p.viseoRecords.forEach(v => {
|
|
|
+ arr.push(v)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ state.test = arr[0]
|
|
|
+ getStream(state.test)
|
|
|
})
|
|
|
return {
|
|
|
...toRefs(state),
|
|
@@ -151,16 +492,19 @@ export default defineComponent({
|
|
|
width: 174px;
|
|
|
height: 100%;
|
|
|
margin-right: 10px;
|
|
|
- display: grid;
|
|
|
- grid-row-gap: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
overflow-y: auto;
|
|
|
- grid-template-rows: repeat(auto-fill, 42px);
|
|
|
|
|
|
.list-item {
|
|
|
width: 100%;
|
|
|
- height: 42px;
|
|
|
+ min-height: 42px;
|
|
|
+ padding: 10px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
cursor: pointer;
|
|
|
- background: url("./img/video_bg.png");
|
|
|
+ background-image: url("./img/video_bg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
font-size: 20px;
|
|
|
font-family: FZLanTingHeiS-DB-GB;
|
|
|
font-weight: 400;
|
|
@@ -168,9 +512,12 @@ export default defineComponent({
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
-
|
|
|
+ margin-top: 10px;
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
&.active {
|
|
|
- background: url("./img/video_bg_active.png");
|
|
|
+ background-image: url("./img/video_bg_active.png");
|
|
|
}
|
|
|
}
|
|
|
}
|