zhangbo
/
HSYL_WCSWEB
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1楼2楼界面绘制

master
张博 11 months ago
parent
2190fba0ba
commit
0ac18e3ab2
6 changed files with 1880 additions and 1815 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/app/layouts/admin/admin.component.ts
  2. 1443
      src/app/routes/wcs/monitor/monitor.canvas.part1.ts
  3. 1889
      src/app/routes/wcs/monitor/monitor.canvas.part2.ts
  4. 6
      src/app/routes/wcs/monitor/monitor.component.html
  5. 323
      src/app/routes/wcs/monitor/monitor.component.ts
  6. 4
      src/assets/i18n/zh-CN.json

4
src/app/layouts/admin/admin.component.ts
View File

@ -222,8 +222,8 @@ export class AdminComponent implements OnDestroy {
if (response) {
this.alertMessages.count = response.total;
this.alertMessages.list = response.items;
console.log(response.items);
console.log(response.total);
//console.log(response.items);
//console.log(response.total);
if(response.total != 0){
for(let i = 0; i < this.alertMessages.list.length; i++){

1443
src/app/routes/wcs/monitor/monitor.canvas.part1.ts
View File

File diff suppressed because it is too large

1889
src/app/routes/wcs/monitor/monitor.canvas.part2.ts
View File

File diff suppressed because it is too large

6
src/app/routes/wcs/monitor/monitor.component.html
View File

@ -66,13 +66,13 @@
<div class="row-auto app-background-card">
<nav mat-tab-nav-bar>
<a mat-tab-link (click)="index = 0" [active]="index === 0">{{ 'routes.wcs.monitor.tabpage1' | translate }}</a>
<!-- <a mat-tab-link (click)="index = 1" [active]="index === 1">{{ 'routes.wcs.monitor.tabpage2' | translate }}</a>
<a mat-tab-link (click)="index = 2" [active]="index === 2">{{ 'routes.wcs.monitor.tabpage3' | translate }}</a>
<a mat-tab-link (click)="index = 1" [active]="index === 1">{{ 'routes.wcs.monitor.tabpage2' | translate }}</a>
<!-- <a mat-tab-link (click)="index = 2" [active]="index === 2">{{ 'routes.wcs.monitor.tabpage3' | translate }}</a>
<a mat-tab-link (click)="index = 3" [active]="index === 3">{{ 'routes.wcs.monitor.tabpage4' | translate }}</a>
<a mat-tab-link (click)="index = 4" [active]="index === 4">{{ 'routes.wcs.monitor.tabpage5' | translate }}</a>
<a mat-tab-link (click)="index = 5" [active]="index === 5">{{ 'routes.wcs.monitor.tabpage6' | translate }}</a>
<a mat-tab-link (click)="index = 6" [active]="index === 6">{{ 'routes.wcs.monitor.tabpage7' | translate }}</a>
<a mat-tab-link (click)="index = 7" [active]="index === 7">{{ 'routes.wcs.monitor.tabpage8' | translate }}</a> -->
<a mat-tab-link (click)="index = 7" [active]="index === 7">{{ 'routes.wcs.monitor.tabpage8' | translate }}</a> -->
</nav>
</div>
<div #map class="row-fill" id="rowFill" [class.hide]="loading">

323
src/app/routes/wcs/monitor/monitor.component.ts
View File

@ -19,7 +19,7 @@ import { DialogService } from '@app/core/services/dialog.service';
import { fabric } from 'fabric';
// 订阅设备属性
interface deviceModel {
barcode: string;
deviceIndex: number;
@ -79,11 +79,12 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
private _render: any;
private _floatTimer: any;
// 加载监视tab页面
private _part: any = { // 地图部分
index: 0,
canvas: [
new MonitorCanvasPart1(this._i18nService)
// new MonitorCanvasPart2(this._i18nService),
new MonitorCanvasPart1(this._i18nService),
new MonitorCanvasPart2(this._i18nService)
// new MonitorCanvasPart3(this._i18nService),
// new MonitorCanvasPart4(this._i18nService),
// new MonitorCanvasPart5(this._i18nService),
@ -92,6 +93,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
// new MonitorCanvasPart8(this._i18nService)
]
};
//数据暂存 切换页面时候传递
private _cache: { [key: number]: any } = {};
@ -137,7 +139,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
) {
this._loading = true;
this.online(); // 上线（建立 signalr 连接）
this.initDevice();
this.initDevice(); // 初始化设备
this._timestamp = new Date();
const interval = 500;
this._render = setInterval(() => {
@ -149,11 +151,13 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
}, 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('dsb')
// console.log(res)
for (let i = 0; i < this._deviceList.length; i++) {
//初始化设备状态
@ -167,6 +171,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
// 初始化设备场景到画布元素
this._canvas.init(this._map)
.then(() => this._canvas.load(this._part.canvas[this._part.index].draw, this._cache));
// 点击设备时发生（device 是设备号）
this._canvas.fire = (device: number) => {
@ -184,13 +189,15 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
// console.log(this._selectedDevice+"shk");
if (this._selectedDevice.deviceKind == 7) {
this.newBorcode = "";
this._detailScaner.open();
this._detailScaner.open(); // 打开条码设备信息
}
else {
this._detail.open();
this._detail.open(); // 打开普通设备信息
}
};
};// 点击设备时发生
//鼠标放上去弹框提示 鼠标悬浮this._canvas.focus = (e: any)
this._canvas.focus = (e: any) => {
@ -201,6 +208,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
//拿到设备索引
this.pushproperties(e.target.data);
// 计算悬浮窗弹出位置
const config = new OverlayConfig();
let left = e.e.clientX + 10;
let top = e.e.clientY + 10;
@ -233,7 +241,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
.left(left + 'px')
.top(top + 'px');
this._overlayRef = this._overlay.create(config);
this._overlayRef.attach(this._template);
this._overlayRef.attach(this._template); // 弹出浮窗
// this._overlayRef.backdropClick().subscribe(() => {
// // 点击了backdrop背景
// this._overlayRef.dispose();
@ -322,6 +330,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
}
}
// 页面设备复位
public async reset(e?: any): Promise<void> {
if (await this._dialogService.confirm(this._i18nService.translate('shared.notification.confirm'))) {
this._httpService.put(`Device?Device=${this._selectedDevice.deviceIndex}&Action=4`);
@ -331,6 +340,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
private _data: { [key: string]: any } = {};
// 界面手动补条码
public async save(e?: any): Promise<void> {
if (await this._dialogService.confirm(this._i18nService.translate('shared.notification.confirm'))) {
@ -366,6 +376,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
}
}
// 设置逻辑有物，没有引用
public async logicGood(e: any): Promise<void> {
if (await this._dialogService.confirm(this._i18nService.translate('shared.notification.confirm'))) {
@ -388,6 +399,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
}
// 此函数本版本没有引用，调试时候可以使用 zb
public async updateStack(index: number, value: number, data: any) {
/* if(data[index].index==index)
@ -470,7 +482,11 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
// 更新设备数据，设置状态，动画坐标等参数--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) {
@ -494,6 +510,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
//将数据更新到暂存区
//拿到的data是初始化从后端读的 或者是后端主动推送的 设备的Model
// 设置输送线状态颜色
if (data.deviceKind == 2) {
// if(index==40041)
// {
@ -528,6 +545,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
}
// 设置穿梭车状态动画显示颜色和 码值 xCoor
if (data.deviceKind == 4) {
if (data.runState == 0) {
this._cache[index] = { color: this.colors.GradientInactiveCaption, left: data.xCoor };
@ -546,7 +564,41 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
} 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{
// 画动画位置
this._cache[index].top = -21 + data.xCoor*34.5 ; // 现场按照比例计算
}
}
// 设置堆垛机状态颜色和 暂存中left值。top值
if (data.deviceKind == 1) {
// if (index == 21008) {
@ -569,7 +621,8 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
} else if (data.runState == 5) {
this._cache[index] = { color: this.colors.darkgreen };
}
// //暂存中 堆垛机left设置
// //暂存中 堆垛机left设置(横向移动绘制位置)
// debugger
if(index == 11001 || index == 11003)
{
@ -613,6 +666,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
}
// 纵向绘制动画，设置缓存中top值 zb
if(index == 13001)
{
// this._cache[index].top = -21;
@ -625,24 +679,29 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
}
}
// 其他暂时不需要绘制开关设备
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 {
// 加开关 king
// if (this._cache[index].splitByte_0 != undefined) {
//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])
// console.log(this._cache[index])
this._cache[index].splitByte_0 = false;
// 输出调试日志
// if(data.deviceKind == 2){
// console.log("输送线");
// console.log("输送线"+ data.deviceIndex);
// }
// if (this._cache[index].splitByte_0 != undefined)
@ -653,7 +712,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
// }
}
//按具体设备
//splitByte_1
if (data.splitByte_1 == 1) {
this._cache[index].splitByte_1 = true;
}
@ -667,80 +726,114 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
}
// console.log(data)
if(data.splitByte_0==1)
console.log(data)
// 又设置一遍？
if(data.splitByte_0 == 1)
{
this._cache[index].splitByte_0=true;
this._cache[index].splitByte_0 = true;
}
else
{
this._cache[index].splitByte_0=false;
this._cache[index].splitByte_0 = false;
}
//画当前界面
//-------------画当前界面------------------
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
}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里面画一个设备编号和这个+8000 的能对上就行，不一定是+8000
this._canvas.object[index + 8000].set('visible', true);
//具体的Part里面画一个设备编号和这个*10+1 的能对上就行，设置堆垛机有物
this._canvas.object[index * 10 + 1].set('visible', true);
// 横向位置
if(index != 13001){
this._canvas.object[index + 8000].set('left', this._canvas.object[index].left + 25);
this._canvas.object[index * 10 + 1].set('left', this._canvas.object[index].left + 25);
}else
{
this._canvas.object[index+ 8000].set('top', this._cache[index].top + 20);
this._canvas.object[index * 10 + 1].set('top', this._cache[index].top + 20);
}
}
else {
else { // 设置splitByte_0 开关显示 == 0
// this._canvas.object[index + 8000].set('visible', true);
if(index != 13001){
this._canvas.object[index + 8000].set('left', this._canvas.object[index].left + 25);
this._canvas.object[index * 10 + 1].set('left', this._canvas.object[index].left + 25);
}else
{
this._canvas.object[index+ 8000].set('top', this._cache[index].top + 20);
this._canvas.object[index * 10 + 1].set('top', this._cache[index].top + 20);
}
this._canvas.object[index + 8000].set('visible', false);
this._canvas.object[index * 10 + 1].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);
}
// 设置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 + 25);
}else
{
this._canvas.object[index * 10 + 2].set('top', this._cache[index].top + 20);
}
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);
}
}
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 + 25);
}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 ) {
@ -751,9 +844,9 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
// debugger;
var length = this._canvas.object[index].group._objects.length;
if (length == 2) {
this._canvas.object[index].group._objects[1].set('visible', true);
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);
this._canvas.object[index].group._objects[2].set('visible', true); // set a 设置splitByte_0
}
}
@ -776,55 +869,79 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
}
// 穿梭车有物开关
if (data.deviceKind == 4) {
// debugger;
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;
// if (length == 4) {
this._canvas.object[index].group._objects[2].set('visible', true);
// }
// else {
// this._canvas.object[index].group._objects[2].set('visible', true);
// }
}
else {
var length = this._canvas.object[index].group._objects.length;
// if (length == 4) {
this._canvas.object[index].group._objects[2].set('visible', false);
// }
// 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);
}
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
// var length = this._canvas.object[index].group._objects.length;
// this._canvas.object[index].group._objects[2].set('visible', false);
}
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);
// }
}
}
}
// 设置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);
}
// 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);
// // }
// }
}// 穿梭车有物开关
}// 当前界面
// online函数调用，-1 一次更新所有设备
if (i == -1) {
for (let item in this._deviceList) {
// if(this._deviceList[item].deviceIndex ==11013){
@ -861,7 +978,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
this._deviceList[item].ErrorMessage = data.errorMessage;
}
}
}
}// i==-1
// if(this._deviceList[i].deviceIndex ==11013){
@ -871,7 +988,7 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
// 构造函数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) {
@ -921,8 +1038,8 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
// object: this._canvas.object[11006]
// })
// }
});
};
}); //setTimeout
}; // update
//鼠标放上去弹框提示信息
public properties: any[] = [
@ -995,11 +1112,11 @@ export class MonitorComponent implements AfterViewInit, OnDestroy {
// 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._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);
this._map.nativeElement.clientWidth / 2,
this._map.nativeElement.clientHeight / 2), 3);
}
});
}

4
src/assets/i18n/zh-CN.json
View File

@ -205,8 +205,8 @@
"location2": "下层",
"load": "入库",
"unload": "出库",
"tabpage1": "监控",
"tabpage2": "3F活老化上",
"tabpage1": "1F监控",
"tabpage2": "夹层监控",
"tabpage3": "3F活老化下",
"tabpage4": "3F静置,Degass",
"tabpage5": "2F夹层",

Write Preview
Loading…
Cancel
Save