From f37dfbb328c7494199c889797a7605d832118561 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Thu, 24 Nov 2022 10:28:11 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BA=A7=E5=93=81=E6=88=90=E5=93=81?=
 =?UTF-8?q?=E7=8E=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/QualityManager/HomePage.vue         |  33 +-
 .../components/TechyAnalysisHeader.vue        | 126 +++-
 .../components/charts/newLineStack.vue        | 568 ++++++++----------
 3 files changed, 389 insertions(+), 338 deletions(-)

diff --git a/src/views/QualityManager/HomePage.vue b/src/views/QualityManager/HomePage.vue
index d360bba..455a33b 100644
--- a/src/views/QualityManager/HomePage.vue
+++ b/src/views/QualityManager/HomePage.vue
@@ -186,7 +186,7 @@
                 </div>
                 <div class="grow">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
-                    <techy-analysis-header class="production-rate">
+                    <techy-analysis-header type="production-rate" class="production-rate">
                       产品成品率
                       <template v-slot:dateSelect>
                         <div class="date-select">
@@ -627,13 +627,38 @@ export default {
   width: calc(375px * var(--beilv));
 }
 
-@media all and (max-width: 2040px) {
+/* @media all and (max-width: 1680px) {
   .production-rate {
-    /* text-align: left; */
+    text-align: center;
   }
 
-  .production-rate >>> .top-icon:last-of-type {
+  .production-rate >>> .top-icon,
+  .production-rate >>> .date-select {
     display: none;
   }
 }
+
+@media all and (min-width: 1680px) {
+  .production-rate {
+    text-align: left;
+  }
+
+  .production-rate >>> .top-icon {
+    display: none;
+  }
+}
+
+@media all and (min-width: 2048px) {
+  .production-rate {
+    text-align: center;
+  }
+
+  .production-rate >>> .date-select > span {
+    background-color: #568588;
+  }
+
+  .production-rate >>> .date-select > span.date-select__active {
+    background-color: #42bbb7;
+  }
+} */
 </style>
diff --git a/src/views/QualityManager/components/TechyAnalysisHeader.vue b/src/views/QualityManager/components/TechyAnalysisHeader.vue
index 8b2eb85..d54c7b6 100644
--- a/src/views/QualityManager/components/TechyAnalysisHeader.vue
+++ b/src/views/QualityManager/components/TechyAnalysisHeader.vue
@@ -55,7 +55,131 @@
               </g>
             </svg>
           </span>
-          <span class="techy-analysis-header__title" style="display: inline-block; transform: translateX(-4px) 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); ">
+            <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 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); ">
diff --git a/src/views/QualityManager/components/charts/newLineStack.vue b/src/views/QualityManager/components/charts/newLineStack.vue
index b9531bf..9da6a59 100644
--- a/src/views/QualityManager/components/charts/newLineStack.vue
+++ b/src/views/QualityManager/components/charts/newLineStack.vue
@@ -6,6 +6,230 @@
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 
+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.grid = {
+      top: 64,
+      left: 12,
+      right: 28,
+      bottom: 20,
+      containLabel: true
+    }
+
+    this.tooltip = {
+      trigger: 'axis',
+      extraCssText: 'width: 180px !important; ',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    }
+
+    this.xAxis = {
+      type: 'category',
+      boundaryGap: false,
+      axisLine: {
+        lineStyle: {
+          color: '#fff3'
+        }
+      },
+      axisTick: { show: false },
+      axisLabel: {
+        textStyle: {
+          fontSize: 12,
+          color: '#fff8' //
+        },
+        margin: 12
+      },
+      data:
+        this.mode === 'month'
+          ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+          : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+    }
+
+    this.yAxis = [
+      {
+        name: '成品率          ',
+        type: 'value',
+        min: 'dataMin',
+        splitNumber: 4,
+        nameTextStyle: {
+          color: 'rgba(255,255,255,0.7)',
+          fontSize: 12,
+          align: 'left',
+          verticalAlign: 'bottom'
+        },
+        axisLine: {
+          lineStyle: {
+            type: 'solid',
+            color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
+            width: '1' // 坐标线的宽度
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          formatter: '{value} %',
+          textStyle: {
+            fontSize: 12,
+            color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: 'rgba(119, 255, 242, 0.2)'
+          }
+        }
+      }
+    ]
+
+    this.series = [
+      {
+        name: 'A1下片机',
+        type: 'line',
+        symbol: 'none',
+        areaStyle: {
+          // color: 'rgba(50,145,152,0.5)'
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#DDB11266' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data:
+          this.mode === 'month'
+            ? Array(30)
+                .fill(1)
+                .map(_ => {
+                  let v = Math.floor(Math.random() * 100)
+                  while (v < 80) {
+                    v = Math.floor(Math.random() * 100)
+                  }
+                  return v
+                })
+            : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+                let v = Math.floor(Math.random() * 100)
+                while (v < 80) {
+                  v = Math.floor(Math.random() * 100)
+                }
+                return v
+              })
+      },
+      {
+        name: '磨边机',
+        type: 'line',
+        symbol: 'none',
+
+        areaStyle: {
+          // color: 'rgba(50,145,152,0.5)'
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#1A99FFCC' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data:
+          this.mode === 'month'
+            ? Array(30)
+                .fill(1)
+                .map(_ => {
+                  let v = Math.floor(Math.random() * 100)
+                  while (v < 80) {
+                    v = Math.floor(Math.random() * 100)
+                  }
+                  return v
+                })
+            : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+                let v = Math.floor(Math.random() * 100)
+                while (v < 80) {
+                  v = Math.floor(Math.random() * 100)
+                }
+                return v
+              })
+      }
+    ]
+  }
+
+  get option() {
+    return this
+  }
+
+  optionFilter(option, calcSize = () => {} /** callback */) {
+    let newOption
+    if (Array.isArray(option)) {
+      newOption = []
+      option.forEach(item => {
+        newOption.push(this.optionFilter(item, calcSize))
+      })
+      return newOption
+    } else if (typeof option === 'object') {
+      newOption = {}
+      for (const key in option) {
+        if (key === 'colorStops') newOption[key] = option[key]
+        else if (
+          typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
+          ['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
+        ) {
+          newOption[key] = calcSize(option[key])
+        } else newOption[key] = this.optionFilter(option[key], calcSize)
+      }
+      return newOption
+    } else {
+      newOption = calcSize(option)
+      return option
+    }
+  }
+}
+
 export default {
   name: 'PlFaultAnalysisPieChart',
   mixins: [resize],
@@ -23,329 +247,7 @@ export default {
   data() {
     return {
       chart: null,
-      configs: {
-        color: ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6'],
-        tooltip: {
-          trigger: 'axis',
-          extraCssText: 'width: 180px !important; ',
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: '#6a7985'
-            }
-          }
-        },
-        grid: {
-          top: 56,
-          left: '2%',
-          right: '5%',
-          bottom: '5%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          axisLine: {
-            lineStyle: {
-              color: '#ffffff66'
-            }
-          },
-          axisTick: { show: false },
-          axisLabel: {
-            textStyle: {
-              fontSize: 10,
-              color: '#fff8' //
-            },
-            margin: 12
-          },
-          data:
-            this.mode === 'month'
-              ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
-              : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-        },
-
-        yAxis: [
-          {
-            name: '成品率            ',
-            type: 'value',
-            min: 'dataMin',
-            splitNumber: 4,
-            nameTextStyle: {
-              color: 'rgba(255,255,255,0.7)',
-              fontSize: 10,
-              align: 'left',
-              verticalAlign: 'bottom'
-            },
-            axisLine: {
-              lineStyle: {
-                type: 'solid',
-                color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
-                width: '1' // 坐标线的宽度
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              formatter: '{value} %',
-              textStyle: {
-                color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-              }
-            },
-            splitLine: {
-              lineStyle: {
-                type: 'dotted',
-                color: 'rgba(119, 255, 242, 0.2)'
-              }
-            }
-          }
-        ],
-        series: [
-          {
-            name: 'A1下片机',
-            type: 'line',
-            symbol: 'none',
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#FB418C66' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data:
-              this.mode === 'month'
-                ? Array(30)
-                    .fill(1)
-                    .map(_ => {
-                      let v = Math.floor(Math.random() * 100)
-                      while (v < 80) {
-                        v = Math.floor(Math.random() * 100)
-                      }
-                      return v
-                    })
-                : [11, 199, 140, 63, 185, 5, 78].map(_ => {
-                    let v = Math.floor(Math.random() * 100)
-                    while (v < 80) {
-                      v = Math.floor(Math.random() * 100)
-                    }
-                    return v
-                  })
-          },
-          {
-            name: '磨边机',
-            type: 'line',
-            symbol: 'none',
-
-            areaStyle: {
-              // color: 'rgba(50,145,152,0.5)'
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#DDB11266' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data:
-              this.mode === 'month'
-                ? Array(30)
-                    .fill(1)
-                    .map(_ => {
-                      let v = Math.floor(Math.random() * 100)
-                      while (v < 80) {
-                        v = Math.floor(Math.random() * 100)
-                      }
-                      return v
-                    })
-                : [11, 199, 140, 63, 185, 5, 78].map(_ => {
-                    let v = Math.floor(Math.random() * 100)
-                    while (v < 80) {
-                      v = Math.floor(Math.random() * 100)
-                    }
-                    return v
-                  })
-          }
-          // {
-          //   name: '镀膜机',
-          //   type: 'line',
-          //   symbol: 'none',
-
-          //   areaStyle: {
-          //     // color: 'rgba(50,145,152,0.5)'
-          //     color: {
-          //       type: 'linear',
-          //       x: 0,
-          //       y: 0,
-          //       x2: 0,
-          //       y2: 1,
-          //       colorStops: [
-          //         {
-          //           offset: 0,
-          //           color: '#1A99FF66' // 0% 处的颜色
-          //         },
-          //         {
-          //           offset: 1,
-          //           color: 'transparent' // 100% 处的颜色
-          //         }
-          //       ],
-          //       global: false // 缺省为 false
-          //     }
-          //   },
-          //   emphasis: {
-          //     focus: 'series'
-          //   },
-          //   data:
-          //     this.mode === 'month'
-          //       ? Array(30)
-          //           .fill(1)
-          //           .map(_ => {
-          //             let v = Math.floor(Math.random() * 100)
-          //             while (v < 80) {
-          //               v = Math.floor(Math.random() * 100)
-          //             }
-          //             return v
-          //           })
-          //       : [11, 199, 140, 63, 185, 5, 78].map(_ => {
-          //           let v = Math.floor(Math.random() * 100)
-          //           while (v < 80) {
-          //             v = Math.floor(Math.random() * 100)
-          //           }
-          //           return v
-          //         })
-          // },
-          // {
-          //   name: '包装纸',
-          //   type: 'line',
-          //   symbol: 'none',
-
-          //   areaStyle: {
-          //     // color: 'rgba(50,145,152,0.5)'
-          //     color: {
-          //       type: 'linear',
-          //       x: 0,
-          //       y: 0,
-          //       x2: 0,
-          //       y2: 1,
-          //       colorStops: [
-          //         {
-          //           offset: 0,
-          //           color: '#A691FF66' // 0% 处的颜色
-          //         },
-          //         {
-          //           offset: 1,
-          //           color: 'transparent' // 100% 处的颜色
-          //         }
-          //       ],
-          //       global: false // 缺省为 false
-          //     }
-          //   },
-          //   emphasis: {
-          //     focus: 'series'
-          //   },
-          //   data:
-          //     this.mode === 'month'
-          //       ? Array(30)
-          //           .fill(1)
-          //           .map(_ => {
-          //             let v = Math.floor(Math.random() * 100)
-          //             while (v < 80) {
-          //               v = Math.floor(Math.random() * 100)
-          //             }
-          //             return v
-          //           })
-          //       : [11, 199, 140, 63, 185, 5, 78].map(_ => {
-          //           let v = Math.floor(Math.random() * 100)
-          //           while (v < 80) {
-          //             v = Math.floor(Math.random() * 100)
-          //           }
-          //           return v
-          //         })
-          // },
-          // {
-          //   name: '丝印',
-          //   type: 'line',
-          //   symbol: 'none',
-
-          //   label: {
-          //     show: true,
-          //     position: 'top'
-          //   },
-          //   areaStyle: {
-          //     // color: 'rgba(50,145,152,0.5)'
-          //     color: {
-          //       type: 'linear',
-          //       x: 0,
-          //       y: 0,
-          //       x2: 0,
-          //       y2: 1,
-          //       colorStops: [
-          //         {
-          //           offset: 0,
-          //           color: '#49FBD666' // 0% 处的颜色
-          //         },
-          //         {
-          //           offset: 1,
-          //           color: 'transparent' // 100% 处的颜色
-          //         }
-          //       ],
-          //       global: false // 缺省为 false
-          //     }
-          //   },
-          //   emphasis: {
-          //     focus: 'series'
-          //   },
-          //   data:
-          //     this.mode === 'month'
-          //       ? Array(30)
-          //           .fill(1)
-          //           .map(_ => {
-          //             let v = Math.floor(Math.random() * 100)
-          //             while (v < 80) {
-          //               v = Math.floor(Math.random() * 100)
-          //             }
-          //             return v
-          //           })
-          //       : [11, 199, 140, 63, 185, 5, 78].map(_ => {
-          //           let v = Math.floor(Math.random() * 100)
-          //           while (v < 80) {
-          //             v = Math.floor(Math.random() * 100)
-          //           }
-          //           return v
-          //         })
-          // }
-        ]
-      }
+      configs: null
     }
   },
 
@@ -356,18 +258,9 @@ export default {
   },
 
   mounted() {
-    window.addEventListener('resize', function() {
-      if (this.chart) {
-        this.chart.resize()
-      }
-    })
-
     this.$nextTick(() => {
-      // if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
       if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
-
-      this.chart.setOption(this.configs)
-      this.chart.resize()
+      this.setChartOption()
     })
   },
   methods: {
@@ -401,6 +294,15 @@ export default {
       })
 
       if (this.chart) this.chart.setOption(this.configs)
+    },
+    calcSize(num) {
+      const beilv = document.documentElement.style.getPropertyValue('--beilv')
+      return num * beilv
+    },
+    setChartOption() {
+      let chartOption = new ChartOption()
+      this.configs = chartOption.optionFilter(chartOption.option, this.calcSize)
+      this.chart.setOption(this.configs)
     }
   }
 }