From e9ac894a4ad2f7790e1a35ff081c20263d7b265b Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Wed, 23 Nov 2022 16:57:30 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BA=A7=E7=BA=BF=E6=88=90=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/RightContentProductRate.vue    | 456 ++++++++----------
 .../RightContentRealtimeProduction.vue        |   1 -
 src/views/3DOverview/index.vue                |   3 +-
 3 files changed, 209 insertions(+), 251 deletions(-)

diff --git a/src/views/3DOverview/components/RightContentProductRate.vue b/src/views/3DOverview/components/RightContentProductRate.vue
index ec06e40..0f7bf3c 100644
--- a/src/views/3DOverview/components/RightContentProductRate.vue
+++ b/src/views/3DOverview/components/RightContentProductRate.vue
@@ -1,276 +1,234 @@
 <template>
-  <div :id="id" ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
+  <div ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
 </template>
 
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 
+class ChartOption {
+  constructor() {
+    // const wenduData = Array(12)
+    //   .fill(1)
+    //   .map(_ => Random.integer(30, 100))
+    // const dianyaData = Array(12)
+    //   .fill(1)
+    //   .map(_ => Random.integer(30, 100))
+    // const dianliuData = Array(12)
+    //   .fill(1)
+    //   .map(_ => Random.integer(30, 100))
+
+    this.color = ['#1A99FF', '#E02094', '#F0D63C']
+
+    this.legend = {
+      top: 24,
+      right: 40,
+      itemWidth: 18,
+      itemHeight: 12,
+      textStyle: {
+        fontSize: 12,
+        color: '#fffc'
+      }
+    }
+
+    this.grid = {
+      top: 72,
+      left: 26,
+      right: 24,
+      bottom: 16,
+      containLabel: true
+    }
+
+    this.tooltip = {
+      show: true,
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 12
+      },
+      axisPointer: {
+        type: 'line'
+      },
+      formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
+    }
+
+    this.xAxis = {
+      type: 'category',
+      boundaryGap: false,
+      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      data: Array(12)
+        .fill(0)
+        .map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        fontSize: 12,
+        color: '#fffa'
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#fff3'
+        }
+      }
+    }
+    this.yAxis = {
+      type: 'value',
+      name: '成品率              ',
+      min: 'dataMin',
+      splitNumber: 3,
+      nameTextStyle: {
+        color: '#fff9',
+        fontSize: 12
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        fontSize: 12,
+        color: '#fffa',
+        formatter: '{value} %'
+      },
+      axisTick: { show: false },
+      splitLine: {
+        lineStyle: {
+          color: '#fff3'
+        }
+      }
+    }
+
+    this.series = [
+      {
+        name: 'A',
+        type: 'line',
+        symbol: 'none',
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#59CBE866' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        data: Array(12)
+          .fill(0)
+          .map(_ => {
+            let v = Math.floor(Math.random() * 100)
+            while (v < 80) {
+              v = Math.floor(Math.random() * 100)
+            }
+            return v
+          })
+      },
+      {
+        name: 'B',
+        type: 'line',
+        symbol: 'none',
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#E93CAC66' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        data: Array(12)
+          .fill(0)
+          .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: 'ProductRateLineChart',
   mixins: [resize],
-  props: {
-    id: {
-      type: String,
-      default: 'default-id'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
-    }
-  },
+  props: {},
   data() {
     return {
       chart: null,
-      option: {
-        color: ['#59CBE8', '#FF7345', '#E93CAC', '#9452FF', '#6A6E87', '#52FFF1'],
-        grid: {
-          top: '40%',
-          left: '5%',
-          right: '6%',
-          bottom: '10%',
-          containLabel: true
-        },
-        tooltip: {
-          show: true,
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
-        },
-        legend: {
-          width: '72%',
-          top: '20%',
-          right: '6%',
-          itemWidth: 12,
-          itemHeight: 8,
-          textStyle: {
-            color: '#fffc'
-          }
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          data: Array(12)
-            .fill(0)
-            .map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            fontSize: 10,
-            color: '#fffa'
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#fff3'
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: '成品率              ',
-          min: 'dataMin',
-          splitNumber: 3,
-          nameTextStyle: {
-            color: '#fffc',
-            align: 'right',
-            verticalAlign: 'bottom',
-            fontSize: 12
-          },
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            fontSize: 11,
-            color: '#fffa',
-            formatter: '{value} %'
-          },
-          axisTick: { show: false },
-          splitLine: {
-            lineStyle: {
-              color: '#fff3'
-            }
-          }
-        },
-        series: [
-          {
-            name: 'A',
-            type: 'line',
-            symbol: 'none',
-            areaStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#59CBE866' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            data: Array(12)
-              .fill(0)
-              .map(_ => {
-                let v = Math.floor(Math.random() * 100)
-                while (v < 80) {
-                  v = Math.floor(Math.random() * 100)
-                }
-                return v
-              })
-          },
-          {
-            name: 'B',
-            type: 'line',
-            symbol: 'none',
-            areaStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#E93CAC66' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'transparent' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            },
-            data: Array(12)
-              .fill(0)
-              .map(_ => {
-                let v = Math.floor(Math.random() * 100)
-                while (v < 80) {
-                  v = Math.floor(Math.random() * 100)
-                }
-                return v
-              })
-          }
-          // {
-          //   name: '产线3',
-          //   type: 'line',
-          //   symbol: 'none',
-          //   areaStyle: {
-          //     color: {
-          //       type: 'linear',
-          //       x: 0,
-          //       y: 0,
-          //       x2: 0,
-          //       y2: 1,
-          //       colorStops: [
-          //         {
-          //           offset: 0,
-          //           color: '#FF734566' // 0% 处的颜色
-          //         },
-          //         {
-          //           offset: 1,
-          //           color: 'transparent' // 100% 处的颜色
-          //         }
-          //       ],
-          //       global: false // 缺省为 false
-          //     }
-          //   },
-          //   data: Array(12)
-          //     .fill(0)
-          //     .map(_ => Math.floor(Math.random() * 100))
-          // },
-          // {
-          //   name: '产线4',
-          //   type: 'line',
-          //   symbol: 'none',
-          //   areaStyle: {
-          //     color: {
-          //       type: 'linear',
-          //       x: 0,
-          //       y: 0,
-          //       x2: 0,
-          //       y2: 1,
-          //       colorStops: [
-          //         {
-          //           offset: 0,
-          //           color: '#9452FF66' // 0% 处的颜色
-          //         },
-          //         {
-          //           offset: 1,
-          //           color: 'transparent' // 100% 处的颜色
-          //         }
-          //       ],
-          //       global: false // 缺省为 false
-          //     }
-          //   },
-          //   data: Array(12)
-          //     .fill(0)
-          //     .map(_ => Math.floor(Math.random() * 100))
-          // },
-          // {
-          //   name: '产线5',
-          //   type: 'line',
-          //   symbol: 'none',
-          //   areaStyle: {
-          //     color: {
-          //       type: 'linear',
-          //       x: 0,
-          //       y: 0,
-          //       x2: 0,
-          //       y2: 1,
-          //       colorStops: [
-          //         {
-          //           offset: 0,
-          //           color: '#6A6E8766' // 0% 处的颜色
-          //         },
-          //         {
-          //           offset: 1,
-          //           color: 'transparent' // 100% 处的颜色
-          //         }
-          //       ],
-          //       global: false // 缺省为 false
-          //     }
-          //   },
-          //   data: Array(12)
-          //     .fill(0)
-          //     .map(_ => Math.floor(Math.random() * 100))
-          // }
-        ]
-      }
+      option: null
     }
   },
   mounted() {
     this.$nextTick(() => {
       if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
-      this.chart.setOption(this.option)
+      this.setChartOption()
     })
   },
   beforeDestroy() {
     if (this.chart) this.chart.dispose()
     this.chart = null
   },
-  methods: {}
+  methods: {
+    calcSize(num) {
+      const beilv = document.documentElement.style.getPropertyValue('--beilv')
+      return num * beilv
+    },
+    setChartOption() {
+      let chartOption = new ChartOption()
+      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
+    }
+  }
 }
 </script>
 <style scoped>
diff --git a/src/views/3DOverview/components/RightContentRealtimeProduction.vue b/src/views/3DOverview/components/RightContentRealtimeProduction.vue
index 78b72b9..63c8e2f 100644
--- a/src/views/3DOverview/components/RightContentRealtimeProduction.vue
+++ b/src/views/3DOverview/components/RightContentRealtimeProduction.vue
@@ -16,7 +16,6 @@
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 import { Random } from 'mockjs'
-import { debounce } from '@/utils'
 
 class ChartOption {
   constructor() {
diff --git a/src/views/3DOverview/index.vue b/src/views/3DOverview/index.vue
index cd70f2f..311c1d0 100644
--- a/src/views/3DOverview/index.vue
+++ b/src/views/3DOverview/index.vue
@@ -268,7 +268,8 @@ export default {
 }
 /* 产线成品率 */
 .production {
-  height: calc(220px * var(--beilv));
+  height: calc(200px * var(--beilv));
+  flex: 1 0;
   position: relative;
 }