一些修改

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

-<!--<page-header>-->
-  <!--<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]="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>-->
-<div class="topDetailHeader">
-  <div class="leftPart">
-    <div class="oneLine" *ngFor="let one of leftItems">
-      <img class="oneIcon" [src]="'../../../../../assets/img/' + one.icon + '.png' ">
-      <div class="oneLabel">{{one.label}}</div>
-      <div class="oneValue">{{base[one.value]}}{{one.per ? '(' + one.per + ')' : ''}}</div>
+<div class="detailFull">
+  <div class="topDetailHeader">
+    <div class="leftPart">
+      <div class="oneLine" *ngFor="let one of leftItems">
+        <img class="oneIcon" [src]="'../../../../../assets/img/' + one.icon + '.png' ">
+        <div class="oneLabel">{{one.label}}</div>
+        <div class="oneValue">{{base[one.value]}}{{one.per ? '(' + one.per + ')' : ''}}</div>
+      </div>
     </div>
-  </div>
-  <div class="rightPart">
-    <div class="rightLine per100">
-      <img class="rightIcon" [src]="!base.tiltWarn || !base.locker || base.locker !== '1.0' ? '../../../../../assets/img/8.png' : '../../../../../assets/img/5.png'">
-      <div [class]="!base.tiltWarn || !base.locker || base.locker !== '1.0' ? 'rightLabel danger' : 'rightLabel success'">{{!base.tiltWarn ? '铁塔倾斜异常,请及时查看' : !base.locker || base.locker !== '1.0' ? '铁塔门状态异常,请及时查看' : '铁塔运行正常,未发生异常报警'}}</div>
-    </div>
-    <div class="rightLine per50">
-      <img class="rightIcon" [src]="!base.tiltWarn ? '../../../../../assets/img/9.png' : '../../../../../assets/img/6.png'">
-      <span class="descLabel">倾斜角度</span>
-      <div [class]="!base.tiltWarn ? 'rightLabel danger' : 'rightLabel success'">{{base.tilt}}(°)</div>
-    </div>
-    <div class="rightLine per50">
-      <img class="rightIcon" [src]="!base.locker || base.locker !== '1.0' ? '../../../../../assets/img/10.png' : '../../../../../assets/img/7.png'">
-      <span class="descLabel">门状态</span>
-      <div [class]="!base.locker || base.locker !== '1.0' ? 'rightLabel danger' : 'rightLabel success'">{{base.locker === '1.0' ? '正常-关' : '异常-开'}}</div>
+    <div class="rightPart">
+      <div class="rightLine per100">
+        <img class="rightIcon"
+             [src]="!base.tiltWarn || !base.locker || base.locker !== '1.0' ? '../../../../../assets/img/8.png' : '../../../../../assets/img/5.png'">
+        <div
+          [class]="!base.tiltWarn || !base.locker || base.locker !== '1.0' ? 'rightLabel danger' : 'rightLabel success'">{{!base.tiltWarn ? '铁塔倾斜异常,请及时查看' : !base.locker || base.locker !== '1.0' ? '铁塔门状态异常,请及时查看' : '铁塔运行正常,未发生异常报警'}}</div>
+      </div>
+      <div class="rightLine per50">
+        <img class="rightIcon"
+             [src]="!base.tiltWarn ? '../../../../../assets/img/9.png' : '../../../../../assets/img/6.png'">
+        <span class="descLabel">倾斜角度</span>
+        <div [class]="!base.tiltWarn ? 'rightLabel danger' : 'rightLabel success'">{{base.tilt}}(°)</div>
+      </div>
+      <div class="rightLine per50">
+        <img class="rightIcon"
+             [src]="!base.locker || base.locker !== '1.0' ? '../../../../../assets/img/10.png' : '../../../../../assets/img/7.png'">
+        <span class="descLabel">门状态</span>
+        <div
+          [class]="!base.locker || base.locker !== '1.0' ? 'rightLabel danger' : 'rightLabel success'">{{base.locker === '1.0' ? '正常-关' : '异常-开'}}</div>
+      </div>
     </div>
   </div>
+  <nz-card [nzBordered]="false">
+    <nz-card-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>
 </div>
-<nz-card [nzBordered]="false">
-  <nz-card-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,9 @@
         left: 8px;
       }
     }
+    .detailFull {
+      margin-top: 79px;
+    }
     .echartsPart {
       width: 100%;
       height: 450px;
@@ -40,7 +43,6 @@
       @media screen and (min-width: @screen-md) {
         width: 33.333%;
         min-height: 200px;
-        border-right: 1px solid #ccc;
       }
 
       @media screen and (max-width: @screen-md) {
@@ -60,6 +62,11 @@
       display: inline-block;
       width: calc(35% - 30px);
     }
+    .oneLine {
+      @media screen and (min-width: @screen-md) {
+        border-right: 2px solid #636368;
+      }
+    }
     .oneValue {
       display: inline-block;
       width: calc(64% - 30px);

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

@@ -8,7 +8,7 @@ import { Router } from '@angular/router';
 @Component({
   selector: 'app-profile-advanced',
   templateUrl: './advanced.component.html',
-  styleUrls: ['./advanced.component.less']
+  styleUrls: ['./advanced.component.less'],
   // changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProProfileAdvancedComponent implements OnInit {
@@ -26,18 +26,18 @@ export class ProProfileAdvancedComponent implements OnInit {
     humid: '湿度数据',
     tilt: '倾斜数据',
     month: '近一月',
-    week: '近一周'
+    week: '近一周',
   };
   option = {
     title: {
       text: '',
-      left: 'center'
+      left: 'center',
     },
     tooltip: {
-      trigger: 'axis'
+      trigger: 'axis',
     },
     legend: {
-      data:[]
+      data: [],
     },
     grid: {
       left: '4%',
@@ -48,51 +48,58 @@ export class ProProfileAdvancedComponent implements OnInit {
     xAxis: {
       type: 'category',
       boundaryGap: true,
-      data: []
+      data: [],
     },
     yAxis: {
       type: 'value',
       splitLine: {
-        show: false
-      }
+        show: false,
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ['#F5F7FA', '#fff']
+        }
+      },
     },
     series: [{
       data: [],
       symbol: 'none',
       type: 'line',
       lineStyle: {
-        color: '#0098d9'
-      }
-    }]
+        color: '#0098d9',
+      },
+    }],
   };
   leftItems = [{
     icon: 1,
     label: '名称',
     per: '',
-    value: 'towerName'
+    value: 'towerName',
   }, {
     icon: 2,
     label: '搭建时间',
     per: '',
-    value: 'createTime'
+    value: 'createTime',
   }, {
     icon: 3,
     label: '温度',
     per: '℃',
-    value: 'temp'
+    value: 'temp',
   }, {
     icon: 4,
     label: '湿度',
     per: '%rH',
-    value: 'humid'
+    value: 'humid',
   }, {
     icon: 11,
     label: '网关电量',
     per: '%',
-    value: 'bat'
+    value: 'bat',
   }];
 
-  constructor(public msg: NzMessageService, private http: _HttpClient, private message: NzMessageService, private router: Router) {}
+  constructor(public msg: NzMessageService, private http: _HttpClient, private message: NzMessageService, private router: Router) {
+  }
 
   ngOnInit() {
     this.getBase();
@@ -102,8 +109,8 @@ export class ProProfileAdvancedComponent implements OnInit {
 
   getBase() {
     const req = {
-      sn: "19040999",
-      type: "WTD93RX"
+      sn: '19040999',
+      type: 'WTD93RX',
     };
     this.http.post(environment.baseUrl + '/data/getRealTimeData', req).subscribe((res: any) => {
       this.handle(res, () => {
@@ -122,7 +129,7 @@ export class ProProfileAdvancedComponent implements OnInit {
     const param = ['tilt', 'temp', 'humid'];
     param.map((item, index) => {
       this.getChart(item, 'week', index);
-    })
+    });
   }
 
   getMonthCharts() {
@@ -130,7 +137,7 @@ export class ProProfileAdvancedComponent implements OnInit {
     const param = ['tilt', 'temp', 'humid'];
     param.map((item, index) => {
       this.getChart(item, 'month', index);
-    })
+    });
   }
 
   getChart(item, type, index) {
@@ -138,9 +145,9 @@ export class ProProfileAdvancedComponent implements OnInit {
     const req = {
       endTime: new Date().getTime(),
       parameter: item,
-      sn: "19040999",
+      sn: '19040999',
       startTime: end,
-      type: "WTD93RX"
+      type: 'WTD93RX',
     };
     this.http.post(environment.baseUrl + '/data/getHistoryDataByTime', req).subscribe((res: any) => {
       this.handle(res, () => {
@@ -152,7 +159,7 @@ export class ProProfileAdvancedComponent implements OnInit {
           res.historyData.map((one, i) => {
             data.push(one.value);
             xAxis.push(one.time);
-            if(i === len) {
+            if (i === len) {
               option.series[0].data = data;
               option.xAxis.data = xAxis;
               option.title.text = this.trans[type] + this.trans[item];
@@ -161,12 +168,12 @@ export class ProProfileAdvancedComponent implements OnInit {
               option.tooltip.formatter = '{a}<br/>时间: {b}<br/>数据值: {c}' + res.unit;
               this[type + item] = option;
             }
-          })
+          });
         }
         if (index === 2) {
           this.isLoading = false;
         }
-      })
+      });
     });
   }
 

src/environments/environment.ts

@@ -7,7 +7,7 @@ export const environment = {
   production: false,
   useHash: true,
   hmr: false,
-  baseUrl: 'http://192.168.1.53:8092'
+  baseUrl: 'http://192.168.1.13:8092'
 };
 
 /*