新增分析详情页

src/app/envCtrl/env-anal-detail/env-anal-detail.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EnvAnalDetailPage } from './env-anal-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EnvAnalDetailPage
+  }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        RouterModule.forChild(routes),
+    ],
+  declarations: [EnvAnalDetailPage]
+})
+export class EnvAnalDetailPageModule {}

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

+<ion-header>
+  <ion-toolbar color="secondary">
+    <ion-buttons slot="start">
+      <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  color='light'>
+
+  <ion-item lines="full">
+    <div style="width: 100%">
+      <div style="width:20%; display: inline-block;">
+        <span>选择日期</span>
+      </div>
+      <div style="width:70%; text-align: left;padding-left: 20px; display: inline-block;">
+        <ion-datetime displayFormat="YYYY-MM-DD" cancelText="取消" doneText="确认" [(ngModel)]="today" style="font-size:16px"></ion-datetime>
+      </div>
+    </div>
+  </ion-item>
+
+  <div style="max-height: calc(100% - 100px);overflow-y:auto;">
+    <ion-item lines="full" class="inputItem" *ngFor="let item of fieldRegionNameList">
+      <div style="width:40%; font-size:16px;">
+        {{item.name}}单产奶量
+      </div>
+      <div style="width:27%; padding-left:10px; font-size:16px;">
+        <ion-input class="inputText" [(ngModel)]="item.num"></ion-input>
+      </div>
+      <div style="width:30%; text-align:right; padding-right:15px; font-size:14px;">
+        公斤(kg)/头
+      </div>
+    </ion-item>
+  </div>
+
+  <div style="text-align: center; width:100%; position: absolute; bottom: 10px;">
+    <ion-item width="100%" lines="none">
+      <ion-button color="secondary" class="saveBtn" round (click)="save($event)">提交</ion-button>
+    </ion-item>
+  </div>
+
+</ion-content>

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

+@import '~@swimlane/ngx-datatable/release/index.css';
+@import '~@swimlane/ngx-datatable/release/themes/material.css';
+@import '~@swimlane/ngx-datatable/release/assets/icons.css';
+
+.perfect{
+  width: 30px;
+  height: 30px;
+  background-color:green;
+  border-radius: 17%;
+  -moz-border-radius: 17%;
+  -webkit-border-radius: 17%;
+  font-size: 25px;
+  color:white;
+}
+
+.good {
+  width: 30px;
+  height: 30px;
+  background-color:yellow;
+  border-radius: 17%;
+  -moz-border-radius: 17%;
+  -webkit-border-radius: 17%;
+  font-size: 25px;
+  color:white;
+}
+
+.bad {
+  width: 30px;
+  height: 30px;
+  background-color:red;
+  border-radius: 17%;
+  -moz-border-radius: 17%;
+  -webkit-border-radius: 17%;
+  font-size: 25px;
+  color:white;
+}
+
+.demo-chart{
+  width: 100%;
+  height: 230px;
+}
+
+.title{
+  text-align: center;
+  padding-left: 0px
+}
+
+.fixPadding {
+  --inner-padding-start:0px;
+  --inner-padding-end: 8px;
+  --padding-start: 0px;
+  --padding-end: 0px;
+}
+
+.showNoData {
+  height: 100px;
+  line-height: 30px;
+  display: inline-block;
+  text-align: center;
+  width:100%;
+  margin-top:30px;
+}
+
+.echart-pie {
+  position: fixed;
+  padding: 10px;
+  width: 95%;
+  height: 270px;
+  margin-bottom: 15px;
+  border-radius: 10px;
+  background-color: #fff;
+}
+
+.subItem{
+  font-size: 14px;
+  --padding-start: 0px;
+  padding-left:5px;
+}
+
+.inputItem {
+  font-size: 16px;
+  --padding-start: 10px;
+  --padding-end: 10px;
+  height: 45px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.saveBtn {
+  width: 100%;
+}

src/app/envCtrl/env-anal-detail/env-anal-detail.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnvAnalDetailPage } from './env-anal-detail.page';
+import {expect} from '@angular/core/testing/src/testing_internal';
+
+describe('EnvAnalDetailPage', () => {
+  let component: EnvAnalDetailPage;
+  let fixture: ComponentFixture<EnvAnalDetailPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EnvAnalDetailPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach((void) => {
+    fixture = TestBed.createComponent(EnvAnalDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', (void) => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import {Component, OnInit} from '@angular/core';
+import {NavController} from '@ionic/angular';
+import {Transfer} from '../../service/transfer';
+
+@Component({
+    selector: 'v-env-anal-detail',
+    templateUrl: './env-anal-detail.page.html',
+    styleUrls: ['./env-anal-detail.page.scss'],
+})
+export class EnvAnalDetailPage implements OnInit {
+
+    today = '';
+    fieldRegionNameList = [];
+
+    constructor(public nav: NavController, private tf: Transfer) {
+    }
+
+    ngOnInit() {
+        this.init();
+    }
+
+    init() {
+        this.today = '2019-11-10';
+        this.fieldRegionNameList = [{name: '1号牛舍', num: null}, {name: '2号牛舍', num: null},
+            {name: '3号牛舍', num: null}, {name: '4号牛舍', num: null},
+            {name: '5号牛舍', num: null}, {name: '6号牛舍', num: null},
+            {name: '7号牛舍', num: null}, {name: '8号牛舍', num: null},
+            {name: '9号牛舍', num: null}, {name: '10号牛舍', num: null},
+            {name: '11号牛舍', num: null}, {name: '12号牛舍', num: null},
+            {name: '13号牛舍', num: null}, {name: '14号牛舍', num: null},
+            {name: '15号牛舍', num: null}, {name: '16号牛舍', num: null},
+            {name: '17号牛舍', num: null}, {name: '18号牛舍', num: null}];
+
+    }
+
+    save(ev) {
+
+    }
+}