From e5641578fc31e1326433b99210e85328f9d8faf7 Mon Sep 17 00:00:00 2001
From: 沈斌 <bluelazysb@hotmail.com>
Date: Thu, 12 Jul 2018 15:01:48 +0800
Subject: [PATCH] updates
---
src/app/routes/pollution/management/management.component.ts | 56 ++++++
src/app/routes/routes.module.ts | 5
src/app/routes/routes-routing.module.ts | 5
src/assets/app-data.json | 2
src/app/routes/pollution/management/management.component.html | 45 +++++
src/app/routes/pollution/management/management.component.less | 389 +++++++++++++++++++++++++++++++++++++++++++
6 files changed, 499 insertions(+), 3 deletions(-)
diff --git a/src/app/routes/pollution/management/management.component.html b/src/app/routes/pollution/management/management.component.html
new file mode 100644
index 0000000..9f31405
--- /dev/null
+++ b/src/app/routes/pollution/management/management.component.html
@@ -0,0 +1,45 @@
+
+<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>
+ </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>
+
diff --git a/src/app/routes/pollution/management/management.component.less b/src/app/routes/pollution/management/management.component.less
new file mode 100644
index 0000000..c732176
--- /dev/null
+++ b/src/app/routes/pollution/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/pollution/management/management.component.ts b/src/app/routes/pollution/management/management.component.ts
new file mode 100644
index 0000000..3f97f26
--- /dev/null
+++ b/src/app/routes/pollution/management/management.component.ts
@@ -0,0 +1,56 @@
+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: 'pollution-management',
+ templateUrl: './management.component.html',
+ styleUrls: ['./management.component.less'],
+ providers: [DeviceService]
+})
+export class PollutionManagementComponent implements OnInit, OnDestroy {
+
+ data: 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)
+ });
+ }
+
+ 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/app/routes/routes-routing.module.ts b/src/app/routes/routes-routing.module.ts
index f4719f0..21f6cda 100644
--- a/src/app/routes/routes-routing.module.ts
+++ b/src/app/routes/routes-routing.module.ts
@@ -13,6 +13,7 @@
import { ReportComponent } from './report/report.component';
import { UserLoginComponent } from 'app/routes/passport/login/login.component';
+import { PollutionManagementComponent } from 'app/routes/pollution/management/management.component';
const routes: Routes = [
{
@@ -29,7 +30,9 @@
{ path: 'devices', loadChildren: './devices/devices.module#DevicesModule' },
{ path: 'sensors', loadChildren: './sensors/sensors.module#SensorsModule' },
{ path: 'systems', loadChildren: './systems/systems.module#SystemsModule' },
- { path: 'reports', loadChildren: './reports/reports.module#ReportsModule' }
+ { path: 'reports', loadChildren: './reports/reports.module#ReportsModule' },
+
+ { path: 'pollution/management', component: PollutionManagementComponent }
]
}, // passport
{
diff --git a/src/app/routes/routes.module.ts b/src/app/routes/routes.module.ts
index 776196a..03a10f8 100644
--- a/src/app/routes/routes.module.ts
+++ b/src/app/routes/routes.module.ts
@@ -13,6 +13,8 @@
import { DashboardMonitorComponent } from './dashboard/monitor/monitor.component';
import { DashboardWorkplaceComponent } from './dashboard/workplace/workplace.component';
import { ReportComponent } from './report/report.component';
+import { PollutionManagementComponent } from './pollution/management/management.component';
+
// Statics
import 'rxjs/add/observable/throw';
@@ -35,7 +37,8 @@
DashboardMonitorComponent,
DashboardWorkplaceComponent,
UserLoginComponent,
- ReportComponent
+ ReportComponent,
+ PollutionManagementComponent
],
providers: [
_HttpClient,
diff --git a/src/assets/app-data.json b/src/assets/app-data.json
index 84decc7..e9f980c 100644
--- a/src/assets/app-data.json
+++ b/src/assets/app-data.json
@@ -57,7 +57,7 @@
{
"text": "������������",
"icon": "icon-chemistry",
- "link": "/"
+ "link": "/pollution/management"
},
{
"text": "������������������",
--
Gitblit v1.8.0