添加云控制台权限按钮

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

@@ -2,6 +2,9 @@
 <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)
@@ -21,7 +24,7 @@ const createPlayer = () => {
 		szId: 'player',
 		szBasePath: "./",
 		iMaxSplit: 4,
-		iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
+		iCurrentSplit: parseInt(windowCount.value),
 		openDebug: true,
 		oStyle: {
 			borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
@@ -78,38 +81,107 @@ onMounted(() => {
 </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 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">
-@media screen and (max-width: 991px) {
+.player {
 	#player {
-		width: calc(100vw - 16px);
-		height: calc((100vw - 16px) * 5 / 8);
+		width: 55vw;
+		height: calc((55vw) * 5 / 8);
 	}
 }
-@media screen and (min-width: 992px) {
-	#player {
-		width: calc(50vw - 8px);
-		height: calc((50vw - 8px) * 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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+</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>
+</template>
+
+<style scoped lang="less">
+
+</style>