Skip to content

T
towerFront
Commit f8a3c486 authored by van.chen's avatar van.chen
Browse files
Options

加入接口逻辑

parent c8b8e306
Hide whitespace changes
Inline Side-by-side
Showing with 157 additions and 55 deletions
angular.json
View file @ f8a3c486
......@@ -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
View file @ f8a3c486
......@@ -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
View file @ f8a3c486
......@@ -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
View file @ f8a3c486
<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
View file @ f8a3c486
......@@ -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
View file @ f8a3c486
......@@ -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
View file @ f8a3c486
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
View file @ f8a3c486
......@@ -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
View file @ f8a3c486
{
"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
View file @ f8a3c486
......@@ -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
View file @ f8a3c486
......@@ -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
View file @ f8a3c486
......@@ -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
View file @ f8a3c486
......@@ -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
View file @ f8a3c486
......@@ -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
View file @ f8a3c486
......@@ -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">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment