三级警报优化

xufenglei

2018-05-09 e82d7ca41418b94a9e5d487ac4e3497ccf54e277

 src/app/routes/dashboard/workplace/workplace.component.html

@@ -110,12 +110,12 @@
<nz-card [nzLoading]="loading" [nzBordered]="false" nzNoPadding class="sales-card">
    <ng-template #body>
        <nz-tabset (nzSelectedIndexChange)=selectedIndexChange($event) >
            <nz-tab>
                <ng-template #nzTabHeading>所有警报</ng-template>
            <nz-tab *ngFor="let alarmData of alarmDatas">
                <ng-template #nzTabHeading>{{alarmData.title}}警报</ng-template>
                <div nz-row>
                    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16">
                        <div class="bar">
                            <bar height="295" [title]="'所有警报月度统计'" [data]="alarmData._0" color="purple"></bar>
                            <bar height="295" [title]="alarmData.title+'警报月度统计'" [data]="alarmData.data" color="{{alarmData.color}}"></bar>
                        </div>
                    </div>
                    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8">
@@ -123,86 +123,11 @@
                            <h4 class="rank-title">本月警报排名</h4>
                            <ul>
                                <li *ngFor="let i of rankingListData; let idx = index">
                                    <div>
                                    <div *ngIf="idx < 7">
                                        <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span>
                                        {{i.title}}
                                    </div>
                                    <span>{{i.total | number: '1.0'}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nz-tab>

            <nz-tab>
                <ng-template #nzTabHeading>一级警报</ng-template>
                <div nz-row>
                    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16">
                        <div class="bar">
                            <bar height="295" [title]="'一级警报月度统计'" [data]="alarmData._1" color="yellow"></bar>
                        </div>
                    </div>
                    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8">
                        <div class="rank-list">
                            <h4 class="rank-title">本月警报排名</h4>
                            <ul>
                                <li *ngFor="let i of rankingListData; let idx = index">
                                    <div>
                                        <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span>
                                        {{i.title}}
                                    </div>
                                    <span>{{i.total | number: '1.0'}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nz-tab>

            <nz-tab>
                <ng-template #nzTabHeading>二级警报</ng-template>
                <div nz-row>
                    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16">
                        <div class="bar">
                            <bar height="295" [title]="'二级警报月度统计'" [data]="alarmData._2" color="orange"></bar>
                        </div>
                    </div>
                    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8">
                        <div class="rank-list">
                            <h4 class="rank-title">本月警报排名</h4>
                            <ul>
                                <li *ngFor="let i of rankingListData; let idx = index">
                                    <div>
                                        <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span>
                                        {{i.title}}
                                    </div>
                                    <span>{{i.total | number: '1.0'}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nz-tab>

            <nz-tab>
                <ng-template #nzTabHeading>三级警报</ng-template>
                <div nz-row>
                    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16">
                        <div class="bar">
                            <bar height="295" [title]="'三级警报月度统计'" [data]="alarmData._3" color="red"></bar>
                        </div>
                    </div>
                    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8">
                        <div class="rank-list">
                            <h4 class="rank-title">本月警报排名</h4>
                            <ul>
                                <li *ngFor="let i of rankingListData; let idx = index">
                                    <div>
                                        <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span>
                                        {{i.title}}
                                    </div>
                                    <span>{{i.total | number: '1.0'}}</span>
                                    <span *ngIf="idx < 7">{{i.total | number: '1.0'}}</span>
                                </li>
                            </ul>
                        </div>