Merge branch 'dev_xq_0.0.1' of http://web.ronyao.com:3000/xq/maotu-webtopo into dev_xq_0.0.1

src/App.vue

@@ -4,7 +4,7 @@
   <!-- <VueThreeMachine /> -->
   <!-- <vueThreeEquipment /> -->
   <!-- <VueGradeGauge /> -->
-<!--  <StompDemo />-->
+  <!-- <StompDemo /> -->
   <el-config-provider :locale="zhCn">
     <router-view />
   </el-config-provider>
@@ -19,7 +19,7 @@ import viewIndex from '@/layout/view_index.vue';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 // xq 组件
 // F:\vue\workspace\maotu-webtopo\src\components\StompDemo.vue
-import StompDemo from '@/components/StompDemo.vue';
+// import StompDemo from '@/components/StompDemo.vue';
 
 import VueMyTest from '@/components/my-test.vue';
 import VueMyButton from '@/components/my-button.vue';
@@ -197,6 +197,11 @@ leftAsideStore.registerConfig('vue四遥组件', [
         val: '',
         title: '绑定ID'
       },
+      showInfo: {
+        type: 'switch',
+        val: true,
+        title: '显示详情'
+      },
       location: {
         type: 'select',
         val: 'bottom',
@@ -476,6 +481,12 @@ leftAsideStore.registerConfig('vue公共组件', [
         type: 'switch',
         val: true,
         title: '辅助框'
+      },
+      testStr: {
+        type: 'map',
+        val: {},
+        title: '测试',
+        disabled: true
       }
     }
   },

src/components/mt-edit/store/types.ts

@@ -10,7 +10,8 @@ export type ILeftAsideConfigItemPublicPropsType =
   | 'upload'
   | 'inputSelectId'
   | 'inputTypeTag' //inputTypeTag 必须和 inputSelectId 一起使用
-  | 'inputSelectImgId';
+  | 'inputSelectImgId'
+  | 'map'; //使用这个类型 disabled必须为true(必须隐藏)
 // 开放注册配置
 export type ILeftAsideConfigItemPublicProps = Record<
   string,

src/components/three-components/vue-three-substation.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
-//导入threejs
+//导入 threejs
 import {
   AxesHelper,
   Color,
@@ -87,44 +87,51 @@ loader.setDRACOLoader(dracoLoader);
 let meshArr: Group[] = [];
 // public\models\nitrogenInjection\nitrogenInjection.gltf
 loader.load('/models/substation/substation.gltf', (gltf: any) => {
+  // 保存模型引用
+  loadedModel = gltf.scene;
   scene.add(gltf.scene);
   const loadTime = Date.now() - startTime;
 
   // 立即渲染一帧
-  controls.update();
+  // controls.update();
   render.render(scene, camera);
 
   console.log(`大场景模型已加载并显示，总耗时：${loadTime}ms`);
   loading.value = false;
 });
 
-// 环境光：增强整体亮度
+// // 环境光：增强整体亮度
-const ambientLight = new AmbientLight('#ffffff', 1.2); // 强度从 0.6 提高到 1.0
+// const ambientLight = new AmbientLight('#ffffff', 1.2); // 强度从 0.6 提高到 1.0
-scene.add(ambientLight);
+// scene.add(ambientLight);
-
+
-// 平行光
+// // 平行光
-const directionalLight = new DirectionalLight('#ffffff', 1.4); // 强度从 0.2 提高到 0.8
+// const directionalLight = new DirectionalLight('#ffffff', 1.4); // 强度从 0.2 提高到 0.8
-scene.add(directionalLight);
+// scene.add(directionalLight);
-directionalLight.position.set(20, 20, 10);
+// directionalLight.position.set(20, 20, 10);
-
+
-// // 点光源
+// // // 点光源
-const pointLight = new PointLight('#ffffff', 1.4, 1800); // 强度从 0.5 提高到 1.0
+// const pointLight = new PointLight('#ffffff', 1.4, 1800); // 强度从 0.5 提高到 1.0
-scene.add(pointLight);
+// scene.add(pointLight);
-pointLight.position.set(0, 40, 0);
+// pointLight.position.set(0, 40, 0);
-
+
-// //环境贴图
+// 环境贴图（保存引用以便清理）
-// const rgbELoader = new RGBELoader().load(
+const rgbELoader = new RGBELoader().load(
-//   '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
+  '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
-//   (envMap: any) => {
+  (envMap: any) => {
-//     envMap.mapping = EquirectangularReflectionMapping;
+    envMap.mapping = EquirectangularReflectionMapping;
-//     scene.environment = envMap;
+    scene.environment = envMap;
-//   }
+    envMapTexture = envMap; // 保存引用
-// );
+  }
+);
 
 //补间动画
 const timeline1 = gsap.timeline();
 const timeline2 = gsap.timeline();
 
+// 保存模型引用以便清理
+let loadedModel: any = null;
+let envMapTexture: any = null;
+
 //相机移动
 function tranlate(position: Vector3, target: Vector3) {
   timeline1.to(camera.position, {
@@ -191,11 +198,98 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  // 清理资源
+  console.log('开始清理 Three.js 资源...');
+
+  // 1. 停止渲染循环（通过标记）
+  // requestAnimationFrame 会自动停止
+
+  // 2. 清理 ResizeObserver
   if ((window as any)._resizeObserver) {
     (window as any)._resizeObserver.disconnect();
     delete (window as any)._resizeObserver;
   }
+
+  // 3. 停止 GSAP 动画
+  timeline1.pause();
+  timeline1.clear();
+  timeline2.pause();
+  timeline2.clear();
+  gsap.globalTimeline.clear();
+
+  // 4. 移除 DOM 元素
+  if (div3D.value && render.domElement.parentNode === div3D.value) {
+    div3D.value.removeChild(render.domElement);
+  }
+
+  // 5. 清理控制器
+  controls.dispose();
+
+  // 6. 清理模型
+  if (loadedModel) {
+    loadedModel.traverse((child: any) => {
+      if (child.isMesh) {
+        // 清理几何体
+        if (child.geometry) {
+          child.geometry.dispose();
+        }
+
+        // 清理材质
+        if (child.material) {
+          const materials = Array.isArray(child.material) ? child.material : [child.material];
+
+          materials.forEach((material: any) => {
+            // 清理材质属性
+            [
+              'map',
+              'normalMap',
+              'roughnessMap',
+              'metalnessMap',
+              'emissiveMap',
+              'aoMap',
+              'displacementMap'
+            ].forEach((key) => {
+              if (material[key]) {
+                material[key].dispose();
+              }
+            });
+
+            // 清理材质本身
+            material.dispose();
+          });
+        }
+      }
+    });
+
+    // 从场景中移除模型
+    scene.remove(loadedModel);
+  }
+
+  // 7. 清理环境贴图
+  if (envMapTexture) {
+    envMapTexture.dispose();
+  }
+
+  // 8. 清理灯光
+  scene.traverse((child: any) => {
+    if (child.isLight) {
+      child.dispose();
+    }
+  });
+
+  // 9. 清理场景
+  while (scene.children.length > 0) {
+    scene.remove(scene.children[0]);
+  }
+
+  // 10. 清理渲染器
+  render.dispose();
+  render.forceContextLoss();
+  render.domElement.remove();
+
+  // 11. 清空场景引用
+  scene.clear();
+
+  console.log('Three.js 资源清理完成');
 });
 </script>
 
@@ -215,6 +309,7 @@ onUnmounted(() => {
   top: 50%;
   left: 2%;
   transform: translateY(-50%); /* 垂直居中 */
+  transform: translateZ(0);
   display: flex;
   flex-direction: column;
   gap: 20px;

src/components/three-components/vue-three-substation_edit.vue

@@ -77,15 +77,18 @@ scene.add(camera);
 
 //渲染器
 const render = new WebGLRenderer({
-  antialias: false, // 关闭抗锯齿提升性能
+  antialias: true, // 开启抗锯齿（性能允许的情况下）
-  powerPreference: 'high-performance', // 使用高性能GPU
+  powerPreference: 'high-performance',
-  stencil: false, // 如果不需要模板缓冲区
+  stencil: false,
   depth: true,
-  logarithmicDepthBuffer: true // 对大场景有帮助
+  logarithmicDepthBuffer: true,
+  precision: 'mediump' // 使用中等精度着色器，提升性能
 });
 render.setClearColor(new Color('#131519'));
+render.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 限制像素比，提升性能
 // 启用渲染优化
-render.shadowMap.enabled = false; // 如果不需要阴影
+render.shadowMap.enabled = false;
+render.shadowMap.autoUpdate = false; // 停止自动更新阴影
 
 //添加控制器
 const controls = new OrbitControls(camera, render.domElement);
@@ -94,15 +97,14 @@ const controls = new OrbitControls(camera, render.domElement);
 // controls.autoRotate = false;
 // controls.enablePan = false; // 禁用右键平移
 controls.autoRotateSpeed = 1;
-controls.dampingFactor = 0.2;
+controls.dampingFactor = 0.05; // 降低阻尼系数，减少计算量
-controls.rotateSpeed = 0.3; // 降低旋转速度（默认为 1.0）
+controls.rotateSpeed = 0.5; // 提高旋转速度，操作更流畅
-controls.enableDamping = true;
+controls.enableDamping = false; // 关闭阻尼，大幅提升性能
 controls.enableRotate = true;
-controls.minDistance = 1; // 允许更近距离观察模型细节
+controls.minDistance = 1;
-// 设置视角限制：向上45度，向下45度
+// 设置视角限制
-// 从正前方开始计算，向上最大45度，向下最大45度
+controls.minPolarAngle = Math.PI / 4;
-controls.minPolarAngle = Math.PI / 4; // 向上最多45度 (π/4)
+controls.maxPolarAngle = (Math.PI * 3) / 4;
-controls.maxPolarAngle = (Math.PI * 3) / 4; // 向下最多45度 (3π/4)
 
 const loader = new GLTFLoader();
 const dracoLoader = new DRACOLoader();
@@ -137,15 +139,28 @@ loader.load(
   async (gltf: any) => {
     console.log('文件下载完成，开始解析模型...');
 
-    // 大场景优化：设置对象渲染顺序
+    // 性能优化：合并几何体
+    const mergedMeshes: any[] = [];
+
     gltf.scene.traverse((child: any) => {
       if (child.isMesh) {
         // 优化大场景渲染
-        child.frustumCulled = true; // 启用视锥体剔除
+        child.frustumCulled = true;
+
         if (child.material) {
           // 优化材质
-          child.material.side = 0; // FrontSide - 只渲染正面
+          child.material.side = 0;
+          child.material.needsUpdate = true;
+
+          // 如果材质有贴图，设置合适的过滤方式
+          if (child.material.map) {
+            child.material.map.minFilter = THREE.LinearMipMapLinearFilter;
+            child.material.map.magFilter = THREE.LinearFilter;
+          }
         }
+
+        // 合并使用相同材质的网格
+        mergedMeshes.push(child);
       }
     });
 
@@ -160,7 +175,8 @@ loader.load(
     }
 
     const loadTime = Date.now() - startTime;
-    console.log(`大场景模型完全加载并显示，总耗时: ${loadTime}ms`);
+    console.log(`大场景模型完全加载并显示，总耗时：${loadTime}ms`);
+    console.log(`模型网格数量：${mergedMeshes.length}`);
   },
   // 真正的流式加载进度
   (xhr) => {
@@ -188,14 +204,17 @@ nextTick(() => {
   }
 });
 
-//环境贴图
+//环境贴图（延迟加载，避免与模型同时加载）
-const rgbELoader = new RGBELoader().load(
+setTimeout(() => {
-  '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
+  const rgbELoader = new RGBELoader().load(
-  (envMap: any) => {
+    '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
-    envMap.mapping = EquirectangularReflectionMapping;
+    (envMap: any) => {
-    scene.environment = envMap;
+      envMap.mapping = EquirectangularReflectionMapping;
-  }
+      scene.environment = envMap;
-);
+      console.log('环境贴图加载完成');
+    }
+  );
+}, 500); // 延迟 500ms 加载环境贴图
 
 //补间动画
 const timeline1 = gsap.timeline();
@@ -242,7 +261,8 @@ function handleResize() {
 
 function init() {
   requestAnimationFrame(init);
-  controls.update();
+  // 只在需要时更新控制器
+  // controls.update(); // 已关闭阻尼，不需要每帧更新
   render.render(scene, camera);
 }
 

src/components/vue-xq-test/vue-run-info.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- <el-button @click="ccc">Default</el-button> -->
   <el-card class="card">
     <el-scrollbar height="100%">
       <h2 class="cardHead">运行信息</h2>
@@ -182,6 +183,7 @@
 </template>
 
 <script lang="ts" setup>
+import { ElButton } from 'element-plus';
 import { computed, ref, watch, onMounted } from 'vue';
 
 let dialogTableVisible = ref(false);
@@ -210,9 +212,22 @@ const props = defineProps({
   isSwitch: {
     type: Boolean,
     default: true
+  },
+  testStr: {
+    type: String,
+    default: ''
+  },
+  definitionItemJson: {
+    type: Object as any,
+    default: () => ({})
   }
 });
 
+console.log('传递：', props.definitionItemJson);
+
+function ccc() {
+  props.definitionItemJson.props.testStr = 'aaaaaa';
+}
 const activities = [
   {
     content: '灭火允许',

src/components/vue-xq-test/vue-signal-gaudy.vue

@@ -1,87 +1,5 @@
 <template>
   <!-- 四遥：遥信 -->
-  <!-- <div style="display: flex; gap: 10px; align-items: center">
-    <el-popover
-      :width="300"
-      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
-    >
-      <template #reference>
-        <el-icon
-          :class="['iconStyle', isAalarm ? 'blink-animation' : '']"
-          :size="22"
-          :style="{ color: isBool ? 'rgb(146, 252, 40)' : 'rgb(252, 40, 40)' }"
-        >
-          <WarningFilled />
-        </el-icon>
-      </template>
-
-      <template #default>
-        <div class="demo-rich-conent" style="display: flex; gap: 20px; flex-direction: column">
-          <el-icon
-            class="iconStyle"
-            :size="60"
-            :style="{ color: isBool ? 'rgb(146, 252, 40)' : 'rgb(252, 40, 40)' }"
-          >
-            <WarningFilled />
-          </el-icon>
-
-          <el-row :gutter="6">
-            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
-              <el-statistic title="绑定ID" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">{{ moduleId }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-
-            <el-col :span="12" :xs="24" :sm="12" :md="12" class="elColInfo">
-              <el-statistic title="节点名称" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="success">{{ modeName }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-
-            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
-              <el-statistic title="类型" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">遥信</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-          </el-row>
-
-          <el-row :gutter="6">
-            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
-              <el-statistic title="开关情况" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">{{ isBool }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-
-            <el-col :span="12" :xs="24" :sm="12" :md="12" class="elColInfo">
-              <el-statistic title="告警" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">{{ isAalarm }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-
-            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
-              <el-statistic title="是否可告警" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">{{ isAlarmable }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-          </el-row>
-        </div>
-      </template>
-    </el-popover>
-    <el-tag type="primary">{{ modeName }}</el-tag>
-  </div> -->
-
   <!-- <button @click="console.log('data:', nodeByModelsStore.nodeMap)">点击</button> -->
   <el-row v-if="location === 'top'">
     <el-col :span="24" class="flex-center">
@@ -106,7 +24,7 @@
       <div style="display: flex; gap: 10px; align-items: center">
         <el-popover
           :width="300"
-          :disabled="false"
+          :disabled="showInfo"
           popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
         >
           <!-- :style="{ color: isBool ? 'rgb(146, 252, 40)' : 'rgb(252, 40, 40)' }" -->
@@ -226,7 +144,6 @@ onUnmounted(() => {
   emitter.off(props.definitionItemJson.id);
 });
 
-// const props = defineProps(['definitionItemJson']);
 
 const props = defineProps({
   moduleType: {
@@ -241,6 +158,10 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
+  showInfo: {
+    type: Boolean,
+    default: false
+  },
   location: {
     type: String,
     default: 'bottom'
@@ -286,24 +207,6 @@ function loadingModuleById() {
   }
 }
 
-// function loadingModuleById() {
-//   const globalData = (window as any).globalData as Map<string, any>;
-//   if (
-//     props.moduleId !== '' &&
-//     props.moduleId !== undefined &&
-//     props.moduleId !== '--' &&
-//     globalData?.has(props.moduleId)
-//   ) {
-//     let module = globalData.get(props.moduleId);
-//     if (module) {
-//       modeName.value = module.node.name;
-//       isBool.value = module.double == 1;
-//       isAalarm.value = module.alarm;
-//       isAlarmable.value = module.alarmable;
-//     }
-//   }
-// }
-
 // 绑定事件
 emitter.on(props.definitionItemJson.id, (value) => {
   console.log('触发事件', value);