物流工艺样式

src/assets/js/mork2.js

@@ -73,6 +73,18 @@ export const homepageData = () => {
         'materialCode': 'WGBMMC00002MGL8343P20-K23Z006',
         'completed': '0块'
       },
+      {
+        'materialName': '镁碳砖MGL8343P10-K23Z006',
+        'equipment': '混料机4',
+        'materialCode': 'WGBMMC00002MGL8343P10-K23Z006',
+        'completed': '3.65吨'
+      },
+      {
+        'materialName': '镁碳砖MGL8343P10-K23Z006',
+        'equipment': '混料机4',
+        'materialCode': 'WGBMMC00002MGL8343P10-K23Z006',
+        'completed': '3.65吨'
+      },
       {
         'materialName': '镁碳砖MGL8343P10-K23Z006',
         'equipment': '混料机4',

src/pages/shunhe/LogisticsProcess/canvas_1.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script>
+// 屏幕分辨率为1920*1200
 export default {
   data () {
     return {

src/pages/shunhe/LogisticsProcess/canvas_2.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="canvas_container" @click="rectClick">
+    <!-- <div class="canvas_container"> -->
+      <canvas id="myCanvas" width="946" height="982"></canvas>
+    </div>
+  </template>
+
+<script>
+// 屏幕分辨率为1920*1080
+export default {
+  data () {
+    return {
+      af: undefined,
+      points: [{x1: 305, y1: 518, x2: 305, y2: 500}, {x1: 419, y1: 474, x2: 419, y2: 456}, {x1: 453, y1: 259, x2: 550, y2: 259}, {x1: 830, y1: 362, x2: 830, y2: 438}, {x1: 830, y1: 461, x2: 830, y2: 518}, {x1: 830, y1: 473, x2: 488, y2: 473}, {x1: 488, y1: 473, x2: 488, y2: 518}],
+      dot4: {x1: 305, y1: 518, x2: 305, y2: 500},
+      dot5: {x1: 419, y1: 474, x2: 419, y2: 456},
+      dot6: {x1: 453, y1: 259, x2: 550, y2: 259},
+      line2: 1,
+      line3: 1,
+      dot7: {x1: 830, y1: 362, x2: 830, y2: 438},
+      dot8: {x1: 830, y1: 461, x2: 830, y2: 518},
+      dot9: {x1: 830, y1: 473, x2: 488, y2: 516},
+      dot10: {x1: 488, y1: 473, x2: 488, y2: 518},
+      line4: 1
+    }
+  },
+  mounted () {
+    this.animate()
+  },
+  destroyed () {
+    window.cancelAnimationFrame(this.af)
+    this.af = undefined
+  },
+  methods: {
+    rectClick () {
+      var ev = window.event
+      // 获取相对于当前所指向对象的位置坐标
+      alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
+    },
+    drawPoint (ctx, x, y) {
+      ctx.beginPath()
+      ctx.arc(x, y, 4, 0, 2 * Math.PI)
+      ctx.fillStyle = 'yellow'
+      ctx.fill()
+      ctx.lineWidth = 1
+      ctx.strokeStyle = 'yellow'
+      ctx.closePath()
+    },
+    drawLine (ctx, x1, y1, x2, y2) {
+      ctx.beginPath()
+      ctx.moveTo(x1, y1)
+      ctx.lineTo(x2, y2)
+      ctx.strokeStyle = '#00c8da'
+      ctx.lineWidth = 1
+      ctx.stroke()
+    },
+    animate () {
+      let canvas = document.getElementById('myCanvas')
+      let ctx = canvas.getContext('2d')
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      if (this.line2 === 1) {
+        this.dot4.y1 -= 1
+        this.drawPoint(ctx, this.dot4.x1, this.dot4.y1)
+        if (this.dot4.y1 === this.dot4.y2) {
+          this.dot4.y1 = 518
+          this.line2 = 2
+        }
+      }
+      if (this.line2 === 2) {
+        this.dot5.y1 -= 1
+        this.drawPoint(ctx, this.dot5.x1, this.dot5.y1)
+        if (this.dot5.y1 === this.dot5.y2) {
+          this.dot5.y1 = 474
+          this.line2 = 1
+        }
+      }
+      if (this.line3 === 1) {
+        this.dot6.x1 += 1
+        this.drawPoint(ctx, this.dot6.x1, this.dot6.y1)
+        if (this.dot6.x1 === this.dot6.x2) {
+          this.dot6.x1 = 455
+          this.line3 = 1
+        }
+      }
+      if (this.line4 === 1) {
+        this.dot7.y1 += 1
+        this.drawPoint(ctx, this.dot7.x1, this.dot7.y1)
+        if (this.dot7.y1 === this.dot7.y2) {
+          this.dot7.y1 = 362
+          this.line4 = 2
+        }
+      }
+      if (this.line4 === 2) {
+        this.dot8.y1 += 1
+        this.drawPoint(ctx, this.dot8.x1, this.dot8.y1)
+        if (this.dot8.y1 === this.dot8.y2) {
+          this.dot8.y1 = 461
+          this.line4 = 3
+        }
+      }
+      if (this.line4 === 3) {
+        this.dot9.x1 -= 1
+        this.drawPoint(ctx, this.dot9.x1, this.dot9.y1)
+        if (this.dot9.x1 === this.dot9.x2) {
+          this.dot9.x1 = 830
+          this.line4 = 4
+        }
+      }
+      if (this.line4 === 4) {
+        this.dot10.y1 += 1
+        this.drawPoint(ctx, this.dot10.x1, this.dot10.y1)
+        if (this.dot10.y1 === this.dot10.y2) {
+          this.dot10.y1 = 516
+          this.line4 = 1
+        }
+      }
+      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)
+      }
+      this.af = window.requestAnimationFrame(this.animate)
+    }
+  }
+}
+</script>
+  <style lang="stylus" scoped>
+  @import '~@css/mixin'
+  .canvas_container
+    position absolute
+    top 0
+    left 0
+    _wh(946px, 982px)
+    // background red
+  </style>

src/pages/shunhe/LogisticsProcess/index.vue

@@ -7,7 +7,7 @@
           <!-- <router-link to="/setup">设备监控</router-link> -->
         </div>
       </t-header>
-      <div class="container">
+      <div class="container" ref="container">
         <div class="left_wrap">
           <div class="item_wrap">
             <div class="item_tip">
@@ -226,15 +226,15 @@
           </div>
         </div>
       </div>
-      <section class="bottom"></section>
+      <section class="bottom" ref="bottom"></section>
     </section>
     </template>
 
 <script>
 import THeader from '@components/header.vue'
 import TWorkshop from './workshop'
-// import {homepageData} from '@js/getData2.js'
-import {homepageData} from '@js/mork2.js'
+import {homepageData} from '@js/getData2.js'
+// import {homepageData} from '@js/mork2.js'
 export default {
   name: 'LogisticsProcess',
   components: {
@@ -269,7 +269,7 @@ export default {
         timer1: null,
         timer2: null,
         step: 0.4, // 数值越大速度滚动越快
-        limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
+        limitMoveNum: window.screen.height <= 1080 ? 8 : 9, // 开始无缝滚动的数据量 this.dataList.length
         hoverStop: true, // 是否开启鼠标悬停stop
         direction: 1, // 0向下 1向上 2向左 3向右
         openWatch: true, // 开启数据实时监控刷新dom
@@ -283,6 +283,11 @@ export default {
     clearInterval(this.timer1)
     clearInterval(this.timer2)
     this.refresh()
+    if (window.screen.height <= 1080) {
+      this.$refs.container.style.paddingTop = '0.8%'
+      this.$refs.container.style.height = '90%'
+      this.$refs.bottom.style.height = '2%'
+    }
   },
   beforeDestroy () {
     this.$once('hook:beforeDestroy', () => {

src/pages/shunhe/LogisticsProcess/workshop.vue

@@ -650,14 +650,15 @@
 </template>
 
 <script>
-import TCanvas from './canvas_1.vue'
+import TCanvas1 from './canvas_1.vue'
+import TCanvas2 from './canvas_2.vue'
 import DevicePop from '@components/devicepop.vue'
-// import {homepageEquipment} from '@js/getData2.js'
-import {homepageEquipment} from '@js/mork2.js'
+import {homepageEquipment} from '@js/getData2.js'
+// import {homepageEquipment} from '@js/mork2.js'
 export default {
   name: 'workshop',
   components: {
-    TCanvas: TCanvas,
+    TCanvas: window.screen.height <= 1080 ? TCanvas2 : TCanvas1,
     DevicePop: DevicePop
   },
   data () {