751 lines
25 KiB
Vue
751 lines
25 KiB
Vue
<template>
|
||
<div id="root" class="root-box">
|
||
<canvas
|
||
id="productLine"
|
||
width="1640px"
|
||
height="235px"
|
||
style="
|
||
width: 1640px;
|
||
height: 235px;
|
||
transform: scale(1);
|
||
top: 0px;
|
||
left: 0px;
|
||
"
|
||
class="canvas"
|
||
>您的浏览器版本过低，不支持canvas,请升级浏览器或使用chrome浏览器</canvas
|
||
>
|
||
<canvas
|
||
id="glassAndAlarm"
|
||
width="1640px"
|
||
height="235px"
|
||
style="
|
||
width: 1640px;
|
||
height: 235px;
|
||
transform: scale(1);
|
||
top: 0px;
|
||
left: 0px;
|
||
"
|
||
class="canvas"
|
||
></canvas>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { debounce } from '@/utils/debounce'
|
||
export default {
|
||
name: 'ProductionLineDiagram',
|
||
data() {
|
||
return {
|
||
canvas: '',
|
||
ctx: '',
|
||
root: '',
|
||
canvasReset: '',
|
||
canvas2: '',
|
||
ctx2: '',
|
||
canvasReset2: '',
|
||
timer: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
this.root = document.querySelector('#root')
|
||
this.canvas = document.querySelector('#productLine')
|
||
this.canvas2 = document.querySelector('#glassAndAlarm')
|
||
this.ctx = this.canvas.getContext('2d')
|
||
this.ctx2 = this.canvas2.getContext('2d')
|
||
this.canvasReset = debounce(() => {
|
||
this.resetSize()
|
||
}, 500)
|
||
this.canvasReset2 = debounce(() => {
|
||
this.resetSize2()
|
||
}, 500)
|
||
window.addEventListener('resize', () => {
|
||
this.canvasReset()
|
||
this.canvasReset2()
|
||
})
|
||
this.getChart()
|
||
this.resetSize()
|
||
this.resetSize2()
|
||
this.getGlass()
|
||
this.getAlarm()
|
||
// this.timer = setInterval(this.getGlassAndAlarm, 1000)
|
||
},
|
||
methods: {
|
||
resetSize() {
|
||
let rw = parseFloat(getComputedStyle(this.root).width)
|
||
let rh = parseFloat(getComputedStyle(this.root).height)
|
||
let cw = parseFloat(this.canvas.style.width)
|
||
let ch = parseFloat(this.canvas.style.height)
|
||
let wx = rw / cw
|
||
let hx = rh / ch
|
||
let scale = wx > hx ? hx : wx
|
||
this.canvas.style.transform = 'scale(' + scale + ')'
|
||
this.canvas.style.top = (235 * (hx - 1)) / 2 + 'px'
|
||
this.canvas.style.left = (1640 * (wx - 1)) / 2 + 'px'
|
||
},
|
||
resetSize2() {
|
||
let rw = parseFloat(getComputedStyle(this.root).width)
|
||
let rh = parseFloat(getComputedStyle(this.root).height)
|
||
let cw = parseFloat(this.canvas2.style.width)
|
||
let ch = parseFloat(this.canvas2.style.height)
|
||
let wx = rw / cw
|
||
let hx = rh / ch
|
||
let scale = wx > hx ? hx : wx
|
||
this.canvas2.style.transform = 'scale(' + scale + ')'
|
||
this.canvas2.style.top = (235 * (hx - 1)) / 2 + 'px'
|
||
this.canvas2.style.left = (1640 * (wx - 1)) / 2 + 'px'
|
||
},
|
||
// 画底图===start
|
||
getChart() {
|
||
this.getArea1()
|
||
this.getArea2()
|
||
this.getArea3()
|
||
this.getText()
|
||
},
|
||
getArea1() {
|
||
// 部分1
|
||
this.drawRect(22, 43, 28, 22, '#B2FFC8', true)
|
||
this.drawRect(66, 43, 28, 22, '#B2FFC8', true)
|
||
this.drawRect(22, 161, 28, 22, '#B2FFC8', true)
|
||
this.drawRect(14, 86, 6, 22, '#FF5050', true)
|
||
this.drawRect(14, 122, 6, 22, '#FF5050', true)
|
||
this.drawRect(24, 92, 12, 12, '#FFA15F', true)
|
||
this.drawRect(24, 126, 12, 12, '#FFA15F', true)
|
||
this.drawCircle(30, 98, 4, '#FFDC5F')
|
||
this.drawCircle(30, 132, 4, '#FFDC5F')
|
||
this.drawRect(34, 97, 10, 2, '#FFDC5F', true)
|
||
this.drawRect(34, 131, 10, 2, '#FFDC5F', true)
|
||
this.drawRect(60, 102, 44, 34, '#FFA15F', true)
|
||
this.drawRect(60, 125, 48, 4, '#B2FFC8', true)
|
||
this.drawRect(59, 78, 12, 12, '#FFA15F', true)
|
||
this.drawCircle(65, 84, 4, '#FFDC5F')
|
||
this.drawRect(554, 51, 16, 147, '#9F59CA', true)
|
||
this.drawRect(554, 51, 16, 147, '#9F59CA', true)
|
||
this.drawRect(576, 51, 16, 147, '#9F59CA', true)
|
||
this.drawRect(82, 75, 510, 18, '#FFA15F', true) // 长黄
|
||
for (let i = 0; i < 26; i++) {
|
||
this.drawLine(101 + 19 * i, 75, 101 + 19 * i, 93, '#F7670D', 0.5)
|
||
}
|
||
this.drawLine(68, 84, 84, 93, '#FFDC5F', 2)
|
||
this.drawLine(84, 93, 102, 84, '#FFDC5F', 2)
|
||
this.drawRect(337, 67, 146, 34, '#E1E1E1', true)
|
||
this.drawRect(164, 74, 27, 22, '#EF779F', true)
|
||
this.drawRect(191, 74, 43, 22, '#FF5050', true)
|
||
this.drawRect(234, 74, 43, 22, '#5D76FD', true)
|
||
},
|
||
getArea2() {
|
||
// 淡紫色
|
||
this.drawRect(615, 52, 16, 16, '#D3D1FF', true)
|
||
this.drawRect(679, 52, 16, 16, '#D3D1FF', true)
|
||
this.drawCompS(615, 67)
|
||
this.drawCompS(656, 67)
|
||
this.drawCompS(615, 97)
|
||
this.drawCompS(656, 97)
|
||
this.drawCompS(615, 127)
|
||
this.drawCompS(656, 127)
|
||
this.drawRect(736, 52, 16, 12, '#D3D1FF', true)
|
||
this.drawRect(800, 52, 16, 12, '#D3D1FF', true)
|
||
this.drawCompL(736, 63)
|
||
this.drawCompL(779, 63)
|
||
this.drawCompL(736, 86)
|
||
this.drawCompL(779, 86)
|
||
this.drawCompL(736, 108)
|
||
this.drawCompL(779, 108)
|
||
this.drawRect(857, 52, 16, 12, '#D3D1FF', true)
|
||
this.drawRect(921, 52, 16, 12, '#D3D1FF', true)
|
||
this.drawCompL(857, 63)
|
||
this.drawCompL(900, 63)
|
||
this.drawCompL(857, 86)
|
||
this.drawCompL(900, 86)
|
||
this.drawCompL(857, 108)
|
||
this.drawCompL(900, 108)
|
||
this.drawRect(615, 154, 16, 12, '#D3D1FF', true)
|
||
this.drawRect(679, 154, 16, 12, '#D3D1FF', true)
|
||
this.drawRect(736, 129, 16, 12, '#D3D1FF', true)
|
||
this.drawRect(800, 129, 16, 12, '#D3D1FF', true)
|
||
this.drawRect(857, 129, 16, 12, '#D3D1FF', true)
|
||
this.drawRect(921, 129, 16, 12, '#D3D1FF', true)
|
||
this.drawRect(736, 140, 264, 14, '#D3D1FF', true)
|
||
this.drawRect(615, 167, 473, 16, '#D3D1FF', true)
|
||
this.drawRect(592, 197, 479, 16, '#D3D1FF', true)
|
||
// 紫色
|
||
this.drawRect(553, 35, 389, 16, '#D3D1FF', true)
|
||
this.drawRect(542, 35, 11, 16, '#9F59CA', false)
|
||
this.drawRect(695, 35, 19, 16, '#9F59CA', false)
|
||
this.drawRect(979, 153, 21, 16, '#9F59CA', false)
|
||
this.drawRect(1037, 168, 24, 16, '#9F59CA', false)
|
||
this.drawRect(540, 197, 52, 16, '#9F59CA', true)
|
||
this.drawRect(674, 197, 83, 16, '#9F59CA', false)
|
||
this.drawRect(1054, 198, 16, 16, '#9F59CA', false)
|
||
// 画线
|
||
this.drawMiddleLine()
|
||
},
|
||
getArea3() {
|
||
this.drawRect(1111, 193, 18, 18, '#B2FFC8', true)
|
||
this.drawRect(1084, 167, 20, 16, '#6DE08F', true)
|
||
this.drawRect(1056, 76, 18, 91, '#FFA15F', true)
|
||
this.drawRect(1056, 76, 208, 18, '#FFA15F', true)
|
||
this.drawRect(1077, 73, 44, 26, '#EF779F', true)
|
||
this.drawRect(1139, 69, 105, 34, '#E1E1E1', true)
|
||
for (let i = 0; i < 4; i++) {
|
||
this.drawLine(1056, 97 + 17 * i, 1074, 97 + 17 * i, '#F7670D', 0.5)
|
||
}
|
||
this.drawRect(1113, 167, 14, 14, '#FFA15F', true)
|
||
this.drawRect(1139, 195, 14, 14, '#FFA15F', true)
|
||
this.drawCircle(1120, 174, 4, '#FFDC5F')
|
||
this.drawCircle(1146, 202, 4, '#FFDC5F')
|
||
this.drawLine(1120, 178, 1120, 192, '#FFDC5F', 2, true)
|
||
this.drawLine(1146, 202, 1135, 185, '#FFDC5F', 2, true)
|
||
this.drawLine(1135, 185, 1146, 164, '#FFDC5F', 2, true)
|
||
this.drawRect(1155, 164, 6, 22, '#FF5050', true)
|
||
// 右侧绿色
|
||
this.drawRectD()
|
||
this.drawLine(1265, 76, 1288, 76, '#6DE08F', 1, false)
|
||
this.drawLine(1288, 60, 1288, 100, '#6DE08F', 1, false)
|
||
this.drawLine(1351, 65, 1351, 106, '#6DE08F', 1, false)
|
||
this.drawLine(1373, 65, 1373, 106, '#6DE08F', 1, false)
|
||
this.drawLine(1437, 60, 1437, 100, '#6DE08F', 1, false)
|
||
this.drawLine(1438, 78, 1462, 78, '#6DE08F', 1, false)
|
||
this.drawLine(1462, 80, 1462, 100, '#6DE08F', 1, false)
|
||
this.drawLine(1483, 80, 1483, 100, '#6DE08F', 1, false)
|
||
this.drawLine(1513, 76, 1513, 104, '#6DE08F', 1, false)
|
||
this.drawLine(1548, 76, 1548, 104, '#6DE08F', 1, false)
|
||
this.drawLine(1570, 80, 1570, 100, '#6DE08F', 1, false)
|
||
this.drawLine(1595, 80, 1595, 100, '#6DE08F', 1, false)
|
||
this.drawLine(1605, 80, 1605, 100, '#6DE08F', 1, false)
|
||
// 右侧设备
|
||
this.drawCircle(1590, 113, 4, '#C9C7EF')
|
||
this.drawLine(1593, 115, 1600, 121, '#E1E1E1', 5, true)
|
||
this.drawLine(1598, 121, 1607, 115, '#E1E1E1', 5, true)
|
||
this.drawLine(1604, 111, 1610, 118, '#B1B1B1', 5, true)
|
||
},
|
||
// 中间的紫色线条
|
||
drawMiddleLine() {
|
||
this.drawLine(572, 35, 572, 50, '#B7B5F6', 1)
|
||
this.drawLine(591, 35, 591, 50, '#B7B5F6', 1)
|
||
this.drawLine(615, 35, 615, 50, '#B7B5F6', 1)
|
||
this.drawLine(631, 35, 631, 50, '#B7B5F6', 1)
|
||
this.drawLine(654, 35, 654, 50, '#B7B5F6', 1)
|
||
this.drawLine(673, 35, 673, 50, '#B7B5F6', 1)
|
||
this.drawLine(735, 35, 735, 50, '#B7B5F6', 1)
|
||
this.drawLine(752, 35, 752, 50, '#B7B5F6', 1)
|
||
this.drawLine(800, 35, 800, 50, '#B7B5F6', 1)
|
||
this.drawLine(815, 35, 815, 50, '#B7B5F6', 1)
|
||
this.drawLine(857, 35, 857, 50, '#B7B5F6', 1)
|
||
this.drawLine(872, 35, 872, 50, '#B7B5F6', 1)
|
||
this.drawLine(920, 35, 920, 50, '#B7B5F6', 1)
|
||
this.drawLine(615, 65, 630, 65, '#B7B5F6', 1)
|
||
this.drawLine(679, 65, 694, 65, '#B7B5F6', 1)
|
||
this.drawLine(736, 64, 751, 64, '#B7B5F6', 1)
|
||
this.drawLine(800, 63, 815, 63, '#B7B5F6', 1)
|
||
this.drawLine(857, 64, 872, 64, '#B7B5F6', 1)
|
||
this.drawLine(921, 64, 936, 64, '#B7B5F6', 1)
|
||
this.drawLine(752, 140, 752, 154, '#B7B5F6', 1)
|
||
this.drawLine(794, 140, 794, 154, '#B7B5F6', 1)
|
||
this.drawLine(816, 140, 816, 154, '#B7B5F6', 1)
|
||
this.drawLine(857, 140, 857, 154, '#B7B5F6', 1)
|
||
this.drawLine(873, 140, 873, 154, '#B7B5F6', 1)
|
||
this.drawLine(903, 140, 903, 154, '#B7B5F6', 1)
|
||
this.drawLine(918, 140, 918, 154, '#B7B5F6', 1)
|
||
this.drawLine(937, 140, 937, 154, '#B7B5F6', 1)
|
||
this.drawLine(961, 140, 961, 154, '#B7B5F6', 1)
|
||
this.drawLine(980, 140, 980, 154, '#B7B5F6', 1)
|
||
},
|
||
// 中间部分小圆点
|
||
drawCompS(x, y) {
|
||
this.drawRect(x, y, 39, 26, '#D3D1FF', true)
|
||
this.drawCircle(x + 6, y + 6, 4, '#B7B5F6')
|
||
this.drawCircle(x + 6, y + 6 * 3, 4, '#B7B5F6')
|
||
this.drawCircle(x + 6 * 2 + 3, y + 6, 4, '#B7B5F6')
|
||
this.drawCircle(x + 6 * 2 + 3, y + 6 * 3, 4, '#B7B5F6')
|
||
this.drawCircle(x + 20 + 6, y + 6, 4, '#B7B5F6')
|
||
this.drawCircle(x + 20 + 6, y + 6 * 3, 4, '#B7B5F6')
|
||
this.drawCircle(x + 20 + 6 * 2 + 3, y + 6, 4, '#B7B5F6')
|
||
this.drawCircle(x + 20 + 6 * 2 + 3, y + 6 * 3, 4, '#B7B5F6')
|
||
},
|
||
// 中间部分大园
|
||
drawCompL(x, y) {
|
||
this.drawRect(x, y, 37, 20, '#D3D1FF', true)
|
||
this.drawCircle(x + 9, y + 10, 7, '#B7B5F6')
|
||
this.drawCircle(x + 28, y + 10, 7, '#B7B5F6')
|
||
},
|
||
// 画数字
|
||
getText() {
|
||
// 终检单元
|
||
this.drawText('7', 88, 59)
|
||
this.drawText('6', 108, 59)
|
||
this.drawText('5', 125, 59)
|
||
this.drawText('4', 145, 59)
|
||
this.drawText('3', 286, 97)
|
||
this.drawText('2', 306, 97)
|
||
this.drawText('1', 326, 97)
|
||
// 面磨后清洗单元
|
||
this.drawText('5', 352, 105)
|
||
this.drawText('4', 380, 105)
|
||
this.drawText('3', 408, 105)
|
||
this.drawText('2', 436, 105)
|
||
this.drawText('1', 464, 105)
|
||
// 面磨单元
|
||
// 表3
|
||
this.drawText('3', 495, 97)
|
||
this.drawText('2', 515, 97)
|
||
this.drawText('1', 535, 97)
|
||
this.drawText('17', 557, 97)
|
||
this.drawText('18', 580, 97)
|
||
this.drawText('16', 556, 21)
|
||
this.drawText('15', 575, 21)
|
||
this.drawText('14', 597, 21)
|
||
this.drawText('13', 615, 21)
|
||
this.drawText('12', 636, 21)
|
||
this.drawText('11', 658, 21)
|
||
this.drawText('10', 680, 21)
|
||
this.drawText('9', 703, 21)
|
||
this.drawText('8', 722, 21)
|
||
this.drawText('7', 742, 21)
|
||
this.drawText('6', 773, 21)
|
||
this.drawText('5', 807, 21)
|
||
this.drawText('4', 835, 21)
|
||
this.drawText('3', 862, 21)
|
||
this.drawText('2', 895, 21)
|
||
this.drawText('1', 925, 21)
|
||
// 表2
|
||
this.drawText('3', 604, 75)
|
||
this.drawText('2', 604, 104)
|
||
this.drawText('1', 604, 135)
|
||
this.drawText('6', 698, 75)
|
||
this.drawText('5', 698, 104)
|
||
this.drawText('4', 698, 135)
|
||
this.drawText('9', 720, 69)
|
||
this.drawText('8', 720, 90)
|
||
this.drawText('7', 720, 112)
|
||
this.drawText('12', 820, 69)
|
||
this.drawText('11', 820, 90)
|
||
this.drawText('10', 820, 112)
|
||
this.drawText('15', 840, 69)
|
||
this.drawText('14', 840, 90)
|
||
this.drawText('13', 840, 112)
|
||
this.drawText('18', 942, 69)
|
||
this.drawText('17', 942, 90)
|
||
this.drawText('16', 942, 112)
|
||
//表1
|
||
this.drawText('33', 737, 156)
|
||
this.drawText('32', 770, 156)
|
||
this.drawText('31', 798, 156)
|
||
this.drawText('30', 827, 156)
|
||
this.drawText('29', 857, 156)
|
||
this.drawText('28', 890, 156)
|
||
this.drawText('27', 918, 156)
|
||
this.drawText('26', 945, 156)
|
||
this.drawText('25', 964, 124)
|
||
this.drawText('24', 983, 124)
|
||
this.drawText('23', 1002, 156)
|
||
this.drawText('22', 618, 186)
|
||
this.drawText('21', 640, 186)
|
||
this.drawText('20', 663, 186)
|
||
this.drawText('19', 685, 186)
|
||
this.drawText('18', 708, 186)
|
||
this.drawText('17', 729, 186)
|
||
this.drawText('16', 753, 186)
|
||
this.drawText('15', 775, 186)
|
||
this.drawText('14', 795, 186)
|
||
this.drawText('13', 815, 186)
|
||
this.drawText('12', 836, 186)
|
||
this.drawText('11', 855, 186)
|
||
this.drawText('10', 876, 186)
|
||
this.drawText('9', 898, 186)
|
||
this.drawText('8', 918, 186)
|
||
this.drawText('7', 938, 186)
|
||
this.drawText('6', 956, 186)
|
||
this.drawText('5', 975, 186)
|
||
this.drawText('4', 995, 186)
|
||
this.drawText('3', 1013, 186)
|
||
this.drawText('2', 1047, 186)
|
||
this.drawText('1', 1070, 186)
|
||
this.drawText('0', 1090, 186)
|
||
// 边检单元
|
||
this.drawText('3-4', 1032, 153)
|
||
this.drawText('3-3', 1032, 137)
|
||
this.drawText('3-2', 1032, 120)
|
||
this.drawText('3-1', 1032, 100)
|
||
this.drawText('2', 1062, 55)
|
||
this.drawText('1', 1097, 55)
|
||
// 磨边后清洗单元
|
||
this.drawText('3', 1150, 108)
|
||
this.drawText('2', 1187, 108)
|
||
this.drawText('1', 1224, 108)
|
||
// 精切磨边单元
|
||
this.drawText('13', 1269, 37)
|
||
this.drawText('12', 1269, 116)
|
||
this.drawText('11', 1318, 116)
|
||
this.drawText('10', 1357, 116)
|
||
this.drawText('9', 1395, 116)
|
||
this.drawText('8', 1421, 116)
|
||
this.drawText('7', 1445, 37)
|
||
this.drawText('6', 1445, 116)
|
||
this.drawText('5', 1469, 116)
|
||
this.drawText('4', 1492, 116)
|
||
this.drawText('3', 1524, 116)
|
||
this.drawText('2', 1556, 116)
|
||
this.drawText('1', 1577, 116)
|
||
},
|
||
// 画右侧绿色异性块
|
||
drawRectD() {
|
||
this.ctx.beginPath()
|
||
this.ctx.moveTo(1264, 53)
|
||
// this.ctx.moveTo(1288, 63)
|
||
this.ctx.lineTo(1264, 100)
|
||
this.ctx.lineTo(1288, 100)
|
||
this.ctx.lineTo(1288, 107)
|
||
this.ctx.lineTo(1327, 107)
|
||
this.ctx.lineTo(1327, 112)
|
||
this.ctx.lineTo(1351, 112)
|
||
this.ctx.lineTo(1351, 107)
|
||
this.ctx.lineTo(1374, 107)
|
||
this.ctx.lineTo(1374, 112)
|
||
this.ctx.lineTo(1398, 112)
|
||
this.ctx.lineTo(1398, 107)
|
||
this.ctx.lineTo(1437, 107)
|
||
this.ctx.lineTo(1437, 100)
|
||
this.ctx.lineTo(1483, 100)
|
||
this.ctx.lineTo(1483, 104)
|
||
this.ctx.lineTo(1513, 104)
|
||
this.ctx.lineTo(1513, 107)
|
||
this.ctx.lineTo(1548, 107)
|
||
this.ctx.lineTo(1548, 104)
|
||
this.ctx.lineTo(1570, 104)
|
||
this.ctx.lineTo(1570, 100)
|
||
this.ctx.lineTo(1596, 100)
|
||
this.ctx.lineTo(1596, 107)
|
||
this.ctx.lineTo(1604, 107)
|
||
this.ctx.lineTo(1604, 100)
|
||
this.ctx.lineTo(1621, 100)
|
||
this.ctx.lineTo(1621, 80)
|
||
this.ctx.lineTo(1604, 80)
|
||
this.ctx.lineTo(1604, 65)
|
||
this.ctx.lineTo(1596, 65)
|
||
this.ctx.lineTo(1596, 80)
|
||
this.ctx.lineTo(1570, 80)
|
||
this.ctx.lineTo(1570, 76)
|
||
this.ctx.lineTo(1548, 76)
|
||
this.ctx.lineTo(1548, 72)
|
||
this.ctx.lineTo(1513, 72)
|
||
this.ctx.lineTo(1513, 76)
|
||
this.ctx.lineTo(1483, 76)
|
||
this.ctx.lineTo(1483, 80)
|
||
this.ctx.lineTo(1462, 80)
|
||
this.ctx.lineTo(1462, 53)
|
||
this.ctx.lineTo(1437, 53)
|
||
this.ctx.lineTo(1437, 60)
|
||
this.ctx.lineTo(1373, 60)
|
||
this.ctx.lineTo(1373, 65)
|
||
this.ctx.lineTo(1350, 65)
|
||
this.ctx.lineTo(1350, 60)
|
||
this.ctx.lineTo(1288, 60)
|
||
this.ctx.lineTo(1288, 53)
|
||
this.ctx.fillStyle = '#B2FFC8'
|
||
this.ctx.fill()
|
||
},
|
||
// 画底图====end
|
||
// 画笔方法=====start
|
||
// 画矩形
|
||
drawRect(x, y, width, height, color, showShadow = false) {
|
||
this.ctx.beginPath()
|
||
this.ctx.fillStyle = color || '#000'
|
||
if (showShadow) {
|
||
this.ctx.shadowOffsetY = 2
|
||
this.ctx.shadowBlur = 4
|
||
this.ctx.shadowColor = 'rgba(0, 0, 0, 0.25)'
|
||
} else {
|
||
this.ctx.shadowOffsetY = 0
|
||
this.ctx.shadowBlur = 0
|
||
}
|
||
this.ctx.fillRect(x, y, width, height)
|
||
this.ctx.closePath()
|
||
},
|
||
drawRect2(x, y, width, height, type, color) {
|
||
this.ctx2.beginPath()
|
||
if (type === 'glass') {
|
||
this.ctx2.fillStyle = color || '#000'
|
||
this.ctx2.fillRect(x, y, width, height)
|
||
} else {
|
||
this.ctx2.strokeStyle = color || '#000'
|
||
this.ctx2.strokeRect(x, y, width, height)
|
||
}
|
||
this.ctx2.closePath()
|
||
},
|
||
// 画玻璃
|
||
drawGlass(x, y) {
|
||
this.drawRect2(x, y, 15, 12, 'glass', 'green')
|
||
},
|
||
// 画报警
|
||
drawAlarm(x, y, w, h) {
|
||
this.drawRect2(x, y, w, h, 'alarm', 'red')
|
||
},
|
||
// 画圆
|
||
drawCircle(x, y, r, color) {
|
||
this.ctx.beginPath()
|
||
this.ctx.arc(x, y, r, 0, Math.PI * 2)
|
||
this.ctx.fillStyle = color || '#000'
|
||
this.ctx.shadowOffsetY = 0
|
||
this.ctx.shadowBlur = 0
|
||
this.ctx.fill()
|
||
},
|
||
// 画直线
|
||
drawLine(x1, y1, x2, y2, color, width, showShadow = false) {
|
||
this.ctx.beginPath()
|
||
this.ctx.moveTo(x1, y1)
|
||
this.ctx.lineTo(x2, y2)
|
||
this.ctx.lineWidth = width || 1
|
||
this.ctx.strokeStyle = color || '#000'
|
||
if (showShadow) {
|
||
this.ctx.shadowOffsetY = 2
|
||
this.ctx.shadowBlur = 4
|
||
this.ctx.shadowColor = 'rgba(0, 0, 0, 0.25)'
|
||
} else {
|
||
this.ctx.shadowOffsetY = 0
|
||
this.ctx.shadowBlur = 0
|
||
}
|
||
this.ctx.stroke()
|
||
this.ctx.closePath()
|
||
},
|
||
// 画文字
|
||
drawText(text, x, y) {
|
||
this.ctx.font = '12px 楷体'
|
||
this.ctx.textAlign = 'left'
|
||
this.ctx.textBaseline = 'top'
|
||
this.ctx.fillStyle = 'rgba(0,0,0,0.55)'
|
||
this.ctx.fillText(text, x, y)
|
||
},
|
||
// 画笔方法=====end
|
||
// 获取玻璃
|
||
getGlass() {
|
||
// 终检单元
|
||
this.drawGlass(84, 78)
|
||
this.drawGlass(103, 78)
|
||
this.drawGlass(121, 78)
|
||
this.drawGlass(141, 78)
|
||
this.drawGlass(277, 78)
|
||
this.drawGlass(294, 78)
|
||
this.drawGlass(311, 78)
|
||
// 面磨后清洗单元
|
||
this.drawGlass(345, 78)
|
||
this.drawGlass(375, 78)
|
||
this.drawGlass(401, 78)
|
||
this.drawGlass(430, 78)
|
||
this.drawGlass(458, 78)
|
||
// 面磨单元
|
||
// 表3
|
||
this.drawGlass(490, 78)
|
||
this.drawGlass(510, 78)
|
||
this.drawGlass(530, 78)
|
||
this.drawGlass(553, 78)
|
||
this.drawGlass(575, 78)
|
||
this.drawGlass(553, 37)
|
||
this.drawGlass(575, 37)
|
||
this.drawGlass(595, 37)
|
||
this.drawGlass(615, 37)
|
||
this.drawGlass(635, 37)
|
||
this.drawGlass(655, 37)
|
||
this.drawGlass(678, 37)
|
||
this.drawGlass(698, 37)
|
||
this.drawGlass(717, 37)
|
||
this.drawGlass(735, 37)
|
||
this.drawGlass(770, 37)
|
||
this.drawGlass(801, 37)
|
||
this.drawGlass(830, 37)
|
||
this.drawGlass(857, 37)
|
||
this.drawGlass(890, 37)
|
||
this.drawGlass(920, 37)
|
||
// 表2
|
||
this.drawGlass(614, 75) // 3
|
||
this.drawGlass(614, 104) // 2
|
||
this.drawGlass(614, 135) // 1
|
||
this.drawGlass(678, 75) // 6
|
||
this.drawGlass(678, 104) // 5
|
||
this.drawGlass(678, 135) // 4
|
||
this.drawGlass(736, 69) // 9
|
||
this.drawGlass(736, 90) // 8
|
||
this.drawGlass(736, 112) // 7
|
||
this.drawGlass(800, 69) // 12
|
||
this.drawGlass(800, 90) // 11
|
||
this.drawGlass(800, 112) // 10
|
||
this.drawGlass(856, 69) // 15
|
||
this.drawGlass(856, 90) // 14
|
||
this.drawGlass(856, 112) // 13
|
||
this.drawGlass(922, 69) // 18
|
||
this.drawGlass(922, 90) // 17
|
||
this.drawGlass(922, 112) // 16
|
||
// 表1
|
||
this.drawGlass(736, 140) // 33
|
||
this.drawGlass(767, 140) // 32
|
||
this.drawGlass(795, 140) // 31
|
||
this.drawGlass(825, 140) // 30
|
||
this.drawGlass(855, 140) // 29
|
||
this.drawGlass(888, 140) // 28
|
||
this.drawGlass(918, 140) // 27
|
||
this.drawGlass(963, 140)
|
||
this.drawGlass(981, 140)
|
||
this.drawGlass(943, 140)
|
||
this.drawGlass(982, 155)
|
||
this.drawGlass(615, 170)
|
||
this.drawGlass(637, 170)
|
||
this.drawGlass(660, 170)
|
||
this.drawGlass(683, 170)
|
||
this.drawGlass(705, 170)
|
||
this.drawGlass(727, 170)
|
||
this.drawGlass(750, 170)
|
||
this.drawGlass(773, 170)
|
||
this.drawGlass(793, 170)
|
||
this.drawGlass(813, 170)
|
||
this.drawGlass(833, 170)
|
||
this.drawGlass(853, 170)
|
||
this.drawGlass(873, 170)
|
||
this.drawGlass(893, 170)
|
||
this.drawGlass(913, 170)
|
||
this.drawGlass(932, 170)
|
||
this.drawGlass(951, 170)
|
||
this.drawGlass(970, 170)
|
||
this.drawGlass(990, 170)
|
||
this.drawGlass(1009, 170)
|
||
this.drawGlass(1042, 170)
|
||
this.drawGlass(1065, 170)
|
||
this.drawGlass(1085, 170) // 0
|
||
// 边检单元
|
||
this.drawGlass(1058, 153)
|
||
this.drawGlass(1058, 136)
|
||
this.drawGlass(1058, 119)
|
||
this.drawGlass(1058, 100)
|
||
this.drawGlass(1058, 80)
|
||
this.drawGlass(1090, 80)
|
||
// 磨边后清洗单元
|
||
this.drawGlass(1145, 80)
|
||
this.drawGlass(1180, 80)
|
||
this.drawGlass(1220, 80)
|
||
// 精切磨边单元
|
||
this.drawGlass(1268, 60)
|
||
this.drawGlass(1268, 84)
|
||
this.drawGlass(1315, 84)
|
||
this.drawGlass(1354, 84)
|
||
this.drawGlass(1390, 84)
|
||
this.drawGlass(1415, 84)
|
||
this.drawGlass(1442, 60)
|
||
this.drawGlass(1442, 84)
|
||
this.drawGlass(1465, 84)
|
||
this.drawGlass(1490, 84)
|
||
this.drawGlass(1522, 84)
|
||
this.drawGlass(1551, 84)
|
||
this.drawGlass(1575, 84)
|
||
},
|
||
getAlarm() {
|
||
// 左侧,终检单元
|
||
this.drawAlarm(20, 82, 30, 30)
|
||
this.drawAlarm(20, 117, 30, 30)
|
||
this.drawAlarm(55, 72, 20, 25)
|
||
this.drawAlarm(55, 98, 53, 45)
|
||
// 玻璃,终检单元
|
||
this.drawAlarm(80, 72, 20, 25)
|
||
this.drawAlarm(100, 72, 20, 25)
|
||
this.drawAlarm(120, 72, 20, 25)
|
||
this.drawAlarm(140, 72, 20, 25)
|
||
this.drawAlarm(275, 72, 20, 25)
|
||
this.drawAlarm(293, 72, 20, 25)
|
||
this.drawAlarm(310, 72, 20, 25)
|
||
// 面磨后清洗
|
||
this.drawAlarm(330, 62, 157, 45)
|
||
// 面磨单元
|
||
this.drawAlarm(486, 72, 20, 25)
|
||
this.drawAlarm(506, 72, 20, 25)
|
||
this.drawAlarm(526, 72, 20, 25)
|
||
this.drawAlarm(550, 72, 20, 25) // 17
|
||
this.drawAlarm(572, 72, 20, 25) // 18
|
||
this.drawAlarm(540, 30, 155, 25) // 16-10
|
||
this.drawAlarm(695, 30, 250, 25) // 9-1
|
||
// 小圆圈
|
||
this.drawAlarm(612, 65, 42, 30) // 3
|
||
this.drawAlarm(612, 95, 42, 30) // 2
|
||
this.drawAlarm(612, 125, 42, 30) // 1
|
||
this.drawAlarm(654, 65, 42, 30) // 6
|
||
this.drawAlarm(654, 95, 42, 30) // 5
|
||
this.drawAlarm(654, 125, 42, 30) // 4
|
||
// 大圆圈
|
||
this.drawAlarm(734, 62, 42, 70) // 9
|
||
this.drawAlarm(776, 62, 42, 70) // 12
|
||
this.drawAlarm(854, 62, 42, 70) // 15
|
||
this.drawAlarm(897, 62, 42, 70) // 18
|
||
// 传送带
|
||
this.drawAlarm(734, 137, 268, 29) // 33-23
|
||
this.drawAlarm(612, 168, 418, 18) // 22-3
|
||
this.drawAlarm(1035, 168, 27, 18) // 2
|
||
this.drawAlarm(1080, 165, 27, 20) // 0
|
||
this.drawAlarm(670, 195, 90, 20)
|
||
this.drawAlarm(1051, 196, 20, 20)
|
||
this.drawAlarm(1137, 192, 20, 20)
|
||
this.drawAlarm(1110, 165, 20, 20)
|
||
this.drawAlarm(1150, 163, 15, 25)
|
||
// 磨边后清洗单元
|
||
this.drawAlarm(1135, 65, 113, 43)
|
||
// 精切磨边单元
|
||
this.drawAlarm(1263, 53, 25, 25) // 13
|
||
this.drawAlarm(1287, 58, 65, 57) // 11
|
||
this.drawAlarm(1352, 58, 23, 57) // 10
|
||
this.drawAlarm(1376, 58, 36, 57) // 9
|
||
this.drawAlarm(1413, 68, 20, 40) // 8
|
||
this.drawAlarm(1440, 55, 20, 20) // 7
|
||
this.drawAlarm(1462, 80, 20, 20) // 5
|
||
this.drawAlarm(1485, 75, 25, 30) // 4
|
||
this.drawAlarm(1510, 70, 40, 40) // 3
|
||
this.drawAlarm(1547, 75, 22, 30) // 2
|
||
this.drawAlarm(1570, 75, 22, 30) // 1
|
||
this.drawAlarm(1594, 75, 30, 30)
|
||
this.drawAlarm(1583, 108, 30, 20)
|
||
},
|
||
getGlassAndAlarm() {
|
||
this.ctx2.clearRect(
|
||
0,
|
||
0,
|
||
parseFloat(getComputedStyle(this.root).width),
|
||
parseFloat(getComputedStyle(this.root).height)
|
||
)
|
||
let arr = [
|
||
{ x: 84, y: 78 },
|
||
{ x: 103, y: 78 },
|
||
{ x: 121, y: 78 },
|
||
{ x: 141, y: 78 },
|
||
{ x: 277, y: 78 },
|
||
{ x: 294, y: 78 },
|
||
{ x: 311, y: 78 },
|
||
{ x: 345, y: 78 },
|
||
{ x: 375, y: 78 },
|
||
{ x: 401, y: 78 },
|
||
{ x: 430, y: 78 },
|
||
{ x: 458, y: 78 }
|
||
]
|
||
for (let i of arr) {
|
||
let sj = parseInt(Math.random() * 2)
|
||
console.log(sj)
|
||
if (sj === 1) {
|
||
i.x = ''
|
||
i.y = ''
|
||
}
|
||
}
|
||
for (let i = 0; i < arr.length; i++) {
|
||
if (arr[i].x) {
|
||
this.drawGlass(arr[i].x, arr[i].y)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timer)
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.root-box {
|
||
height: calc((100vh - 90px - 50px - 16px) * 0.292);
|
||
width: calc(100vw - 280px);
|
||
position: relative;
|
||
.canvas {
|
||
position: absolute;
|
||
}
|
||
}
|
||
</style>
|