echarts svg

package.json

@@ -41,7 +41,7 @@
     "@liveqing/liveplayer-v3": "^3.1.9",
     "@logicflow/core": "^1.1.13",
     "@logicflow/extension": "^1.1.13",
-    "@types/three": "^0.144.0",
+    "@types/three": "^0.149.0",
     "@vue/runtime-core": "^3.2.33",
     "@vue/shared": "^3.2.33",
     "@vueuse/core": "^8.3.0",
@@ -79,7 +79,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "showdown": "^2.1.0",
     "sortablejs": "^1.15.0",
-    "three": "^0.145.0",
+    "three": "^0.149.0",
     "tinymce": "^5.10.3",
     "vditor": "^3.8.13",
     "vite-plugin-theme": "^0.8.6",

pnpm-lock.yaml

@@ -31,7 +31,7 @@ specifiers:
   '@types/qs': ^6.9.7
   '@types/showdown': ^1.9.4
   '@types/sortablejs': ^1.10.7
-  '@types/three': ^0.144.0
+  '@types/three': ^0.149.0
   '@typescript-eslint/eslint-plugin': ^5.20.0
   '@typescript-eslint/parser': ^5.20.0
   '@vitejs/plugin-legacy': ^2.0.0
@@ -115,7 +115,7 @@ specifiers:
   stylelint-config-recommended-vue: ^1.4.0
   stylelint-config-standard: ^25.0.0
   stylelint-order: ^5.0.0
-  three: ^0.145.0
+  three: ^0.149.0
   tinymce: ^5.10.3
   ts-jest: ^27.0.7
   ts-node: ^10.7.0
@@ -161,7 +161,7 @@ dependencies:
   '@liveqing/liveplayer-v3': 3.7.9
   '@logicflow/core': 1.1.31
   '@logicflow/extension': 1.1.31
-  '@types/three': 0.144.0
+  '@types/three': 0.149.0
   '@vue/runtime-core': 3.2.45
   '@vue/shared': 3.2.45
   '@vueuse/core': 8.9.4_vue@3.2.45
@@ -199,7 +199,7 @@ dependencies:
   resize-observer-polyfill: 1.5.1
   showdown: 2.1.0
   sortablejs: 1.15.0
-  three: 0.145.0
+  three: 0.149.0
   tinymce: 5.10.7
   vditor: 3.8.18
   vite-plugin-theme: 0.8.6_vite@3.2.5
@@ -2958,8 +2958,8 @@ packages:
       '@types/estree': 1.0.0
     dev: true
 
-  /@types/three/0.144.0:
-    resolution: {integrity: sha512-psvEs6q5rLN50jUYZ3D4pZMfxTbdt3A243blt0my7/NcL6chaCZpHe2csbCtx0SOD9fI/XnF3wnVUAYZGqCSYg==}
+  /@types/three/0.149.0:
+    resolution: {integrity: sha512-fgNBm9LWc65ER/W0cvoXdC0iMy7Ke9e2CONmEr6Jt8sDSY3sw4DgOubZfmdZ747dkPhbQrgRQAWwDEr2S/7IEg==}
     dependencies:
       '@types/webxr': 0.5.0
     dev: false
@@ -11691,8 +11691,8 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
-  /three/0.145.0:
-    resolution: {integrity: sha512-EKoHQEtEJ4CB6b2BGMBgLZrfwLjXcSUfoI/MiIXUuRpeYsfK5aPWbYhdtIVWOH+x6X0TouldHKHBuc/LAiFzAw==}
+  /three/0.149.0:
+    resolution: {integrity: sha512-tohpUxPDht0qExRLDTM8sjRLc5d9STURNrdnK3w9A+V4pxaTBfKWWT/IqtiLfg23Vfc3Z+ImNfvRw1/0CtxrkQ==}
     dev: false
 
   /throat/6.0.1:

src/design/vent/modal.less

@@ -617,3 +617,7 @@
 :deep(.ant-picker-separator) {
   color: #fff !important;
 }
+:deep(.ant-picker-dropdown) {
+  top: 0 !important;
+  left: 0 !important;
+}

src/hooks/core/threejs/useThree.ts

@@ -128,6 +128,7 @@ class UseThree {
     this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
     this.renderer.outputEncoding = THREE.sRGBEncoding;
+    // this.renderer.sortObjects = false;
 
     this.renderer.shadowMap.enabled = true;
 
@@ -426,10 +427,10 @@ class UseThree {
     this.renderer?.forceContextLoss();
     const gl = this.renderer?.getContext('webgl');
     gl && gl.getExtension('WEBGL_lose_context')?.loseContext();
-    this.canvasContainer?.removeChild(this.renderer?.domElement as Node);
+    if (this.renderer && this.canvasContainer) this.canvasContainer?.removeChild(this.renderer?.domElement as Node);
     // const glCss = this.css3dRender?.getContext('webgl');
     // glCss && glCss.getExtension('WEBGL_lose_context')?.loseContext();
-    this.CSSCanvasContainer?.removeChild(this.css3dRender?.domElement as Node);
+    if (this.CSSCanvasContainer && this.css3dRender) this.CSSCanvasContainer.removeChild(this.css3dRender?.domElement as Node);
     this.camera = null;
     this.orbitControls = null;
     if (this.renderer) this.renderer.domElement = null;

src/hooks/web/useECharts.ts

@@ -38,7 +38,7 @@ export function useECharts(elRef: Ref<HTMLDivElement>, theme: 'light' | 'dark' |
       return;
     }
 
-    chartInstance = echarts.init(el, t);
+    chartInstance = echarts.init(el, t, { renderer: 'svg' });
     const { removeEvent } = useEventListener({
       el: window,
       name: 'resize',

src/utils/threejs/util.ts

@@ -368,7 +368,9 @@ export const transScreenCoord = (vector, camera) => {
 };
 
 export const drawHot = (scale: number) => {
-  const hotMap = new THREE.TextureLoader().load('/src/assets/images/hot-point.png');
+  // const hotMap = new THREE.TextureLoader().load('/src/assets/images/hot-point.png');
+  // const hotMap = new THREE.TextureLoader().setPath('/model/img/').load('/hot-point.png');
+  const hotMap = new THREE.TextureLoader().load('/model/img/hot-point.png');
   const material = new THREE.SpriteMaterial({
     map: hotMap,
   });

src/views/vent/monitorManager/gateMonitor/gate.threejs.ts

@@ -255,6 +255,7 @@ const drawHots = () => {
     // hotPoint.scale.set(0.3, 0.3, 0.3);
     hotPoint.position.set(position.x, position.y, position.z);
     hotPoint.name = 'hotPoint' + i;
+    debugger;
     group.add(hotPoint);
   }
 };

src/views/vent/monitorManager/gateMonitor/index.vue

@@ -3,11 +3,11 @@
     <a-spin :spinning="loading" />
     <div id="deviceDetail" class="device-detail">
       <div id="deviceCard" class="device-card" style="z-index: -1; position: absolute">
-        <div class="title">KJ-890-F矿用本安型监控分站</div>
+        <div class="title">KJ-980-F矿用本安型监控分站</div>
         <div class="detail-box">
           <div class="left-box"></div>
           <div class="right-box">
-            <div><span class="detail-title">规格型号：</span> <span>KJ-890-F</span></div>
+            <div><span class="detail-title">规格型号：</span> <span>KJ-980-F</span></div>
             <div
               ><span class="detail-title">技术参数：</span>
               <span