canvas

src/config/Easing.js

@@ -0,0 +1,189 @@
+/* eslint-disable */
+/**
+ * The Ease class provides a collection of easing functions for use with tween.js.
+ */
+const Easing = {
+  Linear: {
+    None: function (amount) {
+      return amount;
+    }
+  },
+  Quadratic: {
+    In: function (amount) {
+      return amount * amount;
+    },
+    Out: function (amount) {
+      return amount * (2 - amount);
+    },
+    InOut: function (amount) {
+      if ((amount *= 2) < 1) {
+        return 0.5 * amount * amount;
+      }
+      return -0.5 * (--amount * (amount - 2) - 1);
+    }
+  },
+  Cubic: {
+    In: function (amount) {
+      return amount * amount * amount;
+    },
+    Out: function (amount) {
+      return --amount * amount * amount + 1;
+    },
+    InOut: function (amount) {
+      if ((amount *= 2) < 1) {
+        return 0.5 * amount * amount * amount;
+      }
+      return 0.5 * ((amount -= 2) * amount * amount + 2);
+    }
+  },
+  Quartic: {
+    In: function (amount) {
+      return amount * amount * amount * amount;
+    },
+    Out: function (amount) {
+      return 1 - --amount * amount * amount * amount;
+    },
+    InOut: function (amount) {
+      if ((amount *= 2) < 1) {
+        return 0.5 * amount * amount * amount * amount;
+      }
+      return -0.5 * ((amount -= 2) * amount * amount * amount - 2);
+    }
+  },
+  Quintic: {
+    In: function (amount) {
+      return amount * amount * amount * amount * amount;
+    },
+    Out: function (amount) {
+      return --amount * amount * amount * amount * amount + 1;
+    },
+    InOut: function (amount) {
+      if ((amount *= 2) < 1) {
+        return 0.5 * amount * amount * amount * amount * amount;
+      }
+      return 0.5 * ((amount -= 2) * amount * amount * amount * amount + 2);
+    }
+  },
+  Sinusoidal: {
+    In: function (amount) {
+      return 1 - Math.cos((amount * Math.PI) / 2);
+    },
+    Out: function (amount) {
+      return Math.sin((amount * Math.PI) / 2);
+    },
+    InOut: function (amount) {
+      return 0.5 * (1 - Math.cos(Math.PI * amount));
+    }
+  },
+  Exponential: {
+    In: function (amount) {
+      return amount === 0 ? 0 : Math.pow(1024, amount - 1);
+    },
+    Out: function (amount) {
+      return amount === 1 ? 1 : 1 - Math.pow(2, -10 * amount);
+    },
+    InOut: function (amount) {
+      if (amount === 0) {
+        return 0;
+      }
+      if (amount === 1) {
+        return 1;
+      }
+      if ((amount *= 2) < 1) {
+        return 0.5 * Math.pow(1024, amount - 1);
+      }
+      return 0.5 * (-Math.pow(2, -10 * (amount - 1)) + 2);
+    }
+  },
+  Circular: {
+    In: function (amount) {
+      return 1 - Math.sqrt(1 - amount * amount);
+    },
+    Out: function (amount) {
+      return Math.sqrt(1 - --amount * amount);
+    },
+    InOut: function (amount) {
+      if ((amount *= 2) < 1) {
+        return -0.5 * (Math.sqrt(1 - amount * amount) - 1);
+      }
+      return 0.5 * (Math.sqrt(1 - (amount -= 2) * amount) + 1);
+    }
+  },
+  Elastic: {
+    In: function (amount) {
+      if (amount === 0) {
+        return 0;
+      }
+      if (amount === 1) {
+        return 1;
+      }
+      return -Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
+    },
+    Out: function (amount) {
+      if (amount === 0) {
+        return 0;
+      }
+      if (amount === 1) {
+        return 1;
+      }
+      return Math.pow(2, -10 * amount) * Math.sin((amount - 0.1) * 5 * Math.PI) + 1;
+    },
+    InOut: function (amount) {
+      if (amount === 0) {
+        return 0;
+      }
+      if (amount === 1) {
+        return 1;
+      }
+      amount *= 2;
+      if (amount < 1) {
+        return -0.5 * Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
+      }
+      return 0.5 * Math.pow(2, -10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI) + 1;
+    }
+  },
+  Back: {
+    In: function (amount) {
+      var s = 1.70158;
+      return amount * amount * ((s + 1) * amount - s);
+    },
+    Out: function (amount) {
+      var s = 1.70158;
+      return --amount * amount * ((s + 1) * amount + s) + 1;
+    },
+    InOut: function (amount) {
+      var s = 1.70158 * 1.525;
+      if ((amount *= 2) < 1) {
+          return 0.5 * (amount * amount * ((s + 1) * amount - s));
+      }
+      return 0.5 * ((amount -= 2) * amount * ((s + 1) * amount + s) + 2);
+    }
+  },
+  Bounce: {
+    In: function (amount) {
+      return 1 - Easing.Bounce.Out(1 - amount);
+    },
+    Out: function (amount) {
+      if (amount < 1 / 2.75) {
+        return 7.5625 * amount * amount;
+      }
+      else if (amount < 2 / 2.75) {
+        return 7.5625 * (amount -= 1.5 / 2.75) * amount + 0.75;
+      }
+      else if (amount < 2.5 / 2.75) {
+        return 7.5625 * (amount -= 2.25 / 2.75) * amount + 0.9375;
+      }
+      else {
+        return 7.5625 * (amount -= 2.625 / 2.75) * amount + 0.984375;
+      }
+    },
+    InOut: function (amount) {
+      if (amount < 0.5) {
+        return Easing.Bounce.In(amount * 2) * 0.5;
+      }
+      return Easing.Bounce.Out(amount * 2 - 1) * 0.5 + 0.5;
+    }
+  }
+}
+
+export default Easing

src/pages/canvas.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="canvas-wrap">
+    <canvas id="lineCanvas" width="400" height="500"></canvas>
+    <canvas id="carCanvas" width="400" height="500"></canvas>
+  </div>
+</template>
+
+<script>
+import Easing from '@config/Easing.js'
+export default {
+  data () {
+    return {
+      keyPoints: [{x: 160, y: 200}, {x: 60, y: 200}, {x: 60, y: 400}, {x: 160, y: 400}]
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      this.handleCanvasLine()
+    }, 5000)
+    setTimeout(() => {
+      this.handleCanvasCar()
+    }, 5900)
+  },
+  methods: {
+    handleCanvasLine () {
+      const canvas = document.querySelector('#lineCanvas')
+      const ctx = canvas.getContext('2d')
+      let img = new Image()
+      img.src = require('../images/che.png')
+      // 设置线条样式
+      ctx.lineWidth = 1
+      ctx.lineJoin = 'round'
+      ctx.lineCap = 'round'
+      let prevX = this.keyPoints[0].x
+      let prevY = this.keyPoints[0].y
+      let nextX
+      let nextY
+      // 第一帧执行的时间
+      let startTime
+      // 期望动画持续的时间
+      const duration = 900
+      // 动画被切分成若干段,每一段所占总进度的比例
+      const partProportion = 1 / (this.keyPoints.length - 1)
+      // 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
+      let lineIndexCache = 1
+      // 动画帧绘制方法currentTime是requestAnimation执行回调方法step时会传入的一个执行时的时间(由performance.now()获得).
+      const step = (currentTime) => {
+        // 第一帧绘制时记录下开始的时间
+        !startTime && (startTime = currentTime)
+        // 已经过去的时间(ms)
+        const timeElapsed = currentTime - startTime
+        // 动画执行的进度 {0,1}
+        let progress = Math.min(timeElapsed / duration, 1)
+        // 加入二次方缓动函数
+        progress = Easing.Quadratic.In(progress)
+        // 描述当前所绘制的是第几段线段
+        const lineIndex = Math.min(Math.floor(progress / partProportion) + 1, this.keyPoints.length - 1)
+        //  当前线段的进度 {0,1}
+        const partProgress = (progress - (lineIndex - 1) * partProportion) / partProportion
+        // 绘制方法
+        const draw = () => {
+          ctx.strokeStyle = `rgba(${81 + 175 * Math.abs(1 - progress * 2)}, ${160 - 160 * Math.abs(progress * 2 - 1)}, ${255},${1})`
+          ctx.beginPath()
+          ctx.moveTo(prevX, prevY)
+          // 当绘制下一段线段前,把上一段末尾缺失的部分补齐
+          if (lineIndex !== lineIndexCache) {
+            ctx.lineTo(this.keyPoints[lineIndex - 1].x, this.keyPoints[lineIndex - 1].y)
+            lineIndexCache = lineIndex
+          }
+          prevX = nextX = ~~(this.keyPoints[lineIndex - 1].x + ((this.keyPoints[lineIndex]).x - this.keyPoints[lineIndex - 1].x) * partProgress)
+          prevY = nextY = ~~(this.keyPoints[lineIndex - 1].y + ((this.keyPoints[lineIndex]).y - this.keyPoints[lineIndex - 1].y) * partProgress)
+          ctx.lineTo(nextX, nextY)
+          ctx.stroke()
+        }
+        draw()
+        if (progress < 1) {
+          requestAnimationFrame(step)
+        } else {
+          console.log('动画执行完毕')
+        }
+      }
+      requestAnimationFrame(step)
+    },
+    handleCanvasCar () {
+      const canvas = document.querySelector('#carCanvas')
+      const ctx = canvas.getContext('2d')
+      let img = new Image()
+      img.src = require('../images/che.png')
+      let nextX
+      let nextY
+      // 第一帧执行的时间
+      let startTime
+      // 期望动画持续的时间
+      const duration = 2000
+      // 动画被切分成若干段,每一段所占总进度的比例
+      const partProportion = 1 / (this.keyPoints.length - 1)
+      // 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
+      // 动画帧绘制方法currentTime是requestAnimation执行回调方法step时会传入的一个执行时的时间(由performance.now()获得).
+      const step = (currentTime) => {
+        // 第一帧绘制时记录下开始的时间
+        !startTime && (startTime = currentTime)
+        // 已经过去的时间(ms)
+        const timeElapsed = currentTime - startTime
+        // 动画执行的进度 {0,1}
+        let progress = Math.min(timeElapsed / duration, 1)
+        // 加入二次方缓动函数
+        progress = Easing.Quadratic.In(progress)
+        // 描述当前所绘制的是第几段线段
+        const lineIndex = Math.min(Math.floor(progress / partProportion) + 1, this.keyPoints.length - 1)
+        //  当前线段的进度 {0,1}
+        const partProgress = (progress - (lineIndex - 1) * partProportion) / partProportion
+        // 绘制方法
+        const draw = () => {
+          ctx.beginPath()
+          ctx.clearRect(0, 0, 400, 500)
+          nextX = ~~(this.keyPoints[lineIndex - 1].x + ((this.keyPoints[lineIndex]).x - this.keyPoints[lineIndex - 1].x) * partProgress)
+          nextY = ~~(this.keyPoints[lineIndex - 1].y + ((this.keyPoints[lineIndex]).y - this.keyPoints[lineIndex - 1].y) * partProgress)
+          ctx.drawImage(img, nextX - 15, nextY - 50, 30, 50)
+        }
+        draw()
+        if (progress < 1) {
+          requestAnimationFrame(step)
+        } else {
+          console.log('动画执行完毕')
+        }
+      }
+      requestAnimationFrame(step)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.canvas-wrap
+  position relative
+  width 100%
+  height 100%
+#lineCanvas
+  position absolute
+  left 0
+  top 0
+  z-index 10
+#carCanvas
+  position absolute
+  left 0
+  top 0
+  z-index 11
+</style>

src/pages/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="zd-row contianer">
+  <div class="contianer">
-    <div class="zd-col-8 l-wrap">
+    <div class="zd-row content">
-      <div class="zd-row filter-item border-b-0">
+      <div class="l-wrap">
-        <div class="zd-col-10 filter-label">站点</div>
+        <div class="zd-row">
-        <div class="zd-col-13 filter-value">10-10-1</div>
+          <div class="zd-col-24 filter-name">站点：10-10-1</div>
         </div>
+        <div class="item-wrap">
           <div class="zd-row filter-item">
             <div class="zd-col-10 filter-label">目标站点</div>
             <div class="zd-col-13 filter-value">
@@ -34,6 +35,8 @@
           <div class="zd-row jcflexend button-wrap">
             <button class="button btn-primary">确认下料</button>
           </div>
+        </div>
+        <div class="item-wrap">
           <div class="zd-row filter-item">
             <div class="zd-col-10 filter-label">区域</div>
             <div class="zd-col-13 filter-value">
@@ -50,6 +53,8 @@
           <div class="zd-row jcflexend button-wrap">
             <button class="button btn-primary">区域管控</button>
           </div>
+        </div>
+        <div class="item-wrap">
           <div class="zd-row filter-item">
             <div class="zd-col-24 filter-value">
               <el-select v-model="value" placeholder="请选择">
@@ -62,50 +67,81 @@
               </el-select>
             </div>
           </div>
+        </div>
         <div class="zd-row button-wrap">
-        <button class="zd-col-6_w button button_s btn-primary">取消</button>
+          <button class="zd-col-4 button button_s btn-primary">取消</button>
-        <button class="zd-col-6_w button button_s btn-primary">强制完成</button>
+          <button class="zd-col-6 button button_s btn-primary">强制完成</button>
-        <button class="zd-col-6_w button button_s btn-primary">放货确认</button>
+          <button class="zd-col-6 button button_s btn-primary">放货确认</button>
-        <button class="zd-col-6_w button button_s btn-primary">卸货确认</button>
+          <button class="zd-col-6 button button_s btn-primary" @click="handleCanvasBG">卸货确认</button>
+        </div>
+      </div>
+      <div class="r-wrap" @click="rectClick">
+        <t-canvas></t-canvas>
       </div>
     </div>
-    <div class="zd-col-16 r-wrap"></div>
   </div>
 </template>
 
 <script>
+import TCanvas from './canvas.vue'
 export default {
+  components: {
+    TCanvas
+  },
   data () {
     return {
       options: [{
         value: '选项1',
         label: '黄金糕'
       }],
-      value: ''
+      value: '',
+      points: [[160, 200], [60, 200], [60, 400], [160, 400]],
+      mapCoordinateList: [{x: 160, y: 200}, {x: 60, y: 200}, {x: 60, y: 400}, {x: 160, y: 400}]
+    }
+  },
+  methods: {
+    rectClick () {
+      var ev = window.event
+      // 获取相对于当前所指向对象的位置坐标
+      alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
+    },
+    // handleCanvasBG () {
+    //   this.points.forEach(([x, y]) => {
+    //     this.drawDot(x, y)
+    //   })
+    // },
+    // drawDot (x1, y1, r) {
+    //   const myContext = document.getElementById('canvasBG')
+    //   const ctx = myContext.getContext('2d')
+    //   // ctx.save()
+    //   ctx.beginPath()
+    //   ctx.fillStyle = 'red'
+    //   ctx.arc(x1, y1, r)
+    // },
+    handleCanvasBG () {
+      const myContext = document.getElementById('canvasBG')
+      const ctx = myContext.getContext('2d')
+      ctx.beginPath()
+      this.mapCoordinateList.forEach((item, index) => {
+        if (index + 1 < this.mapCoordinateList.length) {
+          ctx.moveTo(item.x, item.y)
+          ctx.lineTo(this.mapCoordinateList[index + 1].x, this.mapCoordinateList[index + 1].y)
+          ctx.strokeStyle = 'yellow'
+          ctx.lineWidth = '20'
+          ctx.lineCap = 'round'
+        } else {
+          // ctx.moveTo(item.x, item.y)
+          // ctx.lineTo(this.mapCoordinateList[0].x, this.mapCoordinateList[0].y)
+        }
+      })
+      ctx.stroke()
     }
   }
 }
 </script>
 
 <style lang="stylus" scoped>
-@import '~@style/mixin'
+// @import '~@style/mixin'
-.contianer
+#canvasBG
-  _wh(100vw, 100vh)
+  background-color: #999
-.l-wrap
-  height 100%
-  padding 1%
-.r-wrap
-  height 100%
-  padding 1%
-.zd-col-6_w
-  width 24%
-.filter-item
-  height 50px
-  border-bottom 2px solid #fff
-.border-b-0
-  border-bottom 0
-.filter-label
-  _font(14px, 50px, #fff,,)
-.filter-value
-  _font(16px, 50px, #fff,,right)
 </style>

src/style/layout.styl

@@ -11,15 +11,31 @@
   font-size: 16px;
 }
 .el-input__inner {
-  height 50px;
+  height 40px;
-  line-height: 50px;
+  font-size: 14px;
+  line-height: 40px;
+  // text-align: right;
   border: 0;
   background-color: transparent;
-  color: #fff;
+  color: #b0c7e8;
+}
+.el-select-dropdown__item {
+  // text-align: right;
+  color: #b0c7e8;
+}
+.el-select-dropdown {
+  border-color: #47567d;
+  background-color: #47567d;
+}
+.el-popper[x-placement^=bottom] .popper__arrow::after {
+  border-bottom-color: #47567d;
+}
+.el-popper[x-placement^=bottom] .popper__arrow {
+  border-bottom-color: #47567d;
 }
 
 .button-wrap {
-  margin: 30px 0 50px 0;
+  margin-top: 30px;
 }
 
 .button {
@@ -29,13 +45,36 @@
   padding: 0 10px
   border: 1px solid #fff;
   border-radius: 10px;
-  background-color: transparent;
+  background: transparent;
 }
 .button_s {
   font-size: 12px;
   padding: 0 2px
 }
 .btn-primary {
-  background-color: #14A3F3;
+  background: linear-gradient(0deg, #005ad2, #00a0ec);
-  border-color: #14A3F3;
+  border-color: #083a7e;
 }
+.contianer
+  _wh(100vw, 100vh)
+  padding 2%
+.content
+  _wh(100%, 100%)
+.l-wrap
+  _wh(34%, 100%)
+.r-wrap
+  _wh(65%, 100%)
+  background: linear-gradient(90deg, #213a62, #243a63);
+  border-radius: 10px;
+.item-wrap
+  width 100%
+  padding 15px 8px
+  background: linear-gradient(90deg, #213a62, #243a63);
+  border-radius: 10px;
+  margin-top: 20px;
+.filter-name
+  _font(18px, 18px, #fff, 700,)
+.filter-label
+  _font(16px, 40px, #cee4ff,,)
+.filter-value
+  _font(14px, 40px, #b0c7e8,,right)

src/style/reset.css

@@ -17,7 +17,7 @@ body, html {
 	-webkit-user-select: auto;
 	-ms-user-select: auto;
 	user-select: auto;
-	background-color: #1058A0;
+	background: linear-gradient(358deg, #031229,#1d2b48,#0a122c);
 }
 
 input[type="button"], input[type="submit"], input[type="search"], input[type="reset"], textarea, select{