From fbe6cf41e4177e64314dabf9683c7f87df90edfc Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Fri, 25 Nov 2022 15:43:03 +0800
Subject: [PATCH] update tooltip for all

---
 src/views/3DOverview/components/DianChart.vue | 18 +++++++-
 .../components/RightContentProductRate.vue    | 19 +++++++-
 .../RightContentRealtimeProduction.vue        | 21 ++++++++-
 .../components/charts/newLineStack.vue        | 45 ++++++++++++++++---
 4 files changed, 93 insertions(+), 10 deletions(-)

diff --git a/src/views/3DOverview/components/DianChart.vue b/src/views/3DOverview/components/DianChart.vue
index 19010b8..c92d2c3 100644
--- a/src/views/3DOverview/components/DianChart.vue
+++ b/src/views/3DOverview/components/DianChart.vue
@@ -46,7 +46,23 @@ class ChartOption {
       },
       padding: 10,
       backgroundColor: 'rgba(13, 29, 53, 0.8)',
-      extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
+      extraCssText: 'width: auto !important; height: auto !important;',
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[2]
+              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+            </div>
+            `
+      }
     }
 
     this.xAxis = {
diff --git a/src/views/3DOverview/components/RightContentProductRate.vue b/src/views/3DOverview/components/RightContentProductRate.vue
index f707c24..b93ed6e 100644
--- a/src/views/3DOverview/components/RightContentProductRate.vue
+++ b/src/views/3DOverview/components/RightContentProductRate.vue
@@ -55,8 +55,23 @@ class ChartOption {
       },
       padding: 10,
       backgroundColor: 'rgba(13, 29, 53, 0.8)',
-      formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%',
-      extraCssText: 'width: calc(100px*var(--beilv)) !important;'
+      // formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%',
+      extraCssText: 'width: calc(100px*var(--beilv)) !important;',
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
+                params[0].axisValue
+              }</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
+      }
     }
 
     let d = new Date()
diff --git a/src/views/3DOverview/components/RightContentRealtimeProduction.vue b/src/views/3DOverview/components/RightContentRealtimeProduction.vue
index 19def8a..f6d299b 100644
--- a/src/views/3DOverview/components/RightContentRealtimeProduction.vue
+++ b/src/views/3DOverview/components/RightContentRealtimeProduction.vue
@@ -55,7 +55,26 @@ class ChartOption {
       },
       padding: 10,
       backgroundColor: 'rgba(13, 29, 53, 0.8)',
-      extraCssText: 'width: calc(100px*var(--beilv)) !important;'
+      extraCssText: 'width: calc(100px*var(--beilv)) !important;',
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[2]
+              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[3]
+              }"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
+            </div>
+            `
+      }
     }
 
     let d = new Date()
diff --git a/src/views/QualityManager/components/charts/newLineStack.vue b/src/views/QualityManager/components/charts/newLineStack.vue
index 85b7dfd..79cc6af 100644
--- a/src/views/QualityManager/components/charts/newLineStack.vue
+++ b/src/views/QualityManager/components/charts/newLineStack.vue
@@ -41,6 +41,19 @@ class ChartOption {
           type: 'dotted',
           color: '#7BFFFB'
         }
+      },
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
       }
     }
 
@@ -285,12 +298,18 @@ export default {
             }
           },
           formatter: params => {
-            const currentMonth = new Date().getMonth() + 1 
+            const currentMonth = new Date().getMonth() + 1
             return `
             <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
-              <h2 style="margin: 0; font-size: calc(14px * var(--beilv)); ">${currentMonth}-${params[0].axisValue}</h2>
-              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${this.configs.color[0]}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
-              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${this.configs.color[1]}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${currentMonth}-${
+              params[0].axisValue
+            }</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
             </div>
             `
           }
@@ -309,8 +328,22 @@ export default {
               color: '#7BFFFB'
             }
           },
-          formatter: undefined
-        } 
+          formatter: params => {
+            return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
+                params[0].axisValue
+              }</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
+          }
+        }
       }
 
       // update series