设备数据

fengxiang

2018-08-03 f4839b6e3fac1f877190a78c36d7affdde091efe

设备数据

 src/app/routes/operation/device-controller/device-controller.component.html

@@ -1,6 +1,3 @@
<!-- <ng-template [ngSwitch]="deviceControllerService.incumbent">
   <app-device-status *ngSwitchCase="status"></app-device-status>
</ng-template> -->
<ng-container [ngSwitch]="deviceControllerService.incumbent">
    <app-device-status *ngSwitchCase="'status'"></app-device-status>
    <app-device-data *ngSwitchCase="'data'"></app-device-data>

 src/app/routes/operation/device-data/device-data.component.html

@@ -1,181 +1,118 @@
<pro-header [title]="'名称:'+ deviceData.name">
        <ng-template #logo><img src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png"></ng-template>
        <ng-template #action>
            <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click) ="toDeviceStatus()">返回</button>
        </ng-template>
        <ng-template #content>
            <desc-list size="small" col="2">
                <desc-list-item term="创建人">曲丽丽</desc-list-item>
                <desc-list-item term="订购产品">XX 服务</desc-list-item>
                <desc-list-item term="创建时间">2017-07-07</desc-list-item>
                <desc-list-item term="关联单据"><a (click)="msg.success('yes')">12421</a></desc-list-item>
                <desc-list-item term="生效日期">2017-07-07 ~ 2017-08-08</desc-list-item>
                <desc-list-item term="备注">请于两个工作日内确认</desc-list-item>
            </desc-list>
        </ng-template>
        <ng-template #extra>
    <ng-template #logo>
        <img src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
    </ng-template>
    <ng-template #action>
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="toDeviceStatus()">返回</button>
    </ng-template>
    <ng-template #content>
        <desc-list size="small" col="2">
            <desc-list-item term="设置状态">{{deviceStatusName}}</desc-list-item>
            <desc-list-item term="所属站点">{{deviceData.monitorPoint.name}}</desc-list-item>
            <desc-list-item term="设备地址">{{deviceData.address}}</desc-list-item>
            <desc-list-item term="设备坐标">{{ deviceData.longitude +' , ' + deviceData.latitude}}</desc-list-item>
        </desc-list>
    </ng-template>
    <ng-template #extra>
        <div nz-row>
            <div nz-col nzXs="24" nzSm="24">
                <p class="text-grey">sim卡号</p>
                <p class="text-lg">{{deviceData.mac}}</p>
            </div>
        </div>
    </ng-template>
    <ng-template #tab>
        <nz-tabset [nzSize]="'default'">
            <nz-tab>
                <ng-template #nzTabHeading>实时数据</ng-template>
                <ng-container *ngTemplateOutlet="realTimeData">
                </ng-container>
            </nz-tab>
            <nz-tab>
                <ng-template #nzTabHeading>历史数据</ng-template>
            </nz-tab>
            <nz-tab>
                <ng-template #nzTabHeading>超标警告</ng-template>
            </nz-tab>
            <nz-tab>
                <ng-template #nzTabHeading>违规信息</ng-template>
            </nz-tab>
        </nz-tabset>
    </ng-template>
</pro-header>
<ng-template #realTimeData>
    <nz-card [nzBordered]="false" class="mb-lg" nzTitle="实时数据">
            <div nz-row>
                <div nz-col nzXs="24" nzSm="12">
                    <p class="text-grey">状态</p>
                    <p class="text-lg">待审批</p>
                <div nz-col [nzSpan]="12" class="border-right-1 border-bottom-1">
                    <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                        <div nz-col [nzSpan]="12" class="text-center text-red">
                            <i class="fa fa-code-fork fa-2x"></i>
                        </div>
                        <div nz-col [nzSpan]="12" class="py-md">
                            <h4 class="h4">35</h4>
                            <p class="text-grey">SO2</p>
                        </div>
                    </div>
                </div>
                <div nz-col nzXs="24" nzSm="12">
                    <p class="text-grey">订单金额</p>
                    <p class="text-lg">¥ 568.08</p>
                <div nz-col [nzSpan]="12" class="border-bottom-1">
                    <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                        <div nz-col [nzSpan]="12" class="text-center text-pink">
                            <i class="fa fa-inbox fa-2x"></i>
                        </div>
                        <div nz-col [nzSpan]="12" class="py-md">
                            <h4 class="h4">35</h4>
                            <p class="text-grey">PM2.5</p>
                        </div>
                    </div>
                </div>
            </div>
        </ng-template>
        <ng-template #tab>
            <nz-tabset [nzSize]="'default'">
                <nz-tab><ng-template #nzTabHeading>详情</ng-template></nz-tab>
                <nz-tab><ng-template #nzTabHeading>规则</ng-template></nz-tab>
            </nz-tabset>
        </ng-template>
    </pro-header>
    <nz-card [nzBordered]="false" class="mb-lg" nzTitle="流程进度">
        <nz-steps [nzCurrent]="1">
            <nz-step [nzTitle]="'创建项目'" [nzDescription]="createDesc">
                <ng-template #createDesc>
                    <p class="my-sm">曲丽丽<nz-icon nzType="dingding-o" class="ml-sm"></nz-icon></p>
                    <p>2016-12-12 12:32</p>
                </ng-template>
            </nz-step>
            <nz-step [nzTitle]="'部门初审'" [nzDescription]="checkedDesc">
                <ng-template #checkedDesc>
                    <p class="my-sm">周毛毛<nz-icon nzType="dingding-o" style="color: #00A0E9" class="ml-sm"></nz-icon></p>
                    <a (click)="msg.success('click')">催一下</a>
                </ng-template>
            </nz-step>
            <nz-step [nzTitle]="'财务复核'"></nz-step>
            <nz-step [nzTitle]="'完成'"></nz-step>
        </nz-steps>
        <div class="steps-content"></div>
    </nz-card>
    <nz-card [nzBordered]="false" nzTitle="用户信息" class="mb-lg">
        <desc-list class="mb-lg">
            <desc-list-item term="用户姓名">付小小</desc-list-item>
            <desc-list-item term="会员卡号">32943898021309809423</desc-list-item>
            <desc-list-item term="身份证">3321944288191034921</desc-list-item>
            <desc-list-item term="联系方式">18112345678</desc-list-item>
            <desc-list-item term="联系地址">曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口</desc-list-item>
        </desc-list>
        <desc-list class="mb-lg" title="信息组">
            <desc-list-item term="某某数据">725</desc-list-item>
            <desc-list-item term="该数据更新时间">2017-08-08</desc-list-item>
            <desc-list-item>&nbsp;</desc-list-item>
            <desc-list-item [term]="term">
                <ng-template #term>
                    某某数据
                    <nz-tooltip [nzTitle]="'数据说明'">
                        <span nz-tooltip><i class="anticon anticon-info-circle-o"></i></span>
                    </nz-tooltip>
                </ng-template>
                725
            </desc-list-item>
            <desc-list-item term="该数据更新时间">2017-08-08</desc-list-item>
        </desc-list>
        <h4 class="mb-md">信息组</h4>
        <nz-card nzType="inner" nzTitle="多层级信息组">
            <desc-list size="small" title="组名称" class="mb-md">
                <desc-list-item term="负责人">林东东</desc-list-item>
                <desc-list-item term="角色码">1234567</desc-list-item>
                <desc-list-item term="所属部门">XX公司 - YY部</desc-list-item>
                <desc-list-item term="过期时间">2017-08-08</desc-list-item>
                <desc-list-item term="描述">这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</desc-list-item>
            </desc-list>
            <nz-divider class="mb-md"></nz-divider>
            <desc-list size="small" title="组名称" col="1" class="mb-md">
                <desc-list-item term="学名">
                Citrullus lanatus (Thunb.) Matsum. et Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
                </desc-list-item>
            </desc-list>
            <nz-divider class="mb-md"></nz-divider>
            <desc-list size="small" title="组名称">
                <desc-list-item term="负责人">付小小</desc-list-item>
                <desc-list-item term="角色码">1234568</desc-list-item>
            </desc-list>
            <div nz-row>
                <div nz-col [nzSpan]="12" class="border-bottom-1 border-right-1">
                    <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                        <div nz-col [nzSpan]="12" class="text-center text-green">
                            <i class="fa fa-code-fork fa-2x"></i>
                        </div>
                        <div nz-col [nzSpan]="12" class="py-md">
                            <h4 class="h4">25</h4>
                            <p class="text-grey">PM10</p>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="12" class="border-bottom-1">
                    <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                        <div nz-col [nzSpan]="12" class="text-center text-green">
                            <i class="fa fa-inbox fa-2x"></i>
                        </div>
                        <div nz-col [nzSpan]="12" class="py-md">
                            <h4 class="h4">45</h4>
                            <p class="text-grey">NO</p>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row>
                    <div nz-col [nzSpan]="12" class="border-right-1">
                        <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                            <div nz-col [nzSpan]="12" class="text-center text-green">
                                <i class="fa fa-code-fork fa-2x"></i>
                            </div>
                            <div nz-col [nzSpan]="12" class="py-md">
                                <h4 class="h4">11</h4>
                                <p class="text-grey">O3</p>
                            </div>
                        </div>
                    </div>
                    <div nz-col [nzSpan]="12">
                        <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                            <div nz-col [nzSpan]="12" class="text-center text-green">
                                <i class="fa fa-inbox fa-2x"></i>
                            </div>
                            <div nz-col [nzSpan]="12" class="py-md">
                                <h4 class="h4">10</h4>
                                <p class="text-grey">CO</p>
                            </div>
                        </div>
                    </div>
                </div>
        </nz-card>
    </nz-card>
    <nz-card [nzBordered]="false" nzTitle="用户近半年来电记录" class="mb-lg">
        <div class="no-data">
            <i class="anticon anticon-frown-o"></i>暂无数据
        </div>
    </nz-card>
    <nz-card [nzBordered]="false">
        <nz-card-tab nzTabHeading="操作日志一">
            <nz-table [nzDataSource]="data.advancedOperation1" [nzIsPagination]="false">
                <thead nz-thead>
                    <tr>
                        <th nz-th><span>操作类型</span></th>
                        <th nz-th><span>操作人</span></th>
                        <th nz-th><span>执行结果</span></th>
                        <th nz-th><span>操作时间</span></th>
                        <th nz-th><span>备注</span></th>
                    </tr>
                </thead>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let i of data.advancedOperation1">
                        <td nz-td>{{i.type}}</td>
                        <td nz-td>{{i.name}}</td>
                        <td nz-td>
                            <nz-badge *ngIf="i.status === 'success'" [nzStatus]="'success'" [nzText]="'成功'"></nz-badge>
                            <nz-badge *ngIf="i.status !== 'success'" [nzStatus]="'processing'" [nzText]="'进行中'"></nz-badge>
                        </td>
                        <td nz-td>{{i.updatedAt | _date}}</td>
                        <td nz-td>{{i.memo}}</td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card-tab>
        <nz-card-tab nzTabHeading="操作日志二">
            <nz-table [nzDataSource]="data.advancedOperation2" [nzIsPagination]="false">
                <thead nz-thead>
                    <tr>
                        <th nz-th><span>操作类型</span></th>
                        <th nz-th><span>操作人</span></th>
                        <th nz-th><span>执行结果</span></th>
                        <th nz-th><span>操作时间</span></th>
                        <th nz-th><span>备注</span></th>
                    </tr>
                </thead>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let i of data.advancedOperation2">
                        <td nz-td>{{i.type}}</td>
                        <td nz-td>{{i.name}}</td>
                        <td nz-td>
                            <nz-badge *ngIf="i.status === 'success'" [nzStatus]="'success'" [nzText]="'成功'"></nz-badge>
                            <nz-badge *ngIf="i.status !== 'success'" [nzStatus]="'processing'" [nzText]="'进行中'"></nz-badge>
                        </td>
                        <td nz-td>{{i.updatedAt | _date}}</td>
                        <td nz-td>{{i.memo}}</td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card-tab>
        <nz-card-tab nzTabHeading="操作日志三">
            <nz-table [nzDataSource]="data.advancedOperation3" [nzIsPagination]="false">
                <thead nz-thead>
                    <tr>
                        <th nz-th><span>操作类型</span></th>
                        <th nz-th><span>操作人</span></th>
                        <th nz-th><span>执行结果</span></th>
                        <th nz-th><span>操作时间</span></th>
                        <th nz-th><span>备注</span></th>
                    </tr>
                </thead>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let i of data.advancedOperation3">
                        <td nz-td>{{i.type}}</td>
                        <td nz-td>{{i.name}}</td>
                        <td nz-td>
                            <nz-badge *ngIf="i.status === 'success'" [nzStatus]="'success'" [nzText]="'成功'"></nz-badge>
                            <nz-badge *ngIf="i.status !== 'success'" [nzStatus]="'processing'" [nzText]="'进行中'"></nz-badge>
                        </td>
                        <td nz-td>{{i.updatedAt | _date}}</td>
                        <td nz-td>{{i.memo}}</td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card-tab>
    </nz-card>
    
</ng-template>

 src/app/routes/operation/device-data/device-data.component.ts

@@ -16,17 +16,40 @@
    public get deviceData() {
        return this.deviceControllerService.data;
    }
    public get deviceStatusName() {
        if(!!this.deviceControllerService
        &&this.deviceControllerService.data
        &&this.deviceControllerService.data.state) {
            switch (this.deviceControllerService.data.state) {
                case "0":
                    return '正常';           
                case "1":
                    return '轻度';           
                case "2":
                    return '中度';           
                case "3":
                    return '严重';           
                default:
                    return '离线';
            }
        }else {
         return '离线';
        }
    }
    constructor(
        public msg: NzMessageService, 
        private http: _HttpClient,
        private deviceControllerService:DeviceControllerService,
    ) {}
    ) {
    }
    /**
     * 返回设备列表页面
     * toDeviceStatus
     */
    public toDeviceStatus() {
        this.deviceControllerService.incumbent = 'status';
    }
    
    ngOnInit() {
        this.http.get('/profile/advanced').subscribe((res: any) => this.data = res);
    }

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

@@ -4,144 +4,143 @@
            <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>
            <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>
                                <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>
                                <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>
                                                <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>
                                            </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">
                                </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;">
        <div nz-form-label nz-col [nzSm]="24" style="text-align: center;">
            <h2 *ngIf="deviceVersions.length == 0">该组织下没有设备或者没有可选型号</h2>
        </div>
    </div>