update 缺陷分析

src/views/3DOverview/components/DianChart.vue

@@ -15,19 +15,7 @@ export default {
   props: {
     id: {
       type: String,
-      default: 'default-dian-id'
+      default: 'default-dian-line-chart'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
     }
   },
   data() {
@@ -69,29 +57,35 @@ export default {
       option: {
         color: colors,
         legend: {
-          top: 4,
+          top: 16,
-          right: 50,
+          right: 64,
           itemWidth: 8,
           itemHeight: 8,
           textStyle: {
             color: '#fff9',
-            fontSize: 8
+            fontSize: 12
           }
           // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
         },
         grid: {
-          top: 32,
+          top: 48,
           left: 64,
-          bottom: 28
+          bottom: 36
         },
         tooltip: {
           show: true,
           trigger: 'axis',
           axisPointer: {
             type: 'line',
-            axis: 'x'
+            axis: 'x',
+            lineStyle: {
+              color: '#41888F90',
+              shadowColor: '#41888F',
+              shadowBlur: 10,
+              width: 2
+            }
           },
-          extraCssText: 'width: 152px !important; height: 100px !important;'
+          extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
         },
         xAxis: [
           {
@@ -99,7 +93,8 @@ export default {
             data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
             axisTick: { show: false },
             axisLabel: {
-              color: '#fff9'
+              color: '#fff9',
+              fontSize: 14
             },
             axisLine: {
               lineStyle: {
@@ -110,13 +105,13 @@ export default {
         ],
         yAxis: [
           {
-            name: '电流/A',
+            name: '电流/A    ',
-            nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
+            nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
             type: 'value',
-            splitNumber: 3,
+            splitNumber: 4,
             onZero: true,
             position: 'left',
-            offset: 40,
+            offset: 32,
             axisTick: { show: false },
             axisLine: {
               show: true,
@@ -127,7 +122,7 @@ export default {
             },
             axisLabel: {
               color: '#fff9',
-              fontSize: 10
+              fontSize: 12
             },
             splitLine: {
               show: true,
@@ -138,10 +133,10 @@ export default {
             }
           },
           {
-            name: '电压/V',
+            name: '  电压/V  ',
-            nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
+            nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
             type: 'value',
-            splitNumber: 3,
+            splitNumber: 4,
             axisTick: { show: false },
             onZero: true,
             position: 'left',
@@ -155,7 +150,7 @@ export default {
             },
             axisLabel: {
               color: '#fff9',
-              fontSize: 10
+              fontSize: 12
             },
             splitLine: {
               show: true,
@@ -166,8 +161,8 @@ export default {
             }
           },
           {
-            name: '温度',
+            name: '        温度',
-            nameTextStyle: { align: 'left', color: '#fff9', fontSize: 9 },
+            nameTextStyle: { align: 'left', color: '#fff9', fontSize: 12 },
             axisTick: { show: false },
             axisLine: {
               show: false,
@@ -177,7 +172,7 @@ export default {
               }
             },
             type: 'value',
-            splitNumber: 3,
+            splitNumber: 4,
             splitLine: {
               show: true,
               lineStyle: {
@@ -187,7 +182,7 @@ export default {
             },
             axisLabel: {
               color: '#fff9',
-              fontSize: 10
+              fontSize: 12
             }
           }
         ],
@@ -251,7 +246,9 @@ export default {
     if (this.chart) this.chart.dispose()
     this.chart = null
   },
-  methods: {}
+  methods: {
+    initOption(legendSize, labelSize, axisLabelSize, splitLineNumber) {}
+  }
 }
 </script>
 <style scoped>

src/views/3DOverview/components/FadianChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="id" ref="techy-line-chart" class="techy-chart" />
+  <div id="techy-line-chart" ref="techy-line-chart" class="techy-chart" />
 </template>
 
 <script>
@@ -13,22 +13,7 @@ export default {
   inject: ['resizeStatus'],
   /** End Fn.1 */
   props: {
-    id: {
+
-      type: String,
-      default: 'default-fadian-id'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
-    }
   },
   data() {
     return {
@@ -46,20 +31,20 @@ export default {
         color: ['#E02094', '#F0D63C', '#1A99FF'],
         grid: {
           top: '30%',
-          left: 0,
+          left: '120%',
           right: '5%',
           bottom: 0,
           containLabel: true
         },
-        tooltip: {
+        // tooltip: {
-          show: true,
+        //   show: true,
-          trigger: 'axis',
+        //   trigger: 'axis',
-          axisPointer: {
+        //   axisPointer: {
-            type: 'line',
+        //     type: 'line',
-            axis: 'x'
+        //     axis: 'x'
-          },
+        //   },
-          extraCssText: 'width: 152px !important; height: 100px !important;'
+        //   extraCssText: 'position: absolute; width: 152px !important; height: 100px !important;'
-        },
+        // },
         xAxis: {
           type: 'category',
           boundaryGap: false,
@@ -71,7 +56,7 @@ export default {
             show: false
           },
           axisLabel: {
-            fontSize: 8,
+            fontSize: 10,
             color: '#fffa'
           },
           axisLine: {
@@ -92,7 +77,7 @@ export default {
             show: false
           },
           axisLabel: {
-            fontSize: 8,
+            fontSize: 10,
             color: '#fffa'
             // formatter: '{value} %'
           },

src/views/3DOverview/components/LeftContentEquipmentCheck.vue

@@ -100,7 +100,7 @@ export default {
 }
 
 .left-content-equipment-check {
-  height: calc(100% - 32px);
+  height: calc(100% - calc(32px * var(--beilv)));
   display: flex;
   gap: calc(100vmin / 1920 * 36);
   overflow: hidden;

src/views/3DOverview/components/LeftContentMonitor.vue

@@ -27,7 +27,7 @@ export default {
 .left-content-monitoring {
   flex: 1;
   width: 100%;
-  height: calc(100% - 32px);
+  height: calc(100% - calc(32px * var(--beilv)));
   display: flex;
   gap: calc(100vw / 1920 * 16);
 }

src/views/3DOverview/components/LeftContentOrder.vue

@@ -15,24 +15,16 @@ const ProcessCircle = {
       default: () => ({})
     }
   },
-  mounted() {
-    console.log('finished', this.injectData.finished)
-  },
   methods: {},
   render: function(h) {
     return h('el-progress', {
-      class: {
-        'lb-progress-bar': true
-      },
       props: {
         type: 'circle',
         percentage: this.injectData.finished,
         width: 14,
         'stroke-width': 2,
-        color: '#47FF27'
+        color: '#47FF27',
-      },
+        'define-back-color': '#ffffff' // 背景色, 该选项不起作用，可能和 element ui 版本相关
-      style: {
-        color: 'blue'
       }
     })
   }
@@ -99,4 +91,8 @@ export default {
   left: calc(-2px * var(--beilv));
   color: #ffffffb3 !important;
 }
+
+.left-content-order >>> .el-progress-circle__track {
+  stroke: #283851;
+}
 </style>

src/views/3DOverview/components/LeftContentPublicConsume.vue

@@ -73,8 +73,8 @@
           <img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
           <span>电</span>
         </div>
-        <div style="height: 100%; flex: 1;">
+        <div style="height: 100%; flex: 1; overflow: hidden">
-          <DianChart />
+          <DianChart id="dian" key="dian" />
         </div>
       </TechyBox>
     </div>
@@ -85,9 +85,9 @@
           <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
           <span>发电</span>
         </div>
-        <div style="height: 100%; flex: 1;  ">
+        <div style="height: 100%; flex: 1; overflow: hidden">
           <!-- <FadianChart /> -->
-          <DianChart />
+          <DianChart id="fa-dian" key="fa-dian" />
         </div>
       </TechyBox>
     </div>
@@ -116,7 +116,7 @@ export default {
 .public-consume__inner {
   overflow: hidden;
   overflow-y: auto;
-  height: calc(100% - 32px);
+  height: calc(100% - calc(32px * var(--beilv)));
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -161,7 +161,7 @@ export default {
   flex-direction: column;
   font-size: calc(12px * var(--beilv));
   color: #fff9;
-  height: 10px;
+  height: calc(48px * var(--beilv));
   flex: 1 1;
   gap: calc(4px * var(--beilv));
 }

src/views/3DOverview/components/RightContentAlert.vue

@@ -114,7 +114,7 @@ export default {
 }
 
 .right-content-alert {
-  height: calc(100% - 32px);
+  height: calc(100% - calc(32px * var(--beilv)));
   display: flex;
   gap: calc(100vw / 1920 * 16);
   overflow: hidden;

src/views/3DOverview/components/RightContentFaultAnalysis.vue

@@ -106,8 +106,8 @@ export default {
       configs: {
         title: {
           textAlign: 'center',
-          left: '64%',
+          left: '67%',
-          top: '48%',
+          top: '50%',
           text: demoData.reduce((prev, curr) => prev + curr.value, 0),
           textStyle: {
             color: '#fff',
@@ -210,7 +210,7 @@ export default {
           {
             name: 'PieForm',
             type: 'pie',
-            center: ['65%', '60%'],
+            center: ['68%', '61%'],
             radius: ['42%', '60%'],
             avoidLabelOverlap: true,
             label: {
@@ -301,7 +301,8 @@ export default {
       this.configs.title.textStyle.fontSize = titleSize
       this.configs.title.subtextStyle.fontSize = subtitleSize
 
-      this.configs.legend.top = '24%'
+      this.configs.legend.top = '26%'
+      this.configs.legend.left = fs8
       this.configs.legend.itemGap = fs8
       this.configs.legend.itemWidth = fs8
 
@@ -325,11 +326,11 @@ export default {
       this.configs.legend.textStyle.rich.g.height = fs8
       this.configs.legend.textStyle.rich.g.borderRadius = fs5
 
-      this.configs.series[0].label.rich.first.fontSize = fs12
+      this.configs.series[0].label.rich.first.fontSize = fs10
-      this.configs.series[0].label.rich.second.fontSize = fs12
+      this.configs.series[0].label.rich.second.fontSize = fs10
-      this.configs.series[0].label.rich.third.fontSize = fs12
+      this.configs.series[0].label.rich.third.fontSize = fs10
-      this.configs.series[0].label.rich.fourth.fontSize = fs12
+      this.configs.series[0].label.rich.fourth.fontSize = fs10
-      this.configs.series[0].label.rich.fifth.fontSize = fs12
+      this.configs.series[0].label.rich.fifth.fontSize = fs10
 
       this.chart.setOption(this.configs)
     }

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: {
+  props: {},
-    id: {
-      type: String,
-      default: 'default-id'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
-    }
-  },
   data() {
     return {
       chart: null,
-      option: {
+      option: null
-        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))
-          // }
-        ]
-      }
     }
   },
   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>

src/views/3DOverview/components/RightContentQualityAnalysis.vue

@@ -47,7 +47,7 @@ export default {
 
 <style scoped>
 .right-content-quality-analysis {
-  height: calc(100% - 32px);
+  height: calc(100% - calc(32px * var(--beilv)));
   overflow: hidden;
   overflow-y: auto; /** 右边会有多的padding给滑道 */
   display: grid;

src/views/3DOverview/components/RightContentRealtimeProduction.vue

@@ -15,6 +15,223 @@
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
+import { Random } from 'mockjs'
+
+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', '#F0D63C', '#E02094']
+
+    this.legend = {
+      top: 28,
+      right: 40,
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: {
+        color: '#fff9',
+        fontSize: 10
+      }
+    }
+
+    this.grid = {
+      top: 80,
+      left: 88,
+      right: 24,
+      bottom: 32
+    }
+
+    this.tooltip = {
+      show: true,
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 12
+      },
+      axisPointer: {
+        type: 'line',
+        axis: 'x'
+      },
+      extraCssText: 'width: calc(100px*var(--beilv)) !important;'
+    }
+
+    this.xAxis = {
+      type: 'category',
+      data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
+      axisTick: { show: false },
+      axisLabel: {
+        color: '#fff9',
+        fontSize: 12
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#fff3'
+        }
+      }
+    }
+
+    this.yAxis = [
+      {
+        name: '能耗        ',
+        nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, color: '#fff9' },
+        type: 'value',
+        splitNumber: 4,
+        onZero: true,
+        position: 'left',
+        offset: 40,
+        axisTick: { show: false },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#5982B2',
+            width: 1
+          }
+        },
+        axisLabel: {
+          color: '#fff9',
+          fontSize: 10
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff1',
+            type: 'dotted'
+          }
+        }
+      },
+      {
+        name: '产量        ',
+        nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, color: '#fff9' },
+        type: 'value',
+        splitNumber: 4,
+        axisTick: { show: false },
+        onZero: true,
+        position: 'left',
+        offset: 0,
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#5982B2',
+            width: 1
+          }
+        },
+        axisLabel: {
+          color: '#fff9',
+          fontSize: 10
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff1',
+            type: 'dotted'
+          }
+        }
+      }
+    ]
+
+    this.series = [
+      {
+        name: '产线1',
+        type: 'line',
+        yAxisIndex: 0,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: dianliuData,
+        symbol: 'none',
+        areaStyle: {
+          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
+          }
+        }
+      },
+      {
+        name: '产线2',
+        type: 'line',
+        yAxisIndex: 1,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: dianyaData,
+        symbol: 'none',
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#F0D63C66' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      }
+    ]
+  }
+
+  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: 'RealtimeLineChart',
@@ -22,186 +239,11 @@ export default {
   /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
   inject: ['resizeStatus'],
   /** End Fn.1 */
-  props: {
+  props: {},
-    id: {
-      type: String,
-      default: 'default-dian-id'
-    },
-    title: {
-      type: String,
-      default: 'default-title'
-    },
-    xData: {
-      type: Array,
-      default: () => []
-    },
-    seriesData: {
-      type: Array,
-      default: () => []
-    }
-  },
   data() {
-    const colors = ['#1A99FF', '#F0D63C', '#E02094']
-
-    // const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
-    let data = [
-      // 温度走势
-      [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
-        let v = Math.floor(Math.random() * 100)
-        while (v < 30) {
-          v = Math.floor(Math.random() * 100)
-        }
-        return v
-      }),
-      // 电流走势
-      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
-        let v = Math.floor(Math.random() * 100)
-        while (v < 30) {
-          v = Math.floor(Math.random() * 100)
-        }
-        return v
-      }),
-      // 电压走势
-      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
-        let v = Math.floor(Math.random() * 100)
-        while (v < 30) {
-          v = Math.floor(Math.random() * 100)
-        }
-        return v
-      })
-    ]
-    let wendu = data[0]
-    let dianliu = data[1]
-    let dianya = data[2]
-
     return {
       chart: null,
-      option: {
+      option: null
-        color: colors,
-        legend: {
-          top: 28,
-          right: 40,
-          itemWidth: 10,
-          itemHeight: 10,
-          textStyle: {
-            color: '#fff9',
-            fontSize: 10
-          }
-          // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
-        },
-        grid: {
-          top: 80,
-          left: 88,
-          right: 24,
-          bottom: 32
-        },
-        tooltip: {
-          show: true,
-          trigger: 'axis',
-          axisPointer: {
-            type: 'line',
-            axis: 'x'
-          },
-          extraCssText: 'width: 100px !important;'
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: ['01:00', '02:00', '03:00', '04:00', '05:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
-            axisTick: { show: false },
-            axisLabel: {
-              color: '#fff9'
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#fff3'
-              }
-            }
-          }
-        ],
-        yAxis: [
-          {
-            name: '能耗        ',
-            nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
-            type: 'value',
-            splitNumber: 4,
-            onZero: true,
-            position: 'left',
-            offset: 40,
-            axisTick: { show: false },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#5982B2',
-                width: 1
-              }
-            },
-            axisLabel: {
-              color: '#fff9',
-              fontSize: 10
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#fff1',
-                type: 'dotted'
-              }
-            }
-          },
-          {
-            name: '产量        ',
-            nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
-            type: 'value',
-            splitNumber: 4,
-            axisTick: { show: false },
-            onZero: true,
-            position: 'left',
-            offset: 0,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#5982B2',
-                width: 1
-              }
-            },
-            axisLabel: {
-              color: '#fff9',
-              fontSize: 10
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#fff1',
-                type: 'dotted'
-              }
-            }
-          }
-        ],
-        series: [
-          {
-            name: '产线1',
-            type: 'line',
-            yAxisIndex: 0,
-            // smooth: true,
-            emphasis: {
-              focus: 'series'
-            },
-            data: dianliu,
-            symbol: 'none'
-          },
-          {
-            name: '产线2',
-            type: 'line',
-            yAxisIndex: 1,
-            // smooth: true,
-            emphasis: {
-              focus: 'series'
-            },
-            data: dianya,
-            symbol: 'none'
-          }
-        ]
-      }
     }
   },
   computed: {
@@ -211,6 +253,7 @@ export default {
   },
   watch: {
     shouldResize(val, oldVal) {
+      console.log('fullscreen resize')
       setTimeout(() => {
         this.chart.resize()
       }, 250)
@@ -219,14 +262,23 @@ export default {
   mounted() {
     this.$nextTick(() => {
       if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
-      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>
 

src/views/3DOverview/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="v3d-outter" ref="v3d-outter">
-    <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
+    <!-- <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
     <V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
-    <div v-if="showPage" id="v3d-main-content">
+    <div v-if="showPage" id="v3d-main-content"> -->
-      <!-- <div v-if="true" id="v3d-main-content"> -->
+      <div v-if="true" id="v3d-main-content">
       <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
 
       <section id="techy-body-part">
@@ -204,6 +204,7 @@ export default {
 }
 
 #v3d-outter *::-webkit-scrollbar-button {
+  display: none;
   width: calc(8px * var(--beilv));
   height: calc(8px * var(--beilv));
   background: #5bc4bf9f;
@@ -257,7 +258,7 @@ export default {
 
 /* 实时产量和能耗 */
 .realtime {
-  height: calc(256px * var(--beilv));
+  height: calc(240px * var(--beilv));
 }
 /* 工序质量分析 */
 .ws-quality {
@@ -267,7 +268,8 @@ export default {
 }
 /* 产线成品率 */
 .production {
-  height: calc(256px * var(--beilv));
+  height: calc(200px * var(--beilv));
+  flex: 1 0;
   position: relative;
 }
 

src/views/OperationalOverview/components/mixins/resize.js

@@ -10,7 +10,13 @@ export default {
   mounted() {
     this.$_resizeHandler = debounce(() => {
       if (this.chart) {
-        this.chart.resize()
+        if (this.setChartOption) {
+          this.setChartOption()
+          this.$nextTick(() => {
+            this.chart.resize()
+          })
+        } else
+          this.chart.resize()
       }
     }, 100)
     this.$_initResizeEvent()