大屏布局

fengxiang

2018-06-27 a52dc7a6e7119d575c611f9c2800649dff029f5e

大屏布局

 src/app/routes/sensors/basic-info/sensor-unit/sensor-unit.component.html

@@ -70,10 +70,10 @@
        <div nz-col [nzSm]="8" [nzXs]="24">
           <label>{{item.name}}</label>
        </div>
        <div nz-col [nzSm]="8" [nzXs]="24">
            <label>{{item.rules.replace('{0}','初值')}}</label>
        <div nz-col [nzSm]="12" [nzXs]="24">
            <label>{{ rulesToShow(item.rules) }}</label>
        </div>
        <div nz-col [nzSm]="8" [nzXs]="24">
        <div nz-col [nzSm]="4" [nzXs]="24">
            <a (click)="toEdit(item)">编辑</a>
            <span>&nbsp;|&nbsp;</span>
            <nz-popconfirm [nzTitle]="'确定要删除?'" [nzOkText]="'Yes'" [nzCancelText]="'No'" (nzOnConfirm)="delete(item.id)" >

 src/app/routes/sensors/basic-info/sensor-unit/sensor-unit.component.ts

@@ -39,6 +39,9 @@
        }
      );
    }
    public rulesToShow(rules: string) {
        return rules.replace( /d/g, '').replace('{0}', '初值');
    }
    ngOnInit() {
      this.loadDataList();
      const validates: SensorUnit  = {
@@ -111,22 +114,25 @@
      };
      this.rules.push(rule);
      this.setValueToControl('_rules' , this.rulesToString(this.rules, '初值'));
     }
     rulesToString(rules , dataLabel?: string) {     
     }     rulesToString(rules , dataLabel?: string) {     
        let rulesString = '' ;
        dataLabel = dataLabel === undefined ? '{0}' : dataLabel;
        const isDataLabel = dataLabel === undefined;
        dataLabel = isDataLabel ? '{0}' : dataLabel;
        if (!!this.rules && this.rules.length > 0) {
            // const dataLabel = '初值';
            rulesString += dataLabel ;
            this.rules.forEach(rule => {
              if (!rulesString.endsWith(dataLabel)) {
                rulesString = '(' + rulesString + ')';
              }              
               switch (rule.operator) {
                  case Operator.PLUS: rulesString += '+' + rule.value + 'd'; break;
                  case Operator.MINUS: rulesString += '-' + rule.value + 'd'; break;
                  case Operator.MULTIPLY: rulesString += '*' + rule.value + 'd'; break;
                  case Operator.DIVIDE: rulesString += '/' + rule.value + 'd'; break;
              } 
              switch (rule.operator) {
                  case Operator.PLUS: rulesString += '+' + rule.value; break;
                  case Operator.MINUS: rulesString += '-' + rule.value; break;
                  case Operator.MULTIPLY: rulesString += '*' + rule.value; break;
                  case Operator.DIVIDE: rulesString += '/' + rule.value; break;
               }
               if ( isDataLabel ) {
                 rulesString += 'd';
               }
            });
        }

 src/app/routes/systems/organization/organization-config-screen/organization-config-screen.component.html

@@ -1,142 +1,153 @@
<nz-tabset [nzTabPosition]="'left'" [(nzSelectedIndex)]="selectedIndex" (nzSelectedIndexChange)="swapTab()">
    <nz-tab *ngFor="let tab of deviceVersions">
        <ng-template #nzTabHeading>
            {{tab.name}}
        </ng-template>
        <nz-spin [nzSpinning]="isSpinning">
            <form nz-form>
                <nz-card [nzBordered]="false" nzTitle="待选区({{surplusSensors.length}})">
                    <div nz-form-item nz-row>
                        <ng-container *ngFor="let sensor of surplusSensors,index as i">
                            <div nz-form-control nz-col [nzSm]="2">
                                <label>{{ sensor.name }}</label>
                            </div>
                            <div nz-form-control nz-col [nzSm]="4">
                                <nz-dropdown [nzTrigger]="'click'">
                                    <a class="ant-dropdown-link" nz-dropdown>
                                        移到
                                        <i class="anticon anticon-down"></i>
                                    </a>
                                    <ul nz-menu>
                                        <li nz-menu-item>
                                            <a (click)="moveTo(surplusSensors,i,defaultMonitorItems)">
                                                默认区
                                            </a>
                                        </li>
                                        <li nz-menu-divider></li>
                                        <li nz-menu-item (click)="moveTo(surplusSensors,i,coreMonitorItems)" [nzDisable]="isCoreItemsFull">
                                            核心区
                                            <span *ngIf="isCoreItemsFull">(已满)</span>
                                        </li>
                                    </ul>
                                </nz-dropdown>
                            </div>
                        </ng-container>
                    </div>
                    <nz-row nzType="flex" nzJustify="end" nzAlign="top">
                        <nz-col nzSpan="4" >
                            <button (click)="moveAllto(surplusSensors,defaultMonitorItems)" nz-button>全添加到默认区</button>
                        </nz-col>
                    </nz-row>
                </nz-card>
                <div nz-form-item nz-row>
                    <div nz-form-control nz-col [nzSm]="8"></div>
                    <div nz-form-control nz-col [nzSm]="8">
                        <label class="display-3">图表显示 :</label>
                        <span class="display-3">{{ chartSensorName }}</span>
                    </div>
                    <div nz-form-control nz-col [nzSm]="8"></div>
                </div>
                <nz-card [nzBordered]="false" nzTitle="默认区({{defaultMonitorItems.length}})">
                    <div *ngFor="let sensor of defaultMonitorItems,index as i" nz-form-item nz-row>
                        <div nz-form-control nz-col [nzSm]="6">
                            <label>{{ sensor.name }}</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="3">
                            <a (click)="itemUp(defaultMonitorItems,i)">上移</a>
                        </div>
                        <div nz-form-control nz-col [nzSm]="3">
                            <a (click)="itemDown(defaultMonitorItems,i)">下移</a>
                        </div>
                        <div nz-form-control nz-col [nzSm]="3">
                            <a (click)="setChartSensorKey(sensor.sensorKey)">设为图表</a>
                        </div>
                        <div nz-form-control nz-col [nzSm]="3">
                            <nz-dropdown [nzTrigger]="'click'">
                                <a class="ant-dropdown-link" nz-dropdown>
                                    移到
                                    <i class="anticon anticon-down"></i>
                                </a>
                                <ul nz-menu>
                                    <li nz-menu-item>
                                        <a (click)="moveTo(defaultMonitorItems,i,surplusSensors)">
                                            待选区
                                        </a>
                                    </li>
                                    <li nz-menu-divider></li>
                                    <li nz-menu-item (click)="moveTo(defaultMonitorItems,i,coreMonitorItems)" [nzDisable]="isCoreItemsFull">
                                        核心区
                                        <span *ngIf="isCoreItemsFull">(已满)</span>
                                    </li>
                                </ul>
                            </nz-dropdown>
                        </div>
                    </div>
                </nz-card>
                <nz-card [nzBordered]="false" nzTitle="核心区({{coreMonitorItems.length}}/6)">
                    <div *ngFor="let sensor of coreMonitorItems,index as i" nz-form-item nz-row>
                        <div nz-form-control nz-col [nzSm]="6">
                            <label>{{ sensor.name }}</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="3">
                            <a (click)="itemUp(coreMonitorItems,i)">上移</a>
                        </div>
                        <div nz-form-control nz-col [nzSm]="3">
                            <a (click)="itemDown(coreMonitorItems,i)">下移</a>
                        </div>
                        <div nz-form-control nz-col [nzSm]="3">
                            <a (click)="setChartSensorKey(sensor.sensorKey)">设为图表</a>
                        </div>
                        <div nz-form-control nz-col [nzSm]="3">
                            <nz-dropdown [nzTrigger]="'click'">
                                <a class="ant-dropdown-link" nz-dropdown>
                                    移到
                                    <i class="anticon anticon-down"></i>
                                </a>
                                <ul nz-menu>
                                    <li nz-menu-item>
                                        <a (click)="moveTo(coreMonitorItems,i,surplusSensors)">
                                            待选区
                                        </a>
                                    </li>
                                    <li nz-menu-divider></li>
                                    <li nz-menu-item (click)="moveTo(coreMonitorItems,i,defaultMonitorItems)">
                                        默认区
                                    </li>
                                </ul>
                            </nz-dropdown>
                        </div>
                    </div>
                </nz-card>
                <nz-card [nzBordered]="false" nzTitle="固定区({{optionalFixedItems.length}})">
                        <div nz-form-item nz-row>
                            <ng-container *ngFor="let sensor of optionalFixedItems,index as i">
                                <div nz-form-control nz-col [nzSm]="2">
<ng-container *ngIf="!!deviceVersions.length; else elseTemplate">
    <nz-tabset [nzTabPosition]="'left'" [(nzSelectedIndex)]="selectedIndex" (nzSelectedIndexChange)="swapTab()">
        <nz-tab *ngFor="let tab of deviceVersions">
            <ng-template #nzTabHeading>
                {{tab.name}}
            </ng-template>
            <nz-spin [nzSpinning]="isSpinning">            
                        <form *ngIf="!!deviceVersions.length" nz-form>
                                <nz-card [nzBordered]="false" nzTitle="待选区({{surplusSensors.length}})">
                                    <div nz-form-item nz-row>
                                        <ng-container *ngFor="let sensor of surplusSensors,index as i">
                                            <div nz-form-control nz-col [nzSm]="2">
                                                <label>{{ sensor.name }}</label>
                                            </div>
                                            <div nz-form-control nz-col [nzSm]="4">
                                                <nz-dropdown [nzTrigger]="'click'">
                                                    <a class="ant-dropdown-link" nz-dropdown>
                                                        移到
                                                        <i class="anticon anticon-down"></i>
                                                    </a>
                                                    <ul nz-menu>
                                                        <li nz-menu-item>
                                                            <a (click)="moveTo(surplusSensors,i,defaultMonitorItems)">
                                                                默认区
                                                            </a>
                                                        </li>
                                                        <li nz-menu-divider></li>
                                                        <li nz-menu-item (click)="moveTo(surplusSensors,i,coreMonitorItems)" [nzDisable]="isCoreItemsFull">
                                                            核心区
                                                            <span *ngIf="isCoreItemsFull">(已满)</span>
                                                        </li>
                                                    </ul>
                                                </nz-dropdown>
                                            </div>
                                        </ng-container>
                                    </div>
                                    <nz-row nzType="flex" nzJustify="end" nzAlign="top">
                                        <nz-col nzSpan="4" >
                                            <button (click)="moveAllto(surplusSensors,defaultMonitorItems)" nz-button>全添加到默认区</button>
                                        </nz-col>
                                    </nz-row>
                                </nz-card>
                                <div nz-form-item nz-row>
                                    <div nz-form-control nz-col [nzSm]="8"></div>
                                    <div nz-form-control nz-col [nzSm]="8">
                                        <label class="display-3">图表显示 :</label>
                                        <span class="display-3">{{ chartSensorName }}</span>
                                    </div>
                                    <div nz-form-control nz-col [nzSm]="8"></div>
                                </div>
                                <div nz-form-control nz-col [nzSm]="4">
                                    <label nz-checkbox [ngModel]="isFixedSensorSelected(sensor.sensorKey)" 
                                    (ngModelChange) = "changeFixedItem( $event, sensor)"
                                    name="fixed_{{sensor.sensorKey}}_selected"></label>
                                    &nbsp;
                                    <label>{{ sensor.name }}</label>
                                </div>
                            </ng-container>
                        </div>
                    </nz-card>
            </form>
        </nz-spin>
    </nz-tab>
</nz-tabset>
                                <nz-card [nzBordered]="false" nzTitle="默认区({{defaultMonitorItems.length}})">
                                    <div *ngFor="let sensor of defaultMonitorItems,index as i" nz-form-item nz-row>
                                        <div nz-form-control nz-col [nzSm]="6">
                                            <label>{{ sensor.name }}</label>
                                        </div>
                                        <div nz-form-control nz-col [nzSm]="3">
                                            <a (click)="itemUp(defaultMonitorItems,i)">上移</a>
                                        </div>
                                        <div nz-form-control nz-col [nzSm]="3">
                                            <a (click)="itemDown(defaultMonitorItems,i)">下移</a>
                                        </div>
                                        <div nz-form-control nz-col [nzSm]="3">
                                            <a (click)="setChartSensorKey(sensor.sensorKey)">设为图表</a>
                                        </div>
                                        <div nz-form-control nz-col [nzSm]="3">
                                            <nz-dropdown [nzTrigger]="'click'">
                                                <a class="ant-dropdown-link" nz-dropdown>
                                                    移到
                                                    <i class="anticon anticon-down"></i>
                                                </a>
                                                <ul nz-menu>
                                                    <li nz-menu-item>
                                                        <a (click)="moveTo(defaultMonitorItems,i,surplusSensors)">
                                                            待选区
                                                        </a>
                                                    </li>
                                                    <li nz-menu-divider></li>
                                                    <li nz-menu-item (click)="moveTo(defaultMonitorItems,i,coreMonitorItems)" [nzDisable]="isCoreItemsFull">
                                                        核心区
                                                        <span *ngIf="isCoreItemsFull">(已满)</span>
                                                    </li>
                                                </ul>
                                            </nz-dropdown>
                                        </div>
                                    </div>
                                </nz-card>
                                <nz-card [nzBordered]="false" nzTitle="核心区({{coreMonitorItems.length}}/6)">
                                    <div *ngFor="let sensor of coreMonitorItems,index as i" nz-form-item nz-row>
                                        <div nz-form-control nz-col [nzSm]="6">
                                            <label>{{ sensor.name }}</label>
                                        </div>
                                        <div nz-form-control nz-col [nzSm]="3">
                                            <a (click)="itemUp(coreMonitorItems,i)">上移</a>
                                        </div>
                                        <div nz-form-control nz-col [nzSm]="3">
                                            <a (click)="itemDown(coreMonitorItems,i)">下移</a>
                                        </div>
                                        <div nz-form-control nz-col [nzSm]="3">
                                            <a (click)="setChartSensorKey(sensor.sensorKey)">设为图表</a>
                                        </div>
                                        <div nz-form-control nz-col [nzSm]="3">
                                            <nz-dropdown [nzTrigger]="'click'">
                                                <a class="ant-dropdown-link" nz-dropdown>
                                                    移到
                                                    <i class="anticon anticon-down"></i>
                                                </a>
                                                <ul nz-menu>
                                                    <li nz-menu-item>
                                                        <a (click)="moveTo(coreMonitorItems,i,surplusSensors)">
                                                            待选区
                                                        </a>
                                                    </li>
                                                    <li nz-menu-divider></li>
                                                    <li nz-menu-item (click)="moveTo(coreMonitorItems,i,defaultMonitorItems)">
                                                        默认区
                                                    </li>
                                                </ul>
                                            </nz-dropdown>
                                        </div>
                                    </div>
                                </nz-card>
                                <nz-card [nzBordered]="false" nzTitle="固定区({{optionalFixedItems.length}})">
                                        <div nz-form-item nz-row>
                                            <ng-container *ngFor="let sensor of optionalFixedItems,index as i">
                                                <div nz-form-control nz-col [nzSm]="2">
                                                </div>
                                                <div nz-form-control nz-col [nzSm]="4">
                                                    <label nz-checkbox [ngModel]="isFixedSensorSelected(sensor.sensorKey)" 
                                                    (ngModelChange) = "changeFixedItem( $event, sensor)"
                                                    name="fixed_{{sensor.sensorKey}}_selected"></label>
                                                    &nbsp;
                                                    <label>{{ sensor.name }}</label>
                                                </div>
                                            </ng-container>
                                        </div>
                                    </nz-card>
                            </form>
            </nz-spin>
        </nz-tab>
    </nz-tabset>
</ng-container>
<ng-template #elseTemplate>
    <div nz-form-item nz-row>
        <div  nz-form-label nz-col [nzSm]="24" style="text-align: center;">
            <h2 *ngIf="deviceVersions.length == 0">该组织下没有设备或者没有可选型号</h2>
        </div>
    </div>
</ng-template>


<footer-toolbar>
    <label>组织名称：</label>
    <span [ngStyle]="{'font-size': '16px','font-weight': 'bold','margin-right':'30px'}">{{ organization.name }}</span>

 src/app/routes/systems/organization/organization-config-unit/organization-config-unit.component.html

@@ -1,29 +1,30 @@
<form nz-form>
    <ng-container *ngIf="!!osuTowDimList.length; else elseTemplate">
            <div  *ngFor= "let osuList of osuTowDimList" nz-form-item nz-row>
                    <ng-container *ngFor="let osu of osuList">
    <ng-container *ngIf="!!osuList.length; else elseTemplate">
            <nz-row nzGutter="8">      
                    <ng-container *ngFor="let osu of osuList,index as i">
                                          
                        <div  nz-form-label nz-col [nzSm]="3">
                                <label>{{osu.sensor.description}}</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="4">
                        <div nz-form-control nz-col [nzSm]="3">
                            <nz-select [nzMode]="'default'" nzAllowClear 
                            nzPlaceHolder="{{osu.sensor.unit}}(默认单位)" [(ngModel)]="osu.sensorUnitId" name="sensorUnitId">
                            nzPlaceHolder="{{osu.sensor.unit}}(默认单位)" [(ngModel)]="osu.sensorUnitId" name="sensorUnit_{{i}}">
                                <nz-option
                                    *ngFor="let option of sensorUnitMap[osu.sensor.id]"
                                    [nzLabel]="option.name"
                                    [nzValue]="option.id">
                                    </nz-option>
                                </nz-option>
                            </nz-select>
                        </div>
                        </div>                  
                    </ng-container>
                </div>
                </nz-row>
    </ng-container>
    <ng-template #elseTemplate>
            <div nz-form-item nz-row>
                    <div  nz-form-label nz-col [nzSm]="24" style="text-align: center;">
                            <h2>该组织下没有传感器或者没有可选单位</h2>
                            <h2>该组织下没有设备或者没有可选单位</h2>
                    </div>
                </div>
            </div>
    </ng-template>
    


 src/app/routes/systems/organization/organization-config-unit/organization-config-unit.component.ts

@@ -16,10 +16,9 @@
        private organizationService: OrganizationService,
        public msgSrv: NzMessageService
    ) { }
    public osuTowDimList: OrganizationSensorUnit[][] = [];

    public originalOsuList: OrganizationSensorUnit[] = [];
    public osuList: OrganizationSensorUnit[];
    public osuList: OrganizationSensorUnit[] = [];
    public sensorUnitMap;
    ngOnInit() {
        this.organization = this.organizationService.data;
@@ -32,19 +31,8 @@
            Object.assign(osu, item);
            this.originalOsuList.push(osu);
        });
        if ( !!osuList ) {
            for (let index = 0 ; index < osuList.length; index += 3 ) {
                const osuListTemp: OrganizationSensorUnit[] = [];
                for (let n = 0 ; n < 3; n++ ) {
                        const nTemp =  index + n;
                        if (nTemp < osuList.length ) {
                            osuListTemp.push(osuList[nTemp]);
                        }
                }
                this.osuTowDimList.push(osuListTemp);
            }
        }
        console.log(this.osuTowDimList);
        console.log(this.osuList);
        console.log(this.sensorUnitMap);
    }
    public isSaving = false;
    save() {