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 MapGps from "./MapGps.vue";
import QingXiCheAndQvProcessEvent from "./event/QingXiCheAndQvProcessEvent.vue";
import { QingXiCheAndQvProcessEventStore } from "./event/store/QingXiCheAndQvProcessEventStore.js";
import { QingXiCheAndQvCarEvent } from "./js/QingXiCheAndQvCarEvent.js";
import { watch, ref } 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 { WindowEvent } from "../WindowQingXiCheAndQv/js/WindowEvent.js";

const videoJson = {
    "01" : new URL("../assets/res/video/01.mp4", import.meta.url).href,
    "02" : new URL("../assets/res/video/02.mp4", import.meta.url).href,
    "03" : new URL("../assets/res/video/03.mp4", import.meta.url).href,
    "04" : new URL("../assets/res/video/04.mp4", import.meta.url).href,

    // "01" : "#/Video?id=01",
    // "02" : "#/Video?id=02",
    // "03" : "#/Video?id=03",
    // "04" : "#/Video?id=04",
};

// 当前点击播放视频的地址
let videoUrl = ref("");
// 弹出pdf的内容
let menuListIndex = ref(-1);

/**
 * 控制在管道里的检测车，重新回到初始流程
 */
let timeResetInitGroundDownCar = ref("0");

/**
 * 接下来要操作的步骤
 * json
 */
const callbackProcessEvent = (json) => {
    
    let type = json["type"];
    let config = json["config"];
    // 进入触发当前步骤的逻辑
    QingXiCheAndQvCarEvent.find().typeEvent(config.name);

}


/**
 * 选择菜单
 */
const SelectEventCallbackExit = (json) => {

    // console.log(
    //     "SelectEventCallbackExit", json
    // );

    QingXiCheAndQvMyThreeWorldStore().obj.SelectEventConfig = json;

    if (QingXiCheAndQvMyThreeWorldStore().obj.SelectEventConfig.name == "巡查调度虚拟仿真") {

        menuEvent("mapGps");
        joinEvent();
        return;
    }

    QingXiCheAndQvMyThreeWorldStore().obj.SelectEventViewOpen = false;
    QingXiCheAndQvMyThreeWorldStore().obj.SelectTypeEventViewOpen = true;

}

/**
 * 选择类型
 * json
 */
const SelectTypeEventCallbackExit = (json) => {

    // console.log(
    //     "SelectTypeEventCallbackExit", json
    // );

    if (typeof json == 'undefined' || json == null || json == undefined) {
        QingXiCheAndQvMyThreeWorldStore().obj.SelectEventViewOpen = true;
        QingXiCheAndQvMyThreeWorldStore().obj.SelectTypeEventViewOpen = false;
        return;
    }

    QingXiCheAndQvMyThreeWorldStore().obj.SelectTypeEventConfig = json;
    SelectTypeEventConfigEvent();
    
}


/**
 * 统一返回到首页
 */
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;

    if (QingXiCheAndQvMyThreeWorldStore().obj.SelectEventConfig.name == "巡查调度虚拟仿真") {
        QingXiCheAndQvMyThreeWorldStore().obj.SelectTypeEventViewOpen = false;
        QingXiCheAndQvMyThreeWorldStore().obj.SelectEventViewOpen = true;
    } else {
        QingXiCheAndQvMyThreeWorldStore().obj.SelectTypeEventViewOpen = true;
    }
    
}

/**
 * 视频返回事件触发
 */
const VideoCallbackExit = () => {
    QingXiCheAndQvMyThreeWorldStore().obj.VideoViewOpen = false;
}

/**
 * 根据菜单 和 类别，触发对应的逻辑
 */
const SelectTypeEventConfigEvent = () => {
    
    console.log(
        "SelectTypeEventConfigEvent",
        QingXiCheAndQvMyThreeWorldStore().obj.SelectEventConfig,
        QingXiCheAndQvMyThreeWorldStore().obj.SelectTypeEventConfig
    );

    if (QingXiCheAndQvMyThreeWorldStore().obj.SelectTypeEventConfig.type == "video") {

        // console.log("弹出视频", QingXiCheAndQvMyThreeWorldStore().obj.SelectEventConfig.name);

        switch (QingXiCheAndQvMyThreeWorldStore().obj.SelectEventConfig.name) {

            case "巡查调度虚拟仿真":
                // window.open(videoJson["01"], '_blank');
                videoUrl.value = videoJson["01"];
                QingXiCheAndQvMyThreeWorldStore().obj.VideoViewOpen = true;
                break;

            case "维护清洗虚拟仿真":
                // window.open(videoJson["02"], '_blank');
                videoUrl.value = videoJson["02"];
                QingXiCheAndQvMyThreeWorldStore().obj.VideoViewOpen = true;
                break;

            case "检测虚拟仿真":
                // window.open(videoJson["03"], '_blank');
                videoUrl.value = videoJson["03"];
                QingXiCheAndQvMyThreeWorldStore().obj.VideoViewOpen = true;
                break;

            case "数智修复虚拟仿真":
                // window.open(videoJson["04"], '_blank');
                videoUrl.value = videoJson["04"];
                QingXiCheAndQvMyThreeWorldStore().obj.VideoViewOpen = true;
                break;

        }
        
        return;
    }


    if (QingXiCheAndQvMyThreeWorldStore().obj.SelectTypeEventConfig.type == "vr") {

        // console.log("弹出虚拟仿真", QingXiCheAndQvMyThreeWorldStore().obj.SelectEventConfig.name);

        switch (QingXiCheAndQvMyThreeWorldStore().obj.SelectEventConfig.name) {

            case "巡查调度虚拟仿真":

                break;

            case "维护清洗虚拟仿真":
                menuEvent("waterPipe");
                break;

            case "检测虚拟仿真":
                menuEvent("look");
                break;

            case "数智修复虚拟仿真":
                menuEvent("repair");
                break;

        }
        
        joinEvent();
        return;
    }


    if (QingXiCheAndQvMyThreeWorldStore().obj.SelectTypeEventConfig.type == "test") {

        // console.log(
        //     "弹出PDF", QingXiCheAndQvMyThreeWorldStore().obj.SelectEventConfig.name
        // );
        
        switch (QingXiCheAndQvMyThreeWorldStore().obj.SelectEventConfig.name) {

            case "巡查调度虚拟仿真":

                break;

            case "维护清洗虚拟仿真":
                menuListIndex.value = 0;
                break;

            case "检测虚拟仿真":
                menuListIndex.value = 1;
                break;

            case "数智修复虚拟仿真":
                menuListIndex.value = 2;
                break;
        }


        // pdfUrl.value = "lookpdf/index.html?pdfUrl=" + url;
        // pdfUrl.value = url;
        
        return;

    }
    
}

/**
 * 统一进入实验要触发的逻辑
 */
const joinEvent = () => {
    QingXiCheAndQvMyThreeWorldStore().obj.SelectEventViewOpen = false;
    QingXiCheAndQvMyThreeWorldStore().obj.SelectTypeEventViewOpen = false;
    QingXiCheAndQvMyThreeWorldStore().obj.VideoViewOpen = false;
    
    QingXiCheAndQvMyThreeWorldStore().obj.ComReturnViewOpen = true;
}

/**
 * 切换菜单，触发不同逻辑
 * name         切换的菜单
 */
const menuEvent = (name) => {

    for (let key in QingXiCheAndQvMyThreeWorldStore().obj.menu) {
        QingXiCheAndQvMyThreeWorldStore().obj.menu[key] = false;
    }

    QingXiCheAndQvMyThreeWorldStore().obj.menu[name] = true;

    let thisTime = new Date().getTime();

    // console.log(
    //     "QingXiCheAndQvMyThreeWorldStore().obj.menu", QingXiCheAndQvMyThreeWorldStore().obj.menu
    // );

    QingXiCheAndQvProcessEventStore().obj.listIndex = -1;

    // 城市供水管道巡查调度虚拟仿真
    if (QingXiCheAndQvMyThreeWorldStore().obj.menu.mapGps == true) {

        return;
    }

    // 城市供水管道维护清洗虚拟仿真
    if (QingXiCheAndQvMyThreeWorldStore().obj.menu.waterPipe == true) {
        // QingXiCheAndQvCarEvent.find().evnetInit_1();

        // // 自动触发到第1个步骤
        // QingXiCheAndQvProcessEventStore().obj.listIndex = 0;
        
        // 循环找到指定名字的流程，来开始
        for (let processEventStoreListI = 0; processEventStoreListI < QingXiCheAndQvProcessEventStore().obj.list.length; processEventStoreListI++) {
            let thisList = QingXiCheAndQvProcessEventStore().obj.list[processEventStoreListI];
            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);
        
        return;
    }

    // 城市供水管道检测虚拟仿真
    if (QingXiCheAndQvMyThreeWorldStore().obj.menu.look == true) {
        timeResetInitGroundDownCar.value = "" + thisTime;
        return;
    }

    // 城市供水管道数智修复虚拟仿真
    if (QingXiCheAndQvMyThreeWorldStore().obj.menu.repair == true) {
        
        // 循环找到指定名字的流程，来开始
        for (let processEventStoreListI = 0; processEventStoreListI < QingXiCheAndQvProcessEventStore().obj.list.length; processEventStoreListI++) {
            let thisList = QingXiCheAndQvProcessEventStore().obj.list[processEventStoreListI];
            // 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;
        };

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

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

        return;
    }

    // 回到人物视角
    if (QingXiCheAndQvMyThreeWorldStore().obj.menu.roleLook == true) {
        QingXiCheAndQvThreeWorldEventMain.find().toRoleEvent();
        return;
    }

}

</script>

<template>
    <div class="QingXiCheAndQvMain">

        <!-- 自定义自己建的加载3d场景的逻辑 -->
        <ThreeWorldEventMainQingXiCheAndQv
            v-show="QingXiCheAndQvMyThreeWorldStore().obj.menu.waterPipe == true || QingXiCheAndQvMyThreeWorldStore().obj.menu.repair == true"
        ></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>
        
        <!-- 我们会通过一个全局的变量，来控制什么组件是否显示 CommonVal().loadSuccess 是一种方式，3d场景加载完成后会变成 true -->
        <div
        v-if="CommonVal().loadSuccess == true"
        >
        
            <MapGps v-show="QingXiCheAndQvMyThreeWorldStore().obj.menu.mapGps == true" ></MapGps>

            <QingXiCheAndQvProcessEvent @callbackProcess="callbackProcessEvent"
            v-show="QingXiCheAndQvProcessEventStore().obj.listIndex > -1" ></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>