优化

src/config/mork2.js

@@ -223,49 +223,49 @@ export const homepageDataLeft = () => {
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
         'materialName': '物料一',
         // 数量
-        'qty': 100
+        'qty': 1
       },
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
         'materialName': '物料二',
         // 数量
-        'qty': 100
+        'qty': 2
       },
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
         'materialName': '物料三',
         // 数量
-        'qty': 100
+        'qty': 3
       },
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
         'materialName': '物料四',
         // 数量
-        'qty': 100
+        'qty': 4
       },
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
         'materialName': '物料五',
         // 数量
-        'qty': 100
+        'qty': 5
       },
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
         'materialName': '物料6',
         // 数量
-        'qty': 100
+        'qty': 6
       },
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
         'materialName': '物料7',
         // 数量
-        'qty': 100
+        'qty': 7
       }
     ]
   }
@@ -311,7 +311,7 @@ export const homepageDataRight = () => {
     'top10Of30Days': [
       {
         'deviceName': '压机1',
-        'count': 10
+        'count': 100
       },
       {
         'deviceName': '压机2',

src/pages/modules/home/left/left.vue

@@ -105,8 +105,8 @@
 </template>
 
 <script>
-// import { homepageDataLeft } from '@js/mork2.js'
+import { homepageDataLeft } from '@js/mork2.js'
-import { homepageDataLeft } from '@js/getData2.js'
+// import { homepageDataLeft } from '@js/getData2.js'
 import symbol1 from '@img/symbol_1.png'
 import symbol2 from '@img/symbol_2.png'
 import symbol3 from '@img/symbol_3.png'
@@ -648,22 +648,6 @@ export default {
       let seriesData = []
       this.inventory.forEach(r => {
         seriesData.push(r)
-        seriesData.push({
-          name: '',
-          value: 5,
-          tooltip: { show: false },
-          itemStyle: {
-            label: {
-              show: false
-            },
-            labelLine: {
-              show: false
-            },
-            color: 'rgba(0, 0, 0, 0)',
-            borderColor: 'rgba(0, 0, 0, 0)',
-            borderWidth: 0
-          }
-        })
       })
       let option = {
         color: ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb'],
@@ -706,6 +690,10 @@ export default {
           tooltip: {
             show: false
           },
+          itemStyle: {
+            borderColor: 'RGBA(27, 58, 98, .5)',
+            borderWidth: 2
+          },
           label: {
             show: false
           },
@@ -750,7 +738,6 @@ export default {
         barName.push(el.date)
         barData1.push(el.press)
         barData2.push(el.sort)
-        totalDate.push(total)
       })
       let option = {
         grid: {
@@ -776,10 +763,10 @@ export default {
                 y2: 1,
                 colorStops: [{
                   offset: 0,
-                  color: 'rgba(254,254,254,0.1)'
+                  color: 'rgba(254,254,254,0)'
                 }, {
                   offset: 1,
-                  color: 'rgba(254,254,254,0.8)'
+                  color: 'rgba(254,254,254,0)'
                 }],
                 global: false
               }
@@ -930,40 +917,11 @@ export default {
           },
           {
             name: '阴影',
-            type: 'bar',
+            type: 'pictorialBar',
             barWidth: '38px',
-            itemStyle: {
+            symbol: 'image://' + img.imgSrc3,
-              normal: {
-                color: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0.1,
-                      color: 'rgba(254,254,254,0.1)'
-                    },
-                    {
-                      offset: 1,
-                      color: 'rgba(254,254,254,0.1)'
-                    }
-                  ]
-                }
-              }
-            },
             data: totalDate,
             z: -1
-            // name: '阴影',
-            // type: 'pictorialBar',
-            // barWidth: '38px',
-            // symbol: 'image://' + img.imgSrc3,
-            // data: totalDate,
-            // itemStyle: {
-            //   opacity: itemOpacity
-            // },
-            // z: -1
           }
         ]
       }
@@ -974,11 +932,23 @@ export default {
         if (len === barName.length) {
           len = 0
         }
+        totalDate[len] = total
+        echart.setOption({
+          series: [{
+            data: barData1
+          }, {
+            data: barData2
+          }, {
+            data: totalDate
+          }
+          ]
+        })
         echart.dispatchAction({
           type: 'showTip',
           seriesIndex: 0,
           dataIndex: len
         })
+        totalDate = []
         len++
       }, 2000)
       window.addEventListener('resize', () => {

src/pages/modules/home/right/left.vue

@@ -43,8 +43,8 @@
 </template>
 
 <script>
-// import { homepageEquipment } from '@js/mork2.js'
+import { homepageEquipment } from '@js/mork2.js'
-import { homepageEquipment } from '@js/getData2.js'
+// import { homepageEquipment } from '@js/getData2.js'
 export default {
   data () {
     return {
@@ -58,7 +58,7 @@ export default {
     defaultOption1 () {
       return {
         step: 0.4, // 数值越大速度滚动越快
-        limitMoveNum: 55, // 开始无缝滚动的数据量 this.dataList.length
+        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
         hoverStop: true, // 是否开启鼠标悬停stop
         direction: 1, // 0向下 1向上 2向左 3向右
         openWatch: true, // 开启数据实时监控刷新dom
@@ -130,12 +130,7 @@ export default {
     _wh(100%, 40px)
     border-bottom 1px solid rgba(122,159,224,0.17)
     background-color rgba(31,46,73,0.9)
-    &:nth-child(2)
+    opacity: 0.9
-      opacity: 0.9
-    &:nth-child(3)
-      opacity: 0.7
-    &:nth-child(4)
-      opacity: 0.5
     .scroll-ul_1_div
       float left
       height 40px

src/pages/modules/home/right/right.vue

@@ -99,8 +99,8 @@
 </template>
 
 <script>
-// import { homepageDataRight } from '@js/mork2.js'
+import { homepageDataRight } from '@js/mork2.js'
-import { homepageDataRight } from '@js/getData2.js'
+// import { homepageDataRight } from '@js/getData2.js'
 import bg1 from '@img/bg1.png'
 import bg2 from '@img/bg2.png'
 import bg3 from '@img/bg3.png'
@@ -124,7 +124,7 @@ export default {
     defaultOption1 () {
       return {
         step: 0.4, // 数值越大速度滚动越快
-        limitMoveNum: 55, // 开始无缝滚动的数据量 this.dataList.length
+        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
         hoverStop: true, // 是否开启鼠标悬停stop
         direction: 1, // 0向下 1向上 2向左 3向右
         openWatch: true, // 开启数据实时监控刷新dom
@@ -342,22 +342,6 @@ export default {
       let seriesData = []
       arr.forEach(r => {
         seriesData.push(r)
-        seriesData.push({
-          name: '',
-          value: 5,
-          tooltip: { show: false },
-          itemStyle: {
-            label: {
-              show: false
-            },
-            labelLine: {
-              show: false
-            },
-            color: 'rgba(0, 0, 0, 0)',
-            borderColor: 'rgba(0, 0, 0, 0)',
-            borderWidth: 0
-          }
-        })
       })
       let option = {
         color: ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb'],
@@ -400,6 +384,10 @@ export default {
           tooltip: {
             show: false
           },
+          itemStyle: {
+            borderColor: 'RGBA(27, 58, 98, .5)',
+            borderWidth: 2
+          },
           label: {
             show: false
           },
@@ -804,7 +792,8 @@ export default {
           z: 1,
           label: {
             show: true,
-            position: ['93%', -30],
+            position: 'insideTopRight',
+            offset: [0, -32],
             formatter: (value) => {
               return '{a|' + value.data.num + '}'
             },
@@ -813,7 +802,7 @@ export default {
                 height: 32,
                 fontSize: 20,
                 lineHeight: 20,
-                align: 'right',
+                align: 'left',
                 fontFamily: 'YouSheBiaoTiHei',
                 color: '#E1F6FF'
               }
@@ -927,8 +916,6 @@ export default {
       background rgba(31,46,73,0.7)
     &:nth-child(odd)
       background rgba(31,46,73,0.55)
-    &:nth-child(5)
-      opacity: 0.5
     .scroll-ul_1_div
       float left
       _wh(10%, 39px)

src/style/reset.css

@@ -72,7 +72,7 @@ html, body {
      width: 100%;
      height: 100%;
      width: 1920px;
-     /* width: 3840px; */
+     width: 3840px;
      height: 1080px;
 }