diff --git a/public/config/config.json b/public/config/config.json index 4fe0577..172fbfb 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -9,7 +9,7 @@ "minZoom": "1", "maxZoom": "18", "zoom": "15", - "timeGap": 3000, + "timeGap": 600000, "systemType": "gm", "lineWidth": "3", "lineColor": "#1aa034", diff --git a/public/config/config.json b/public/config/config.json index 4fe0577..172fbfb 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -9,7 +9,7 @@ "minZoom": "1", "maxZoom": "18", "zoom": "15", - "timeGap": 3000, + "timeGap": 600000, "systemType": "gm", "lineWidth": "3", "lineColor": "#1aa034", diff --git a/public/playerVideo6/player.html b/public/playerVideo6/player.html index fde2e2e..21eb277 100644 --- a/public/playerVideo6/player.html +++ b/public/playerVideo6/player.html @@ -26,8 +26,8 @@
2
3
4
- + + + + + + diff --git a/public/config/config.json b/public/config/config.json index 4fe0577..172fbfb 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -9,7 +9,7 @@ "minZoom": "1", "maxZoom": "18", "zoom": "15", - "timeGap": 3000, + "timeGap": 600000, "systemType": "gm", "lineWidth": "3", "lineColor": "#1aa034", diff --git a/public/playerVideo6/player.html b/public/playerVideo6/player.html index fde2e2e..21eb277 100644 --- a/public/playerVideo6/player.html +++ b/public/playerVideo6/player.html @@ -26,8 +26,8 @@
2
3
4
- + + + + + + diff --git a/src/views/bigScreen/components/dangerCategory.vue b/src/views/bigScreen/components/dangerCategory.vue index b62edf2..013bff1 100644 --- a/src/views/bigScreen/components/dangerCategory.vue +++ b/src/views/bigScreen/components/dangerCategory.vue @@ -23,19 +23,19 @@ value: '--', name: '危险源', }, - { - value: '--', - name: '危险化学品场所', - }, - { - value: '--', - name: '危险作业', - }, - { - value: '--', - name: '危险作业工序', - imageUrl: '@/assets/bigScreen/work.png', - }, + // { + // value: '--', + // name: '危险化学品场所', + // }, + // { + // value: '--', + // name: '危险作业', + // }, + // { + // value: '--', + // name: '危险作业工序', + // imageUrl: '@/assets/bigScreen/work.png', + // }, ]) const numbersDom: any = ref(null) const loading = ref(false) @@ -84,31 +84,33 @@ value: Number(res.data.dangerSource), name: '危险源', }, - { - value: Number(res.data.chemistryPlace), - name: '危险化学品场所', - }, - { - value: Number(res.data.work), - name: '危险作业', - }, - { - value: Number(res.data.workProcesses), - name: '危险作业工序', - }, + // { + // value: Number(res.data.chemistryPlace), + // name: '危险化学品场所', + // }, + // { + // value: Number(res.data.work), + // name: '危险作业', + // }, + // { + // value: Number(res.data.workProcesses), + // name: '危险作业工序', + // }, ] - nextTick(() => { - // 数字滚动 - const numbersDom = document.querySelectorAll('#number') - numberAnimation(numbersDom) - if (timer.value) { - clearInterval(timer.value) - } - timer.value = setInterval(() => { - numberAnimation(numbersDom) - }, 5000) - }) + // nextTick(() => { + // // 数字滚动 + // const numbersDom = document.querySelectorAll('#number') + // numberAnimation(numbersDom) + // if (timer.value) { + // clearInterval(timer.value) + // } + // timer.value = setInterval(() => { + // numberAnimation(numbersDom) + // }, 5000) + // }) } + console.log('隐患分类数据', data.value) + loading.value = false }).catch(() => { loading.value = false @@ -133,8 +135,9 @@
{{ item.name }}
-
+
{{ item.value }}
+
{{ item.value }}
@@ -159,7 +162,8 @@ background-color: #183749; border-radius: 0.5rem; border: 0.1rem solid #45d7ff; - width: 48%; + // width: 48%; + width: 100%; margin-bottom: 1rem; .base-map-image { width: 3rem; diff --git a/public/config/config.json b/public/config/config.json index 4fe0577..172fbfb 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -9,7 +9,7 @@ "minZoom": "1", "maxZoom": "18", "zoom": "15", - "timeGap": 3000, + "timeGap": 600000, "systemType": "gm", "lineWidth": "3", "lineColor": "#1aa034", diff --git a/public/playerVideo6/player.html b/public/playerVideo6/player.html index fde2e2e..21eb277 100644 --- a/public/playerVideo6/player.html +++ b/public/playerVideo6/player.html @@ -26,8 +26,8 @@
2
3
4
- + + + + + + diff --git a/src/views/bigScreen/components/dangerCategory.vue b/src/views/bigScreen/components/dangerCategory.vue index b62edf2..013bff1 100644 --- a/src/views/bigScreen/components/dangerCategory.vue +++ b/src/views/bigScreen/components/dangerCategory.vue @@ -23,19 +23,19 @@ value: '--', name: '危险源', }, - { - value: '--', - name: '危险化学品场所', - }, - { - value: '--', - name: '危险作业', - }, - { - value: '--', - name: '危险作业工序', - imageUrl: '@/assets/bigScreen/work.png', - }, + // { + // value: '--', + // name: '危险化学品场所', + // }, + // { + // value: '--', + // name: '危险作业', + // }, + // { + // value: '--', + // name: '危险作业工序', + // imageUrl: '@/assets/bigScreen/work.png', + // }, ]) const numbersDom: any = ref(null) const loading = ref(false) @@ -84,31 +84,33 @@ value: Number(res.data.dangerSource), name: '危险源', }, - { - value: Number(res.data.chemistryPlace), - name: '危险化学品场所', - }, - { - value: Number(res.data.work), - name: '危险作业', - }, - { - value: Number(res.data.workProcesses), - name: '危险作业工序', - }, + // { + // value: Number(res.data.chemistryPlace), + // name: '危险化学品场所', + // }, + // { + // value: Number(res.data.work), + // name: '危险作业', + // }, + // { + // value: Number(res.data.workProcesses), + // name: '危险作业工序', + // }, ] - nextTick(() => { - // 数字滚动 - const numbersDom = document.querySelectorAll('#number') - numberAnimation(numbersDom) - if (timer.value) { - clearInterval(timer.value) - } - timer.value = setInterval(() => { - numberAnimation(numbersDom) - }, 5000) - }) + // nextTick(() => { + // // 数字滚动 + // const numbersDom = document.querySelectorAll('#number') + // numberAnimation(numbersDom) + // if (timer.value) { + // clearInterval(timer.value) + // } + // timer.value = setInterval(() => { + // numberAnimation(numbersDom) + // }, 5000) + // }) } + console.log('隐患分类数据', data.value) + loading.value = false }).catch(() => { loading.value = false @@ -133,8 +135,9 @@
{{ item.name }}
-
+
{{ item.value }}
+
{{ item.value }}
@@ -159,7 +162,8 @@ background-color: #183749; border-radius: 0.5rem; border: 0.1rem solid #45d7ff; - width: 48%; + // width: 48%; + width: 100%; margin-bottom: 1rem; .base-map-image { width: 3rem; diff --git a/src/views/bigScreen/components/video6.vue b/src/views/bigScreen/components/video6.vue index ab85ec4..feb866b 100644 --- a/src/views/bigScreen/components/video6.vue +++ b/src/views/bigScreen/components/video6.vue @@ -3,10 +3,17 @@ import { createStream, sendHeart, stopStream } from '@/api/monitor/index-new-gm' import { getConfig } from '@/api/bs' import { getMediaStream, getMediaToken } from '@/api/monitor/media' +const props = defineProps({ + splitScreen: { + type: Number, + default: 4, + }, +}) const baseurl = ref(window.location.href.split('/#')[0]) const mediaToken = ref('') // 流媒体token const width = ref(0) const height = ref(0) +const getConfigData: any = ref([]) const videoUrl = ref(['', '', '', '', '', '']) // 流url const timers: any = ref([null, null, null, null, null, null]) // 定时器 const currentStreamId = ref(['', '', '', '', '', '']) // 正在播的流的国标号 @@ -16,7 +23,7 @@ // width.value = Number(((height.value / 9) * 16).toFixed(2)) // console.log('宽高', width.value, height.value) const divPlugin = document.getElementById('videoArea') as any - height.value = divPlugin.clientHeight / 3 + height.value = divPlugin.clientHeight / 2 width.value = Number(((height.value / 9) * 16).toFixed(2)) console.log('宽高', width.value, height.value) } @@ -101,64 +108,92 @@ onBeforeUnmount(() => { window.removeEventListener('resize', resize) // 先停心跳 - timers.value.forEach((item: any) => { - if (item) { - clearInterval(item) - } - }) + if (window.localStorage.getItem('systemType') === 'gm') { + timers.value.forEach((item: any) => { + if (item) { + clearInterval(item) + } + }) - // 停所有流 - currentStreamId.value.forEach((item: any) => { - if (item) { - handleStopStream(item) - } - }) + // 停所有流 + currentStreamId.value.forEach((item: any) => { + if (item) { + handleStopStream(item) + } + }) + } }) + +// 获取配置并播放 +const fetchConfig = async (splitScreen: number) => { + const res = await getConfig() + if (res.data) { + const configData = JSON.parse(res.data) + getConfigData.value = configData + if (configData && configData.length) { + console.log('视频页面：获取设备数据', configData) + configData.forEach((item: { cameraIndexCode: string; nvrIndexCode: string }, index: number) => { + // if (currentStreamId.value[currentIndex] !== item.cameraIndexCode && index < 7) { + // } + if (index < splitScreen) { + if (window.localStorage.getItem('systemType') === 'gm') { + playGmStream(item.cameraIndexCode, index) + } + else if (window.localStorage.getItem('systemType') === 'sm') { + fetchMediaStream(item.cameraIndexCode, item.nvrIndexCode, index) + } + } + }) + } + } +} onMounted(async () => { if (window.localStorage.getItem('systemType') === 'sm') { const res = await getMediaToken() mediaToken.value = res.data } - const tempCameraIndexCode = localStorage.getItem('tempCameraIndexCode') - getConfig().then((res) => { - if (res.data) { - const configData = JSON.parse(res.data) - if (configData && configData.length) { - console.log('视频页面：获取设备数据', configData) - configData.forEach((item: { cameraIndexCode: string; nvrIndexCode: string }, index: number) => { - if (window.localStorage.getItem('systemType') === 'gm') { - playGmStream(item.cameraIndexCode, index) - } - else if (window.localStorage.getItem('systemType') === 'sm') { - fetchMediaStream(item.cameraIndexCode, item.nvrIndexCode, index) - } - // if (currentStreamId.value[currentIndex] !== item.cameraIndexCode && index < 7) { - // } - if (window.localStorage.getItem('systemType') === 'gm') { - playGmStream(item.cameraIndexCode, index) - } - else if (window.localStorage.getItem('systemType') === 'sm') { - fetchMediaStream(item.cameraIndexCode, item.nvrIndexCode, index) - } - }) - } - } - }) - + // fetchConfig() setTimeout(() => { resize() window.addEventListener('resize', resize) }, 200) }) + +watch(() => props.splitScreen, (newValue: number) => { + if (window.localStorage.getItem('systemType') === 'gm') { + // 先停心跳 + timers.value.forEach((item: any) => { + if (item) { + clearInterval(item) + } + }) + + // 停所有流 + currentStreamId.value.forEach((item: any) => { + if (item) { + handleStopStream(item) + } + }) + } + fetchConfig(newValue) +}, { immediate: true })