修改牛舍分析页

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

@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 
 import { EnvAnalPage } from './env-anal.page';
 import {NgxEchartsCoreModule} from 'ngx-echarts/core';
+import {NgxDatatableModule} from '@swimlane/ngx-datatable';
 
 const routes: Routes = [
   {
@@ -21,7 +22,8 @@ const routes: Routes = [
         FormsModule,
         IonicModule,
         RouterModule.forChild(routes),
-        NgxEchartsCoreModule
+        NgxEchartsCoreModule,
+        NgxDatatableModule
     ],
   declarations: [EnvAnalPage]
 })

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

@@ -7,45 +7,16 @@
 <ion-content  color='light' style="height: 100%">
 
   <ion-item lines="full">
-    <ion-label>请选择牛舍</ion-label>
-    <ion-select multiple="false" cancelText="取消" okText="确认" (ionChange)="selFarmEvent()">
-      <ion-select-option *ngFor="let a of cowFarm" value="a.value">{{a.name}}</ion-select-option>
-    </ion-select>
+    <div>
+      <ion-button color="primary" style="display: inline-block">输入牛舍单产奶量并分析 >></ion-button>
+    </div>
   </ion-item>
-  <h1 style="
-            font-size: 16px;
-            padding-left: 5px;
-            border-left: 5px solid #28c9bd;
-            line-height: 25px;
-            margin-bottom: 5px;">分析结果</h1> <span [ngClass]="{'perfect': analResult === '优','good': analResult === '良','bad': analResult === '差'}">{{analResult}}</span>
 
   <h1 style="
             font-size: 16px;
             padding-left: 5px;
             border-left: 5px solid #28c9bd;
             line-height: 25px;
-            margin-bottom: 5px;">近8个小时环境参数曲线</h1>
+            margin-bottom: 5px;">温湿度曲线图</h1>
   <div echarts [options]="chartOption" class="demo-chart"></div>
-  <h1 style="
-            font-size: 16px;
-            padding-left: 5px;
-            border-left: 5px solid #28c9bd;
-            line-height: 25px;
-            margin-bottom: 5px;">近8个小时环境参数表</h1>
-  <div>
-    <ngx-datatable
-            class='material'
-            [rows]="rows"
-            [columnMode]="'force'"
-            >
-      <ngx-datatable-column name="时间" prop="time" width="100">
-      </ngx-datatable-column>
-      <ngx-datatable-column name="热应激" prop="thi" width="200">
-      </ngx-datatable-column>
-      <ngx-datatable-column name="温度" prop="temp" width="80">
-      </ngx-datatable-column>
-      <ngx-datatable-column name="湿度" prop="humi" width="80">
-      </ngx-datatable-column>
-    </ngx-datatable>
-  </div>
 </ion-content>

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

@@ -44,3 +44,33 @@
   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: 380px;
+  margin-bottom: 15px;
+}
+
+.subItem{
+  font-size: 14px;
+  --padding-start: 0px;
+  padding-left:5px;
+}

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

-import { Component, OnInit } from '@angular/core';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import * as echarts from 'echarts';
 
 @Component({
   selector: 'v-env-anal',
@@ -8,14 +9,16 @@ import { Component, OnInit } from '@angular/core';
 export class EnvAnalPage implements OnInit {
 
 
-  cowFarm :[{
-    name : '1号牛舍',
-      value : '1';
-  },{
-      name : '2号牛舍',
-      value : '2';
-  }];
+  // cowFarm :[{
+  //   name : '1号牛舍',
+  //     value : '1';
+  // },{
+  //     name : '2号牛舍',
+  //     value : '2';
+  // }];
 
+  chartData = [{sensorSN: '', unit: '', dataList: []}];
+  hasChartData = false;
   analResult = '优';
 
   chartOption = {
@@ -40,12 +43,12 @@ export class EnvAnalPage implements OnInit {
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
       yAxis: [{
-          name:'温度(℃)',
+          name: '温度(℃)',
           type: 'value',
           splitLine: {show: false}
       },
       {
-          name:'湿度(%)',
+          name: '湿度(%)',
           type: 'value',
           max: 100,
           splitLine: {show: false}
@@ -53,37 +56,79 @@ export class EnvAnalPage implements OnInit {
       series: [{
           data: [820, 932, 901, 934, 1290, 1330, 1320],
           type: 'line'
-      },{
+      }, {
           data: [15, 13, 12, 11, 12, 11, 87],
-          yAxisIndex:1,
+          yAxisIndex: 1,
           type: 'line'
-      },{
+      }, {
           data: [76, 45, 43, 23, 34, 54, 23],
-          yAxisIndex:1,
+          yAxisIndex: 1,
           type: 'line'
     }]
   };
 
-    rows = [
-        { time: '17:00', thi: '轻', temp: '23.8', humi: '56' },
-        { time: '17:30', thi: '中', temp: '27.2', humi: '43' },
-        { time: '18:00', thi: '轻', temp: '23.2', humi: '61' },
-        { time: '18:30', thi: '轻', temp: '23.1', humi: '47' },
-        { time: '19:00', thi: '轻', temp: '20.2', humi: '43' },
-        { time: '19:30', thi: '轻', temp: '21.6', humi: '34' },
-        { time: '20:00', thi: '轻', temp: '22.5', humi: '43' },
-
-    ];
-
   constructor() { }
 
   ngOnInit() {
-    for(let i = 0;i < 8; i ++)
-      this.chartOption.xAxis.data = ['8','7','6','5','4','3','2','1'];
+
+    this.fanChart();
+    this.showerChart();
+    this.environmentChart();
   }
 
-  selFarmEvent(){
+    fanChart() {
 
-  }
+    }
+
+    showerChart() {
+
+    }
+
+    environmentChart() {
+      this.chartOption = {
+          backgroundColor: '#F0F8FF',
+          visualMap: [{
+              show: false,
+              type: 'continuous',
+              seriesIndex: 0,
+              min: 0,
+              max: 400
+          }, {
+              show: false,
+              type: 'continuous',
+              seriesIndex: 1,
+              dimension: 0,
+              min: 0,
+              max: 400
+          }],
 
+          xAxis: {
+              type: 'category',
+              data: ['8', '7', '6', '5', '4', '3', '2', '1']
+          },
+          yAxis: [{
+              name: '温度(℃)',
+              type: 'value',
+              splitLine: {show: false}
+          },
+              {
+                  name: '湿度(%)',
+                  type: 'value',
+                  max: 100,
+                  splitLine: {show: false}
+              }],
+          series: [{
+              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              type: 'line'
+          }, {
+              data: [15, 13, 12, 11, 12, 11, 87],
+              yAxisIndex: 1,
+              type: 'line'
+          }, {
+              data: [76, 45, 43, 23, 34, 54, 23],
+              yAxisIndex: 1,
+              type: 'line'
+          }]
+      };
+    }
 }