update 3d，实时产量

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

@@ -53,7 +53,7 @@ const PriorityComponent = {
 
 const tableProps = [
   { prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 90 },
-  { prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
+  // { prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
   { prop: 'priority', label: '提示等级', align: 'center', 'min-width': 90, subcomponent: PriorityComponent },
   { prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 },
   { prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 125 }

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

@@ -5,6 +5,7 @@
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
+import { Random } from 'mockjs'
 
 class ChartOption {
   constructor() {
@@ -51,13 +52,16 @@ class ChartOption {
       formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
     }
 
+    let d = new Date()
     this.xAxis = {
       type: 'category',
       boundaryGap: false,
       // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-      data: Array(12)
+      data: Array(7)
         .fill(0)
-        .map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
+        .map((_, idx) => {
+          return d.getMonth() + 1 + '-' + (d.getDate() + idx)
+        }),
       axisTick: {
         show: false
       },
@@ -74,7 +78,8 @@ class ChartOption {
     this.yAxis = {
       type: 'value',
       name: '成品率              ',
-      min: 'dataMin',
+      // min: 'dataMin',
+      min: 50,
       splitNumber: 3,
       nameTextStyle: {
         color: '#fff9',
@@ -121,15 +126,9 @@ class ChartOption {
             global: false // 缺省为 false
           }
         },
-        data: Array(12)
+        data: Array(7)
           .fill(0)
-          .map(_ => {
+          .map(_ => Random.integer(93, 98))
-            let v = Math.floor(Math.random() * 100)
-            while (v < 80) {
-              v = Math.floor(Math.random() * 100)
-            }
-            return v
-          })
       },
       {
         name: 'B',
@@ -155,15 +154,9 @@ class ChartOption {
             global: false // 缺省为 false
           }
         },
-        data: Array(12)
+        data: Array(7)
           .fill(0)
-          .map(_ => {
+          .map(_ => Random.integer(93, 98))
-            let v = Math.floor(Math.random() * 100)
-            while (v < 80) {
-              v = Math.floor(Math.random() * 100)
-            }
-            return v
-          })
       }
     ]
   }

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

@@ -19,17 +19,7 @@ import { Random } from 'mockjs'
 
 class ChartOption {
   constructor() {
-    const wenduData = Array(12)
+    this.color = ['#1A99FF', '#F0D63C', '#E02094', '#559833']
-      .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,
@@ -62,9 +52,14 @@ class ChartOption {
       extraCssText: 'width: calc(100px*var(--beilv)) !important;'
     }
 
+    let d = new Date()
     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'],
+      data: Array(7)
+        .fill(1)
+        .map((_, idx) => {
+          return d.getMonth() + 1 + '-' + (d.getDate() + idx)
+        }),
       axisTick: { show: false },
       axisLabel: {
         color: '#fff9',
@@ -138,14 +133,16 @@ class ChartOption {
 
     this.series = [
       {
-        name: '产线1',
+        name: 'A能耗',
         type: 'line',
         yAxisIndex: 0,
         // smooth: true,
         emphasis: {
           focus: 'series'
         },
-        data: dianliuData,
+        data: Array(7)
+          .fill(0)
+          .map(_ => Random.integer(30, 100)),
         symbol: 'none',
         areaStyle: {
           color: {
@@ -169,14 +166,16 @@ class ChartOption {
         }
       },
       {
-        name: '产线2',
+        name: 'A产量',
         type: 'line',
         yAxisIndex: 1,
         // smooth: true,
         emphasis: {
           focus: 'series'
         },
-        data: dianyaData,
+        data: Array(7)
+          .fill(0)
+          .map(_ => Random.integer(30, 100)),
         symbol: 'none',
         areaStyle: {
           color: {
@@ -198,6 +197,72 @@ class ChartOption {
             global: false // 缺省为 false
           }
         }
+      },
+      {
+        name: 'B能耗',
+        type: 'line',
+        yAxisIndex: 0,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(7)
+          .fill(0)
+          .map(_ => Random.integer(30, 100)),
+        symbol: 'none',
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#E0209466' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      },
+      {
+        name: 'B产量',
+        type: 'line',
+        yAxisIndex: 1,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(7)
+          .fill(0)
+          .map(_ => Random.integer(30, 100)),
+        symbol: 'none',
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#55983366' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
       }
     ]
   }