From e71855fee44cf4ebfe3d9d3662cf82fcb3efdcaa Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Thu, 10 Nov 2022 14:49:28 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E8=B4=A8=E9=87=8F=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/QualityManager/HomePage.vue         |  46 ++--
 .../components/TechyAnalysisBar.vue           |  24 +-
 .../components/TechyAnalysisHeader.vue        | 210 +++++++++---------
 .../QualityManager/components/TechyBox.vue    |   2 +-
 4 files changed, 142 insertions(+), 140 deletions(-)

diff --git a/src/views/QualityManager/HomePage.vue b/src/views/QualityManager/HomePage.vue
index a0cee8a..5147db3 100644
--- a/src/views/QualityManager/HomePage.vue
+++ b/src/views/QualityManager/HomePage.vue
@@ -40,7 +40,7 @@
               <!-- 第一列 -->
               <div class="grow-8 flex gap-16">
                 <div class="grow">
-                  <techy-box class="" style="padding: 16px;">
+                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>缺陷分类分析</techy-analysis-header>
                     <new-bar
                       :xlabel-font-size="8"
@@ -72,7 +72,7 @@
                   </techy-box>
                 </div>
                 <div class="grow">
-                  <techy-box class="" style="padding: 16px;">
+                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>工序缺陷分析</techy-analysis-header>
                     <new-bar
                       chart-name="process-fault"
@@ -93,18 +93,20 @@
               <!-- 第二列 -->
               <div class="grow-6 flex gap-16">
                 <div class="grow">
-                  <techy-box class="" style="padding: 16px;">
+                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>产线缺陷分析</techy-analysis-header>
                     <pl-fault-analysis-pie-chart />
                   </techy-box>
                 </div>
                 <div class="grow">
-                  <techy-box class="" style="padding: 16px;">
+                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>产品成品率</techy-analysis-header>
                     <new-line-stack />
                     <div class="date-select">
-                      <span>日</span>
-                      <span class="date-select__active">月</span>
+                      <span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
+                      <span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
+                        月
+                      </span>
                     </div>
                   </techy-box>
                 </div>
@@ -114,7 +116,7 @@
 
             <!-- 第二行 -->
             <div class="quality-analysis__body__row-2">
-              <techy-box style="padding: 16px;" class="flex flex-col">
+              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
                 <techy-analysis-header>产线A工序质量分析(数量)</techy-analysis-header>
                 <div class="grow grid gap-16-8 column-2 row-5">
                   <techy-analysis-bar
@@ -126,7 +128,7 @@
                   />
                 </div>
               </techy-box>
-              <techy-box style="padding: 16px;" class="flex flex-col">
+              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
                 <techy-analysis-header>产线B工序质量分析(数量)</techy-analysis-header>
                 <div class="grow grid gap-16-8 column-2 row-5">
                   <techy-analysis-bar
@@ -138,7 +140,7 @@
                   />
                 </div>
               </techy-box>
-              <techy-box style="padding: 16px;" class="flex flex-col">
+              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
                 <techy-analysis-header>产线C工序质量分析(数量)</techy-analysis-header>
                 <div class="grow grid gap-16-8 column-2 row-5">
                   <techy-analysis-bar
@@ -150,7 +152,7 @@
                   />
                 </div>
               </techy-box>
-              <techy-box style="padding: 16px;" class="flex flex-col">
+              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
                 <techy-analysis-header>产线D工序质量分析(数量)</techy-analysis-header>
                 <div class="grow grid gap-16-8 column-2 row-5">
                   <techy-analysis-bar
@@ -202,6 +204,7 @@ export default {
   },
   data() {
     return {
+      dateMode: 'month',
       qualityTableProps,
       qualityDatalist,
       qualityExceptionDatalist,
@@ -302,8 +305,7 @@ export default {
 }
 
 .gap-16-8 {
-  /* gap: calc(100vw / 1920 * 16) calc(100vw / 1920 * 8); */
-  gap: calc(16px * var(--beilv)) calc(8px * var(--beilv));
+  gap: calc(12px * var(--beilv)) calc(8px * var(--beilv));
 }
 
 .column-2 {
@@ -311,7 +313,7 @@ export default {
 }
 
 .row-5 {
-  grid-template-rows: repeat(5, 25px);
+  grid-template-rows: repeat(5, calc(24px * var(--beilv)));
 }
 
 .part-1 {
@@ -339,9 +341,7 @@ export default {
 }
 
 .quality-analysis__body__row-1 {
-  /* flex: 1 1;
-  max-height: 25vh; */
-  height: 25vh;
+  height: calc(216px * var(--beilv));
   overflow: hidden;
   display: flex;
   gap: calc(16px * var(--beilv));
@@ -399,14 +399,14 @@ export default {
 }
 
 .gap-16 {
-  gap: calc(100vw / 1920 * 16);
+  gap: calc(16px * var(--beilv));
 }
 
 .date-select {
   position: absolute;
-  top: calc(100vh / 1920 * 22);
-  right: calc(100vw / 1440 * 12);
-  border-radius: 2px;
+  top: calc(16px * var(--beilv));
+  right: calc(10px * var(--beilv));
+  border-radius: calc(2px * var(--beilv));
   overflow: hidden;
   display: flex;
   cursor: pointer;
@@ -414,10 +414,10 @@ export default {
 
 .date-select span {
   display: inline-block;
-  width: 40px;
+  width: calc(40px * var(--beilv));
   text-align: center;
-  font-size: 12px;
-  line-height: 18px;
+  font-size: calc(12px * var(--beilv));
+  line-height: calc(18px * var(--beilv));
   color: white;
   background-color: #31878c94;
 }
diff --git a/src/views/QualityManager/components/TechyAnalysisBar.vue b/src/views/QualityManager/components/TechyAnalysisBar.vue
index 7096507..67e363c 100644
--- a/src/views/QualityManager/components/TechyAnalysisBar.vue
+++ b/src/views/QualityManager/components/TechyAnalysisBar.vue
@@ -57,7 +57,7 @@ export default {
 
 .quality-analysis-bar {
   border-radius: 2px;
-  padding: 2px;
+  padding: calc(2px * var(--beilv));
   display: flex;
 }
 
@@ -77,23 +77,23 @@ export default {
 .placeholder-block-wrapper {
   flex-grow: 1;
   overflow: hidden;
-  min-width: 32px;
+  min-width: calc(32px * var(--beilv));
   position: relative;
   display: flex;
   justify-content: center;
 }
 
 .placeholder-block-wrapper > div {
-  width: 300px;
+  width: calc(300px * var(--beilv));
   position: absolute;
   top: 0;
   right: 0;
 }
 
 .placeholder-block {
-  width: 20px;
-  height: 20px;
-  margin-left: 3px;
+  width: calc(20px * var(--beilv));
+  height: calc(20px * var(--beilv));
+  margin-left: calc(3px * var(--beilv));
 }
 
 .block-green-5 {
@@ -178,9 +178,9 @@ export default {
   overflow: hidden;
   color: white;
   display: inline-block;
-  padding: 3px 8px;
-  font-size: 14px;
-  line-height: 12px;
+  padding: calc(3px * var(--beilv)) calc(8px * var(--beilv));
+  font-size: calc(14px * var(--beilv));
+  line-height: calc(12px * var(--beilv));
 }
 
 .quality-analysis-bar__amount {
@@ -189,8 +189,8 @@ export default {
   /* min-width: 35%; */
   width: 35%;
   text-align: left;
-  padding: 3px 0;
-  font-size: 14px;
-  line-height: 12px;
+  padding: calc(3px * var(--beilv)) 0;
+  font-size: calc(14px * var(--beilv));;
+  line-height: calc(12px * var(--beilv));;
 }
 </style>
diff --git a/src/views/QualityManager/components/TechyAnalysisHeader.vue b/src/views/QualityManager/components/TechyAnalysisHeader.vue
index ab54dd0..1cb2b71 100644
--- a/src/views/QualityManager/components/TechyAnalysisHeader.vue
+++ b/src/views/QualityManager/components/TechyAnalysisHeader.vue
@@ -1,116 +1,112 @@
 <template>
   <div class="techy-analysis-header">
-    <span v-html="titleLeftSVG" />
+    <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 v-html="titleRightSVG" />
+    <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>
 </template>
 
 <script>
-const titleLeftSVG = `<svg
-                    width="56px"
-                    height="13px"
-                    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>`
-const titleRightSVG = `<svg
-                    width="56px"
-                    height="13px"
-                    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>`
-
 export default {
   name: 'TechyAnalysisHeader',
   data() {
-    return { titleLeftSVG, titleRightSVG }
+    return {}
   }
 }
 </script>
@@ -118,12 +114,18 @@ export default {
 <style scoped>
 .techy-analysis-header {
   text-align: center;
-  margin-bottom: 16px;
+  margin-bottom: calc(16px * var(--beilv));
 }
 
 .techy-analysis-header__title {
   color: #01cfcc;
-  font-size: 15px;
-  line-height: 18px;
+  font-size: calc(15px * var(--beilv));
+  line-height: calc(18px * var(--beilv));
+}
+
+.top-icon {
+  display: inline-block;
+  width: calc(56px * var(--beilv));
+  height: calc(13px * var(--beilv));
 }
 </style>
diff --git a/src/views/QualityManager/components/TechyBox.vue b/src/views/QualityManager/components/TechyBox.vue
index 58db68d..683a787 100644
--- a/src/views/QualityManager/components/TechyBox.vue
+++ b/src/views/QualityManager/components/TechyBox.vue
@@ -11,7 +11,7 @@ export default {}
 <style scoped>
 .techy-box {
   background: transparent;
-  box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5);
+  box-shadow: inset 0 0 calc(17px * var(--beilv)) 0 rgba(255, 255, 255, 0.2);
   display: inline-block;
   height: 100%;
   width: 100%;