优化

2023-09-19 16:11:52 +08:00
parent a531505bf7
commit 65f06341f2
8 changed files with 98 additions and 17 deletions
--- a/package.json
+++ b/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",
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
@@ -130,3 +130,7 @@ div, p {
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
 }
+.zdy_box {
+     width: 100%;
+     height: 100%;
+}
--- a/src/components/canvas.vue
+++ b/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)
    }
  }
 }
--- a/src/main.js
+++ b/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])
--- a/src/pages/shunhe/LogisticsProcess.vue
+++ b/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'
-            }
+            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'
-            }
+            color: '#8FABBF',
+            fontSize: 14,
+            fontFamily: 'Source Han Sans CN-Normal'
          },
          splitLine: {
            show: true,
@@ -498,11 +494,9 @@ export default {
          },
          axisLabel: {
            show: true,
-            textStyle: {
-              color: '#8FABBF',
-              fontSize: 16,
-              fontFamily: 'Source Han Sans CN-Normal'
-            }
+            color: '#8FABBF',
+            fontSize: 16,
+            fontFamily: 'Source Han Sans CN-Normal'
          }
        },
        yAxis: {
@@ -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
--- a/src/pages/shunhe/SortWorkMonitor.vue
+++ b/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>
--- a/src/router/index.js
+++ b/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
    }
  ]
 })
--- a/yarn.lock
+++ b/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"