东西中转池修改bug

src/app/animations/toggle.ts

+// 引入 angular 动画组件
+import {trigger, style, state, transition, animate} from '@angular/animations';
+
+export const toggle = trigger('toggle', [
+    state('off', style({
+        'background-color': 'rgba(128, 128, 128, 0.7)'
+    })),
+    state('on', style({
+        'background-color': '#1890ff'
+    })),
+    transition('off => on', animate('100ms')),
+    transition('on => off', animate('100ms'))
+]);

src/app/animations/toggleIn.ts

+// 引入 angular 动画组件
+import {trigger, style, state, transition, animate} from '@angular/animations';
+
+export const toggleIn = trigger('toggleIn', [
+    state('off', style({
+        'transform': 'translateX(0)'
+    })),
+    state('on', style({
+        'transform': 'translateX(35px)'
+    })),
+    transition('off => on', animate('300ms')),
+    transition('on => off', animate('300ms'))
+]);

src/app/app.module.ts

@@ -14,7 +14,7 @@ import {NgZorroAntdMobileModule} from 'ng-zorro-antd-mobile';
 import {AppComponent} from './app.component';
 import {AppRoutingModule} from './app-routing.module';
 import {SubTitleComponent} from './components/sub-title/sub-title.component';
-
+import {SwitchComponent} from './components/switch/switch.component';
 
 import {AppMinimize} from '@ionic-native/app-minimize/ngx';
 
@@ -30,7 +30,15 @@ import {Transfer} from './service/transfer';
 import {AuthInterceptor} from './service/token';
 
 @NgModule({
-    declarations: [AppComponent, SubTitleComponent, HomePage, EastPage, LoginPage, WestPage],
+    declarations: [
+        AppComponent,
+        SubTitleComponent,
+        HomePage,
+        EastPage,
+        LoginPage,
+        WestPage,
+        SwitchComponent
+    ],
     entryComponents: [],
     imports: [
         BrowserModule,

src/app/components/switch/switch.component.scss

+.switch {
+  height: 21px;
+  width: 70px;
+  background-color: rgba(128, 128, 128, 0.7);
+  border-radius: 4px;
+  padding: 1px;
+  float: right;
+}
+
+.switch.disabled {
+  cursor: not-allowed;
+}
+
+.switch.disabled::before {
+  float: right;
+  content: '';
+  width: 72px;
+  height: 23px;
+  margin-top: -1px;
+  margin-right: -1px;
+  background-color: rgba(255, 255, 255, 0.65);
+}
+
+.inlineSwitch {
+  width: 50%;
+  background-color: #ffffff;
+  height: 100%;
+  border-radius: 3px;
+}
+
+@-webkit-keyframes loading {
+  50% {
+    opacity: 0.2;
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes loading {
+  50% {
+    opacity: 0.2;
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.loading > div {
+  background-color: #1890ff;
+  width: 15px;
+  height: 15px;
+  border-radius: 100%;
+  margin: 2px;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  display: inline-block;
+  -webkit-animation: loading 1.5s 0s infinite linear;
+  animation: loading 1.5s 0s infinite linear;
+}
+
+.loading > div:nth-child(2n-1) {
+  -webkit-animation-delay: 0.35s !important;
+  animation-delay: 0.35s !important;
+}
+
+.loading {
+  text-align: center;
+  padding-top: 1px;
+  width: 70px;
+  margin-left: 52px;
+}

src/app/components/switch/switch.component.ts

+import {Component, Input, OnInit} from '@angular/core';
+import {toggle} from '../../animations/toggle';
+import {toggleIn} from '../../animations/toggleIn';
+import {fadeIn} from '../../animations/fade-in';
+
+@Component({
+    selector: 'v-switch',
+    template: `
+        <div *ngIf="!loading" class="switch" [ngClass]="{'disabled': disabled}" [@toggle]="outer">
+            <div [@toggleIn]="inner" class="inlineSwitch"></div>
+        </div>
+        <div *ngIf="loading" class="loading">
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>`,
+    styleUrls: ['./switch.component.scss'],
+    animations: [toggle, toggleIn, fadeIn]
+})
+export class SwitchComponent implements OnInit {
+
+    constructor() {
+    }
+
+    @Input()
+    get value(): any {
+        return this.v;
+    }
+    set value(v: any) {
+        this.changeValue(v);
+    }
+    outer = 'off';
+    inner = 'off';
+    @Input() loading = false;
+    v;
+    @Input() disabled = false;
+
+    ngOnInit() {
+    }
+
+    changeValue(v) {
+        if (v) {
+            this.inner = 'on';
+            setTimeout(() => {
+                this.outer = 'on';
+            }, 250);
+        } else {
+            this.inner = 'off';
+            setTimeout(() => {
+                this.outer = 'off';
+            }, 250);
+        }
+    }
+}

src/app/east/east.page.html

@@ -30,9 +30,25 @@
         <ListItem multipleLine [extra]="s1">
             南水
         </ListItem>
+        <ListItem multipleLine *ngIf="nanClicked">
+            选择开启时间
+            <Stepper class="stepClass" [(ngModel)]="duration" [min]="1" [showNumber]="true"></Stepper>
+            <div style="text-align: right;padding-top: 10px">
+                <div Button style="margin-right: 10px" class="btn" (click)="cancel()" [inline]="true" [size]="'small'" [type]="'default'">取消</div>
+                <div Button (click)="confirm(0)" class="btn" [inline]="true" [size]="'small'" [type]="'primary'">确认</div>
+            </div>
+        </ListItem>
         <ListItem multipleLine [extra]="s2">
             北水
         </ListItem>
+        <ListItem multipleLine *ngIf="beiClicked">
+            选择开启时间
+            <Stepper class="stepClass" [(ngModel)]="duration" [min]="1" [showNumber]="true"></Stepper>
+            <div style="text-align: right;padding-top: 10px">
+                <div Button style="margin-right: 20px" class="btn" (click)="cancel()" [inline]="true" [size]="'small'" [type]="'default'">取消</div>
+                <div Button (click)="confirm(1)" class="btn" [inline]="true" [size]="'small'" [type]="'primary'">确认</div>
+            </div>
+        </ListItem>
     </div>
     <div class="bottomPart">
         <ListItem multipleLine [extra]="s3">
@@ -59,34 +75,26 @@
     <span class="vo v-back"></span>
 </ng-template>
 <ng-template #s1>
-    <Switch [platform]="'android'" [disabled]="true" [color]="color[0]" (ngModelChange)="toggle(0)"
-            [(ngModel)]="value[0]"></Switch>
+    <v-switch [value]="value[0]" [disabled]="beiLoading || value[0] || value[1]" (click)="toggle(0)" [loading]="nanLoading"></v-switch>
 </ng-template>
 <ng-template #s2>
-    <Switch [platform]="'android'" [disabled]="true" [color]="color[1]" (ngModelChange)="toggle(1)"
-            [(ngModel)]="value[1]"></Switch>
+    <v-switch [value]="value[1]" [disabled]="nanLoading || value[0] || value[1]" (click)="toggle(1)" [loading]="beiLoading"></v-switch>
 </ng-template>
 <ng-template #s3>
-    <Switch [platform]="'android'" [disabled]="true" [color]="color[2]" (ngModelChange)="toggle(2)"
-            [(ngModel)]="value[2]"></Switch>
+    <v-switch [value]="value[2]" [disabled]="true"></v-switch>
 </ng-template>
 <ng-template #s4>
-    <Switch [platform]="'android'" [disabled]="true" [color]="color[3]" (ngModelChange)="toggle(3)"
-            [(ngModel)]="value[3]"></Switch>
+    <v-switch [value]="value[3]" [disabled]="true"></v-switch>
 </ng-template>
 <ng-template #s5>
-    <Switch [platform]="'android'" [disabled]="true" [color]="color[4]" (ngModelChange)="toggle(4)"
-            [(ngModel)]="value[4]"></Switch>
+    <v-switch [value]="value[4]" [disabled]="true"></v-switch>
 </ng-template>
 <ng-template #s6>
-    <Switch [platform]="'android'" [disabled]="true" [color]="color[5]" (ngModelChange)="toggle(5)"
-            [(ngModel)]="value[5]"></Switch>
+    <v-switch [value]="value[5]" [disabled]="true"></v-switch>
 </ng-template>
 <ng-template #s7>
-    <Switch [platform]="'android'" [disabled]="true" [color]="color[6]" (ngModelChange)="toggle(6)"
-            [(ngModel)]="value[6]"></Switch>
+    <v-switch [value]="value[6]" [disabled]="true"></v-switch>
 </ng-template>
 <ng-template #s8>
-    <Switch [platform]="'android'" [disabled]="true" [color]="color[7]" (ngModelChange)="toggle(7)"
-            [(ngModel)]="value[7]"></Switch>
+    <v-switch [value]="value[7]" [disabled]="true"></v-switch>
 </ng-template>

src/app/east/east.page.scss

-// 因为switch左侧有52px的留白,在这52px的地方
-// 点击会发生颜色变化但是switch的值没变化的情况
-// 这样处理的原因是这个控件的color属性在刚进来
-// 的时候哪怕是false也会显示这个颜色,但是按两次
-// 就好了,于是我把颜色用点击事件单独拎出来处理了
-// 如果后面版本升级,这个问题被修复了你可以直接用
-// color属性,而不用这么麻烦
-Switch {
-  margin-left: 52px;
-}
-
 .process {
   width: calc(100% - 160px);
   display: inline-block;
@@ -35,4 +24,14 @@ Switch {
   background-color: #f04844;
 }
 
+.stepClass {
+  display: inline-block;
+  width: calc(100% - 209px);
+  margin-left: 100px;
+}
 
+.btn {
+  width: 64px;
+  height: 32px;
+  font-size: 16px;
+}

src/app/east/east.page.ts

@@ -8,23 +8,88 @@ import {Api} from '../service/api';
     styleUrls: ['./east.page.scss'],
 })
 export class EastPage implements OnInit {
-    // 此处处理color原因详见该目录下scss文件
-    color = ['#a7aaa6', '#a7aaa6', '#a7aaa6', '#a7aaa6', '#a7aaa6', '#a7aaa6', '#a7aaa6'];
     value = [false, false, false, false, false, false, false];
     yewei = 0;
     temp = '-';
     proc = 0;
+    duration = 23;
+    nanClicked = false;
+    beiClicked = false;
+    nanLoading = false;
+    beiLoading = false;
 
     constructor(private tf: Transfer, private api: Api) {
     }
 
     ngOnInit() {
+    }
+
+    // ionic的生命周期函数
+    ionViewWillEnter () {
+        this.nanClicked = false;
+        this.beiClicked = false;
+        this.nanLoading = false;
+        this.beiLoading = false;
         this.getData();
     }
 
     toggle(index) {
-        this.color[index] = !this.value[index] ? '#28c9bd' : '#a7aaa6';
-        this.color = [...this.color];
+        if (!(this.beiLoading || this.nanLoading || this.value[0] || this.value[1])) {
+            if (index === 0) {
+                this.nanClicked = true;
+                this.nanLoading = true;
+            } else if (index === 1) {
+                this.beiClicked = true;
+                this.beiLoading = true;
+            }
+        }
+    }
+
+    cancel() {
+        this.nanClicked = false;
+        this.beiClicked = false;
+        this.nanLoading = false;
+        this.beiLoading = false;
+    }
+
+    confirm(index) {
+        let req;
+        if (index) {
+            req = [{
+                data: {
+                    d2: 1,
+                    duration: this.duration,
+                    startTime: +new Date(),
+                    ts: +new Date()
+                },
+                sn: '19041004',
+                type: 'WTDR66C'
+            }];
+        } else {
+            req = [{
+                data: {
+                    d0: 1,
+                    duration: this.duration,
+                    startTime: +new Date(),
+                    ts: +new Date()
+                },
+                sn: '19041004',
+                type: 'WTDR66C'
+            }];
+        }
+        this.nanClicked = false;
+        this.beiClicked = false;
+        this.api.presentMsgToast('已成功发送指令,请耐心等待');
+        this.api.data.updateControl([req, (data) => {
+            if (data && data.code === 1) {
+                this.getData();
+                this.api.presentMsgToast(data.message);
+            } else {
+                this.api.presentMsgToast(data.message);
+            }
+            this.nanLoading = false;
+            this.beiLoading = false;
+        }]);
     }
 
     onLeftClick() {
@@ -32,8 +97,8 @@ export class EastPage implements OnInit {
     }
 
     getData() {
-        // 东中转池 19040001 0号通道为温度
-        this.api.data.getRealData([{deviceNo: '92489110027112448'}, (data) => {
+        // 东中转池 19041001 0号通道为温度
+        this.api.data.getRealData([{sn: '19041001', type: 'WTDR14P'}, (data) => {
             if (data && data.constructor === Array) {
                 if (data.length > 0) {
                     this.temp = Number(data[0].value).toFixed(2);
@@ -42,8 +107,8 @@ export class EastPage implements OnInit {
                 this.api.presentMsgToast('获取数据失败');
             }
         }]);
-        // 东中转池 19040003 0号通道为液位
-        this.api.data.getRealData([{deviceNo: '92489569504727040'}, (data) => {
+        // 东中转池 19041003 0号通道为液位
+        this.api.data.getRealData([{sn: '19041003', type: 'WTDR18X'}, (data) => {
             if (data && data.constructor === Array) {
                 if (data.length > 0) {
                     if (data[0].value) {
@@ -57,17 +122,15 @@ export class EastPage implements OnInit {
                 this.api.presentMsgToast('获取数据失败');
             }
         }]);
-        // 东中转池 19040004 0,1号通道为南水 2,3号通道为北水
-        this.api.data.getRealData([{deviceNo: '92489787927302144'}, (data) => {
+        // 东中转池 19041004 0,1号通道为南水 2,3号通道为北水
+        this.api.data.getRealData([{sn: '19041004', type: 'WTDR66C'}, (data) => {
             if (data && data.constructor === Array) {
                 if (data.length > 0) {
-                    if (data[0] && data[1]) {
-                        this.value[0] = !!(data[0].value === '1.0' && data[1].value === '1.0');
-                        this.color[0] = (data[0].value === '1.0' && data[1].value === '1.0') ? '#28c9bd' : this.color[0];
+                    if (data[0]) {
+                        this.value[0] = !!(data[0].value === '1.0');
                     }
-                    if (data[2] && data[3]) {
-                        this.value[1] = !!(data[2].value === '1.0' && data[3].value === '1.0');
-                        this.color[1] = (data[2].value === '1.0' && data[3].value === '1.0') ? '#28c9bd' : this.color[1];
+                    if (data[2]) {
+                        this.value[1] = !!(data[2].value === '1.0');
                     }
                 }
                 this.value = [...this.value];
@@ -75,17 +138,15 @@ export class EastPage implements OnInit {
                 this.api.presentMsgToast('获取数据失败');
             }
         }]);
-        // 东中转池 19040005 0,1号通道为1号搅拌池 2,3号通道为2号搅拌池
-        this.api.data.getRealData([{deviceNo: '92489949865185280'}, (data) => {
+        // 东中转池 19041005 0,1号通道为1号搅拌池 2,3号通道为2号搅拌池
+        this.api.data.getRealData([{sn: '19041005', type: 'WTDR66C'}, (data) => {
             if (data && data.constructor === Array) {
                 if (data.length > 0) {
-                    if (data[0] && data[1]) {
-                        this.value[2] = !!(data[0].value === '1.0' && data[1].value === '1.0');
-                        this.color[2] = (data[0].value === '1.0' && data[1].value === '1.0') ? '#28c9bd' : this.color[2];
+                    if (data[0]) {
+                        this.value[2] = !!(data[0].value === '1.0');
                     }
-                    if (data[2] && data[3]) {
-                        this.value[3] = !!(data[2].value === '1.0' && data[3].value === '1.0');
-                        this.color[3] = (data[2].value === '1.0' && data[3].value === '1.0') ? '#28c9bd' : this.color[3];
+                    if (data[2]) {
+                        this.value[3] = !!(data[2].value === '1.0');
                     }
                 }
                 this.value = [...this.value];
@@ -94,5 +155,4 @@ export class EastPage implements OnInit {
             }
         }]);
     }
-
 }

src/app/home/home.page.ts

@@ -149,8 +149,8 @@ export class HomePage implements OnInit, OnDestroy {
         };
         let flagd = 0;
         // flagx = 0;
-        // 东中转池 19040003 0号通道为液位
-        this.api.data.getRealData([{deviceNo: '92489569504727040'}, (data) => {
+        // 东中转池 19041003 0号通道为液位
+        this.api.data.getRealData([{sn: '19041003', type: 'WTDR18X'}, (data) => {
             flagd ++;
             if (data && data.constructor === Array) {
                 if (data.length > 0) {
@@ -168,16 +168,16 @@ export class HomePage implements OnInit, OnDestroy {
                 this.items = [...this.items];
             }
         }]);
-        // 东中转池 19040004 0,1号通道为南水 2,3号通道为北水
-        this.api.data.getRealData([{deviceNo: '92489787927302144'}, (data) => {
+        // 东中转池 19041004 0,1号通道为南水 2,3号通道为北水
+        this.api.data.getRealData([{sn: '19041004', type: 'WTDR66C'}, (data) => {
             flagd ++;
             if (data && data.constructor === Array) {
                 if (data.length > 0) {
-                    if (data[0] && data[1]) {
-                        dong.nan = !!(data[0].value === '1.0' && data[1].value === '1.0');
+                    if (data[0]) {
+                        dong.nan = !!(data[0].value === '1.0');
                     }
-                    if (data[2] && data[3]) {
-                        dong.bei = !!(data[2].value === '1.0' && data[3].value === '1.0');
+                    if (data[2]) {
+                        dong.bei = !!(data[2].value === '1.0');
                     }
                 }
             } else {
@@ -188,8 +188,8 @@ export class HomePage implements OnInit, OnDestroy {
                 this.items = [...this.items];
             }
         }]);
-        // 西中转池 19040006 0号通道为液位
-        this.api.data.getRealData([{deviceNo: '92490138428510208'}, (data) => {
+        // 西中转池 19041006 0号通道为液位
+        this.api.data.getRealData([{sn: '19041006', type: 'WTDR18X'}, (data) => {
             if (data && data.constructor === Array) {
                 if (data.length > 0) {
                     if (data[0].value) {
@@ -204,26 +204,6 @@ export class HomePage implements OnInit, OnDestroy {
             this.items[1] = xi;
             this.items = [...this.items];
         }]);
-        // 西中转池 19040008 0,1号通道为1号搅拌池 2,3号通道为2号搅拌池
-        // this.api.data.getRealData([{deviceNo: '92490309405118464'}, (data) => {
-        //     flagx ++;
-        //     if (data && data.constructor === Array) {
-        //         if (data.length > 0) {
-        //             if (data[0] && data[1]) {
-        //                 xi.nan = !!(data[0].value === '1.0' && data[1].value === '1.0');
-        //             }
-        //             if (data[2] && data[3]) {
-        //                 xi.bei = !!(data[2].value === '1.0' && data[3].value === '1.0');
-        //             }
-        //         }
-        //     } else {
-        //         this.api.presentMsgToast('获取数据失败');
-        //     }
-        //     if (flagx === 2) {
-        //         this.items[1] = xi;
-        //         this.items = [...this.items];
-        //     }
-        // }]);
     }
 
     initMqtt() {

src/app/service/api.ts

@@ -18,6 +18,7 @@ export class Api {
 
     public data = {
         getRealData: (data) => this.trans('post', '/data/getRealData', data),
+        updateControl: (data) => this.trans('post', '/data/updateControl', data),
     };
 
     private trans(type, addr, data) {

src/app/west/west.component.html

@@ -30,9 +30,25 @@
     <!--<ListItem multipleLine [extra]="s1">-->
       <!--南水-->
     <!--</ListItem>-->
+    <!--<ListItem multipleLine *ngIf="nanClicked">-->
+      <!--选择开启时间-->
+      <!--<Stepper class="stepClass" [(ngModel)]="duration" [min]="1" [max]="60" [showNumber]="true"></Stepper>-->
+      <!--<div style="text-align: right;padding-top: 10px">-->
+        <!--<div Button style="margin-right: 10px" class="btn" (click)="cancel()" [inline]="true" [size]="'small'" [type]="'default'">取消</div>-->
+        <!--<div Button (click)="confirm(0)" class="btn" [inline]="true" [size]="'small'" [type]="'primary'">确认</div>-->
+      <!--</div>-->
+    <!--</ListItem>-->
     <!--<ListItem multipleLine [extra]="s2">-->
       <!--北水-->
     <!--</ListItem>-->
+    <!--<ListItem multipleLine *ngIf="beiClicked">-->
+      <!--选择开启时间-->
+      <!--<Stepper class="stepClass" [(ngModel)]="duration" [min]="1" [max]="60" [showNumber]="true"></Stepper>-->
+      <!--<div style="text-align: right;padding-top: 10px">-->
+        <!--<div Button style="margin-right: 20px" class="btn" (click)="cancel()" [inline]="true" [size]="'small'" [type]="'default'">取消</div>-->
+        <!--<div Button (click)="confirm(1)" class="btn" [inline]="true" [size]="'small'" [type]="'primary'">确认</div>-->
+      <!--</div>-->
+    <!--</ListItem>-->
   </div>
   <div class="bottomPart">
     <ListItem multipleLine [extra]="s3">
@@ -59,34 +75,26 @@
   <span class="vo v-back"></span>
 </ng-template>
 <ng-template #s1>
-  <Switch [platform]="'android'" [disabled]="true" [color]="color[0]" (ngModelChange)="toggle(0)"
-          [(ngModel)]="value[0]"></Switch>
+  <v-switch [value]="value[0]" [disabled]="beiLoading || value[0] || value[1]" (click)="toggle(0)" [loading]="nanLoading"></v-switch>
 </ng-template>
 <ng-template #s2>
-  <Switch [platform]="'android'" [disabled]="true" [color]="color[1]" (ngModelChange)="toggle(1)"
-          [(ngModel)]="value[1]"></Switch>
+  <v-switch [value]="value[1]" [disabled]="nanLoading || value[0] || value[1]" (click)="toggle(1)" [loading]="beiLoading"></v-switch>
 </ng-template>
 <ng-template #s3>
-  <Switch [platform]="'android'" [disabled]="true" [color]="color[2]" (ngModelChange)="toggle(2)"
-          [(ngModel)]="value[2]"></Switch>
+  <v-switch [value]="value[2]" [disabled]="true"></v-switch>
 </ng-template>
 <ng-template #s4>
-  <Switch [platform]="'android'" [disabled]="true" [color]="color[3]" (ngModelChange)="toggle(3)"
-          [(ngModel)]="value[3]"></Switch>
+  <v-switch [value]="value[3]" [disabled]="true"></v-switch>
 </ng-template>
 <ng-template #s5>
-  <Switch [platform]="'android'" [disabled]="true" [color]="color[4]" (ngModelChange)="toggle(4)"
-          [(ngModel)]="value[4]"></Switch>
+  <v-switch [value]="value[4]" [disabled]="true"></v-switch>
 </ng-template>
 <ng-template #s6>
-  <Switch [platform]="'android'" [disabled]="true" [color]="color[5]" (ngModelChange)="toggle(5)"
-          [(ngModel)]="value[5]"></Switch>
+  <v-switch [value]="value[5]" [disabled]="true"></v-switch>
 </ng-template>
 <ng-template #s7>
-  <Switch [platform]="'android'" [disabled]="true" [color]="color[6]" (ngModelChange)="toggle(6)"
-          [(ngModel)]="value[6]"></Switch>
+  <v-switch [value]="value[6]" [disabled]="true"></v-switch>
 </ng-template>
 <ng-template #s8>
-  <Switch [platform]="'android'" [disabled]="true" [color]="color[7]" (ngModelChange)="toggle(7)"
-          [(ngModel)]="value[7]"></Switch>
+  <v-switch [value]="value[7]" [disabled]="true"></v-switch>
 </ng-template>

src/app/west/west.component.scss

-// 因为switch左侧有52px的留白,在这52px的地方
-// 点击会发生颜色变化但是switch的值没变化的情况
-// 这样处理的原因是这个控件的color属性在刚进来
-// 的时候哪怕是false也会显示这个颜色,但是按两次
-// 就好了,于是我把颜色用点击事件单独拎出来处理了
-// 如果后面版本升级,这个问题被修复了你可以直接用
-// color属性,而不用这么麻烦
-Switch {
-  margin-left: 52px;
-}
-
 .process {
   width: calc(100% - 160px);
   display: inline-block;

src/app/west/west.component.ts

@@ -8,24 +8,86 @@ import {Api} from '../service/api';
   styleUrls: ['./west.component.scss'],
 })
 export class WestPage implements OnInit {
-
-  // 此处处理color原因详见该目录下scss文件
-  color = ['#a7aaa6', '#a7aaa6', '#a7aaa6', '#a7aaa6', '#a7aaa6', '#a7aaa6', '#a7aaa6'];
   value = [false, false, false, false, false, false, false];
   yewei = 0;
   temp: any = '';
   proc = 0;
+  duration = 15;
+  nanClicked = false;
+  beiClicked = false;
+  nanLoading = false;
+  beiLoading = false;
 
   constructor(private tf: Transfer, private api: Api) {
   }
 
   ngOnInit() {
+  }
+
+  // ionic的生命周期函数
+  ionViewWillEnter () {
+    this.cancel();
     this.getData();
   }
 
   toggle(index) {
-    this.color[index] = !this.value[index] ? '#28c9bd' : '#a7aaa6';
-    this.color = [...this.color];
+    if (!(this.beiLoading || this.nanLoading || this.value[0] || this.value[1])) {
+      if (index === 0) {
+        this.nanClicked = true;
+        this.nanLoading = true;
+      } else if (index === 1) {
+        this.beiClicked = true;
+        this.beiLoading = true;
+      }
+    }
+  }
+
+  cancel() {
+    this.nanClicked = false;
+    this.beiClicked = false;
+    this.nanLoading = false;
+    this.beiLoading = false;
+  }
+
+  confirm(index) {
+    // TODO:这个地方的参数需要进行修改,这个地方写的是东中转池的内容
+    let req;
+    if (index) {
+      req = [{
+        data: {
+          d2: 1,
+          duration: this.duration,
+          startTime: +new Date(),
+          ts: +new Date()
+        },
+        sn: '19041004',
+        type: 'WTDR66C'
+      }];
+    } else {
+      req = [{
+        data: {
+          d0: 1,
+          duration: this.duration,
+          startTime: +new Date(),
+          ts: +new Date()
+        },
+        sn: '19041004',
+        type: 'WTDR66C'
+      }];
+    }
+    this.nanClicked = false;
+    this.beiClicked = false;
+    this.api.presentMsgToast('已成功发送指令,请耐心等待');
+    this.api.data.updateControl([req, (data) => {
+      if (data && data.code === 1) {
+        this.getData();
+        this.api.presentMsgToast(data.message);
+      } else {
+        this.api.presentMsgToast(data.message);
+      }
+      this.nanLoading = false;
+      this.beiLoading = false;
+    }]);
   }
 
   onLeftClick() {
@@ -33,16 +95,8 @@ export class WestPage implements OnInit {
   }
 
   getData() {
-    // 西中转池 19040001 0号通道为温度
-    // this.api.data.getRealData([{deviceNo: '92489110027112448'}, (data) => {
-    //   if (data && data.constructor === Array) {
-    //     this.temp = data[0];
-    //   } else {
-    //     this.api.presentMsgToast('获取数据失败');
-    //   }
-    // }]);
-    // 西中转池 19040006 0号通道为液位
-    this.api.data.getRealData([{deviceNo: '92490138428510208'}, (data) => {
+    // 西中转池 19041006 0号通道为液位
+    this.api.data.getRealData([{sn: '19041006', type: 'WTDR18X'}, (data) => {
       if (data && data.constructor === Array) {
         if (data[0].value) {
           if (data.length > 0) {
@@ -56,7 +110,7 @@ export class WestPage implements OnInit {
         this.api.presentMsgToast('获取数据失败');
       }
     }]);
-    // 西中转池 19040004 0,1号通道为南水 2,3号通道为北水
+    // 西中转池 19041004 0,1号通道为南水 2,3号通道为北水
     // this.api.data.getRealData([{deviceNo: '92489787927302144'}, (data) => {
     //   if (data && data.constructor === Array) {
     //     if (data[0] && data[1]) {
@@ -72,17 +126,15 @@ export class WestPage implements OnInit {
     //     this.api.presentMsgToast('获取数据失败');
     //   }
     // }]);
-    // 西中转池 19040008 0,1号通道为1号搅拌池 2,3号通道为2号搅拌池
-    this.api.data.getRealData([{deviceNo: '92490309405118464'}, (data) => {
+    // 西中转池 19041008 0,1号通道为1号搅拌池 2,3号通道为2号搅拌池
+    this.api.data.getRealData([{sn: '19041008', type: 'WTDR66C'}, (data) => {
       if (data && data.constructor === Array) {
         if (data.length > 0) {
-          if (data[0] && data[1]) {
-            this.value[2] = !!(data[0].value === '1.0' && data[1].value === '1.0');
-            this.color[2] = (data[0].value === '1.0' && data[1].value === '1.0') ? '#28c9bd' : this.color[2];
+          if (data[0]) {
+            this.value[2] = !!(data[0].value === '1.0');
           }
-          if (data[2] && data[3]) {
-            this.value[3] = !!(data[2].value === '1.0' && data[3].value === '1.0');
-            this.color[3] = (data[2].value === '1.0' && data[3].value === '1.0') ? '#28c9bd' : this.color[3];
+          if (data[2]) {
+            this.value[3] = !!(data[2].value === '1.0');
           }
         }
         this.value = [...this.value];

src/environments/environment.prod.ts

 export const environment = {
   production: true,
-  url: 'http://cloud-test.witium.com/api', // 对外访问witiumCloud2网地址
+  // url: 'http://cloud-test.witium.com/api', // 对外访问witiumCloud2网地址
+  url: 'http://172.16.1.52:8094', // 测试
 };

src/environments/environment.ts

@@ -4,7 +4,8 @@
 
 export const environment = {
   production: false,
-  url: 'http://cloud-test.witium.com/api', // 对外访问witiumCloud2地址
+  // url: 'http://cloud-test.witium.com/api', // 对外访问witiumCloud2地址
+  url: 'http://172.16.1.52:8094', // 测试
 };
 
 /*