update 质量管理 techy-analysis-header

src/views/QualityManager/HomePage.vue

@@ -138,6 +138,7 @@
                       </span>
                       <pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
                     </div>
+
                     <div class="pl-select">
                       <span
                         :class="{ 'pl-select__active': plMode === 'a' }"
@@ -182,30 +183,34 @@
                 </div>
                 <div class="grow">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
-                    <techy-analysis-header>产品成品率</techy-analysis-header>
+                    <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>
                     <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                       <new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
                     </div>
-                    <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>
                   </techy-box>
                 </div>
               </div>
@@ -581,11 +586,15 @@ export default {
 .pl-select,
 .date-select {
   position: absolute;
-  top: calc(16px * var(--beilv));
-  right: calc(22px * var(--beilv));
+  top: 0;
+  right: 0;
+  /* top: calc(16px * var(--beilv)); */
+  /* right: calc(22px * var(--beilv)); */
   border-radius: calc(2px * var(--beilv));
   overflow: hidden;
   display: flex;
+  align-items: center;
+  height: 100%;
   cursor: pointer;
 }
 
@@ -613,4 +622,14 @@ export default {
 .width-222 {
   width: calc(375px * var(--beilv));
 }
+
+@media all and (max-width: 2000px) {
+  .production-rate {
+    /* text-align: left; */
+  }
+
+  .production-rate >>> .top-icon:last-of-type {
+    display: none;
+  }
+}
 </style>

src/views/QualityManager/components/TechyAnalysisHeader.vue

@@ -55,7 +55,7 @@
               </g>
             </svg>
           </span>
-          <span class="techy-analysis-header__title" style="display: inline-block; transform: skewX(-32deg); ">
+          <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); ">
@@ -219,6 +219,8 @@
         </svg>
       </span>
     </template>
+
+    <slot name="dateSelect" />
   </div>
 </template>
 
@@ -245,6 +247,9 @@ export default {
 .techy-analysis-header {
   text-align: center;
   margin-bottom: calc(16px * var(--beilv));
+  position: relative;
+  white-space: nowrap;
+  z-index: 1;
 }
 
 .techy-analysis-header__title {
@@ -260,11 +265,19 @@ export default {
   margin-bottom: calc(2px * var(--beilv));
 }
 
+.legend-right {
+  display: flex;
+  gap: calc(8px * var(--beilv));
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .legend-item {
   font-size: calc(10px * var(--beilv));
   line-height: 1.5;
   color: #dff1fe;
-  display: inline-block;
+  display: flex;
+  align-items: center;
 }
 
 .legend-item::before {

src/views/QualityManager/components/charts/newLineStack.vue

@@ -36,7 +36,7 @@ export default {
           }
         },
         grid: {
-          top: '25%',
+          top: 56,
           left: '2%',
           right: '5%',
           bottom: '5%',
@@ -66,14 +66,15 @@ export default {
 
         yAxis: [
           {
-            name: '成品率',
+            name: '成品率            ',
             type: 'value',
             min: 'dataMin',
             splitNumber: 4,
             nameTextStyle: {
               color: 'rgba(255,255,255,0.7)',
-              fontSize: 12,
-              align: 'right'
+              fontSize: 10,
+              align: 'left',
+              verticalAlign: 'bottom'
             },
             axisLine: {
               lineStyle: {