zhangbo
/
HSYL_WCSWEB
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
6 Commits
1 Branch
0 Tags
15 MiB
 
 
 
Tree: 52578afa2a
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '52578afa2a'
${ noResults }
HSYL_WCSWEB/src-back/app/routes/wcs/monitor/monitor.canvas.part1.ts

1538 lines
57 KiB
Raw Blame History

import { fabric } from 'fabric';
import { I18nService } from '@app/core/services/i18n.service';
export class MonitorCanvasPart1 {
constructor(
private _i18nService: I18nService
) { };
public _conveyors: any[] = [
//tabpage包含的所有输送线
// i:设备编号，X设备X坐标，Y设备Y坐标，w设备宽度，H设备高度，R设备图形圆度；
//t:设备的编号显示{X编号X坐标，Y编号Y坐标}；a:输送线的探物(.0){XYWH对应坐标宽高度} ;
//b:输送线的探物(.1){XYWH对应坐标宽高度};angle :角度 king 47
// HS一楼左侧直穿输送线
{ i: 12209, x: 170, y: 50, w: 50, h: 20, t: { x: 180, y: 70 }, a: { x: 195, y: 55, w:7, h: 7},j:{angle: 0} },
{ i: 12210, x: 220, y: 50, w: 80, h: 20, t: { x: 230, y: 70 }, a: { x: 260, y: 55, w:7, h: 7},j:{angle: 0} },
{ i: 12211, x: 170, y: 115, w: 50, h: 20, t: { x: 180, y: 135 }, a: { x: 195, y: 120, w:7, h: 7},j:{angle: 0} },
{ i: 12212, x: 220, y: 115, w: 80, h: 20, t: { x: 230, y: 135 }, a: { x: 260, y: 120, w:7, h: 7},j:{angle: 0} },
{ i: 12213, x: 170, y: 175, w: 50, h: 20, t: { x: 180, y: 195 }, a: { x: 195, y: 180, w:7, h: 7},j:{angle: 0} },
{ i: 12214, x: 220, y: 175, w: 80, h: 20, t: { x: 230, y: 195 }, a: { x: 260, y: 180, w:7, h: 7},j:{angle: 0} },
{ i: 12215, x: 170, y: 240, w: 50, h: 20, t: { x: 180, y: 260 }, a: { x: 195, y: 245, w:7, h: 7},j:{angle: 0} },
{ i: 12216, x: 220, y: 240, w: 80, h: 20, t: { x: 230, y: 260 }, a: { x: 260, y: 245, w:7, h: 7},j:{angle: 0} },
{ i: 12217, x: 170, y: 300, w: 50, h: 20, t: { x: 180, y: 320 }, a: { x: 195, y: 305, w:7, h: 7},j:{angle: 0} },
{ i: 12218, x: 220, y: 300, w: 80, h: 20, t: { x: 230, y: 320 }, a: { x: 260, y: 305, w:7, h: 7},j:{angle: 0} },
{ i: 12219, x: 170, y: 395, w: 50, h: 20, t: { x: 180, y: 415 }, a: { x: 195, y: 400, w:7, h: 7},j:{angle: 0} },
{ i: 12220, x: 220, y: 395, w: 80, h: 20, t: { x: 230, y: 415 }, a: { x: 260, y: 400, w:7, h: 7},j:{angle: 0} },
{ i: 12221, x: 170, y: 455, w: 130, h: 20, t: { x: 180, y: 475 }, a: { x: 200, y: 460, w:7, h: 7},j:{angle: 0} },
//HS一楼左侧直穿顶升站台
{ i: 12242, x: 280, y: 50, w: 15, h: 15, t: { x: 275, y: 70 }, a: { x: 284, y: 55, w:7, h: 7},j:{angle: 0} },
{ i: 12243, x: 280, y: 115, w: 15, h: 15, t: { x: 275, y: 135 }, a: { x: 284, y: 120, w:7, h: 7},j:{angle: 0} },
{ i: 12244, x: 280, y: 175, w: 15, h: 15, t: { x: 275, y: 195 }, a: { x: 284, y: 180, w:7, h: 7},j:{angle: 0} },
{ i: 12245, x: 280, y: 240, w: 15, h: 15, t: { x: 275, y: 260 }, a: { x: 284, y: 245, w:7, h: 7},j:{angle: 0} },
{ i: 12246, x: 280, y: 300, w: 15, h: 15, t: { x: 275, y: 320 }, a: { x: 284, y: 305, w:7, h: 7},j:{angle: 0} },
{ i: 12247, x: 280, y: 395, w: 15, h: 15, t: { x: 275, y: 415 }, a: { x: 284, y: 400, w:7, h: 7},j:{angle: 0} },
{ i: 12231, x: 220, y: 455, w: 15, h: 15, t: { x: 215, y: 445 }, a: { x: 224, y: 460, w:7, h: 7},j:{angle: 0} },
{ i: 14003, x: 218, y: 475, w: 20, h: 40, t: { x: 243, y: 480 }, a: { x: 224, y: 480, w:7, h: 7},j:{angle: 0} },
{ i: 14103, x: 218, y: 515, w: 20, h: 40, t: { x: 243, y: 540 }, a: { x: 224, y: 520, w:7, h: 7},j:{angle: 0} },
// HS一楼右侧环穿输送线，右侧
{ i: 12107, x: 1080, y: 35, w: 50, h: 20, t: { x: 1110, y: 55 }, a: { x: 1105, y: 40, w:7, h: 7},j:{angle: 0} },
{ i: 12108, x: 1000, y: 35, w: 80, h: 20, t: { x: 1050, y: 55 }, a: { x: 1050, y: 40, w:7, h: 7},j:{angle: 0} },
{ i: 12111, x: 1080, y: 100, w: 50, h: 20, t: { x: 1090, y: 120 }, a: { x: 1105, y: 105, w:7, h: 7},j:{angle: 0} },
{ i: 12112, x: 1000, y: 100, w: 80, h: 20, t: { x: 1050, y: 120 }, a: { x: 1050, y: 105, w:7, h: 7},j:{angle: 0} },
{ i: 12113, x: 1080, y: 190, w: 50, h: 20, t: { x: 1090, y: 210 }, a: { x: 1105, y: 195, w:7, h: 7},j:{angle: 0} },
{ i: 12114, x: 1000, y: 190, w: 80, h: 20, t: { x: 1050, y: 210 }, a: { x: 1050, y: 195, w:7, h: 7},j:{angle: 0} },
{ i: 12115, x: 1080, y: 225, w: 50, h: 20, t: { x: 1090, y: 245 }, a: { x: 1105, y: 230, w:7, h: 7},j:{angle: 0} },
{ i: 12116, x: 1000, y: 225, w: 80, h: 20, t: { x: 1050, y: 245 }, a: { x: 1050, y: 230, w:7, h: 7},j:{angle: 0} },
{ i: 12117, x: 1080, y: 315, w: 50, h: 20, t: { x: 1090, y: 335 }, a: { x: 1105, y: 320, w:7, h: 7},j:{angle: 0} },
{ i: 12118, x: 1000, y: 315, w: 80, h: 20, t: { x: 1050, y: 335 }, a: { x: 1050, y: 320, w:7, h: 7},j:{angle: 0} },
{ i: 12119, x: 1080, y: 380, w: 50, h: 20, t: { x: 1090, y: 400 }, a: { x: 1105, y: 385, w:7, h: 7},j:{angle: 0} },
{ i: 12120, x: 1000, y: 380, w: 80, h: 20, t: { x: 1050, y: 400 }, a: { x: 1050, y: 385, w:7, h: 7},j:{angle: 0} },
{ i: 12121, x: 1080, y: 470, w: 50, h: 20, t: { x: 1090, y: 490 }, a: { x: 1105, y: 475, w:7, h: 7},j:{angle: 0} },
{ i: 12122, x: 1000, y: 470, w: 80, h: 20, t: { x: 1050, y: 490 }, a: { x: 1050, y: 475, w:7, h: 7},j:{angle: 0} },
{ i: 12109, x: 1060, y: 65, w: 70, h: 20, t: { x: 1110, y: 85 }, a: { x: 1105, y: 70, w:7, h: 7},j:{angle: 0} },
{ i: 12110, x: 1010, y: 65, w: 50, h: 20, t: { x: 1020, y: 85 }, a: { x: 1045, y: 70, w:7, h: 7},j:{angle: 0} },
{ i: 12123, x: 1080, y: 545, w: 50, h: 20, t: { x: 1090, y: 565 }, a: { x: 1105, y: 550, w:7, h: 7},j:{angle: 0} },
{ i: 12124, x: 1030, y: 545, w: 50, h: 20, t: { x: 1040, y: 565 }, a: { x: 1055, y: 550, w:7, h: 7},j:{angle: 0} },
{ i: 12125, x: 970, y: 545, w: 60, h: 20, t: { x: 1000, y: 565 }, a: { x: 1010, y: 550, w:7, h: 7},j:{angle: 0} },
{ i: 12126, x: 1220, y: 545, w: 50, h: 20, t: { x: 1230, y: 565 }, a: { x: 1245, y: 550, w:7, h: 7},j:{angle: 0} },
{ i: 12127, x: 1270, y: 545, w: 50, h: 20, t: { x: 1280, y: 565 }, a: { x: 1295, y: 550, w:7, h: 7},j:{angle: 0} },
{ i: 12128, x: 1320, y: 545, w: 60, h: 20, t: { x: 1330, y: 565 }, a: { x: 1340, y: 550, w:7, h: 7},j:{angle: 0} },
//HS一楼右侧环穿顶升站台远叉
{ i: 12142, x: 1005, y: 35, w: 15, h: 15, t: { x: 1000, y: 55 }, a: { x: 1009, y: 40, w:7, h: 7},j:{angle: 0} },
{ i: 12143, x: 1005, y: 100, w: 15, h: 15, t: { x: 1000, y: 120 }, a: { x: 1009, y: 105, w:7, h: 7},j:{angle: 0} },
{ i: 12144, x: 1005, y: 190, w: 15, h: 15, t: { x: 1000, y: 210 }, a: { x: 1009, y: 195, w:7, h: 7},j:{angle: 0} },
{ i: 12145, x: 1005, y: 225, w: 15, h: 15, t: { x: 1000, y: 245 }, a: { x: 1009, y: 230, w:7, h: 7},j:{angle: 0} },
{ i: 12146, x: 1005, y: 315, w: 15, h: 15, t: { x: 1000, y: 335 }, a: { x: 1009, y: 320, w:7, h: 7},j:{angle: 0} },
{ i: 12147, x: 1005, y: 380, w: 15, h: 15, t: { x: 1000, y: 400 }, a: { x: 1009, y: 385, w:7, h: 7},j:{angle: 0} },
{ i: 12148, x: 1005, y: 470, w: 15, h: 15, t: { x: 1000, y: 490 }, a: { x: 1009, y: 475, w:7, h: 7},j:{angle: 0} },
// 近叉站台
{ i: 13142, x: 1025, y: 35, w: 15, h: 15, t: { x: 1025, y: 55 }, a: { x: 1029, y: 40, w:7, h: 7},j:{angle: 0} },
{ i: 13143, x: 1025, y: 100, w: 15, h: 15, t: { x: 1025, y: 120 }, a: { x: 1029, y: 105, w:7, h: 7},j:{angle: 0} },
{ i: 13144, x: 1025, y: 190, w: 15, h: 15, t: { x: 1025, y: 210 }, a: { x: 1029, y: 195, w:7, h: 7},j:{angle: 0} },
{ i: 13145, x: 1025, y: 225, w: 15, h: 15, t: { x: 1025, y: 245 }, a: { x: 1029, y: 230, w:7, h: 7},j:{angle: 0} },
{ i: 13146, x: 1025, y: 315, w: 15, h: 15, t: { x: 1025, y: 335 }, a: { x: 1029, y: 320, w:7, h: 7},j:{angle: 0} },
{ i: 13147, x: 1025, y: 380, w: 15, h: 15, t: { x: 1025, y: 400 }, a: { x: 1029, y: 385, w:7, h: 7},j:{angle: 0} },
{ i: 13148, x: 1025, y: 470, w: 15, h: 15, t: { x: 1025, y: 490 }, a: { x: 1029, y: 475, w:7, h: 7},j:{angle: 0} },
// 环穿入库站台
{ i: 12101, x: 1220, y: 140, w: 70, h: 20, t: { x: 1230, y: 160 }, a: { x: 1265, y: 145, w:7, h: 7},j:{angle: 0} },
{ i: 12102, x: 1220, y: 170, w: 70, h: 20, t: { x: 1230, y: 190 }, a: { x: 1265, y: 175, w:7, h: 7},j:{angle: 0} },
{ i: 12103, x: 1220, y: 255, w: 70, h: 20, t: { x: 1230, y: 275 }, a: { x: 1265, y: 260, w:7, h: 7},j:{angle: 0} },
{ i: 12104, x: 1220, y: 285, w: 70, h: 20, t: { x: 1230, y: 305 }, a: { x: 1265, y: 290, w:7, h: 7},j:{angle: 0} },
{ i: 12105, x: 1220, y: 420, w: 70, h: 20, t: { x: 1230, y: 440 }, a: { x: 1265, y: 425, w:7, h: 7},j:{angle: 0} },
{ i: 12106, x: 1220, y: 450, w: 70, h: 20, t: { x: 1230, y: 470 }, a: { x: 1265, y: 455, w:7, h: 7},j:{angle: 0} },
//环穿一侧顶升移栽
{ i: 12131, x: 1085, y: 35, w: 15, h: 15, t: { x: 1085, y: 55 }, a: { x: 1089, y: 40, w:7, h: 7},j:{angle: 0} },
{ i: 12132, x: 1085, y: 65, w: 15, h: 15, t: { x: 1085, y: 85 }, a: { x: 1089, y: 70, w:7, h: 7},j:{angle: 0} },
{ i: 12133, x: 975, y: 545, w: 15, h: 15, t: { x: 975, y: 535 }, a: { x: 979, y: 550, w:7, h: 7},j:{angle: 0} },
{ i: 12134, x: 1360, y: 545, w: 15, h: 15, t: { x: 1360, y: 535 }, a: { x: 1364, y: 550, w:7, h: 7},j:{angle: 0} },
{ i: 14001, x: 970, y: 565, w: 20, h: 30, t: { x: 950, y: 570 }, a: { x: 979, y: 570, w:7, h: 7},j:{angle: 0} },
{ i: 14101, x: 970, y: 595, w: 20, h: 30, t: { x: 950, y: 600 }, a: { x: 979, y: 600, w:7, h: 7},j:{angle: 0} },
{ i: 14002, x: 1360, y: 565, w: 20, h: 30, t: { x: 1385, y: 570 }, a: { x: 1364, y: 570, w:7, h: 7},j:{angle: 0} },
{ i: 14102, x: 1360, y: 595, w: 20, h: 30, t: { x: 1385, y: 600 }, a: { x: 1364, y: 600, w:7, h: 7},j:{angle: 0} },
//#region 折叠输送线
// { i: 12009, x: 106, y: 174, w: 30, h: 20, t: { x: 106, y: 200 }, a: { x: 116, y:180, w:7, h: 7},j:{angle: 0} },
// { i: 12038, x: 138, y: -25, w: 25, h: 30, t: { x: 165, y: -19}, a: { x: 148, y: -15, w:7, h: 7},j:{angle: 0} },
// { i: 12037, x: 138, y: 6, w: 25, h: 30, t: { x: 111, y: 23 }, a: { x: 148, y: 18, w:7, h: 7},j:{angle: 0} },
// { i: 12036, x: 142, y: 12, w: 16, h: 16, t: { x: 115, y: 0 }, a: { x: 148, y: 18, w:7, h: 7},j:{angle: 30} },
// { i: 12039, x: 138, y: 37, w: 25, h: 30, t: { x: 165, y: 43 }, a: { x: 148, y: 47, w:7, h: 7},j:{angle: 0} },
// { i: 12015, x: 138, y: 68, w: 25, h: 30, t: { x: 111, y: 83 }, a: { x: 148, y: 78, w:7, h: 7},j:{angle: 0} },
// { i: 12016, x: 142, y: 74, w: 16, h: 16, t: { x: 115, y:60 }, a: { x: 148, y: 77, w:7, h: 7},j:{angle: 30} },
// { i: 12014, x: 138, y: 99, w: 25, h: 30, t: { x: 165, y: 105 }, a: { x: 148, y:109, w:7, h: 7},j:{angle: 0} },
// { i: 12013, x: 138, y: 130, w: 25, h: 30, t: { x: 165, y: 136 }, a: { x: 148, y:140, w:7, h: 7},j:{angle: 0} },
// { i: 12011, x: 138, y: 161, w: 25, h: 33, t: { x: 165, y: 180 }, a: { x: 148, y:171, w:7, h: 7},j:{angle: 0} },
// { i: 12010, x: 142, y: 167, w: 16, h: 16, t: { x: 165, y: 166 }, a: { x: 148, y:170, w:7, h: 7},j:{angle: -30} },
// { i: 12035, x: 164, y: 12, w: 30, h: 20, t: { x: 168, y: 0 }, a: { x: 175, y: 18, w:7, h: 7},j:{angle: 0} },
// { i: 12034, x: 195, y: 12, w: 30, h: 20, t: { x: 199, y: 0 }, a: { x: 206, y: 18, w:7, h: 7},j:{angle: 0} },
// { i: 12017, x: 164, y: 72, w: 30, h: 20, t: { x: 164, y: 60}, a: { x: 175, y: 78, w:7, h: 7},j:{angle: 0} },
// { i: 12018, x: 195, y: 72, w: 30, h: 20, t: { x: 195, y: 60 }, a: { x: 206, y: 78, w:7, h: 7},j:{angle: 0} },
// { i: 12033, x: 228, y: -50, w: 20, h: 28, t: { x: 250, y: -46 }, a: { x: 234, y: -44, w:7, h: 7},j:{angle: 0} },
// { i: 12032, x: 228, y: -21, w: 20, h: 28, t: { x: 250, y: -14 }, a: { x: 234, y: -14, w:7, h: 7},j:{angle: 0} },
// { i: 12030, x: 228, y: 8, w: 20, h: 29, t: { x: 250, y: 14 }, a: { x: 234, y: 14, w:7, h: 7},j:{angle: 0} },
// { i: 12135, x: 228, y: 38, w: 20, h: 29, t: { x: 250, y: 44 }, a: { x: 234, y:44, w:7, h: 7},j:{angle: 0} },
// { i: 12020, x: 228, y: 68, w: 20, h: 29, t: { x: 250, y: 74 }, a: { x: 234, y: 74, w:7, h: 7},j:{angle: 0} },
// { i: 12021, x: 228, y: 98, w: 20, h: 29, t: { x: 250, y: 104 }, a: { x: 234, y:104, w:7, h: 7},j:{angle: 0} },
// { i: 12022, x: 228, y: 128, w: 20, h: 29, t: { x: 250, y: 134 }, a: { x: 234, y: 134, w:7, h: 7},j:{angle: 0} },
// { i: 12023, x: 228, y: 158, w: 20, h: 29, t: { x: 250, y: 164 }, a: { x: 234, y: 164, w:7, h: 7},j:{angle: 0} },
// { i: 12024, x: 228, y: 188, w: 20, h: 29, t: { x: 250, y: 194}, a: { x: 234, y: 194, w:7, h: 7},j:{angle: 0} },
// { i: 12027, x: 218, y: 218, w: 30, h: 20, t: { x: 218, y:238}, a: { x: 226, y: 224, w:7, h: 7},j:{angle: 0} },
// { i: 12028, x: 184, y: 218, w: 33, h: 20, t: { x: 188, y: 238 }, a: { x: 190, y: 224, w:7, h: 7},j:{angle: 0} },
// { i: 12029, x: 162, y: 218, w: 21, h: 20, t: { x: 162, y: 238 }, a: { x: 168, y: 224, w:7, h: 7},j:{angle: 0} },
// { i: 14001, x: 136, y: 216, w: 25, h: 25,r:8.5, t: { x: 136, y: 241}, a: { x: 146, y: 222, w:7, h: 7},j:{angle: 0} },
// { i: 12048, x: 60, y: 520, w: 30, h: 20, t: { x: 60, y: 542 }, a: { x: 68, y:526, w:7, h: 7},j:{angle: 0} },
// { i: 12047, x: 91, y: 520, w: 30, h: 20, t: { x: 91, y: 542 }, a: { x: 99, y:526, w:7, h: 7},j:{angle: 0} },
// { i: 12046, x: 122, y: 520, w: 30, h: 20, t: { x: 122, y: 542 }, a: { x: 130, y:526, w:7, h: 7},j:{angle: 0} },
// { i: 12045, x: 153, y: 520, w: 30, h: 20, t: { x: 153, y: 542 }, a: { x: 161, y:526, w:7, h: 7},j:{angle: 0} },
// { i: 12044, x: 184, y: 520, w: 30, h: 20, t: { x: 184, y: 542 }, a: { x: 192, y:526, w:7, h: 7},j:{angle: 0} },
// { i: 12053, x: 184, y: 480, w: 30, h: 20, t: { x: 184, y: 502 }, a: { x: 192, y:486, w:7, h: 7},j:{angle: 0} },
// { i: 12054, x: 153, y: 480, w: 30, h: 20, t: { x: 153, y: 502 }, a: { x: 161, y:486, w:7, h: 7},j:{angle: 0} },
// { i: 12055, x: 122, y: 480, w: 30, h: 20, t: { x: 122, y: 502 }, a: { x: 130, y:486, w:7, h: 7},j:{angle: 0} },
// { i: 12057, x: 184, y: 440, w: 30, h: 20, t: { x: 184, y: 462 }, a: { x: 192, y:446, w:7, h: 7},j:{angle: 0} },
// { i: 12058, x: 153, y: 440, w: 30, h: 20, t: { x: 153, y: 462 }, a: { x: 161, y:446, w:7, h: 7},j:{angle: 0} },
// { i: 12056, x: 214, y: 430, w: 20, h: 40, t: { x: 234, y:460 }, a: { x: 220, y: 440, w:7, h: 7},j:{angle: 0} },
// { i: 12052, x: 214, y:471, w: 20, h: 71, t: { x: 234, y:508 }, a: { x: 220, y: 481, w:7, h: 7},j:{angle: 0} },
// { i: 12051, x: 218, y: 440, w: 14, h: 14, t: { x: 234, y:443 }, a: { x: 222, y: 444, w:7, h: 7},j:{angle: 0} },
// { i: 12050, x: 218, y: 481, w: 14, h: 14, t: { x: 234, y:485 }, a: { x: 222, y: 485, w:7, h: 7},j:{angle: 0} },
// { i: 12049, x: 218, y: 522, w: 14, h: 14, t: { x: 210, y:548 }, a: { x: 222, y: 526, w:7, h: 7},j:{angle: 0} },
// { i: 12043, x: 235, y: 522, w: 30, h: 20, t: { x: 250, y: 546 }, a: { x: 242, y:527, w:7, h: 7},j:{angle: 60} },
// { i: 12042, x: 266, y: 522, w: 20, h: 20, t: { x: 276, y: 546 }, a: { x: 272, y:527, w:7, h: 7},j:{angle: 60} },
// { i: 12041, x: 287, y: 522, w: 20, h: 20, t: { x: 297, y: 546 }, a: { x: 293, y:527, w:7, h: 7},j:{angle: 60} },
// { i: 12134, x: 308, y: 522, w: 25, h: 20, t: { x: 340, y: 527 }, a: { x: 315, y:527, w:7, h: 7},j:{angle: 0} },
// { i: 12133, x: 312, y: 525, w: 14, h: 14, t: { x: 323, y: 546 }, a: { x: 315, y:527, w:7, h: 7},j:{angle: 60} },
// { i: 12132, x: 312, y: 490, w: 20, h: 30, t: { x: 334, y:496 }, a: { x: 318, y: 498, w:7, h: 7},j:{angle: 0} },
// { i: 12131, x: 312, y:459, w: 20, h: 30, t: { x: 334, y:465 }, a: { x: 318, y: 467, w:7, h: 7},j:{angle: 0} },
// { i: 12130, x: 312, y:418, w: 20, h: 40, t: { x: 334, y:424 }, a: { x: 318, y: 426, w:7, h: 7},j:{angle: 0} },
// { i: 12128, x: 292, y: 396, w: 40, h: 20, t: { x: 294, y: 382 }, a: { x: 298, y: 400, w:7, h: 7},j:{angle: 0} },
// { i: 12129, x: 313, y: 399, w: 14, h: 14, t: { x: 334, y: 402 }, a: { x: 315, y: 402, w:7, h: 7},j:{angle: 0} },
// { i: 14002, x: 265, y: 394, w: 25, h: 25,r:8.5, t: { x: 264, y: 420}, a: { x: 272, y: 402, w:7, h: 7},j:{angle: 0} },
// { i: 22005, x: 500, y: 50, w: 30, h: 20, t: { x: 499, y: 72 }, a: { x: 507, y: 56, w:7, h: 7},j:{angle: 0} },
// { i: 22006, x: 531, y: 50, w: 30, h: 20, t: { x: 530, y: 72 }, a: { x: 538, y: 56, w:7, h: 7},j:{angle: 0} },
// { i: 22007, x: 562, y: 50, w: 30, h: 20, t: { x: 561, y: 72 }, a: { x: 569, y: 56, w:7, h: 7},j:{angle: 0} },
// { i: 22008, x: 593, y: 50, w: 30, h: 20, t: { x: 592, y: 72 }, a: { x: 600, y: 56, w:7, h: 7},j:{angle: 0} },
// { i: 22009, x: 624, y: 50, w: 30, h: 20, t: { x: 623, y: 72 }, a: { x: 631, y: 56, w:7, h: 7},j:{angle: 0} },
// { i: 22010, x: 655, y: 50, w: 30, h: 20, t: { x: 654, y: 72 }, a: { x: 662, y: 56, w:7, h: 7},j:{angle: 0} },
// { i: 22011, x: 686, y: 50, w: 30, h: 20, t: { x: 686, y: 72 }, a: { x: 693, y: 56, w:7, h: 7},j:{angle: 0} },
// { i: 22012, x: 717, y: 50, w: 30, h: 20, t: { x: 717, y: 72 }, a: { x: 724, y: 56, w:7, h: 7},j:{angle: 0} },
// { i: 22013, x: 748, y: 50, w: 30, h: 20, t: { x: 748, y: 72 }, a: { x: 755, y: 56, w:7, h: 7},j:{angle: 0} },
// { i: 22014, x: 779, y: 50, w: 30, h: 20, t: { x: 779, y: 72 }, a: { x: 786, y: 56, w:7, h: 7},j:{angle: 0} },
// { i: 22015, x: 810, y: 50, w: 30, h: 20, a: { x: 823, y: 56, w:7, h: 7},j:{angle: 0} },// t: { x: 810, y: 72 },
// { i: 22016, x: 818, y: 54, w: 14, h: 14, t: { x: 816, y: 72 }, a: { x: 823, y: 56, w:7, h: 7},j:{angle: 0} },
// { i: 22017, x: 500, y: 120, w: 30, h: 20, t: { x: 499, y: 142 }, a: { x: 507, y: 126, w:7, h: 7},j:{angle: 0} },
// { i: 22018, x: 531, y: 120, w: 30, h: 20, t: { x: 530, y: 142 }, a: { x: 538, y: 126, w:7, h: 7},j:{angle: 0} },
// { i: 22019, x: 562, y: 120, w: 30, h: 20, t: { x: 561, y: 142 }, a: { x: 569, y: 126, w:7, h: 7},j:{angle: 0} },
// { i: 22020, x: 593, y: 120, w: 30, h: 20, t: { x: 592, y: 142 }, a: { x: 600, y: 126, w:7, h: 7},j:{angle: 0} },
// { i: 22021, x: 624, y: 120, w: 30, h: 20, t: { x: 623, y: 142 }, a: { x: 631, y: 126, w:7, h: 7},j:{angle: 0} },
// { i: 22022, x: 655, y: 120, w: 30, h: 20, t: { x: 654, y: 142 }, a: { x: 662, y: 126, w:7, h: 7},j:{angle: 0} },
// { i: 22023, x: 686, y: 120, w: 30, h: 20, t: { x: 686, y: 142 }, a: { x: 693, y: 126, w:7, h: 7},j:{angle: 0} },
// { i: 22024, x: 717, y: 120, w: 30, h: 20, t: { x: 717, y: 142 }, a: { x: 724, y: 126, w:7, h: 7},j:{angle: 0} },
// { i: 22025, x: 748, y: 120, w: 30, h: 20, t: { x: 748, y: 142 }, a: { x: 755, y: 126, w:7, h: 7},j:{angle: 0} },
// { i: 22026, x: 779, y: 120, w: 30, h: 20, t: { x: 779, y: 142 }, a: { x: 786, y: 126, w:7, h: 7},j:{angle: 0} },
// { i: 22027, x: 810, y: 120, w: 30, h: 20, a: { x: 816, y: 126, w:7, h: 7},j:{angle: 0} },//, t: { x: 810, y: 142 }
// { i: 22028, x: 818, y: 124, w: 14, h: 14, t: { x: 818, y: 142 }, a: { x: 823, y: 126, w:7, h: 7},j:{angle: 0} },
// { i: 22029, x: 500, y: 170, w: 30, h: 20, t: { x: 499, y: 192 }, a: { x: 507, y: 176, w:7, h: 7},j:{angle: 0} },
// { i: 22030, x: 531, y: 170, w: 30, h: 20, t: { x: 530, y: 192 }, a: { x: 538, y: 176, w:7, h: 7},j:{angle: 0} },
// { i: 22031, x: 562, y: 170, w: 30, h: 20, t: { x: 561, y: 192 }, a: { x: 569, y: 176, w:7, h: 7},j:{angle: 0} },
// { i: 22032, x: 593, y: 170, w: 30, h: 20, t: { x: 592, y: 192 }, a: { x: 600, y: 176, w:7, h: 7},j:{angle: 0} },
// { i: 22033, x: 624, y: 170, w: 30, h: 20, t: { x: 623, y: 192 }, a: { x: 631, y: 176, w:7, h: 7},j:{angle: 0} },
// { i: 22034, x: 655, y: 170, w: 30, h: 20, t: { x: 654, y: 192 }, a: { x: 662, y: 176, w:7, h: 7},j:{angle: 0} },
// { i: 22035, x: 686, y: 170, w: 30, h: 20, t: { x: 685, y: 192 }, a: { x: 693, y: 176, w:7, h: 7},j:{angle: 0} },
// { i: 22036, x: 717, y: 170, w: 30, h: 20, t: { x: 717, y: 192 }, a: { x: 724, y: 176, w:7, h: 7},j:{angle: 0} },
// { i: 22037, x: 748, y: 170, w: 30, h: 20, t: { x: 748, y: 192 }, a: { x: 755, y: 176, w:7, h: 7},j:{angle: 0} },
// { i: 22038, x: 779, y: 170, w: 30, h: 20, t: { x: 779, y: 192 }, a: { x: 786, y: 176, w:7, h: 7},j:{angle: 0} },
// { i: 22039, x: 810, y: 170, w: 30, h: 20, a: { x: 816, y: 176, w:7, h: 7},j:{angle: 0} },//t: { x: 685, y: 192 },
// { i: 22040, x: 818, y: 174, w: 14, h: 14, t: { x: 818, y: 192 }, a: { x: 823, y: 176, w:7, h: 7},j:{angle: 0} },
// { i: 22041, x: 500, y: 240, w: 30, h: 20, t: { x: 500, y: 264 }, a: { x: 507, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22042, x: 531, y: 240, w: 30, h: 20, t: { x: 531, y: 264 }, a: { x: 538, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22043, x: 562, y: 240, w: 30, h: 20, t: { x: 562, y: 264 }, a: { x: 569, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22044, x: 593, y: 240, w: 30, h: 20, t: { x: 593, y: 264 }, a: { x: 600, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22045, x: 624, y: 240, w: 30, h: 20, t: { x: 624, y: 264 }, a: { x: 631, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22046, x: 655, y: 240, w: 30, h: 20, t: { x: 655, y: 264 }, a: { x: 662, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22047, x: 686, y: 240, w: 30, h: 20, t: { x: 686, y: 264 }, a: { x: 694, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22048, x: 717, y: 240, w: 30, h: 20, t: { x: 717, y: 264 }, a: { x: 724, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22049, x: 748, y: 240, w: 30, h: 20, t: { x: 748, y: 264 }, a: { x: 755, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22050, x: 779, y: 240, w: 30, h: 20, t: { x: 779, y: 264 }, a: { x: 786, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22051, x: 810, y: 240, w: 30, h: 20, a: { x: 816, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22052, x: 818, y: 244, w: 14, h: 14, t: { x: 818, y: 264 }, a: { x: 823, y: 246, w:7, h: 7},j:{angle: 0} },
// { i: 22001, x: 380, y: -21, w: 30, h: 20, t: { x: 380, y: 2 }, a: { x: 384, y: -14, w:7, h: 7},j:{angle: 0} },
// { i: 22004, x: 380, y: 394, w: 30, h: 20, t: { x: 380, y: 416 }, a: { x: 384, y: 400, w:7, h: 7},j:{angle: 0} },
// { i: 12060, x: 840, y: 20, w: 20, h: 28, t: { x: 816, y: 28 }, a: { x: 846, y: 28, w:7, h: 7},j:{angle: 0} },
// { i: 12059, x: 840, y: -10, w: 20, h: 28, t: { x: 816, y: -2 }, a: { x: 846, y: -2, w:7, h: 7},j:{angle: 0} },
// { i: 12061, x: 865, y: 20, w: 20, h: 28, t: { x: 889, y: 28 }, a: { x: 871, y: 28, w:7, h: 7},j:{angle: 45} },
// { i: 12062, x: 865, y: -10, w: 20, h: 28, t: { x: 889, y: -2 }, a: { x: 871, y: -2, w:7, h: 7},j:{angle: 45} },
// { i: 12064, x: 910, y: 20, w: 20, h: 28, t: { x: 934, y: 28 }, a: { x: 916, y: 28, w:7, h: 7},j:{angle: 0} },
// { i: 12063, x: 910, y: -10, w: 20, h: 28, t: { x: 934, y: -2 }, a: { x: 916, y: -2, w:7, h: 7},j:{angle: 0} },
// { i: 12066, x: 1040, y: 20, w: 20, h: 28, t: { x: 1026, y: 28 }, a: { x: 1046, y: 28, w:7, h: 7},j:{angle: 45} },
// { i: 12065, x: 1040, y: -10, w: 20, h: 28, t: { x: 1026, y: -2 }, a: { x: 1046, y: -2, w:7, h: 7},j:{angle: 45} },
// { i: 12067, x: 1065, y: 20, w: 20, h: 28, t: { x: 1085, y: 34 }, a: { x: 1071, y: 28, w:7, h: 7},j:{angle: -45} },
// { i: 12068, x: 1065, y: -10, w: 20, h: 28, t: { x: 1085, y: 4 }, a: { x: 1071, y: -2, w:7, h: 7},j:{angle: -45} },
// { i: 12076, x: 1390, y: 20, w: 20, h: 28, t: { x: 1410, y: 28 }, a: { x: 1396, y: 28, w:7, h: 7},j:{angle: -30} },
// { i: 12075, x: 1390, y: -10, w: 20, h: 28, t: { x: 1410, y: -2 }, a: { x: 1396, y: -2, w:7, h: 7},j:{angle: -30} },
// { i: 12074, x: 1360, y: 20, w: 20, h: 28, t: { x: 1346, y: 26 }, a: { x: 1366, y: 28, w:7, h: 7},j:{angle: 45} },
// { i: 12073, x: 1360, y: -10, w: 20, h: 28, t: { x: 1346, y: -4 }, a: { x: 1366, y: -2, w:7, h: 7},j:{angle: 45} },
// { i: 12078, x: 1320, y: 20, w: 20, h: 28, t: { x: 1308, y: 25 }, a: { x: 1326, y: 28, w:7, h: 7},j:{angle: 50} },
// { i: 12077, x: 1320, y: -10, w: 20, h: 28, t: { x: 1308, y: -5 }, a: { x: 1326, y: -2, w:7, h: 7},j:{angle: 50} },
// { i: 12071, x: 1275, y: 20, w: 20, h: 28, t: { x: 1275, y: 34 }, a: { x: 1281, y: 28, w:7, h: 7},j:{angle: 360} },
// { i: 12072, x: 1275, y: -10, w: 20, h: 28, t: { x: 1275, y: 4 }, a: { x: 1281, y: -2, w:7, h: 7},j:{angle:360} },
// { i: 12070, x: 1250, y: 20, w: 20, h: 28, t: { x: 1236, y: 24 }, a: { x: 1256, y: 28, w:7, h: 7},j:{angle: 45} },
// { i: 12069, x: 1250, y: -10, w: 20, h: 28, t: { x: 1236, y: -6 }, a: { x: 1256, y: -2, w:7, h: 7},j:{angle: 45} },
// { i: 12081, x: 1480, y: 20, w: 20, h: 28, t: { x: 1502, y: 30 }, a: { x: 1486, y: 28, w:7, h: 7},j:{angle: 0} },
// { i: 12082, x: 1480, y: -10, w: 20, h: 28, a: { x: 1486, y: 2, w:7, h: 7},j:{angle: 0} },// t: { x: 250, y: -14 }
// { i: 12083, x: 1484, y: -2, w: 14, h: 14, t: { x: 1502, y: 2 }, a: { x: 1486, y: 2, w:7, h: 7},j:{angle: 0} },
// { i: 12092, x: 1480, y: -27, w: 20, h: 15, t: { x: 1480, y: -37 }, a: { x: 1484, y: -21, w:7, h: 7},j:{angle: -30} },
// { i: 12084, x: 1501, y: -27, w: 20, h: 15, t: { x: 1501, y: -37 }, a: { x: 1505, y: -21, w:7, h: 7},j:{angle: -30} },
// { i: 12085, x: 1522, y: -27, w: 20, h: 15, t: { x: 1522, y:-37 }, a: { x: 1526, y: -21, w:7, h: 7},j:{angle: -30} },
// { i: 12086, x: 1543, y: -27, w: 20, h: 15, t: { x: 1543, y:-37 }, a: { x: 1547, y: -21, w:7, h: 7},j:{angle: -30} },
// { i: 12087, x: 1564, y: -27, w: 20, h: 15, t: { x: 1564, y:-37 }, a: { x: 1568, y: -21, w:7, h: 7},j:{angle: -30} },
// { i: 12088, x: 1585, y: -27, w: 20, h: 15, t: { x: 1585, y: -37 }, a: { x: 1589, y: -21, w:7, h: 7},j:{angle: -30} },
// { i: 12089, x: 1606, y: -27, w: 20, h: 15, t: { x: 1606, y: -37 }, a: { x: 1610, y: -21, w:7, h: 7},j:{angle: -30} },
// { i: 12090, x: 1627, y: -27, w: 20, h: 15, t: { x: 1627, y: -37 }, a: { x: 1633, y: -21, w:7, h: 7},j:{angle: -30} },
// { i: 12091, x: 1648, y: -27, w: 20, h: 15, t: { x: 1648, y: -37 }, a: { x: 1654, y: -21, w:7, h: 7},j:{angle: -30} },
// { i: 12080, x: 1450, y: 20, w: 20, h: 28, t: { x: 1425, y: 28 }, a: { x: 1456, y: 28, w:7, h: 7},j:{angle: 0} },
// { i: 12079, x: 1450, y: -10, w: 20, h: 28, t: { x: 1425, y: -2 }, a: { x: 1456, y: -2, w:7, h: 7},j:{angle: 0} },
// { i: 12109, x: 840, y: 262, w: 20, h: 28, t: { x: 816, y: 272 }, a: { x: 846, y:266, w:7, h: 7},j:{angle: 0} },
// { i: 12108, x: 840, y: 291, w: 20, h: 28, t: { x: 816, y: 297 }, a: { x: 846, y: 295, w:7, h: 7},j:{angle: 0} },
// { i: 12110, x: 865, y: 262, w: 20, h: 28, t: { x: 889, y: 272 }, a: { x: 871, y: 266, w:7, h: 7},j:{angle: 45} },
// { i: 12111, x: 865, y:291, w: 20, h: 28, t: { x: 889, y: 297 }, a: { x: 871, y: 295, w:7, h: 7},j:{angle: 45} },
//#endregion
];
// 设置条码扫描器基础参数 zb
private _BarcodeReader: any[] = [
// { i: 19001, x: 571, y: 206, w: 15, h: 15, t: { x: 530, y: 206,angle: 0 }},
// 条码扫描器红色三角，角度0，默认箭头向上侧
{ i: 17108, x: 243, y: 530, w: 15, h: 15, a: -90, t: { x: 263, y: 520,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }
{ i: 17101, x: 1275, y: 140, w: 15, h: 15, a: 180, t: { x: 1275, y: 120,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }
{ i: 17102, x: 1275, y: 190, w: 15, h: 15, a: 0, t: { x: 1275, y: 210,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }
{ i: 17103, x: 1275, y: 255, w: 15, h: 15, a: 180, t: { x: 1275, y: 235,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }
{ i: 17104, x: 1275, y: 305, w: 15, h: 15, a: 0, t: { x: 1275, y: 325,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }
{ i: 17105, x: 1275, y: 420, w: 15, h: 15, a: 180, t: { x: 1275, y: 400,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }
{ i: 17106, x: 1275, y: 470, w: 15, h: 15, a: 0, t: { x: 1275, y: 490,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }
{ i: 17107, x: 990, y: 610, w: 15, h: 15, a: -90, t: { x: 1010, y: 600,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }
{ i: 17201, x: 1020, y: 380, w: 15, h: 15, a: 180, t: { x: 1000, y: 355,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }
{ i: 17202, x: 1010, y: 250, w: 15, h: 15, a: 0, t: { x: 1010, y: 265,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }
{ i: 17203, x: 1010, y: 128, w: 15, h: 15, a: 0, t: { x: 1025, y: 135,angle: 0 }}, // , t: { x: 263, y: 525,angle: 0 }
{ i: 17204, x: 1000, y: 36, w: 15, h: 15, a: 90, t: { x: 980, y: 50,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.Line([150, -10, 150, 540],{
stroke: 'red', // 线条颜色
strokeWidth: 2, // 线条宽度
selectable: true // 是否可以选择这条线
}),
// 一楼环穿梭车竖线左
new fabric.Line([1145, 5, 1145, 570],{
stroke: 'red', // 线条颜色
strokeWidth: 2, // 线条宽度
selectable: true // 是否可以选择这条线
}),
// 一楼环穿梭车竖线右
new fabric.Line([1205, 5, 1205, 570],{
stroke: 'red', // 线条颜色
strokeWidth: 2, // 线条宽度
selectable: true // 是否可以选择这条线
}),
//环穿半圆,半径径是30，圆心坐标（1175，5）
// 上半圆的路径数据
// M 圆心右侧的点 (1175 + 30, 5)
//var upperSemicirclePath = 'M 1205 5 A 30 30 0 1 0 1175 35';
// 使用小写的'a'来绘制圆弧，因为它会自动计算起始角度
// M命令定位到起始点，A命令绘制圆弧
// 起始点稍微向右偏移半径长度，即1175 + 30 = 1205, 纵坐标不变为5
// a命令参数：rx ry x-axis-rotation large-arc-flag sweep-flag x y
// 这里圆半径 rx=ry=30（椭圆不同）, 旋转角度：x-axis-rotation=0, large-arc-flag=1(大弧), sweep-flag=0(逆时针),终点位置： x=圆心x, y=圆心y+半径
new fabric.Path('M 1205 5 A 30 30 0 1 0 1145 5', {
left: 1175 - 30, // 将半圆向左移动，使圆心看起来在1175
top: 5 - 30, // 由于半圆是从下方开始的，所以不需要向上移动太多（但这里其实应该是5，因为我们想要圆心在5）
// 然而，由于路径的起始点在圆心的右侧，并且Fabric.js的left/top是相对于整个对象的，
// 所以我们实际上不需要在top中减去半径，除非我们想要将整个半圆向上移动
stroke: 'red', // 描边颜色
strokeWidth: 2, // 描边宽度
fill: 'transparent', // 填充颜色（对于半圆，我们可能只想看到描边）
//selectable: true // 是否可以选择这个对象
}),
// 环穿下半圆，半径径是30，圆心坐标（1175，570），顺时针画
new fabric.Path('M 1205 570 A 30 30 0 1 1 1145 570', {
left: 1175 - 30, // 将半圆向左移动，使圆心看起来在1175
top: 570 -1, // 由于半圆是从下方开始的，所以不需要向上移动太多（但这里其实应该是5，因为我们想要圆心在5）
// 然而，由于路径的起始点在圆心的右侧，并且Fabric.js的left/top是相对于整个对象的，
// 所以我们实际上不需要在top中减去半径，除非我们想要将整个半圆向上移动
// 在这个例子中，我们只需要left来定位半圆，top就设置为圆心y即可
stroke: 'red', // 描边颜色
strokeWidth: 2, // 描边宽度
fill: 'transparent', // 填充颜色（对于半圆，我们可能只想看到描边）
//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,
fill: '#90a4ae'
}),
//#region 方向箭头折叠
//12209
new fabric.Text('↔', {
left: 200,
top: 20,
fontSize: 35,
fill: 'red',
angle:0
}),
//12211
new fabric.Text('←', {
left: 200,
top: 85,
fontSize: 35,
fill: 'red',
angle:0
}),
//12213
new fabric.Text('→', {
left: 200,
top: 145,
fontSize: 35,
fill: 'red',
angle:0
}),
//12215
new fabric.Text('←', {
left: 200,
top: 210,
fontSize: 35,
fill: 'red',
angle:0
}),
//12217
new fabric.Text('→', {
left: 200,
top: 270,
fontSize: 35,
fill: 'red',
angle:0
}),
//12219
new fabric.Text('↔', {
left: 200,
top: 365,
fontSize: 35,
fill: 'red',
angle:0
}),
//环穿测箭头
//12107
new fabric.Text('↔', {
left: 1050,
top: 5,
fontSize: 35,
fill: 'red',
angle:0
}),
//12109
new fabric.Text('↔', {
left: 1050,
top: 70,
fontSize: 35,
fill: 'red',
angle:0
}),
//12111
new fabric.Text('←', {
left: 1050,
top: 115,
fontSize: 35,
fill: 'red',
angle:0
}),
//12113
new fabric.Text('→', {
left: 1050,
top: 160,
fontSize: 35,
fill: 'red',
angle:0
}),
//12115
new fabric.Text('←', {
left: 1050,
top: 240,
fontSize: 35,
fill: 'red',
angle:0
}),
//12117
new fabric.Text('→', {
left: 1050,
top: 285,
fontSize: 35,
fill: 'red',
angle:0
}),
//12119
new fabric.Text('←', {
left: 1050,
top: 395,
fontSize: 35,
fill: 'red',
angle:0
}),
//12121
new fabric.Text('→', {
left: 1050,
top: 440,
fontSize: 35,
fill: 'red',
angle:0
}),
//12126
new fabric.Text('→', {
left: 1250,
top: 515,
fontSize: 35,
fill: 'red',
angle:0
}),
// new fabric.Text('➜', {
// left: 610,
// top: 120,
// fontSize: 35,
// fill: '#90a4ae',
// angle:180
// }),
// new fabric.Text('➜', {
// left: 580,
// top: 200,
// fontSize: 35,
// fill: '#90a4ae',
// angle:0
// }),
// new fabric.Text('➜', {
// left: 610,
// top: 320,
// fontSize: 35,
// fill: '#90a4ae',
// angle:180
// }),
// new fabric.Text('➜', {
// left: 190,
// top: 430,
// fontSize: 35,
// fill: '#90a4ae',
// angle:180
// }),
//#endregion
new fabric.Text('原料库一楼界面', {
left: 550,
top: -90,
fontSize: 15,
angle: 0,
fill:'#C71585',
}),
new fabric.Text('维修避让站点12201', {
left: 80,
top: -30,
fontSize: 15,
angle: 0,
fill:'#C71585',
}),
new fabric.Text('维修避让站点12202', {
left: 80,
top: 550,
fontSize: 15,
angle: 0,
fill:'#C71585',
}),
// new fabric.Text('First Floor Outbound', {
// left: 90,
// top: 360,
// fontSize: 15,
// angle: 0
// // fill:'#FF8C00',
// }),
// new fabric.Text('First Floor ', {
// left: 340,
// top: -50,
// fontSize: 15,
// angle: 0
// // fill:'#FF8C00',
// }),
//#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
//#region 提示文字折叠
// new fabric.Text('2 Row ', {
// left: 850,
// top: 124,
// fontSize: 15,
// angle: 0
// // fill:'#FF8C00',
// }),
// new fabric.Text('3 Row ', {
// left: 850,
// top: 174,
// fontSize: 15,
// angle: 0
// // fill:'#FF8C00',
// }),
// new fabric.Text('4 Row ', {
// left: 850,
// top: 243,
// fontSize: 15,
// angle: 0
// // fill:'#FF8C00',
// }),
// new fabric.Text('10 Door ', {
// left: 1240,
// top: 324,
// fontSize: 15,
// angle: 0
// // fill:'#FF8C00',
// }),
// new fabric.Text('11 Door ', {
// left: 1300,
// top: 324,
// fontSize: 15,
// angle: 0
// // fill:'#FF8C00',
// }),
// new fabric.Text('12 Door ', {
// left: 1360,
// top: 324,
// fontSize: 15,
// angle: 0
// // fill:'#FF8C00',
// }),
// new fabric.Text('RGV ', {
// left: 380,
// top: 144,
// fontSize: 15,
// angle: 0
// // fill:'#FF8C00',
// }),
//#endregion
], {
hoverCursor: 'default',
objectCaching: false,
hasControls: false,
selectable: false
}));
//debugger;
// 输送线:绘制颜色，载物
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,
//设备号旋转角度 -30
angle: item.j?.angle,
fontSize: 8
}));
};
if (item.a) {
//向数组中添加新对象，此处可优化为canvas.add() king
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
}));
}
//创建多个对象的组，将多个对象组合成一个整体 ，便于对整个组进行监听和单机事件等 代码中 i 都代表设备号 King
var group = new fabric.Group(objects, {
//悬停时的光标样式属性， 'pointer' 时，表示鼠标悬停在对象上时，会显示手形光标，通常用于表示该对象可以被点击或选择
// 'default'、'crosshair'、'move'、'text'、'wait'、'help' 这些属性 King
hoverCursor: 'pointer',
//对象属性发生变化后需要重新渲染对象 false 如果是true 当对象的属性发生变化时，只需要重新渲染对象的部分区域 king
objectCaching: false,
//组内对象是否显示控制点 king
hasControls: false,
//组是否可选中 king
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: 90,
// 设置三角角度zb
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 + 5 || 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);
// const stacker19003 = new fabric.Rect({
// left: data[19003]?.left + 25 || 707,
// top: 216,
// width: 6,
// height: 6,
// hoverCursor: 'pointer',
// objectCaching: false,
// hasControls: false,
// selectable: false,
// fill: colors.blue,
// visible: data[19003]?.splitByte_0 || false
// });
// canvas.add(index[stacker19003.data = 19003] = stacker19003);
// --------------穿梭车画面显示-----------------
//15201 穿梭车 上下动
const RGV15201 = 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: 150+10,//data[13001]?.left || 100
top: data[15201]?.top || -10, // 默认位置，上方维修站
width: 30,
height: 15,
//fill: colors.yellow,
fill: data[15201]?.color || colors.yellow,
hoverCursor: 'pointer',
hasControls: false,
selectable: false,
//长度
scaleX : 0.5,
//宽
// scaleY : 0.5,
// 旋转角度
angle: 90
});
canvas.add(index[RGV15201.data = 15201] = RGV15201);
//15201=>15201.0有货
const RGV152011 = new fabric.Rect({
left: 150+7,
top:data[15201]?.top +10 || 0,
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[RGV152011.data = 152011] = RGV152011);
// 穿梭车画面显示
//15202 穿梭车 上下动
const RGV15202 = 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: 150+10,//data[13001]?.left || 100
top: data[15202]?.top || 510, // 默认位置，下方维修站
width: 30,
height: 15,
//fill: colors.yellow,
fill: data[15202]?.color || colors.yellow,
hoverCursor: 'pointer',
hasControls: false,
selectable: false,
//长度
scaleX : 0.5,
//宽
// scaleY : 0.5,
// 旋转角度
angle: 90
});
canvas.add(index[RGV15202.data = 15202] = RGV15202);
//15202=>15202.0有货
const RGV152021 = new fabric.Rect({
left: 150+12,
top:data[15202]?.top + 10 || 520,
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[RGV152021.data = 152021] = RGV152021);
//环穿 15101 穿梭车 上下动
const RGV15101 = 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: data[15101]?.left||1145 +10,//data[13001]?.left || 100
top: data[15101]?.top || 470,
width: 30,
height: 15,
//fill: colors.yellow,
fill: data[15101]?.color || colors.yellow,
hoverCursor: 'pointer',
hasControls: false,
selectable: false,
//长度
scaleX : 0.5,
//宽
// scaleY : 0.5,
// 旋转角度
angle: 90
});
canvas.add(index[RGV15101.data = 15101] = RGV15101);
//15201=>15201.0有货
const RGV151011 = new fabric.Rect({
left: 1145 -3,
top:data[15101]?.top +10 || 480,
width: 9,
height: 9,
fill: colors.blue,
hoverCursor: 'pointer',
objectCaching: false,
hasControls: false,
selectable: false,
visible: data[151011]?.splitByte_0 || false
//visible:true
});
canvas.add(index[RGV151011.data = 151011] = RGV151011);
//环穿 15102 穿梭车 上下动
const RGV15102 = 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:data[15102]?.left|| 1205 +10,//data[13001]?.left || 100
top: data[15102]?.top || 170,
width: 30,
height: 15,
//fill: colors.yellow,
fill: data[15102]?.color || colors.yellow,
hoverCursor: 'pointer',
hasControls: false,
selectable: false,
//长度
scaleX : 0.5,
//宽
// scaleY : 0.5,
// 旋转角度
angle: 90
});
canvas.add(index[RGV15102.data = 15102] = RGV15102);
//15201=>15201.0有货
const RGV151021 = new fabric.Rect({
left: 1205 -3,
top:data[15102]?.top +10 || 180,
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[RGV151021.data = 151021] = RGV151021);
////13001堆垛机
// const stacker4 = 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: 430,//data[13001]?.left || 100
// top: data[13001]?.top || -21,
// width: 30,
// height: 15,
// //fill: colors.yellow,
// fill: data[13001]?.color || colors.yellow,
// hoverCursor: 'pointer',
// hasControls: false,
// selectable: false,
// //长度
// scaleX : 0.5,
// //宽
// // scaleY : 0.5,
// // 旋转角度
// angle: 90
// });
// canvas.add(index[stacker4.data = 13001] = stacker4);
// //19004=>11004.0有货
// const stacker21001 = new fabric.Rect({
// left: 416,
// top:data[13001]?.top+20 || 0,
// width: 9,
// height: 9,
// fill: colors.blue,
// hoverCursor: 'pointer',
// objectCaching: false,
// hasControls: false,
// selectable: false,
// visible: data[13001]?.splitByte_0 || false
// // visible:true
// });
// canvas.add(index[stacker21001.data = 21001] = stacker21001);
// // //13001.1有货
// const stacker103001 = new fabric.Rect({
// left: 417,//417
// top: data[13001]?.top+5 || -16,
// width: 7,
// height: 7,
// hoverCursor: 'pointer',
// objectCaching: false,
// hasControls: false,
// selectable: false,
// fill: colors.blue,
// visible: data[21010]?.splitByte_1 || false
// // visible:true
// });
// canvas.add(index[stacker103001.data = 103001] = stacker103001);
}
}