物流工艺
This commit is contained in:
187
src/components/canvas.vue
Normal file
187
src/components/canvas.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="canvas_container" @click="rectClick">
|
||||
<canvas id="myCanvas" width="946" height="822"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
ctx: '',
|
||||
points: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
var canvas = document.getElementById('myCanvas')
|
||||
this.ctx = canvas.getContext('2d')
|
||||
this.points = [
|
||||
|
||||
{x: 50, y: 50},
|
||||
|
||||
{x: 100, y: 150},
|
||||
|
||||
{x: 250, y: 200},
|
||||
|
||||
{x: 300, y: 300},
|
||||
|
||||
{x: 350, y: 250},
|
||||
|
||||
{x: 400, y: 350}
|
||||
|
||||
]
|
||||
this.trail()
|
||||
// this.animate()
|
||||
},
|
||||
methods: {
|
||||
rectClick () {
|
||||
var ev = window.event
|
||||
// 获取相对于当前所指向对象的位置坐标
|
||||
alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
|
||||
},
|
||||
trail () {
|
||||
var canvas = document.getElementById('myCanvas')
|
||||
let ctx = canvas.getContext('2d')
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(455, 240)
|
||||
ctx.lineTo(550, 240)
|
||||
ctx.moveTo(830, 332)
|
||||
ctx.lineTo(830, 370)
|
||||
ctx.moveTo(830, 407)
|
||||
ctx.lineTo(830, 426)
|
||||
ctx.moveTo(830, 426)
|
||||
ctx.lineTo(830, 464)
|
||||
ctx.moveTo(830, 426)
|
||||
ctx.arcTo(600, 426, 576, 550, 50)
|
||||
ctx.moveTo(645, 683)
|
||||
ctx.lineTo(625, 683)
|
||||
ctx.moveTo(778, 683)
|
||||
ctx.lineTo(800, 683)
|
||||
ctx.moveTo(711, 731)
|
||||
ctx.lineTo(711, 749)
|
||||
ctx.moveTo(305, 470)
|
||||
ctx.lineTo(305, 440)
|
||||
ctx.moveTo(419, 435)
|
||||
ctx.lineTo(419, 420)
|
||||
ctx.strokeStyle = '#00c8da'
|
||||
ctx.lineWidth = 1
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(500, 240, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(830, 352, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(830, 445, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(700, 426, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(635, 683, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(790, 683, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(711, 740, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(305, 461, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(419, 429, 4, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = 'yellow'
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = 'yellow'
|
||||
ctx.stroke()
|
||||
},
|
||||
drawPoint (x, y) {
|
||||
this.ctx.beginPath()
|
||||
|
||||
this.ctx.arc(x, y, 5, 0, 2 * Math.PI)
|
||||
|
||||
this.ctx.fill()
|
||||
|
||||
this.ctx.closePath()
|
||||
},
|
||||
drawLine (x1, y1, x2, y2) {
|
||||
this.ctx.beginPath()
|
||||
|
||||
this.ctx.moveTo(x1, y1)
|
||||
|
||||
this.ctx.lineTo(x2, y2)
|
||||
|
||||
this.ctx.stroke()
|
||||
|
||||
this.ctx.closePath()
|
||||
},
|
||||
animate () {
|
||||
var canvas = document.getElementById('myCanvas')
|
||||
this.ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
for (let i = 0; i < this.points.length; i++) {
|
||||
this.drawPoint(this.points[i].x, this.points[i].y)
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.points.length - 1; i++) {
|
||||
this.drawLine(this.points[i].x, this.points[i].y, this.points[i + 1].x, this.points[i + 1].y)
|
||||
}
|
||||
|
||||
// requestAnimationFrame(this.animate)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.canvas_container
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
_wh(946px, 822px)
|
||||
// background red
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="center_wrapper">
|
||||
<t-canvas></t-canvas>
|
||||
<div class="status_wrap">
|
||||
<div class="status_item">
|
||||
<div class="status_tip green"></div>
|
||||
@@ -251,6 +252,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue_line blue_line_1"></div>
|
||||
<div class="blue_line blue_line_2"></div>
|
||||
<div class="machine_block machine_block_4">
|
||||
<div v-if="press.length > 3" class="yj_1600_block">
|
||||
<div class="p_device weilan_1600_wrap">
|
||||
@@ -399,10 +402,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TCanvas from '@components/canvas.vue'
|
||||
// import {homepageEquipment} from '@js/getData2.js'
|
||||
import {homepageEquipment} from '@js/mork2.js'
|
||||
export default {
|
||||
name: 'workshop',
|
||||
components: {
|
||||
TCanvas
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
mixingMachine: [],
|
||||
@@ -516,20 +523,23 @@ export default {
|
||||
.machine_block_2
|
||||
_wh(35%, 23%)
|
||||
left 58%
|
||||
top 21%
|
||||
top 17%
|
||||
.machine_block_3
|
||||
_wh(55%, 30%)
|
||||
left 2%
|
||||
top 58%
|
||||
_wh(66%, 32%)
|
||||
top 57%
|
||||
padding .1rem 3.5%
|
||||
.machine_block_4
|
||||
_wh(38%, 34%)
|
||||
left 60%
|
||||
top 54%
|
||||
_wh(31%, 32%)
|
||||
left auto
|
||||
right 0
|
||||
top 57%
|
||||
border-left none
|
||||
border-bottom none
|
||||
box-shadow 5px -5px 8px rgba(0, 135, 172, .6)
|
||||
.machine_block_5
|
||||
_wh(14%, auto)
|
||||
left 61%
|
||||
top 75%
|
||||
_wh(14%, 11%)
|
||||
left 68.2%
|
||||
top 78%
|
||||
padding 0.1rem
|
||||
.machine_block_6
|
||||
_wh(90%, 9%)
|
||||
@@ -745,7 +755,7 @@ export default {
|
||||
position absolute
|
||||
left: 5%;
|
||||
top: 5%;
|
||||
_wh(33%, 40%)
|
||||
_wh(41%, 40%)
|
||||
.weilan_1600_wrap
|
||||
_wh(70%, 100%)
|
||||
.slw_1600_wrap_1
|
||||
@@ -854,7 +864,7 @@ export default {
|
||||
_fj(center)
|
||||
flex-wrap wrap
|
||||
.lz_hj
|
||||
_wh(25%, 10%)
|
||||
_wh(21%, 30%)
|
||||
img
|
||||
_wh(100%, 100%)
|
||||
.lz_hlj_wrap
|
||||
@@ -879,14 +889,14 @@ export default {
|
||||
.ktp_yao_front_wrap
|
||||
_wh(1.5%, auto)
|
||||
transform: rotate(-90deg);
|
||||
top: 19%;
|
||||
top: 20%;
|
||||
left: 29.5%;
|
||||
.ktp_yao_front
|
||||
_wh(100%, auto)
|
||||
.cpj_ssx_wrap
|
||||
_wh(12%, auto)
|
||||
left: 81%;
|
||||
top: 48%;
|
||||
top: 46%;
|
||||
.ssx_wrap
|
||||
_wh(100%, auto)
|
||||
_fj()
|
||||
@@ -898,6 +908,25 @@ export default {
|
||||
_wh(18%, auto)
|
||||
top: -51%;
|
||||
left: 20%;
|
||||
.blue_line
|
||||
position absolute
|
||||
border-radius 10px
|
||||
border 1px solid #00c8da
|
||||
border-top 0
|
||||
border-right 0
|
||||
.blue_line_1
|
||||
left: 69%;
|
||||
top: 57%;
|
||||
box-shadow -5px 5px 8px rgba(0,135,172,0.6)
|
||||
_wh(15.5%, 17%)
|
||||
border-bottom-right-radius 0
|
||||
.blue_line_2
|
||||
left: auto
|
||||
right 0
|
||||
top: 74%
|
||||
box-shadow 5px 5px 8px rgba(0,135,172,0.6)
|
||||
_wh(15.5%, 15%)
|
||||
border-top-left-radius 0
|
||||
.rotate_1
|
||||
animation rotate_1 1.5s linear 1.5s infinite alternate-reverse
|
||||
@keyframes rotate_1 {
|
||||
|
||||
Reference in New Issue
Block a user