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

@@ -15,70 +15,24 @@
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
+import { Random } from 'mockjs'
+import { debounce } from '@/utils'
 
-export default {
+class ChartOption {
-  name: 'RealtimeLineChart',
+  constructor() {
-  mixins: [resize],
+    const wenduData = Array(12)
-  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
+      .fill(1)
-  inject: ['resizeStatus'],
+      .map(_ => Random.integer(30, 100))
-  /** End Fn.1 */
+    const dianyaData = Array(12)
-  props: {
+      .fill(1)
-    id: {
+      .map(_ => Random.integer(30, 100))
-      type: String,
+    const dianliuData = Array(12)
-      default: 'default-dian-id'
+      .fill(1)
-    },
+      .map(_ => Random.integer(30, 100))
-    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
+    this.color = ['#1A99FF', '#F0D63C', '#E02094']
-    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 {
+    this.legend = {
-      chart: null,
-      option: {
-        color: colors,
-        legend: {
       top: 28,
       right: 40,
       itemWidth: 10,
@@ -87,30 +41,35 @@ export default {
         color: '#fff9',
         fontSize: 10
       }
-          // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
+    }
-        },
+
-        grid: {
+    this.grid = {
       top: 80,
       left: 88,
       right: 24,
       bottom: 32
-        },
+    }
-        tooltip: {
+
+    this.tooltip = {
       show: true,
       trigger: 'axis',
+      textStyle: {
+        fontSize: 12
+      },
       axisPointer: {
         type: 'line',
         axis: 'x'
       },
-          extraCssText: 'width: 100px !important;'
+      extraCssText: 'width: calc(100px*var(--beilv)) !important;'
-        },
+    }
-        xAxis: [
+
-          {
+    this.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'],
+      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'
+        color: '#fff9',
+        fontSize: 12
       },
       axisLine: {
         lineStyle: {
@@ -118,11 +77,11 @@ export default {
         }
       }
     }
-        ],
+
-        yAxis: [
+    this.yAxis = [
       {
         name: '能耗        ',
-            nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
+        nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, color: '#fff9' },
         type: 'value',
         splitNumber: 4,
         onZero: true,
@@ -150,7 +109,7 @@ export default {
       },
       {
         name: '产量        ',
-            nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
+        nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, color: '#fff9' },
         type: 'value',
         splitNumber: 4,
         axisTick: { show: false },
@@ -176,8 +135,9 @@ export default {
           }
         }
       }
-        ],
+    ]
-        series: [
+
+    this.series = [
       {
         name: '产线1',
         type: 'line',
@@ -186,7 +146,7 @@ export default {
         emphasis: {
           focus: 'series'
         },
-            data: dianliu,
+        data: dianliuData,
         symbol: 'none',
         areaStyle: {
           color: {
@@ -217,7 +177,7 @@ export default {
         emphasis: {
           focus: 'series'
         },
-            data: dianya,
+        data: dianyaData,
         symbol: 'none',
         areaStyle: {
           color: {
@@ -242,6 +202,49 @@ export default {
       }
     ]
   }
+
+  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',
+  mixins: [resize],
+  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
+  inject: ['resizeStatus'],
+  /** End Fn.1 */
+  props: {},
+  data() {
+    return {
+      chart: null,
+      option: null
     }
   },
   computed: {
@@ -251,7 +254,7 @@ export default {
   },
   watch: {
     shouldResize(val, oldVal) {
-      console.log('should resize')
+      console.log('fullscreen resize')
       setTimeout(() => {
         this.chart.resize()
       }, 250)
@@ -260,14 +263,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

@@ -258,7 +258,7 @@ export default {
 
 /* 实时产量和能耗 */
 .realtime {
-  height: calc(256px * var(--beilv));
+  height: calc(240px * var(--beilv));
 }
 /* 工序质量分析 */
 .ws-quality {
@@ -268,7 +268,7 @@ export default {
 }
 /* 产线成品率 */
 .production {
-  height: calc(256px * var(--beilv));
+  height: calc(220px * var(--beilv));
   position: relative;
 }
 

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

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