修改:牛舍新增配置页,替换配置页

src/app/app-routing.module.ts

@@ -23,6 +23,7 @@ import {EnvCfgPage} from './envCtrl/env-cfg/env-cfg.page';
 import {EnvHomePage} from './envCtrl/env-home/env-home.page';
 import {EnvHistoryPage} from './envCtrl/env-history/env-history.page';
 import {EnvAddModelPage} from './envCtrl/env-add-model/env-add-model.page';
+import {EnvChangeModelPage} from './envCtrl/env-change-model/env-change-model.page';
 
 const routes: Routes = [
     {
@@ -69,6 +70,7 @@ const routes: Routes = [
     { path: 'env-alarm-detail', loadChildren: './envCtrl/env-alarm-detail/env-alarm-detail.module#EnvAlarmDetailPageModule' },
     {path: 'tabs', loadChildren: './envCtrl/tabs/tabs.module#TabsPageModule'},
     {path: 'env-add-model', component: EnvAddModelPage},
+    {path: 'env-change-model', component: EnvChangeModelPage},
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -57,6 +57,7 @@ import {NgxEchartsModule} from 'ngx-echarts';
 import {NgxDatatableModule} from '@swimlane/ngx-datatable';
 import {EnvAlarmDetailPage} from './envCtrl/env-alarm-detail/env-alarm-detail.page';
 import {EnvAddModelPage} from './envCtrl/env-add-model/env-add-model.page';
+import {EnvChangeModelPage} from './envCtrl/env-change-model/env-change-model.page';
 
 @NgModule({
     declarations: [
@@ -87,6 +88,7 @@ import {EnvAddModelPage} from './envCtrl/env-add-model/env-add-model.page';
         // EnvCfgPage,
         // EnvHomePage,
         EnvAddModelPage,
+        EnvChangeModelPage,
     ],
     entryComponents: [],
     imports: [

src/app/envCtrl/env-add-model/env-add-model.page.html

 <ion-header>
     <ion-toolbar color="secondary">
         <ion-buttons slot="start">
-          <ion-back-button text="" ></ion-back-button>
+          <ion-back-button text=""></ion-back-button>
         </ion-buttons>
         <ion-title mode="ios" class="title">喷淋模式填写</ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content style="background-color: #F3F4F4;">
+    <div style="max-height: calc(100% - 100px);overflow-y:auto;">
         <ion-item-sliding *ngFor="let cfg of controlConfig">
             <ion-item class="fanItem">
                 <ion-grid>
@@ -14,13 +15,13 @@
                         <ion-col size="auto" style="font-size: 13px;">
                             <ion-item class="fanItem" lines="none">
                                 <ion-label style="width:80px">模式名</ion-label>
-                            <ion-input [(ngModel)]="cfg.name" style="width:80px;"></ion-input>
+                                <ion-input class="inputText" [(ngModel)]="cfg.name" style="width:80px;"></ion-input>
                             </ion-item>
                         </ion-col>
                         <ion-col size="auto" style="font-size: 13px;">
                             <ion-item class="fanItem" lines="none">
                                 <ion-label style="width:80px">间隔时间</ion-label>
-                            <ion-input style="width:50px;" [(ngModel)]="cfg.interval"></ion-input>
+                                <ion-input class="inputText" style="width:50px;" [(ngModel)]="cfg.interval"></ion-input>
                                 <ion-label>秒</ion-label>
                             </ion-item>
                         </ion-col>
@@ -29,7 +30,7 @@
                         <ion-col size="auto" style="font-size: 13px;">
                             <ion-item class="fanItem" lines="none">
                                 <ion-label style="width:80px">设置温度</ion-label>
-                            <ion-input style="width:50px;" [(ngModel)]="cfg.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
+                                <ion-input class="inputText" style="width:50px;" [(ngModel)]="cfg.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
                                 <ion-label>℃</ion-label>
                             </ion-item>
                         </ion-col>
@@ -38,14 +39,14 @@
                         <ion-col size="auto" style="font-size: 13px;">
                             <ion-item class="fanItem" lines="none">
                                 <ion-label style="width:80px">A区喷淋时间</ion-label>
-                            <ion-input style="width:50px;" [(ngModel)]="cfg.A"></ion-input>
+                                <ion-input class="inputText" style="width:50px;" [(ngModel)]="cfg.A"></ion-input>
                                 <ion-label>秒</ion-label>
                             </ion-item>
                         </ion-col>
                         <ion-col size="auto" style="font-size: 13px;">
                             <ion-item class="fanItem" lines="none">
                                 <ion-label style="width:80px">B区喷淋时间</ion-label>
-                            <ion-input style="width:50px;" [(ngModel)]="cfg.B"></ion-input>
+                                <ion-input class="inputText" style="width:50px;" [(ngModel)]="cfg.B"></ion-input>
                                 <ion-label>秒</ion-label>
                             </ion-item>
                         </ion-col>
@@ -53,11 +54,17 @@
                 </ion-grid>
             </ion-item>
             <ion-item-options side="end">
-            <ion-button color='danger' expand="full" style="width:15%;height:90%" (click)="deleteShowerModel(cfg)">删除</ion-button>
+                <div style="text-content: center; background-color: lightgray;">
+                    <ion-icon name="remove-circle" color='danger' class="deleteIcon" (click)="deleteModel(cfg)" style="margin-top: 120px;"></ion-icon>
+                </div>
             </ion-item-options>
         </ion-item-sliding>
         <ion-item width="100%" lines="none">
-        <!--<ion-button color="secondary" class="addBtn" round (click)="onAddModel()">添加模式</ion-button>-->
-        <ion-icon name="add-circle" (click)="addModel()"></ion-icon>
+            <ion-icon name="add-circle" color="secondary" class="addIcon" (click)="addModel()"></ion-icon>
         </ion-item>
+    </div>
+    <div style="text-align: center; width:100%; position: absolute; bottom: 10px;">
+        <ion-button onclick="backward()" class="btn" color="light" slot="start" style="margin-right: 20px;">取消</ion-button>
+        <ion-button onclick="saveModels()" class="btn" color="secondary" slot="end">确认</ion-button>
+    </div>
 </ion-content>

src/app/envCtrl/env-add-model/env-add-model.page.scss

+.title{
+  text-align: center;
+  padding-left: 0px
+}
+
+.fanItem{
+  font-size: 13px;
+  --padding-start: 5px;
+}
+
+.addIcon {
+  margin-left: 160px;
+}
+
+.deleteIcon {
+  font-size:25px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.btn {
+  width: 35%;
+}
+

src/app/envCtrl/env-add-model/env-add-model.page.ts

 import {Component, OnInit} from '@angular/core';
 import {Api} from '../../service/api';
-import {NavController} from '@ionic/angular';
+import {NavController, PickerController} from '@ionic/angular';
 import {ActivatedRoute} from '@angular/router';
 import {Load} from '../../service/load';
 import {Transfer} from '../../service/transfer';
@@ -13,22 +13,90 @@ import {Transfer} from '../../service/transfer';
 export class EnvAddModelPage implements OnInit {
 
     constructor(public nav: NavController,
-                private api: Api,
-                private ac: ActivatedRoute,
-                private load: Load,
-                private tf: Transfer) {}
-
+                private pickerController: PickerController) {}
 
+    fanMode = {
+        'selecting': false,
+    };
+    defaultColumnOptions = [[]];
     controlConfig = [];
     ngOnInit() {
         this.init();
     }
 
     init() {
-        this.controlConfig = [{name: '', interval: '', T: '', A: '', B: ''}];
+        this.controlConfig = [{id: 1, name: '', startDate: '', stopDate: '', on: '', off: ''}];
     }
 
     addModel() {
-        this.controlConfig.push({name: '', interval: '', T: '', A: '', B: ''});
+        const modelCount = this.controlConfig.length;
+        this.controlConfig.push({id: modelCount + 1, name: '', startDate: '', stopDate: '', on: '', off: ''});
+    }
+
+    deleteModel(one) {
+        const updateModel = this.controlConfig.filter(data => data.id !== one.id);
+        this.controlConfig = updateModel;
+        this.controlConfig.forEach((item, index) => item.id = index + 1);
+    }
+
+    saveModels() {
+    }
+
+    tempHaveTouch(event) {
+        for (let i = 10; i <= 50; i++) {
+            this.defaultColumnOptions[0][i - 10] = i.toString();
+        }
+        if (this.fanMode.selecting === false) {
+            this.fanMode.selecting = true;
+
+            this.openPicker(1, 41, this.defaultColumnOptions, event);
+        }
+    }
+
+    async openPicker(numColumns = 1, numOptions = 5, columnOptions = this.defaultColumnOptions, event) {
+        const picker = await this.pickerController.create({
+            columns: this.getColumns(numColumns, numOptions, columnOptions),
+            buttons: [
+                {
+                    text: '取消',
+                    role: 'cancel',
+                    handler: () => {
+                        this.fanMode.selecting = false;
+                    }
+                },
+                {
+                    text: '确认',
+                    handler: (value) => {
+                        event.target.value = value.col0.text;
+                        console.log(value.value);
+                        this.fanMode.selecting = false;
+                    }
+                }
+            ]
+        });
+        await picker.present();
+    }
+
+    getColumns(numColumns, numOptions, columnOptions) {
+        const columns = [];
+        for (let i = 0; i < numColumns; i++) {
+            columns.push({
+                name: `col${i}`,
+                options: this.getColumnOptions(i, numOptions, columnOptions)
+            });
         }
+        return columns;
+    }
+
+    getColumnOptions(columnIndex, numOptions, columnOptions) {
+        const options = [];
+        for (let i = 0; i < numOptions; i++) {
+            options.push({
+                text: columnOptions[columnIndex][i % numOptions],
+                value: i
+            });
+        }
+        return options;
+    }
+
 }

src/app/envCtrl/env-cfg/env-cfg.page.html

@@ -31,14 +31,14 @@
             <ion-col>
               <ion-item class="fanItem">
                 <ion-label position="fixed">偏差温度</ion-label>
-                <ion-input [(ngModel)]="curCowshed.propertyConfig.toft"></ion-input>
+                <ion-input class="inputText" [(ngModel)]="curCowshed.propertyConfig.toft"></ion-input>
                 <ion-label position="fixed">℃</ion-label>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item class="fanItem">
                 <ion-label position="fixed">偏差湿度</ion-label>
-                <ion-input [(ngModel)]="curCowshed.propertyConfig.hoft"></ion-input>
+                <ion-input class="inputText" [(ngModel)]="curCowshed.propertyConfig.hoft"></ion-input>
                 <ion-label position="fixed">% rH</ion-label>
               </ion-item>
             </ion-col>
@@ -62,14 +62,14 @@
                         <ion-col>
                             <ion-item class="fanItem">
                                 <ion-label position="fixed">开启温度</ion-label>
-                                <ion-input (ionFocus)="tempHaveTouch($event)" [(ngModel)]="fan.controlConfig.TU"></ion-input>
+                                <ion-input class="inputText" (ionFocus)="tempHaveTouch($event)" [(ngModel)]="fan.controlConfig.TU"></ion-input>
                                 <ion-label position="fixed">℃</ion-label>
                             </ion-item>
                         </ion-col>
                         <ion-col>
                             <ion-item class="fanItem">
                                 <ion-label position="fixed">关闭温度</ion-label>
-                                <ion-input  (ionFocus)="tempHaveTouch($event)" [(ngModel)]="fan.controlConfig.TL"></ion-input>
+                                <ion-input class="inputText" (ionFocus)="tempHaveTouch($event)" [(ngModel)]="fan.controlConfig.TL"></ion-input>
                                 <ion-label position="fixed">℃</ion-label>
                             </ion-item>
                         </ion-col>
@@ -101,13 +101,13 @@
                   <ion-col size="auto" style="font-size: 13px;">
                     <ion-item class="fanItem" lines="none">
                       <ion-label style="width:80px">模式名</ion-label>
-                      <ion-input [(ngModel)]="cfg.name" style="width:80px;"></ion-input>
+                      <ion-input class="inputText" [(ngModel)]="cfg.name" style="width:80px;"></ion-input>
                     </ion-item>
                   </ion-col>
                   <ion-col size="auto" style="font-size: 13px;">
                     <ion-item class="fanItem" lines="none">
                       <ion-label style="width:80px">间隔时间</ion-label>
-                      <ion-input style="width:50px;" [(ngModel)]="cfg.interval"></ion-input>
+                      <ion-input class="inputText" style="width:50px;" [(ngModel)]="cfg.interval"></ion-input>
                       <ion-label>秒</ion-label>
                     </ion-item>
                   </ion-col>
@@ -116,7 +116,7 @@
                   <ion-col size="auto" style="font-size: 13px;">
                     <ion-item class="fanItem" lines="none">
                       <ion-label style="width:80px">设置温度</ion-label>
-                      <ion-input style="width:50px;" [(ngModel)]="cfg.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
+                      <ion-input class="inputText" style="width:50px;" [(ngModel)]="cfg.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
                       <ion-label>℃</ion-label>
                     </ion-item>
                   </ion-col>
@@ -131,14 +131,14 @@
                   <ion-col size="auto" style="font-size: 13px;">
                     <ion-item class="fanItem" lines="none">
                       <ion-label style="width:80px">A区喷淋时间</ion-label>
-                      <ion-input style="width:50px;" [(ngModel)]="cfg.A"></ion-input>
+                      <ion-input class="inputText" style="width:50px;" [(ngModel)]="cfg.A"></ion-input>
                       <ion-label>秒</ion-label>
                     </ion-item>
                   </ion-col>
                   <ion-col size="auto" style="font-size: 13px;">
                     <ion-item class="fanItem" lines="none">
                       <ion-label style="width:80px">B区喷淋时间</ion-label>
-                      <ion-input style="width:50px;" [(ngModel)]="cfg.B"></ion-input>
+                      <ion-input class="inputText" style="width:50px;" [(ngModel)]="cfg.B"></ion-input>
                       <ion-label>秒</ion-label>
                     </ion-item>
                   </ion-col>
@@ -177,7 +177,7 @@
                   <ion-col size="auto" style="font-size: 13px;">
                     <ion-item class="fanItem" lines="none">
                       <ion-label style="width:80px">模式名</ion-label>
-                      <ion-input style="width:80px;" [(ngModel)]="cfg.name"></ion-input>
+                      <ion-input class="inputText" style="width:80px;" [(ngModel)]="cfg.name"></ion-input>
                     </ion-item>
                   </ion-col>
                 </ion-row>
@@ -186,14 +186,14 @@
                     <ion-item class="fanItem"  lines="none">
                       <ion-label style="width:80px">日期范围</ion-label>
                       <!--<ion-input placeholder={{cfg.startTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
-                      <ion-datetime [(ngModel)]="cfg.startDate" displayFormat="MM-DD" cancelText="取消" doneText="确认" class="timepicker"></ion-datetime>
+                      <ion-datetime class="inputDateTime timepicker" [(ngModel)]="cfg.startDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
                     </ion-item>
                   </ion-col>
                   <ion-col size="auto" style="font-size: 13px;">
                     <ion-item class="fanItem"  lines="none">
                       <ion-label style="width:80px">~</ion-label>
                       <!--<ion-input placeholder={{cfg.endTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
-                      <ion-datetime [(ngModel)]="cfg.stopDate" displayFormat="MM-DD" cancelText="取消" doneText="确认" class="timepicker"></ion-datetime>
+                      <ion-datetime class="inputDateTime timepicker" [(ngModel)]="cfg.stopDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
                     </ion-item>
                   </ion-col>
                 </ion-row>
@@ -201,14 +201,14 @@
                   <ion-col size="auto" style="font-size: 13px;">
                     <ion-item class="fanItem"  lines="none">
                       <ion-label style="width:80px">开灯时间</ion-label>
-                      <ion-datetime [(ngModel)]="cfg.on" displayFormat="HH:mm" cancelText="取消" doneText="确认" class="timepicker"></ion-datetime>
+                      <ion-datetime class="inputDateTime timepicker" [(ngModel)]="cfg.on" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
                       <!--<ion-input style="width:50px;" [(ngModel)]="cfg.on" (ionFocus)="tempHaveTouch()"></ion-input>-->
                     </ion-item>
                   </ion-col>
                   <ion-col size="auto" style="font-size: 13px;">
                     <ion-item class="fanItem"  lines="none">
                       <ion-label style="width:80px">关灯时间</ion-label>
-                      <ion-datetime [(ngModel)]="cfg.off" displayFormat="HH:mm" cancelText="取消" doneText="确认" class="timepicker"></ion-datetime>
+                      <ion-datetime class="inputDateTime timepicker" [(ngModel)]="cfg.off" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
                       <!--<ion-input style="width:50px;" [(ngModel)]="cfg.off"  (ionFocus)="tempHaveTouch()"></ion-input>-->
                     </ion-item>
                   </ion-col>
@@ -243,14 +243,14 @@
                  <ion-item class="timepickerItem" lines="none">
                    <ion-label style="width:80px">日期范围</ion-label>
                    <!--<ion-input placeholder={{cfg.startTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
-                   <ion-datetime [(ngModel)]="waterChannel.controlConfig.startDate" displayFormat="MM-DD" cancelText="取消" doneText="确认" class="timepicker"></ion-datetime>
+                   <ion-datetime class="inputDateTime timepicker" [(ngModel)]="waterChannel.controlConfig.startDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
                  </ion-item>
                </ion-col>
               <ion-col size="auto" style="font-size: 13px;">
                  <ion-item class="timepickerItem" lines="none">
                    <ion-label style="width:80px">~</ion-label>
                    <!--<ion-input placeholder={{cfg.endTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
-                   <ion-datetime [(ngModel)]="waterChannel.controlConfig.stopDate" displayFormat="MM-DD" cancelText="取消" doneText="确认" class="timepicker"></ion-datetime>
+                   <ion-datetime class="inputDateTime timepicker" [(ngModel)]="waterChannel.controlConfig.stopDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
                  </ion-item>
               </ion-col>
             </ion-row>

src/app/envCtrl/env-cfg/env-cfg.page.scss

@@ -5,7 +5,7 @@
 }
 
 .timepicker{
-  width:40px;
+  width:50px;
 }
 
 .timepickerItem{
@@ -72,8 +72,8 @@
 }
 
 .tdBorder {
-  border-left: 1px solid;
-  border-top: 1px solid;
+  border-left: 1px solid lightgray;
+  border-top: 1px solid lightgray;;
 }
 
 .deleteIcon {

src/app/envCtrl/env-cfg/env-cfg.page.ts

@@ -643,7 +643,6 @@ export class EnvCfgPage implements OnInit {
     }
 
     toNextPage(device) {
-        debugger;
         let query = '';
         if (device === 2) {
             query = '/env-add-model';

src/app/envCtrl/env-change-model/env-change-model.page.html

 <ion-header>
     <ion-toolbar color="secondary">
         <ion-buttons slot="start">
-            <ion-back-button text="" ></ion-back-button>
+            <ion-back-button text="" id="back"></ion-back-button>
         </ion-buttons>
         <ion-title mode="ios" class="title">照明模式填写</ion-title>
     </ion-toolbar>
 </ion-header>
 <ion-content style="background-color: #F3F4F4;">
-    <ion-item-sliding *ngFor="let cfg of controlConfig">
+    <div style="max-height: calc(100% - 100px);overflow-y:auto;">
+        <ion-item-sliding *ngFor="let cfg of controlConfig" >
             <ion-item class="fanItem">
                 <ion-grid>
                     <ion-row style="width: 100%">
                         <ion-col size="auto" style="font-size: 13px;">
                             <ion-item class="fanItem" lines="none">
                                 <ion-label style="width:80px">模式名</ion-label>
-                            <ion-input [(ngModel)]="cfg.name" style="width:80px;"></ion-input>
+                                <ion-input class="inputText" style="width:80px;" [(ngModel)]="cfg.name"></ion-input>
                             </ion-item>
                         </ion-col>
+                    </ion-row>
+                    <ion-row style="width: 100%">
                         <ion-col size="auto" style="font-size: 13px;">
                             <ion-item class="fanItem"  lines="none">
-                            <ion-label style="width:80px">间隔时间</ion-label>
-                            <ion-input style="width:50px;" [(ngModel)]="cfg.interval"></ion-input>
-                            <ion-label>秒</ion-label>
+                                <ion-label style="width:80px">日期范围</ion-label>
+                                <!--<ion-input placeholder={{cfg.startTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
+                                <ion-datetime class="inputDateTime timepicker" [(ngModel)]="cfg.startDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
                             </ion-item>
                         </ion-col>
-                </ion-row>
-                <ion-row style="width: 100%">
                         <ion-col size="auto" style="font-size: 13px;">
                             <ion-item class="fanItem"  lines="none">
-                            <ion-label style="width:80px">设置温度</ion-label>
-                            <ion-input style="width:50px;" [(ngModel)]="cfg.T" (ionFocus)="tempHaveTouch($event)"></ion-input>
-                            <ion-label>℃</ion-label>
+                                <ion-label style="width:80px">~</ion-label>
+                                <!--<ion-input placeholder={{cfg.endTime}} (ionFocus)="tempHaveTouch()" style="width:50px;"></ion-input>-->
+                                <ion-datetime class="inputDateTime timepicker" [(ngModel)]="cfg.stopDate" displayFormat="MM-DD" cancelText="取消" doneText="确认"></ion-datetime>
                             </ion-item>
                         </ion-col>
                     </ion-row>
                     <ion-row style="width: 100%">
                         <ion-col size="auto" style="font-size: 13px;">
                             <ion-item class="fanItem"  lines="none">
-                            <ion-label style="width:80px">A区喷淋时间</ion-label>
-                            <ion-input style="width:50px;" [(ngModel)]="cfg.A"></ion-input>
-                            <ion-label>秒</ion-label>
+                                <ion-label style="width:80px">开灯时间</ion-label>
+                                <ion-datetime class="inputDateTime timepicker" [(ngModel)]="cfg.on" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
+                                <!--<ion-input style="width:50px;" [(ngModel)]="cfg.on" (ionFocus)="tempHaveTouch()"></ion-input>-->
                             </ion-item>
                         </ion-col>
                         <ion-col size="auto" style="font-size: 13px;">
                             <ion-item class="fanItem"  lines="none">
-                            <ion-label style="width:80px">B区喷淋时间</ion-label>
-                            <ion-input style="width:50px;" [(ngModel)]="cfg.B"></ion-input>
-                            <ion-label>秒</ion-label>
+                                <ion-label style="width:80px">关灯时间</ion-label>
+                                <ion-datetime class="inputDateTime timepicker" [(ngModel)]="cfg.off" displayFormat="HH:mm" cancelText="取消" doneText="确认"></ion-datetime>
+                                <!--<ion-input style="width:50px;" [(ngModel)]="cfg.off"  (ionFocus)="tempHaveTouch()"></ion-input>-->
                             </ion-item>
                         </ion-col>
                     </ion-row>
                 </ion-grid>
             </ion-item>
             <ion-item-options side="end">
-            <ion-button color='danger' expand="full" style="width:15%;height:90%" (click)="deleteShowerModel(cfg)">删除</ion-button>
+                <div style="text-content: center; background-color: lightgray;" (click)="deleteModel(cfg)">
+                    <ion-icon name="remove-circle" color='danger' class="deleteIcon" style="margin-top: 70px;"></ion-icon>
+                </div>
             </ion-item-options>
         </ion-item-sliding>
         <ion-item width="100%" lines="none">
-        <!--<ion-button color="secondary" class="addBtn" round (click)="onAddModel()">添加模式</ion-button>-->
-        <ion-icon name="add-circle" (click)="addModel()"></ion-icon>
+            <!--<ion-button color="secondary" class="addBtn" round (click)="onChangeModel()">替换模式</ion-button>-->
+            <ion-icon name="add-circle" color="secondary" class="addIcon" (click)="addModel()"></ion-icon>
         </ion-item>
+    </div>
+    <div style="text-align: center; width:100%; position: absolute; bottom: 10px;">
+        <ion-button (click)="goBack()" class="btn" color="light" slot="start" style="margin-right: 20px;">取消</ion-button>
+        <ion-button (click)="saveModels()" class="btn" color="secondary" slot="end">确认</ion-button>
+    </div>
 </ion-content>

src/app/envCtrl/env-change-model/env-change-model.page.scss

+.title{
+  text-align: center;
+  padding-left: 0px
+}
+
+.fanItem{
+  font-size: 13px;
+  --padding-start: 5px;
+}
+
+.timepicker{
+  width:50px;
+}
+
+.addIcon {
+  margin-left: 160px;
+}
+
+.deleteIcon {
+  font-size:25px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.btn {
+  width: 35%;
+}
+

src/app/envCtrl/env-change-model/env-change-model.page.ts

@@ -24,10 +24,25 @@ export class EnvChangeModelPage implements OnInit {
     }
 
     init() {
-        this.controlConfig = [{name: '', interval: '', T: '', A: '', B: ''}];
+        this.controlConfig = [{id: 1, name: '', startDate: '', stopDate: '', on: '', off: ''}];
     }
 
     addModel() {
-        this.controlConfig.push({name: '', interval: '', T: '', A: '', B: ''});
+        const modelCount = this.controlConfig.length;
+        this.controlConfig.push({id: modelCount + 1, name: '', startDate: '', stopDate: '', on: '', off: ''});
+    }
+
+    deleteModel(one) {
+        const updateModel = this.controlConfig.filter(data => data.id !== one.id);
+        this.controlConfig = updateModel;
+        this.controlConfig.forEach((item, index) => item.id = index + 1);
+    }
+
+    saveModels() {
+    }
+
+    goBack() {
+        debugger;
+        document.getElementById('back').click();
     }
 }

src/global.scss

@@ -130,3 +130,20 @@ img {
   --background: #444444;
   --color: #ffffff;
 }
+
+.inputText {
+  border: 1px solid lightgray;
+  border-radius: 3px;
+  height: 25px;
+  margin-right: 5px;
+  text-align: right;
+}
+
+.inputDateTime {
+  border: 1px solid lightgray;
+  border-radius: 3px;
+  height: 20px;
+  margin-right: 5px;
+  text-align: center;
+  padding: 5px 0px 0px 0px;
+}