From 3db6ac92fe4905fdf58c90a6e9d2f565a286525b Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Thu, 24 Nov 2022 13:38:53 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BA=A7=E7=BA=BF=E7=BC=BA=E9=99=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/QualityManager/HomePage.vue         |  14 +-
 .../components/TechyAnalysisHeader.vue        | 135 +-----------------
 .../components/charts/TechyBar.vue            |   9 +-
 3 files changed, 19 insertions(+), 139 deletions(-)

diff --git a/src/views/QualityManager/HomePage.vue b/src/views/QualityManager/HomePage.vue
index 455a33b..caae065 100644
--- a/src/views/QualityManager/HomePage.vue
+++ b/src/views/QualityManager/HomePage.vue
@@ -38,8 +38,8 @@
             <!-- 第一行 -->
             <div class="quality-analysis__body__row-1">
               <!-- 第一列 -->
-              <div class="flex gap-16">
-                <div class="grow" style="max-width: 24vw;">
+              <div class="flex gap-16" style="flex: 1;">
+                <div style="width: calc(400px * var(--beilv)); flex: 1;">
                   <techy-box class="" style="padding: calc(8px * var(--beilv));">
                     <techy-analysis-header type="special">产线缺陷日对比</techy-analysis-header>
                     <div
@@ -80,7 +80,7 @@
                     </div>
                   </techy-box>
                 </div>
-                <div class="grow" style="max-width: 24vw;">
+                <div style="width: calc(400px * var(--beilv)); flex: 1;">
                   <techy-box class="" style="padding: calc(8px * var(--beilv));">
                     <techy-analysis-header type="special">产线缺陷月对比</techy-analysis-header>
                     <div
@@ -126,8 +126,8 @@
               </div>
 
               <!-- 第二列 -->
-              <div class="grow flex gap-16">
-                <div class="width-222">
+              <div class="flex gap-16" style="flex: 1; width: 1px;">
+                <div class="" style="width: calc(380px * var(--beilv)); flex: 1;">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header :show-top-icon="false">
                       产线缺陷分析
@@ -184,9 +184,9 @@
                     </div>
                   </techy-box>
                 </div>
-                <div class="grow">
+                <div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
-                    <techy-analysis-header type="production-rate" class="production-rate">
+                    <techy-analysis-header class="production-rate">
                       产品成品率
                       <template v-slot:dateSelect>
                         <div class="date-select">
diff --git a/src/views/QualityManager/components/TechyAnalysisHeader.vue b/src/views/QualityManager/components/TechyAnalysisHeader.vue
index d54c7b6..3300f13 100644
--- a/src/views/QualityManager/components/TechyAnalysisHeader.vue
+++ b/src/views/QualityManager/components/TechyAnalysisHeader.vue
@@ -4,10 +4,10 @@
       <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(126px * var(--beilv));"></div>
+        <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: skewX(-32deg); ">
+          <span class="top-icon" style="transform: translateY(1px) skewX(-32deg); ">
             <svg
               width="100%"
               height="100%"
@@ -57,11 +57,11 @@
           </span>
           <span
             class="techy-analysis-header__title"
-            style="display: inline-block; transform: translateX(-4px) skewX(-32deg); "
+            style="display: inline-block; transform: translateX(-1px) skewX(-32deg); "
           >
             <slot />
           </span>
-          <span class="top-icon" style="transform: skewX(-32deg); ">
+          <span class="top-icon" style="transform:  translateY(1px)  skewX(-32deg); ">
             <svg
               width="100%"
               height="100%"
@@ -113,130 +113,9 @@
 
         <div
           class="legend legend-right"
-          style="transform: skewX(-32deg); background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));"
+          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(8px * var(--beilv));">产线A</div>
-          <div class="legend-item plb" style=" ">产线B</div>
-        </div>
-      </div>
-    </template>
-
-    <template v-else-if="type === 'production-rate'">
-      <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(126px * var(--beilv));"></div>
-
-        <div style="flex: 1; white-space: nowrap; overflow: hidden;">
-          <span class="top-icon" style="transform: 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>
-                        </g>
-                      </g>
-                    </g>
-                  </g>
-                </g>
-              </g>
-            </svg>
-          </span>
-          <span
-            class="techy-analysis-header__title"
-            style="display: inline-block; transform: translateX(-4px) skewX(-32deg); "
-          >
-            <slot />
-          </span>
-          <span class="top-icon" style="transform: 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>
-                        </g>
-                      </g>
-                    </g>
-                  </g>
-                </g>
-              </g>
-            </svg>
-          </span>
-        </div>
-
-        <div
-          class="legend legend-right"
-          style="transform: skewX(-32deg); background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));"
-        >
-          <div class="legend-item pla" style=" margin-right: calc(8px * var(--beilv));">产线A</div>
+          <div class="legend-item pla" style=" margin-right: calc(2px * var(--beilv));">产线A</div>
           <div class="legend-item plb" style=" ">产线B</div>
         </div>
       </div>
@@ -410,7 +289,7 @@ export default {
   width: calc(8px * var(--beilv));
   height: calc(8px * var(--beilv));
   background: #fffc;
-  margin-right: calc(8px * var(--beilv));
+  margin-right: calc(4px * var(--beilv));
 }
 
 .pla::before {
diff --git a/src/views/QualityManager/components/charts/TechyBar.vue b/src/views/QualityManager/components/charts/TechyBar.vue
index 4255c99..09c043c 100644
--- a/src/views/QualityManager/components/charts/TechyBar.vue
+++ b/src/views/QualityManager/components/charts/TechyBar.vue
@@ -159,7 +159,7 @@ export default {
       option: {
         grid: {
           left: '10%',
-          top: 48,
+          top: 72,
           bottom: 28
         },
         xAxis: {
@@ -195,13 +195,14 @@ export default {
           type: 'value',
           // min: -25,
           min: this.extraSpaceBetweenZero * -1,
-          name: this.unitName,
+          name: this.unitName + '        ',
           nameTextStyle: {
             color: '#fff8',
-            fontSize: 8,
+            fontSize: 12,
             verticalAlign: 'top',
             align: 'right'
           },
+          nameGap: 20,
           axisLine: {
             show: true,
             lineStyle: {
@@ -210,7 +211,7 @@ export default {
           },
           axisLabel: {
             color: '#fff8',
-            fontSize: 10,
+            fontSize: 12,
             /** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/
             formatter: function(value, index) {
               if (value < 0) {