edu_train_web_new/user_web/src/components/CarSimulation/CarSimulationMain.vue

<script setup>
import { CommonValStore } from "../ChengGuangYuanJing/store/CommonValStore.js";
import { CarMyThreeWorldStore } from "../CarSimulation/CarThreeWorldEvent/store/CarMyThreeWorldStore.js";
import CarThreeWorldEventMain from "../CarSimulation/CarThreeWorldEvent/CarThreeWorldEventMain.vue";
import LoadingDemo from "../CarSimulation/CarThreeWorldEvent/LoadingDemo.vue";
import CarCourseChapter3dView from "../CarSimulation/CarCourseChapter3d/view.vue";
import { CarCourseChapter3dShowStore } from "../CarSimulation/CarCourseChapter3d/store/CarCourseChapter3dShowStore.js";
import { CarProcessDb } from "../CarSimulation/CarThreeWorldEvent/event/CarProcessDb.js";

const props = defineProps({
    // 重置流程到第一个流程
    processInitRestTime : {
        type: String,
        default : function() {
            return "0";
        }
    },
});

// 定义发射给父组件的方法
const emits = defineEmits([
    'callbackShengNa',
    'callbackChuanGongZuoFu',
    'callbackProcessUpdate',
])


/**
 * 是否触发回到声纳车逻辑
 * bool
 */
const callbackShengNaEvent = (bool) => {
    emits('callbackShengNa', bool);
}

/**
 * 是否穿完工作服回调
 * bool
 */
const callbackChuanGongZuoFuEvent = (bool) => {
    emits('callbackChuanGongZuoFu', bool);
}

/**
 * 每次进入流程回调
 * db
 */
const callbackProcessUpdateEvent = (db) => {
    emits('callbackProcessUpdate', db);
}

// 操作帮助点击退出
const showOperationHelpExitEvent = () => {
    // 触发下一步逻辑
    // nextStep();
};

/**
 * 车的完成下井实验
 */
const carShutDownEvent = () => {
    // 触发下一步逻辑
    // nextStep();

    let configDownUpdate = CarProcessDb.find().configDownUpdate();
    if (configDownUpdate != null && configDownUpdate != undefined) {
        CarMyThreeWorldStore().obj.processConfig = configDownUpdate;
        console.log(
            "carShutDownEvent 切换下一步的配置", configDownUpdate
        );
    }

};

/**
 * 车的相机截图
 * img       base64位图片
 */
const carCameraScreenshotEvent = (img) => {

    // console.log(
    //     "车的相机截图", img
    // );

    // // 将 base64为转换成，Blob格式
    // let objBlob = dataURLtoBlob(img);
    // // blob 转换成 file对象
    // const file = new File([objBlob], 'example.png', { type: 'text/plain' });
    
    CarCourseChapter3dShowStore().show.showToastViewBool = false;
    CarCourseChapter3dShowStore().show.showPromptEvent('截图上传完成', null, function (res) {
        // console.log("yes", res);
    });

};

/**
 * 将base64转换为blob
 * @param dataurl   base64位图片
 */
const dataURLtoBlob = (dataurl) => {
    let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
};

/**
 * 上一步是否显示
 * open     true - 显示， false - 隐藏
 */
const tipsBtnsUpOpenEvent = (open) => {
    // console.log("上一步是否显示", open);
    CarMyThreeWorldStore().obj.tipsBtnsUpOpenEventBool = open;
};

/**
 * 下一步是否显示
 * open     true - 显示， false - 隐藏
 */
const tipsBtnsDownOpenEvent = (open) => {
    // console.log("下一步是否显示", open);
    CarMyThreeWorldStore().obj.tipsBtnsDownOpenEventBool = open;
};

/**
 * 是否到声纳车逻辑
 * bool
 */
CarProcessDb.find().callbackShengNa = function(bool) {
    callbackShengNaEvent(bool);
}

/**
 * 是否穿完工作服了
 * bool
 */
CarProcessDb.find().callbackChuanGongZuoFu = function(bool) {
    // console.log("是否穿完工作服了 CarProcessDb.find().callbackChuanGongZuoFu ===> ", bool);
    callbackChuanGongZuoFuEvent(bool);
}


// 自定义回调流程
CarProcessDb.find().callbackProcessUpdate = function(res) {
    // console.log(
    //     "callbackProcessUpdate res", res
    // );
    callbackProcessUpdateEvent(res);
}


</script>

<template>
    <div class="CarSimulationMain">

        <!-- 自定义自己建的加载3d场景的逻辑 -->
        <CarThreeWorldEventMain
        :processInitRestTime="props.processInitRestTime"
        @tipsBtnsUpOpen="tipsBtnsUpOpenEvent"
        @tipsBtnsDownOpen="tipsBtnsDownOpenEvent"
        ></CarThreeWorldEventMain>
        
        <!-- 自定义加载百分比 -->
        <LoadingDemo
            v-if="CarMyThreeWorldStore().obj.loadSuccess == false"
        ></LoadingDemo>

        <!-- 我们会通过一个全局的变量，来控制什么组件是否显示 CarMyThreeWorldStore().obj.loadSuccess 是一种方式，3d场景加载完成后会变成 true -->
        <div
        v-show="CarMyThreeWorldStore().obj.loadSuccess == true"
        >
        
            <CarCourseChapter3dView
                @showOperationHelpExitEvent="showOperationHelpExitEvent"
                @carCameraScreenshot="carCameraScreenshotEvent"
                @carShutDown="carShutDownEvent"
            ></CarCourseChapter3dView>
            
        </div>
        
        
    </div>
</template>

<style lang="scss" scoped>

.CarSimulationMain * {

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;

}

.CarSimulationMain {

    position: fixed;
    z-index: 0;
    width: 0px;
    height: 0px;
    top: 0px;
    left: 0px;

}

</style>