添加设备图片

src/pages/modules/home/canvas.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*1200
+export default {
+  data () {
+    return {
+      af: undefined,
+      points: [{x1: 305, y1: 563, x2: 305, y2: 550}, {x1: 419, y1: 514, x2: 419, y2: 494}, {x1: 453, y1: 282, x2: 550, y2: 282}, {x1: 830, y1: 395, x2: 830, y2: 474}, {x1: 830, y1: 499, x2: 830, y2: 563}, {x1: 830, y1: 516, x2: 488, y2: 516}, {x1: 488, y1: 516, x2: 488, y2: 563}],
+      dot4: {x1: 305, y1: 563, x2: 305, y2: 550},
+      dot5: {x1: 419, y1: 514, x2: 419, y2: 494},
+      dot6: {x1: 453, y1: 282, x2: 550, y2: 282},
+      line2: 1,
+      line3: 1,
+      dot7: {x1: 830, y1: 395, x2: 830, y2: 474},
+      dot8: {x1: 830, y1: 499, x2: 830, y2: 563},
+      dot9: {x1: 830, y1: 516, x2: 488, y2: 516},
+      dot10: {x1: 488, y1: 516, x2: 488, y2: 563},
+      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 = 560
+          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 = 510
+          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 = 395
+          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 = 499
+          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 '~@style/mixin'
+.canvas_container
+  position absolute
+  top 0
+  left 0
+  _wh(946px, 982px)
+  // background red
+</style>

src/pages/modules/home/devicepop.vue

@@ -0,0 +1,190 @@
+<template>
+  <div v-if="pkId === data.equipment" class="popup_wraper" :class="{'popup_wraper_down': direction === 'down'}">
+    <div class="popup_arrow" :class="{'popup_arrow_down': direction === 'down'}">
+      <img src="../../../images/device/arrow.png">
+    </div>
+    <div class="popup_bg">
+      <div class="popup_block">
+        <div v-show="data.hasOwnProperty('equipmentName') === true || data.hasOwnProperty('statusChinese') === true" class="pop_header">
+          <div v-show="data.hasOwnProperty('equipmentName') === true" class="pop_name">{{data.equipmentName}}</div>
+          <div v-show="data.hasOwnProperty('statusChinese') === true" class="pop_status">
+            <div class="pop_status_dot" :class="['green', 'yellow', 'gray', 'red'][Number(data.status) - 1]"></div>
+            <div class="pop_status_text fgray">{{ data.statusChinese }}</div>
+          </div>
+        </div>
+        <div class="pop_content">
+          <div class="popup_item" v-for="e in data.data" :key="e.key">
+            <div class="popup_label">{{ e.key }}</div>
+            <div class="popup_val">{{ e.value }}</div>
+          </div>
+          <div v-if="data.hasOwnProperty('table') === true" class="popup_table_wrap">
+            <table v-if="data.table.length > 0" class="popup_table">
+              <tr>
+                <th width="40%">本日生产</th>
+                <th width="30%">客户</th>
+                <th width="30%" v-if="type === 'hlj'">已生产（千克）</th>
+                <th width="30%" v-else>已生产（块）</th>
+              </tr>
+              <tr v-for="(e, i) in data.table" :key="i">
+                <td width="40%">{{ e.material_name }}</td>
+                <td width="30%">{{ e.kh }}</td>
+                <td width="30%" v-if="type === 'hlj'">{{ e.weight }}</td>
+                <td width="30%" v-else>{{ e.qty }}</td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="iconfont icon-guanbi close_btn" @click="closePop"></div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'devicepop',
+  props: {
+    type: String,
+    pkId: String,
+    data: Object,
+    direction: String
+  },
+  methods: {
+    closePop () {
+      this.$emit('closePop')
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.popup_wraper
+  position absolute
+  left 50%
+  transform translateX(-50%) translateY(calc(-100% - 13px))
+  top 0
+  z-index 100
+  padding 20px 0 30px 0
+  background top center / 100% 100% url(../../../images/popup_bg.png) no-repeat
+  _wh(530px, auto)
+.popup_wraper_down
+  top auto
+  bottom 0
+  transform translateX(-50%) translateY(calc(100% + 13px))
+.popup_arrow
+  position absolute
+  _wh(22px, 23px)
+  left calc(50% - 11px)
+  bottom -23px
+  // animation todown 1.5s ease-in-out infinite
+  img
+    _wh(100%, 100%)
+.popup_arrow_down
+  bottom auto
+  top -23px
+  // animation toUp 1.5s ease-in-out infinite
+  img
+    transform rotateZ(180deg)
+.popup_bg
+  _wh(100%, auto)
+  background none
+  overflow hidden
+.popup_block
+  _wh(100%,100%)
+  padding 0
+.pop_header
+    _wh(calc(100% - 28px), 43px)
+    padding 15px 5px 0 5px
+    margin 0 14px
+    _fj(flex-end)
+    background top center / 100% 18px url(../../../images/popup_line.png) no-repeat
+.pop_name
+  width 50%
+  _font(14px,28px,#32C5FF,,left)
+  text-shadow 2px 2px 4px #A6E6FF
+  margin-bottom 8px
+.pop_status
+  _wh(50%, 28px)
+  _fj(flex-end)
+.pop_status_dot
+    _wh(15px, 15px)
+    border-radius 50%
+    margin-right 10px
+.pop_status_text
+    _font(16px, 28px, #fff,,)
+.pop_content
+  _wh(calc(100% - 14px), auto)
+  padding 0 5px
+  margin 0 7px
+  overflow-y auto
+  _fj(flex-start)
+  align-content flex-start
+  flex-wrap wrap
+.popup_item
+    _wh(calc(50% - 14px), 36px)
+    _fj(row,flex-start)
+    background-color rgba(50,197,255,50%)
+    border-left 3px solid #fdfd0f
+    margin 0 7px 5px 7px
+    padding 0 5px 0 5px
+.popup_label
+    width 80px
+    _font(12px, 36px, #fff,,left)
+.popup_val
+    _wh(calc(100% - 80px), 100%)
+    _font(12px, 15px, #0ff,,left)
+    word-break break-all
+    _fj(center)
+    span
+      font-size 13px
+      color #fff
+.icon-guanbi
+    position absolute
+    top -30px
+    right -30px
+    _wh(30px, 30px)
+    _font(18px, 30px, #fff,,center)
+    border 1px solid #fff
+    border-radius 50%
+    background transparent
+@keyframes todown {
+    0% {
+      transform: translateY(0)
+    }
+    100% {
+      transform: translateY(60px)
+    }
+}
+@keyframes toUp {
+    0% {
+      transform: translateY(0)
+    }
+    100% {
+      transform: translateY(-60px)
+    }
+}
+.popup_table_wrap
+  width 100%
+  max-height 132px
+.popup_table
+  width calc(100% - 14px)
+  height auto
+  margin 0 7px
+  tr
+    th
+      _font(12px, 24px, #0ff,,left)
+      background-color #262f52
+      padding 0 10px
+    td
+      _font(13px, 18px, #fff,,left)
+      min-height 24px
+      padding 0 10px
+      vertical-align middle
+    &:nth-child(2n)
+      td
+        background rgba(38,47,82,0.50)
+    &:nth-child(2n+1)
+      td
+        background rgba(38,47,82,0.80)
+</style>