视频相关

src/api/previewPlayback/index.js

@@ -13,3 +13,7 @@ export const controlling = (data) => {
 export const getPlayback = (data) => {
 	return request('/getPlayback', data, 'post')
 }
+
+export const manualCapture = (data) => {
+	return request('/manualCapture', data, 'get')
+}

src/components/video/Live.vue

@@ -1,11 +1,12 @@
 <!-- 实时视频监控 -->
 <script setup>
-	import { getPreview, controlling } from '@/api/previewPlayback'
+	import { getPreview, controlling, manualCapture } from '@/api/previewPlayback'
 	import { useRoute } from 'vue-router'
 	import commonSelect from '@/components/CommonSelector/index.vue'
 	import api from '@/api/orgInfo/info'
 	import cameraApi from '@/api/camera/index'
 	import { message } from 'ant-design-vue'
+	import { downloadLink } from '@/utils/systemUtils'
 
 	const activeKey = ref('1')
 	const route = useRoute()
@@ -217,9 +218,9 @@
 
 	const circle = () => {
 		if (isActive.value) {
-			doControl('LEFT', 0)
-		} else {
 			doControl('LEFT', 1)
+		} else {
+			doControl('LEFT', 0)
 		}
 		isActive.value = !isActive.value
 	}
@@ -240,6 +241,30 @@
 		doControl('STOP_TRACK', 1)
 	}
 
+	const captureOne = (i = null) => {
+		console.log('ready capture one')
+		if (i == null) {
+			i = currentWindowIndex
+		}
+		if (videoMap[i]) {
+			const data = videoMap[i]
+			const cameraIndexCode = data.cameraIndexCode
+			manualCapture({ cameraIndexCode }).then((url) => {
+				console.log('capture url', url)
+				downloadLink(url)
+			})
+		} else {
+			return message.warning('请选择播放中的窗口')
+		}
+	}
+
+	const captureAll = () => {
+		let i = 0
+		for (const _ of Object.values(videoMap)) {
+			captureOne(i++)
+		}
+	}
+
 	const orgSelect = (orgId, event) => {
 		const org = event.node
 		cameraListData.value = []
@@ -355,11 +380,11 @@
 						<a-button type="primary" class="btn">中止轮巡</a-button>
 					</div>
 					<div class="row">
-						<a-button type="primary" class="mr-5 btn">窗口抓图</a-button>
+						<a-button type="primary" class="mr-5 btn" @click="captureOne">窗口抓图</a-button>
 						<a-button type="primary" class="btn" @click="stopPlay">窗口关闭</a-button>
 					</div>
 					<div class="row">
-						<a-button type="primary" class="mr-5 btn">全部抓图</a-button>
+						<a-button type="primary" class="mr-5 btn" @click="captureAll">全部抓图</a-button>
 						<a-button type="primary" class="btn" @click="stopAllPlay">全部关闭</a-button>
 					</div>
 					<div v-if="hasPerm(['controlCloud'])" class="flex flex-col">

src/utils/systemUtils.js

@@ -155,9 +155,9 @@ export const getALlOrgData = () => {
 export const getShiZhou = () => {
 	const dicList = JSON.parse(localStorage.getItem('DICT_TYPE_TREE_DATA')) || []
 	let cityList = []
-	const d = dicList.find(d => d.dictValue === 'xzqh')
+	const d = dicList.find((d) => d.dictValue === 'xzqh')
 	const children = d.children
-	for(const el of children) {
+	for (const el of children) {
 		if (el.name == '青海省') {
 			cityList = el.children
 			break
@@ -184,3 +184,18 @@ export const getQueryParams = (name) => {
 	}
 	return null
 }
+
+export const downloadLink = (url) => {
+	const iframe = document.createElement('iframe')
+	iframe.style.display = 'none' // 防止影响页面
+	iframe.style.height = 0 // 防止影响页面
+	iframe.src = url
+	document.body.appendChild(iframe) // 这一行必须，iframe挂在到dom树上才会发请求
+	// 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
+	setTimeout(
+		function () {
+			iframe.remove()
+		},
+		5 * 60 * 1000
+	)
+}