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">
        <div>
            <PresetSetting
                :markerInfoNew="markerInfoNew"
                v-if="presetSettingVisible"
                :formType="formType"
                @onHandleAddMarker="onHandleAddMarker"
                @onHandleCloseModal="onHandleCloseSettingModal"
            />
        </div>
    </n-modal>

    <n-modal v-model:show="addMarkerVisible">
        <div>
            <AddOrEditMarkerForm
                v-if="addMarkerVisible"
                :markerInfo="markerInfo"
                @onHandleConfirm="onHandleConfirm"
                @onHandleCloseAddMarkerModal="onHandleCloseAddMarkerModal"
            />
        </div>
    </n-modal>

    <n-modal v-model:show="inspectionTaskVisible">
        <div>
            <InspectionTask
                v-if="inspectionTaskVisible"
                :isChange="isChange"
                @onHandleCloseModal="onHandleCloseInspectionModal"
                @onHandleAddInspectionTask="onHandleAddInspectionTask"
            />
        </div>
    </n-modal>

    <n-modal v-model:show="addInspectionTaskVisible">
        <div>
            <AddOrEditForm
                v-if="addInspectionTaskVisible"
                :addOrEditInfo="addOrEditInfo"
                @onHandleCloseModalInner="onHandleCloseModalInner"
            />
        </div>
    </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 AddOrEditMarkerForm from './modal-content/add-or-edit-marker-form.vue'

import FlvPlayer from '@/components/FlvPlayer/index.vue'
const presetSettingVisible = ref(false) // 预置位配置
const addMarkerVisible = ref(false) // 新增预置点位
const inspectionTaskVisible = ref(false) // 巡视任务
const addInspectionTaskVisible = ref(false) // 新增巡视任务
const markerInfo = ref({}) // 新增预置点位信息
const markerInfoNew = ref({}) // 新增预置点位信息 修改后的数据
const addOrEditInfo = ref({
    type: '',
    id: '',
}) // 新增/修改巡视任务
const formType = ref('') // 新增/修改
const isChange = ref({
    is_change: 'error',
}) // 是否修改

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',
])

// 上方按钮组 ----------------------------

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

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

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

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

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

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

// 关闭预置位配置弹框
const onHandleCloseSettingModal = (type) => {
    presetSettingVisible.value = false
}

// 新增预置点位 确认
const onHandleConfirm = (info) => {
    markerInfoNew.value = info
    addMarkerVisible.value = false
}

// 新增巡视任务 打开新增巡视任务弹框
const onHandleAddInspectionTask = (info) => {
    addOrEditInfo.value = info
    addInspectionTaskVisible.value = true
}

// 关闭巡视任务弹框
const onHandleCloseInspectionModal = () => {
    inspectionTaskVisible.value = false
}

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

// 新增预置点位 打开新增预置点位弹框
const onHandleAddMarker = (info) => {
    markerInfo.value = info
    addMarkerVisible.value = true
}
// 关闭新增预置点位弹框
const onHandleCloseAddMarkerModal = (type) => {
    formType.value = type
    addMarkerVisible.value = false
}
</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>