数据页面

src/router/childrenRouters.js

@@ -25,6 +25,14 @@ const childrenRouters = [
     }
   },
   {
+    path: '/dataDetail',
+    name: 'dataDetail',
+    component: () => import('../views/pastureData/dataDetail.vue'),
+    meta: {
+      title: '数据详情'
+    }
+  },
+  {
     path: '/collectData',
     name: 'collectData',
     component: () => import('../views/collectData/collectData.vue'),

src/views/pastureData/chart/chartGzxz.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="chart-gzxz" style="width: 100%; height: 300px"></div>
+</template>
+
+<script>
+export default {
+  name: "chartGzxz",
+  data() {
+    return {
+      myCharts: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['公猪新增']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['07-10', '07-11', '07-12', '07-13', '07-14', '07-15', '07-16']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '公猪新增',
+            type: 'line',
+            stack: '总量',
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+        ]
+      }
+      this.myCharts.setOption(options);
+    }
+  },
+  mounted() {
+    this.myCharts = this.$echarts.init(document.getElementById('chart-gzxz'));
+    this.init();
+    window.onresize = () => {
+      this.myCharts.resize();
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/pastureData/chart/chartMzcl.vue

@@ -0,0 +1,92 @@
+<template>
+  <div id="chart-mzcl" style="width: 100%; height: 460px;"></div>
+</template>
+
+<script>
+export default {
+  name: "chartMzcl",
+  data() {
+    return {
+      myCharts: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {            // Use axis to trigger tooltip
+            type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
+          }
+        },
+        legend: {
+          data: ['配怀存栏', '分娩存栏', '后备存栏']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value'
+        },
+        yAxis: {
+          type: 'category',
+          data: ['07-10', '07-11', '07-12', '07-13', '07-14', '07-15', '07-16']
+        },
+        series: [
+          {
+            name: '配怀存栏',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 302, 301, 334, 390, 330, 320]
+          },
+          {
+            name: '分娩存栏',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '后备存栏',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+        ]
+      }
+      this.myCharts.setOption(options);
+    }
+  },
+  mounted() {
+    this.myCharts = this.$echarts.init(document.getElementById('chart-mzcl'));
+    this.init();
+    window.onresize = () => {
+      this.myCharts.resize();
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/pastureData/chart/chartMzxz.vue

@@ -0,0 +1,66 @@
+<template>
+  <div id="chart-mzxz" style="width: 100%; height: 300px;"></div>
+</template>
+
+<script>
+export default {
+  name: "chartMzxz",
+  data() {
+    return {
+      myCharts: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['母猪新增', '母猪离线']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['07-10', '07-11', '07-12', '07-13', '07-14', '07-15', '07-16']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '母猪新增',
+            type: 'line',
+            stack: '总量',
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '母猪离线',
+            type: 'line',
+            stack: '总量',
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+        ]
+      }
+      this.myCharts.setOption(options);
+    }
+  },
+  mounted() {
+    this.myCharts = this.$echarts.init(document.getElementById('chart-mzxz'));
+    this.init();
+    window.onresize = () => {
+      this.myCharts.resize();
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/pastureData/dataDetail.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="dataDetail">
+    <div class="header">
+      <span>耳标133100017283716详情</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "dataDetail"
+}
+</script>
+
+<style scoped>
+  .dataDetail {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+  }
+  .header {
+    width: 100%;
+    height: 50px;
+    border: 1px solid #Ddd;
+    background-color: #F3F3F3;
+    box-sizing: border-box;
+    padding: 10px 20px;
+  }
+</style>

src/views/pastureData/dayData.vue

@@ -47,6 +47,7 @@
         </el-form-item>
         <el-form-item>
           <el-button>查询</el-button>
+          <el-button @click="jump">测试接口去数据详情</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -165,6 +166,7 @@ export default {
       totalPages: 0,
       pageNum: 1,
       pageSize: 20,
+      tableData: [],
     }
   },
   methods: {
@@ -190,6 +192,9 @@ export default {
             }, [labelArr[1] || ''] )
           ]
       )
+    },
+    jump() {
+      this.$router.push('/dataDetail');
     }
   }
 }

src/views/pastureData/hand.vue

@@ -1,13 +1,68 @@
 <template>
-  <div>存栏走势</div>
+  <div class="band">
+    <div class="box">
+      <div class="box_header">母猪存栏走势</div>
+      <div class="box_content">
+        <chart-mzcl></chart-mzcl>
+      </div>
+    </div>
+    <div class="box">
+      <div class="box_header">母猪存栏走势</div>
+      <div class="box_main">
+        <chart-mzxz></chart-mzxz>
+      </div>
+    </div>
+    <div class="box">
+      <div class="box_header">公猪存栏走势</div>
+      <div class="box_main">
+        <chart-gzxz></chart-gzxz>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import chartMzcl from "./chart/chartMzcl";
+import chartMzxz from "./chart/chartMzxz";
+import chartGzxz from "./chart/chartGzxz";
 export default {
-  name: "hand"
+  name: "hand",
+  components: {
+    chartMzcl,
+    chartMzxz,
+    chartGzxz
+  },
 }
 </script>
 
 <style scoped>
-
+  .band {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 20px 10px;
+  }
+  .box {
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+  }
+  .box_header {
+    box-sizing: border-box;
+    padding: 10px 20px;
+    background-color: #F3F3F3;
+    height: 50px;
+    border-bottom: 1px solid #ddd;
+  }
+  .box_content {
+    box-sizing: border-box;
+    padding: 10px 20px;
+    background-color: #fff;
+    height: 500px;
+  }
+  .box_main {
+    box-sizing: border-box;
+    padding: 10px 20px;
+    background-color: #fff;
+    height: 340px;
+  }
 </style>