From 582ac98a523fcf6dc855b7fa31772fea545ca311 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Fri, 25 Nov 2022 13:53:30 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E8=B4=A8=E9=87=8Ftooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/QualityManager/HomePage.vue         | 66 +++++++++++++---
 .../components/charts/newLineStack.vue        | 77 +++++++++++++++----
 2 files changed, 120 insertions(+), 23 deletions(-)

diff --git a/src/views/QualityManager/HomePage.vue b/src/views/QualityManager/HomePage.vue
index 5bb4dc3..71309b8 100644
--- a/src/views/QualityManager/HomePage.vue
+++ b/src/views/QualityManager/HomePage.vue
@@ -137,7 +137,7 @@
                             :class="{ 'pl-select__active': plMode === 'a' }"
                             @click="
                               plMode = 'a'
-                              chosenDatalist = getFaultDataList()  
+                              chosenDatalist = getFaultDataList()
                             "
                           >
                             A
@@ -187,8 +187,8 @@
                   </techy-box>
                 </div>
                 <div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
-                  <techy-box class="" style="padding: 0 calc(16px * var(--beilv));">
-                    <productionRateHeader
+                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
+                    <!-- <productionRateHeader
                       @update-data="
                         obj => {
                           dataUpdateToken = obj.str
@@ -197,7 +197,42 @@
                       "
                     >
                       产品成品率
-                    </productionRateHeader>
+                    </productionRateHeader> -->
+
+                    <techy-analysis-header :show-top-icon="false">
+                      产线成品率
+                      <template v-slot:dateSelect>
+                        <div class="pl-select">
+                          <span
+                            :class="{ 'pl-select__active': dateMode2 === 'day' }"
+                            @click="
+                              dateMode2 = 'day'
+                              dataUpdateToken = Math.random()+''
+                            "
+                          >
+                            日
+                          </span>
+                          <span
+                            :class="{ 'pl-select__active': dateMode2 === 'month' }"
+                            @click="
+                              dateMode2 = 'month'
+                              dataUpdateToken = Math.random()+''
+                            "
+                          >
+                            月
+                          </span>
+                        </div>
+                        <div class="date-select fake-legend">
+                          <span>
+                            <!-- 产线A -->
+                          </span>
+                          <span>
+                            <!-- 产线B -->
+                          </span>
+                        </div>
+                      </template>
+                    </techy-analysis-header>
+
                     <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                       <new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
                     </div>
@@ -300,7 +335,8 @@ export default {
   },
   data() {
     const quexianDatalist = [
-      [ // 月a
+      [
+        // 月a
         { value: 5.21, name: '破片' },
         { value: 3.2, name: '崩边' },
         { value: 4.12, name: '脏污' },
@@ -308,7 +344,8 @@ export default {
         { value: 0.96, name: '崩孔' },
         { value: 2.2, name: '其他' }
       ],
-      [ // 月b
+      [
+        // 月b
         { value: 4.34, name: '破片' },
         { value: 3.4, name: '崩边' },
         { value: 4.1, name: '脏污' },
@@ -316,7 +353,8 @@ export default {
         { value: 0.32, name: '崩孔' },
         { value: 2.14, name: '其他' }
       ],
-      [ // 日a
+      [
+        // 日a
         { value: 184, name: '破片' },
         { value: 110, name: '崩边' },
         { value: 163, name: '脏污' },
@@ -324,7 +362,8 @@ export default {
         { value: 22, name: '崩孔' },
         { value: 74, name: '其他' }
       ],
-      [ // 日b
+      [
+        // 日b
         { value: 172, name: '破片' },
         { value: 122, name: '崩边' },
         { value: 162, name: '脏污' },
@@ -338,7 +377,7 @@ export default {
       dataUpdateToken: 'xx-token',
       plMode: 'a',
       dateMode: 'month',
-      dateMode2: 'month',
+      dateMode2: 'day',
       qualityTableProps,
       qualityDatalist,
       qualityExceptionDatalist,
@@ -629,6 +668,15 @@ export default {
   width: calc(375px * var(--beilv));
 }
 
+.fake-legend{
+  cursor: unset;
+}
+
+.fake-legend span {
+  background: none;
+  cursor: none;
+  color: #DFF1FE;
+}
 /* @media all and (max-width: 1680px) {
   .production-rate {
     text-align: center;
diff --git a/src/views/QualityManager/components/charts/newLineStack.vue b/src/views/QualityManager/components/charts/newLineStack.vue
index acd0d2e..85b7dfd 100644
--- a/src/views/QualityManager/components/charts/newLineStack.vue
+++ b/src/views/QualityManager/components/charts/newLineStack.vue
@@ -11,19 +11,19 @@ class ChartOption {
   constructor() {
     this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
 
-    // this.legend = {
-    //   top: 11,
-    //   right: 32,
-    //   itemWidth: 8,
-    //   itemHeight: 8,
-    //   textStyle: {
-    //     color: '#fff9',
-    //     fontSize: 10
-    //   }
-    // }
+    this.legend = {
+      top: 14,
+      right: 22,
+      itemWidth: 6,
+      itemHeight: 8,
+      textStyle: {
+        color: '#DFF1FECC',
+        fontSize: 12
+      }
+    }
 
     this.grid = {
-      top: 64,
+      top: 72,
       left: 12,
       right: 28,
       bottom: 20,
@@ -44,6 +44,7 @@ class ChartOption {
       }
     }
 
+    let today = new Date()
     this.xAxis = {
       type: 'category',
       boundaryGap: false,
@@ -62,13 +63,15 @@ class ChartOption {
       },
       data:
         this.mode === 'month'
-          ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+          ? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate())
+              .fill(1)
+              .map((_, idx) => idx + 1)
           : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
     }
 
     this.yAxis = [
       {
-        name: '成品率          ',
+        name: '成品率            ',
         type: 'value',
         min: '80',
         splitNumber: 4,
@@ -259,11 +262,57 @@ export default {
   methods: {
     refreshData() {
       // update xaxis
+      let today = new Date()
       this.configs.xAxis.data =
         this.mode === 'month'
-          ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+          ? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate())
+              .fill(1)
+              .map((_, idx) => idx + 1)
           : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
 
+      // update tooltip
+      if (this.mode === 'month') {
+        this.configs.tooltip = {
+          trigger: 'axis',
+          padding: 10,
+          backgroundColor: 'rgba(13, 29, 53, 0.8)',
+          extraCssText: 'width: 180px !important; ',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              type: 'dotted',
+              color: '#7BFFFB'
+            }
+          },
+          formatter: params => {
+            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>
+            </div>
+            `
+          }
+        }
+      } else if (this.mode === 'day') {
+        this.configs.tooltip = null
+        this.configs.tooltip = {
+          trigger: 'axis',
+          padding: 10,
+          backgroundColor: 'rgba(13, 29, 53, 0.8)',
+          extraCssText: 'width: 180px !important; ',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              type: 'dotted',
+              color: '#7BFFFB'
+            }
+          },
+          formatter: undefined
+        } 
+      }
+
       // update series
       this.configs.series.forEach(item => {
         item.data =