diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue index a48e4fe..7d4d823 100644 --- a/src/components/videoDHone/index.vue +++ b/src/components/videoDHone/index.vue @@ -10,11 +10,17 @@ const { proxy } = getCurrentInstance(); const { dh_video_config } = proxy.useDict('dh_video_config'); +const emit = defineEmits(['ckNumber']) + const props = defineProps({ // 内网、公网 4个配置 channelId: { + type: Array, + default: () => [], + }, + layout: { type: String, - default: () => '', + default: () => '1', }, }); @@ -22,7 +28,7 @@ const AllData = reactive({ Getchajian: null, URL: null, - channelId: null, + channelId: [], myVideoPlayer: null, pluginLoginInfo: { // 传入 icc 平台的登录信息 @@ -46,7 +52,7 @@ val => { if (props.channelId) { console.log('初始化视频', props.channelId); - AllData.channelId = props.channelId.trim(); + AllData.channelId = props.channelId; if (AllData.Getchajian) { startReal(); } else { @@ -83,7 +89,7 @@ windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放） usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流) pluginLoginInfo: AllData.pluginLoginInfo, - division: 1, // 默认展示的窗口数量， 必传 + division: props.layout, // 默认展示的窗口数量， 必传 draggable: false, // 窗口拖拽 【暂不支持】 showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】 shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。 @@ -95,6 +101,7 @@ createSuccess: versionInfo => { // 该回调触发后，我们可以进行实时预览/录像回放等操作 // desc.value = '创建成功!!!' + versionInfo.message; + // debugger AllData.Getchajian = 1; startReal(); }, @@ -102,6 +109,7 @@ createError: err => { // 有错误码，可打印查看错误信息 // desc.value = '创建失败!!!' + JSON.stringify(err); + // debugger AllData.Getchajian = null; GetchajianUrl(); }, @@ -149,7 +157,9 @@ // 鼠标双击窗口回调 dbClickWindow: snum => {}, // 播放器窗口的数量回调 - changeDivision: division => {}, + changeDivision: division => { + emit('ckNumber',division) + }, // rtsp 流下载录像成功回调 downloadRecordSuccess: info => {}, // rtsp 流下载录像失败回调 @@ -176,19 +186,21 @@ // 实时预览 function startReal() { - console.log('开始实时预览', AllData.channelId); - AllData.myVideoPlayer.startReal([ - // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码)
可在ICC平台设备管理页面查看到通道id - { - channelId: AllData.channelId, // 通道id 【必传】 + let array=[] + AllData.channelId.forEach((e,i)=>{ + let obj={ + channelId: e, // 通道id 【必传】 channelName: '通道名称', // 通道名称 (用于本地录像下载) - snum: 0, // 即将要播放的窗口序号，从0开始 【必传】 + snum: i, // 即将要播放的窗口序号，从0开始 【必传】 streamType: 1, // 1-主码流 2-辅码流 (可不传，默认主码流) deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲) cameraType: '1', // 摄像头类型 (用于云台) capability: '00000000000000000000000000000001', // 能力集 (用于云台) - }, - ]); + } + array.push(obj) + }) + console.log('开始实时预览', AllData.channelId); + AllData.myVideoPlayer.startReal(array); } // 录像回放 diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue index a48e4fe..7d4d823 100644 --- a/src/components/videoDHone/index.vue +++ b/src/components/videoDHone/index.vue @@ -10,11 +10,17 @@ const { proxy } = getCurrentInstance(); const { dh_video_config } = proxy.useDict('dh_video_config'); +const emit = defineEmits(['ckNumber']) + const props = defineProps({ // 内网、公网 4个配置 channelId: { + type: Array, + default: () => [], + }, + layout: { type: String, - default: () => '', + default: () => '1', }, }); @@ -22,7 +28,7 @@ const AllData = reactive({ Getchajian: null, URL: null, - channelId: null, + channelId: [], myVideoPlayer: null, pluginLoginInfo: { // 传入 icc 平台的登录信息 @@ -46,7 +52,7 @@ val => { if (props.channelId) { console.log('初始化视频', props.channelId); - AllData.channelId = props.channelId.trim(); + AllData.channelId = props.channelId; if (AllData.Getchajian) { startReal(); } else { @@ -83,7 +89,7 @@ windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放） usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流) pluginLoginInfo: AllData.pluginLoginInfo, - division: 1, // 默认展示的窗口数量， 必传 + division: props.layout, // 默认展示的窗口数量， 必传 draggable: false, // 窗口拖拽 【暂不支持】 showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】 shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。 @@ -95,6 +101,7 @@ createSuccess: versionInfo => { // 该回调触发后，我们可以进行实时预览/录像回放等操作 // desc.value = '创建成功!!!' + versionInfo.message; + // debugger AllData.Getchajian = 1; startReal(); }, @@ -102,6 +109,7 @@ createError: err => { // 有错误码，可打印查看错误信息 // desc.value = '创建失败!!!' + JSON.stringify(err); + // debugger AllData.Getchajian = null; GetchajianUrl(); }, @@ -149,7 +157,9 @@ // 鼠标双击窗口回调 dbClickWindow: snum => {}, // 播放器窗口的数量回调 - changeDivision: division => {}, + changeDivision: division => { + emit('ckNumber',division) + }, // rtsp 流下载录像成功回调 downloadRecordSuccess: info => {}, // rtsp 流下载录像失败回调 @@ -176,19 +186,21 @@ // 实时预览 function startReal() { - console.log('开始实时预览', AllData.channelId); - AllData.myVideoPlayer.startReal([ - // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码)
可在ICC平台设备管理页面查看到通道id - { - channelId: AllData.channelId, // 通道id 【必传】 + let array=[] + AllData.channelId.forEach((e,i)=>{ + let obj={ + channelId: e, // 通道id 【必传】 channelName: '通道名称', // 通道名称 (用于本地录像下载) - snum: 0, // 即将要播放的窗口序号，从0开始 【必传】 + snum: i, // 即将要播放的窗口序号，从0开始 【必传】 streamType: 1, // 1-主码流 2-辅码流 (可不传，默认主码流) deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲) cameraType: '1', // 摄像头类型 (用于云台) capability: '00000000000000000000000000000001', // 能力集 (用于云台) - }, - ]); + } + array.push(obj) + }) + console.log('开始实时预览', AllData.channelId); + AllData.myVideoPlayer.startReal(array); } // 录像回放 diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue index 567acf1..718cfc2 100644 --- a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue +++ b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue @@ -29,7 +29,7 @@ @@ -65,7 +65,7 @@ -->
- +
@@ -116,12 +116,8 @@ }, cameraStatus:'全部', - cameraIndexCode: '', - layout: '1x1', - defaultList: [ - // { cameraIndexCode: "f8b48c890c054ac190c124bb190a7007", wndId: 7 }, - // { cameraIndexCode: "09aa2a2694744cb8b188442b0b2af9b7", wndId: 6 }, - ], + cameraIndexCode: [], + layout: '1', }); const { serchParms,cameraStatus,tabsArray} = toRefs(AllData) @@ -129,6 +125,10 @@ const accessType=[ { + label:'全部', + value:null, + }, + { label:'自建', value:'owner', }, @@ -142,7 +142,7 @@ const leftList = ref([]); const cameraList = ref([]); const state = ref([]); -const tableActive = ref(''); +const tableActive = ref([]); function getOneLevel(){ groupList({cameraUserId:serchParms.value.cameraUserId}).then(res=>{ @@ -153,9 +153,9 @@ } // 左侧点击 -function leftclick(item) { - AllData.cameraIndexCode = item.cameraId; -} +// function leftclick(item) { +// AllData.cameraIndexCode = [item.cameraId]; +// } // 获取监控视频列表 function GetcameraList() { @@ -165,7 +165,8 @@ console.log('props.videoList', props.videoList); // 如果是单独视频站点的类型 就没有多个 不用查询 直接赋值点击地图获取到的stcode if (props.videoList.includes(props.dataCode)) { - AllData.cameraIndexCode = props.dataID; + AllData.cameraIndexCode = [props.dataID]; + tableActive.value=[props.dataCode] return; } @@ -191,7 +192,8 @@ console.log('res', res); leftList.value = res.data; // leftclick(res.data[0]); - AllData.cameraIndexCode = res.data[0].cameraId; + AllData.cameraIndexCode = [res.data[0].cameraId]; + tableActive.value=[res.data[0].id] }); } function pageCamera(){ @@ -228,6 +230,15 @@ }) } +function ckNumber(num){ + AllData.layout=num + if(AllData.cameraIndexCode.length>num){ + AllData.cameraIndexCode=AllData.cameraIndexCode.slice(1,num) + tableActive.value=tableActive.value.slice(1,num) + } + // debugger +} + onMounted(() => { console.log('搞什么啊', props, props.dataId); getOneLevel() @@ -235,7 +246,13 @@ }); function tableSelect(row){ - AllData.cameraIndexCode=row.indexCode + if(AllData.cameraIndexCode.length == AllData.layout){ + AllData.cameraIndexCode=AllData.cameraIndexCode.slice(1,AllData.cameraIndexCode.length-1) + tableActive.value=tableActive.value.slice(1,tableActive.value.length-1) + } + AllData.cameraIndexCode.push(row.indexCode) + tableActive.value.push(row.id) + // debugger } onBeforeUnmount(() => { diff --git a/src/components/videoDHone/index.vue b/src/components/videoDHone/index.vue index a48e4fe..7d4d823 100644 --- a/src/components/videoDHone/index.vue +++ b/src/components/videoDHone/index.vue @@ -10,11 +10,17 @@ const { proxy } = getCurrentInstance(); const { dh_video_config } = proxy.useDict('dh_video_config'); +const emit = defineEmits(['ckNumber']) + const props = defineProps({ // 内网、公网 4个配置 channelId: { + type: Array, + default: () => [], + }, + layout: { type: String, - default: () => '', + default: () => '1', }, }); @@ -22,7 +28,7 @@ const AllData = reactive({ Getchajian: null, URL: null, - channelId: null, + channelId: [], myVideoPlayer: null, pluginLoginInfo: { // 传入 icc 平台的登录信息 @@ -46,7 +52,7 @@ val => { if (props.channelId) { console.log('初始化视频', props.channelId); - AllData.channelId = props.channelId.trim(); + AllData.channelId = props.channelId; if (AllData.Getchajian) { startReal(); } else { @@ -83,7 +89,7 @@ windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放） usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流) pluginLoginInfo: AllData.pluginLoginInfo, - division: 1, // 默认展示的窗口数量， 必传 + division: props.layout, // 默认展示的窗口数量， 必传 draggable: false, // 窗口拖拽 【暂不支持】 showBar: true, // 底部操作栏， 选传，【true - 显示, false - 隐藏】 shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了，把DOM元素的类名传入。 @@ -95,6 +101,7 @@ createSuccess: versionInfo => { // 该回调触发后，我们可以进行实时预览/录像回放等操作 // desc.value = '创建成功!!!' + versionInfo.message; + // debugger AllData.Getchajian = 1; startReal(); }, @@ -102,6 +109,7 @@ createError: err => { // 有错误码，可打印查看错误信息 // desc.value = '创建失败!!!' + JSON.stringify(err); + // debugger AllData.Getchajian = null; GetchajianUrl(); }, @@ -149,7 +157,9 @@ // 鼠标双击窗口回调 dbClickWindow: snum => {}, // 播放器窗口的数量回调 - changeDivision: division => {}, + changeDivision: division => { + emit('ckNumber',division) + }, // rtsp 流下载录像成功回调 downloadRecordSuccess: info => {}, // rtsp 流下载录像失败回调 @@ -176,19 +186,21 @@ // 实时预览 function startReal() { - console.log('开始实时预览', AllData.channelId); - AllData.myVideoPlayer.startReal([ - // 通道id规则说明： 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码)
可在ICC平台设备管理页面查看到通道id - { - channelId: AllData.channelId, // 通道id 【必传】 + let array=[] + AllData.channelId.forEach((e,i)=>{ + let obj={ + channelId: e, // 通道id 【必传】 channelName: '通道名称', // 通道名称 (用于本地录像下载) - snum: 0, // 即将要播放的窗口序号，从0开始 【必传】 + snum: i, // 即将要播放的窗口序号，从0开始 【必传】 streamType: 1, // 1-主码流 2-辅码流 (可不传，默认主码流) deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲) cameraType: '1', // 摄像头类型 (用于云台) capability: '00000000000000000000000000000001', // 能力集 (用于云台) - }, - ]); + } + array.push(obj) + }) + console.log('开始实时预览', AllData.channelId); + AllData.myVideoPlayer.startReal(array); } // 录像回放 diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue index 567acf1..718cfc2 100644 --- a/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue +++ b/src/views/pictureOnMap/page/components/DialogTabs/component/ShiPingJianKong.vue @@ -29,7 +29,7 @@ @@ -65,7 +65,7 @@ -->
- +
@@ -116,12 +116,8 @@ }, cameraStatus:'全部', - cameraIndexCode: '', - layout: '1x1', - defaultList: [ - // { cameraIndexCode: "f8b48c890c054ac190c124bb190a7007", wndId: 7 }, - // { cameraIndexCode: "09aa2a2694744cb8b188442b0b2af9b7", wndId: 6 }, - ], + cameraIndexCode: [], + layout: '1', }); const { serchParms,cameraStatus,tabsArray} = toRefs(AllData) @@ -129,6 +125,10 @@ const accessType=[ { + label:'全部', + value:null, + }, + { label:'自建', value:'owner', }, @@ -142,7 +142,7 @@ const leftList = ref([]); const cameraList = ref([]); const state = ref([]); -const tableActive = ref(''); +const tableActive = ref([]); function getOneLevel(){ groupList({cameraUserId:serchParms.value.cameraUserId}).then(res=>{ @@ -153,9 +153,9 @@ } // 左侧点击 -function leftclick(item) { - AllData.cameraIndexCode = item.cameraId; -} +// function leftclick(item) { +// AllData.cameraIndexCode = [item.cameraId]; +// } // 获取监控视频列表 function GetcameraList() { @@ -165,7 +165,8 @@ console.log('props.videoList', props.videoList); // 如果是单独视频站点的类型 就没有多个 不用查询 直接赋值点击地图获取到的stcode if (props.videoList.includes(props.dataCode)) { - AllData.cameraIndexCode = props.dataID; + AllData.cameraIndexCode = [props.dataID]; + tableActive.value=[props.dataCode] return; } @@ -191,7 +192,8 @@ console.log('res', res); leftList.value = res.data; // leftclick(res.data[0]); - AllData.cameraIndexCode = res.data[0].cameraId; + AllData.cameraIndexCode = [res.data[0].cameraId]; + tableActive.value=[res.data[0].id] }); } function pageCamera(){ @@ -228,6 +230,15 @@ }) } +function ckNumber(num){ + AllData.layout=num + if(AllData.cameraIndexCode.length>num){ + AllData.cameraIndexCode=AllData.cameraIndexCode.slice(1,num) + tableActive.value=tableActive.value.slice(1,num) + } + // debugger +} + onMounted(() => { console.log('搞什么啊', props, props.dataId); getOneLevel() @@ -235,7 +246,13 @@ }); function tableSelect(row){ - AllData.cameraIndexCode=row.indexCode + if(AllData.cameraIndexCode.length == AllData.layout){ + AllData.cameraIndexCode=AllData.cameraIndexCode.slice(1,AllData.cameraIndexCode.length-1) + tableActive.value=tableActive.value.slice(1,tableActive.value.length-1) + } + AllData.cameraIndexCode.push(row.indexCode) + tableActive.value.push(row.id) + // debugger } onBeforeUnmount(() => { diff --git a/vite.config.js b/vite.config.js index 65ccb59..2190341 100644 --- a/vite.config.js +++ b/vite.config.js @@ -5,9 +5,9 @@ import autoprefixer from 'autoprefixer'; const Timestamp = new Date().getTime(); //随机时间戳 -let ipLink = 'https://server1.wh-nf.cn:8201/prod-api'; +// let ipLink = 'https://server1.wh-nf.cn:8201/prod-api'; // let ipLink = 'http://192.168.16.135:9100'; -// let ipLink = 'https://dhgx.wh-nf.cn:8201/prod-api'; +let ipLink = 'https://dhgx.wh-nf.cn:8201/prod-api'; // let ipLink = 'http://192.168.16.124:9100'; // let ipLink = 'http://192.168.20.43:9100'; // 刘总 // let ipLink = 'http://192.168.16.43:9100';