update 实时产量和能耗

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

@@ -130,7 +130,7 @@ export default {
   color: #fff9;
   border: 0;
   height: 100%;
-  overflow-y: auto;
+  /* overflow-y: auto; */
 }
 
 .el-table-wrapper >>> .el-table th.is-leaf,

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

@@ -144,7 +144,7 @@ export default {
   color: #fff9;
   border: 0;
   height: 100%;
-  overflow-y: auto;
+  /* overflow-y: auto; */
 }
 
 .el-table-wrapper >>> .el-table th.is-leaf,

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

@@ -1,27 +1,5 @@
 <template>
-  <techy-box style="width: 100%; height: calc(100% - 36px);">
-    <!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
-
-    <!-- <new-bar
-      chart-name="realtime-cost-production"
-      :name-list="['A', 'B', 'C', 'D', 'E', 'F']"
-      :data-list="[
-        {
-          topColor: 'rgba(59, 76, 118, 0.2)',
-          bottomColor: '#49FBD6',
-          name: '产量',
-          data: [64, 91, 55, 65, 37, 77]
-        },
-        {
-          topColor: 'rgba(59, 76, 118, 0.2)',
-          bottomColor: '#31A2FF',
-          name: '能耗',
-          data: [32, 65, 65, 54, 37, 77]
-        }
-      ]"
-    /> -->
-
-    <techy-bar :extra-space-between-zero="16" :datainfo="[
+  <!-- <techy-bar :extra-space-between-zero="16" :datainfo="[
         {
           name: '产量',
           list: [64, 91, 55, 65, 37, 77]
@@ -30,26 +8,231 @@
           name: '能耗',
           list: [32, 65, 65, 54, 37, 77]
         }
-      ]" />
-  </techy-box>
+      ]" /> -->
+  <div class="techy-chart" ref="realtimeLineChart"></div>
 </template>
 
 <script>
-import TechyBox from './TechyBox.vue'
-// import newBar from './newBar.vue'
-import TechyBar from './TechyBar.vue'
+import echarts from 'echarts'
+import resize from '@/views/OperationalOverview/components/mixins/resize'
 
 export default {
-  name: 'RealtimeProductionHorizontalBarChart',
-  components: { TechyBox, TechyBar },
-  props: {},
+  name: 'RealtimeLineChart',
+  mixins: [resize],
+  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
+  inject: ['resizeStatus'],
+  /** End Fn.1 */
+  props: {
+    id: {
+      type: String,
+      default: 'default-dian-id'
+    },
+    title: {
+      type: String,
+      default: 'default-title'
+    },
+    xData: {
+      type: Array,
+      default: () => []
+    },
+    seriesData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
-    return {}
-  }
+    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: {
+        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: '#fff3'
+              }
+            }
+          },
+          {
+            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: '#fff3'
+              }
+            }
+          }
+        ],
+        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: {
+    shouldResize() {
+      return this.resizeStatus()
+    }
+  },
+  watch: {
+    shouldResize(val, oldVal) {
+      setTimeout(() => {
+        this.chart.resize()
+      }, 250)
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
+      this.chart.setOption(this.option)
+    })
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+    this.chart = null
+  },
+  methods: {}
 }
 </script>
+
 <style scoped>
 .techy-chart {
+  position: absolute;
+  top: 0;
+  left: 0;
   height: 100%;
   width: 100%;
 }