网关正则修改

网关绑定的功能
登录页面
首页

src/app/extra/login/login.component.html

 <div class="mainCon">
+  <div class="title">
+    辉度工业云平台<br>
+  </div>
+  <div class="loginPartOut">
     <div class="loginPart">
       <div class="online">
         <div class="label">用户名</div>
@@ -16,4 +20,5 @@
         <button nz-button nzType="primary" nzBlock (click)="login()">登录</button>
       </div>
     </div>
+  </div>
 </div>

src/app/extra/login/login.component.scss

 .mainCon {
   height: 100%;
   width: 100%;
-  display: flex;
+  //display: flex;
   justify-content:center;
   align-items:Center;
-  background-color: lightgoldenrodyellow;
+  background: url("../../../assets/bg/login.jpg");
+  .title{
+    color: #efefef;
+    display: block;
+    text-align: center;
+    font-size: 30px;
+    padding-top: 80px;
+  }
+  .loginPartOut{
+    width: 1000px;
+    height: 450px;
+    margin: 3% auto;
+    background: url("../../../assets/bg/sbg.jpg");
     .loginPart {
-    width: 400px;
-    height: 300px;
-    margin: auto;
+      width: 300px;
+      height: 500px;
+      //margin: auto;
+      margin-left: 60%;
+      padding-top: 100px;
+      //padding-left: 60%;
+
       .online {
         margin-bottom: 25px;
         .label,.value {
@@ -22,4 +38,5 @@
         }
       }
     }
+  }
 }

src/app/main/home/home.component.html

-111
+<div>
+  <div class="center">
+    <nz-card  class="flag" nzTitle="设备总数" >
+      <p>30012 </p><p>台 </p>
+    </nz-card>
+    <nz-card  class="flag" nzTitle="在线数量" >
+      <p>30012 </p><p>台 </p>
+    </nz-card>
+    <nz-card  class="flag" nzTitle="离线数量" >
+      <p>30012 </p><p>台 </p>
+    </nz-card>
+    <nz-card  class="flag" nzTitle="报警消息" >
+      <p>30012 </p><p>台 </p>
+    </nz-card>
+    <div echarts [options] = "charLineOption" class="demo-chart"></div>
+    <div class= "Statistics"></div>
+    <div class= "Statistics"></div>
+  </div>
+
+    <!--<nz-card style="width:300px;" class="flag" nzTitle="��������" [nzExtra]="extraTemplate">-->
+      <!--<p>21 ��</p>-->
+    <!--</nz-card>-->
+  <div class = "right" >
+    <div echarts [options] = "chartRadarOption" class="demo-chart"></div>
+    <p>Static</p>
+    <div class= "Statistics"></div>
+    <div class= "Statistics"></div>
+  </div>
+
+</div>

src/app/main/home/home.component.scss

+.div2{
+  height: 50%;
+  .flagTop{
+    width: 10%;
+    height: 50%;
+    display: inline-block;
+    vertical-align: top;
+    background-color: #ffffff;
+    margin-right: 1%;
+    margin-left: 1%;
+    border-radius:0 0 10px 10px;
+    .data{
+      // font-size := {{datasize}};
+      position:relative;
+      top:10%;
+    }
+    .title{
+      position:relative;
+      top:10%;
+      color: #bfc0c2;
+      // font-size: 10px;
+    }
+  }
+}
+
+//.div1{
+//  vertical-align: top;
+//  margin-right: 1%;
+//  margin-left: 1%;
+//  .flag{
+//    margin-top: 2%;
+//    display: inline-block;
+//    vertical-align: top;
+//    margin-right: 1%;
+//    margin-left: 1%;
+//  }
+//  .divright{
+//    float: left;
+//    position: relative;
+//    right:-100px;
+//    margin-left: -100px;
+//    width: 100px;
+//    background: gray;
+//  }
+//}
+.center{
+  padding-right  : 50px;
+  display:inline-block;
+  vertical-align: top;
+}
+
+.flag{
+  display: inline-block;
+  width:200px;
+  margin: 10px 10px 15px 10px;
+  border-radius:0 0 10px 10px;
+}
+
+.Statistics{
+  border-radius:10px 10px 10px 10px;
+  width:260px;
+  height: 80px;
+  background-color:azure;
+  margin:auto;
+  margin-top: 10px;
+}
+
+.right{
+  display:inline-block;
+  width:300px;
+  background: white;
+}

src/app/main/home/home.component.ts

@@ -17,10 +17,97 @@ export class HomeComponent implements OnInit {
               private translate: TranslateService, private router: Router) {
   }
 
+  chartRadarOption;
+  charLineOption;
+
   ngOnInit() {
     this.init();
   }
 
   init() {
+    this.chartRadarOption = {
+      title: {
+        text: '浏览器占比变化',
+        subtext: '纯属虚构',
+        top: 10,
+        left: 10
+      },
+      tooltip: {
+        trigger: 'item',
+        backgroundColor : 'rgba(0,0,250,0.2)'
+      },
+      legend: {
+        type: 'scroll',
+        bottom: 10,
+        data: (function (){
+          var list = [];
+          for (var i = 1; i <=28; i++) {
+            list.push(i + 2000 + '');
+          }
+          return list;
+        })()
+      },
+      visualMap: {
+        top: 'middle',
+        right: 10,
+        color: ['blue', 'green'],
+        calculable: true
+      },
+      radar: {
+        indicator : [
+          { text: '离线报警', max: 400},
+          { text: '阈值报警', max: 400},
+          { text: '', max: 400},
+          { text: 'Firefox', max: 400},
+          { text: 'Chrome', max: 400}
+        ]
+      },
+      series : (function (){
+        var series = [];
+        for (var i = 1; i <= 1; i++) {
+          series.push({
+            name:'浏览器',
+            type: 'radar',
+            symbol: 'none',
+            lineStyle: {
+              width: 1
+            },
+            emphasis: {
+              areaStyle: {
+                color: 'rgba(0,250,0,0.3)'
+              }
+            },
+            data:[
+              {
+                value:[
+                  (40 - i) * 10,
+                  (38 - i) * 4 + 60,
+                  i * 5 + 10,
+                  i * 9,
+                  i * i /2
+                ],
+                name: i + 2000 + ''
+              }
+            ]
+          });
+        }
+        return series;
+      })()
+    };
+
+    this.charLineOption = {
+      xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [{
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
+        smooth: true
+      }]
+    };
   }
 }

src/app/main/sensor-detail/sensor-detail.component.html

@@ -144,10 +144,10 @@
         </nz-tab>
         <nz-tab nzTitle="图表">
           <div class="cards">
-            <div class="card" *ngFor="let one of actualData">
+            <div class="card" *ngFor="let one of actualData;let i = index">
               <div class="title">
-                {{one.name}}
-                <div class="rightSpan canClick" (click)="isClose = true">查看数据</div>
+                {{one.alias}}
+                <div class="rightSpan canClick" (click)="OnReqHistroyChart(i)">查看数据</div>
               </div>
               <div class="middle">
                 <div class="left">{{one.value}}{{one.unit === '-' ? '' : one.unit}}</div>
@@ -172,8 +172,7 @@
             <button nz-button class="searchBtn" [nzType]="'primary'" [nzLoading]="isLoading" (click)="onSearch()">
               <span>{{'search' | translate}}</span></button>
             <nz-tabset style="border-top: 1px solid #cccccc">
-              <nz-tab nzTitle="表格">111</nz-tab>
-              <nz-tab nzTitle="图表">222</nz-tab>
+              <nz-tab nzTitle="图表"><div echarts [options] = "chartOption" class="demo-chart"></div></nz-tab>
             </nz-tabset>
             <div class="btnLine">
               <button nz-button class="searchBtn" [nzType]="'default'" [nzLoading]="isLoading" (click)="isClose = false;">

src/app/main/sensor-detail/sensor-detail.component.scss

@@ -20,6 +20,7 @@
 .right {
   text-align: right;
 }
+
 .left, .right {
   width: 50%;
   display: inline-block;

src/app/main/sensor-detail/sensor-detail.component.ts

@@ -5,6 +5,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {fadeIn} from '../../animation/fade-in';
 import {TranslateService} from '@ngx-translate/core';
 import {CheckService} from '../../service/check';
+import {formatDate} from '@angular/common';
 
 @Component({
   selector: 'app-sensor-detail',
@@ -32,6 +33,7 @@ export class SensorDetailComponent implements OnInit {
   probsModels = [];
   topicModels = [];
   actualData = [];
+  histData = [];
   toSeeData = [];
   wayData = [];
   selectTime3 = 24;
@@ -42,6 +44,14 @@ export class SensorDetailComponent implements OnInit {
   try = {};
   sn;
   type;
+  chartOption;
+  historyDate = [];
+  historyData = [];
+  hisDataBeforeNow;
+  hisDataBeforeTime;
+  hisTopicName;
+  hisAlias;
+  hisDevInfo;
 
   constructor(private api: ApiService, private message: NzMessageService, private router: Router, private ck: CheckService,
               private ac: ActivatedRoute, private modalService: NzModalService, private translate: TranslateService) {
@@ -135,7 +145,7 @@ export class SensorDetailComponent implements OnInit {
 
   getCurrent() {
     this.isLoading = true;
-    this.api.data.getRealData([{sn: this.sn, type: this.type}, (data) => {
+    this.api.data.getRealData([{sn: this.sn, type: this.type }, (data) => {
       if (data && data.constructor === Array) {
         this.actualData = data;
       } else {
@@ -144,6 +154,125 @@ export class SensorDetailComponent implements OnInit {
       this.isLoading = false;
     }]);
   }
+  // frank
+  format(timestamp, format) {
+    const date = new Date(timestamp);
+    const o = {
+      'M+': date.getMonth() +1,
+      'd+': date.getDate(),
+      'h+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds(),
+      'q+': Math.floor((date.getMonth() +3) /3),
+      S: date.getMilliseconds(),};
+    let formatString = format;
+    if (/(y+)/.test(format)) {
+      formatString = format.replace(RegExp.$1, (`${date.getFullYear()}`).substr(4 - RegExp.$1.length));
+    }
+    Object.keys(o).forEach((key) => {
+      if (new RegExp(`(${key})`).test(format)) {
+        formatString = formatString.replace(RegExp.$1, RegExp.$1.length === 1 ? o[key] : (`00${o[key]}`).substr(`${o[key]}`.length));
+      }
+      }
+      );
+    return formatString;
+  }
+
+
+  getHistoryData(): void {
+    this.hisTopicName = 'Witium/' + this.type + '/' + this.sn + '/' + 'Data';
+    this.api.data.getHisData([{   alias: this.hisDevInfo.alias, deviceList: [{sn: this.hisDevInfo.SN,
+        type: this.hisDevInfo.dType}], endTime: this.selectTime3 ? new Date().getTime() : this.req3.startTime,
+       offset: 0 - new Date().getTimezoneOffset() / 60,
+        startTime: this.selectTime3 ? new Date().getTime() - this.selectTime3 * 60 * 60 * 1000 : this.req3.startTime,
+        topicName: this.hisTopicName}, (data) => {
+      if (data && data.constructor === Array) {
+        this.historyDate = [];
+        this.historyData = [];
+        this.histData = data;
+        data.map((item, index) => {
+            item.dataList.map((item2, index2) => {
+              // this.message.error(item2.value);
+              // this.message.error(parseFloat(item2.value).toFixed(2));
+              // this.historyDate.push(formatDate(new Date(item2.time), 'yyyy-MM-dd', 'cn'));
+              this.historyDate.push(this.format(item2.time, 'yyyy-MM-dd hh:mm:ss'));
+              this.historyData.push(parseFloat(item2.value).toFixed(2));
+
+            });
+        });
+        this.chartOption = {
+          tooltip: {
+            trigger: 'axis',
+            position: (pt) => {
+              return [pt[0], '10%'];
+            },
+            formatter: (a) => {
+              // console.log(a);
+              return a[0].value + this.hisDevInfo.unit;
+            }
+            // '{c}' + this.hisDevInfo.unit
+          },
+          title: {
+            left: 'center',
+            text: '历史数据图',
+          },
+          toolbox: {
+            feature: {
+              dataZoom: {
+                yAxisIndex: 'none'
+              },
+              restore: {},
+              saveAsImage: {}
+            }
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: this.historyDate,
+          },
+          yAxis: {
+            type: 'value',
+            boundaryGap: [0, '100%'],
+
+          },
+          dataZoom: [{
+            type: 'inside',
+            start: 0,
+            end: 10
+          }, {
+            start: 0,
+            end: 10,
+            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.' +
+            '3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+            handleSize: '80%',
+            handleStyle: {
+              color: '#fff',
+              shadowBlur: 3,
+              shadowColor: 'rgba(0, 0, 0, 0.6)',
+              shadowOffsetX: 2,
+              shadowOffsetY: 2
+            }
+          }],
+          series: [
+            {
+              name: '数据',
+              type: 'line',
+              smooth: true,
+              symbol: 'none',
+              sampling: 'average',
+              itemStyle: {
+                color: 'rgb(0, 86, 145)'
+              },
+              data: this.historyData
+            }
+          ]
+        };
+      } else {
+        this.message.error(data && data.message ? data.message : '获取数据失败');
+      }
+      this.isLoading = false;
+    }]);
+  }
 
   toDetail(one) {
     this.router.navigate(['/app/deviceCenter/sensorMgr/sensorDetail/sensorTopicWay'],
@@ -151,6 +280,7 @@ export class SensorDetailComponent implements OnInit {
   }
 
   onSearch() {
+    this.getHistoryData();
   }
 
   close() {
@@ -272,6 +402,11 @@ export class SensorDetailComponent implements OnInit {
     this.ToSeeList = value;
   }
 
+  OnReqHistroyChart(index) {
+    this.isClose = true;
+    this.hisDevInfo = this.actualData[index];
+  }
+
   onSearchToSee() {
     const req = {
       alias: this.ToSeeList.alias,