on-site-robots-screen/src/views/home/components/left-one.vue

<template>
    <!-- 左侧盒子1 -->
    <div class="left-one child-container">
        <n-flex justify="space-between" v-if="isShowAllBtns">
            <div class="btns" @click="onHandlePresetSetting" v-if="!fullScreenVisible">
                预置位配置
            </div>
            <div class="btns" @click="onHandleInspectionTask" v-if="!fullScreenVisible">
                巡视任务
            </div>
            <div class="btns" @click="onHandleOperationPanel" v-if="!fullScreenVisible">
                操作面板
            </div>
            <div class="btns" @click="onHandleOpenFullScreen" v-if="!fullScreenVisible">
                全屏控制
            </div>

            <!-- 返回 -->
            <div class="back-btn" @click="onHandleBackFullScreen" v-if="fullScreenVisible">
                <img src="@/assets/home-imgs/back-icon.png" />
                返回
            </div>

            <div class="back-btn" @click="onHandleChangeView" v-if="fullScreenVisible">
                视角切换
            </div>
        </n-flex>

        <div class="video-container" :style="{ marginTop: isShowAllBtns ? '24px' : '0' }">
            <FlvPlayer :cameraNode="cameraNode" :videoId="props.videoId" />
        </div>
    </div>

    <!-- 预置位配置 -->
    <n-modal v-model:show="presetSettingVisible">
        <PresetSetting
            v-if="showModal === 1"
            @onHandleCloseModal="onHandleCloseModal"
            :presetSettingVisible="presetSettingVisible"
        />
        <InspectionTask
            v-if="showModal === 2"
            @onHandleCloseModal="onHandleCloseModal"
            @onHandleAddInspectionTask="onHandleAddInspectionTask"
        />
    </n-modal>

    <!-- 新增巡视任务 -->
    <n-modal v-model:show="addInspectionTaskVisible">
        <AddOrEditForm
            v-if="addInspectionTaskVisible"
            @onHandleCloseModalInner="onHandleCloseModalInner"
        />
    </n-modal>
</template>

<script setup>
import { ref } from 'vue'
import PresetSetting from './modal-content/preset-setting.vue'
import InspectionTask from './modal-content/inspection-task.vue'
import AddOrEditForm from './modal-content/add-or-edit-form.vue'

import FlvPlayer from '@/components/FlvPlayer/index.vue'
const presetSettingVisible = ref(false)
const addInspectionTaskVisible = ref(false)
const showModal = ref(1)

const props = defineProps({
    fullScreenVisible: {
        type: Boolean,
        default: false,
    },
    isShowAllBtns: {
        type: Boolean,
        default: true,
    },
    cameraNode: {
        type: Object,
        default: () => {},
    },
    videoId: {
        type: String,
        default: 'video-1',
    },
})
const emits = defineEmits([
    'onHandleOperationPanel',
    'onHandleFullScreen',
    'onHandleFullScreenToggle',
    'onHandleChangeView',
])

// 预置位配置
const onHandlePresetSetting = () => {
    showModal.value = 1
    presetSettingVisible.value = true
}

// 关闭预置位配置
const onHandleCloseModal = () => {
    showModal.value = null
    presetSettingVisible.value = false
}

// 巡视任务
const onHandleInspectionTask = () => {
    showModal.value = 2
    presetSettingVisible.value = true
}

// 新增巡视任务
const onHandleAddInspectionTask = () => {
    addInspectionTaskVisible.value = true
}

// 关闭新增或修改巡视任务
const onHandleCloseModalInner = () => {
    addInspectionTaskVisible.value = false
}

// 打开操作面板
const onHandleOperationPanel = () => {
    emits('onHandleOperationPanel', true)
}

// 全屏控制
const onHandleOpenFullScreen = () => {
    emits('onHandleFullScreenToggle', true)
}

// 退出全屏
const onHandleBackFullScreen = () => {
    emits('onHandleFullScreenToggle', false)
}

// 视角切换
const onHandleChangeView = () => {
    emits('onHandleChangeView')
}
</script>

<style lang="scss" scoped>
.left-one {
    display: flex; /* 新增 */
    flex-direction: column; /* 新增 */
    height: 100%; /* 确保容器有高度 */

    .btns {
        // width: 90px;
        padding: 0 10px;
        height: 36px;
        background: url('@/assets/home-imgs/button-bg.png') no-repeat center center;
        background-size: 100% 100%;
        line-height: 36px;
        text-align: center;
        font-size: 12px;
        cursor: pointer;
    }

    .back-btn {
        width: 140px;
        height: 32px;
        background: url('@/assets/home-imgs/back-btn.png') no-repeat center center;
        background-size: 100% 100%;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;

        img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
        }
    }

    > .video-container {
        flex: 1; /* 占据剩余空间 */
        min-height: 0; /* 关键：允许内容压缩 */
        position: relative; /* 新增 */

        video {
            position: absolute; /* 新增 */
            top: 0;
            left: 0;
            object-fit: cover; /* 保持视频比例 */
        }
    }
}
</style>