修改牛舍告警详情页

src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.html

@@ -20,28 +20,28 @@
   </ion-segment>
 
   <ion-item lines="full" class="ionItem" color="gray">
-    <ion-select interface="popover" placeholder="状态">
-      <ion-select-option value="waitFix" class="popLabel">待修复</ion-select-option>
-      <ion-select-option value="fixed" class="popLabel">已修复</ion-select-option>
+    <ion-select interface="popover" placeholder="状态" [(ngModel)]="disposeState" (ionChange)="reflush()">
+      <ion-select-option value="0" class="popLabel">待修复</ion-select-option>
+      <ion-select-option value="1" class="popLabel">已修复</ion-select-option>
     </ion-select>
-    <ion-select interface="popover" placeholder="类型">
-      <ion-select-option value="environments" class="popLabel">环境</ion-select-option>
-      <ion-select-option value="fan" class="popLabel">风机</ion-select-option>
-      <ion-select-option value="shower" class="popLabel">喷淋</ion-select-option>
-      <ion-select-option value="light" class="popLabel">照明</ion-select-option>
-      <ion-select-option value="waterChannel" class="popLabel">水槽</ion-select-option>
+    <ion-select interface="popover" placeholder="类型" [(ngModel)]="fieldDeviceType" (ionChange)="reflush()">
+      <ion-select-option value="环境" class="popLabel">环境</ion-select-option>
+      <ion-select-option value="风机" class="popLabel">风机</ion-select-option>
+      <ion-select-option value="喷淋" class="popLabel">喷淋</ion-select-option>
+      <ion-select-option value="照明" class="popLabel">照明</ion-select-option>
+      <ion-select-option value="水槽" class="popLabel">水槽</ion-select-option>
     </ion-select>
   </ion-item>
 
   <ion-item lines="full" class="ionItem" style="height: 45px;">
-    <div style="width: 20%">
-      <ion-datetime displayFormat="YYYY/MM" [(ngModel)]="startTime"></ion-datetime>
+    <div style="width: 28%">
+      <ion-datetime displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="startTime" (ionChange)="reflush()"></ion-datetime>
     </div>
     <div style="width: 2%">
       <span>~</span>
     </div>
-    <div style="width: 38%">
-      <ion-datetime displayFormat="YYYY/MM" [(ngModel)]="stopTime" style="margin-left: 3px;"></ion-datetime>
+    <div style="width: 30%">
+      <ion-datetime displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="stopTime" style="margin-left: 3px;" (ionChange)="reflush()"></ion-datetime>
     </div>
     <div style="width: 40%">
       <div class="note" style="margin-bottom: 5px;">
@@ -63,19 +63,29 @@
       <div class="timeline">
         <div class="entry" *ngFor="let item of detailInfo.trouble">
           <div class="title">
-            <h3>2014 - Present</h3>
-            <p>{{item.troubleTime}}</p>
+            <div><img [src]="'../../assets/img/' + item.fieldDeviceType + '.png'" class="deviceIcon"></div>
+            <p style="font-size: 14px">{{item.troubleTime}}</p>
           </div>
           <div class="body">
-            <h3>{{item.description}}</h3>
-            <p>
-              <span *ngIf="item.data.temp">温度: {{item.data.temp}} ℃</span>
-              <span *ngIf="item.data.humi">湿度: {{item.data.humi}} %</span>
-              <span *ngIf="item.data.heatStressLevel">热应激等级: {{item.data.heatStressLevel}}</span>
-              <span *ngIf="item.data.liquidPump">供液泵压力: {{item.data.liquidPump}} MPa</span>
-              <span *ngIf="item.data.press">电磁阀压力: {{item.data.press}} MPa</span>
-              <span *ngIf="item.data.NH3">氨气: {{item.data.NH3}} ppm</span>
-            </p>
+            <h3 style="margin-bottom: 5px;">{{item.description}}</h3>
+            <div>
+              <div style="width:70%; float: left">
+                <div *ngIf="item.data.temp" class="warnContent">温度: {{item.data.temp}} ℃</div>
+                <div *ngIf="item.data.humi" class="warnContent">湿度: {{item.data.humi}} %</div>
+                <div *ngIf="item.data.heatStressLevel" class="warnContent">热应激等级: {{item.data.heatStressLevel}}</div>
+                <div *ngIf="item.data.liquidPump" class="warnContent">供液泵压力: {{item.data.liquidPump}} MPa</div>
+                <div *ngIf="item.data.press" class="warnContent">电磁阀压力: {{item.data.press}} MPa</div>
+                <div *ngIf="item.data.NH3" class="warnContent">氨气: {{item.data.NH3}} ppm</div>
+              </div>
+              <div style="width:30%; float: left">
+                <img *ngIf="displayArea === 'trouble' && item.disposeState === 0" [src]="'../../assets/img/troubleDisposeState' + item.disposeState + '.png'" class="warnIcon" (click)="onRecvClick(item)">
+<!--                <ion-button color="primary" size="small" style="display: inline-block" *ngIf="a.disposeState === 0"  (click)='onRecvClick(a)'>确认修复</ion-button>-->
+                <img *ngIf="displayArea === 'trouble' && item.disposeState === 1" [src]="'../../assets/img/troubleDisposeState' + item.disposeState + '.png'" class="warnIcon">
+
+                <img *ngIf="displayArea === 'alarm'" [src]="'../../assets/img/disposeState' + item.disposeState + '.png'" class="warnIcon">
+              </div>
+            </div>
+
           </div>
         </div>
       </div>

src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.scss

@@ -52,7 +52,17 @@
   --padding-end: 5px;
 }
 
+.warnContent {
+  width: 100%;
+  font-size:14px;
+}
 
+.warnIcon {
+  width:60px !important;
+}
+.deviceIcon {
+  width:50px !important;
+}
 
 .detailContent {
   // background: linear-gradient(55deg, #4E75B9 30%, #5CBF98 90%);
@@ -84,7 +94,7 @@
   content: '';
   position: absolute;
   top: 0px;
-  left: calc(37% + 15px);
+  left: calc(30% + 15px);
   bottom: 0px;
   width: 4px;
   background: #ddd;
@@ -103,8 +113,8 @@
 .entry .title {
   margin-bottom: .5em;
   float: left;
-  width: 37%;
-  padding-right: 30px;
+  width: 30%;
+  padding-right: 5px;
   text-align: right;
   position: relative;
 }
@@ -116,7 +126,7 @@
   border: 4px solid #28C0C6;
   background-color: #28C0C6;
   border-radius: 100%;
-  top: 15%;
+  top: 35%;
   right: -24px;
   z-index: 99;
 }
@@ -129,10 +139,10 @@
   font-size: 100%;
 }
 .entry .body {
-  margin: 0 0 20px;
+  margin: 0 0 30px;
   float: right;
-  width: 60%;
-  padding-left: 30px;
+  width: 65%;
+  padding-left: 15px;
 }
 .entry .body p {
   line-height: 1.4em;

src/app/envCtrl/env-alarm-detail/env-alarm-detail.page.ts

@@ -19,6 +19,8 @@ export class EnvAlarmDetailPage implements OnInit {
     fieldRegionGroup = '';
 
     detailInfo: any = {};
+    disposeState = '';
+    fieldDeviceType = '';
     startTime = null;
     stopTime = null;
     curInterval = 12;
@@ -78,8 +80,16 @@ export class EnvAlarmDetailPage implements OnInit {
             const req = {
                 fieldRegionNo: this.fieldRegionNo,
                 startTime: this.startTime,
-                stopTime: this.stopTime
+                stopTime: this.stopTime,
+                disposeState: '',
+                fieldDeviceType: ''
             };
+            if (this.disposeState) {
+                req.disposeState = this.disposeState;
+            }
+            if (this.fieldDeviceType) {
+                req.fieldDeviceType = this.fieldDeviceType;
+            }
             this.api.troubleLog.getByTerm([req, (data) => {
                 // ---------------------------------------------------------
                 // TODO 测试用数据
@@ -98,7 +108,7 @@ export class EnvAlarmDetailPage implements OnInit {
                         troubleTime: 1565165000000,
                         data: {liquidPump: 25, press: 50},
                         disposeState: 0
-                    },{
+                    }, {
                         troubleLogNo: '123415646196875456',
                         fieldDeviceName: '一号风机组',
                         fieldDeviceType: '风机',
@@ -151,8 +161,16 @@ export class EnvAlarmDetailPage implements OnInit {
             const req = {
                 fieldRegionNo: this.fieldRegionNo,
                 startTime: this.startTime,
-                stopTime: this.stopTime
+                stopTime: this.stopTime,
+                disposeState: '',
+                fieldDeviceType: ''
             };
+            if (this.disposeState) {
+                req.disposeState = this.disposeState;
+            }
+            if (this.fieldDeviceType) {
+                req.fieldDeviceType = this.fieldDeviceType;
+            }
             this.api.alarm.getCowshedAlarm([req, (data) => {
                 // ---------------------------------------------------------
                 // TODO 测试用数据
@@ -223,9 +241,11 @@ export class EnvAlarmDetailPage implements OnInit {
     }
 
     segmentChanged(ev: any) {
-        if (ev === 'alarm') {
+        if (ev.target.value === 'alarm') {
+            this.displayArea = 'alarm';
             this.getAlarmList();
         } else {
+            this.displayArea = 'trouble';
             this.getTroubleList();
         }
     }
@@ -282,4 +302,9 @@ export class EnvAlarmDetailPage implements OnInit {
         const time = new Date(year, month, day, 0, 0, 0);
         return time;
     }
+
+    reflush() {
+        this.getTroubleList();
+        this.getAlarmList();
+    }
 }