From 899b9fa87993d8ed360ddbf9e69787ceccaf9aef Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Thu, 24 Nov 2022 14:57:18 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E8=B4=A8=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/QualityManager/HomePage.vue         |  32 +-
 .../components/TechyAnalysisHeader.vue        | 273 +++++++++++-------
 .../components/charts/newLineStack.vue        |   1 +
 .../components/productionRateHeader.vue       | 243 ++++++++++++++++
 4 files changed, 414 insertions(+), 135 deletions(-)
 create mode 100644 src/views/QualityManager/components/productionRateHeader.vue

diff --git a/src/views/QualityManager/HomePage.vue b/src/views/QualityManager/HomePage.vue
index 76f0ce4..7956494 100644
--- a/src/views/QualityManager/HomePage.vue
+++ b/src/views/QualityManager/HomePage.vue
@@ -185,32 +185,8 @@
                   </techy-box>
                 </div>
                 <div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
-                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
-                    <techy-analysis-header class="production-rate">
-                      产品成品率
-                      <template v-slot:dateSelect>
-                        <div class="date-select">
-                          <span
-                            :class="{ 'date-select__active': dateMode2 === 'day' }"
-                            @click="
-                              dateMode2 = 'day'
-                              dataUpdateToken = '' + Math.random()
-                            "
-                          >
-                            日
-                          </span>
-                          <span
-                            :class="{ 'date-select__active': dateMode2 === 'month' }"
-                            @click="
-                              dateMode2 = 'month'
-                              dataUpdateToken = '' + Math.random()
-                            "
-                          >
-                            月
-                          </span>
-                        </div>
-                      </template>
-                    </techy-analysis-header>
+                  <techy-box class="" style="padding: 0 calc(16px * var(--beilv));">
+                    <productionRateHeader @update-data="str => dataUpdateToken = str">产品成品率</productionRateHeader>
                     <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                       <new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
                     </div>
@@ -285,6 +261,7 @@ import TechyBox from './components/TechyBox.vue'
 import TechyTable from './components/TechyTable.vue'
 import TechyAnalysisBar from './components/TechyAnalysisBar.vue'
 import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
+import productionRateHeader from './components/productionRateHeader.vue'
 // import FaultCategoryChart from './components/charts/FaultCategoryChart.vue'
 import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
 import { mapGetters } from 'vuex'
@@ -307,7 +284,8 @@ export default {
     // FaultCategoryChart,
     PlFaultAnalysisPieChart,
     TechyBar,
-    NewLineStack
+    NewLineStack,
+    productionRateHeader
   },
   data() {
     const quexianDatalist = [
diff --git a/src/views/QualityManager/components/TechyAnalysisHeader.vue b/src/views/QualityManager/components/TechyAnalysisHeader.vue
index 3300f13..da99412 100644
--- a/src/views/QualityManager/components/TechyAnalysisHeader.vue
+++ b/src/views/QualityManager/components/TechyAnalysisHeader.vue
@@ -1,122 +1,125 @@
 <template>
   <div class="techy-analysis-header">
     <template v-if="type === 'special'">
-      <div
-        style="transform: skewX(32deg); background: #fff0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
-      >
-        <div class="legend" style="background: #fff0; width: calc(84px * var(--beilv));"></div>
-
-        <div style="flex: 1; white-space: nowrap; overflow: hidden;">
-          <span class="top-icon" style="transform: translateY(1px) skewX(-32deg); ">
-            <svg
-              width="100%"
-              height="100%"
-              viewBox="0 0 56 13"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-            >
-              <title>left</title>
-              <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
-                  <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
-                    <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
-                      <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
-                        <g
-                          id="编组-2备份"
-                          transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
-                        >
-                          <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
-                          <polygon
-                            id="路径-11备份"
-                            opacity="0.8"
-                            points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
-                          ></polygon>
-                          <polygon
-                            id="路径-11备份-3"
-                            opacity="0.4"
-                            points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
-                          ></polygon>
-                          <polygon
-                            id="路径-11备份-2"
-                            opacity="0.601434"
-                            points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
-                          ></polygon>
-                          <polygon
-                            id="路径-11备份-4"
-                            opacity="0.201434"
-                            points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
-                          ></polygon>
+      <div class="special-wrapper">
+        <div class="special-wrapper__left"></div>
+        <div class="special-wrapper__middle">
+          <div class="special-wrapper__middle--inner">
+            <div style="transform: translateX(12%)">
+              <span class="top-icon">
+                <svg
+                  width="100%"
+                  height="100%"
+                  viewBox="0 0 56 13"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                >
+                  <title>left</title>
+                  <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
+                      <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
+                        <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
+                          <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
+                            <g
+                              id="编组-2备份"
+                              transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
+                            >
+                              <polygon
+                                id="路径-11"
+                                points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
+                              ></polygon>
+                              <polygon
+                                id="路径-11备份"
+                                opacity="0.8"
+                                points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
+                              ></polygon>
+                              <polygon
+                                id="路径-11备份-3"
+                                opacity="0.4"
+                                points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
+                              ></polygon>
+                              <polygon
+                                id="路径-11备份-2"
+                                opacity="0.601434"
+                                points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
+                              ></polygon>
+                              <polygon
+                                id="路径-11备份-4"
+                                opacity="0.201434"
+                                points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
+                              ></polygon>
+                            </g>
+                          </g>
                         </g>
                       </g>
                     </g>
                   </g>
-                </g>
-              </g>
-            </svg>
-          </span>
-          <span
-            class="techy-analysis-header__title"
-            style="display: inline-block; transform: translateX(-1px) skewX(-32deg); "
-          >
-            <slot />
-          </span>
-          <span class="top-icon" style="transform:  translateY(1px)  skewX(-32deg); ">
-            <svg
-              width="100%"
-              height="100%"
-              viewBox="0 0 56 13"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-            >
-              <title>right</title>
-              <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
-                  <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
-                    <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
-                      <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
-                        <g
-                          id="编组-2备份-2"
-                          transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
-                        >
-                          <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
-                          <polygon
-                            id="路径-11备份"
-                            opacity="0.8"
-                            points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
-                          ></polygon>
-                          <polygon
-                            id="路径-11备份-3"
-                            opacity="0.4"
-                            points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
-                          ></polygon>
-                          <polygon
-                            id="路径-11备份-2"
-                            opacity="0.601434"
-                            points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
-                          ></polygon>
-                          <polygon
-                            id="路径-11备份-4"
-                            opacity="0.201434"
-                            points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
-                          ></polygon>
+                </svg>
+              </span>
+              <span class="techy-analysis-header__title">
+                <slot />
+              </span>
+              <span class="top-icon">
+                <svg
+                  width="100%"
+                  height="100%"
+                  viewBox="0 0 56 13"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                >
+                  <title>right</title>
+                  <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
+                      <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
+                        <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
+                          <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
+                            <g
+                              id="编组-2备份-2"
+                              transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
+                            >
+                              <polygon
+                                id="路径-11"
+                                points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
+                              ></polygon>
+                              <polygon
+                                id="路径-11备份"
+                                opacity="0.8"
+                                points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
+                              ></polygon>
+                              <polygon
+                                id="路径-11备份-3"
+                                opacity="0.4"
+                                points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
+                              ></polygon>
+                              <polygon
+                                id="路径-11备份-2"
+                                opacity="0.601434"
+                                points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
+                              ></polygon>
+                              <polygon
+                                id="路径-11备份-4"
+                                opacity="0.201434"
+                                points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
+                              ></polygon>
+                            </g>
+                          </g>
                         </g>
                       </g>
                     </g>
                   </g>
-                </g>
-              </g>
-            </svg>
-          </span>
+                </svg>
+              </span>
+            </div>
+          </div>
         </div>
 
-        <div
-          class="legend legend-right"
-          style="transform: skewX(-32deg); background: #fff0; width: calc(100px * var(--beilv)); padding-left: calc(6px * var(--beilv));"
-        >
-          <div class="legend-item pla" style=" margin-right: calc(2px * var(--beilv));">产线A</div>
-          <div class="legend-item plb" style=" ">产线B</div>
+        <div class="special-wrapper__right">
+          <div class="special-wrapper__right--inner">
+            <div class="pla" style="margin-right: calc(2px * var(--beilv));">产线A</div>
+            <div class="plb">产线B</div>
+          </div>
         </div>
       </div>
     </template>
@@ -292,10 +295,64 @@ export default {
   margin-right: calc(4px * var(--beilv));
 }
 
-.pla::before {
-  background: linear-gradient(to top, #49fbd6, transparent);
+.special-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: skewX(35deg);
+  background: #fff0;
+  width: 100%;
+  height: calc(22px * var(--beilv));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.special-wrapper__left {
+  width: 1px;
+  flex: 1;
+}
+.special-wrapper__middle {
+  overflow: hidden;
 }
+
+.special-wrapper__middle--inner {
+  transform: skewX(-35deg);
+  white-space: nowrap;
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.special-wrapper__right {
+  padding-left: calc(8px * var(--beilv));
+  padding-right: calc(8px * var(--beilv));
+}
+
+.special-wrapper__right--inner {
+  transform: skewX(-35deg);
+  display: flex;
+  align-items: center;
+  gap: calc(4px * var(--beilv));
+  height: 100%;
+  width: calc(100px * var(--beilv));
+  padding-left: calc(6px * var(--beilv));
+  font-size: calc(12px * var(--beilv));
+  color: #fff9;
+}
+
+.special-wrapper__right--inner > div::before {
+  content: '';
+  display: inline-block;
+  margin-right: calc(2px * var(--beilv));
+  width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv));
+}
+
 .plb::before {
+  background: linear-gradient(to top, #49fbd6, transparent);
+}
+.pla::before {
   background: linear-gradient(to top, #49b2ff, transparent);
 }
 </style>
diff --git a/src/views/QualityManager/components/charts/newLineStack.vue b/src/views/QualityManager/components/charts/newLineStack.vue
index 9da6a59..6b3e80d 100644
--- a/src/views/QualityManager/components/charts/newLineStack.vue
+++ b/src/views/QualityManager/components/charts/newLineStack.vue
@@ -68,6 +68,7 @@ class ChartOption {
         type: 'value',
         min: 'dataMin',
         splitNumber: 4,
+        nameGap: 16,
         nameTextStyle: {
           color: 'rgba(255,255,255,0.7)',
           fontSize: 12,
diff --git a/src/views/QualityManager/components/productionRateHeader.vue b/src/views/QualityManager/components/productionRateHeader.vue
new file mode 100644
index 0000000..f75b755
--- /dev/null
+++ b/src/views/QualityManager/components/productionRateHeader.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="techy-analysis-header">
+    <div class="special-wrapper">
+      <div class="special-wrapper__left"></div>
+      <div class="special-wrapper__middle">
+        <div class="special-wrapper__middle--inner">
+          <div style="transform: translateX(4%)">
+            <span class="top-icon">
+              <svg
+                width="100%"
+                height="100%"
+                viewBox="0 0 56 13"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <title>left</title>
+                <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
+                    <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
+                      <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
+                        <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
+                          <g
+                            id="编组-2备份"
+                            transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
+                          >
+                            <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
+                            <polygon
+                              id="路径-11备份"
+                              opacity="0.8"
+                              points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-3"
+                              opacity="0.4"
+                              points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-2"
+                              opacity="0.601434"
+                              points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-4"
+                              opacity="0.201434"
+                              points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
+                            ></polygon>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </svg>
+            </span>
+            <span class="techy-analysis-header__title">
+              <slot />
+            </span>
+            <span class="top-icon">
+              <svg
+                width="100%"
+                height="100%"
+                viewBox="0 0 56 13"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <title>right</title>
+                <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
+                    <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
+                      <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
+                        <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
+                          <g
+                            id="编组-2备份-2"
+                            transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
+                          >
+                            <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
+                            <polygon
+                              id="路径-11备份"
+                              opacity="0.8"
+                              points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-3"
+                              opacity="0.4"
+                              points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-2"
+                              opacity="0.601434"
+                              points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
+                            ></polygon>
+                            <polygon
+                              id="路径-11备份-4"
+                              opacity="0.201434"
+                              points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
+                            ></polygon>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="special-wrapper__right">
+        <div class="special-wrapper__right--inner">
+          <span
+            :class="{ 'date-select__active': dateMode === 'day' }"
+            @click="
+              dateMode = 'day'
+              $emit('update-data', '' + Math.random())
+            "
+          >
+            日
+          </span>
+          <span
+            :class="{ 'date-select__active': dateMode === 'month' }"
+            @click="
+              dateMode = 'month'
+              $emit('update-data', '' + Math.random())
+            "
+          >
+            月
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TechyAnalysisHeader',
+  props: {
+    type: {
+      type: String,
+      default: 'dafault-type'
+    },
+    showTopIcon: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      dateMode: 'day'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.techy-analysis-header {
+  text-align: center;
+  margin-bottom: calc(16px * var(--beilv));
+  position: relative;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.techy-analysis-header__title {
+  color: #01cfcc;
+  font-size: calc(15px * var(--beilv));
+  line-height: calc(18px * var(--beilv));
+}
+
+.top-icon {
+  display: inline-block;
+  width: calc(56px * var(--beilv));
+  height: calc(12px * var(--beilv));
+  margin-bottom: calc(2px * var(--beilv));
+}
+
+.special-wrapper {
+  position: absolute;
+  top: calc(12px * var(--beilv));
+  left: 0;
+  transform: skewX(35deg);
+  background: #fff0;
+  width: 100%;
+  height: calc(22px * var(--beilv));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.special-wrapper__left {
+  flex: 1;
+  min-width: calc(56px * var(--beilv));
+}
+
+.special-wrapper__middle {
+  overflow: hidden;
+}
+
+.special-wrapper__middle--inner {
+  transform: skewX(-35deg);
+  white-space: nowrap;
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.special-wrapper__right {
+  width: calc(100px * var(--beilv));
+  padding-left: calc(8px * var(--beilv));
+  padding-right: calc(8px * var(--beilv));
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.special-wrapper__right--inner {
+  transform: skewX(-35deg);
+  border-radius: calc(2px * var(--beilv));
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  cursor: pointer;
+}
+
+.special-wrapper__right--inner > span {
+  display: inline-block;
+  width: calc(40px * var(--beilv));
+  text-align: center;
+  font-size: calc(12px * var(--beilv));
+  line-height: calc(18px * var(--beilv));
+  color: white;
+  background-color: #31878c94;
+}
+
+.special-wrapper__right--inner span.pl-select__active,
+.special-wrapper__right--inner span.date-select__active {
+  background-color: #42bbb7;
+}
+</style>