报警组件

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^7.2.2",
     "@angular/platform-browser-dynamic": "^7.2.2",
     "@angular/router": "^7.2.2",
+    "@ant-design/icons-angular": "^8.0.0-beta.0",
     "@ionic-native/app-minimize": "^5.5.0",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/local-notifications": "^5.8.0",
@@ -90,4 +91,4 @@
       "ios"
     ]
   }
-}
+}
\ No newline at end of file

src/app/alarm/alarm.page.html

@@ -3,13 +3,25 @@
             (onLeftClick)="onLeftClick()"
             style="background-color: #28c9bd"
     >报警信息</Navbar>
-    <SegmentedControl style="height: 40px" [values]="['今日报警信息', '近一周报警信息']"
-                      (onChange)="choose($event)"></SegmentedControl>
+
+    <!--<SegmentedControl class = "nav-title" [values]="['今日报警信息', '近一周报警信息']"-->
+                      <!--(onChange)="choose($event)"></SegmentedControl>-->
+
+    <ion-segment class = "nav-title" (ionChange)="choose($event)" color="secondary">
+        <ion-segment-button value="day">
+            <ion-label>今日报警信息</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="week">
+            <ion-label>近一周报警信息</ion-label>
+        </ion-segment-button>
+    </ion-segment>
+
     <div class="alarmCon">
-        <div class="alarmItem" *ngFor="let one of data">
-            {{one.con}}
-            <div class="right">
-                {{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}
+        <div class="alarmItemBefore" *ngIf="itemExit;else other_content">
+            <div class="alarmItem" *ngFor="let one of data">
+                <i class="vo v-shebeiguanli1"></i><span class = "title">设备名称 : </span><span>{{one.name}}</span><br>
+                <i class="vo v-guzhang"></i><span class = "title">故障内容 : </span><span>{{one.con}}</span><br>
+                <i class="vo v-rili"></i><span class = "title">发生时间 : </span><span>{{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}</span><br>
             </div>
         </div>
     </div>
@@ -17,3 +29,10 @@
 <ng-template #icon>
     <span class="vo v-back"></span>
 </ng-template>
+
+<ng-template #other_content>
+    <div class="empty-content">
+        <i class="vo v-shebeiguanli1"></i><br><br>
+        <span class="empty">没有报警信息</span>
+    </div>
+</ng-template>

src/app/alarm/alarm.page.scss

 .alarmItem {
   min-height: 40px;
-  line-height: 40px;
-  padding: 0 10px;
+  line-height: 30px;
+  padding: 0px 10px 15px 10px;
   margin: 0 10px;
   border-bottom: 1px solid #ccc;
   font-size: 14px;
@@ -13,3 +13,25 @@
   color: #aaa;
   line-height: 25px;
 }
+
+.title{
+  color: #aaa;
+  padding-left: 1em;
+}
+
+.nav-title{
+  height: 40px;
+  border-bottom: 1px solid #ccc;
+}
+
+.empty-content{
+  text-align: center;
+  padding-top: 8em;
+  padding-bottom: 8em;
+  font-size: 16px;
+  .vo{
+    padding-top: 2em;
+    margin-top: 2em;
+    font-size: 32px;
+  }
+}
\ No newline at end of file

src/app/alarm/alarm.page.ts

 import {Component, OnInit} from '@angular/core';
 import {Transfer} from '../service/transfer';
+import {Api} from '../service/api';
+import {Load} from '../service/load';
 
 @Component({
     selector: 'v-alarm',
@@ -8,34 +10,101 @@ import {Transfer} from '../service/transfer';
 })
 export class AlarmPage implements OnInit {
 
-    constructor(private tf: Transfer) {
+    constructor(private tf: Transfer, private api: Api, private load: Load) {
     }
 
+    req  = {startTime: 0, endTime: 0};
+
+    itemExit = false;
+
     data = [
-        {time: 1506743279334, con: '11111111111111111111111'},
-        {time: 1506743273434, con: '22222222222222222222222'},
-        {time: 1506743212334, con: '33333333333333333333333'},
-        {time: 1506743314334, con: '44444444444444444444444'}
+        {time: 1506743279334, con: '11111111111111111111111', name: '池子名字'},
+        {time: 1506743273434, con: '22222222222222222222222', name: '池子名字'},
+        {time: 1506743212334, con: '33333333333333333333333', name: '池子名字'},
+        {time: 1506743314334, con: '44444444444444444444444', name: '池子名字'}
     ];
 
     ngOnInit() {
+        this.getData();
+    }
+
+    getData() {
+        this.load.toLoad('加载中...', false);
+        setTimeout(() => {
+            this.getAlarmOneDay();
+            this.load.offLoad();
+        }, 2000);
+    }
+
+    getAlarmOneWeek() {
+        this.req.endTime = new Date().getTime();
+        this.req.startTime = new Date().getTime() - 7 * 24 * 3600 * 1000;
+
+        const req = {
+            endTime: this.req.endTime,
+            startTime: this.req.startTime
+        };
+        this.api.alarm.getAlarmByTerm([req, (data) => {
+            this.data = [];
+            if (data && data.constructor === Array) {
+                console.log(data.length);
+                if (data.length > 0) {
+                    this.itemExit = true;
+                } else {
+                    this.itemExit = false;
+                }
+                data.map((value, index) => {
+                    const it = {time: 1506743279334, con: '11111111111111111111111', name: '池子名字'};
+                    it.con = value.description;
+                    it.time = value.alarmTime;
+                    it.name = value.fieldRegionName;
+
+                    this.data.push(it);
+                });
+            } else {
+                this.itemExit = false;
+            }
+        }]);
     }
 
+    getAlarmOneDay() {
+        this.req.endTime = new Date().getTime();
+        this.req.startTime = new Date().getTime() - 24 * 3600 * 1000;
+
+        const req = {
+            endTime: this.req.endTime,
+            startTime: this.req.startTime
+        };
+        this.api.alarm.getAlarmByTerm([req, (data) => {
+            this.data = [];
+            if (data && data.constructor === Array) {
+                console.log(data.length);
+                if (data.length > 0) {
+                    this.itemExit = true;
+                } else {
+                    this.itemExit = false;
+                }
+
+                data.map((value, index) => {
+                    const it = {time: 1506743279334, con: '11111111111111111111111', name: '池子名字'};
+                    it.con = value.description;
+                    it.time = value.alarmTime;
+                    it.name = value.fieldRegionName;
+
+                    this.data.push(it);
+                });
+            } else {
+                this.itemExit = false;
+            }
+        }]);
+    }
     choose(e) {
-        if (e.selectedIndex) {
-            this.data = [
-                {time: 1506743279334, con: '123412345678901234567890'},
-                {time: 1506743273434, con: '234512345678901234567890'},
-                {time: 1506743212334, con: '345612345678901234567890'},
-                {time: 1506743314334, con: '456712345678901234567890'}
-            ];
+        if (e.detail.value === 'day') {
+            this.getAlarmOneDay();
+            console.log(e.detail.value);
         } else {
-            this.data = [
-                {time: 1506743279334, con: '11111111111111111111111'},
-                {time: 1506743273434, con: '22222222222222222222222'},
-                {time: 1506743212334, con: '33333333333333333333333'},
-                {time: 1506743314334, con: '44444444444444444444444'}
-            ];
+            this.getAlarmOneWeek();
+            console.log(e.detail.value);
         }
     }
 

src/app/login/login.page.ts

@@ -29,6 +29,7 @@ export class LoginPage implements OnInit {
                 window.localStorage.setItem('token', data.message);
                 this.tf.transfer({
                     url: '/index',
+                    query: '',
                     hash: ''
                 });
                 this.mqtt.getUserInfo();

src/assets/icon/iconfont.css

 @font-face {font-family: "vo";
-  src: url('iconfont.eot?t=1556271947426'); /* IE9 */
-  src: url('iconfont.eot?t=1556271947426#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOcAAsAAAAABygAAANNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCOIInATYCJAMQCwoABCAFhCUHPBtFBlGU7ckE2RfYNvKZRi0713EUF5zheQHOoyGAG6E2WEgz0AQwACL42g/du3shIAfokvHhSmJL4+tbh0KhsLEVBoViS/L/OffmE7mBXM73oxwgqdJLy2lgBMay8LsJNYfk/g0CuOb995qzRAYcUcLTNpxn6WwDKd7A6XZpv/cokHeBok9hUfSxT/F7dD49TKN7KSvQaoChNHR/3E9dnu8G/OwDQKyCKpNGNrGo0AqhgUzQN+guYmLEpfUkNBpFIbY/Or2MsgLolpDuOZaGspZZiMhXL6ntGRukpxT1eZifQZ7w76ffNIR6ZDUF0PfgxoiJ+r8lvlVOq4EqJWDup0Q0iYJlkCDd6nVfkZAiekJj46R1kHr1MnvV+M2pKinlxjj8yyNLCqkWEN0MVj1r4RtGyHwTIfGtKAU+iKTeE3nPII996vDSWZaabfbm3pt/fxc+/559/D759HP5XNTfzZXQZIRk/yCfNSL2AM816R6W+aIDrIz9+aesuddNt9Laxi80Ji3e8x3Xd7htA88PQb4Yu7//wiUEueCOuSgvFwYEuOiKu93A++dnbcmAcL5l/H7m2GKVY5sQmf136DdaPhXUrztXRk5FCMXL9XjURf35hehBWc+5OsLPuJy/X0z/V5Tt9bl5OR9tcopm91+5M9huayb8pSSa+SneC+7rYVz7FHs5QwSh+knFUgDlf26h2kSNFPsvv/FoM3d+0db9tx6Tga//sXLWPCF6uczZzL+QF4jqL6MxG0gicg5mVNowszopo1GjRAzQd9LcQ9Qzm0YS9WjI6vRBkY0SgzoONZpMQq1sBRotUZ3cpItNCSkMsEjgQBKeQdbqFRThNTGo76FGLzdQK3yARmee5mwyK0w07nHQJJhY38OOQUOC6sv8Nl0Ea8vX+DaFW6wCFw4Ncb1S26ZjEAKfO0BsWw0pCSacBnh00Wbg+xRHnLpgyIotZdRZrZK+E1UMGqC8PRzQSMCE0e3BOAxUiNDBUt4D1CJg2eL7At7CcfoqwAnOvHBMnQo1nzgmCEdK7s0T5SKWBpJEYAiOChzR6GlK4EM3hYn6W7mAQapgr3BGOql61chcQeXWouDl4FEF4JhIoiAJsqAQ9wXwZOAEWlLXDA8hAAAA') format('woff2'),
-  url('iconfont.woff?t=1556271947426') format('woff'),
-  url('iconfont.ttf?t=1556271947426') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1556271947426#vo') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1560241691370'); /* IE9 */
+  src: url('iconfont.eot?t=1560241691370#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWYAAsAAAAACvAAAAVLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDRgqJIIdOATYCJAMcCxAABCAFhCUHXRtDCREVpLGR/TzI3FTaK6GYLB7qy+XsW8r4sXi/g+f7td+5T3b3m9LcK5Hpps2sqlVo2mhmoRMy0WQ6cX96z3qTSRfByuqCdbLEAXBOan0Qv1Tfd2q9tQAXQFmwj7f8Fnfcb0deikdnAPzPsdRrauC7f9UOkf+yNYMqV0TTgVWk6N5AJuxTGU5Cb1JmDqx3OR8CBMklCtRSXKkCKwy8mQAy3aNbK1jVAhgPR/DcjmVfA7IPFk/NIG4BsJf+vvxBglgBCquBt23tKuqAvDfEmx54vHk8DMYEMO0vBowOAg1UAxiQWWtiHHBeqAYTXNSSNAN4ZiUFn6I34jc9zGZNI8zXEvOI6n/wwKCwOAgaxAF2hDW1t+jAJxFKYeAT22k7SfiwMMModYrhQ+DsASfPnOzuEwUKAZkBkBdgejWozM+EFFaosK0740Ii5kd5xE4Wu9u4OXQzmaqNRl6vVxkMrWez5bMWLwcSMmHnKF5FBRYHcr1emD12zhet3Nv7qNZnnS71iMZ7tboXWnvYqePWBefO64dckOm+25Jl6OGXURSEOkMixB5it6srdXXbDfW5/f4Npig0YenMxUCUmoOPp73INWeS7Y/4INHas43LtwfZbd3pIbJHdmjVLpqG9SWzliFki8X0rB3u/fd5myXqkt4PNhiKWLzRWMvMPOuBVp0LpbecgSGrCMFeNQUi3vLTFIP97sOlSM/Wwcwlfev400HU1k1SbDtDLE0r4yyK2Vn4Hhil4quNepVaz3VsHx/O7ZgV2c1gUppMqlv68g6+20GT+JypSMVVb9D/rxwaOBDxiIuRG1YNGEhwBI9qtfbj3ezJyBzvWvbDFT1sx8aMtXWHrIKHnV3NrX4tvHyTJzezRz0aRKxYQwyFjo4/iGiAmb08+Zl+jwmSunbhyLM7trZ3nqmfqGd5Asb+c699ClIFuspbpP7sBNHkfw2v5N5rdxMpN9FzSLnbxesac243x+eF/nHvI/eHpin3cFUj4TigYWA3yzZanMvlUScdT1J5kGpzcWa8C5vrObHzX4bZgd0cgu5Ifjwa5sDlWZ9yPGUtNWFJzmEYyl2y55cB56bxwgW5zEvwlEkuSKVeVTKrJVY+y1iBXaEW1MN9H84TDriUpYoDEgktMBIJKVvtS1vnuttkLgzYakfpeWF/ldRTIbkgky/5lztUOZZufQKrh8VKhZdcsl/YL5EwAl0ln/j5Z7QNzfj0sBEg41S9YkVtbXgcPvGCQ2VJUch0WtzcnJiQOGVKAuvy7cXs9DBVRYnz+VkvbEe6XR463Pbiw0dUeoxUT+/yrh037siRSROT/btgJADgf8fLMA2A/ldbAP8yKcJhKrcTGzGflnbjp7j5//83VO0+CG62zfrt0SQAPAdP84TPH79dcjzwJzaJTf/2PhLA/0OKxhYOumY+PjQKuS7bkNpEAUGCwD+9Akme7M+VEedAUDXTCBQuOajhygXRUPPBEqIQHBQ1EKSK2INDpKgDjBhrgEr6KBAMB6CIcgIawxnRUK/AkuUAOBieIEg33DxmiFLxp8SYAtVwoPlKrCWZYPn2fpJv2GNQ5STmEv8olSXR2A0n2SOhSHeoJzu1ZsgUibTb6GIIQWgt4qBbt7S2bvve2N6o0xI37yAuUA0Hmq/EWpKJd27vMFS+YY+BHKVlCNv/USrLGmnsBiLuHckzct9Ylzk7NRMzFGIhjOTaHS2GYApCq30tB926ZYvcuu31Qkbq6M7aFV9DBEzA32GJCIQRiUTIAlkiKyCHVJTHyFE9zkr7x8KBv+qCGWyPKgUeX9L626KS3WwAAA==') format('woff2'),
+  url('iconfont.woff?t=1560241691370') format('woff'),
+  url('iconfont.ttf?t=1560241691370') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1560241691370#vo') format('svg'); /* iOS 4.1- */
 }
 
 .vo {
@@ -27,3 +27,15 @@
   content: "\e669";
 }
 
+.v-rili:before {
+  content: "\e602";
+}
+
+.v-shebeiguanli1:before {
+  content: "\e604";
+}
+
+.v-guzhang:before {
+  content: "\e605";
+}
+

src/assets/icon/iconfont.svg

@@ -29,6 +29,15 @@ Created by iconfont
     <glyph glyph-name="back" unicode="&#58985;" d="M470.57477518 624.7841189000001V767.18332814c-12.94538297 59.54876075-62.13783666 23.30168889-62.13783665 23.30168889L66.67883406 497.91936739c-75.08321963-51.78153074-5.17815296-90.61767851-5.17815296-90.6176785l336.57995151-289.97657259c67.31598962-49.19245483 72.49414371 25.89076594 72.49414257 25.8907648v132.04290447C812.33287851 381.41092295 952.14301184-43.19763001000001 952.14301184-43.19763001000001c12.94538297-23.30168889 20.71261184 0 20.71261298 0 132.04290333 636.91283001-502.28084963 667.98174777-502.28084964 667.98174891z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="rili" unicode="&#58882;" d="M874.667 426.667h-85.334v-85.334h85.334v85.334z m-256-149.334h-85.334V192h85.334v85.333z m0-149.333h-85.334v-85.333h85.334V128z m128 149.333h-85.334V192h85.334v85.333z m-128 149.334h-85.334v-85.334h85.334v85.334z m256-149.334h-85.334V192h85.334v85.333z m-128 149.334h-85.334v-85.334h85.334v85.334z m-256 0h-85.334v-85.334h85.334v85.334z m-256-149.334h-85.334V192h85.334v85.333z m128-149.333h-85.334v-85.333h85.334V128z m-128 298.667h-85.334v-85.334h85.334v85.334z m0-298.667h-85.334v-85.333h85.334V128z m256 149.333h-85.334V192h85.334v85.333zM896 768h-85.333V832c0 12.8-8.534 21.333-21.334 21.333S768 844.8 768 832v-64H256V832c0 12.8-8.533 21.333-21.333 21.333S213.333 844.8 213.333 832v-64H128c-46.933 0-85.333-38.4-85.333-85.333V0c0-46.933 38.4-85.333 85.333-85.333h768c46.933 0 85.333 38.4 85.333 85.333V682.667C981.333 729.6 942.933 768 896 768z m42.667-768c0-23.467-19.2-42.667-42.667-42.667H128c-23.467 0-42.667 19.2-42.667 42.667V512h853.334v-512z m0 554.667H85.333v128c0 23.466 19.2 42.666 42.667 42.666h85.333v-64c0-12.8 8.534-21.333 21.334-21.333S256 648.533 256 661.333v64h512v-64c0-12.8 8.533-21.333 21.333-21.333s21.334 8.533 21.334 21.333v64H896c23.467 0 42.667-19.2 42.667-42.666v-128z m-576-277.334h-85.334V192h85.334v85.333z m128-149.333h-85.334v-85.333h85.334V128z m-128 298.667h-85.334v-85.334h85.334v85.334z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shebeiguanli1" unicode="&#58884;" d="M338.958 896H144.981C65.347 896 0.01 830.658 0.01 752.046v-193.973c0-78.614 65.336-140.892 143.948-140.892h334.867V752.046C478.826 830.658 416.548 896 338.958 896z m69.422-408.372H143.96c-38.794 0-72.488 31.648-72.488 70.445V752.046c0 38.799 33.694 72.487 72.487 72.487h193.978c38.794 0 70.444-32.67 70.444-72.487v-264.418h-0.001zM884.137 896H690.16c-78.612 0-143.957-65.342-143.957-143.954v-334.864h337.934c78.602 0 139.858 62.277 139.858 140.892V752.047C1023.994 830.657 961.726 896 884.137 896z m68.406-337.927c0-38.797-29.614-70.445-69.439-70.445H615.632V753.067c0 38.796 34.707 72.487 73.509 72.487h193.962c38.811 0 69.44-32.67 69.44-72.487v-194.994zM0.01 206.875v-193.983c0-78.607 65.337-140.89 143.95-140.89h193.977c78.612 0 139.868 62.283 139.868 140.89V350.816H143.96C65.347 350.816 0.01 285.48 0.01 206.875zM408.38 12.89c0-38.791-30.628-69.42-70.444-69.42H143.96c-38.793 0-72.487 30.629-72.487 69.42V206.875c0 38.796 33.694 73.503 72.487 73.503h264.42v-267.487z m475.757 337.925H545.185V12.89c0-78.607 65.34-140.89 143.957-140.89h193.962c78.622 0 139.878 62.283 139.878 140.89V206.875c1.012 78.606-61.256 143.94-138.845 143.94z m68.406-337.925c0-38.791-29.614-69.42-69.439-69.42H689.141c-38.802 0-73.51 30.629-73.51 69.42V280.378h268.505c38.792 0 69.42-33.694 69.42-73.504V12.89h-1.013z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="guzhang" unicode="&#58885;" d="M937.6 720L784 566.4 694.4 656 800 761.6l48 48C736 880 588.8 867.2 489.6 771.2c-70.4-70.4-96-169.6-80-259.2l-352-352c-25.6-25.6-25.6-64 0-89.6L192-64c25.6-25.6 64-25.6 89.6 0l352 352c89.6-19.2 188.8 9.6 259.2 80 102.4 92.8 115.2 240 44.8 352z m-86.4-313.6c-64-64-153.6-80-233.6-51.2L243.2-22.4 108.8 112l377.6 377.6c-28.8 80-9.6 169.6 51.2 233.6C592 777.6 665.6 796.8 736 784l-83.2-83.2L608 656l182.4-182.4 131.2 131.2c6.4-70.4-16-144-70.4-198.4z"  horiz-adv-x="1024" />
+
+    
 
 
   </font>

src/environments/environment.ts

@@ -4,9 +4,9 @@
 
 export const environment = {
   production: false,
-  // url: 'http://pasture.witium.com/api', // 对外访问测试网地址
+  url: 'http://pasture.witium.com/api', // 对外访问测试网地址
   // url: 'http://cloud-test.witium.com:8096', // 测试
-  url: 'http://172.16.1.53:8097', // cy
+  // url: 'http://172.16.1.53:8097', // cy
   // url: 'http://172.16.1.52:8096', // zz
   // url: 'http://172.16.1.13:8094', // 测试
 };