所有样式画完

package.json

@@ -39,6 +39,8 @@
     "cordova-plugin-statusbar": "^2.4.2",
     "cordova-plugin-whitelist": "^1.3.3",
     "core-js": "^2.5.4",
+    "echarts": "^4.2.1",
+    "ngx-echarts": "^4.1.0",
     "rxjs": "~6.3.3",
     "web-animations-js": "^2.3.1",
     "zone.js": "~0.8.29"
@@ -88,4 +90,4 @@
       "ios"
     ]
   }
-}
\ No newline at end of file
+}

src/app/app.module.ts

@@ -18,11 +18,19 @@ import { AuthService } from './service/auth.service';
 import { HttpService } from './service/http.service';
 import { TransferService } from './service/transfer.service';
 import { AuthInterceptor } from './service/token.service';
+import { NgxEchartsModule } from 'ngx-echarts';
 
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
+  imports: [
+      BrowserModule,
+    BrowserAnimationsModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    HttpClientModule,
+    NgxEchartsModule
+  ],
   providers: [
     StatusBar,
     SplashScreen,

src/app/home/home.module.ts

@@ -3,6 +3,7 @@ import {CommonModule} from '@angular/common';
 import {IonicModule} from '@ionic/angular';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {NgxEchartsModule} from 'ngx-echarts';
 import {HomePage} from './home.page';
 import {PageOneComponent} from '../main/page-one/page-one.component';
 import {PageTwoComponent} from '../main/page-two/page-two.component';
@@ -18,6 +19,7 @@ import {AlarmListComponent} from '../main/alarm-list/alarm-list.component';
         CommonModule,
         FormsModule,
         IonicModule,
+        NgxEchartsModule,
         RouterModule.forChild([
             {
                 path: '',

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

@@ -7,17 +7,45 @@
     </ion-title>
 </ion-toolbar>
 <ion-content style="font-size: 14px">
-    <div class="card">
-        <div class="left">
-            <img src="../../../assets/icon/favicon.png">
-        </div>
-        <div class="right">
-            <div [class]="item.online === 1 ? 'tag online' : 'tag offline'">
-                {{item.online === 1 ? '在线' : '离线'}}
-            </div>
-            <div class="tag error" *ngIf="item.error === 1">
-                故障
+    <div class="header">
+        <div class="card">
+            <div class="middle">
+                <i class="icofo ioxihuan icon"></i>
+                <div class="left">
+                    <img src="../../../assets/icon/favicon.png">
+                </div>
+                <div class="right">
+                    <div class="item">
+                        设备名称: {{item.x}}
+                    </div>
+                    <div class="item">
+                        设备编号: {{item.y}}
+                    </div>
+                    <div class="item">
+                        报警次数: {{item.z}}
+                    </div>
+                </div>
+                <div class="rightBtn">
+                    <div [class]="item.online === 1 ? 'tag online' : 'tag offline'">
+                        {{item.online === 1 ? '在线' : '离线'}}
+                    </div>
+                    <div class="tag error" *ngIf="item.error === 1" style="margin-top: 5px">
+                        故障
+                    </div>
+                </div>
             </div>
         </div>
     </div>
+    <div class="divideDiv"></div>
+    <div class="pieCharts">
+        <div echarts [options]="pie1" class="pieChart"></div>
+        <div echarts [options]="pie2" class="pieChart"></div>
+        <div echarts [options]="pie3" class="pieChart"></div>
+    </div>
+    <div class="divideDiv"></div>
+    <div class="lineCharts">
+        <div echarts [options]="line1" class="lineChart"></div>
+        <div echarts [options]="line2" class="lineChart"></div>
+        <div echarts [options]="line3" class="lineChart"></div>
+    </div>
 </ion-content>

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

+.header {
+  width: 100%;
+  overflow-y: auto;
+  padding: 5px 10px;
+
+  .card {
+    .top {
+      line-height: 25px;
+      position: relative;
+      border-bottom: 1px solid #ccc;
+
+      .right {
+        position: absolute;
+        right: 10px;
+        top: 0;
+      }
+    }
+
+    .middle {
+      padding: 5px 0;
+      min-height: 90px;
+      position: relative;
+
+      .icon {
+        position: absolute;
+        top: 5px;
+        right: 9px;
+        font-size: 22px;
+        color: #f5222d;
+      }
+
+      .left {
+        width: 90px;
+        height: 100%;
+        display: inline-block;
+        vertical-align: top;
+
+        img {
+          height: 100%;
+          width: 80px;
+        }
+      }
+
+      .right {
+        display: inline-block;
+        width: calc(100% - 90px);
+        line-height: 26px;
+        padding-left: 20px;
+      }
+
+      .rightBtn {
+        width: 50px;
+        position: absolute;
+        right: 0;
+        bottom: 12px;
+      }
+    }
+  }
+}
+
+.pieCharts {
+  width: 100%;
+
+  .pieChart {
+    height: 125px;
+    width: 33.33%;
+    display: inline-block;
+  }
+}
+
+.lineCharts {
+  text-align: center;
+
+  .lineChart {
+    height: 200px;
+    width: 100%;
+    margin-bottom: 3px;
+  }
+}

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

-import {Component, OnInit} from '@angular/core';
+import {Component, ViewChild, OnInit, ElementRef, AfterViewInit} from '@angular/core';
 import {fadeIn} from '../../animations/fade-in';
 import {TransferService} from '../../service/transfer.service';
 import {ActivatedRoute} from '@angular/router';
 
+
 @Component({
     selector: 'app-page-detail',
     templateUrl: './page-detail.component.html',
@@ -10,11 +11,156 @@ import {ActivatedRoute} from '@angular/router';
     animations: [fadeIn]
 })
 export class PageDetailComponent implements OnInit {
+     pie1 = {};
+     pie2 = {};
+     pie3 = {};
+     line1 = {};
+     line2 = {};
+     line3 = {};
 
     constructor(private tf: TransferService, private ar: ActivatedRoute) {
     }
 
-    item;
+    item = {};
+    pieOption = {
+        title: {
+            text: '温度',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+                color: '#555555',
+                fontSize: 16,
+                fontWeight: 'normal'
+            },
+        },
+        series: [{
+            type: 'pie',
+            radius: ['65%', '85%'],
+            avoidLabelOverlap: false,
+            startAngle: 270,
+            color: ['#9f8fc1'],
+            hoverAnimation: false,
+            legendHoverLink: false,
+            label: {
+                normal: {
+                    show: false,
+                    position: 'center'
+                },
+                emphasis: {
+                    show: false
+                }
+            },
+            labelLine: {
+                normal: {
+                    show: false
+                }
+            },
+            data: [{
+                value: 20,
+                itemStyle: {
+                    normal: {
+                        color: '#1890ff'
+                    }
+                }
+
+            }, {
+                value: 20,
+                itemStyle: {
+                    normal: {
+                        color: '#cccccc'
+                    }
+                }
+
+            }]
+        }]
+    };
+
+    lineOption = {
+        backgroundColor: '#293042',
+        grid: {
+            left: 10,
+            top: '10%',
+            bottom: 20,
+            right: 40,
+            containLabel: true
+        },
+        title: {
+            text: '温度',
+            x: 'center',
+            top: '0',
+            textStyle: {
+                color: '#cccccc'
+            }
+        },
+        xAxis: {
+            data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+            boundaryGap: false,
+            axisLine: {
+                show: false
+            },
+            axisLabel: {
+                textStyle: {
+                    color: '#cccccc'
+                }
+            },
+            axisTick: {
+                show: false
+            }
+        },
+        yAxis: {
+            ayisLine: {
+                show: false
+            },
+            axisLabel: {
+                textStyle: {
+                    color: '#cccccc'
+                }
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#cccccc'
+                }
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#cccccc'
+                }
+            }
+        },
+        series: [{
+            type: 'line',
+            smooth: true,
+            symbolSize: 10,
+            animation: false,
+            lineWidth: 1.2,
+            hoverAnimation: false,
+            data: [22.20, 16.82, 27.91, 30.00, 40.90, 32.30, 29.10],
+            symbol: 'circle',
+            itemStyle: {
+                normal: {
+                    color: '#f17a52',
+                    shadowBlur: 40,
+                    label: {
+                        show: true,
+                        position: 'top',
+                        textStyle: {
+                            color: '#f17a52',
+
+                        }
+                    }
+                }
+            },
+            areaStyle: {
+                normal: {
+                    color: '#f17a52',
+                    opacity: 0.08
+                }
+            }
+
+        }
+        ]
+    };
 
     ngOnInit() {
         this.ar.queryParams.subscribe((params) => {
@@ -22,10 +168,42 @@ export class PageDetailComponent implements OnInit {
                 this.item = {
                     name: params.name,
                     online: 1,
-                    error: 1
+                    error: 1,
+                    time: 111,
+                    x: 1,
+                    y: 2,
+                    z: 3
                 };
             }
         });
+        this.initPieCharts();
+        this.initLineCharts();
+    }
+
+    initPieCharts() {
+        const option = JSON.parse(JSON.stringify(this.pieOption));
+        option.title.text = '温度';
+        option.series[0].data[0].value = 75;
+        option.series[0].data[1].value = 25;
+        this.pie1 = JSON.parse(JSON.stringify(option));
+        option.title.text = '湿度';
+        option.series[0].data[0].value = 50;
+        option.series[0].data[1].value = 50;
+        this.pie2 = JSON.parse(JSON.stringify(option));
+        option.title.text = '压力';
+        option.series[0].data[0].value = 25;
+        option.series[0].data[1].value = 75;
+        this.pie3 = JSON.parse(JSON.stringify(option));
+    }
+
+    initLineCharts() {
+        const option = JSON.parse(JSON.stringify(this.lineOption));
+        option.title.text = '温度';
+        this.line1 = JSON.parse(JSON.stringify(option));
+        option.title.text = '湿度';
+        this.line2 = JSON.parse(JSON.stringify(option));
+        option.title.text = '压力';
+        this.line3 = JSON.parse(JSON.stringify(option));
     }
 
     toList() {

src/app/main/page-four/page-four.component.html

@@ -5,23 +5,23 @@
         <img style="height: 100%" src="../../../assets/icon/favicon.png">
       </div>
       <div class="topRight">
-        <div class="rightTop">陈大爷</div>
-        <div class="rightBottom">上海辉度</div>
+        <div class="rightTop">{{user.userName}}</div>
+        <div class="rightBottom">{{user.factoryName}}</div>
       </div>
     </div>
   </div>
   <div class="middleCon">
     <div class="line">
       <div class="label">昵称</div>
-      <div class="text">李银同学</div>
+      <div class="text">{{user.nickName}}</div>
     </div>
     <div class="line">
-      <div class="label">昵称</div>
-      <div class="text">李银同学</div>
+      <div class="label">邮箱</div>
+      <div class="text">{{user.email}}</div>
     </div>
     <div class="line">
       <div class="label">手机号</div>
-      <div class="text">13455872687</div>
+      <div class="text">{{user.phone}}</div>
     </div>
   </div>
   <div class="bottomBtn">

src/app/main/page-four/page-four.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ApiService } from '../../service/api.service';
+import { TransferService } from '../../service/transfer.service';
 
 @Component({
   selector: 'app-page-four',
@@ -8,9 +9,8 @@ import { ApiService } from '../../service/api.service';
 })
 export class PageFourComponent implements OnInit {
 
-  user;
-  resp;
-  constructor(private api: ApiService) { }
+  user: any = {};
+  constructor(private api: ApiService, private tf: TransferService) { }
 
   ngOnInit() {
     this.getSelfInfo();
@@ -19,13 +19,27 @@ export class PageFourComponent implements OnInit {
   getSelfInfo() {
     this.api.user.getSelfInfo(['', (data) => {
       if (data) {
-        console.log(data);
-        this.user = JSON.stringify(data);
+        this.user = data;
       } else {
         this.api.presentMsgToast(data && data.message ? data.message : '登录失败');
       }
     }]);
   }
 
-  loginOut() {}
+  loginOut() {
+    this.api.login.logout(['', (data) => {
+      if (data) {
+        window.localStorage.removeItem('token');
+        this.tf.transfer({
+          to: 'app-extra',
+          from: 'app-home',
+          url: '/extra',
+          hash: '',
+          query: ''
+        });
+      } else {
+        this.api.presentMsgToast(data && data.message ? data.message : '登录失败');
+      }
+    }]);
+  }
 }

src/app/main/page-three/page-three.component.html

 <div class="mainContent" style="text-align: left">
-    <ion-searchbar placeholder="请输入设备名称" mode="ios" clearIcon="close-circle" [(ngModel)]="searchText"
-                   (click)="showHistory = true;" showCancelButton cancelButtonText="取消"
-                   (ionCancel)="cancel()" (ionBlur)="blur()"></ion-searchbar>
+    <div class="searchBar">
+        <div class="inputPart" [ngClass]="{'showBtn': showSearchBtn}">
+            <i class="icofo iosearch searchBarSearchIco"></i>
+            <input type="text" class="searchBarText" (click)="showHistory = true;showSearchBtn = true;"
+                   [(ngModel)]="searchText" placeholder="请输入设备名称" (keyup)="keyup($event)">
+        </div>
+        <div class="buttonPart" *ngIf="showSearchBtn">
+            <span class="cancel" (click)="cancel()">取消</span>
+            <span class="search" style="color: #1890ff" (click)="search()">搜索</span>
+        </div>
+    </div>
     <app-alarm-list *ngIf="!showHistory"></app-alarm-list>
-    <app-search-history *ngIf="showHistory" [history]="history"></app-search-history>
+    <app-search-history *ngIf="showHistory" [history]="history" (oneClick)="historyClick($event)"></app-search-history>
 </div>

src/app/main/page-three/page-three.component.ts

@@ -9,6 +9,7 @@ export class PageThreeComponent implements OnInit {
 
     searchText = '';
     showHistory = false;
+    showSearchBtn = false;
     history: Array<String> = JSON.parse(window.localStorage.getItem('history.three')) || [];
     constructor() {
     }
@@ -16,11 +17,14 @@ export class PageThreeComponent implements OnInit {
     ngOnInit() {
     }
 
+    // 查询框
     cancel() {
         this.searchText = '';
+        this.showHistory = false;
+        this.showSearchBtn = false;
     }
 
-    blur() {
+    search() {
         if (this.searchText) {
             if (this.history.length >= 10) {
                 this.history.pop();
@@ -30,9 +34,18 @@ export class PageThreeComponent implements OnInit {
                 window.localStorage.setItem('history.three', JSON.stringify(this.history));
             }
             console.log('此处进行查询操作');
-        } else {
-            console.log('取消查询');
+            this.showHistory = false;
+            this.showSearchBtn = false;
+        }
+    }
+
+    historyClick(e) {
+        this.searchText = e;
+    }
+
+    keyup(e) {
+        if (e.which === 13) {
+            this.search();
         }
-        this.showHistory = false;
     }
 }

src/app/main/page-two/page-two.component.html

-<div class="mainContent" style="text-align: left">
-  <ion-searchbar placeholder="请输入设备名称" mode="ios" clearIcon="close-circle" [(ngModel)]="searchText"
-                 (click)="showHistory = true;" showCancelButton cancelButtonText="取消"
-                 (ionCancel)="cancel()" (ionBlur)="blur()"></ion-searchbar>
+<div id="pageTwo" class="mainContent" style="text-align: left">
+    <div class="searchBar">
+        <div class="inputPart" [ngClass]="{'showBtn': showSearchBtn}">
+            <i class="icofo iosearch searchBarSearchIco"></i>
+            <input type="text" class="searchBarText" (click)="showHistory = true;showSearchBtn = true;"
+                   [(ngModel)]="searchText" placeholder="请输入设备名称" (keyup)="keyup($event)">
+        </div>
+        <div class="buttonPart" *ngIf="showSearchBtn">
+            <span class="cancel" (click)="cancel()">取消</span>
+            <span class="search" style="color: #1890ff" (click)="search()">搜索</span>
+        </div>
+    </div>
   <app-search-list *ngIf="!showHistory"></app-search-list>
-  <app-search-history *ngIf="showHistory" [history]="history"></app-search-history>
+  <app-search-history *ngIf="showHistory" [history]="history" (oneClick)="historyClick($event)"></app-search-history>
 </div>

src/app/main/page-two/page-two.component.ts

@@ -9,6 +9,7 @@ export class PageTwoComponent implements OnInit {
 
     searchText = '';
     showHistory = false;
+    showSearchBtn = false;
     history: Array<String> = JSON.parse(window.localStorage.getItem('history.two')) || [];
     constructor() {
     }
@@ -16,11 +17,14 @@ export class PageTwoComponent implements OnInit {
     ngOnInit() {
     }
 
+    // 下面为查询框对应的方法
     cancel() {
         this.searchText = '';
+        this.showHistory = false;
+        this.showSearchBtn = false;
     }
 
-    blur() {
+    search() {
         if (this.searchText) {
             if (this.history.length >= 10) {
                 this.history.pop();
@@ -30,9 +34,18 @@ export class PageTwoComponent implements OnInit {
                 window.localStorage.setItem('history.two', JSON.stringify(this.history));
             }
             console.log('此处进行查询操作');
-        } else {
-            console.log('取消查询');
+            this.showHistory = false;
+            this.showSearchBtn = false;
+        }
+    }
+
+    historyClick(e) {
+        this.searchText = e;
+    }
+
+    keyup(e) {
+        if (e.which === 13) {
+            this.search();
         }
-        this.showHistory = false;
     }
 }

src/app/main/search-history/search-history.component.html

@@ -2,5 +2,5 @@
   <div class="title">
     历史搜索记录
   </div>
-  <div class="one" *ngFor="let one of history">{{one}}</div>
+  <div class="one" *ngFor="let one of history" (click)="click(one)">{{one}}</div>
 </div>

src/app/main/search-history/search-history.component.ts

-import {Component, Input, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 
 @Component({
   selector: 'app-search-history',
@@ -8,8 +8,13 @@ import {Component, Input, OnInit} from '@angular/core';
 export class SearchHistoryComponent implements OnInit {
 
   @Input() history = [];
+  @Output() oneClick = new EventEmitter<String>();
   constructor() { }
 
   ngOnInit() {}
 
+  click(one) {
+    this.oneClick.emit(one);
+  }
+
 }

src/app/main/search-list/search-list.component.html

@@ -34,6 +34,7 @@
             </div>
         </div>
         <div class="middle">
+            <i class="icofo ioxihuan icon"></i>
             <div class="left">
                 <img src="../../../assets/icon/favicon.png">
             </div>
@@ -48,6 +49,14 @@
                     压力: {{one.press}}
                 </div>
             </div>
+            <div class="rightBtn">
+                <div [class]="one.online === 1 ? 'tag online' : 'tag offline'">
+                    {{one.online === 1 ? '在线' : '离线'}}
+                </div>
+                <div class="tag error" *ngIf="one.error === 1" style="margin-top: 5px">
+                    故障
+                </div>
+            </div>
         </div>
     </div>
 </div>

src/app/main/search-list/search-list.component.scss

@@ -68,6 +68,14 @@
     .middle {
       padding: 5px 0;
       min-height: 90px;
+      position: relative;
+      .icon {
+        position: absolute;
+        top: 5px;
+        right: 9px;
+        font-size: 22px;
+        color: #f5222d;
+      }
       .left {
         width: 90px;
         height: 100%;
@@ -84,6 +92,12 @@
         line-height: 26px;
         padding-left: 20px;
       }
+      .rightBtn {
+        width: 50px;
+        position: absolute;
+        right: 0;
+        bottom: 12px;
+      }
     }
   }
 }

src/global.scss

@@ -64,29 +64,41 @@ html, body {
   font-size: 14px;
   color: #555555;
 }
+
 html, body {
   width: 100%;
   height: 100%;
 }
 
+*:focus {
+  outline: none;
+}
+img {
+  transform: translate3d(0px, 0px, 0px) scale(1) !important;
+}
+
 $themeColor: #1890ff;
 .msgToast, .btnToast {
   --background: rgba(0, 0, 0, 0.7);
   --color: #ffffff;
   text-align: center;
 }
+
 .partCard {
   padding: 5px 10px 0 10px;
+
   .partTitle {
     text-align: left;
     font-size: 16px;
     padding: 5px;
     border-bottom: 2px solid $themeColor;
     color: $themeColor;
+
     label {
       padding-left: 8px;
     }
   }
+
   .partCon {
     padding: 5px 0 0 0;
   }
@@ -101,6 +113,7 @@ $themeColor: #1890ff;
 .inBox {
   width: 100%;
   height: 100%;
+
   img {
     width: 100% !important;
     height: 100%;
@@ -148,3 +161,49 @@ $themeColor: #1890ff;
   height: 20px;
   border-radius: 10px;
 }
+
+.searchBar {
+  height: 60px;
+  padding: 12px;
+  line-height: 36px;
+  width: 100%;
+  position: relative;
+
+  .inputPart {
+    position: relative;
+    width: 100%;
+    display: inline-block;
+
+    .searchBarSearchIco {
+      position: absolute;
+      top: 0;
+      left: 10px;
+    }
+
+    .searchBarText {
+      width: 100%;
+      border: none;
+      background-color: #ededed;
+      padding-left: 35px;
+      border-radius: 10px;
+    }
+  }
+
+  .inputPart.showBtn {
+    width: calc(100% - 81px);
+  }
+
+  .buttonPart {
+    display: inline-block;
+    .cancel, .search {
+      display: inline-block;
+      width: 40px;
+      text-align: center;
+    }
+  }
+}
+
+.divideDiv {
+  background-color: #f4f4f4;
+  height: 20px;
+}