Question

     <html>code
<gridster [options]="options" class="clsGridster">
        <div *ngFor="let nodeId of realtimeAry;">
          <gridster-item [item]="nodeId" class="clsMatCardBorder">
            <mat-card class="shadow-none pa-0 clsCustomZeroPadding clsMatWidget clsMatCardAlign">
              <div fxLayout="row" fxLayoutAlign="center center" class="mr-1">
                <mat-card-header class="clsAppCardHeader">
                  <mat-card-title class="clsCustomZeroMargin">
                    <span *ngIf="!nodeStatusObj[nodeId['nodeUniqueId']]"><mat-icon>memory</mat-icon></span>
                    <span *ngIf="'ON' == nodeStatusObj[nodeId['nodeUniqueId']]"><mat-icon title="{{'Connected' | translate}}" svgIcon="custom:memory_on"></mat-icon></span>
                    <span *ngIf="'OFF' == nodeStatusObj[nodeId['nodeUniqueId']]"><mat-icon title="{{'Disconnected' | translate}}" svgIcon="custom:memory_off"></mat-icon></span>
                    <span *ngIf="'E' == nodeStatusObj[nodeId['nodeUniqueId']]"><mat-icon title="{{'Communication Drop' | translate}}" svgIcon="custom:memory_err"></mat-icon></span>
                    <span class="clsCustomNodeTitle">{{nodeId['nodeName']}}</span>
                  </mat-card-title>
                  <mat-card-subtitle class="mb-0 clsCustomSpanTitle clsCustomDateTimeTitle clsCustomMargin">{{nodeId['lastUpdatedOn']}}</mat-card-subtitle>  
                </mat-card-header>
                <span fxFlex></span>
                <button mat-icon-button mat-button-sm [matMenuTriggerFor]="realtimeMenu" aria-label="Open card menu">
                  <mat-icon>more_vert</mat-icon>
                </button>
                <mat-menu #realtimeMenu="matMenu" xPosition="before">
                  <button mat-menu-item (click)="open(nodeId)">{{'Parameter Settings'| translate}}</button>
                </mat-menu>
              </div>
              <mat-divider class="clsMatDivder"></mat-divider>
              <mat-card-content class="shadow-none pa-xs">
                <mat-list class="clsMatList">
                  <mat-list-item>
                    <div fxFlex.gt-lg="33.33" fxFlex.lg="33.33" fxFlex.gt-md="33.33" fxFlex.gt-xs="33.33" fxFlex="100"></div>
                    <div fxFlex.gt-lg="33.33" fxFlex.lg="33.33" fxFlex.gt-md="33.33" fxFlex.gt-xs="33.33" fxFlex="100">Today</div>
                    <div fxFlex.gt-lg="33.33" fxFlex.lg="33.33" fxFlex.gt-md="33.33" fxFlex.gt-xs="33.33" fxFlex="100">Yesterday</div>
                  </mat-list-item>
                  <mat-list-item class="clsMatListItem">
                    <div fxFlex.gt-lg="33.33" fxFlex.lg="33.33" fxFlex.gt-md="33.33" fxFlex.gt-xs="33.33" fxFlex="100">Permeate</div>
                    <div fxFlex.gt-lg="33.33" fxFlex.lg="33.33" fxFlex.gt-md="33.33" fxFlex.gt-xs="33.33" fxFlex="100">{{nodeId['todayFeed']}}</div>
                    <div fxFlex.gt-lg="33.33" fxFlex.lg="33.33" fxFlex.gt-md="33.33" fxFlex.gt-xs="33.33" fxFlex="100">{{nodeId['yesterdayFeed']}}</div>
                  </mat-list-item>
                  <mat-list-item class="clsMatListItem">
                    <div fxFlex.gt-lg="33.33" fxFlex.lg="33.33" fxFlex.gt-md="33.33" fxFlex.gt-xs="33.33" fxFlex="100">Feed</div>
                    <div fxFlex.gt-lg="33.33" fxFlex.lg="33.33" fxFlex.gt-md="33.33" fxFlex.gt-xs="33.33" fxFlex="100">{{nodeId['todayPermeate']}}</div>
                    <div fxFlex.gt-lg="33.33" fxFlex.lg="33.33" fxFlex.gt-md="33.33" fxFlex.gt-xs="33.33" fxFlex="100">{{nodeId['yesterdayPermeate']}}</div>
                  </mat-list-item>
                </mat-list>
                <table mat-table [dataSource]="nodeId['realtimeParameterAry']" class="clsCustomFullWidth clsRealtimeTbl mt-xs">
                  <ng-container matColumnDef="parameterName">
                    <th mat-header-cell *matHeaderCellDef width="567"> Parameter </th>
                    <td mat-cell *matCellDef="let row"> {{row.displayName}} </td>
                  </ng-container>
                  <ng-container matColumnDef="value" width="567">
                    <th mat-header-cell *matHeaderCellDef> Value </th>
                    <td mat-cell *matCellDef="let row"> {{row.value}} </td>
                  </ng-container>
                  <tr mat-header-row *matHeaderRowDef="realtimeTblColumns"></tr>
                  <tr mat-row *matRowDef="let node; columns: realtimeTblColumns;"></tr>    
                </table>
              </mat-card-content>
            </mat-card>
          </gridster-item>
        </div>
      </gridster>

.ts code
itemChange(){
    if (this.options.api && this.options.api.optionsChanged) {
      this.options.api.optionsChanged();
    }
    if(!lodash.isEqual(this.realtimeAry,this.filterDataAry)){
      let widgetStateObj = {};
      this.realtimeAry.forEach(data=>{
        widgetStateObj[data['nodeId']] = {x:data['x'],y:data['y']};
      });
      this.assetAnalysisService.saveWidgetStateData(JSON.stringify(widgetStateObj),this.plantData['app_id']).subscribe(data=>{
        if(true == data['error']){
          this.snackBar.open(data['reason'],this.action && this.actionButtonLabel,this.snackBarConfig);
          return;
        }
      },
      error => {
        this.snackBar.open('Error: Something went wrong. Please try again!',this.action && this.actionButtonLabel, this.snackBarConfig);
      });
    }
  }

得到窗口小部件重叠的问题，当我拖动窗口小部件时，被拖动的窗口小部件的x和y坐标与被拖动的窗口小部件的坐标相同，我如何解决此重叠问题。我已尝试解决它使用函数，但我无法获得指定的结果，该怎么办才能找到合适的解决方案。帮助我解决此问题。

角度gridster2网格项在拖动时会重叠

0 个答案: