From ef5b73ea0b7aed593312f728638d84b5358458ae Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Fri, 13 Jul 2018 14:35:00 +0800
Subject: [PATCH] Merge branch 'master' of http://blit.7drlb.com:8888/r/screen_demo2
---
src/app/routes/environment/management/management.component.ts | 48 +++
src/app/routes/routes.module.ts | 4
src/app/routes/statistics/calendar/calendar.component.ts | 25 -
src/app/routes/statistics/analysis/analysis.component.html | 70 ++--
src/app/routes/statistics/analysis/analysis.component.ts | 41 +-
src/app/routes/reports/query/query.component.html | 143 ++++----
src/app/routes/routes-routing.module.ts | 5
src/app/routes/statistics/calendar/calendar.component.html | 110 ++++--
src/app/routes/reports/reports.module.ts | 5
src/assets/app-data.json | 14
src/app/routes/environment/management/management.component.html | 30 ++
src/app/routes/environment/management/management.component.less | 389 +++++++++++++++++++++++++
12 files changed, 669 insertions(+), 215 deletions(-)
diff --git a/src/app/routes/environment/management/management.component.html b/src/app/routes/environment/management/management.component.html
new file mode 100644
index 0000000..dd5cde4
--- /dev/null
+++ b/src/app/routes/environment/management/management.component.html
@@ -0,0 +1,30 @@
+<div nz-row [nzGutter]="24" class="pt-lg">
+ <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
+ <chart-card [title]="'API������������'" total="216���" contentHeight="46px">
+ <mini-progress height="46" percent="60" target="60" strokeWidth="8" color="#13C2C2"></mini-progress>
+ </chart-card>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
+ <chart-card [title]="'PM2.5������������'" total="158���" contentHeight="46px">
+ <mini-progress height="46" percent="50" target="50" strokeWidth="8" color="#108ee9"></mini-progress>
+ </chart-card>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
+ <chart-card [title]="'PM10������������'" total="112���" contentHeight="46px">
+ <mini-progress height="46" percent="40" target="40" strokeWidth="8" color="#00a854"></mini-progress>
+ </chart-card>
+ </div>
+</div>
+
+<div nz-row [nzGutter]="24">
+ <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
+ <nz-card [nzTitle]="nzTitle" [nzBordered]="false">
+ <ng-template #nzTitle>
+ ������������
+ <small class="text-sm font-weight-normal"></small>
+ </ng-template>
+ <timeline [data]="offlineChartData" [height]="239" [padding]="[0, 0, 0, 0]" [titleMap]="{ y1: '������������', y2: '������������' }"></timeline>
+ </nz-card>
+ </div>
+</div>
+
diff --git a/src/app/routes/environment/management/management.component.less b/src/app/routes/environment/management/management.component.less
new file mode 100644
index 0000000..c732176
--- /dev/null
+++ b/src/app/routes/environment/management/management.component.less
@@ -0,0 +1,389 @@
+@import '~@delon/theme/styles/antd/themes/default.less';
+@import '~@delon/abc/utils/utils.less';
+
+:host ::ng-deep {
+ .page-header {
+ display: flex;
+ .avatar {
+ flex: 0 1 72px;
+ margin-bottom: 8px;
+ .ant-avatar {
+ border-radius: 72px;
+ display: block;
+ width: 72px;
+ height: 72px;
+ }
+ }
+ .desc {
+ position: relative;
+ top: 4px;
+ margin-left: 24px;
+ flex: 1 1 auto;
+ color: @text-color-secondary;
+ line-height: 22px;
+ .desc-title {
+ font-size: 20px;
+ line-height: 28px;
+ font-weight: 500;
+ color: @heading-color;
+ margin-bottom: 12px;
+ }
+ }
+ }
+
+ .page-extra {
+ .clearfix();
+ float: right;
+ & > div {
+ padding: 0 32px;
+ position: relative;
+ float: left;
+ & > p:first-child {
+ color: @text-color-secondary;
+ font-size: @font-size-base;
+ line-height: 22px;
+ margin-bottom: 4px;
+ }
+ & > p {
+ color: @heading-color;
+ font-size: 30px;
+ line-height: 38px;
+ margin: 0;
+ & > span {
+ color: @text-color-secondary;
+ font-size: 20px;
+ }
+ }
+ &:after {
+ background-color: @border-color-split;
+ position: absolute;
+ top: 8px;
+ right: 0;
+ width: 1px;
+ height: 40px;
+ content: "";
+ }
+ }
+ & > div:last-child {
+ padding-right: 0;
+ &:after {
+ display: none;
+ }
+ }
+ }
+
+ .project-list {
+ .ant-card-meta-description {
+ color: @text-color-secondary;
+ height: 44px;
+ line-height: 22px;
+ overflow: hidden;
+ }
+ .card-title {
+ font-size: 0;
+ a {
+ color: @heading-color;
+ margin-left: 12px;
+ line-height: 24px;
+ height: 24px;
+ display: inline-block;
+ vertical-align: top;
+ font-size: @font-size-base;
+ &:hover {
+ color: @primary-color;
+ }
+ }
+ }
+
+ .project-grid {
+ width: 33.33%;
+ }
+
+ .project-item {
+ display: flex;
+ margin-top: 8px;
+ overflow: hidden;
+ font-size: 12px;
+ height: 20px;
+ line-height: 20px;
+ .textOverflow();
+ a {
+ color: @text-color-secondary;
+ display: inline-block;
+ flex: 1 1 0;
+ .textOverflow();
+ &:hover {
+ color: @primary-color;
+ }
+ }
+ .datetime {
+ color: @disabled-color;
+ flex: 0 0 auto;
+ float: right;
+ }
+ }
+ }
+
+ .activities {
+ padding: 0 24px 8px;
+ .username {
+ color: @text-color;
+ }
+ .event {
+ font-weight: normal;
+ }
+ }
+
+ .members {
+ a {
+ display: block;
+ margin: 12px 0;
+ line-height: 24px;
+ height: 24px;
+ .textOverflow();
+ .member {
+ font-size: @font-size-base;
+ color: @text-color;
+ line-height: 24px;
+ max-width: 100px;
+ vertical-align: top;
+ margin-left: 12px;
+ transition: all .3s;
+ display: inline-block;
+ .textOverflow();
+ }
+ &:hover {
+ span {
+ color: @primary-color;
+ }
+ }
+ }
+ }
+
+ .datetime {
+ color: @disabled-color;
+ }
+
+ .links {
+ padding: 20px 0 8px 24px;
+ font-size: 0;
+ > a {
+ color: rgba(0, 0, 0, 0.65);
+ display: inline-block;
+ font-size: 14px;
+ margin-bottom: 13px;
+ width: 25%;
+ }
+ }
+
+ @media screen and (max-width: @screen-xl) and (min-width: @screen-lg) {
+ .active-card {
+ margin-bottom: 24px;
+ }
+ .members {
+ margin-bottom: 0;
+ }
+ .page-extra {
+ margin-left: -44px;
+ & > div {
+ padding: 0 16px;
+ }
+ }
+ }
+
+ @media screen and (max-width: @screen-lg) {
+ .active-card {
+ margin-bottom: 24px;
+ }
+ .members {
+ margin-bottom: 0;
+ }
+ .page-extra {
+ float: none;
+ margin-right: 0;
+ & > div {
+ padding: 0 16px;
+ text-align: left;
+ &:after {
+ display: none;
+ }
+ }
+ }
+ }
+
+ @media screen and (max-width: @screen-md) {
+ .page-extra {
+ margin-left: -16px;
+ }
+ }
+
+ @media screen and (max-width: @screen-sm) {
+ .page-header {
+ display: block;
+ .desc {
+ margin-left: 0;
+ }
+ }
+ .page-extra {
+ & > div {
+ float: none;
+ }
+ }
+ }
+
+ @media screen and (max-width: @screen-xs) {
+ .project-list {
+ .project-grid {
+ width: 100%;
+ }
+ }
+ }
+
+
+
+ .icon-group {
+ transition: color 0.32s;
+ color: @text-color-secondary;
+ cursor: pointer;
+ margin-left: 16px;
+ &:hover {
+ color: @text-color;
+ }
+ }
+
+ .rank-list {
+ padding: 0px 32px 32px 72px;
+ ul {
+ margin-top: 25px;
+ }
+ li {
+ zoom: 1;
+ margin-top: 16px;
+ display: flex;
+ justify-content: space-between;
+ .icon {
+ background-color: #f5f5f5;
+ border-radius: 20px;
+ display: inline-block;
+ font-size: 12px;
+ font-weight: 600;
+ margin-right: 24px;
+ height: 20px;
+ line-height: 20px;
+ width: 20px;
+ text-align: center;
+ }
+ .active {
+ background-color: #314659;
+ color: #fff;
+ }
+ }
+ }
+
+ .sales-extra {
+ display: inline-block;
+ margin-right: 24px;
+ a {
+ margin-left: 24px;
+ }
+ }
+
+ .sales-card {
+ .bar {
+ padding: 0px 0px 32px 32px;
+ }
+ .rank {
+ padding: 0 32px 32px 72px;
+ }
+ .ant-tabs-tab {
+ padding-top: 16px;
+ padding-bottom: 14px;
+ line-height: 24px;
+ }
+
+ .ant-tabs-extra-content {
+ padding-right: 24px;
+ line-height: 55px;
+ }
+
+ .ant-card-head {
+ position: relative;
+ }
+ }
+
+ .sales-card-extra {
+ height: 68px;
+ }
+
+ .sales-type-radio {
+ position: absolute;
+ left: 24px;
+ bottom: 15px;
+ }
+
+ .offline-card {
+ .ant-tabs-ink-bar {
+ bottom: auto;
+ }
+ .ant-tabs-bar {
+ border-bottom: none;
+ }
+ .ant-tabs-nav-container-scrolling {
+ padding-left: 40px;
+ padding-right: 40px;
+ }
+ .ant-tabs-tab-prev-icon:before {
+ position: relative;
+ left: 6px;
+ }
+ .ant-tabs-tab-next-icon:before {
+ position: relative;
+ right: 6px;
+ }
+ }
+
+ .trend-text {
+ margin-left: 8px;
+ color: @heading-color;
+ }
+
+ @media screen and (max-width: @screen-lg) {
+ .sales-extra {
+ display: none;
+ }
+
+ .rank-list {
+ li {
+ span:first-child {
+ margin-right: 8px;
+ }
+ }
+ }
+ }
+
+ @media screen and (max-width: @screen-md) {
+ .rank-title {
+ margin-top: 16px;
+ }
+
+ .sales-card .bar {
+ padding: 16px;
+ }
+ }
+
+ @media screen and (max-width: @screen-sm) {
+ .sales-extra-wrap {
+ display: none;
+ }
+
+ .sales-card {
+ .ant-tabs-content {
+ padding-top: 30px;
+ }
+ }
+ }
+
+ .ant-table-pagination {
+ margin-bottom: 0;
+ }
+}
diff --git a/src/app/routes/environment/management/management.component.ts b/src/app/routes/environment/management/management.component.ts
new file mode 100644
index 0000000..d942dd9
--- /dev/null
+++ b/src/app/routes/environment/management/management.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
+import { _HttpClient } from '@delon/theme';
+import { HttpClient } from '@angular/common/http';
+import * as moment from 'moment';
+import { DeviceService } from '@business/services/http/device.service';
+
+@Component({
+ selector: 'environment-management',
+ templateUrl: './management.component.html',
+ styleUrls: ['./management.component.less'],
+ providers: [DeviceService]
+})
+export class EnvironmentManagementComponent implements OnInit, OnDestroy {
+
+ offlineChartData: any[] = [];
+
+ constructor(
+ private deviceService: DeviceService,
+ private http: _HttpClient,
+ public msg: NzMessageService,
+ private http2: HttpClient) {
+ }
+
+ ngOnInit() {
+ const searchData = [];
+ for (let i = 0; i < 50; i += 1) {
+ searchData.push({
+ index: i + 1,
+ point: `������������-${i}`,
+ value: Math.floor(Math.random() * 100)
+ });
+ }
+
+ const offlineChartData = [];
+ for (let i = 0; i < 20; i += 1) {
+ offlineChartData.push({
+ x: new Date().getTime() + 1000 * 60 * 30 * i,
+ y1: Math.floor(Math.random() * 100) + 10,
+ y2: Math.floor(Math.random() * 100) + 10
+ });
+ }
+ this.offlineChartData = offlineChartData;
+ }
+
+ ngOnDestroy(): void {
+ }
+}
diff --git a/src/app/routes/reports/query/query.component.html b/src/app/routes/reports/query/query.component.html
index ea66909..636f518 100644
--- a/src/app/routes/reports/query/query.component.html
+++ b/src/app/routes/reports/query/query.component.html
@@ -116,76 +116,73 @@
</a>
</div>
</nz-card>
-<nz-card>
- <div nz-row [nzGutter]="16">
- <div nz-col [nzMd]="24">
- <div style="width:100%; text-align:center;">
- <span style="font-size:18px; font-weight: bold;">{{ _tableTitleTemp }}</span>
- </div>
- </div>
- </div>
- <div nz-row [nzGutter]="16">
- <div nz-col [nzMd]="24">
- <nz-table #nzTable [nzScroll]="{ x:tableWidth,y:350 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">
- <ng-template #nzFixedHeader>
- <thead nz-thead>
- <tr>
- <th nz-th [nzWidth]="'160px'" [ngStyle]="{'position': 'relative', 'text-align':'center', 'left':sensorNameScrollLeft+'px'}">
- <span>������������</span>
- </th>
- <th nz-th [nzWidth]="'80px'" *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
- <span>{{ col.text }}</span>
- </th>
- </tr>
- </thead>
- </ng-template>
- <tbody nz-tbody>
- <tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (click)="switchSensor(i)" (mouseover)="sensorTableFocus(i)"
- (mouseout)="sensorTableBlur(i)" [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}">
- <td nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF'}">
- <span>
- <span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span>
- <i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>
- </span>
- </td>
- <td nz-td *ngFor="let col of grid.columns,index as n" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
- <span [ngSwitch]="col.type">
- <!-- ������������������������������������ -->
- <span title="{{ row.data[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"
- *ngSwitchDefault> {{ row.data[n]|tyepHandle:col:row }} </span>
- <!-- ������������������������������������ -->
- </span>
- </td>
- </tr>
- </tbody>
- </nz-table>
-
- <!--
- <div *ngIf="grid.data.length>0" [ngClass]="{'table-scroll':true,'table-scroll-box-shadow': sensorNameScrollLeft>2 }" style="position: absolute; top:0;">
- <nz-table #nzTable [nzDataSource]="grid.data" [nzIsPagination]="false">
- <thead nz-thead>
- <tr>
- <th nz-th [nzWidth]="'160px'" style="text-align:center; position:relative; display:block; z-index:9;">
- <span>������������</span>
- </th>
- </tr>
- </thead>
- <tbody nz-tbody [ngStyle]="{'top':sensorNameScrollTop+'px'}" style="position: relative; z-index:7; display:block;">
- <tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (mouseover)="sensorTableFocus(i)" (mouseout)="sensorTableBlur(i)"
- [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}"
- (click)="switchSensor(i)">
- <td nz-td class='sensor-name' [ngStyle]="{'width':'160px','text-align': 'center'}">
- <span>
- <span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span>
- <i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>
- </span>
- </td>
- </tr>
- </tbody>
- </nz-table>
- </div>
- -->
-
- </div>
- </div>
-</nz-card>
+<!--<nz-card>-->
+ <!--<div nz-row [nzGutter]="16">-->
+ <!--<div nz-col [nzMd]="24">-->
+ <!--<div style="width:100%; text-align:center;">-->
+ <!--<span style="font-size:18px; font-weight: bold;">{{ _tableTitleTemp }}</span>-->
+ <!--</div>-->
+ <!--</div>-->
+ <!--</div>-->
+ <!--<div nz-row [nzGutter]="16">-->
+ <!--<div nz-col [nzMd]="24">-->
+ <!--<nz-table #nzTable [nzScroll]="{ x:tableWidth,y:350 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">-->
+ <!--<ng-template #nzFixedHeader>-->
+ <!--<thead nz-thead>-->
+ <!--<tr>-->
+ <!--<th nz-th [nzWidth]="'160px'" [ngStyle]="{'position': 'relative', 'text-align':'center', 'left':sensorNameScrollLeft+'px'}">-->
+ <!--<span>������������</span>-->
+ <!--</th>-->
+ <!--<th nz-th [nzWidth]="'80px'" *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">-->
+ <!--<span>{{ col.text }}</span>-->
+ <!--</th>-->
+ <!--</tr>-->
+ <!--</thead>-->
+ <!--</ng-template>-->
+ <!--<tbody nz-tbody>-->
+ <!--<tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (click)="switchSensor(i)" (mouseover)="sensorTableFocus(i)"-->
+ <!--(mouseout)="sensorTableBlur(i)" [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}">-->
+ <!--<td nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF'}">-->
+ <!--<span>-->
+ <!--<span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span> -->
+ <!--<i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>-->
+ <!--</span>-->
+ <!--</td>-->
+ <!--<td nz-td *ngFor="let col of grid.columns,index as n" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">-->
+ <!--<span [ngSwitch]="col.type">-->
+ <!--<!– ������������������������������������ –>-->
+ <!--<span title="{{ row.data[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"-->
+ <!--*ngSwitchDefault> {{ row.data[n]|tyepHandle:col:row }} </span>-->
+ <!--<!– ������������������������������������ –>-->
+ <!--</span>-->
+ <!--</td>-->
+ <!--</tr>-->
+ <!--</tbody>-->
+ <!--</nz-table>-->
+ <!---->
+ <!--<div *ngIf="grid.data.length>0" [ngClass]="{'table-scroll':true,'table-scroll-box-shadow': sensorNameScrollLeft>2 }" style="position: absolute; top:0;">-->
+ <!--<nz-table #nzTable [nzDataSource]="grid.data" [nzIsPagination]="false">-->
+ <!--<thead nz-thead>-->
+ <!--<tr>-->
+ <!--<th nz-th [nzWidth]="'160px'" style="text-align:center; position:relative; display:block; z-index:9;">-->
+ <!--<span>������������</span>-->
+ <!--</th>-->
+ <!--</tr>-->
+ <!--</thead>-->
+ <!--<tbody nz-tbody [ngStyle]="{'top':sensorNameScrollTop+'px'}" style="position: relative; z-index:7; display:block;">-->
+ <!--<tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (mouseover)="sensorTableFocus(i)" (mouseout)="sensorTableBlur(i)"-->
+ <!--[ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}"-->
+ <!--(click)="switchSensor(i)">-->
+ <!--<td nz-td class='sensor-name' [ngStyle]="{'width':'160px','text-align': 'center'}">-->
+ <!--<span>-->
+ <!--<span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span> -->
+ <!--<i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>-->
+ <!--</span>-->
+ <!--</td>-->
+ <!--</tr>-->
+ <!--</tbody>-->
+ <!--</nz-table>-->
+ <!--</div>-->
+ <!--</div>-->
+ <!--</div>-->
+<!--</nz-card>-->
diff --git a/src/app/routes/reports/reports.module.ts b/src/app/routes/reports/reports.module.ts
index d5c29d7..9116760 100644
--- a/src/app/routes/reports/reports.module.ts
+++ b/src/app/routes/reports/reports.module.ts
@@ -7,6 +7,7 @@
import { DemoComponent } from './demo/demo.component';
import { ExcelComponent } from './excel/excel.component';
import { QueryComponent } from './query/query.component';
+import { Query2Component } from './query2/query2.component';
import { PipeModule } from '@business/pipe/pipe.module';
import { NzTreeModule } from 'ng-tree-antd';
import { NgxEchartsModule } from 'ngx-echarts';
@@ -26,6 +27,7 @@
{ path: 'demo', component: DemoComponent },
{ path: 'excel', component: ExcelComponent },
{ path: 'alarm', component: AlarmComponent },
+ { path: 'query2', component: Query2Component },
]
}
];
@@ -48,7 +50,8 @@
DemoComponent,
ExcelComponent,
AlarmComponent,
- QueryComponent
+ QueryComponent,
+ Query2Component
],
providers: [SensorsService, NzMessageService, AreacodeService,
MonitorPointService, DeviceService, DateService],
diff --git a/src/app/routes/routes-routing.module.ts b/src/app/routes/routes-routing.module.ts
index 6846a3e..549b3bc 100644
--- a/src/app/routes/routes-routing.module.ts
+++ b/src/app/routes/routes-routing.module.ts
@@ -18,6 +18,7 @@
import { MonitorpointComponent } from 'app/routes/statistics/monitorpoint/monitorpoint.component';
import { CalendarComponent } from 'app/routes/statistics/calendar/calendar.component';
import { AnalysisComponent } from 'app/routes/statistics/analysis/analysis.component';
+import { EnvironmentManagementComponent } from 'app/routes/environment/management/management.component';
const routes: Routes = [
{
@@ -45,7 +46,9 @@
{ path: 'statistics/monitorpoint', component: MonitorpointComponent },
{ path: 'statistics/calendar', component: CalendarComponent },
- { path: 'statistics/analysis', component: AnalysisComponent }
+ { path: 'statistics/analysis', component: AnalysisComponent },
+
+ { path: 'environment/management', component: EnvironmentManagementComponent }
]
}, // passport
{
diff --git a/src/app/routes/routes.module.ts b/src/app/routes/routes.module.ts
index 42d8ebe..d405319 100644
--- a/src/app/routes/routes.module.ts
+++ b/src/app/routes/routes.module.ts
@@ -18,6 +18,7 @@
import { MonitorpointComponent } from './statistics/monitorpoint/monitorpoint.component';
import { CalendarComponent } from './statistics/calendar/calendar.component';
import { AnalysisComponent } from './statistics/analysis/analysis.component';
+import { EnvironmentManagementComponent } from './environment/management/management.component';
// Statics
import 'rxjs/add/observable/throw';
@@ -46,7 +47,8 @@
PollutionManagementComponent,
MonitorpointComponent,
CalendarComponent,
- AnalysisComponent
+ AnalysisComponent,
+ EnvironmentManagementComponent
],
providers: [
_HttpClient,
diff --git a/src/app/routes/statistics/analysis/analysis.component.html b/src/app/routes/statistics/analysis/analysis.component.html
index 9f31405..471c02b 100644
--- a/src/app/routes/statistics/analysis/analysis.component.html
+++ b/src/app/routes/statistics/analysis/analysis.component.html
@@ -1,45 +1,41 @@
+<div nz-row [nzGutter]="24" class="pt-lg">
+ <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
+ <chart-card [title]="'API������������'" total="216���" contentHeight="46px">
+ <mini-progress height="46" percent="60" target="60" strokeWidth="8" color="#13C2C2"></mini-progress>
+ </chart-card>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
+ <chart-card [title]="'PM2.5������������'" total="158���" contentHeight="46px">
+ <mini-progress height="46" percent="50" target="50" strokeWidth="8" color="#108ee9"></mini-progress>
+ </chart-card>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="8">
+ <chart-card [title]="'PM10������������'" total="112���" contentHeight="46px">
+ <mini-progress height="46" percent="40" target="40" strokeWidth="8" color="#00a854"></mini-progress>
+ </chart-card>
+ </div>
+</div>
<div nz-row [nzGutter]="24">
<div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
- <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;">
- <ng-template #extra>
- <div class="sales-card-extra">
- <div class="sales-type-radio">
- <nz-radio-group [(ngModel)]="salesType" (ngModelChange)="changeSaleType()" [nzSize]="'large'">
- <label nz-radio-button [nzValue]="'1'"><span>PM2.5</span></label>
- <label nz-radio-button [nzValue]="'2'"><span>PM10</span></label>
- <label nz-radio-button [nzValue]="'3'"><span>SO2</span></label>
- <label nz-radio-button [nzValue]="'4'"><span>NO3</span></label>
- <label nz-radio-button [nzValue]="'5'"><span>O3</span></label>
- <label nz-radio-button [nzValue]="'6'"><span>CO</span></label>
- </nz-radio-group>
- </div>
- </div>
+ <nz-card [nzTitle]="nzTitle1" [nzBordered]="false">
+ <ng-template #nzTitle1>
+ ������������
+ <span class="text-md font-weight-normal" style="color:red">PM2.5</span>
</ng-template>
- <ng-template #body>
- <h4 class="margin:8px 0 32px 0;">������������������</h4>
-
- <nz-table #keyTable [nzDataSource]="data.searchData" [nzPageSize]="5" nzSize="small">
- <thead nz-thead>
- <tr>
- <th nz-th><span>������</span></th>
- <th nz-th><span>������������</span></th>
- <th nz-th class="text-right">
- <span>������������ mg/m3</span>
- <nz-table-sort (nzValueChange)="sort('count',$event)"></nz-table-sort>
- </th>
- </tr>
- </thead>
- <tbody nz-tbody>
- <tr nz-tbody-tr *ngFor="let i of keyTable.data">
- <td nz-td>{{i.index}}</td>
- <td nz-td><a (click)="msg.success(i.point)">{{i.point}}</a></td>
- <td nz-td class="text-right">{{i.value}}</td>
- </tr>
- </tbody>
- </nz-table>
- </ng-template>
+ <timeline [data]="offlineChartData1" [height]="239" [padding]="[0, 0, 0, 0]" [titleMap]="{ y1: '������������', y2: '������������' }"></timeline>
</nz-card>
</div>
</div>
+<div nz-row [nzGutter]="24">
+ <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
+ <nz-card [nzTitle]="nzTitle2" [nzBordered]="false">
+ <ng-template #nzTitle2>
+ ������������
+ <span class="text-md font-weight-normal" style="color:red">PM10</span>
+ </ng-template>
+ <timeline [data]="offlineChartData2" [height]="239" [padding]="[0, 0, 0, 0]" [titleMap]="{ y1: '������������', y2: '������������' }"></timeline>
+ </nz-card>
+ </div>
+</div>
diff --git a/src/app/routes/statistics/analysis/analysis.component.ts b/src/app/routes/statistics/analysis/analysis.component.ts
index 1640b6e..4426108 100644
--- a/src/app/routes/statistics/analysis/analysis.component.ts
+++ b/src/app/routes/statistics/analysis/analysis.component.ts
@@ -13,7 +13,8 @@
})
export class AnalysisComponent implements OnInit, OnDestroy {
- data: any = {};
+ offlineChartData1: any[] = [];
+ offlineChartData2: any[] = [];
constructor(
private deviceService: DeviceService,
@@ -23,34 +24,24 @@
}
ngOnInit() {
- const searchData = [];
- for (let i = 0; i < 50; i += 1) {
- searchData.push({
- index: i + 1,
- point: `������������-${i}`,
- value: Math.floor(Math.random() * 100)
+ const offlineChartData1 = [];
+ const offlineChartData2 = [];
+ for (let i = 0; i < 20; i += 1) {
+ offlineChartData1.push({
+ x: new Date().getTime() + 1000 * 60 * 30 * i,
+ y1: Math.floor(Math.random() * 100) + 10,
+ y2: Math.floor(Math.random() * 100) + 10
+ });
+ offlineChartData2.push({
+ x: new Date().getTime() + 1000 * 60 * 30 * i,
+ y1: Math.floor(Math.random() * 100) + 10,
+ y2: Math.floor(Math.random() * 100) + 10
});
}
-
- this.data = {
- searchData: searchData
- };
+ this.offlineChartData1 = offlineChartData1;
+ this.offlineChartData2 = offlineChartData2;
}
ngOnDestroy(): void {
- }
-
- sort(sortName, sortValue) {
- this.data.searchData = [
- ...(<any[]>this.data.searchData).sort((a, b) => {
- if (a[sortName] > b[sortName]) {
- return (sortValue === 'ascend') ? 1 : -1;
- } else if (a[sortName] < b[sortName]) {
- return (sortValue === 'ascend') ? -1 : 1;
- } else {
- return 0;
- }
- })
- ];
}
}
diff --git a/src/app/routes/statistics/calendar/calendar.component.html b/src/app/routes/statistics/calendar/calendar.component.html
index 9f31405..121743b 100644
--- a/src/app/routes/statistics/calendar/calendar.component.html
+++ b/src/app/routes/statistics/calendar/calendar.component.html
@@ -1,45 +1,75 @@
-<div nz-row [nzGutter]="24">
- <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24">
- <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;">
- <ng-template #extra>
- <div class="sales-card-extra">
- <div class="sales-type-radio">
- <nz-radio-group [(ngModel)]="salesType" (ngModelChange)="changeSaleType()" [nzSize]="'large'">
- <label nz-radio-button [nzValue]="'1'"><span>PM2.5</span></label>
- <label nz-radio-button [nzValue]="'2'"><span>PM10</span></label>
- <label nz-radio-button [nzValue]="'3'"><span>SO2</span></label>
- <label nz-radio-button [nzValue]="'4'"><span>NO3</span></label>
- <label nz-radio-button [nzValue]="'5'"><span>O3</span></label>
- <label nz-radio-button [nzValue]="'6'"><span>CO</span></label>
- </nz-radio-group>
- </div>
+<div nz-row [nzGutter]="24" style="padding: 20px">
+ <div nz-col nzXs="24" nzSm="12" nzMd="24" nzLg="9">
+ <div nz-form-control nz-col [nzSm]="20">
+ <nz-datepicker></nz-datepicker>
+ </div>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="24" nzLg="15">
+ <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+ <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
+ <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+ <div style="height: 40px;" class="h2 mt0">100</div>
+ <p class="text-nowrap mb0">AQI</p>
</div>
- </ng-template>
- <ng-template #body>
- <h4 class="margin:8px 0 32px 0;">������������������</h4>
-
- <nz-table #keyTable [nzDataSource]="data.searchData" [nzPageSize]="5" nzSize="small">
- <thead nz-thead>
- <tr>
- <th nz-th><span>������</span></th>
- <th nz-th><span>������������</span></th>
- <th nz-th class="text-right">
- <span>������������ mg/m3</span>
- <nz-table-sort (nzValueChange)="sort('count',$event)"></nz-table-sort>
- </th>
- </tr>
- </thead>
- <tbody nz-tbody>
- <tr nz-tbody-tr *ngFor="let i of keyTable.data">
- <td nz-td>{{i.index}}</td>
- <td nz-td><a (click)="msg.success(i.point)">{{i.point}}</a></td>
- <td nz-td class="text-right">{{i.value}}</td>
- </tr>
- </tbody>
- </nz-table>
- </ng-template>
- </nz-card>
+ </div>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+ <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
+ <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+ <div style="height: 40px;" class="h2 mt0">30 ���</div>
+ <p class="text-nowrap mb0">������</p>
+ </div>
+ </div>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+ <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
+ <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+ <div style="height: 40px;" class="h2 mt0">2.5</div>
+ <p class="text-nowrap mb0">������</p>
+ </div>
+ </div>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+ <div nz-row nzType="flex" nzAlign="middle" class="bg-pink rounded-md">
+ <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+ <div style="height: 40px;" class="h2 mt0">78 mg/m��</div>
+ <p class="text-nowrap">PM2.5</p>
+ </div>
+ </div>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+ <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
+ <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+ <div style="height: 40px;" class="h2 mt0">100</div>
+ <p class="text-nowrap mb0">AQI</p>
+ </div>
+ </div>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+ <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
+ <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+ <div style="height: 40px;" class="h2 mt0">30 ���</div>
+ <p class="text-nowrap mb0">������</p>
+ </div>
+ </div>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+ <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
+ <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+ <div style="height: 40px;" class="h2 mt0">2.5</div>
+ <p class="text-nowrap mb0">������</p>
+ </div>
+ </div>
+ </div>
+ <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
+ <div nz-row nzType="flex" nzAlign="middle" class="bg-pink rounded-md">
+ <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">
+ <div style="height: 40px;" class="h2 mt0">78 mg/m��</div>
+ <p class="text-nowrap">PM2.5</p>
+ </div>
+ </div>
+ </div>
</div>
</div>
diff --git a/src/app/routes/statistics/calendar/calendar.component.ts b/src/app/routes/statistics/calendar/calendar.component.ts
index 77ed98b..c7fc7c6 100644
--- a/src/app/routes/statistics/calendar/calendar.component.ts
+++ b/src/app/routes/statistics/calendar/calendar.component.ts
@@ -23,34 +23,9 @@
}
ngOnInit() {
- const searchData = [];
- for (let i = 0; i < 50; i += 1) {
- searchData.push({
- index: i + 1,
- point: `������������-${i}`,
- value: Math.floor(Math.random() * 100)
- });
- }
- this.data = {
- searchData: searchData
- };
}
ngOnDestroy(): void {
- }
-
- sort(sortName, sortValue) {
- this.data.searchData = [
- ...(<any[]>this.data.searchData).sort((a, b) => {
- if (a[sortName] > b[sortName]) {
- return (sortValue === 'ascend') ? 1 : -1;
- } else if (a[sortName] < b[sortName]) {
- return (sortValue === 'ascend') ? -1 : 1;
- } else {
- return 0;
- }
- })
- ];
}
}
diff --git a/src/assets/app-data.json b/src/assets/app-data.json
index ec77c1c..083dcb7 100644
--- a/src/assets/app-data.json
+++ b/src/assets/app-data.json
@@ -27,17 +27,7 @@
{
"text": "������������",
"icon": "icon-directions",
- "children": [
- {
- "text": "������������",
- "link": "/"
- }
- ,
- {
- "text": "������",
- "link": "/"
- }
- ]
+ "link": "/environment/management"
},
{
"text": "������������",
@@ -75,7 +65,7 @@
"link": "/statistics/calendar"
}, {
"text": "������������������",
- "link": "/statistics/monitorpoint"
+ "link": "/reports/query2"
}]
},
{
--
Gitblit v1.8.0