From 8d4da011aa455813f5a43fd6f346da80fdd2264f Mon Sep 17 00:00:00 2001
From: Kubbo <390378816@qq.com>
Date: Mon, 15 Jul 2024 03:09:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E9=83=A8=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/AppNavbar.vue   |  2 +-
 src/views/AppThreeMap.vue | 62 ++++++++++++++++++++++++---------------
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/views/AppNavbar.vue b/src/views/AppNavbar.vue
index bae528f..fef356a 100644
--- a/src/views/AppNavbar.vue
+++ b/src/views/AppNavbar.vue
@@ -32,7 +32,7 @@ export default {
 
 <template>
   <section class="AppNavbar" :style="{backgroundImage}">
-    <div v-for="e in screens" :key="e.id" @click="groupId=e.id" class="pointer"/>
+    <div v-for="e in screens" :key="e.id" @click="$marketBoard.screenId=e.id" class="pointer"/>
   </section>
 </template>
 
diff --git a/src/views/AppThreeMap.vue b/src/views/AppThreeMap.vue
index f5cfc04..2392c92 100644
--- a/src/views/AppThreeMap.vue
+++ b/src/views/AppThreeMap.vue
@@ -57,6 +57,7 @@ export default {
           this.setRenderer();
           this.setControl();
           this.setMapData(root.geoJson)
+          this.setHoverPanel()
           this.animation();
           this.bindMouseEvent()
         }
@@ -68,11 +69,13 @@ export default {
           requestAnimationFrame(this.animation.bind(this));
           this.loop = (this.loop * 100 + 2) % 100 * 0.01
           this.markers.children.forEach(e => {
-            e.scale = {
-              x: Math.asin(this.loop) + 1,
-              y: Math.asin(this.loop) + 1,
-              z: Math.asin(this.loop) + 1
-            };
+            if (e.data.bakeStockAmt <= 0) {
+              e.scale = {
+                x: Math.asin(this.loop) + 1,
+                y: Math.asin(this.loop) + 1,
+                z: Math.asin(this.loop) + 1
+              };
+            }
           })
           TWEEN.update();
           this.controls.update();
@@ -244,6 +247,9 @@ export default {
           rootEl.appendChild(this.renderer.domElement);
           this.CSS3DRenderer = new THREE.CSS3DRenderer();
           this.CSS3DRenderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
+          this.CSS3DRenderer.domElement.style.position = 'absolute';
+          this.CSS3DRenderer.domElement.style.top = '0';
+          this.CSS3DRenderer.domElement.style.left = '0';
           rootEl.appendChild(this.CSS3DRenderer.domElement);
 
           function onWindowResize() {
@@ -288,6 +294,25 @@ export default {
           this.tips.add(textMesh)
         }
 
+        setHoverPanel() {
+          this.hoverPanelElement = document.createElement('div')
+          Object.entries({
+            background: 'linear-gradient( 90deg, rgba(9,63,107,0.79) 0%, rgba(13,58,99,0.03) 100%)',
+            borderRadius: '2px',
+            color: '#fff',
+            fontSize: '10px',
+            lineHeight: '14px',
+            position: 'absolute',
+            top: 0,
+            padding: '8px',
+            opacity: 0,
+          }).forEach(([key, value]) => {
+            this.hoverPanelElement.style[key] = value
+          })
+          this.hoverPanel = new THREE.CSS3DObject(this.hoverPanelElement)
+          this.scene.add(this.hoverPanel)
+        }
+
         bindMouseEvent() {
           const raycaster = new THREE.Raycaster();
 
@@ -302,6 +327,9 @@ export default {
                 this.showHoverPanel(e.object)
               }
             })
+            if (intersects?.length <= 0) {
+              this.hoverPanelElement.style.opacity = '0'
+            }
           }
           const onClick = () => {
             // const {x, y} = this.mouse
@@ -325,24 +353,12 @@ export default {
         }
 
         showHoverPanel({data: marker, position} = {}) {
-          const hoverPanelElement = document.createElement('div')
-          Object.entries({
-            background: 'linear-gradient( 90deg, rgba(9,63,107,0.79) 0%, rgba(13,58,99,0.03) 100%)',
-            borderRadius: '2px',
-            color: '#fff',
-            fontSize: '10px',
-            lineHeight: '14px',
-            position: 'absolute',
-            top: 0,
-          }).forEach(([key, value]) => {
-            hoverPanelElement.style[key] = value
-          })
-          const span = document.createElement('span')
-          span.innerHTML = [marker.storeName, `现烤库存金额：${marker.bakeStockAmt}`, `现烤销售机会：${marker.bakeStockAmt}`].join('<br/>')
-          hoverPanelElement.appendChild(span)
-          const hoverPanel = new THREE.CSS3DObject(hoverPanelElement)
-          hoverPanel.position.set(position)
-          this.scene.add(hoverPanel)
+          this.hoverPanelElement.style.opacity = '1'
+          this.hoverPanelElement.innerHTML = [marker.storeName, `现烤库存金额：${marker.bakeStockAmt}`, `现烤销售机会：${marker.bakeStockAmt}`].join('<br/>')
+          this.hoverPanel.scale.set(...Array(3).fill(0.04))
+          this.hoverPanel.rotation.z = Math.PI / 2
+          this.hoverPanel.rotation.y = Math.PI / 6
+          this.hoverPanel.position.set(position.x * scale, position.y * scale, position.z * scale)
         }
       }