HSYL_WCSWEB/src/app/routes/wcs/monitor/monitor.canvas.part2.ts

import { fabric } from 'fabric';
import { I18nService } from '@app/core/services/i18n.service';

export class MonitorCanvasPart2 {

  constructor(
    private _i18nService: I18nService
  ) { };

  public _conveyors: any[] = [
    //18个  3440
    //  { i: 26011, x: 1522, y: -105, w: 30, h: 35, r: 8.5, t: { x: 1521, y: -50 }, a: { x: 1542, y: -90, w: 6, h: 6 },b: { x: 1522, y: -90, w: 8, h: 8 }, j: { angle: -60 } },   
    // { i: 22288, x: 1533, y: -96, w: 20, h: 20, t: { x: 1530, y: -55 }, a: { x: 1538, y: -90, w: 6, h: 6 }, j: { angle: -60 } },
    // { i: 22201, x: 1555, y: -96, w: 25, h: 38, t: { x: 1583, y: -90 }, a: { x: 1560, y: -90, w: 6, h: 6 }, j: { angle: 0 } },
    // { i: 24101, x: 1557, y: -94, w: 12, h: 12, a: { x: 1560, y: -90, w: 6, h: 6 }, j: { angle: 30 } },// t: { x: 1535, y: -27 },
    { i: 22107, x: 1080, y: -40, w: 80, h: 20, t: { x: 1100, y: -20 }, a: { x: 1120, y: -35, w: 7, h: 7 }, j: { angle: 0 } },
    { i: 22108, x: 1000, y: -40, w: 80, h: 20, t: { x: 1050, y: -20 }, a: { x: 1050, y: -35, w: 7, h: 7 }, j: { angle: 0 } },
    { i: 22109, x: 1080, y: 20, w: 80, h: 20, t: { x: 1100, y: 40 }, a: { x: 1120, y: 25, w:7, h: 7},j:{angle: 0} },
    { i: 22110, x: 1000, y: 20, w: 80, h: 20, t: { x: 1050, y: 40 }, a: { x: 1050, y: 25, w:7, h: 7},j:{angle: 0} },
    
    { i: 22111, x: 1080, y: 115, w: 80, h: 20, t: { x: 1100, y: 135 }, a: { x: 1120, y: 120, w:7, h: 7},j:{angle: 0} },
    { i: 22112, x: 1000, y: 115, w: 80, h: 20, t: { x: 1050, y: 135 }, a: { x: 1050, y: 120, w:7, h: 7},j:{angle: 0} },
    { i: 22113, x: 1080, y: 175, w: 80, h: 20, t: { x: 1100, y: 195 }, a: { x: 1120, y: 180, w:7, h: 7},j:{angle: 0} },
    { i: 22114, x: 1000, y: 175, w: 80, h: 20, t: { x: 1050, y: 195 }, a: { x: 1050, y: 180, w:7, h: 7},j:{angle: 0} },

    { i: 22115, x: 1080, y: 240, w: 80, h: 20, t: { x: 1100, y: 260 }, a: { x: 1120, y: 245, w:7, h: 7},j:{angle: 0} },
    { i: 22116, x: 1000, y: 240, w: 80, h: 20, t: { x: 1050, y: 260 }, a: { x: 1050, y: 245, w:7, h: 7},j:{angle: 0} },
    { i: 22117, x: 1080, y: 300, w: 80, h: 20, t: { x: 1100, y: 320 }, a: { x: 1120, y: 305, w:7, h: 7},j:{angle: 0} },
    { i: 22118, x: 1000, y: 300, w: 80, h: 20, t: { x: 1050, y: 320 }, a: { x: 1050, y: 305, w:7, h: 7},j:{angle: 0} },

    { i: 22119, x: 1080, y: 395, w: 80, h: 20, t: { x: 1100, y: 415 }, a: { x: 1120, y: 400, w:7, h: 7},j:{angle: 0} },
    { i: 22120, x: 1000, y: 395, w: 80, h: 20, t: { x: 1050, y: 415 }, a: { x: 1050, y: 400, w:7, h: 7},j:{angle: 0} },
    { i: 22121, x: 1080, y: 455, w: 80, h: 20, t: { x: 1100, y: 475 }, a: { x: 1120, y: 460, w:7, h: 7},j:{angle: 0} },
    { i: 22122, x: 1000, y: 455, w: 80, h: 20, t: { x: 1050, y: 475 }, a: { x: 1050, y: 460, w:7, h: 7},j:{angle: 0} },

    { i: 22123, x: 1110, y: 545, w: 50, h: 20, t: { x: 1120, y: 565 }, a: { x: 1135, y: 550, w:7, h: 7},j:{angle: 0} },
    { i: 22124, x: 1060, y: 545, w: 50, h: 20, t: { x: 1070, y: 565 }, a: { x: 1085, y: 550, w:7, h: 7},j:{angle: 0} },
    { i: 22125, x: 1000, y: 545, w: 60, h: 20, t: { x: 1030, y: 565 }, a: { x: 1040, y: 550, w:7, h: 7},j:{angle: 0} },
    { i: 22126, x: 1190, y: 545, w: 50, h: 20, t: { x: 1200, y: 565 }, a: { x: 1215, y: 550, w:7, h: 7},j:{angle: 0} },
    { i: 22127, x: 1240, y: 545, w: 50, h: 20, t: { x: 1250, y: 565 }, a: { x: 1265, y: 550, w:7, h: 7},j:{angle: 0} },
    { i: 22128, x: 1290, y: 545, w: 60, h: 20, t: { x: 1300, y: 565 }, a: { x: 1310, y: 550, w:7, h: 7},j:{angle: 0} },
  
    //站台
    { i: 22141, x: 1005, y: -40, w: 15, h: 15, t: { x: 1000, y: -20 }, a: { x: 1009, y: -35, w:7, h: 7},j:{angle: 0} },
    { i: 22142, x: 1005, y: 20, w: 15, h: 15, t: { x: 1000, y: 40 }, a: { x: 1009, y: 25, w:7, h: 7},j:{angle: 0} },
    { i: 22143, x: 1005, y: 115, w: 15, h: 15, t: { x: 1000, y: 135 }, a: { x: 1009, y: 120, w:7, h: 7},j:{angle: 0} },
    { i: 22144, x: 1005, y: 175, w: 15, h: 15, t: { x: 1000, y: 195 }, a: { x: 1009, y: 180, w:7, h: 7},j:{angle: 0} },
    { i: 22145, x: 1005, y: 240, w: 15, h: 15, t: { x: 1000, y: 260 }, a: { x: 1009, y: 245, w:7, h: 7},j:{angle: 0} },
    { i: 22146, x: 1005, y: 300, w: 15, h: 15, t: { x: 1000, y: 320 }, a: { x: 1009, y: 305, w:7, h: 7},j:{angle: 0} },
    { i: 22147, x: 1005, y: 395, w: 15, h: 15, t: { x: 1000, y: 415 }, a: { x: 1009, y: 400, w:7, h: 7},j:{angle: 0} },
    { i: 22148, x: 1005, y: 455, w: 15, h: 15, t: { x: 1000, y: 475 }, a: { x: 1009, y: 460, w:7, h: 7},j:{angle: 0} },

    { i: 23141, x: 1025, y: -40, w: 15, h: 15, t: { x: 1020, y: -20 }, a: { x: 1029, y: -35, w:7, h: 7},j:{angle: 0} },
    { i: 23142, x: 1025, y: 20, w: 15, h: 15, t: { x: 1020, y: 40 }, a: { x: 1029, y: 25, w:7, h: 7},j:{angle: 0} },
    { i: 23143, x: 1025, y: 115, w: 15, h: 15, t: { x: 1020, y: 135 }, a: { x: 1029, y: 120, w:7, h: 7},j:{angle: 0} },
    { i: 23144, x: 1025, y: 175, w: 15, h: 15, t: { x: 1020, y: 195 }, a: { x: 1029, y: 180, w:7, h: 7},j:{angle: 0} },
    { i: 23145, x: 1025, y: 240, w: 15, h: 15, t: { x: 1020, y: 260 }, a: { x: 1029, y: 245, w:7, h: 7},j:{angle: 0} },
    { i: 23146, x: 1025, y: 300, w: 15, h: 15, t: { x: 1020, y: 320 }, a: { x: 1029, y: 305, w:7, h: 7},j:{angle: 0} },
    { i: 23147, x: 1025, y: 395, w: 15, h: 15, t: { x: 1020, y: 415 }, a: { x: 1029, y: 400, w:7, h: 7},j:{angle: 0} },
    { i: 23148, x: 1025, y: 455, w: 15, h: 15, t: { x: 1020, y: 475 }, a: { x: 1029, y: 460, w:7, h: 7},j:{angle: 0} },

    { i: 24001, x: 1000, y: 565, w: 20, h: 30, t: { x: 975, y: 570 }, a: { x: 1009, y: 570, w:7, h: 7},j:{angle: 0} },
    { i: 24101, x: 1000, y: 595, w: 20, h: 30, t: { x: 975, y: 600 }, a: { x: 1009, y: 600, w:7, h: 7},j:{angle: 0} },
    { i: 24002, x: 1330, y: 565, w: 20, h: 30, t: { x: 1355, y: 570 }, a: { x: 1334, y: 570, w:7, h: 7},j:{angle: 0} },
    { i: 24102, x: 1330, y: 595, w: 20, h: 30, t: { x: 1355, y: 600 }, a: { x: 1334, y: 600, w:7, h: 7},j:{angle: 0} },
  
    { i: 22131, x: 1005, y: 545, w: 15, h: 15, t: { x: 1005, y: 535 }, a: { x: 1009, y: 550, w:7, h: 7},j:{angle: 0} },
    { i: 22132, x: 1330, y: 545, w: 15, h: 15, t: { x: 1330, y: 535 }, a: { x: 1334, y: 550, w:7, h: 7},j:{angle: 0} },
  









  ];

  private _BarcodeReader: any[] = [

    // { i: 22638, x: 546, y: 84, w: 34, h: 20, t: { x: 510, y: 123 }, a: { x: 563, y: 91, w: 5, h: 5 }, j: { angle: -60 } },

    { i: 27101, x: 1020, y: 610, w: 15, h: 15, a: -90, t: { x: 1040, y: 600,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }


  ]

  public draw = (canvas: fabric.Canvas, colors: { [key: string]: string }, index: { [key: number]: any }, data: { [key: number]: any }) => {
    // 基础布局
    canvas.add(new fabric.Group([
//#region 绘制巷道方块
      //add for HSYL 货架 共15排货架
      // 货架宽700，高28；货架共54列，每个货位12.96
      // 远近伸货架Y+30，中间间隙2； 中间有堆垛机Y+60； 相邻巷道Y+35
      // 16排
      new fabric.Rect({
        left: 300,
        top: -70,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),
       // 15
      new fabric.Rect({
        left: 300,
        top: -40,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),
       // 14
       new fabric.Rect({
        left: 300,
        top: 20,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),
      // 13
       new fabric.Rect({
        left: 300,
        top: 50,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),
         
       // 12
       new fabric.Rect({
        left: 300,
        top: 85,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),
       //11 
       new fabric.Rect({
        left: 300,
        top: 115,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),
      //10
       new fabric.Rect({
        left: 300,
        top: 175,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),
      //9
       new fabric.Rect({
        left: 300,
        top: 205,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),

      //7 没有8排
       new fabric.Rect({
        left: 300,
        top: 240,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),
       //6
       new fabric.Rect({
        left: 300,
        top: 300,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),      
      //5
      new fabric.Rect({
        left: 300,
        top: 330,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),


      //4
       new fabric.Rect({
        left: 300,
        top: 365,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),    

      //3
       new fabric.Rect({
        left: 300,
        top: 395,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),     

      //2
      new fabric.Rect({
        left: 300,
        top: 455,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }), 

      //1
       new fabric.Rect({
        left: 300,
        top: 485,
        width: 700,
        height: 28,
        fill: '#80cbc4'
       }),     
       //#endregion
       
       // 查看坐标原点位置 
      //  new fabric.Rect({
      //   left: 1,
      //   top: 1,
      //   width: 200,
      //   height: 28,
      //   fill: '#FFD700'
      //  }),

      //  new fabric.Text('坐标1，1点', {
      //   left: 1,
      //   top: 1,
      //   fontSize: 20,
      //   fill: '##C71585'
      // }),

      new fabric.Text('维修避让站点22101', {
        left: 1190,
        top: -80,
        fontSize: 15,
        angle: 0,
        fill:'#C71585',
      }),
      new fabric.Text('维修避让站点22102', {
        left: 1190,
        top: 590,
        fontSize: 15,
        angle: 0,
        fill:'#C71585',
      }),

      // 一楼环穿梭车竖线左
      new fabric.Line([1175, -60, 1175, 590],{
        stroke: 'red', // 线条颜色  
        strokeWidth: 2, // 线条宽度  
        selectable: true // 是否可以选择这条线
      }),

      new fabric.Text('←18001→', {
        left: 600,
        top: 433,
        fontSize: 15,
        fill: '#90a4ae'
      }),
       new fabric.Text('←18002→', {
        left: 600,
        top: 278,
        fontSize: 15,
        fill: '#90a4ae'
      }),
       new fabric.Text('←18003→', {
        left: 600,
        top: 152,
        fontSize: 15,
        fill: '#90a4ae'
      }),
       new fabric.Text('←18004→', {
        left: 600,
        top: -2,
        fontSize: 15,

      new fabric.Text('原料库夹层界面', {
        left: 550,
        top: -90,
        fontSize: 15,
        angle: 0,
        fill:'#C71585',
      }),

            //#region 巷道排列标记
      // 巷道排标记，巷道方块top+4
      new fabric.Text('16 排 ', {
        left: 950,
        top: -65,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),

      new fabric.Text('15 排 ', {
        left: 950,
        top: -35,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('14 排 ', {
        left: 950,
        top: 25,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('13 排 ', {
        left: 950,
        top: 55,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('12 排 ', {
        left: 950,
        top: 90,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('11 排 ', {
        left: 950,
        top: 120,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('10 排 ', {
        left: 950,
        top: 180,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('09 排 ', {
        left: 950,
        top: 210,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('07 排 ', {
        left: 950,
        top: 245,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('06 排 ', {
        left: 950,
        top: 305,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('05 排 ', {
        left: 950,
        top: 335,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('04 排 ', {
        left: 950,
        top: 370,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('03 排 ', {
        left: 950,
        top: 400,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('02 排 ', {
        left: 950,
        top: 460,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('01 排 ', {
        left: 950,
        top: 490,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),



      // new fabric.Text('114 Column ', {
      //   left: 1430,
      //   top: 54,
      //   fontSize: 15,
      //   angle: 0
      //   // fill:'#FF8C00',
      // }),

      new fabric.Text('03 列 ', {
        left: 970,
        top: 515,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      new fabric.Text('56 列 ', {
        left: 300,
        top: 515,
        fontSize: 15,
        angle: 0
        // fill:'#FF8C00',
      }),
      //#endregion


    ], {
      hoverCursor: 'default',
      objectCaching: false,
      hasControls: false,
      selectable: false
    }));


    // 输送线:绘制颜色，载物
    this._conveyors.forEach((item: any) => {
      const objects: any[] = [
        index[item.i] = new fabric.Rect({
          left: item.x,
          top: item.y,
          width: item.w,
          height: item.h,
          rx: item.r ?? 0,
          ry: item.r ?? 0,
          //初始化的时候data是后端带回来的,页面切换的时候data是暂存的数据
          //如果data里不包括color 就填充gray，如果有就填充data里的颜色属性
          fill: data[item.i]?.color || colors.burlywood,
           //宽度为0.1像素 king
          strokeWidth: 0.3,
           //矩形描边颜色，默认透明  king 
          //黑色
          stroke: '#000000'
        })
      ];
      if (item.t) {
        objects.push(new fabric.Text(item.i.toString(), {
          left: item.t?.x,
          top: item.t?.y,
          angle: item.j?.angle,
           //设备号旋转角度 -30
          fontSize: 8
        }));
      };
      if (item.a) {
        objects.push(new fabric.Rect({
          left: item.a?.x,
          top: item.a?.y,
          width: item.a?.w, 
          height: item.a?.h,
            //矩形的 x 方向上的圆角半径 king
          rx: item.a.r ?? 0,
            //矩形的 y 方向上的圆角半径 king
          ry: item.a.r ?? 0,
          fill: '#1e88e5',
          //传递过来的数据带着处理过的光电信息 如果.0=1 就暂存中这个设备的splitByte_0设置为了ture，在此直接用
          //visible: data[item.i]?.splitByte_0 || false
           visible: true
        }));
      }
      if (item.b) {
        objects.push(new fabric.Rect({
          left: item.b?.x,
          top: item.b?.y,
          width: item.b?.w,
          height: item.b?.h,
          rx: item.b.r ?? 0,
          ry: item.b.r ?? 0,
          fill: '#1e88e5',
          //传递过来的数据带着处理过的光电信息 如果.1=1 就暂存中这个设备的splitByte_0设置为了ture，在此直接用
          visible: data[item.i]?.splitByte_1 || false
          // visible: true
        }));
      }
      var group = new fabric.Group(objects, {
        hoverCursor: 'pointer',
        objectCaching: false,
        hasControls: false,
        selectable: false
      });
      group.data = [item.i];
      canvas.add(group);
    });

    //扫码器
    this._BarcodeReader.forEach((item: any) => {
      const objects: any[] = [
        index[item.i] = new fabric.Triangle({
          left: item.x,
          top: item.y,
          width: item.w,
          height: item.h,
          // rx: item.r ?? 0,
          // ry: item.r ?? 0,
          angle: item.a,
          fill: colors.red,
        })
      ];
      if (item.t) {
        objects.push(new fabric.Text(item.i.toString(), {
          left: item.t?.x,
          top: item.t?.y,
          angle: item.t?.angle,
          // stroke:pink
          fontSize: 8
        }));
      };
      // if (item.a) {
      //   objects.push(new fabric.Rect({
      //     left: data[item.i]?.left+30 || 100,
      //     top: item.a?.y,
      //     width: item.a?.w,
      //     height: item.a?.h,
      //     rx: item.a.r ?? 0,
      //     ry: item.a.r ?? 0,
      //     fill: '#1e88e5',
      //     visible:false
      //   }));
      // } 
      var group = new fabric.Group(objects, {
        hoverCursor: 'pointer',
        objectCaching: false,
        hasControls: false,
        selectable: false
      });
      group.data = [item.i];
      canvas.add(group);
    })



// 绘制堆垛机,坐标信息从monitor.component.ts  update()函数更新
//参数：Path('M 0 8 L 8 0 L 38 0 L 46 8 L 38 16 L 8 16 z'用于绘制菱形角矩形
// M 0 8：这是“移动”指令（Move），表示将绘图的光标（或笔）移动到点 (0, 8)。 
// L 8 0：这是“线条”指令（Line），表示从当前位置绘制一条直线到点 (8, 0)
// 11101堆垛机 双叉堆垛机两个光电
const stacker1 = new fabric.Path('M 0 8 L 8 0 L 38 0 L 46 8 L 38 16 L 8 16 z', {
  left: data[11101]?.left || 1000,
  top: 435,
  width: 40,
  height: 10,
  //fill: colors.yellow,
  fill: data[11101]?.color || colors.yellow,
  hoverCursor: 'pointer',
  hasControls: false,
  selectable: false
});
canvas.add(index[stacker1.data = 11101] = stacker1);

// 1堆垛机有物光电显示.0
const stacker111011 = new fabric.Rect({
  // 此设备号和update函数，堆垛机部分设置的设备号保持一致 zb 恒石堆垛机*10+1
  left: data[111011]?.left + 25 || 1025, 
  top: 441,
  width: 6,
  height: 6,
  hoverCursor: 'pointer',
  objectCaching: false,
  hasControls: false,
  selectable: false,
  fill: colors.blue,
  //visible: data[111011]?.splitByte_0 || false
  //debug
  visible: true
});
canvas.add(index[stacker111011.data = 111011] = stacker111011);

// 1堆垛机有物光电显示.1在画布左边
const stacker111012 = new fabric.Rect({
  // 此设备号和update函数，堆垛机部分设置的设备号保持一致 zb 恒石堆垛机*10+1
  left: data[111012]?.left + 15 || 1015, 
  top: 441,
  width: 6,
  height: 6,
  hoverCursor: 'pointer',
  objectCaching: false,
  hasControls: false,
  selectable: false,
  fill: colors.blue,
 // visible: data[111012]?.splitByte_1 || false
  visible: true
});
canvas.add(index[stacker111012.data = 111012] = stacker111012);


// 11102堆垛机
const stacker2 = new fabric.Path('M 0 8 L 8 0 L 38 0 L 46 8 L 38 16 L 8 16 z', {
  left: data[11102]?.left || 1000,
  top: 280,
  width: 15,
  height: 10,
  //fill: colors.yellow,
  fill: data[11102]?.color || colors.yellow,
  hoverCursor: 'pointer',
  hasControls: false,
  selectable: false
});
canvas.add(index[stacker2.data = 11102] = stacker2);

// 2堆垛机光电开关.0
const stacker111021 = new fabric.Rect({
  left: data[111021]?.left + 25 || 1025,
  top: 286,
  width: 6,
  height: 6,
  hoverCursor: 'pointer',
  objectCaching: false,
  hasControls: false,
  selectable: false,
  fill: colors.blue,
  // visible: data[111021]?.splitByte_0 || false
    //debug
    visible: true
});
canvas.add(index[stacker111021.data = 111021] = stacker111021);

// 2堆垛机有物光电显示.1
const stacker111022 = new fabric.Rect({
  // 此设备号和update函数，堆垛机部分设置的设备号保持一致 zb 恒石堆垛机*10+1
  left: data[111022]?.left + 15 || 1015, 
  top: 286,
  width: 6,
  height: 6,
  hoverCursor: 'pointer',
  objectCaching: false,
  hasControls: false,
  selectable: false,
  fill: colors.blue,
  // visible: data[111022]?.splitByte_1 || false
    //debug
    visible: true
});
canvas.add(index[stacker111022.data = 111022] = stacker111022);



// 11103堆垛机 
const stacker3 = new fabric.Path('M 0 8 L 8 0 L 38 0 L 46 8 L 38 16 L 8 16 z', {
  left: data[11103]?.left || 1000,
  top: 155,
  width: 15,
  height: 10,
  //fill: colors.yellow,
  fill: data[11103]?.color || colors.yellow,
  hoverCursor: 'pointer',
  hasControls: false,
  selectable: false,
  
});
canvas.add(index[stacker3.data = 11103] = stacker3);

// 3堆垛机光电开关.0
const stacker111031 = new fabric.Rect({
  left: data[111031]?.left + 25 || 1025,
  top: 161,
  width: 6,
  height: 6,
  hoverCursor: 'pointer',
  objectCaching: false,
  hasControls: false,
  selectable: false,
  fill: colors.blue,
  // visible: data[111031]?.splitByte_0 || false
    //debug
    visible: true
});
canvas.add(index[stacker111031.data = 111031] = stacker111031);

// 3堆垛机有物光电显示.1
const stacker111032 = new fabric.Rect({
  // 此设备号和update函数，堆垛机部分设置的设备号保持一致 zb 恒石堆垛机*10+1
  left: data[111032]?.left + 15 || 1015, 
  top: 161,
  width: 6,
  height: 6,
  hoverCursor: 'pointer',
  objectCaching: false,
  hasControls: false,
  selectable: false,
  fill: colors.blue,
  // visible: data[111032]?.splitByte_1 || false
    //debug
    visible: true
});
canvas.add(index[stacker111032.data = 111032] = stacker111032);


// 11104堆垛机 
const stacker4 = new fabric.Path('M 0 8 L 8 0 L 38 0 L 46 8 L 38 16 L 8 16 z', {
  left: data[11104]?.left || 1000,
  top: 0,
  width: 15,
  height: 10,
  //fill: colors.yellow,
  fill: data[11104]?.color || colors.yellow,
  hoverCursor: 'pointer',
  hasControls: false,
  selectable: false,
  
});
canvas.add(index[stacker4.data = 11104] = stacker4);

// 4堆垛机光电开关.0
const stacker111041 = new fabric.Rect({
  left: data[111041]?.left + 25 || 1025,
  top: 6,
  width: 6,
  height: 6,
  hoverCursor: 'pointer',
  objectCaching: false,
  hasControls: false,
  selectable: false,
  fill: colors.blue,
  // visible: data[111041]?.splitByte_0 || false
    //debug
    visible: true
});
canvas.add(index[stacker111041.data = 111041] = stacker111041);

// 4堆垛机有物光电显示.1
const stacker111042 = new fabric.Rect({
  // 此设备号和update函数，堆垛机部分设置的设备号保持一致 zb 恒石堆垛机*10+1
  left: data[111042]?.left + 15 || 1015, 
  top: 6,
  width: 6,
  height: 6,
  hoverCursor: 'pointer',
  objectCaching: false,
  hasControls: false,
  selectable: false,
  fill: colors.blue,
  // visible: data[111042]?.splitByte_1 || false
    //debug
    visible: true
});
canvas.add(index[stacker111032.data = 111042] = stacker111042);


// --------------穿梭车画面显示-----------------
 //25101 穿梭车 上下动
 const RGV25101 = new fabric.Path('M 0 8 L 8 0 L 58 0 L 66 8 L 58 16 L 8 16 z', {
  //left: 100,
  left: 1175+10,//data[13001]?.left || 100
  top: data[25101]?.top || -40,
  width: 30,
  height: 15,
  //fill: colors.yellow,
  fill: data[25101]?.color || colors.yellow,
  hoverCursor: 'pointer',
  hasControls: false,
  selectable: false,
  //长度
  scaleX : 0.5,
  //宽
 //  scaleY : 0.5,
 // 旋转角度
 angle: 90 
 });
 canvas.add(index[RGV25101.data = 25101] = RGV25101);

 //25101=>25101.0有货
 const RGV251011 = new fabric.Rect({
  left: 1175-3,
  top:data[25101]?.top +10 || -30,
  width: 9,
  height: 9,
  fill: colors.blue,
  hoverCursor: 'pointer',
  objectCaching: false,
  hasControls: false,
  selectable: false,
  //visible: data[152011]?.splitByte_0 || false
   visible:true
 });
 canvas.add(index[RGV251011.data = 251011] = RGV251011);

// 穿梭车画面显示
 //25102 穿梭车 上下动
 const RGV25102 = new fabric.Path('M 0 8 L 8 0 L 58 0 L 66 8 L 58 16 L 8 16 z', {
  //left: 100,
  left: 1175+10,//data[13001]?.left || 100
  top: data[25102]?.top || 580,
  width: 30,
  height: 15,
  //fill: colors.yellow,
  fill: data[25102]?.color || colors.yellow,
  hoverCursor: 'pointer',
  hasControls: false,
  selectable: false,
  //长度
  scaleX : 0.5,
  //宽
 //  scaleY : 0.5,
 // 旋转角度
 angle: 90 
 });
 canvas.add(index[RGV25102.data = 25102] = RGV25102);

 //25102=>25102.0有货
 const RGV251021 = new fabric.Rect({
  left: 1175-3,
  top:data[25102]?.top + 10 || 590,
  width: 9,
  height: 9,
  fill: colors.blue,
  hoverCursor: 'pointer',
  objectCaching: false,
  hasControls: false,
  selectable: false,
  //visible: data[152021]?.splitByte_0 || false
  visible:true
 });
 canvas.add(index[RGV251021.data = 251021] = RGV251021);



// //21006堆垛机
// const stacker5 = new fabric.Path('M 0 8 L 8 0 L 38 0 L 46 8 L 38 16 L 8 16 z', {
//   left: data[21006]?.left || 1259,//data[21010]?.left || 1122
//   top: 161,
//   width: 15,
//   height: 10,
//   //fill: colors.yellow,
//   fill: data[21006]?.color || colors.yellow,
//   hoverCursor: 'pointer',
//   hasControls: false,
//   selectable: false
// });
// canvas.add(index[stacker5.data = 21006] = stacker5);
// // //29007=>21007.0有货
// const stacker39006 = new fabric.Rect({
//   left: data[21006]?.left + 20 || 1289,
//   top: 165,
//   width: 6,
//   height: 6,
//   hoverCursor: 'pointer',
//   objectCaching: false,
//   hasControls: false,
//   selectable: false,
//   fill: colors.blue,
//   visible: data[21006]?.splitByte_0 || false
// });
// canvas.add(index[stacker39006.data = 39006] = stacker39006);




}












































}