update 3d 公用工程

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

@@ -5,74 +5,30 @@
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
+import { Random } from 'mockjs'
 
-export default {
+class ChartOption {
-  name: 'DianLineChart',
+  constructor() {
-  mixins: [resize],
+    this.color = ['#E02094', '#F0D63C', '#1A99FF']
-  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
-  inject: ['resizeStatus'],
-  /** End Fn.1 */
-  props: {
-    id: {
-      type: String,
-      default: 'default-dian-line-chart'
-    }
-  },
-  data() {
-    const colors = ['#E02094', '#F0D63C', '#1A99FF']
 
-    // const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
+    this.legend = {
-    let data = [
+      top: 11,
-      // 温度走势
+      right: 32,
-      [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: {
-        color: colors,
-        legend: {
-          top: 16,
-          right: 64,
       itemWidth: 8,
       itemHeight: 8,
       textStyle: {
         color: '#fff9',
-            fontSize: 12
+        fontSize: 10
       }
-          // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
+    }
-        },
+
-        grid: {
+    this.grid = {
-          top: 48,
+      top: 36,
       left: 64,
       bottom: 36
-        },
+    }
-        tooltip: {
+
+    this.tooltip = {
       show: true,
       trigger: 'axis',
       axisPointer: {
@@ -86,15 +42,16 @@ export default {
         }
       },
       extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
-        },
+    }
-        xAxis: [
+
-          {
+    this.xAxis = {
       type: 'category',
       data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
       axisTick: { show: false },
       axisLabel: {
         color: '#fff9',
-              fontSize: 14
+        fontSize: 12,
+        margin: 10
       },
       axisLine: {
         lineStyle: {
@@ -102,16 +59,16 @@ export default {
         }
       }
     }
-        ],
+
-        yAxis: [
+    this.yAxis = [
       {
         name: '电流/A    ',
-            nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
+        nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
         type: 'value',
         splitNumber: 4,
         onZero: true,
         position: 'left',
-            offset: 32,
+        offset: 28,
         axisTick: { show: false },
         axisLine: {
           show: true,
@@ -122,7 +79,7 @@ export default {
         },
         axisLabel: {
           color: '#fff9',
-              fontSize: 12
+          fontSize: 10
         },
         splitLine: {
           show: true,
@@ -134,7 +91,7 @@ export default {
       },
       {
         name: '  电压/V  ',
-            nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
+        nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
         type: 'value',
         splitNumber: 4,
         axisTick: { show: false },
@@ -150,7 +107,7 @@ export default {
         },
         axisLabel: {
           color: '#fff9',
-              fontSize: 12
+          fontSize: 10
         },
         splitLine: {
           show: true,
@@ -162,7 +119,7 @@ export default {
       },
       {
         name: '        温度',
-            nameTextStyle: { align: 'left', color: '#fff9', fontSize: 12 },
+        nameTextStyle: { align: 'left', color: '#fff9', fontSize: 10 },
         axisTick: { show: false },
         axisLine: {
           show: false,
@@ -182,11 +139,12 @@ export default {
         },
         axisLabel: {
           color: '#fff9',
-              fontSize: 12
+          fontSize: 10
         }
       }
-        ],
+    ]
-        series: [
+
+    this.series = [
       {
         name: 'ABC三相电压/v',
         type: 'line',
@@ -195,7 +153,9 @@ export default {
         emphasis: {
           focus: 'series'
         },
-            data: dianliu,
+        data: Array(12)
+          .fill(1)
+          .map(_ => Random.integer(30, 100)),
         symbol: 'none'
       },
       {
@@ -206,7 +166,9 @@ export default {
         emphasis: {
           focus: 'series'
         },
-            data: dianya,
+        data: Array(12)
+          .fill(1)
+          .map(_ => Random.integer(30, 100)),
         symbol: 'none'
       },
       {
@@ -217,11 +179,61 @@ export default {
         emphasis: {
           focus: 'series'
         },
-            data: wendu,
+        data: Array(12)
+          .fill(1)
+          .map(_ => Random.integer(30, 100)),
         symbol: 'none'
       }
     ]
   }
+
+  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: 'DianLineChart',
+  mixins: [resize],
+  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
+  inject: ['resizeStatus'],
+  /** End Fn.1 */
+  props: {
+    id: {
+      type: String,
+      default: 'default-dian-line-chart'
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      option: null
     }
   },
   computed: {
@@ -239,7 +251,7 @@ export default {
   mounted() {
     this.$nextTick(() => {
       if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
-      this.chart.setOption(this.option)
+      this.setChartOption()
     })
   },
   beforeDestroy() {
@@ -247,7 +259,14 @@ export default {
     this.chart = null
   },
   methods: {
-    initOption(legendSize, labelSize, axisLabelSize, splitLineNumber) {}
+    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/components/RightContentQualityAnalysis.vue

@@ -26,16 +26,16 @@ export default {
   data() {
     return {
       datalist: [
-        { name: '热端', value: 2023233, color: '#0b88ff' },
+        { name: '热端', value: 66, color: '#0b88ff' },
-        { name: '丝印', value: 2023233, color: '#0bffa6' },
+        { name: '丝印', value: 93, color: '#0bffa6' },
-        { name: '原片', value: 20, color: '#0bffa6' },
+        { name: '原片', value: 121, color: '#0bffa6' },
-        { name: '钢化', value: 20, color: '#e3ff0b' },
+        { name: '钢化', value: 2, color: '#e3ff0b' },
-        { name: '上片磨边', value: 20, color: '#e3ff0b' },
+        { name: '上片磨边', value: 211, color: '#e3ff0b' },
-        { name: '下片铺纸', value: 202324, color: '#950bff' },
+        { name: '下片铺纸', value: 27, color: '#950bff' },
-        { name: '镀膜', value: 20, color: '#950bff' },
+        { name: '镀膜', value: 44, color: '#950bff' },
-        { name: '物流仓储', value: 202324, color: '#ff7d0b' },
+        { name: '物流仓储', value: 3, color: '#ff7d0b' },
-        { name: '清洗', value: 20, color: '#0bffa6' },
+        { name: '清洗', value: 2, color: '#0bffa6' },
-        { name: '包装', value: 2, color: '#ff0bc2' }
+        { name: '包装', value: 22, color: '#ff0bc2' }
       ]
     }
   },