import { Component, AfterViewInit, ViewChild, ElementRef, OnDestroy, TemplateRef } from '@angular/core'; import { MatSidenav } from '@angular/material/sidenav'; import { HttpService } from '@app/core/services/http.service'; import { SignalrService } from '@app/core/services/signalr.service'; import { MonitorCanvas } from './monitor.canvas'; import { MonitorCanvasPart1 } from './monitor.canvas.part1'; import { MonitorCanvasPart2 } from './monitor.canvas.part2'; import { MonitorCanvasPart3 } from './monitor.canvas.part3'; import { MonitorCanvasPart4 } from './monitor.canvas.part4'; import { MonitorCanvasPart5 } from './monitor.canvas.part5'; import { MonitorCanvasPart6 } from './monitor.canvas.part6'; import { MonitorCanvasPart7 } from './monitor.canvas.part7'; import { MonitorCanvasPart8 } from './monitor.canvas.part8'; import { I18nService } from '@app/core/services/i18n.service'; import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { CdkPortal } from '@angular/cdk/portal'; import { ToastService } from '@app/core/services/toast.service'; import { DialogService } from '@app/core/services/dialog.service'; import { fabric } from 'fabric'; import { deburr } from 'lodash-es'; // 订阅设备属性 interface deviceModel { barcode: string; deviceIndex: number; deviceKind: number; deviceName: string; errorCode: number; ErrorMessage: string; errorTaskNo: number; haveGoods: boolean; logicHaveGoods: boolean; HaveGoodsMeg: string; manTaskReserve: number; runState: number; lastTime: string; splitByte_0: number; splitByte_1: number; splitByte_2: number; splitByte_3: number; splitByte_4: number; splitByte_5: number; splitByte_6: number; splitByte_7: number; taskNo: number; xCoor: number; yCoor: number; zCoor: number; ArrowLocation: string; } @Component({ selector: 'app-monitor', templateUrl: './monitor.component.html', styleUrls: ['./monitor.component.scss'] }) export class MonitorComponent implements AfterViewInit, OnDestroy { // 变量 @ViewChild('map', { static: true }) private _map: ElementRef; // 画布对象 @ViewChild('detail', { static: true }) private _detail: MatSidenav; // 设备面板对象 @ViewChild('detailScaner', { static: true }) private _detailScaner: MatSidenav;//扫码器 public newBorcode: string; private _canvas: MonitorCanvas = new MonitorCanvas(); // 设备场景对象 private _alive: boolean = true; // 页面激活标记 private _hub: any; // signalr 集线器 public deviceId: string; @ViewChild('overlayTemplate', { static: true }) private _template: CdkPortal; private _overlayRef: OverlayRef; private _loading: boolean; private _timestamp: any; private _render: any; private _floatTimer: any; // 加载监视tab页面 private _part: any = { // 地图部分 index: 0, canvas: [ new MonitorCanvasPart1(this._i18nService), new MonitorCanvasPart2(this._i18nService), // new MonitorCanvasPart2(this._i18nService) // new MonitorCanvasPart3(this._i18nService), // new MonitorCanvasPart4(this._i18nService), // new MonitorCanvasPart5(this._i18nService), // new MonitorCanvasPart6(this._i18nService), // new MonitorCanvasPart7(this._i18nService), // new MonitorCanvasPart8(this._i18nService) ] }; //数据暂存 切换页面时候传递 private _cache: { [key: number]: any } = {}; public _deviceList: deviceModel[] = []; //设备列表 public _selectedDevice: deviceModel = { barcode: '0', deviceIndex: 0, deviceKind: 0, deviceName: '', errorCode: 0, ErrorMessage: '', errorTaskNo: 0, haveGoods: false, HaveGoodsMeg: '', logicHaveGoods: false, manTaskReserve: 0, runState: 0, lastTime: '', splitByte_0: 0, splitByte_1: 0, splitByte_2: 0, splitByte_3: 0, splitByte_4: 0, splitByte_5: 0, splitByte_6: 0, splitByte_7: 0, taskNo: 0, xCoor: 0, yCoor: 0, zCoor: 0, ArrowLocation: '' } // 构造函数 constructor( private _dialogService: DialogService, private _signalrService: SignalrService, private _httpService: HttpService, private _i18nService: I18nService, private _toastService: ToastService, private _overlay: Overlay ) { this._loading = true; this.online(); // 上线（建立 signalr 连接） this.initDevice(); // 初始化设备 this._timestamp = new Date(); const interval = 500; this._render = setInterval(() => { const now: any = new Date(); if (!this._loading && now - this._timestamp <= interval) { // console.log('render') this._canvas.render(); } }, interval); // this._overlayRef.dispose(); } // private async initDevice() { let res: any = await this._httpService.get('device'); if (res) { this._deviceList = res; //console.log('dsb') // console.log(res) for (let i = 0; i < this._deviceList.length; i++) { //初始化设备状态 this.update(this._deviceList[i].deviceIndex, this._deviceList[i], i === this._deviceList.length - 1, i); } } } // 生命周期函数 - 渲染 ngAfterViewInit(): void { // 初始化设备场景到画布元素 this._canvas.init(this._map) .then(() => this._canvas.load(this._part.canvas[this._part.index].draw, this._cache)); //debugger // 点击设备时发生（device 是设备号） this._canvas.fire = (device: number) => { //提示框关闭 if (this._overlayRef && this._overlayRef.hasAttached()) { this._overlayRef.dispose(); } // console.log(device+"shk"); this._selectedDevice = this._deviceList.find?.(i => i.deviceIndex == device); // console.log(this._deviceList.find+"shk"); // console.log(this._selectedDevice+"shk"); if (this._selectedDevice.deviceKind == 7) { this.newBorcode = ""; this._detailScaner.open(); // 打开条码设备信息 } else { this._detail.open(); // 打开普通设备信息 } };// 点击设备时发生 //鼠标放上去弹框提示 鼠标悬浮this._canvas.focus = (e: any) this._canvas.focus = (e: any) => { if (this._overlayRef && this._overlayRef.hasAttached()) { this._overlayRef.dispose(); } //if(e.target?.data) if (e.target?.data) { //拿到设备索引 //debugger this.pushproperties(e.target.data); // 计算悬浮窗弹出位置，待优化，弹窗下面显示不全，需要切换显示位置 const config = new OverlayConfig(); let left = e.e.clientX + 10; let top = e.e.clientY + 10; if (this._floatTimer) { clearTimeout(this._floatTimer); } this._floatTimer = setTimeout(() => { if (document.getElementsByClassName('float-win')[0]) { let winWidth = document.getElementsByClassName('float-win')[0].clientWidth; let winHeight = document.getElementsByClassName('float-win')[0].clientHeight; if (e.e.clientX + winWidth > window.innerWidth) { left = window.innerWidth - winWidth - 10; } if (e.e.clientY + winHeight > window.innerHeight) { top = window.innerHeight - winHeight - 10; } config.positionStrategy = this._overlay .position() .global() .left(left + 'px') .top(top + 'px'); this._overlayRef.dispose(); this._overlayRef = this._overlay.create(config); this._overlayRef.attach(this._template); } }, 10); config.positionStrategy = this._overlay .position() .global() .left(left + 'px') .top(top + 'px'); this._overlayRef = this._overlay.create(config); this._overlayRef.attach(this._template); // 弹出浮窗 // this._overlayRef.backdropClick().subscribe(() => { // // 点击了backdrop背景 // this._overlayRef.dispose(); // }); } }; document.getElementById('rowFill').addEventListener('mouseleave', e => { if (!e.relatedTarget || e.relatedTarget['className'].indexOf('mat-') < 0) { this.disposeOverlay(); } }); } // 销毁浮窗 public disposeOverlay() { this._overlayRef && this._overlayRef.dispose(); } // 生命周期函数 - 销毁 ngOnDestroy(): void { this._alive = false; this._hub?.stop(); clearInterval(this._render); //king kun 浮窗销毁 document.getElementById('rowFill').removeEventListener('mouseleave', () => this.disposeOverlay()); } public get loading() { return this._loading; } // 获取颜色 public get colors() { return this._canvas.colors; } public _num: number=0; // 获取地图索引 public get num() { return this._num; } // 获取地图索引 public set index(value: number) { // console.log(value); this._part.index = value; this._num = value; this._canvas.load(this._part.canvas[value].draw, this._cache); // console.log(this._cache); // debugger; // var arr = [11001, 11002, 11003, 11004, 11005, 11006, 11007, 11008, 11009, 11010, 11011, 11012]; // for (let i = 0; i < arr.length; i++) { // this.updateStack(arr[i], value, this._cache) // } } // 上线 private async online(): Promise { if (this._alive) { // 建立到 signalr 服务端的连接（服务端需要创建一个名叫 monitor 的 Hub） this._hub = await this._signalrService.connect('monitor', { broadcast: (data: any) => { // 此处获取服务端推送的设备状态数据 if (!this._loading) { this._timestamp = new Date(); // console.log(data) // debugger; let i = -1; this.update(data.deviceIndex, data, false, i); } } }).catch((e) => { // 5秒后重试连接 //console.log(e); setTimeout(async () => await this.online(), 5000); }); } } // 页面设备复位 public async reset(e?: any): Promise { if (await this._dialogService.confirm(this._i18nService.translate('shared.notification.confirm'))) { this._httpService.put(`Device?Device=${this._selectedDevice.deviceIndex}&Action=4`); } } private _data: { [key: string]: any } = {}; // 界面手动补条码 public async save(e?: any): Promise { if (await this._dialogService.confirm(this._i18nService.translate('shared.notification.confirm'))) { this._data = { ['deviceIndex']: this._selectedDevice.deviceIndex, ['newBarcode']: this.newBorcode }; const res: boolean = ( await this._httpService.post('Device/barcode', this._data).catch(e => { switch (e.status) { case 409: this._toastService.show(this._i18nService.translate(`routes.wcs.monitor.barCodeErrorHaveApply`)); break; case 410: this._toastService.show(this._i18nService.translate(`routes.wcs.monitor.barCodeErrorHaveControlTask`)); break; case 422: this._toastService.show(this._i18nService.translate('routes.wcs.monitor.barCodeErrorHaveWcsTask')); break; case 480: this._toastService.show(this._i18nService.translate(`routes.wcs.monitor.barCodelengthError`)); case 481: this._toastService.show(this._i18nService.translate(`routes.wcs.monitor.barCodelengthError`)); break; default: break; } }) ) !== undefined; if (res) { this._toastService.show(this._i18nService.translate('shared.notification.success')); } } //this._httpService.put(`Device?Device=${this._selectedDevice.deviceIndex}&Action=5&value=`+this.newBorcode+'&users='this.); } public async completeAnswer(e?: any): Promise { if (await this._dialogService.confirm(this._i18nService.translate('shared.notification.confirm'))) { this._httpService.put(`Device?Device=${this._selectedDevice.deviceIndex}&Action=2`); } } // 设置逻辑有物，没有引用 public async logicGood(e: any): Promise { if (await this._dialogService.confirm(this._i18nService.translate('shared.notification.confirm'))) { if (e) { if (e == 1) { //this._httpService.put(['wcs', `Device?Device=${e}&Action=1&value=1`]); this._httpService.put(`Device?Device=${this._selectedDevice.deviceIndex}&Action=1&value=1`); } else if (e == 2) { this._httpService.put(`Device?Device=${this._selectedDevice.deviceIndex}&Action=1&value=0`); } } } } public async releaseLock(e?: any): Promise { if (await this._dialogService.confirm(this._i18nService.translate('shared.notification.confirm'))) { this._httpService.put(`Device?Device=${this._selectedDevice.deviceIndex}&Action=3`); } } // 此函数本版本没有引用，调试时候可以使用 zb public async updateStack(index: number, value: number, data: any) { /* if(data[index].index==index) { debugger; if (value == 0 || value == 1 || value == 2 || value == 5) { //输送线不能画位置 this._cache[index].left = 462 - (this._cache[index].left - 1) * 8.775; } else if (value == 3) { this._cache[index].left = 1100 - (this._cache[index].left - 1) * 12.8; } else if (value == 4) { this._cache[index].left = 1327 - (this._cache[index].left - 1) * 8.6; } else if (value == 6) { this._cache[index].left = 462 - (this._cache[index].left - 1) * 8.775; } else if (value == 7) { this._cache[index].left = 819 - (this._cache[index].left - 1) * 13.65; } this._canvas.object[index].set('left', this._cache[index].left); if (this._cache[index].splitByte_0 == 1) { //具体的Part里面画一个设备编号和这个+8000 的能对上就行，不一定是+8000 this._canvas.object[index + 18000].set('left', this._canvas.object[index].left + 30); } this._canvas.render(); } */ //let res: any = await this._httpService.get('device'); //if (res) { //this._deviceList1 = res; for (let i = 0; i < this._deviceList.length; i++) { if (this._deviceList[i].deviceIndex == index) { if (value == 0 || value == 1 || value == 2 || value == 5) { //输送线不能画位置 this._cache[index].left = 462 - (this._deviceList[i].xCoor - 1) * 8.775; } else if (value == 3) { this._cache[index].left = 1100 - (this._deviceList[i].xCoor - 1) * 12.8; } else if (value == 4) { this._cache[index].left = 1327 - (this._deviceList[i].xCoor - 1) * 8.6; } else if (value == 6) { this._cache[index].left = 462 - (this._deviceList[i].xCoor - 1) * 8.775; } else if (value == 7) { this._cache[index].left = 819 - (this._deviceList[i].xCoor - 1) * 13.65; } // console.log(); if (this._canvas.object[index] != undefined) { this._canvas.object[index].set('left', this._cache[index].left); // debugger; if (this._cache[index].splitByte_0) { //具体的Part里面画一个设备编号和这个+18000 的能对上就行，不一定是+8000 this._canvas.object[index + 18000].set('left', this._canvas.object[index].left + 30); this._canvas.object[index + 18000].set('visible', true); } else { this._canvas.object[index + 18000].set('visible', false); } //kaiguan2 if (this._cache[index].splitByte_1) { //具体的Part里面画一个设备编号和这个+8000 的能对上就行，不一定是+8000 this._canvas.object[index + 9000].set('visible', true); this._canvas.object[index + 9000].set('left', this._canvas.object[index].left + 12); } else { this._canvas.object[index + 9000].set('visible', false); } } } } this._canvas.render(); //} } public GetRamdomNum(Min,Max):Number{ var Range=Max-Min; var Rand=Math.random(); return(Min+Math.round(Rand*Range)); } // 更新设备数据，设置状态，动画坐标等参数--zb 注释 // index:设备索引,唯一标识 // data：单条设备数据 // last：是否是最后一个设备 // i: 设备在信息列表中的索引；online 函数调用传递-1； 构造函数中，initDevice 传递>=0的数值 public update(index: number, data: any, last: boolean, i: number): void { // console.log('update'); // if (index === 11006) { // console.log({ // device: 11006, // data: data, // cache: this._cache[11006], // object: this._canvas.object[11006] // }) // } // if(index === 21008){ // debugger; // } //JavaScript 中的函数 延迟加载执行动画，不卡主服务 // setTimeout(() => { // console.log('2 seconds have passed'); // }, 2000); //存光电开关 setTimeout(() => { // if(index==15101||index==15102){ // var a= data.xCoor; // } //将数据更新到暂存区 //拿到的data是初始化从后端读的 或者是后端主动推送的 设备的Model // 设置输送线状态颜色 if (data.deviceKind == 2) { // if(index==40041) // { // if(data.splitByte_5==1){ // this._cache[index] = { color: this.colors.red, left: data.xCoor }; // } else // { // this._cache[index] = { color: this.colors.GradientInactiveCaption, left: data.xCoor }; // } // }else{ if (data.runState == 0) { this._cache[index] = { color: this.colors.GradientInactiveCaption, left: data.xCoor }; } else if (data.runState == 1) { this._cache[index] = { color: this.colors.green, left: data.xCoor }; } else if (data.runState == 2) { this._cache[index] = { color: this.colors.red, left: data.xCoor }; } else if (data.runState == 3) { this._cache[index] = { color: this.colors.burlywood, left: data.xCoor }; } else if (data.runState == 4) { this._cache[index] = { color: this.colors.violet, left: data.xCoor }; } else if (data.runState == 5) { this._cache[index] = { color: this.colors.darkgreen, left: data.xCoor }; } // } } // 设置穿梭车状态动画显示颜色和 码值 xCoor if (data.deviceKind == 4) { if (data.runState == 0) { this._cache[index] = { color: this.colors.GradientInactiveCaption, left: data.xCoor }; } else if (data.runState == 1) { this._cache[index] = { color: this.colors.green, left: data.xCoor }; } else if (data.runState == 2) { this._cache[index] = { color: this.colors.red, left: data.xCoor }; } else if (data.runState == 3) { this._cache[index] = { color: this.colors.burlywood, left: data.xCoor }; } else if (data.runState == 4) { this._cache[index] = { color: this.colors.violet, left: data.xCoor }; } else if (data.runState == 5) { this._cache[index] = { color: this.colors.darkgreen, left: data.xCoor }; } // 纵向绘制动画，设置缓存中top值 zb // 上方RGV默认位置 this._cache[index].top = -21; // 条码最小位置 if(data.xCoor == 0){ if(index == 15201 ) { this._cache[index].top = -10; // 默认上方位置 console.log(index +"Top " + this._cache[index].top); } else if( index == 25101) { this._cache[index].top = -90; // 默认上方位置 } else if( index == 15202) { this._cache[index].top = 510; // 默认下方位置 console.log(index +"Top " + this._cache[index].top); } else { // 默认下方位置 this._cache[index].top = 580; // 默认下方位置 } } else{ // 画动画位置 if(index == 15201 || index == 15202) { // 1楼两台RGV车 this._cache[index].top = 510 - data.xCoor*0.021 ; // 现场按照比例计算 405宽/19150 } else { // 2楼两台RGV车 if (data.xCoor <2000) { // 下方维修站 this._cache[index].top = 590; } else if(data.xCoor < 4400 && 2000 < data.xCoor) { // 出入口 this._cache[index].top = 540; } else { // 立体库站台 this._cache[index].top = 665 - data.xCoor *0.021 ; // 现场按照比例计算 495宽/23800 } // this._cache[index].top = 665 - data.xCoor *0.021 ; // 现场按照比例计算 495宽/23800 } } } // 设置穿梭车状态动画显示颜色和 码值 xCoor if (data.deviceKind == 14) { if (data.runState == 0) { this._cache[index] = { color: this.colors.GradientInactiveCaption, left: data.xCoor }; } else if (data.runState == 1) { this._cache[index] = { color: this.colors.green, left: data.xCoor }; } else if (data.runState == 2) { this._cache[index] = { color: this.colors.red, left: data.xCoor }; } else if (data.runState == 3) { this._cache[index] = { color: this.colors.burlywood, left: data.xCoor }; } else if (data.runState == 4) { this._cache[index] = { color: this.colors.violet, left: data.xCoor }; } else if (data.runState == 5) { this._cache[index] = { color: this.colors.darkgreen, left: data.xCoor }; } // 纵向绘制动画，设置缓存中top值 zb // if(index==15101){ // data.xCoor= 1100000; // } // RGV默认位置 15101，15102 this._cache[index].top = -21; // 条码最小位置 if(data.xCoor == 0){ if(index == 15101 ) { this._cache[index].top = 470; // 默认上方位置 console.log(index +"Top " + this._cache[index].top); } else if( index == 15202) { this._cache[index].top = 170; // 默认下方位置 console.log(index +"Top " + this._cache[index].top); } } else{ // 画环穿动画位置 if(index == 15101 || index == 15102)//小车坐标下极限550，上极限0 { if(data.xCoor>=35681&&data.xCoor<=63466)//左侧环穿坐标码值范围(35681-63466)左上出弯码值35681，左下入弯码值63466 { this._cache[index].left=1145 +10; this._cache[index].top=(data.xCoor-35681)/(63466-37600)*550*1.00; } else if(data.xCoor>=0&&data.xCoor<=26483)//右侧环穿坐标码值范围(0-26483)右上入弯码值26483 { this._cache[index].left=1205 +10; this._cache[index].top=(26483-data.xCoor)/(26483-0)*550*1.01; } else if(data.xCoor>=72665&&data.xCoor<=74007)//右侧环穿坐标码值范围(72665-73287)右下出弯码值72665 { this._cache[index].left=1205 +10; this._cache[index].top=550*0.977+(74007-data.xCoor)/(74007-72665)*550*0.048; } else if(data.xCoor>64000&&data.xCoor<72665){//环穿下部坐标top:580 left: 1185 this._cache[index].left=1145 +10+60*(data.xCoor-63466)/(72665-63466); if(data.xCoor<68065)//前半环 { this._cache[index].top=550+60*(data.xCoor-63466)/(72665-63466); } else//后半环 { this._cache[index].top=550+60*(72665-data.xCoor)/(72665-63466); } } else if(data.xCoor>26483&&data.xCoor<35681){//环穿上部坐标top:-30 left: 1185 this._cache[index].left=1145 +10+60*(35681-data.xCoor)/(35681-26483); if(data.xCoor>31082)//前半环 { this._cache[index].top=0-100*(35681-data.xCoor)/(35681-26483); } else//后半环 { this._cache[index].top=0-100*(data.xCoor-26483)/(35681-26483); } } else if(data.xCoor>=1100000){//在维护站台 this._cache[index].left=1205 +10+30; this._cache[index].top=(1106996-data.xCoor)/(1106996-1100000)*60; } // 1楼两台RGV车 //if() // this._cache[index].top = 580 ; // 现场按照比例计算 405宽/19150 // this._cache[index].left=1185; } else { // 2楼两台RGV车 // if (data.xCoor <2000) // { // // 下方维修站 // this._cache[index].top = 590; // } // else if(data.xCoor < 4400 && 2000 < data.xCoor) // { // // 出入口 // this._cache[index].top = 540; // } // else // { // // 立体库站台 // this._cache[index].top = 665 - data.xCoor *0.021 ; // 现场按照比例计算 495宽/23800 // } } } } if(index==15101){ var a= this._cache[index]; } // 设置堆垛机状态颜色和 暂存中left值。top值 if (data.deviceKind == 1) { if (data.runState == 0) { this._cache[index] = { color: this.colors.yellow };//,left:data.xCoor } else if (data.runState == 1) { this._cache[index] = { color: this.colors.green }; } else if (data.runState == 2) { this._cache[index] = { color: this.colors.red }; } else if (data.runState == 3) { this._cache[index] = { color: this.colors.GradientInactiveCaption }; } else if (data.runState == 4) { this._cache[index] = { color: this.colors.violet }; } else if (data.runState == 5) { this._cache[index] = { color: this.colors.darkgreen }; } // //暂存中 堆垛机left设置(横向移动绘制位置) // debugger if(index == 11101 || index == 11102|| index == 11103|| index == 11104) { // if(data.xCoor==19){ // this._cache[index].left = 895; // } // else if(data.xCoor==100 || data.xCoor==101) // { // this._cache[index].left = 1360; // } // else if(data.xCoor==94) // { // this._cache[index].left = 1311; // } // else if(data.xCoor == 0){//682 // this._cache[index].left = 742; // } else{ // this._cache[index].left = 742 + (data.xCoor - 1) * 7 ;//(data.xCoor - 1) // } if(data.xCoor<=1){ this._cache[index].left = 1000; // 最左侧 } else { this._cache[index].left = 1000-(data.xCoor - 2)*12.96-15; // 现场按照比例计算 700宽/54列 } } if(index == 11002) { if(data.xCoor==19){ this._cache[index].left = 895; } else if(data.xCoor==100 || data.xCoor==101) { this._cache[index].left = 1360; } else if(data.xCoor==94) { this._cache[index].left = 1311; } else if(data.xCoor == 0){ this._cache[index].left = 1480; } else{ this._cache[index].left = 742 + (data.xCoor - 1) * 7 ; } } // 纵向绘制动画，设置缓存中top值 zb // if(index == 13001) // { // // this._cache[index].top = -21; // if(data.xCoor == 0){ // this._cache[index].top = -21; // } else{ // this._cache[index].top = -21 + data.xCoor*34.5 ; // } // } } // 其他暂时不需要绘制开关设备,增加类型14，鸿安穿梭车 if (data.deviceKind == 7 || data.deviceKind == 10 || data.deviceKind == 40 || data.deviceKind == 35 || data.deviceKind == 12 || data.deviceKind == 37|| data.deviceKind == 8|| data.deviceKind == 15 ) { //this._cache[index].splitByte_0=false; // 需要初始化内存变量，否则后边赋值会报错 this._cache[index] = {}; } // 绘制有物开关量 else { //splitByte_0 if (data.splitByte_0 == 1) { this._cache[index].splitByte_0 = true; } else { // if (this._cache[index].splitByte_0 != undefined) { // console.log(this._cache[index]) this._cache[index].splitByte_0 = false; // 输出调试日志 // if(data.deviceKind == 2){ // console.log("输送线"+ data.deviceIndex); // } // if (this._cache[index].splitByte_0 != undefined) // { // console.log(index); // console.log(this._cache[index]); // } // } } //splitByte_1 if (data.splitByte_1 == 1) { this._cache[index].splitByte_1 = true; } else { if (this._cache[index].splitByte_1 != undefined) { this._cache[index].splitByte_1 = false; } } // } } console.log(data) // 又设置一遍？ if(data.splitByte_0 == 1) { this._cache[index].splitByte_0 = true; } else { this._cache[index].splitByte_0 = false; } if(index==25102){ var a1=1; } //-------------画当前界面------------------ if (this._canvas.object[index]) { //输送线不能画位置 //this._canvas.object[index].set('fill',this._cache[index].color); // 设置堆垛机left参数，top参数（纵向动） if (data.deviceKind == 1) { // 设置横动参数left if(index != 13001){ this._canvas.object[index].set('left', this._cache[index].left); }else // 设置纵向参数left { this._canvas.object[index].set('top', this._cache[index].top); } this._canvas.object[index].set('fill', this._cache[index].color); // 设置splitByte_0 开关显示 == 1 if (this._cache[index].splitByte_0 == 1) { //具体的Part里面画一个设备编号和这个*10+1 的能对上就行，设置堆垛机有物 this._canvas.object[index * 10 + 1].set('visible', true); // 横向位置 if(index != 13001){ this._canvas.object[index * 10 + 1].set('left', this._canvas.object[index].left + 25); }else { this._canvas.object[index * 10 + 1].set('top', this._cache[index].top + 20); } } else { // 设置splitByte_0 开关显示 == 0 // this._canvas.object[index + 8000].set('visible', true); if(index != 13001){ this._canvas.object[index * 10 + 1].set('left', this._canvas.object[index].left + 25); }else { this._canvas.object[index * 10 + 1].set('top', this._cache[index].top + 20); } this._canvas.object[index * 10 + 1].set('visible', false); } // 设置splitByte_1 开关显示 == 1 zb if (this._cache[index].splitByte_1 == 1) { //具体的Part里面画一个设备编号和这个*10+2 的能对上就行，设置堆垛机有物 this._canvas.object[index * 10 + 2].set('visible', true); // 横向位置 if(index != 13001){ this._canvas.object[index * 10 + 2].set('left', this._canvas.object[index].left + 15);// 双叉开关 }else { this._canvas.object[index * 10 + 2].set('top', this._cache[index].top + 20); } } else { // 设置splitByte_1 开关显示 == 0 // this._canvas.object[index + 8000].set('visible', true); if(index != 13001){ this._canvas.object[index * 10 + 2].set('left', this._canvas.object[index].left + 15); }else { this._canvas.object[index * 10 + 2].set('top', this._cache[index].top + 20); } this._canvas.object[index * 10 + 2].set('visible', false); } // if (index == 13001 ) // { // // debugger // //kaiguan2 // if (this._cache[index].splitByte_1 == 1) { // //具体的Part里面画一个设备编号和这个+8000 的能对上就行，不一定是+8000 // this._canvas.object[index + 90000].set('visible', true); // // this._canvas.object[index+ 90000].set('top', this._cache[index].top + 5); // if(index != 13001){ // this._canvas.object[index + 90000].set('left', this._canvas.object[index].left + 12); // }else // { // this._canvas.object[index+ 90000].set('top', this._cache[index].top + 6); // } // } // else { // //正式使用是false // // this._canvas.object[index + 90000]?.set('visible', false); // this._canvas.object[index + 90000].set('visible', false); // if(index != 13001){ // this._canvas.object[index + 90000].set('left', this._canvas.object[index].left + 12); // }else // { // this._canvas.object[index+ 90000].set('top', this._cache[index].top + 6); // } // } // } } // deviceKind == 1 // 输送线有物开关 if (data.deviceKind == 2) { this._canvas.object[index].set('fill', this._cache[index].color); if (index != 99999 ) { if (this._cache[index].splitByte_0) { //对应tabpage设备数组里面的a，代表.0开关；要是需要多个开关 可以在数组中在加，但是位置需要注意，影响_objects[2] //加开关的话 需要在缓存_cache里也加一下 页面切换时候才能取到 // debugger; var length = this._canvas.object[index].group._objects.length; if (length == 2) { this._canvas.object[index].group._objects[1].set('visible', true); // set b 设置splitByte_1 } else { this._canvas.object[index].group._objects[2].set('visible', true); // set a 设置splitByte_0 } } else { //测试 false 改成true //debugger; // debugger; //add for KIng KUn // console.log(this._canvas.object[index]); var length = this._canvas.object[index].group._objects.length; if (length == 2) { this._canvas.object[index].group._objects[1].set('visible', false); } else { this._canvas.object[index].group._objects[2].set('visible', false); } } } } // 穿梭车有物开关 if (data.deviceKind == 4) { // debugger; if(index==25101) { var test=1; } //this._cache[index].top=this.GetRamdomNum(200,600); this._canvas.object[index].set('top', this._cache[index].top);// 纵向动画 //this._canvas.object[index].set('left', this._cache[index].left); //横向动画 this._canvas.object[index].set('fill', this._cache[index].color); // if (this._cache[index].splitByte_0) { // //对应tabpage设备数组里面的a，代表.0开关；要是需要多个开关 可以在数组中在加，但是位置需要注意，影响_objects[2] // //加开关的话 需要在缓存_cache里也加一下 页面切换时候才能取到 // // debugger; // var length = this._canvas.object[index].group._objects.length; // this._canvas.object[index].group._objects[2].set('visible', true); // } // else { // //测试 false 改成true // var length = this._canvas.object[index].group._objects.length; // this._canvas.object[index].group._objects[2].set('visible', false); // } // 设置splitByte_0 开关显示 == 1 if (this._cache[index].splitByte_0 == 1) { //具体的Part里面画一个设备编号和这个*10+1 的能对上就行，设置堆垛机有物 this._canvas.object[index * 10 + 1].set('visible', true); this._canvas.object[index * 10 + 1].set('top', this._cache[index].top +13); this._canvas.object[index * 10 + 1].set('left', this._canvas.object[index].left -10); } else { // 设置splitByte_0 开关显示 == 0 //this._canvas.object[index *10+1].set('visible', true); this._canvas.object[index * 10 + 1].set('left', this._canvas.object[index].left-10); // 需要现在每层画布初始化 this._canvas.object[index * 10 + 1].set('top', this._cache[index].top +13); this._canvas.object[index * 10 + 1].set('visible', false); } // if (this._cache[index].splitByte_1) { // //对应tabpage设备数组里面的a，代表.0开关；要是需要多个开关 可以在数组中在加，但是位置需要注意，影响_objects[2] // //加开关的话 需要在缓存_cache里也加一下 页面切换时候才能取到 // // debugger; // var length = this._canvas.object[index].group._objects.length; // // if (length == 4) { // this._canvas.object[index].group._objects[3].set('visible', true); // // } // } // else { // //测试 false 改成true // //debugger; // var length = this._canvas.object[index].group._objects.length; // // if (length == 4) { // this._canvas.object[index].group._objects[3].set('visible', false); // // } // } }// 环穿有物开关 if (data.deviceKind == 14) { // var _XValue=this._cache[index].top/200; this._canvas.object[index].set('top', this._cache[index].top);// 纵向动画 this._canvas.object[index].set('left', this._cache[index].left); this._canvas.object[index].set('fill', this._cache[index].color); this._canvas.object[index].set('visible', true); if (this._cache[index].splitByte_0 == 1) { //具体的Part里面画一个设备编号和这个*10+1 的能对上就行，设置堆垛机有物 this._canvas.object[index * 10 + 1].set('visible', true); // 有物开关 // 横向位置 this._canvas.object[index * 10 + 1].set('left', this._canvas.object[index].left-10); this._canvas.object[index * 10 + 1].set('top', this._cache[index].top + 10); } else { // 设置splitByte_0 开关显示 == 0 // this._canvas.object[index * 10 + 1].set('left', this._canvas.object[index].left-3); // this._canvas.object[index * 10 + 1].set('top', this._cache[index].top + 10); this._canvas.object[index * 10 + 1].set('visible', false); // 有物开关 } } }// 当前界面 // online函数调用，-1 一次更新所有设备 if (i == -1) { for (let item in this._deviceList) { // if(this._deviceList[item].deviceIndex ==11013){ // debugger; // var a = 0; // } //将更新的状态记录到list里 点击设备时候用到 this._deviceList[i].deviceIndex if (this._deviceList[item].deviceIndex == data.deviceIndex) { // if(data.deviceIndex == 15101){ // var a1=2; // } // debugger; // if( data.deviceIndex == 21008){ // debugger; // } this._deviceList[item].barcode = data.barcode; this._deviceList[item].errorCode = data.errorCode; //this._deviceList[item].haveGoods=data.haveGoods; this._deviceList[item].logicHaveGoods = data.logicHaveGoods; this._deviceList[item].splitByte_0 = data.splitByte_0; this._deviceList[item].splitByte_1 = data.splitByte_1; this._deviceList[item].splitByte_2 = data.splitByte_2; this._deviceList[item].splitByte_3 = data.splitByte_3; this._deviceList[item].splitByte_4 = data.splitByte_4; this._deviceList[item].splitByte_5 = data.splitByte_5; this._deviceList[item].splitByte_6 = data.splitByte_6; this._deviceList[item].splitByte_7 = data.splitByte_7; this._deviceList[item].taskNo = data.taskNo; this._deviceList[item].manTaskReserve = data.manTaskReserve; this._deviceList[item].yCoor = data.yCoor; this._deviceList[item].xCoor = data.xCoor; this._deviceList[item].zCoor = data.zCoor; this._deviceList[item].runState = data.runState; this._deviceList[item].lastTime = data.lastTime; this._deviceList[item].ArrowLocation = data.arrowLocation; this._deviceList[item].HaveGoodsMeg = data.haveGoodsMeg; this._deviceList[item].ErrorMessage = data.errorMessage; } } }// i==-1 // if(this._deviceList[i].deviceIndex ==11013){ // debugger; // var a = 0; // } // 构造函数initDevice()，每次更新一个设备 if (data.deviceIndex.length != 0 && i >= 0) { //将更新的状态记录到list里 点击设备时候用到 this._deviceList[i].deviceIndex if (this._deviceList[i].deviceIndex == data.deviceIndex && i != -1 && data.deviceIndex != undefined) { // if( data.deviceIndex == 15101){ // var a1=1; // } // if( data.deviceIndex == 21008){ // debugger; // } this._deviceList[i].barcode = data.barcode; this._deviceList[i].errorCode = data.errorCode; //this._deviceList[item].haveGoods=data.haveGoods; this._deviceList[i].logicHaveGoods = data.logicHaveGoods; this._deviceList[i].splitByte_0 = data.splitByte_0; this._deviceList[i].splitByte_1 = data.splitByte_1; this._deviceList[i].splitByte_2 = data.splitByte_2; this._deviceList[i].splitByte_3 = data.splitByte_3; this._deviceList[i].splitByte_4 = data.splitByte_4; this._deviceList[i].splitByte_5 = data.splitByte_5; this._deviceList[i].splitByte_6 = data.splitByte_6; this._deviceList[i].splitByte_7 = data.splitByte_7; this._deviceList[i].taskNo = data.taskNo; this._deviceList[i].manTaskReserve = data.manTaskReserve; this._deviceList[i].yCoor = data.yCoor; this._deviceList[i].xCoor = data.xCoor; this._deviceList[i].zCoor = data.zCoor; this._deviceList[i].runState = data.runState; this._deviceList[i].lastTime = data.lastTime; this._deviceList[i].ArrowLocation = data.arrowLocation; this._deviceList[i].HaveGoodsMeg = data.haveGoodsMeg; this._deviceList[i].ErrorMessage = data.errorMessage; } } if (last) { this._canvas.render(); this._loading = false; } // if (index === 11006) { // console.log({ // device: 11006, // data: data, // cache: this._cache[11006], // object: this._canvas.object[11006] // }) // } }); //setTimeout }; // update //鼠标放上去弹框提示信息 public properties: any[] = [ { key: '设备索引', value: this._selectedDevice.deviceIndex }, { key: '设备名称', value: '输送线' }, { key: '设备指令索引', value: 'N/A' }, { key: '目标位置', value: 'N/A' }, { key: '设备状态', value: '空闲' }, { key: '条码', value: 'N/A' }, { key: '故障信息', value: 'N/A' }, { key: '当前X坐标', value: 'N/A' }, { key: '当前Y坐标', value: 'N/A' }, { key: '是否逻辑有物', value: '无' }, { key: '调度任务', value: 'N/A' }, ]; public pushproperties(device: number): void { for (let item in this._deviceList) { if (this._deviceList[item].deviceIndex == device) { if (this._deviceList[item].deviceKind == 7) { this.properties = [ { key: this._i18nService.translate(`routes.wcs.monitor.DeviceCode`), value: this._deviceList[item].deviceIndex }, { key: this._i18nService.translate(`routes.wcs.monitor.DeviceName`), value: this._deviceList[item].deviceName }, { key: this._i18nService.translate(`routes.wcs.monitor.BarcodeRecord`), value: this._deviceList[item].barcode } ] } else { // if( this._deviceList[item].deviceIndex == 15102){ // debugger; // } this.properties = [ { key: this._i18nService.translate(`routes.wcs.monitor.DeviceCode`), value: this._deviceList[item].deviceIndex }, { key: this._i18nService.translate(`routes.wcs.monitor.DeviceName`), value: this._deviceList[item].deviceName }, { key: this._i18nService.translate(`routes.wcs.monitor.MonitorIndex`), value: this._deviceList[item].taskNo }, { key: this._i18nService.translate(`routes.wcs.monitor.BarcodeRecord`), value: this._deviceList[item].barcode }, { key: this._i18nService.translate(`routes.wcs.monitor.ArrowLocation`), value: this._deviceList[item].ArrowLocation }, { key: this._i18nService.translate(`routes.wcs.monitor.DeviceStatus`), value: this._i18nService.translate(`routes.wcs.monitor.` + this._deviceList[item].runState) }, { key: this._i18nService.translate(`routes.wcs.monitor.WarningCode`), value: this._deviceList[item].ErrorMessage }, { key: this._i18nService.translate(`routes.wcs.monitor.Logicexiststatus`), value: this._deviceList[item].HaveGoodsMeg }, { key: this._i18nService.translate(`routes.wcs.monitor.LogicLock`), value: this._deviceList[item].manTaskReserve }, { key: this._i18nService.translate(`routes.wcs.monitor.RollerZ`), value: this._deviceList[item].zCoor }, { key: this._i18nService.translate(`routes.wcs.monitor.RollerX`), value: this._deviceList[item].xCoor }, { key: this._i18nService.translate(`routes.wcs.monitor.RollerY`), value: this._deviceList[item].yCoor } ] } } } } //_part public getDeviceId(): void { // debugger; // this._cache[this.deviceId].color.set('visible', false); // console.log(this.c._conveyors); // console.log(this._canvas); // this._canvas._index[this.deviceId].fill = '#0f0'; // this._canvas.render(); this._part.canvas[this._num]._conveyors.forEach((item: any) => { if (item.i == this.deviceId) { // var canvas = new fabric.Canvas('map'); // var context = canvas.getContext(); this._canvas.canvas.setViewportTransform(this._canvas.transform); this._canvas.canvas.relativePan(new fabric.Point( this._map.nativeElement.clientWidth / 2 - item.x * this._canvas.transform[0], this._map.nativeElement.clientHeight / 2 - item.y * this._canvas.transform[0] - 64)); this._canvas.canvas.zoomToPoint(new fabric.Point( this._map.nativeElement.clientWidth / 2, this._map.nativeElement.clientHeight / 2), 3); } }); } }