update

src/components/ThreeWorldEventQingXiCheAndQv/QingXiCheAndQvMain.vue

@@ -0,0 +1,458 @@
+<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 "../components/WindowQingXiCheAndQv/WindowTxt.vue";
+import { WindowTxtStore } from "@/components/WindowQingXiCheAndQv/store/WindowTxtStore.js";
+import WindowVideo from "../components/WindowQingXiCheAndQv/WindowVideo.vue";
+import { WindowVideoStore } from "@/components/WindowQingXiCheAndQv/store/WindowVideoStore.js";
+
+import WindowCountdown from "../components/WindowQingXiCheAndQv/WindowCountdown.vue";
+import { WindowCountdownStore } from "@/components/WindowQingXiCheAndQv/store/WindowCountdownStore.js";
+
+import WindowVideoRemoveColor from "../components/WindowQingXiCheAndQv/WindowVideoRemoveColor.vue";
+import { WindowVideoRemoveColorStore } from "@/components/WindowQingXiCheAndQv/store/WindowVideoRemoveColorStore.js";
+
+import { WindowEvent } from "../components/WindowQingXiCheAndQv/js/WindowEvent.js";
+
+import ThreeWorldEventGroundDownCar from "@/components/ThreeWorldEventGroundDownCar/ThreeWorldEvent/ThreeWorldEventGroundDownCar.vue";
+
+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>
+
+        <ThreeWorldEventGroundDownCar
+            :timeResetInit="timeResetInitGroundDownCar"
+            v-show="QingXiCheAndQvMyThreeWorldStore().obj.menu.look == true"
+        ></ThreeWorldEventGroundDownCar>
+
+        <!-- 自定义加载百分比 -->
+        <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>

src/view/student/trainChapter/trainChapter.vue

@@ -79,8 +79,8 @@
                     @carShutDown="carShutDownEvent"
                 ></CourseChapter3dView> -->
                 
+                <QingXiCheAndQvMain></QingXiCheAndQvMain>
 
-                
             </div>
         </div>
     </div>
@@ -94,6 +94,7 @@ import { getCourseInfo, getCourseChapterTree, studyReport, getCurrentChapter, up
 import { studentTaskOptionPipDefectListByStudentId } from '@/api/student/studentTaskOptionPipDefect';
 import CourseChapter3d from '@/components/student/CourseChapter3d.vue';
 import CourseChapter3dView from '@/components/student/courseChapter3d/view.vue';
+import QingXiCheAndQvMain from '@/components/ThreeWorldEventQingXiCheAndQv/QingXiCheAndQvMain.vue';
 import { getTrainDetail } from '@/api/student/trainList';
 import router from '@/router/index';
 import { courseChapter3dShow } from '@/stores/courseChapter3dShow.ts';