三级警报优化

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>

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

@@ -35,6 +35,12 @@
    radarData: any[] = [];
    loading = true;
    public alarmData: any = {};
    public alarmDatas = [
        { title: '所有', color: 'purple', data: [] },
        { title: '一级', color: 'yellow', data: [] },
        { title: '二级', color: 'orange', data: [] },
        { title: '三级', color: 'red', data: [] }
    ];
    public alertData = [[], [], [], []];
    salesType = '0';
    salesTotal = 0;
@@ -84,13 +90,13 @@

    selectedIndexChange(index) {
        this.rankingListData = [];
        if (!this.alarmData['_' + index]) {
        if (this.alarmDatas[index].data.length < 1) {
            this.http2.get(environment.SERVER_BASH_URL + 'report/alarm-year', { params: { state: index > 0 ? index : null } }).subscribe((res: any) => {
                const data = [];
                for (let i = 0; i < res.data.length; i += 1) {
                    data.push({ x: `${i + 1}月`, y: !!res.data[i] ? res.data[i] : 0 });
                }
                this.alarmData['_' + index] = data;
                this.alarmDatas[index].data = data;
            });
        }
        if (this.alertData[index].length > 0) {