<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>
