298 lines
8.3 KiB
Vue
298 lines
8.3 KiB
Vue
<template>
|
|
<div class="viewport-container">
|
|
<!-- 非全屏状态 -->
|
|
<div ref="appRef" class="app-container">
|
|
<!-- 机器人首页 -->
|
|
<!-- 使用grid布局 -->
|
|
<!-- 非全屏模式 -->
|
|
<div class="robot-container">
|
|
<!-- 左一 -->
|
|
<div
|
|
:style="{
|
|
gridColumn: fullScreenVisibleNew ? '1 / 9' : '1 / 4',
|
|
gridRow: fullScreenVisibleNew ? '1 / 13' : '1 / 7',
|
|
}"
|
|
>
|
|
<LeftOne
|
|
:videoId="'video-1'"
|
|
:cameraNode="cameraNode_1"
|
|
:fullScreenVisible="fullScreenVisibleNew"
|
|
@onHandleChangeView="onHandleChangeView"
|
|
@onHandleOperationPanel="onHandleOperationPanel"
|
|
@onHandleFullScreenToggle="onHandleFullScreenToggle"
|
|
/>
|
|
</div>
|
|
<!-- 左二 -->
|
|
<div class="robot-2" v-if="!fullScreenVisibleNew">
|
|
<LeftTwo />
|
|
</div>
|
|
|
|
<!-- 中一 -->
|
|
<div
|
|
:style="{
|
|
gridColumn: fullScreenVisibleNew ? '9 / 13' : '4 / 10',
|
|
gridRow: fullScreenVisibleNew ? '1 / 6' : '1 / 8',
|
|
}"
|
|
>
|
|
<CenterOne
|
|
:videoId="'video-2'"
|
|
:cameraNode_2="cameraNode_2"
|
|
:fullScreenVisible="fullScreenVisibleNew"
|
|
/>
|
|
</div>
|
|
<!-- 中二 -->
|
|
<div class="robot-4" v-if="!fullScreenVisibleNew">
|
|
<CenterTwo />
|
|
</div>
|
|
|
|
<!-- 右一 -->
|
|
<div class="robot-5" v-if="!fullScreenVisibleNew">
|
|
<RightOne />
|
|
</div>
|
|
<!-- 右二 -->
|
|
<div class="robot-6" v-if="!fullScreenVisibleNew">
|
|
<RightTwo />
|
|
</div>
|
|
|
|
<div class="robot-7" v-if="fullScreenVisibleNew">
|
|
<ControlDeck />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作面板 -->
|
|
<n-drawer
|
|
resizable
|
|
placement="right"
|
|
:default-width="502"
|
|
v-model:show="operationPanelVisible"
|
|
>
|
|
<div class="operation-panel-container">
|
|
<div class="operation-panel-content">
|
|
<ControlDeck />
|
|
</div>
|
|
</div>
|
|
</n-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { getDeviceUrlApi } from '@/utils/initLogin'
|
|
import { getTokenApi } from '@/api/home'
|
|
import { useScale } from '@/hooks/useScale' // 引入自定义 Hook
|
|
import { userDataStore } from '@/store/user' // 用户数据
|
|
import LeftOne from './components/left-one.vue' // 左一
|
|
import LeftTwo from './components/left-two.vue' // 左二
|
|
import CenterOne from './components/center-one.vue' // 中一
|
|
import CenterTwo from './components/center-two.vue' // 中二
|
|
import RightOne from './components/right-one.vue' // 右一
|
|
import RightTwo from './components/right-two/index.vue' // 右二
|
|
import ControlDeck from './components/control-deck.vue' // 控制台
|
|
|
|
import { getRobotTokenFn, getRobotDeviceListFn } from '@/utils/getRobotInfo' // 获取机器人信息
|
|
|
|
const userData = userDataStore()
|
|
const appRef = ref(null) // 获取 DOM 引用
|
|
const fullScreenVisibleNew = ref(false) // 全屏状态
|
|
const { baseWidth, baseHeight, scale } = useScale(appRef)
|
|
|
|
const cameraNode_1 = ref({
|
|
token: '',
|
|
puid: '',
|
|
idx: 1,
|
|
stream: 0,
|
|
name: '',
|
|
operateType: 1,
|
|
steamCode: '',
|
|
steamURL: 'http://112.31.70.193:1854/icvs2/stream.flv',
|
|
})
|
|
const cameraNode_2 = ref({
|
|
token: '',
|
|
puid: '',
|
|
idx: 0,
|
|
stream: 0,
|
|
name: '',
|
|
operateType: 1,
|
|
steamCode: '',
|
|
steamURL: 'http://112.31.70.193:1854/icvs2/stream.flv',
|
|
})
|
|
|
|
const operationPanelVisible = ref(false) // 操作面板是否显示
|
|
|
|
// 打开操作面板
|
|
const onHandleOperationPanel = (visible) => {
|
|
operationPanelVisible.value = visible
|
|
}
|
|
// 全屏控制
|
|
const onHandleFullScreenToggle = (visible) => {
|
|
fullScreenVisibleNew.value = visible
|
|
}
|
|
// 视角切换
|
|
const onHandleChangeView = () => {
|
|
const tempIdx = cameraNode_1.value.idx
|
|
cameraNode_1.value.idx = cameraNode_2.value.idx
|
|
cameraNode_2.value.idx = tempIdx
|
|
// const temp = cameraNode_1.value.steamURL
|
|
// cameraNode_1.value.steamURL = cameraNode_2.value.steamURL
|
|
// cameraNode_2.value.steamURL = temp
|
|
}
|
|
|
|
// // 获取视频地址
|
|
const getDeviceData = async (puId, deviceToken) => {
|
|
const { data: res } = await getDeviceUrlApi({
|
|
token: deviceToken,
|
|
puid: puId,
|
|
idx: 0,
|
|
stream: 0,
|
|
type: 'HTTP-FLV',
|
|
})
|
|
const { data: res2 } = await getDeviceUrlApi({
|
|
token: deviceToken,
|
|
puid: puId,
|
|
idx: 1,
|
|
stream: 0,
|
|
type: 'HTTP-FLV',
|
|
})
|
|
|
|
cameraNode_1.value.steamURL = res?.streamUrl
|
|
cameraNode_2.value.steamURL = res2?.streamUrl
|
|
}
|
|
|
|
// 获取token
|
|
const getTokenData = async () => {
|
|
getTokenApi({
|
|
username: 'admin',
|
|
password: 'admin123',
|
|
}).then((res) => {
|
|
// 存储token 内部使用
|
|
userData.setUserInfo({
|
|
token: res?.data?.token,
|
|
})
|
|
})
|
|
}
|
|
|
|
getTokenData() // 获取token
|
|
|
|
onMounted(async () => {
|
|
const deviceToken = await getRobotTokenFn() // 获取设备token
|
|
const deviceInfo = await getRobotDeviceListFn() // 获取设备信息
|
|
|
|
cameraNode_2.value.puid = deviceInfo.puId
|
|
cameraNode_1.value.puid = deviceInfo.puId
|
|
cameraNode_2.value.token = deviceToken
|
|
cameraNode_1.value.token = deviceToken
|
|
// cameraNode_2.value.steamURL = `http://112.31.70.193:1854/icvs2/stream.flv?puid=${deviceInfo.puId}&idx=${cameraNode_2.value.idx}&stream=0&token=${deviceToken}`
|
|
// cameraNode_1.value.steamURL = `http://112.31.70.193:1854/icvs2/stream.flv?puid=${deviceInfo.puId}&idx=${cameraNode_1.value.idx}&stream=0&token=${deviceToken}`
|
|
// cameraNode_2.value.steamURL = `http://112.31.70.193:1854/icvs2/stream.flv`
|
|
// cameraNode_1.value.steamURL = `http://112.31.70.193:1854/icvs2/stream.flv`
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.app-container {
|
|
.robot-container,
|
|
.full-screen-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-rows: repeat(12, 1fr);
|
|
grid-template-columns: repeat(12, 1fr);
|
|
// gap: 10px;
|
|
}
|
|
|
|
// 左侧
|
|
.robot-1 {
|
|
grid-column: 1 / 4;
|
|
grid-row: 1 / 7;
|
|
}
|
|
.robot-2 {
|
|
grid-column: 1 / 4;
|
|
grid-row: 7 / 13;
|
|
}
|
|
|
|
// 中间
|
|
.robot-3 {
|
|
grid-column: 4 / 10;
|
|
grid-row: 1 / 8;
|
|
}
|
|
.robot-4 {
|
|
grid-column: 4 / 10;
|
|
grid-row: 8 / 13;
|
|
}
|
|
|
|
// 右侧
|
|
.robot-5 {
|
|
grid-column: 10 / 13;
|
|
grid-row: 1 / 8;
|
|
}
|
|
.robot-6 {
|
|
grid-column: 10 / 13;
|
|
grid-row: 8 / 13;
|
|
}
|
|
|
|
.robot-7 {
|
|
grid-column: 9 / 13;
|
|
grid-row: 6 / 13;
|
|
}
|
|
|
|
.full-screen-left1 {
|
|
grid-column: 1 / 9;
|
|
grid-row: 1 / 13;
|
|
}
|
|
.full-screen-right1 {
|
|
grid-column: 9 / 13;
|
|
grid-row: 1 / 6;
|
|
}
|
|
.full-screen-right2 {
|
|
grid-column: 9 / 13;
|
|
grid-row: 6 / 13;
|
|
}
|
|
}
|
|
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.child-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.more-btn {
|
|
width: 58px;
|
|
height: 24px;
|
|
border-radius: 12px;
|
|
color: #d6fdff;
|
|
background: linear-gradient(to bottom, rgba(15, 47, 78, 0.5) 0%, rgba(0, 222, 255, 0.5) 100%);
|
|
text-align: center;
|
|
line-height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.n-drawer {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.operation-panel-container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.operation-panel-content {
|
|
width: 90%;
|
|
background-color: rgba(0, 112, 190, 0.3);
|
|
color: #fff;
|
|
border: 1px solid #0070be;
|
|
}
|
|
}
|
|
</style>
|