trainAssessment.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <div class="trainAssessment">
  3. <div class="topRight" >
  4. <!-- <NavMenus></NavMenus> -->
  5. <NavMenus :back-confirm="false" ></NavMenus>
  6. </div>
  7. <div class="chapterThreeWorld" >
  8. <QingXiCheAndQvMain :eventMode="1" :initTime="initTimeQingXiCarAndQv" :processUiOpen="(stepTipsLook == true ? false : true)"
  9. @callbackProgress="callbackProgressQingXiCheAndQv" ></QingXiCheAndQvMain>
  10. </div>
  11. </div>
  12. </template>
  13. <script setup lang="ts">
  14. import { onMounted, reactive, computed, watch, onUnmounted, nextTick, ref } from 'vue';
  15. import NavMenus from '../components/navMenus.vue';
  16. import QingXiCheAndQvMain from '@/components/ThreeWorldEventQingXiCheAndQv/QingXiCheAndQvMain.vue';
  17. import { useRoute } from 'vue-router';
  18. const route = useRoute();
  19. const taskId = route.params.taskId as string;
  20. const studentTaskId = route.params.studentTaskId as string;
  21. /**
  22. * 因为引入了其他三维场景
  23. * 三维场景里,自带了上一步,下一步的逻辑UI
  24. * 所以控制,原先前端UI的 上一步,下一步的UI逻辑是否显示还是隐藏
  25. */
  26. let stepTipsLook = ref(false);
  27. // 控制清洗车回到第一个流程逻辑
  28. let initTimeQingXiCarAndQv = ref("0");
  29. /**
  30. * 清洗车自定义回调步骤
  31. */
  32. const callbackProgressQingXiCheAndQv = (json : any) => {
  33. console.log("callbackProgressQingXiCheAndQv ===>", json);
  34. // 完成所有步骤
  35. if (json.name == "equipmentRepositioningWork") {
  36. // stepTipsLook.value = true;
  37. }
  38. }
  39. onMounted(() => {
  40. console.log("taskId", taskId, studentTaskId);
  41. });
  42. </script>
  43. <style lang="scss" scoped>
  44. .trainAssessment {
  45. position: fixed;
  46. top: 0px;
  47. left: 0px;
  48. width: 100%;
  49. height: 100%;
  50. .topRight {
  51. position: absolute;
  52. right: 0rem;
  53. top: 6rem;
  54. z-index: 100;
  55. }
  56. .chapterThreeWorld {
  57. position: absolute;
  58. top: 0px;
  59. left: 0px;
  60. width: 100%;
  61. height: 100%;
  62. z-index: 1;
  63. }
  64. }
  65. </style>