修改牛舍配置页: 风机,水槽,照明模式添加或替换

src/app/animations/animations.ts

@@ -34,25 +34,24 @@ const opts = {
   ],
   stretch: [
     style({ height: '0' }),
-    animate(styles.easeIn, style({ height: '*' }))
+    animate(styles.faseOutSlowIn, style({ height: '*' }))
   ],
   flyIn: [
-    style({ transform: 'translateY(-50%)', zIndex: '-5' }), // translateX(-100%)
-    animate(styles.easeIn, style({ transform: 'translateY(0)' }))
+    style({ transform: 'translateX(-100%)' }), // translateX(-100%)
+    animate(styles.inOutBack, style({ transform: '*' }))
   ],
   flyOut: [
-    style({ zIndex: '-5' }),
-    animate(styles.easeIn, style({ transform: 'translateY(-50%)'}))
+    style({ transform: '*' }),
+    animate(styles.inOutBack, style({ transform: 'translateX(-100%)' }))
+  ],
+  up: [
+    style({ transform: 'translateY(-50%)' }), // translateX(-100%)
+    animate(styles.inOutBack, style({ transform: '*' }))
+  ],
+  down: [
+    style({ transform: '*' }),
+    animate(styles.inOutBack, style({ transform: 'translateY(-50%)' }))
   ],
-
-  // flyIn: [
-  //   style({ transform: 'translateX(-100%)' }), // translateX(-100%)
-  //   animate(styles.inOutBack, style({ transform: '*' }))
-  // ],
-  // flyOut: [
-  //   style({ transform: '*' }),
-  //   animate(styles.inOutBack, style({ transform: 'translateX(-100%)' }))
-  // ],
   zoomIn: [
     style({ transform: 'scale(.5)' }),
     animate(styles.inOutBack, style({ transform: '*' }))
@@ -75,6 +74,8 @@ export const flyIn = [trigger('flyIn', [transition('void => *', opts.flyIn)])]
 export const flyOut = [trigger('flyOut', [transition('* => void', opts.flyOut)])]
 export const zoomIn = [trigger('zoomIn', [transition('void => *', opts.zoomIn)])]
 export const zoomOut = [trigger('zoomOut', [transition('* => void', opts.zoomOut)])]
+export const up = [trigger('zoomIn', [transition('void => *', opts.up)])]
+export const down = [trigger('zoomOut', [transition('* => void', opts.down)])]
 
 export const animations = [
   trigger('animations', [
@@ -85,6 +86,8 @@ export const animations = [
     transition('* => flyIn', opts.flyIn),
     transition('* => flyOut', opts.flyOut),
     transition('* => zoomIn', opts.zoomIn),
-    transition('* => zoomOut', opts.zoomOut)
+    transition('* => zoomOut', opts.zoomOut),
+    transition('* => up', opts.up),
+    transition('* => down', opts.down)
   ])
 ]

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

@@ -59,7 +59,8 @@
   border-left: 5px solid #62C7CC;
   font-weight: bold;
   margin-left: 5px;
-  margin-bottom: 3px;
+  // margin-bottom: 3px;
+  border-bottom: 1px solid rgba(173, 173, 173, 0.5);
 }
 
 .selectFont {
@@ -69,3 +70,8 @@
 .popContent {
   text-align: center;
 }
+
+.tdBorder {
+  border-left: 1px solid;
+  border-top: 1px solid;
+}

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

@@ -2,19 +2,19 @@ import {Component, OnInit} from '@angular/core';
 import {PickerController, AlertController} from '@ionic/angular';
 import {Api} from '../../service/api';
 import {Load} from '../../service/load';
-import {shrink, stretch, zoomIn, zoomOut, fadeIn, fadeOut, flyIn, flyOut} from '../../animations/animations';
+import {shrink, stretch, zoomIn, zoomOut, fadeIn, fadeOut, up, down} from '../../animations/animations';
 
 @Component({
     selector: 'v-env-cfg',
     templateUrl: './env-cfg.page.html',
     styleUrls: ['./env-cfg.page.scss'],
     animations: [
-        shrink, stretch, zoomIn, zoomOut, fadeIn, fadeOut, flyIn, flyOut
+        shrink, stretch, zoomIn, zoomOut, fadeIn, fadeOut, up, down
     ]
 })
 export class EnvCfgPage implements OnInit {
 
-    defaultColumnOptions = [];
+    defaultColumnOptions = [[]];
 
     fanMode = {
         'selecting': false,
@@ -235,7 +235,7 @@ export class EnvCfgPage implements OnInit {
 
     tempHaveTouch(event) {
         for (let i = 10; i <= 50; i++) {
-            this.defaultColumnOptions[0][i - 9] = i.toString();
+            this.defaultColumnOptions[0][i - 10] = i.toString();
         }
         if (this.fanMode.selecting === false) {
             this.fanMode.selecting = true;
@@ -246,7 +246,7 @@ export class EnvCfgPage implements OnInit {
 
     humHaveTouch(event) {
         for (let i = 0; i <= 100; i++) {
-            this.defaultColumnOptions[0][i + 1] = i.toString();
+            this.defaultColumnOptions[0][i] = i.toString();
         }
         if (this.fanMode.selecting === false) {
             this.fanMode.selecting = true;
@@ -282,13 +282,13 @@ export class EnvCfgPage implements OnInit {
                     },
                     {fieldDeviceType: '喷淋',
                         controlModel: '1',
-                        controlConfig: [{id: '111', name: '模式一', T: 21, A: 35, B: 45, interval: 55},
-                            {id: '222', name: '模式二', T: 21, A: 35, B: 45, interval: 55}]
+                        controlConfig: [{id: 1, name: '模式一', T: 21, A: 35, B: 45, interval: 55},
+                            {id: 2, name: '模式二', T: 21, A: 35, B: 45, interval: 55}]
                     },
                     {fieldDeviceType: '照明',
                         controlModel: '1',
-                        controlConfig: [{id: '111', name: '模式A', startDate: '10-01', stopDate: '11-02', on: '19:00', off: '05:00'},
-                            {id: '111', name: '模式B', startDate: '10-01', stopDate: '11-02', on: '19:00', off: '05:00'}]
+                        controlConfig: [{id: 1, name: '模式A', startDate: '10-01', stopDate: '11-02', on: '19:00', off: '05:00'},
+                            {id: 2, name: '模式B', startDate: '10-01', stopDate: '11-02', on: '19:00', off: '05:00'}]
                     },
                     {fieldDeviceType: '水槽',
                         controlModel: '0',
@@ -551,18 +551,24 @@ export class EnvCfgPage implements OnInit {
         }
     }
 
-    // 喷淋:替换模式
+    // 喷淋:添加模式
     addModel(models, selectedName) {
         if (selectedName) {
+            const modelCount = this.light.controlConfig.length;
             const selectedModel = models.filter(data => data.patternModelName === selectedName);
+            selectedModel[0].configJson.id = modelCount + 1;
+            debugger;
             this.shower.controlConfig.push(selectedModel[0].configJson);
         }
     }
 
-    // 照明:添加模式
+    // 照明:替换模式
     changeModel(models, selectedName) {
         if (selectedName) {
             const selectedModel = models.filter(data => data.patternModelName === selectedName);
+            selectedModel[0].configJson.forEach((item, index) => {
+                item.id = index + 1;
+            });
             this.light.controlConfig = selectedModel[0].configJson;
         }
     }
@@ -575,6 +581,13 @@ export class EnvCfgPage implements OnInit {
                 list.push({type: 'radio', label: item.patternModelName, value: item.patternModelName, checked: false});
             });
         }
+        if (2 === device || 3 === device) {
+            list.push({
+                type: 'radio',
+                label: '自定义',
+                value: 'other',
+                checked: false});
+        }
         const alert = await this.alerCtrl.create({
             header: deviceName + '常用模式选择',
             inputs: list,
@@ -598,13 +611,6 @@ export class EnvCfgPage implements OnInit {
                         }
                     }}]
         });
-        if (2 === device || 3 === device) {
-            alert.inputs.push({
-                type: 'radio',
-                label: '自定义',
-                value: 'other',
-                checked: false});
-        }
         await alert.present();
     }
 
@@ -627,4 +633,17 @@ export class EnvCfgPage implements OnInit {
             this.isOpenHeatStress = !this.isOpenHeatStress;
         }
     }
+
+    deleteShowerModel(one) {
+        const updateModel = this.shower.controlConfig.filter(data => data.id !== one.id);
+        this.shower.controlConfig = updateModel;
+        this.shower.controlConfig.forEach((item, index) => item.id = index + 1);
+    }
+
+    deleteLightModel(one) {
+        const updateModel = this.light.controlConfig.filter(data => data.id !== one.id);
+        this.light.controlConfig = updateModel;
+        this.light.controlConfig.forEach((item, index) => item.id = index + 1);
+
+    }
 }