工作台数据统计页面

沈斌

2018-03-13 9634327c9094fb2d2b5bb2a3e630971cd65d3112

工作台数据统计页面

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

@@ -9,7 +9,7 @@
        <div class="page-header">
            <div class="avatar"><nz-avatar nzSize="large" nzSrc="https://gw.alipayobjects.com/zos/rmsportal/lctvVCLfRpYCkYxAsiVQ.png"></nz-avatar></div>
            <div class="desc">
                <div class="desc-title">你好，管理员！</div>
                <div class="desc-title">你好，admin！</div>
                <p>系统管理员 | 中国－江苏省－苏州市－昆山市－摩瑞尔电器</p>
            </div>
        </div>
@@ -17,18 +17,18 @@
    <ng-template #extra>
        <div class="page-extra">
            <div>
                <p>下属组织</p>
                <p>组织</p>
                <p>8<span> / 24</span></p>
            </div>
            <div>
                <p>监控点</p>
                <p>20</p>
            </div>
        <!--
            <div>
                <p>监控仪</p>
                <p>560</p>
                <p>1532</p>
            </div>
        <!--
            <div>
                <p>项目访问</p>
                <p>2,223</p>
@@ -41,70 +41,34 @@
<div nz-row [nzGutter]="24" class="pt-lg" style="margin-top: -24px">
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <chart-card
            [title]="'总销售额'"
            total="¥ 126,560"
            [title]="'监控仪台数'"
            total="{{totalDeviceCount}}"
            contentHeight="46px"
            [action]="action1"
            [footer]="footer1">
            <ng-template #action1>
                <nz-tooltip [nzTitle]="'指标说明'">
                <nz-tooltip [nzTitle]="'包括最近一年已安装的监控仪设备的总台数'">
                    <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon>
                </nz-tooltip>
            </ng-template>
            <!--
            <trend flag="up" style="display:block; margin-top:2px;">周同比<span class="pl-sm">12%</span></trend>
            <trend flag="down">日环比<span class="pl-sm">11%</span></trend>
            -->
            <mini-bar height="46" [data]="totalDeviceCountList"></mini-bar>
            <ng-template #footer1>
                <p class="text-truncate">日均销售额<span class="ml-sm">￥12,423</span></p>
                <p class="text-truncate">月均新增台数:<span class="ml-sm">{{avgDeviceCount}}</span></p>
            </ng-template>
        </chart-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <chart-card [title]="'访问量'"
                    total="8,848"
        <chart-card [title]="'正常运行占比'"
                    total="78%"
                    contentHeight="46px"
                    [action]="action2"
                    [footer]="footer2">
            <ng-template #action2>
                <nz-tooltip [nzTitle]="'指标说明'">
                    <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon>
                </nz-tooltip>
            </ng-template>
            <mini-area
                color="#975FE4"
                height="46"
                [data]="data.visitData"></mini-area>
            <ng-template #footer2>
                <p class="text-truncate">日访问量<span class="ml-sm">1,234</span></p>
            </ng-template>
        </chart-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <chart-card [title]="'支付笔数'"
                    total="6,560"
                    contentHeight="46px"
                    [action]="action3"
                    [footer]="footer3">
            <ng-template #action3>
                <nz-tooltip [nzTitle]="'指标说明'">
                    <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon>
                </nz-tooltip>
            </ng-template>
            <mini-bar
                height="46"
                [data]="data.visitData"></mini-bar>
            <ng-template #footer3>
                <p class="text-truncate">转化率<span class="ml-sm">60%</span></p>
            </ng-template>
        </chart-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <chart-card [title]="'运营活动效果'"
                    total="78%"
                    contentHeight="46px"
                    [action]="action4"
                    [footer]="footer4">
            <ng-template #action4>
                <nz-tooltip [nzTitle]="'指标说明'">
                <nz-tooltip [nzTitle]="'当前处于正常运行状态的监控设备的占比'">
                    <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon>
                </nz-tooltip>
            </ng-template>
@@ -114,14 +78,54 @@
                strokeWidth="8"
                target="80"
                color="#13C2C2"></mini-progress>
            <ng-template #footer4>
            <ng-template #footer2>
                <div class="d-flex justify-content-between">
                    <trend flag="up">周同比<span class="pl-sm">12%</span></trend>
                    <trend flag="down">日环比<span class="pl-sm">11%</span></trend>
                    <trend flag="up">周同比<span class="pl-sm">8%</span></trend>
                    <trend flag="down">日环比<span class="pl-sm">2%</span></trend>
                </div>
            </ng-template>
        </chart-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <chart-card [title]="'报警次数'"
                    total="8,848"
                    contentHeight="46px"
                    [action]="action3"
                    [footer]="footer3">
            <ng-template #action3>
                <nz-tooltip [nzTitle]="'最近一年所属设备的报警次数统计'">
                    <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon>
                </nz-tooltip>
            </ng-template>
            <mini-area
                color="#975FE4"
                height="46"
                [data]="data.visitData"></mini-area>
            <ng-template #footer3>
                <p class="text-truncate">月度报警次数:<span class="ml-sm">1,234</span></p>
            </ng-template>
        </chart-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <chart-card [title]="'虚拟机台数'"
                    total="6,560"
                    contentHeight="46px"
                    [action]="action4"
                    [footer]="footer4">
            <ng-template #action4>
                <nz-tooltip [nzTitle]="'最近一年新增的监控模拟设备总台数'">
                    <nz-icon nz-tooltip nzType="info-circle-o"></nz-icon>
                </nz-tooltip>
            </ng-template>
            <mini-bar
                height="46"
                color="orange"
                [data]="data.visitData"></mini-bar>
            <ng-template #footer4>
                <p class="text-truncate">月均新增台数:<span class="ml-sm">220</span></p>
            </ng-template>
        </chart-card>
    </div>
</div>
<nz-card [nzLoading]="loading" [nzBordered]="false" nzNoPadding class="sales-card">
    <ng-template #body>

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

@@ -12,6 +12,11 @@
    styleUrls: ['./workplace.component.less']
})
export class DashboardWorkplaceComponent implements OnInit, OnDestroy {

    totalDeviceCountList: any[] = [];
    totalDeviceCount = 0;
    avgDeviceCount: string;

    notice: any[] = [];
    activities: any[] = [];
    radarData: any[] = [];
@@ -102,6 +107,21 @@
                private http2: HttpClient) {}

    ngOnInit() {

        const today = new Date().getTime();
        const fakeDC = [60, 135, 70, 112, 80, 170, 200, 140, 52, 119, 164, 230];
        for (let i = 0; i < 12; i += 1) {
            this.totalDeviceCountList.push({
                x: moment(today).subtract(-1*i, 'months').format(
                    "YYYY-MM"
                ),
                y: fakeDC[i]
            });
            this.totalDeviceCount += fakeDC[i];
        }
        this.avgDeviceCount = (this.totalDeviceCount/12).toFixed(0);


        const visitData = [];
        const beginDay = new Date().getTime();

@@ -497,6 +517,9 @@
            });
            return item;
        });



    }

    setDate(type: any) {