提交微前端代码

.env.production

@@ -36,4 +36,8 @@ VITE_USE_PWA = false
 # 是否兼容旧浏览器
 VITE_LEGACY = false
 
-VITE_3D_MODAL_ARR = fm/amendakai.glb,fm/fm-4.glb,9f/9f-processed
+VITE_3D_MODAL_ARR = fm/amendakai.glb,fm/fm-4.glb,9f/9f-processed
+
+#微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
+VITE_APP_SUB_micro-need-air = '//192.168.10.109:4173/'
+VITE_APP_SUB_micro-vent-3dModal = '//192.168.10.109:8091/'

index.html

@@ -33,6 +33,9 @@
         html[data-theme='dark'] .app-loading .app-loading-title {
           color: rgba(255, 255, 255, 0.85);
         }
+        .style-styleTwo {
+          overflow: hidden !important;
+        }
 
         .app-loading {
           display: flex;

src/hooks/web/useSso.ts

@@ -7,14 +7,14 @@ import { useUserStore } from '/@/store/modules/user';
 const globSetting = useGlobSetting();
 const openSso = globSetting.openSso;
 export function useSso() {
-  let locationUrl = 'http://' + window.location.host + '/';
+  const locationUrl = 'http://' + window.location.host + '/';
   /**
    * 单点登录
    */
   async function ssoLogin() {
     if (openSso == 'true') {
-      let token = getToken();
-      let ticket = getUrlParam('ticket');
+      const token = getToken();
+      const ticket = getUrlParam('ticket');
       if (!token) {
         if (ticket) {
           await validateCasLogin({

src/layouts/default/sider/bottomSideder.vue

@@ -42,12 +42,13 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, onMounted, ref } from 'vue';
+  import { defineComponent, onMounted, ref, unref } from 'vue';
   import type { Menu } from '/@/router/types';
   import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
   import { SvgIcon } from '/@/components/Icon';
   import { getMenus } from '/@/router/menus';
   import { useGo } from '/@/hooks/web/usePage';
+  import { useRouter } from 'vue-router';
 
   export default defineComponent({
     name: 'BottomSider',
@@ -55,13 +56,22 @@
     setup() {
       const isShowMenu = ref(0);
       let menuModules = ref<Menu[]>([]);
+      const router = useRouter();
+
       const currentParentRoute = ref<Menu>();
+      const { currentRoute } = router;
+      const route = unref(currentRoute);
       const go = useGo();
       function selectMenu(programMenu) {
         currentParentRoute.value = programMenu;
       }
       function handleMenuClick(path: Menu) {
-        go(path.path);
+        if (route.path.startsWith('/micro-')) {
+          history.pushState({}, '', path.path);
+        } else {
+          go(path.path);
+        }
+        // go(path.path);
         isShowMenu.value = 0;
       }
       const closeMenu = () => {

src/qiankun/index.ts

@@ -15,7 +15,6 @@ function filterApps() {
     //微应用触发的路由规则
     // @ts-ignore
     item.activeRule = genActiveRule('/' + item.activeRule);
-    debugger;
   });
   return apps;
 }

src/qiankun/state.ts

@@ -5,6 +5,7 @@ import { initGlobalState } from 'qiankun';
 import { store } from '/@/store';
 import { router } from '/@/router';
 import { getToken } from '/@/utils/auth';
+
 //定义传入子应用的数据
 export function getProps() {
   return {

src/router/guard/permissionGuard.ts

@@ -10,6 +10,7 @@ import { PAGE_NOT_FOUND_ROUTE, QIANKUN_ROUTE } from '/@/router/routes/basic';
 import { RootRoute } from '/@/router/routes';
 
 import { isOAuth2AppEnv } from '/@/views/sys/login/useLogin';
+import _ from 'lodash';
 
 const LOGIN_PATH = PageEnum.BASE_LOGIN;
 //auth2登录路由
@@ -25,6 +26,9 @@ export function createPermissionGuard(router: Router) {
   const userStore = useUserStoreWithOut();
   const permissionStore = usePermissionStoreWithOut();
   router.beforeEach(async (to, from, next) => {
+    if (_.isEmpty(history.state.current)) {
+      _.assign(history.state, { current: from.fullPath });
+    }
     if (
       from.path === ROOT_PATH &&
       to.path === PageEnum.BASE_HOME &&

src/views/dashboard/Analysis/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="vent-home">
     <div class="vent-home-header"></div>
-    <div> test </div>
+    <div class="home-container">
+      <div class="l-r-box left-box"> 111</div>
+      <div class="l-r-box right-box"> 222</div>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -20,11 +23,26 @@
 <style lang="less" scoped>
   .vent-home {
     width: 100vw;
-    height: 100vh;
+    height: calc(100vh);
     position: fixed;
     .vent-home-header {
       width: 100%;
       height: 110px;
+      position: fixed;
+      background: url('/@/assets/images/vent/home/home-header-bg.png') no-repeat;
+      background-position-y: -26px;
+    }
+    .home-container {
+      width: 100%;
+      height: calc(100vh - 60px);
+      display: flex;
+      justify-content: space-between;
+      margin-top: 60px;
+      .l-r-box {
+        width: 300px;
+        background: #ffffff22;
+        color: #fff;
+      }
     }
   }
 </style>

src/views/vent/monitorManager/mainFanMonitor/mainWind.threejs.ts

@@ -6,6 +6,7 @@ import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
 import gsap from 'gsap';
 import { Mesh } from 'three';
 import { resolve } from 'path';
+import Matching from '@zxcvbn-ts/core/dist/Matching';
 
 class mainWindRect {
   model;
@@ -36,6 +37,9 @@ class mainWindRect {
   backSmoke; // 后面风流对象
   player1; // 视频播放器
   playerStartClickTime1 = new Date().getTime();
+  frontWindowGroup;
+  backWindowGroup;
+  windowAngle = 0;
 
   constructor(model, playerVal1) {
     this.model = model;
@@ -491,6 +495,92 @@ class mainWindRect {
     this.group?.add(this.backSmoke.points);
     // this.backSmoke.points.position.set(47.07, -8.48, -1.83);
   }
+
+  /** 初始化电机 */
+  async initMotor() {
+    // 前电机
+    const motorGltf1 = await this.model.setModel('dj1');
+    this.motorGroup1 = motorGltf1.scene as THREE.Group;
+    this.motorGroup1?.position.set(0, 0, 0);
+    this.motorGroup1.visible = false;
+    this.motorGroup1.traverse((item) => {
+      if (item.name === 'fan_blade003') {
+        // @ts-ignore
+        this.gearBack.gear1 = item as THREE.Group;
+      } else if (item.name === 'fan_blade005') {
+        // @ts-ignore
+        this.gearBack.gear2 = item as THREE.Group;
+      }
+    });
+    this.group?.add(this.motorGroup1);
+
+    // 后电机
+    const motorGltf2 = await this.model.setModel('dj2');
+    this.motorGroup2 = motorGltf2.scene as THREE.Group;
+    this.motorGroup2?.position.set(0, 0, 0);
+    this.motorGroup2.visible = false;
+    this.motorGroup2.traverse((item) => {
+      if (item.name === 'fan_blade007') {
+        // @ts-ignore
+        this.gearFront.gear1 = item as THREE.Group;
+      } else if (item.name === 'fan_blade006') {
+        // @ts-ignore
+        this.gearFront.gear2 = item as THREE.Group;
+      }
+    });
+    this.group?.add(this.motorGroup2);
+  }
+
+  openOrCloseWindow(flag) {
+    const _this = this;
+    let endAngle = 0;
+    if (flag == 'openWindow') {
+      // 打开风窗
+      endAngle = 1;
+    } else {
+      // 关闭风窗
+      endAngle = 0;
+    }
+
+    gsap.to(this, {
+      windowAngle: endAngle,
+      duration: Math.abs(endAngle - this.windowAngle) * 10,
+      ease: 'none',
+      onUpdate: function () {
+        _this.frontWindowGroup.children.forEach((mesh) => {
+          mesh.rotation.z = _this.windowAngle;
+        });
+      },
+    });
+  }
+
+  /** 初始化风窗 */
+  initWindow() {
+    if (!this.group) return;
+    this.frontWindowGroup = new THREE.Group();
+    this.frontWindowGroup.name = 'frontWindowGroup';
+
+    this.backWindowGroup = new THREE.Group();
+    this.backWindowGroup.name = 'backWindowGroup';
+    if (this.group && this.group?.children.length > 0) {
+      for (let i = this.group?.children.length - 1; i >= 0; i--) {
+        const obj = this.group?.children[i];
+        if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('TC')) {
+          const mesh = obj.clone();
+          if (obj.name.startsWith('TC1')) {
+            this.backWindowGroup.add(mesh);
+          } else if (obj.name.startsWith('TC2')) {
+            this.frontWindowGroup.add(mesh);
+          }
+          obj.removeFromParent();
+          this.group?.remove(obj);
+        }
+      }
+    }
+    this.group?.add(this.backWindowGroup);
+    this.group?.add(this.frontWindowGroup);
+  }
+
   mountedThree() {
     return new Promise(async (resolve) => {
       this.model.setModel(this.modelName).then(async (gltf) => {
@@ -503,39 +593,11 @@ class mainWindRect {
         this.setSmokePosition();
         // this.startSmoke();
         // this.initSmoke();
-        // 前电机
-        const motorGltf1 = await this.model.setModel('dj1');
-        this.motorGroup1 = motorGltf1.scene as THREE.Group;
-        this.motorGroup1?.position.set(0, 0, 0);
-        this.motorGroup1.visible = false;
-        this.motorGroup1.traverse((item) => {
-          if (item.name === 'fan_blade003') {
-            // @ts-ignore
-            this.gearBack.gear1 = item as THREE.Group;
-          } else if (item.name === 'fan_blade005') {
-            // @ts-ignore
-            this.gearBack.gear2 = item as THREE.Group;
-          }
-        });
-        this.group?.add(this.motorGroup1);
-        // 后电机
-        const motorGltf2 = await this.model.setModel('dj2');
-        this.motorGroup2 = motorGltf2.scene as THREE.Group;
-        this.motorGroup2?.position.set(0, 0, 0);
-        this.motorGroup2.visible = false;
-        this.motorGroup2.traverse((item) => {
-          if (item.name === 'fan_blade007') {
-            // @ts-ignore
-            this.gearFront.gear1 = item as THREE.Group;
-          } else if (item.name === 'fan_blade006') {
-            // @ts-ignore
-            this.gearFront.gear2 = item as THREE.Group;
-          }
-        });
-        this.group?.add(this.motorGroup2);
 
+        await this.initMotor();
         resolve(null);
-
+        this.initWindow();
+        this.openOrCloseWindow('openWindow');
         setTimeout(async () => {
           const videoPlayer1 = document.getElementById('main-player1')?.getElementsByClassName('vjs-tech')[0];
           if (videoPlayer1) {