water_maintenance/src/components/ThreeWorldEventQingXiCheAndQv/QingXiCheAndQvMain.vue

<script setup>
import { CommonVal } from "@/components/ChengGuangYuanJing/store/CommonVal.js";
import { QingXiCheAndQvMyThreeWorldStore } from "./store/QingXiCheAndQvMyThreeWorldStore.js";
import ThreeWorldEventMainQingXiCheAndQv from "./ThreeWorldEventMainQingXiCheAndQv.vue";
import { QingXiCheAndQvThreeWorldEventMain } from "./js/QingXiCheAndQvThreeWorldEventMain.js";
import LoadingDemo from "./LoadingDemo.vue";
import QingXiCheAndQvProcessEvent from "./event/QingXiCheAndQvProcessEvent.vue";
import { QingXiCheAndQvProcessEventStore } from "./event/store/QingXiCheAndQvProcessEventStore.js";
import { QingXiCheAndQvCarEvent } from "./js/QingXiCheAndQvCarEvent.js";
import { watch, ref, onMounted } from "vue";

import WindowTxt from "../WindowQingXiCheAndQv/WindowTxt.vue";
import { WindowTxtStore } from "@/components/WindowQingXiCheAndQv/store/WindowTxtStore.js";
import WindowVideo from "../WindowQingXiCheAndQv/WindowVideo.vue";
import { WindowVideoStore } from "@/components/WindowQingXiCheAndQv/store/WindowVideoStore.js";

import WindowCountdown from "../WindowQingXiCheAndQv/WindowCountdown.vue";
import { WindowCountdownStore } from "@/components/WindowQingXiCheAndQv/store/WindowCountdownStore.js";

import WindowVideoRemoveColor from "../WindowQingXiCheAndQv/WindowVideoRemoveColor.vue";
import { WindowVideoRemoveColorStore } from "@/components/WindowQingXiCheAndQv/store/WindowVideoRemoveColorStore.js";

import WindowMenu from "../WindowQingXiCheAndQv/WindowMenu.vue";
import { WindowMenuStore } from "@/components/WindowQingXiCheAndQv/store/WindowMenuStore.js";

import WindowFraction from "../WindowQingXiCheAndQv/WindowFraction.vue";
import { WindowFractionStore } from "@/components/WindowQingXiCheAndQv/store/WindowFractionStore.js";

import { WindowEvent } from "../WindowQingXiCheAndQv/js/WindowEvent.js";

// 接收参数
const props = defineProps({
    // 发视变化,则初始化三维场景到第一个步骤
    initTime: {
        type: String
    },
    // 控制三维里的 上一个 下一步UI是否可以显示
    processUiOpen: {
        type: Boolean,
        default: true,
    },
    /**
     * 当前的模式
     * 0 - 学习模式，会出现各种提示，进行理解学习
     * 1 - 考试模式，不会有任何提示，自己想办法完成
     */
    eventMode :  {
        type: Number,
        default: 0,
    },
});

// 监听某个参数发生变化
watch(
    () => props.initTime,
    (newVal, oldVal) => {

        // 发视变化,则初始化三维场景到第一个步骤
        QingXiCheEventInit();


    }
)

// 定义发射给父组件的方法
const emits = defineEmits([
    // 回调进度
    'callbackProgress',
]);

/**
 * 回调进度
 */
const callbackProgressEvent = (json) => {
    emits('callbackProgress', json);
}



/**
 * 接下来要操作的步骤
 * json
 */
const callbackProcessEvent = (json) => {
    
    let type = json["type"];
    let config = json["config"];

    console.log("清洗车 或者 QV 的 当前切换到的步骤 ---------", config);

    callbackProgressEvent(config);

    // 进入触发当前步骤的逻辑
    QingXiCheAndQvCarEvent.find().typeEvent(config.name);
    
    // 学习阶段才弹出进度的逻辑
    if (QingXiCheAndQvProcessEventStore().obj.eventMode == 0) {
        WindowEvent.find().WindowMenuStoreOpen(
            QingXiCheAndQvProcessEventStore().obj.listIndex,
            QingXiCheAndQvProcessEventStore().obj.list
        );
    }
    
    WindowEvent.find().WindowFractionStoreOpen(0);

}


/**
 * 统一初始化隐藏对应的UI
 */
const ComReturnCallbackExit = () => {

    // QingXiCheAndQvMyThreeWorldStore().obj.ComReturnViewOpen = false;
    // QingXiCheAndQvMyThreeWorldStore().obj.SelectEventViewOpen = true;

    // 改成返回上一级
    WindowEvent.find().WindowTxtViewOpenExit();
    WindowEvent.find().WindowVideoViewOpenExit();
    WindowEvent.find().WindowCountdownExit();
    WindowEvent.find().WindowVideoRemoveColorExit();
    
    QingXiCheAndQvMyThreeWorldStore().obj.VideoViewOpen = false;
    QingXiCheAndQvMyThreeWorldStore().obj.ComReturnViewOpen = false;
    QingXiCheAndQvMyThreeWorldStore().obj.SelectEventViewOpen = false;
    
}


// /**
//  * 切换菜单，触发不同逻辑
//  * name         切换的菜单
//  */
// const menuEvent = (name) => {
    
//     // 回到人物视角
//     if (QingXiCheAndQvMyThreeWorldStore().obj.menu.roleLook == true) {
//         QingXiCheAndQvThreeWorldEventMain.find().toRoleEvent();
//         return;
//     }

// }

watch(

    () => CommonVal().loadSuccess,
    (newVal, oldVal) => {

        console.log("清洗车 和 QV 检测 加载情况 CommonVal().loadSuccess ===>", CommonVal().loadSuccess);
        
        if (CommonVal().loadSuccess == true) {

            setTimeout(function() {

                QingXiCheEventInit();
                // QvEventInit();

            }, 2000);
            
        }

    }
);

/**
 * 初始化 清洗车 的逻辑
 */
const QingXiCheEventInit = () => {

    if (CommonVal().loadSuccess == false) {
        return;
    }

    ComReturnCallbackExit();
    // console.log("初始化 清洗车 的逻辑 ===>");
    QingXiCheStepUpdate("仿真模拟");
}

/**
 * 清洗车
 * 根据指定进度的名字，切换到对应步骤逻辑
 */
const QingXiCheStepUpdate = (name) => {

    // // 自动触发到第1个步骤
    // QingXiCheAndQvProcessEventStore().obj.listIndex = 0;
    
    // 循环找到指定名字的流程，来开始
    for (let processEventStoreListI = 0; processEventStoreListI < QingXiCheAndQvProcessEventStore().obj.list.length; processEventStoreListI++) {
        let thisList = QingXiCheAndQvProcessEventStore().obj.list[processEventStoreListI];
        if (thisList.name == name) {
        // if (thisList.name == "仿真模拟") {
        // if (thisList.name == "下车确定安全灯显示是否正常") {
            QingXiCheAndQvProcessEventStore().obj.listIndex = processEventStoreListI;
        }
    }
    
    // 进入触发当前步骤的逻辑
    QingXiCheAndQvCarEvent.find().typeEvent(
        QingXiCheAndQvProcessEventStore().obj.list[QingXiCheAndQvProcessEventStore().obj.listIndex].name
    );

    // 上一步按钮是否展示
    QingXiCheAndQvCarEvent.find().tipsBtnsUpOpenEventCallback = function(openBool) {
        QingXiCheAndQvProcessEventStore().obj.btnUp = openBool;
    };

    // 下一步按钮是否展示
    QingXiCheAndQvCarEvent.find().tipsBtnsDownOpenEventCallback = function(openBool) {
        QingXiCheAndQvProcessEventStore().obj.btnDown = openBool;
    };

    setTimeout(function() {
        QingXiCheAndQvThreeWorldEventMain.find().commonBirthplaceUpdate();
    }, 1600);
    
}



/**
 * 初始化 QV检测 的逻辑
 */
const QvEventInit = () => {

    if (CommonVal().loadSuccess == false) {
        return;
    }

    ComReturnCallbackExit();
    QvStepUpdate("数字修复虚拟仿真-将阀门关闭停止水流");
}

/**
 * Qv
 * 根据指定进度的名字，切换到对应步骤逻辑
 */
const QvStepUpdate = (name) => {

    // 循环找到指定名字的流程，来开始
    for (let processEventStoreListI = 0; processEventStoreListI < QingXiCheAndQvProcessEventStore().obj.list.length; processEventStoreListI++) {
        let thisList = QingXiCheAndQvProcessEventStore().obj.list[processEventStoreListI];
        // if (thisList.name == "数字修复虚拟仿真-将橡胶垫片放置到正确的位置") {
        if (thisList.name == name) {
        // if (thisList.name == "数字修复虚拟仿真-将阀门关闭停止水流") {
            QingXiCheAndQvProcessEventStore().obj.listIndex = processEventStoreListI;
        }
    }
    
    // 进入触发当前步骤的逻辑
    QingXiCheAndQvCarEvent.find().typeEvent(
        QingXiCheAndQvProcessEventStore().obj.list[QingXiCheAndQvProcessEventStore().obj.listIndex].name
    );

    // 上一步按钮是否展示
    QingXiCheAndQvCarEvent.find().tipsBtnsUpOpenEventCallback = function(openBool) {
        QingXiCheAndQvProcessEventStore().obj.btnUp = openBool;
    };

    // 下一步按钮是否展示
    QingXiCheAndQvCarEvent.find().tipsBtnsDownOpenEventCallback = function(openBool) {
        QingXiCheAndQvProcessEventStore().obj.btnDown = openBool;
    };

    QingXiCheAndQvProcessEventStore().obj.btnUp = false;
    QingXiCheAndQvProcessEventStore().obj.btnDown = false;

    setTimeout(function() {
        QingXiCheAndQvThreeWorldEventMain.find().commonBirthplaceUpdate();
    }, 1600);

}

onMounted(() => {
    QingXiCheAndQvProcessEventStore().obj.eventMode = props.eventMode;
});


</script>

<template>
    <div class="QingXiCheAndQvMain">

        <!-- 自定义自己建的加载3d场景的逻辑 -->
        <ThreeWorldEventMainQingXiCheAndQv></ThreeWorldEventMainQingXiCheAndQv>
        
        <!-- 自定义加载百分比 -->
        <LoadingDemo
            v-if="CommonVal().loadSuccess == false"
        ></LoadingDemo>

        <!-- <LoadingDemo></LoadingDemo> -->

        <WindowTxt
            v-if="WindowTxtStore().obj.WindowTxtViewOpen == true"
        ></WindowTxt>

        <WindowVideo
            v-if="WindowVideoStore().obj.WindowVideoViewOpen == true"
        ></WindowVideo>

        <WindowCountdown
            v-if="WindowCountdownStore().obj.viewOpen == true"
        ></WindowCountdown>

        <WindowVideoRemoveColor
            v-if="WindowVideoRemoveColorStore().obj.viewOpen == true"
        ></WindowVideoRemoveColor>
        
        <WindowMenu
            v-if="WindowMenuStore().obj.viewOpen == true"
        ></WindowMenu>

        <WindowFraction
            v-if="WindowFractionStore().obj.viewOpen == true"
        ></WindowFraction>

        
        <!-- 我们会通过一个全局的变量，来控制什么组件是否显示 CommonVal().loadSuccess 是一种方式，3d场景加载完成后会变成 true -->
        <div
        v-if="CommonVal().loadSuccess == true"
        >

            <!-- 控制上一步,下一步 进度的UI -->
            <QingXiCheAndQvProcessEvent @callbackProcess="callbackProcessEvent"
            v-show="QingXiCheAndQvProcessEventStore().obj.listIndex > -1 && props.processUiOpen == true " ></QingXiCheAndQvProcessEvent>
            
        </div>
        
    </div>
</template>

<style lang="less" >
* {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
</style>

<style lang="less" scoped>
.QingXiCheAndQvMain * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.QingXiCheAndQvMain {
    position: fixed;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
</style>