优化

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
+    "default-passive-events": "^2.0.0",
     "echarts": "^5.3.2",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",

src/assets/css/reset.css

@@ -130,3 +130,7 @@ div, p {
     -khtml-user-select:none;/*早期浏览器*/
     user-select:none;
 }
+.zdy_box {
+     width: 100%;
+     height: 100%;
+}

src/components/canvas.vue

@@ -9,6 +9,7 @@
 export default {
   data () {
     return {
+      af: undefined,
       // points: [{x1: 650, y1: 885, x2: 650, y2: 852}, {x1: 577, y1: 815, x2: 548, y2: 815}, {x1: 719, y1: 815, x2: 754, y2: 815}, {x1: 305, y1: 560, x2: 305, y2: 545}, {x1: 419, y1: 510, x2: 419, y2: 490}, {x1: 455, y1: 282, x2: 548, y2: 282}, {x1: 830, y1: 395, x2: 830, y2: 474}, {x1: 830, y1: 499, x2: 830, y2: 561}, {x1: 830, y1: 516, x2: 488, y2: 516}, {x1: 488, y1: 516, x2: 488, y2: 560}],
       points: [{x1: 305, y1: 560, x2: 305, y2: 545}, {x1: 419, y1: 510, x2: 419, y2: 490}, {x1: 455, y1: 282, x2: 548, y2: 282}, {x1: 830, y1: 395, x2: 830, y2: 474}, {x1: 830, y1: 499, x2: 830, y2: 561}, {x1: 830, y1: 516, x2: 488, y2: 516}, {x1: 488, y1: 516, x2: 488, y2: 560}],
       dot1: {x1: 650, y1: 885, x2: 650, y2: 852},
@@ -30,6 +31,10 @@ export default {
   mounted () {
     this.animate()
   },
+  destroyed () {
+    window.cancelAnimationFrame(this.af)
+    this.af = undefined
+  },
   methods: {
     rectClick () {
       var ev = window.event
@@ -142,7 +147,7 @@ export default {
       for (let i = 0; i < this.points.length; i++) {
         this.drawLine(ctx, this.points[i].x1, this.points[i].y1, this.points[i].x2, this.points[i].y2)
       }
-      requestAnimationFrame(this.animate)
+      this.af = window.requestAnimationFrame(this.animate)
     }
   }
 }

src/main.js

@@ -13,6 +13,7 @@ import {post} from '@js/http.js'
 import * as echarts from 'echarts'
 import VueParticles from 'vue-particles'
 import scroll from 'vue-seamless-scroll'
+import 'default-passive-events'
 
 for (let k in filter) {
   Vue.filter(k, filter[k])

src/pages/shunhe/LogisticsProcess.vue

@@ -351,11 +351,9 @@ export default {
           },
           axisLabel: {
             interval: 0,
-            textStyle: {
             color: '#8FABBF',
             fontSize: 16,
             fontFamily: 'Source Han Sans CN-Normal'
-            }
           },
           data: status
         },
@@ -376,11 +374,9 @@ export default {
             show: false
           },
           axisLabel: {
-            textStyle: {
             color: '#8FABBF',
             fontSize: 14,
             fontFamily: 'Source Han Sans CN-Normal'
-            }
           },
           splitLine: {
             show: true,
@@ -498,12 +494,10 @@ export default {
           },
           axisLabel: {
             show: true,
-            textStyle: {
             color: '#8FABBF',
             fontSize: 16,
             fontFamily: 'Source Han Sans CN-Normal'
           }
-          }
         },
         yAxis: {
           type: 'value',
@@ -673,7 +667,7 @@ export default {
       // 每月故障统计
       this.currentMonth = res.monthlyFailureStatistics.currentMonth
       this.average = res.monthlyFailureStatistics.average
-      this.setEchart2()
+      // this.setEchart2()
       // 当日工序生产统计
       this.mix = res.dailyProductionStatistics.mix
       this.stand = res.dailyProductionStatistics.stand

src/pages/shunhe/SortWorkMonitor.vue

@@ -0,0 +1,66 @@
+<template>
+  <section class="bg">
+    <t-header title="分拣作业监控">
+    </t-header>
+    <div class="container">
+      <div class="zdy_box">
+        <div class="one_wrap"></div>
+        <div class="two_wrap"></div>
+        <div class="three_wrap"></div>
+        <div class="four_wrap"></div>
+      </div>
+    </div>
+    <section class="bottom"></section>
+  </section>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+export default {
+  name: 'SortWorkMonitor',
+  components: {
+    THeader
+  },
+  mounted () {
+    this.$nextTick(() => {
+      const bodyStyle = document.body.style
+      const htmlStyle = document.getElementsByTagName('html')[0].style
+      // const docEl = document.documentElement
+      // const docBody = document.body
+      // const winWidth = docEl.clientWidth || docBody.clientWidth
+      // const winHeight = docEl.clientHeight || docBody.clientHeight
+      bodyStyle.width = '100%'
+      htmlStyle.width = '100%'
+      bodyStyle.height = '100%'
+      htmlStyle.height = '100%'
+    })
+  },
+  beforeDestroy () {
+    this.$nextTick(() => {
+      const bodyStyle = document.body.style
+      const htmlStyle = document.getElementsByTagName('html')[0].style
+      bodyStyle.width = '1920px'
+      htmlStyle.width = '1920px'
+      bodyStyle.height = '1200px'
+      htmlStyle.height = '1200px'
+    })
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.bg
+  _wh(100%, 100%)
+  overflow hidden
+.container
+  _wh(100%, calc(100% - 1.38rem))
+  padding .3rem .2509rem 0
+  clear both
+.bottom
+  _wh(100%, .38rem)
+  background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
+.one_wrap
+  _wh(100%, 10%)
+  background center center / 100% 100% url(../../assets/images/sctj_top.png) no-repeat
+</style>

src/router/index.js

@@ -10,6 +10,7 @@ const HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')),
 const ProdCount = r => require.ensure([], () => r(require('@page/shunhe/ProdCount')), 'ProdCount')
 const StorageMonitor = r => require.ensure([], () => r(require('@page/shunhe/StorageMonitor')), 'StorageMonitor')
 const LogisticsProcess = r => require.ensure([], () => r(require('@page/shunhe/LogisticsProcess')), 'LogisticsProcess')
+const SortWorkMonitor = r => require.ensure([], () => r(require('@page/shunhe/SortWorkMonitor')), 'SortWorkMonitor')
 
 Vue.use(Router)
 
@@ -51,6 +52,10 @@ export default new Router({
     {
       path: '/LogisticsProcess',
       component: LogisticsProcess
+    },
+    {
+      path: '/SortWorkMonitor',
+      component: SortWorkMonitor
     }
   ]
 })

yarn.lock

@@ -2107,6 +2107,11 @@ deep-is@~0.1.3:
   resolved "http://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+default-passive-events@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/default-passive-events/-/default-passive-events-2.0.0.tgz#79b1aa67becbaab38b718469b5480fef92eda649"
+  integrity sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==
+
 define-properties@^1.1.2:
   version "1.1.3"
   resolved "http://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"