Merge branch 'refs/heads/dev-2.19.0' into dev

src/components/video/Live.vue

@@ -0,0 +1,188 @@
+<!-- 实时视频监控 -->
+<script setup>
+import {getPreview} from "@/api/previewPlayback";
+import { useRoute } from 'vue-router';
+import commonSelect from '@/components/CommonSelector/index.vue'
+const activeKey = ref('1')
+const windowCount = ref('1')
+const route = useRoute();
+const orgId = route.query.orgId
+console.log('orgId', orgId)
+console.log('player', window.JSPlugin)
+const player = ref(null)
+const IS_MOVE_DEVICE = false
+const isMoveDevice = ref(IS_MOVE_DEVICE)
+const splitNum = ref(IS_MOVE_DEVICE ? 1 : 2)
+const init = () => {
+	window.addEventListener('resize', () => {
+		if(player.vlaue)
+			player.value.JS_Resize()
+	})
+}
+const createPlayer = () => {
+	player.value = new window.JSPlugin({
+		szId: 'player',
+		szBasePath: "./",
+		iMaxSplit: 4,
+		iCurrentSplit: parseInt(windowCount.value),
+		openDebug: true,
+		oStyle: {
+			borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
+		}
+	})
+	player.value.JS_SetWindowControlCallback({
+		windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+			console.log('windowSelect callback: ', iWndIndex);
+		},
+		pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+			console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
+		},
+		windowEventOver: function (iWndIndex) {  //鼠标移过回调
+			//console.log(iWndIndex);
+		},
+		windowEventOut: function (iWndIndex) {  //鼠标移出回调
+			//console.log(iWndIndex);
+		},
+		windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
+			//console.log(iWndIndex);
+		},
+		windowFullCcreenChange: function (bFull) {  //全屏切换回调
+			console.log('fullScreen callback: ', bFull);
+		},
+		firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
+			console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
+		},
+		performanceLack: function () {  //性能不足回调
+			console.log('performanceLack callback: ');
+		}
+	});
+}
+
+const arrangeWindow = () => {
+	let num = splitNum.value
+	player.value.JS_ArrangeWindow(num).then(
+		() => { console.log(`arrangeWindow to ${num}x${num} success`) },
+		e => { console.error(e) }
+	)
+}
+
+const wholeFullScreen = () => {
+	player.value.JS_FullScreenDisplay(true).then(
+		() => { console.log(`wholeFullScreen success`) },
+		e => { console.error(e) }
+	)
+}
+
+onMounted(() => {
+	init()
+	createPlayer()
+	getPreview({cameraIndexCode: '0'})
+})
+</script>
+
+<template>
+	<div class="flex mt-[5px]">
+		<div class="tree w-[20%] mr-4">树</div>
+		<div class="player mr-4">
+			<div class="w-full h-[25px] bg-black text-white pl-5">
+				播放通道
+			</div>
+			<div id="player"></div>
+		</div>
+		<div class="control w-[20%] h-full">
+			<a-tabs v-model:activeKey="activeKey">
+				<a-tab-pane key="1" tab="摄像头列表"></a-tab-pane>
+				<a-tab-pane key="2" tab="操作" force-render>
+					<div class="row">
+						<span class="w-[30%]">窗口数量:</span> <common-select v-model:value="windowCount" type="windowCount" class="w-[70%]"/>
+					</div>
+					<div class="row">
+						<a-button type="primary" class="mr-5 btn">轮巡</a-button>
+						<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="btn">窗口关闭</a-button>
+					</div>
+					<div class="row">
+						<a-button type="primary" class="mr-5 btn">全部抓图</a-button>
+						<a-button type="primary" class="btn">全部关闭</a-button>
+					</div>
+					<div v-if="hasPerm(['controlCloud'])" class="flex flex-col">
+						<div>云控制台</div>
+						<div>
+							<template
+								v-for="list in [
+									[{label: '↖', code: 'LEFT_UP'}, {label: '↑', code: 'UP'}, {label: '↗', code: 'RIGHT_UP'}],
+									[{label: '←', code: 'LEFT'}, {label: 'center', code: 'GOTO_PRESET'}, {label: '→', code: 'RIGHT'}],
+									[{label: '↙', code: 'LEFT_DOWN'}, {label: '↓', code: 'DOWN'}, {label: '↘', code: 'RIGHT_DOWN'}]]" >
+								<div class="control-row">
+									<template v-for="item in list">
+										<a-button
+											v-if="item.code !== 'GOTO_PRESET'"
+											:key="item.code"
+											class="small-btn"
+										>{{ item.label }}</a-button>
+										<a-button v-else class="small-btn">
+											<template #icon>
+												<UndoOutlined />
+											</template>
+										</a-button>
+									</template>
+								</div>
+							</template>
+						</div>
+					</div>
+					<div class="row">
+						<a-button type="primary" class="mr-5 btn">
+							+ 聚焦
+						</a-button>
+						<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="btn">- 调焦</a-button>
+					</div>
+					<div class="row">
+						<a-button type="primary" class="mr-5 btn">
+							录像开始
+						</a-button>
+						<a-button type="primary" class="btn">录像结束</a-button>
+					</div>
+				</a-tab-pane>
+			</a-tabs>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="less">
+.player {
+	#player {
+		width: 55vw;
+		height: calc((55vw) * 5 / 8);
+	}
+}
+
+.row {
+	margin-bottom: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	.btn {
+		width: 120px;
+		margin-top: 5px;
+	}
+}
+.control-row {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	.small-btn {
+		width: 80px;
+		margin-top: 5px;
+	}
+}
+</style>
+

src/components/video/Replay.vue

@@ -0,0 +1,141 @@
+<script setup>
+import {getPreview} from "@/api/previewPlayback";
+import { useRoute } from 'vue-router';
+import commonSelect from '@/components/CommonSelector/index.vue'
+const activeKey = ref('1')
+const windowCount = ref('1')
+const route = useRoute();
+const orgId = route.query.orgId
+console.log('orgId', orgId)
+console.log('player', window.JSPlugin)
+const player = ref(null)
+const IS_MOVE_DEVICE = false
+const isMoveDevice = ref(IS_MOVE_DEVICE)
+const splitNum = ref(IS_MOVE_DEVICE ? 1 : 2)
+const init = () => {
+	window.addEventListener('resize', () => {
+		if(player.vlaue)
+			player.value.JS_Resize()
+	})
+}
+const createPlayer = () => {
+	player.value = new window.JSPlugin({
+		szId: 'player',
+		szBasePath: "./",
+		iMaxSplit: 4,
+		iCurrentSplit: parseInt(windowCount.value),
+		openDebug: true,
+		oStyle: {
+			borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
+		}
+	})
+	player.value.JS_SetWindowControlCallback({
+		windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+			console.log('windowSelect callback: ', iWndIndex);
+		},
+		pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+			console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
+		},
+		windowEventOver: function (iWndIndex) {  //鼠标移过回调
+			//console.log(iWndIndex);
+		},
+		windowEventOut: function (iWndIndex) {  //鼠标移出回调
+			//console.log(iWndIndex);
+		},
+		windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
+			//console.log(iWndIndex);
+		},
+		windowFullCcreenChange: function (bFull) {  //全屏切换回调
+			console.log('fullScreen callback: ', bFull);
+		},
+		firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
+			console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
+		},
+		performanceLack: function () {  //性能不足回调
+			console.log('performanceLack callback: ');
+		}
+	});
+}
+
+const arrangeWindow = () => {
+	let num = splitNum.value
+	player.value.JS_ArrangeWindow(num).then(
+		() => { console.log(`arrangeWindow to ${num}x${num} success`) },
+		e => { console.error(e) }
+	)
+}
+
+const wholeFullScreen = () => {
+	player.value.JS_FullScreenDisplay(true).then(
+		() => { console.log(`wholeFullScreen success`) },
+		e => { console.error(e) }
+	)
+}
+
+onMounted(() => {
+	init()
+	createPlayer()
+	getPreview({cameraIndexCode: '0'})
+})
+</script>
+
+<template>
+	<div class="flex mt-[5px]">
+		<div class="tree w-[20%] mr-4">树</div>
+		<div class="player mr-4">
+			<div class="w-full h-[25px] bg-black text-white pl-5">
+				播放通道
+			</div>
+			<div id="player"></div>
+		</div>
+		<div class="control w-[20%] h-full">
+			<a-tabs v-model:activeKey="activeKey">
+				<a-tab-pane key="1" tab="摄像头列表">
+					回放日期  <a-range-picker value-format="YYYY-MM-DD HH:mm:ss" show-time />
+				</a-tab-pane>
+				<a-tab-pane key="2" tab="操作" force-render>
+
+					<div class="row">
+						<a-button type="primary" class="mr-5 btn">&lt;&lt; 慢放</a-button>
+						<a-button type="primary" class="btn">快放 &gt;&gt;</a-button>
+					</div>
+					<div class="row">
+						<a-button type="primary" class="mr-1 w-[60px]">暂停</a-button>
+						<a-button type="primary" class="mr-1 w-[60px]">恢复</a-button>
+						<a-button type="primary" class="mr-1 w-[60px]">停止</a-button>
+						<a-button type="primary" class="w-[120px]">全部停止</a-button>
+					</div>
+				</a-tab-pane>
+			</a-tabs>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="less">
+.player {
+	#player {
+		width: 55vw;
+		height: calc((55vw) * 5 / 8);
+	}
+}
+
+.row {
+	margin-bottom: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	.btn {
+		width: 120px;
+		margin-top: 5px;
+	}
+}
+.control-row {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	.small-btn {
+		width: 80px;
+		margin-top: 5px;
+	}
+}
+</style>

src/views/RLGI/comonents/videoData/RealTimeMonitoring.vue

@@ -2,187 +2,15 @@
 <script setup>
 import {getPreview} from "@/api/previewPlayback";
 import { useRoute } from 'vue-router';
-import commonSelect from '@/components/CommonSelector/index.vue'
-const activeKey = ref('1')
-const windowCount = ref('1')
-const route = useRoute();
-const orgId = route.query.orgId
-console.log('orgId', orgId)
-console.log('player', window.JSPlugin)
-const player = ref(null)
-const IS_MOVE_DEVICE = false
-const isMoveDevice = ref(IS_MOVE_DEVICE)
-const splitNum = ref(IS_MOVE_DEVICE ? 1 : 2)
-const init = () => {
-	window.addEventListener('resize', () => {
-		if(player.vlaue)
-			player.value.JS_Resize()
-	})
-}
-const createPlayer = () => {
-	player.value = new window.JSPlugin({
-		szId: 'player',
-		szBasePath: "./",
-		iMaxSplit: 4,
-		iCurrentSplit: parseInt(windowCount.value),
-		openDebug: true,
-		oStyle: {
-			borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
-		}
-	})
-	player.value.JS_SetWindowControlCallback({
-		windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
-			console.log('windowSelect callback: ', iWndIndex);
-		},
-		pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
-			console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
-		},
-		windowEventOver: function (iWndIndex) {  //鼠标移过回调
-			//console.log(iWndIndex);
-		},
-		windowEventOut: function (iWndIndex) {  //鼠标移出回调
-			//console.log(iWndIndex);
-		},
-		windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
-			//console.log(iWndIndex);
-		},
-		windowFullCcreenChange: function (bFull) {  //全屏切换回调
-			console.log('fullScreen callback: ', bFull);
-		},
-		firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
-			console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
-		},
-		performanceLack: function () {  //性能不足回调
-			console.log('performanceLack callback: ');
-		}
-	});
-}
 
-const arrangeWindow = () => {
-	let num = splitNum.value
-	player.value.JS_ArrangeWindow(num).then(
-		() => { console.log(`arrangeWindow to ${num}x${num} success`) },
-		e => { console.error(e) }
-	)
-}
-
-const wholeFullScreen = () => {
-	player.value.JS_FullScreenDisplay(true).then(
-		() => { console.log(`wholeFullScreen success`) },
-		e => { console.error(e) }
-	)
-}
-
-onMounted(() => {
-	init()
-	createPlayer()
-	getPreview({cameraIndexCode: '0'})
-})
+import Live from '@/components/video/Live.vue'
 </script>
 
 <template>
-	<div class="flex mt-[5px]">
-		<div class="tree w-[20%] mr-4">树</div>
-		<div class="player mr-4">
-			<div class="w-full h-[25px] bg-black text-white pl-5">
-				播放通道
-			</div>
-			<div id="player"></div>
-		</div>
-		<div class="control w-[20%] h-full">
-			<a-tabs v-model:activeKey="activeKey">
-				<a-tab-pane key="1" tab="摄像头列表"></a-tab-pane>
-				<a-tab-pane key="2" tab="操作" force-render>
-					<div class="row">
-						<span class="w-[30%]">窗口数量:</span> <common-select v-model:value="windowCount" type="windowCount" class="w-[70%]"/>
-					</div>
-					<div class="row">
-						<a-button type="primary" class="mr-5 btn">轮巡</a-button>
-						<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="btn">窗口关闭</a-button>
-					</div>
-					<div class="row">
-						<a-button type="primary" class="mr-5 btn">全部抓图</a-button>
-						<a-button type="primary" class="btn">全部关闭</a-button>
-					</div>
-					<div v-if="hasPerm(['controlCloud'])" class="flex flex-col">
-						<div>云控制台</div>
-						<div>
-							<template
-								v-for="list in [
-									[{label: '↖', code: 'LEFT_UP'}, {label: '↑', code: 'UP'}, {label: '↗', code: 'RIGHT_UP'}],
-									[{label: '←', code: 'LEFT'}, {label: 'center', code: 'GOTO_PRESET'}, {label: '→', code: 'RIGHT'}],
-									[{label: '↙', code: 'LEFT_DOWN'}, {label: '↓', code: 'DOWN'}, {label: '↘', code: 'RIGHT_DOWN'}]]" >
-								<div class="control-row">
-									<template v-for="item in list">
-										<a-button
-											v-if="item.code !== 'GOTO_PRESET'"
-											:key="item.code"
-											class="small-btn"
-										>{{ item.label }}</a-button>
-										<a-button v-else class="small-btn">
-											<template #icon>
-												<UndoOutlined />
-											</template>
-										</a-button>
-									</template>
-								</div>
-							</template>
-						</div>
-					</div>
-					<div class="row">
-						<a-button type="primary" class="mr-5 btn">
-							+ 聚焦
-						</a-button>
-						<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="btn">- 调焦</a-button>
-					</div>
-					<div class="row">
-						<a-button type="primary" class="mr-5 btn">
-							录像开始
-						</a-button>
-						<a-button type="primary" class="btn">录像结束</a-button>
-					</div>
-				</a-tab-pane>
-			</a-tabs>
-		</div>
-	</div>
+	<live />
 </template>
 
 <style scoped lang="less">
-.player {
-	#player {
-		width: 55vw;
-		height: calc((55vw) * 5 / 8);
-	}
-}
 
-.row {
-	margin-bottom: 10px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	.btn {
-		width: 120px;
-		margin-top: 5px;
-	}
-}
-.control-row {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	.small-btn {
-		width: 80px;
-		margin-top: 5px;
-	}
-}
 </style>
 

src/views/RLGI/comonents/videoData/VideoReplay.vue

@@ -1,29 +1,19 @@
-<script setup lang="ts">
-
+<script setup>
+import {getPreview} from "@/api/previewPlayback";
+import { useRoute } from 'vue-router';
+import commonSelect from '@/components/CommonSelector/index.vue'
+const activeKey = ref('1')
+const windowCount = ref('1')
+const route = useRoute();
+const orgId = route.query.orgId
+console.log('orgId', orgId)
+console.log('player', window.JSPlugin)
+import Replay from '@/components/video/Replay.vue'
 </script>
 
 <template>
-	<div style="margin-top: 10px; ">
-		<a-row style="min-height: 100%;">
-			<a-col :span="24" :md="12">
-				<a-affix :offset-top="8">
-					<div id="player" style="min-height: 500px;"></div>
-				</a-affix>
-				<a-form-item>
-					分屏
-					<a-radio-group v-model:value="splitNum" @change="arrangeWindow">
-						<a-radio-button :value="1">1x1</a-radio-button>
-						<a-radio-button :value="2">2x2</a-radio-button>
-						<a-radio-button :value="3" v-show="!isMoveDevice">3x3</a-radio-button>
-						<a-radio-button :value="4" v-show="!isMoveDevice">4x4</a-radio-button>
-					</a-radio-group>
-					<a-button @click="wholeFullScreen" v-show="!isMoveDevice">整体全屏</a-button>
-				</a-form-item>
-			</a-col>
-		</a-row>
-	</div>
+	<replay />
 </template>
 
 <style scoped lang="less">
-
 </style>

src/views/RLGI/comonents/videoSurveillance.vue

@@ -14,6 +14,7 @@
 import RealTimeMonitoring from './videoData/RealTimeMonitoring.vue'
 import BusinessTraceability from './videoData/BusinessTraceability.vue'
 import VideoAnalysis from './videoData/VideoAnalysis.vue'
+import VideoReplay from './videoData/VideoReplay.vue'
 const tabsList = [
   { value: '1', lable: '实时视频监控' },
   { value: '2', lable: '视频回放' },
@@ -28,7 +29,7 @@ function changeMenu(key) {
     case '1':
       return currentComponent.value = RealTimeMonitoring
     case '2':
-      return currentComponent.value = ''
+      return currentComponent.value = VideoReplay
     case '3':
       return currentComponent.value = BusinessTraceability
     case '4':

src/views/emergencySupport/analysis.vue

@@ -177,6 +177,7 @@
 <template>
 	<a-card :bordered="false">
 		<a-button v-if="stack.length > 0" class="mb-2" @click="back">上一层</a-button>
+		<a-button v-if="stack.length > 0" class="mb-2" @click="back">上一层</a-button>
 		<a-table v-show="areaTableShow" :columns="columns" :data-source="dataSource" bordered :pagination="false">
 			<template #bodyCell="{ column, text, record }">
 				<a

src/views/storehouseVideo/storehouseVideoLive.vue

@@ -0,0 +1,11 @@
+<script setup name="storehouseVideoLive">
+import Live from '@/components/video/Live.vue'
+</script>
+
+<template>
+	<live />
+</template>
+
+<style scoped lang="less">
+
+</style>

src/views/storehouseVideo/storehouseVideoReplay.vue

@@ -0,0 +1,11 @@
+<script setup name="storehouseVideoReplay">
+import Replay from '@/components/video/Replay.vue'
+</script>
+
+<template>
+	<replay />
+</template>
+
+<style scoped lang="less">
+
+</style>

src/views/videoMonitor/index.vue

@@ -1,112 +1,11 @@
-<script setup>
-	import commonSelect from '@/components/CommonSelector/index.vue'
-	const activeKey = ref('1')
-	const windowCount = ref('1')
-	// /h5player/
+<script setup name="videoMonitorLive">
+import Live from '@/components/video/Live.vue'
 </script>
 
 <template>
-	<div class="flex mt-[5px]">
-		<div class="tree w-[20%] mr-4">树</div>
-		<div class="player mr-4">
-			<div class="w-full h-[25px] bg-black text-white pl-5">
-				播放通道
-			</div>
-			<div id="player"></div>
-		</div>
-		<div class="control w-[20%] h-full">
-			<a-tabs v-model:activeKey="activeKey">
-				<a-tab-pane key="1" tab="摄像头列表"></a-tab-pane>
-				<a-tab-pane key="2" tab="操作" force-render>
-					<div class="row">
-						<span class="w-[30%]">窗口数量:</span> <common-select v-model:value="windowCount" type="windowCount" class="w-[70%]"/>
-					</div>
-					<div class="row">
-						<a-button type="primary" class="mr-5 btn">轮巡</a-button>
-						<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="btn">窗口关闭</a-button>
-					</div>
-					<div class="row">
-						<a-button type="primary" class="mr-5 btn">全部抓图</a-button>
-						<a-button type="primary" class="btn">全部关闭</a-button>
-					</div>
-					<div class="flex flex-col">
-						<div>云控制台</div>
-						<div>
-							<template
-								v-for="list in [
-									[{label: '↖', code: 'LEFT_UP'}, {label: '↑', code: 'UP'}, {label: '↗', code: 'RIGHT_UP'}],
-									[{label: '←', code: 'LEFT'}, {label: 'center', code: 'GOTO_PRESET'}, {label: '→', code: 'RIGHT'}],
-									[{label: '↙', code: 'LEFT_DOWN'}, {label: '↓', code: 'DOWN'}, {label: '↘', code: 'RIGHT_DOWN'}]]" >
-								<div class="control-row">
-									<template v-for="item in list">
-										<a-button
-											v-if="item.code !== 'GOTO_PRESET'"
-											:key="item.code"
-											class="small-btn"
-										>{{ item.label }}</a-button>
-										<a-button v-else class="small-btn">
-											<template #icon>
-												<UndoOutlined />
-											</template>
-										</a-button>
-									</template>
-								</div>
-							</template>
-						</div>
-					</div>
-					<div class="row">
-						<a-button type="primary" class="mr-5 btn">
-							+ 聚焦
-						</a-button>
-						<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="btn">- 调焦</a-button>
-					</div>
-					<div class="row">
-						<a-button type="primary" class="mr-5 btn">
-							录像开始
-						</a-button>
-						<a-button type="primary" class="btn">录像结束</a-button>
-					</div>
-				</a-tab-pane>
-			</a-tabs>
-		</div>
-	</div>
+	<live />
 </template>
 
 <style scoped lang="less">
-	.player {
-		#player {
-			width: 55vw;
-			height: calc((55vw) * 5 / 8);
-		}
-	}
 
-	.row {
-		margin-bottom: 10px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		.btn {
-			width: 120px;
-			margin-top: 5px;
-		}
-	}
-	.control-row {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		.small-btn {
-			width: 80px;
-			margin-top: 5px;
-		}
-	}
 </style>

src/views/videoMonitor/videoMonitorLive.vue

@@ -0,0 +1,11 @@
+<script setup name="videoMonitorLive">
+import Live from '@/components/video/Live.vue'
+</script>
+
+<template>
+	<live />
+</template>
+
+<style scoped lang="less">
+
+</style>

src/views/videoMonitor/videoMonitorReplay.vue

@@ -0,0 +1,11 @@
+<script setup name="videoMonitorReplay">
+import Replay from '@/components/video/Replay.vue'
+</script>
+
+<template>
+	<replay />
+</template>
+
+<style scoped lang="less">
+
+</style>