加入接口逻辑

angular.json

@@ -34,7 +34,8 @@
               "node_modules/@antv/data-set/dist/data-set.min.js",
               "node_modules/@antv/g2-plugin-slider/dist/g2-plugin-slider.min.js",
               "node_modules/ajv/dist/ajv.bundle.js",
-              "node_modules/qrious/dist/qrious.min.js"
+              "node_modules/qrious/dist/qrious.min.js",
+              "node_modules/echarts/dist/echarts.min.js"
             ]
           },
           "configurations": {

package.json

@@ -29,16 +29,9 @@
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
-    "core-js": "^2.5.4",
-    "rxjs": "~6.3.3",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.8.26",
     "@antv/data-set": "^0.10.1",
     "@antv/g2": "^3.4.8",
     "@antv/g2-plugin-slider": "^2.1.1",
-    "@ngx-translate/core": "^11.0.1",
-    "@ngx-translate/http-loader": "^4.0.0",
-    "ajv": "^6.6.1",
     "@delon/abc": "7.0.0-rc.6",
     "@delon/acl": "7.0.0-rc.6",
     "@delon/auth": "7.0.0-rc.6",
@@ -48,13 +41,22 @@
     "@delon/mock": "7.0.0-rc.6",
     "@delon/theme": "7.0.0-rc.6",
     "@delon/util": "7.0.0-rc.6",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
+    "ajv": "^6.6.1",
+    "core-js": "^2.5.4",
+    "echarts": "^4.2.0-rc.2",
     "file-saver": "^2.0.0",
     "ng-zorro-antd": "^7.0.0-rc.3",
     "ngx-countdown": "^3.1.0",
+    "ngx-echarts": "^4.1.0",
     "ngx-tinymce": "^7.0.0",
     "ngx-ueditor": "^2.1.3",
+    "qrious": "^4.0.2",
+    "rxjs": "~6.3.3",
     "screenfull": "^4.0.0",
-    "qrious": "^4.0.2"
+    "tslib": "^1.9.0",
+    "zone.js": "~0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.12.0",

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { NgModule, LOCALE_ID, APP_INITIALIZER } from '@angular/core';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
+import { NgxEchartsModule } from 'ngx-echarts';
 // #region default language
 // 参考：https://ng-alain.com/docs/i18n
 import { default as ngLang } from '@angular/common/locales/zh';
@@ -102,6 +102,7 @@ import { LayoutModule } from './layout/layout.module';
   declarations: [AppComponent],
   imports: [
     BrowserModule,
+    NgxEchartsModule,
     BrowserAnimationsModule,
     HttpClientModule,
     DelonModule.forRoot(),

src/app/routes/pro/profile/advanced/advanced.component.html

 <page-header [title]="'编号: ' + (base.towerNo || '-')">
-  <nz-alert nzType="success" nzBanner="true" nzMessage="铁塔运行正常,未发生异常报警!" nzShowIcon></nz-alert>
+  <nz-alert *ngIf="base.locker === '1.0' && base.tiltWarn" nzType="success" nzBanner="true" nzMessage="铁塔运行正常,未发生异常报警!" nzShowIcon></nz-alert>
+  <nz-alert *ngIf="base.locker !== '1.0'" nzType="error" nzBanner="true" nzMessage="铁塔门未正常关闭,请及时查看!" nzShowIcon></nz-alert>
+  <nz-alert *ngIf="!base.tiltWarn" nzType="error" nzBanner="true" nzMessage="铁塔倾斜异常,请及时查看!" nzShowIcon></nz-alert>
   <sv-container size="small" col="2">
     <sv label="名称">{{base.towerName}}</sv>
     <sv label="搭建时间">{{base.createTime}}</sv>
-    <sv label="倾斜角度" [type]="'success'"><span style="font-weight: 600;font-size: 18px;">{{base.tilt}}(°)</span></sv>
-    <sv label="门状态" type="success"><span style="font-weight: 600;font-size: 18px;">{{base.locker}}</span></sv>
+    <sv label="倾斜角度" [type]="base.tiltWarn ? 'success' : 'danger'"><span style="font-weight: 600;font-size: 18px;">{{base.tilt}}(°)</span></sv>
+    <sv label="门状态" [type]="base.locker === '1.0' ? 'success' : 'danger'"><span style="font-weight: 600;font-size: 18px;">{{base.locker === '1.0' ? '正常-关' : '异常-开'}}</span></sv>
     <sv label="温度">{{base.temp}}(℃)</sv>
     <sv label="湿度">{{base.humid}}(%rH)</sv>
+    <sv label="网关剩余电量">{{base.bat}}(%)</sv>
+    <sv label="数据最后更新时间">{{base.lastTime | date: 'yyyy-MM-dd HH:mm:ss'}}</sv>
   </sv-container>
 </page-header>
 <nz-card [nzBordered]="false">
   <nz-card-tab>
-    <nz-tabset nzSize="large" (nzSelectChange)="change($event)">
-      <nz-tab nzTitle="一周内"></nz-tab>
-      <nz-tab nzTitle="一月内"></nz-tab>
+    <nz-tabset nzSize="large">
+      <nz-tab nzTitle="一周内">
+        <div class="echartsPart" echarts [options]="weektilt"></div>
+        <div class="echartsPart" echarts [options]="weektemp"></div>
+        <div class="echartsPart" echarts [options]="weekhumid"></div>
+      </nz-tab>
+      <nz-tab nzTitle="一月内">
+        <div class="echartsPart" echarts [options]="monthtilt"></div>
+        <div class="echartsPart" echarts [options]="monthtemp"></div>
+        <div class="echartsPart" echarts [options]="monthhumid"></div>
+      </nz-tab>
     </nz-tabset>
   </nz-card-tab>
 </nz-card>

src/app/routes/pro/profile/advanced/advanced.component.less

@@ -6,6 +6,10 @@
         left: 8px;
       }
     }
+    .echartsPart {
+      width: 100%;
+      height: 450px;
+    }
     nz-alert {
       margin-top: -10px;
       margin-bottom: 15px;

src/app/routes/pro/profile/advanced/advanced.component.ts

@@ -13,50 +13,129 @@ import { environment } from '@env/environment';
 export class ProProfileAdvancedComponent implements OnInit {
   list: any[] = [];
   base: any = {};
-
-  data = {
-    advancedOperation1: [],
-    advancedOperation2: [],
-    advancedOperation3: [],
+  isLoading = false;
+  weektemp: {};
+  weekhumid: {};
+  weektilt: {};
+  monthtemp: {};
+  monthhumid: {};
+  monthtilt: {};
+  trans = {
+    temp: '温度数据',
+    humid: '湿度数据',
+    tilt: '倾斜数据',
+    month: '近一月',
+    week: '近一周'
+  };
+  option = {
+    title: {
+      text: '',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data:[]
+    },
+    grid: {
+      left: '4%',
+      right: '4%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: true,
+      data: []
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        show: false
+      }
+    },
+    series: [{
+      data: [],
+      type: 'line',
+      lineStyle: {
+        color: '#0098d9'
+      }
+    }]
   };
 
-  opColumns: STColumn[] = [
-    { title: '操作类型', index: 'type' },
-    { title: '操作人', index: 'name' },
-    { title: '执行结果', index: 'status', render: 'status' },
-    { title: '操作时间', index: 'updatedAt', type: 'date' },
-    { title: '备注', index: 'memo', default: '-' },
-  ];
 
-  constructor(public msg: NzMessageService, private http: _HttpClient, private cdr: ChangeDetectorRef) {}
+  constructor(public msg: NzMessageService, private http: _HttpClient, private message: NzMessageService) {}
 
   ngOnInit() {
     this.getBase();
-    this.getCharts();
+    this.getWeekCharts();
+    this.getMonthCharts();
   }
 
   getBase() {
-    const req = {};
+    const req = {
+      sn: "19040999",
+      type: "WTD93RX"
+    };
     this.http.post(environment.baseUrl + '/data/getRealTimeData', req).subscribe((res: any) => {
-      console.log(res);
-      this.base = res;
-      // this.data = res;
-      // this.change({ index: 0, tab: null });
-      // this.cdr.detectChanges();
+      if (res && res.towerNo) {
+        this.base = res;
+        this.base.tiltWarn = (res.tilt && Number(res.tilt) < 10) || res.tilt === 'N/A' ? true : false;
+      } else {
+        this.message.error(res.message);
+      }
     });
   }
 
-  getCharts() {
-    const req = {};
-    this.http.post(environment.baseUrl + '/data/getHistoryDataByTime', req).subscribe((res: any) => {
-      console.log(res);
-      // this.data = res;
-      // this.change({ index: 0, tab: null });
-      // this.cdr.detectChanges();
-    });
+  getWeekCharts() {
+    this.isLoading = true;
+    const param = ['tilt', 'temp', 'humid'];
+    param.map((item, index) => {
+      this.getChart(item, 'week', index);
+    })
   }
 
-  change(args: NzTabChangeEvent) {
-    this.list = this.data[`advancedOperation${args.index + 1}`];
+  getMonthCharts() {
+    this.isLoading = true;
+    const param = ['tilt', 'temp', 'humid'];
+    param.map((item, index) => {
+      this.getChart(item, 'month', index);
+    })
+  }
+
+  getChart(item, type, index) {
+    const end = type === 'week' ? new Date().getTime() - 7 * 24 * 3600 * 1000 : new Date().getTime() - 30 * 24 * 3600 * 1000;
+    const req = {
+      endTime: new Date().getTime(),
+      parameter: item,
+      sn: "19040999",
+      startTime: end,
+      type: "WTD93RX"
+    };
+    this.http.post(environment.baseUrl + '/data/getHistoryDataByTime', req).subscribe((res: any) => {
+      if (res.historyData && res.historyData.constructor === Array && res.historyData.length > 0) {
+        const len = res.historyData.length - 1;
+        const data = [];
+        const xAxis = [];
+        const option = JSON.parse(JSON.stringify(this.option));
+        res.historyData.map((one, i) => {
+          data.push(one.value);
+          xAxis.push(one.time);
+          if(i === len) {
+            option.series[0].data = data;
+            option.xAxis.data = xAxis;
+            option.title.text = this.trans[type] + this.trans[item];
+            option.yAxis.name = '数值(' + res.unit + ')';
+            option.series[0].name = this.trans[type] + this.trans[item];
+            option.tooltip.formatter = '{a}: {c}' + res.unit;
+            this[type + item] = option;
+          }
+        })
+      }
+      if (index === 2) {
+        this.isLoading = false;
+      }
+    });
   }
 }

src/app/routes/routes.module.ts

 import { NgModule } from '@angular/core';
+import { NgxEchartsModule } from 'ngx-echarts';
 
 import { SharedModule } from '@shared';
 import { RouteRoutingModule } from './routes-routing.module';
@@ -33,7 +34,7 @@ const COMPONENTS = [
 const COMPONENTS_NOROUNT = [];
 
 @NgModule({
-  imports: [SharedModule, RouteRoutingModule],
+  imports: [SharedModule, NgxEchartsModule, RouteRoutingModule],
   declarations: [...COMPONENTS, ...COMPONENTS_NOROUNT],
   entryComponents: COMPONENTS_NOROUNT
 })

src/app/shared/shared.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { NgxEchartsModule } from 'ngx-echarts';
 // delon
 import { AlainThemeModule } from '@delon/theme';
 import { DelonABCModule } from '@delon/abc';
@@ -34,6 +35,7 @@ const DIRECTIVES = [];
   imports: [
     CommonModule,
     FormsModule,
+    NgxEchartsModule,
     RouterModule,
     ReactiveFormsModule,
     AlainThemeModule.forChild(),

src/assets/tmp/app-data.json

 {
   "app": {
-    "name": "Alain",
+    "name": "中国铁塔",
     "description": "Ng-zorro admin panel front-end framework"
   },
   "user": {
@@ -59,7 +59,7 @@
       ]
     },
     {
-      "text": "Alain",
+      "text": "中国铁塔",
       "i18n": "menu.alain",
       "group": true,
       "hideInBreadcrumb": true,

src/assets/tmp/i18n/en-US.json

@@ -12,7 +12,7 @@
   "menu.dashboard.workplace": "Workplace",
   "menu.shortcut": "Shortcut",
   "menu.widgets": "Widgets",
-  "menu.alain": "Alain",
+  "menu.alain": "China Tower",
   "menu.style": "Style",
   "menu.style.typography": "Typography",
   "menu.style.gridmasonry": "Grid Masonry",

src/assets/tmp/i18n/pl-PL.json

@@ -12,7 +12,7 @@
   "menu.dashboard.workplace": "Miejsce pracy",
   "menu.shortcut": "Skrót",
   "menu.widgets": "Widżety",
-  "menu.alain": "Alain",
+  "menu.alain": "China Tower",
   "menu.style": "Styl",
   "menu.style.typography": "Typografia",
   "menu.style.gridmasonry": "Grid Masonry",

src/assets/tmp/i18n/tr-TR.json

@@ -12,7 +12,7 @@
   "menu.dashboard.workplace": "Çalışma Alanı",
   "menu.shortcut": "Kısayol",
   "menu.widgets": "Araçlar",
-  "menu.alain": "Alain",
+  "menu.alain": "China Tower",
   "menu.style": "Stil",
   "menu.style.typography": "Tipografi",
   "menu.style.gridmasonry": "Masonry Izgara",

src/assets/tmp/i18n/zh-CN.json

@@ -12,7 +12,7 @@
   "menu.dashboard.workplace": "工作台",
   "menu.shortcut": "快捷菜单",
   "menu.widgets": "小部件",
-  "menu.alain": "Alain",
+  "menu.alain": "中国铁塔",
   "menu.style": "样式",
   "menu.style.typography": "字体排印",
   "menu.style.gridmasonry": "瀑布流",

src/assets/tmp/i18n/zh-TW.json

@@ -12,7 +12,7 @@
   "menu.dashboard.workplace": "工作臺",
   "menu.shortcut": "快捷菜單",
   "menu.widgets": "小部件",
-  "menu.alain": "Alain",
+  "menu.alain": "中國鐵塔",
   "menu.style": "樣式",
   "menu.style.typography": "字體排印",
   "menu.style.gridmasonry": "瀑佈流",

src/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>ng-alain</title>
+  <title>中国铁塔</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="x-ua-compatible" content="ie=edge">