主页

src/components/areaZz.vue

@@ -5,7 +5,8 @@
         :options="options"
         v-model="selectedOptions"
         :props="{ checkStrictly: true }"
-        @change="handleChange">
+        ref="area"
+        @change="handleChange($event)">
     </el-cascader>
   </div>
 </template>
@@ -462,6 +463,8 @@ export default {
   },
   methods: {
     handleChange(value) {
+      console.log(value);
+      console.log(this.$ref.area);
       this.$emit('getCityCode', value);
     }
   }

src/router/childrenRouters.js

@@ -9,7 +9,7 @@ const childrenRouters = [
       title: '牧场概况',
       defaultUrl: true,
       id: 1,
-    }
+    },
   },
   {
     path: '/hand',

src/views/MainLayout.vue

@@ -119,6 +119,7 @@ export default {
     }
   },
   mounted() {
+    console.log(this.$route);
     this.title = this.$route.meta.title;
     if(this.$route.meta.defaultUrl) {
       this.defaultUrl = this.$route.path;

src/views/pastureData/Home.vue

@@ -1,473 +1,72 @@
 <template>
   <div>
-    <div class="box">
-      <div class="box_item" v-for="item in boxList" :key="item.id">
-        <p>{{item.name}}</p>
-        <p class="number">
-          {{item.value}}
-          <template v-if="item.data !==0">
-            <i :class="['icon', item.isUp ? '' : 'icon_red']"></i>
-            <span v-if="item.isUp" class="icon_green">+{{item.data}}</span>
-            <span v-else class="icon_dev">-{{item.data}}</span>
-          </template>
-        </p>
-      </div>
-    </div>
-    <div class="form_item">
-      <el-form :inline="true" size="mini">
-        <el-form-item label="市县">
-          <areaZz @getCityCode="getCityCode"></areaZz>
-        </el-form-item>
-        <el-form-item label="时间:"  v-if="isProvince">
-          <el-date-picker
-              v-if="isProvince"
-              v-model="value2"
-              type="datetimerange"
-              :picker-options="pickerOptions"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              align="right">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="母猪存栏:">
-          <el-input style="width: 50px;" v-model="minStockTotal"></el-input>
-          &nbsp;至&nbsp;
-          <el-input style="width: 50px;" v-model="maxStockTotal"></el-input>
-        </el-form-item>
-        <el-form-item label="母猪新增:">
-          <el-input style="width: 50px;" v-model="minStockNew"></el-input>
-          &nbsp;至&nbsp;
-          <el-input style="width: 50px;" v-model="maxStockNew"></el-input>
-        </el-form-item>
-        <el-form-item label="耳标离线:">
-          <el-input style="width: 50px;" v-model="minOfflineNo"></el-input>
-          &nbsp;至&nbsp;
-          <el-input style="width: 50px;" v-model="maxOfflineNo"></el-input>
-        </el-form-item>
-        <el-form-item label="能繁母猪:">
-          <el-input style="width: 50px;" v-model="minSowStock"></el-input>
-          &nbsp;至&nbsp;
-          <el-input style="width: 50px;" v-model="maxSowStock"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="search">查询</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="box_table">
-      <el-table
-          :data="tableData"
-          border
-          stripe
-          :header-cell-style="{'text-align':'center', 'background-color': '#F9FAFC', 'padding': '5px 0', 'color': '#666666'}"
-          :cell-style="{'text-align':'center', 'padding': '5px 0'}"
-          height="700"
-          row-key="name"
-          default-expand-all
-          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-          style="width: 100%;">
-        <el-table-column
-            v-if="type === 1"
-            label="市县"
-            prop="name">
-          <template slot-scope="scope">
-            <span style="cursor: pointer;" @click="onSelect(scope.row)">{{scope.row.name}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-            v-if="type === 2"
-            label="牧场"
-            prop="farmName"
-        >
-          <template slot-scope="scope">
-            <span style="cursor: pointer;" @click="onFarm(scope.row)">{{scope.row.farmName}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-            prop="sowTotalStock"
-            label="母猪总存栏">
-        </el-table-column>
-        <el-table-column
-            prop="eartagNew"
-            label="母猪新增">
-        </el-table-column>
-        <el-table-column
-            prop="eartagOffone"
-            label="耳标离线">
-        </el-table-column>
-<!--        <el-table-column-->
-<!--            prop="date"-->
-<!--            label="日龄占比 (250-1700)"-->
-<!--            :render-header="renderHeader">-->
-<!--        </el-table-column>-->
-<!--        <el-table-column-->
-<!--            prop="date"-->
-<!--            label="日龄占比 (1000-1700)"-->
-<!--            :render-header="renderHeader">-->
-<!--        </el-table-column>-->
-<!--        <el-table-column-->
-<!--            prop="date"-->
-<!--            label="日龄占比 (1700-2400)"-->
-<!--            :render-header="renderHeader">-->
-<!--        </el-table-column>-->
-<!--        <el-table-column-->
-<!--            prop="date"-->
-<!--            label="日龄占比 (>2400)"-->
-<!--            :render-header="renderHeader">-->
-<!--        </el-table-column>-->
-        <el-table-column
-            prop="sowStock"
-            label="能繁母猪存栏">
-        </el-table-column>
-        <el-table-column
-            prop="stock1"
-            label="配怀存栏">
-        </el-table-column>
-        <el-table-column
-            prop="stock2"
-            label="分娩存栏">
-        </el-table-column>
-        <el-table-column
-            prop="stock3"
-            label="空怀存栏">
-        </el-table-column>
-        <el-table-column
-            prop="stock4"
-            label="后备存栏">
-        </el-table-column>
-        <el-table-column
-            prop="stock5"
-            label="公猪存栏">
-        </el-table-column>
-      </el-table>
-      <table-footer
-          :totals="totalPages"
-          :size="pageSize"
-          @sizeChange="sizeChange"
-          @pageChange="pageChange"></table-footer>
-    </div>
+    <!-- 省级  -->
+    <proinvce v-if="isProvince" @getCountyCode="getCountyCode"></proinvce>
+    <!-- 市级   -->
+    <city v-if="!isProvince && type === 1" :cityCode="cityCode" @getCountyCode="getCountyCode"></city>
+    <!-- 区级   -->
+    <district v-if="!isProvince && type === 2" :distCode="distCode" @goFarm="goFarm"></district>
+    <!-- 牧场级   -->
+    <farm v-if="!isProvince && type === 4" :farmCode="farmCode"></farm>
   </div>
 </template>
 
 <script>
-import areaZz from "../../components/areaZz";
-import TableFooter from "../../components/TableFooter";
-import { mapState } from 'vuex';
+// import areaZz from "../../components/areaZz";
+// import TableFooter from "../../components/TableFooter";
+// import { mapState } from 'vuex';
+import proinvce from "./homeComponent/proinvce.vue";
+import city from "./homeComponent/city";
+import district from "./homeComponent/district";
+import farm from "./homeComponent/farm";
 export default {
   name: "Home",
+  components: {
+    proinvce,
+    city,
+    district,
+    farm
+  },
   data() {
     return {
-      boxList: [
-        {
-          id: 1,
-          name: '母猪总存栏',
-          value: 2500,
-          data: 20,
-          isUp: true,
-        },
-        {
-          id: 2,
-          name: '配怀存栏',
-          value: 1689,
-          data: 20,
-          isUp: true,
-        },
-        {
-          id: 3,
-          name: '分娩存栏',
-          value: 1689,
-          data: 20,
-          isUp: false,
-        },
-        {
-          id: 4,
-          name: '后备存栏',
-          value: 1689,
-          data: 0,
-          isUp: true,
-        },
-        {
-          id: 5,
-          name: '公猪存栏',
-          value: 1689,
-          data: 20,
-          isUp: true,
-        },
-        {
-          id: 6,
-          name: '预计年出栏量',
-          value: 50000,
-          data: 20,
-          isUp: true,
-        },
-      ],
-      pickerOptions: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-            picker.$emit('pick', [start, end]);
-          }
-        }]
-      },
-      value2: '',
-      tableData: [],
-      totalPages: 0,
-      pageNum: 1,
-      pageSize: 20,
-      farmCode: '',
-      minStockTotal: '',
-      maxStockTotal: '',
-      minStockNew: '',
-      maxStockNew: '',
-      minOfflineNo: '',
-      maxOfflineNo: '',
-      minSowStock: '',
-      maxSowStock: '',
-      isProvince: false,
-      countyCode: '',
-      farmName: '',
-      // 区分市县
+      // 判断是否是省级
+      isProvince: true,
+      // 身份类型
       type: 1,
+      // 市级编码
+      cityCode: '',
+      // 区级编码
+      distCode: '',
+      // 牧场id:
+      farmCode: '',
+      // 先后顺序
+      typeList: [],
     }
   },
-  components: {
-    TableFooter,
-    areaZz
-  },
-  computed: {
-    ...mapState(['baseUrl'])
-  },
   methods: {
-    getCityCode(val) {
-      let len = val.length;
-      this.countyCode = val[len-1];
-    },
-    // 修改size
-    sizeChange(val) {
-      this.pageSize = val;
-    },
-    // 修改页数
-    pageChange(val) {
-      this.pageNum = val;
-    },
-    search() {
-      this.init();
-    },
-    renderHeader(createElement, { column }) {
-      const label = column.label
-      const labelArr = label.split(' ')
-      return createElement(
-          'span',     //创建最外层的标签可随意
-          [
-            createElement('span', {  // 创建第一个元素的标签可随意
-              attrs: { type: 'text' }
-            },[labelArr[0]] ),
-            createElement('div', {  // 创建第二个元素的标签可随意
-              attrs: { type: 'text', style: 'font-size:14px' } // 给分割的某个元素单独加样式
-            }, [labelArr[1] || ''] )
-          ]
-      )
-    },
-    // 省级
-    init() {
-      let params= {
-        countyCode: this.countyCode,
-        farmCode: this.farmCode,
-        minStockTotal: this.minStockTotal,
-        maxStockTotal: this.maxStockTotal,
-        minStockNew: this.minStockNew,
-        maxStockNew: this.maxStockNew,
-        minOfflineNo: this.minOfflineNo,
-        maxOfflineNo: this.maxOfflineNo,
-        minSowStock: this.minSowStock,
-        maxSowStock: this.maxSowStock
-      }
-      console.log(111);
-      this.$http({
-        url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/countAll`),
-        method: 'get',
-        params: this.$http.adornParams(params)
-      })
-      .then(res => {
-        if(res.data.code === 0) {
-          this.tableData = res.data.page;
-        }
-      })
-    },
-    // 市级
-    initCity() {
-      let params = {
-        countyCode: this.countyCode,
-        farmCode: this.farmCode,
-        minStockTotal: this.minStockTotal,
-        maxStockTotal: this.maxStockTotal,
-        minStockNew: this.minStockNew,
-        maxStockNew: this.maxStockNew,
-        minOfflineNo: this.minOfflineNo,
-        maxOfflineNo: this.maxOfflineNo,
-        minSowStock: this.minSowStock,
-        maxSowStock: this.maxSowStock
-      }
-      console.log(222);
-      this.$http({
-        url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/cityCountAll`),
-        method: 'get',
-        params: this.$http.adornParams(params)
-      })
-      .then(res => {
-        if(res.data.code === 0) {
-          this.tableData = res.data.page;
-        }
-      })
-    },
-    // 县级
-    initCounty() {
-      let params = {
-        countyCode: this.countyCode,
-        farmName: this.farmName,
-        minStockTotal: this.minStockTotal,
-        maxStockTotal: this.maxStockTotal,
-        minStockNew: this.minStockNew,
-        maxStockNew: this.maxStockNew,
-        minOfflineNo: this.minOfflineNo,
-        maxOfflineNo: this.maxOfflineNo,
-        minSowStock: this.minSowStock,
-        maxSowStock: this.maxSowStock
+    // 获取市级 或者 区级
+    getCountyCode(data) {
+      this.type = data.type;
+      this.typeList.push(this.type);
+      this.isProvince = false;
+      console.log(data);
+      if(data.type === 1) {
+        this.cityCode = data.countyCode;
+      } else if(data.type === 2){
+        this.distCode = data.countyCode;
       }
-      this.$http({
-        url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/list`),
-        method: 'get',
-        params: this.$http.adornParams(params)
-      })
-      .then(res => {
-        if(res.data.code === 0) {
-          this.tableData = res.data.page.list;
-        }
-      })
     },
     // 去牧场
-    onFarm(row) {
-      this.farmCode = row.farmCode;
-      let params = {
-        farmCode: this.farmCode,
-        startTime: this.value2[0],
-        endTime: this.value2[1],
-        minStockTotal: this.minStockTotal,
-        maxStockTotal: this.maxStockTotal,
-        minStockNew: this.minStockNew,
-        maxStockNew: this.maxStockNew,
-        minOfflineNo: this.minOfflineNo,
-        maxOfflineNo: this.maxOfflineNo,
-        minSowStock: this.minSowStock,
-        maxSowStock: this.maxSowStock,
-      }
-      this.$http({
-        url: this.$http.adornUrl(`${this.baseUrl}/manager/dailytabulatedata/list`),
-        method: 'get',
-        params: this.$http.adornParams(params)
-      })
-      .then(res => {
-        console.log(res);
-      })
-    },
-    // 选择
-    onSelect(row) {
-      console.log(row);
-      this.countyCode = row.code;
-      this.type = row.type;
-      if(row.type === 1) {
-        this.initCity();
-      } else if(row.type === 2) {
-        this.initCounty();
-      }
-    },
-  },
-  mounted() {
-    this.init();
+    goFarm(data) {
+      console.log(data);
+      this.type = data.type;
+      this.typeList.push(this.type);
+      this.farmCode = data.farmCode;
+    }
   }
 }
 </script>
 
 <style scoped>
-  /deep/ .el-form--inline .el-form-item {
-    margin-right: 15px;
-  }
-  .box{
-    width: 100%;
-    height: 140px;
-    background-color: #F9F9F9;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-  .box_item {
-    width: 198px;
-    height: 78px;
-    border: 1px solid #ddd;
-    text-align: center;
-  }
-  .box_item p {
-    height: 39px;
-    line-height: 39px;
-    margin: 0;
-  }
-  .form_item {
-    width: 100%;
-    height: 60px;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    box-sizing: border-box;
-    padding: 15px;
-  }
-  .box_table {
-    width: 100%;
-    box-sizing: border-box;
-    margin-top: 10px;
-    padding-right: 10px;
-    /*padding: 10px;*/
-  }
-  .icon {
-    display: inline-block;
-    background-image: url("../../assets/up.png");
-    width: 24px;
-    height: 24px;
-    background-size: 100% 100%;
-  }
-  .icon_red {
-    background-image: url("../../assets/decline.png");
-    background-size: 100% 100%;
-  }
-  .number {
-    font-size: 24px;
-    font-weight: 600;
-  }
-  .icon_green {
-    color: #33FA40;
-    font-size: 16px;
-  }
-  .icon_dev {
-    color: #DA331D;
-    font-size: 16px;
-  }
+
 </style>

src/views/pastureData/homeComponent/city.vue

@@ -0,0 +1,445 @@
+<template>
+  <div>
+    <div>
+      <div class="box">
+        <div class="box_item" v-for="item in boxList" :key="item.id">
+          <p>{{item.name}}</p>
+          <p class="number">
+            {{item.value}}
+            <template v-if="item.data !==0">
+              <i :class="['icon', item.isUp ? '' : 'icon_red']"></i>
+              <span v-if="item.isUp" class="icon_green">+{{item.data}}</span>
+              <span v-else class="icon_dev">-{{item.data}}</span>
+            </template>
+          </p>
+        </div>
+      </div>
+      <!-- 拆分 市 -->
+      <div class="form_item">
+        <el-form :inline="true" size="mini">
+          <el-form-item label="市县">
+            <areaZz @getCityCode="getCityCode"></areaZz>
+          </el-form-item>
+          <el-form-item label="时间:"  v-if="isProvince">
+            <el-date-picker
+                v-if="isProvince"
+                v-model="value2"
+                type="datetimerange"
+                :picker-options="pickerOptions"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                align="right">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="母猪存栏:">
+            <el-input style="width: 50px;" v-model="minStockTotal"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxStockTotal"></el-input>
+          </el-form-item>
+          <el-form-item label="母猪新增:">
+            <el-input style="width: 50px;" v-model="minStockNew"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxStockNew"></el-input>
+          </el-form-item>
+          <el-form-item label="耳标离线:">
+            <el-input style="width: 50px;" v-model="minOfflineNo"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxOfflineNo"></el-input>
+          </el-form-item>
+          <el-form-item label="能繁母猪:">
+            <el-input style="width: 50px;" v-model="minSowStock"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxSowStock"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="search">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--  拆分 市  -->
+      <div class="box_table">
+        <el-table
+            :data="tableData"
+            border
+            stripe
+            :header-cell-style="{'text-align':'center', 'background-color': '#F9FAFC', 'padding': '5px 0', 'color': '#666666'}"
+            :cell-style="{'text-align':'center', 'padding': '5px 0'}"
+            height="700"
+            row-key="name"
+            default-expand-all
+            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+            style="width: 100%;">
+          <el-table-column
+              label="市县"
+              prop="name">
+            <template slot-scope="scope">
+              <span style="cursor: pointer;" @click="onSelect(scope.row)">{{scope.row.name}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+              prop="sowTotalStock"
+              label="母猪总存栏">
+          </el-table-column>
+          <el-table-column
+              prop="eartagNew"
+              label="母猪新增">
+          </el-table-column>
+          <el-table-column
+              prop="eartagOffone"
+              label="耳标离线">
+          </el-table-column>
+          <el-table-column
+              prop="sowStock"
+              label="能繁母猪存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock1"
+              label="配怀存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock2"
+              label="分娩存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock3"
+              label="空怀存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock4"
+              label="后备存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock5"
+              label="公猪存栏">
+          </el-table-column>
+        </el-table>
+        <table-footer
+            :totals="totalPages"
+            :size="pageSize"
+            @sizeChange="sizeChange"
+            @pageChange="pageChange"></table-footer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaZz from "../../../components/areaZz";
+import TableFooter from "../../../components/TableFooter";
+import {mapState} from "vuex";
+export default {
+  name: "city",
+  components: {
+    areaZz,
+    TableFooter
+  },
+  data() {
+    return {
+      boxList: [
+        {
+          id: 1,
+          name: '母猪总存栏',
+          value: 2500,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 2,
+          name: '配怀存栏',
+          value: 1689,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 3,
+          name: '分娩存栏',
+          value: 1689,
+          data: 20,
+          isUp: false,
+        },
+        {
+          id: 4,
+          name: '后备存栏',
+          value: 1689,
+          data: 0,
+          isUp: true,
+        },
+        {
+          id: 5,
+          name: '公猪存栏',
+          value: 1689,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 6,
+          name: '预计年出栏量',
+          value: 50000,
+          data: 20,
+          isUp: true,
+        },
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      value2: '',
+      tableData: [],
+      totalPages: 0,
+      pageNum: 1,
+      pageSize: 20,
+      farmCode: '',
+      minStockTotal: '',
+      maxStockTotal: '',
+      minStockNew: '',
+      maxStockNew: '',
+      minOfflineNo: '',
+      maxOfflineNo: '',
+      minSowStock: '',
+      maxSowStock: '',
+      isProvince: false,
+      countyCode: '',
+      farmName: '',
+    }
+  },
+  computed: {
+    ...mapState(['baseUrl'])
+  },
+  props: ['cityCode'],
+  methods: {
+    getCityCode(val) {
+      let len = val.length;
+      this.countyCode = val[len - 1];
+    },
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum = val;
+    },
+    search() {
+      this.init();
+    },
+    renderHeader(createElement, {column}) {
+      const label = column.label
+      const labelArr = label.split(' ')
+      return createElement(
+          'span',     //创建最外层的标签可随意
+          [
+            createElement('span', {  // 创建第一个元素的标签可随意
+              attrs: {type: 'text'}
+            }, [labelArr[0]]),
+            createElement('div', {  // 创建第二个元素的标签可随意
+              attrs: {type: 'text', style: 'font-size:14px'} // 给分割的某个元素单独加样式
+            }, [labelArr[1] || ''])
+          ]
+      )
+    },
+    // 省级
+    // init() {
+    //   let params = {
+    //     countyCode: this.countyCode,
+    //     farmCode: this.farmCode,
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock
+    //   }
+    //   console.log(111);
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/countAll`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         if (res.data.code === 0) {
+    //           this.tableData = res.data.page;
+    //         }
+    //       })
+    // },
+    // // 市级
+    initCity() {
+      let params = {
+        countyCode: this.countyCode ? this.countyCode : this.cityCode,
+        farmCode: this.farmCode,
+        minStockTotal: this.minStockTotal,
+        maxStockTotal: this.maxStockTotal,
+        minStockNew: this.minStockNew,
+        maxStockNew: this.maxStockNew,
+        minOfflineNo: this.minOfflineNo,
+        maxOfflineNo: this.maxOfflineNo,
+        minSowStock: this.minSowStock,
+        maxSowStock: this.maxSowStock
+      }
+      this.$http({
+        url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/cityCountAll`),
+        method: 'get',
+        params: this.$http.adornParams(params)
+      })
+          .then(res => {
+            if(res.data.code === 0) {
+              this.tableData = res.data.page;
+            }
+          })
+    },
+    // 县级
+    // initCounty() {
+    //   let params = {
+    //     countyCode: this.countyCode,
+    //     farmName: this.farmName,
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock
+    //   }
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/list`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         if(res.data.code === 0) {
+    //           this.tableData = res.data.page.list;
+    //         }
+    //       })
+    // },
+    // // 去牧场
+    // onFarm(row) {
+    //   this.farmCode = row.farmCode;
+    //   let params = {
+    //     farmCode: this.farmCode,
+    //     startTime: this.value2[0],
+    //     endTime: this.value2[1],
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock,
+    //   }
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/dailytabulatedata/list`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         console.log(res);
+    //       })
+    // },
+    // 选择
+    onSelect(row) {
+      this.countyCode = row.code;
+      this.type = row.type;
+      this.$emit('getCountyCode', {countyCode: this.countyCode, type: this.type});
+      // if (row.type === 1) {
+      //   this.initCity();
+      // } else if (row.type === 2) {
+      //   this.initCounty();
+      // }
+    },
+  },
+  mounted() {
+    this.initCity();
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .el-form--inline .el-form-item {
+  margin-right: 15px;
+}
+.box{
+  width: 100%;
+  height: 140px;
+  background-color: #F9F9F9;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.box_item {
+  width: 198px;
+  height: 78px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+.box_item p {
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+}
+.form_item {
+  width: 100%;
+  height: 60px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.box_table {
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 10px;
+  padding-right: 10px;
+  /*padding: 10px;*/
+}
+.icon {
+  display: inline-block;
+  background-image: url("../../../assets/up.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+}
+.icon_red {
+  background-image: url("../../../assets/decline.png");
+  background-size: 100% 100%;
+}
+.number {
+  font-size: 24px;
+  font-weight: 600;
+}
+.icon_green {
+  color: #33FA40;
+  font-size: 16px;
+}
+.icon_dev {
+  color: #DA331D;
+  font-size: 16px;
+}
+</style>

src/views/pastureData/homeComponent/district.vue

@@ -0,0 +1,432 @@
+<template>
+  <div>
+    <div>
+      <div class="box">
+        <div class="box_item" v-for="item in boxList" :key="item.id">
+          <p>{{item.name}}</p>
+          <p class="number">
+            {{item.value}}
+            <template v-if="item.data !==0">
+              <i :class="['icon', item.isUp ? '' : 'icon_red']"></i>
+              <span v-if="item.isUp" class="icon_green">+{{item.data}}</span>
+              <span v-else class="icon_dev">-{{item.data}}</span>
+            </template>
+          </p>
+        </div>
+      </div>
+      <!-- 拆分 市 -->
+      <div class="form_item">
+        <el-form :inline="true" size="mini">
+          <el-form-item label="牧场名:">
+            <el-input v-model="farmName"></el-input>
+          </el-form-item>
+          <el-form-item label="母猪存栏:">
+            <el-input style="width: 50px;" v-model="minStockTotal"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxStockTotal"></el-input>
+          </el-form-item>
+          <el-form-item label="母猪新增:">
+            <el-input style="width: 50px;" v-model="minStockNew"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxStockNew"></el-input>
+          </el-form-item>
+          <el-form-item label="耳标离线:">
+            <el-input style="width: 50px;" v-model="minOfflineNo"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxOfflineNo"></el-input>
+          </el-form-item>
+          <el-form-item label="能繁母猪:">
+            <el-input style="width: 50px;" v-model="minSowStock"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxSowStock"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="search">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--  拆分 市  -->
+      <div class="box_table">
+        <el-table
+            :data="tableData"
+            border
+            stripe
+            :header-cell-style="{'text-align':'center', 'background-color': '#F9FAFC', 'padding': '5px 0', 'color': '#666666'}"
+            :cell-style="{'text-align':'center', 'padding': '5px 0'}"
+            height="700"
+            style="width: 100%;">
+          <el-table-column
+            label="牧场"
+            prop="farmName"
+            >
+            <template slot-scope="scope">
+              <span @click="goFarm(scope.row)">{{scope.row.farmName}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+              prop="sowTotalStock"
+              label="母猪总存栏">
+          </el-table-column>
+          <el-table-column
+              prop="eartagNew"
+              label="母猪新增">
+          </el-table-column>
+          <el-table-column
+              prop="eartagOffone"
+              label="耳标离线">
+          </el-table-column>
+          <el-table-column
+              prop="sowStock"
+              label="能繁母猪存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock1"
+              label="配怀存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock2"
+              label="分娩存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock3"
+              label="空怀存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock4"
+              label="后备存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock5"
+              label="公猪存栏">
+          </el-table-column>
+        </el-table>
+        <table-footer
+            :totals="totalPages"
+            :size="pageSize"
+            @sizeChange="sizeChange"
+            @pageChange="pageChange"></table-footer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TableFooter from "../../../components/TableFooter";
+import {mapState} from "vuex";
+export default {
+  name: "district",
+  components: {
+    TableFooter
+  },
+  data() {
+    return {
+      boxList: [
+        {
+          id: 1,
+          name: '母猪总存栏',
+          value: 2500,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 2,
+          name: '配怀存栏',
+          value: 1689,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 3,
+          name: '分娩存栏',
+          value: 1689,
+          data: 20,
+          isUp: false,
+        },
+        {
+          id: 4,
+          name: '后备存栏',
+          value: 1689,
+          data: 0,
+          isUp: true,
+        },
+        {
+          id: 5,
+          name: '公猪存栏',
+          value: 1689,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 6,
+          name: '预计年出栏量',
+          value: 50000,
+          data: 20,
+          isUp: true,
+        },
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      value2: '',
+      tableData: [],
+      totalPages: 0,
+      pageNum: 1,
+      pageSize: 20,
+      farmCode: '',
+      minStockTotal: '',
+      maxStockTotal: '',
+      minStockNew: '',
+      maxStockNew: '',
+      minOfflineNo: '',
+      maxOfflineNo: '',
+      minSowStock: '',
+      maxSowStock: '',
+      isProvince: false,
+      countyCode: '',
+      farmName: '',
+    }
+  },
+  computed: {
+    ...mapState(['baseUrl'])
+  },
+  props: ['distCode'],
+  methods: {
+    getCityCode(val) {
+      let len = val.length;
+      this.countyCode = val[len - 1];
+    },
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum = val;
+    },
+    search() {
+      this.init();
+    },
+    renderHeader(createElement, {column}) {
+      const label = column.label
+      const labelArr = label.split(' ')
+      return createElement(
+          'span',     //创建最外层的标签可随意
+          [
+            createElement('span', {  // 创建第一个元素的标签可随意
+              attrs: {type: 'text'}
+            }, [labelArr[0]]),
+            createElement('div', {  // 创建第二个元素的标签可随意
+              attrs: {type: 'text', style: 'font-size:14px'} // 给分割的某个元素单独加样式
+            }, [labelArr[1] || ''])
+          ]
+      )
+    },
+    // 省级
+    // init() {
+    //   let params = {
+    //     countyCode: this.countyCode,
+    //     farmCode: this.farmCode,
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock
+    //   }
+    //   console.log(111);
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/countAll`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         if (res.data.code === 0) {
+    //           this.tableData = res.data.page;
+    //         }
+    //       })
+    // },
+    // // 市级
+    // initCity() {
+    //   let params = {
+    //     countyCode: this.countyCode ? this.countyCode : this.cityCode,
+    //     farmCode: this.farmCode,
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock
+    //   }
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/cityCountAll`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         if(res.data.code === 0) {
+    //           this.tableData = res.data.page;
+    //         }
+    //       })
+    // },
+    // 县级
+    initCounty() {
+      let params = {
+        countyCode: this.distCode,
+        farmName: this.farmName,
+        minStockTotal: this.minStockTotal,
+        maxStockTotal: this.maxStockTotal,
+        minStockNew: this.minStockNew,
+        maxStockNew: this.maxStockNew,
+        minOfflineNo: this.minOfflineNo,
+        maxOfflineNo: this.maxOfflineNo,
+        minSowStock: this.minSowStock,
+        maxSowStock: this.maxSowStock
+      }
+      this.$http({
+        url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/list`),
+        method: 'get',
+        params: this.$http.adornParams(params)
+      })
+          .then(res => {
+            if(res.data.code === 0) {
+              this.tableData = res.data.page.list;
+            }
+          })
+    },
+    goFarm(row) {
+      this.$emit('goFarm', {farmCode: row.farmCode, type: 4});
+    },
+    // // 去牧场
+    // onFarm(row) {
+    //   this.farmCode = row.farmCode;
+    //   let params = {
+    //     farmCode: this.farmCode,
+    //     startTime: this.value2[0],
+    //     endTime: this.value2[1],
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock,
+    //   }
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/dailytabulatedata/list`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         console.log(res);
+    //       })
+    // },
+    // 选择
+    // onSelect(row) {
+    //   this.countyCode = row.code;
+    //   this.type = row.type;
+    //   this.$emit('getCountyCode', {countyCode: this.countyCode, type: this.type});
+      // if (row.type === 1) {
+      //   this.initCity();
+      // } else if (row.type === 2) {
+      //   this.initCounty();
+      // }
+    // },
+  },
+  mounted() {
+    this.initCounty();
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .el-form--inline .el-form-item {
+  margin-right: 15px;
+}
+.box{
+  width: 100%;
+  height: 140px;
+  background-color: #F9F9F9;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.box_item {
+  width: 198px;
+  height: 78px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+.box_item p {
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+}
+.form_item {
+  width: 100%;
+  height: 60px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.box_table {
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 10px;
+  padding-right: 10px;
+  /*padding: 10px;*/
+}
+.icon {
+  display: inline-block;
+  background-image: url("../../../assets/up.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+}
+.icon_red {
+  background-image: url("../../../assets/decline.png");
+  background-size: 100% 100%;
+}
+.number {
+  font-size: 24px;
+  font-weight: 600;
+}
+.icon_green {
+  color: #33FA40;
+  font-size: 16px;
+}
+.icon_dev {
+  color: #DA331D;
+  font-size: 16px;
+}
+</style>

src/views/pastureData/homeComponent/farm.vue

@@ -0,0 +1,452 @@
+<template>
+  <div>
+    <div>
+      <div class="box">
+        <div class="box_item" v-for="item in boxList" :key="item.id">
+          <p>{{item.name}}</p>
+          <p class="number">
+            {{item.value}}
+            <template v-if="item.data !==0">
+              <i :class="['icon', item.isUp ? '' : 'icon_red']"></i>
+              <span v-if="item.isUp" class="icon_green">+{{item.data}}</span>
+              <span v-else class="icon_dev">-{{item.data}}</span>
+            </template>
+          </p>
+        </div>
+      </div>
+      <!-- 拆分 市 -->
+      <div class="form_item">
+        <el-form :inline="true" size="mini">
+          <el-form-item label="时间:">
+            <el-date-picker
+                v-model="value2"
+                type="datetimerange"
+                :picker-options="pickerOptions"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                align="right">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="母猪存栏:">
+            <el-input style="width: 50px;" v-model="minStockTotal"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxStockTotal"></el-input>
+          </el-form-item>
+          <el-form-item label="母猪新增:">
+            <el-input style="width: 50px;" v-model="minStockNew"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxStockNew"></el-input>
+          </el-form-item>
+          <el-form-item label="耳标离线:">
+            <el-input style="width: 50px;" v-model="minOfflineNo"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxOfflineNo"></el-input>
+          </el-form-item>
+          <el-form-item label="能繁母猪:">
+            <el-input style="width: 50px;" v-model="minSowStock"></el-input>
+            &nbsp;至&nbsp;
+            <el-input style="width: 50px;" v-model="maxSowStock"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="search">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--  拆分 市  -->
+      <div class="box_table">
+        <el-table
+            :data="tableData"
+            border
+            stripe
+            :header-cell-style="{'text-align':'center', 'background-color': '#F9FAFC', 'padding': '5px 0', 'color': '#666666'}"
+            :cell-style="{'text-align':'center', 'padding': '5px 0'}"
+            height="700"
+            style="width: 100%;">
+          <el-table-column
+              prop="sowTotalStock"
+              label="时间">
+          </el-table-column>
+          <el-table-column
+              prop="sowTotalStock"
+              label="母猪总存栏">
+          </el-table-column>
+          <el-table-column
+              prop="eartagNew"
+              label="母猪新增">
+          </el-table-column>
+          <el-table-column
+              prop="eartagOffone"
+              label="耳标离线">
+          </el-table-column>
+          <el-table-column
+              prop="sowStock"
+              label="能繁母猪存栏">
+          </el-table-column>
+          <el-table-column label="存栏能繁母猪月龄分布">
+            <el-table-column
+                prop="date"
+                label="8月-20月">
+            </el-table-column>
+            <el-table-column
+                prop="date"
+                label="20月-32月">
+            </el-table-column>
+            <el-table-column
+                prop="date"
+                label="32月-44月">
+            </el-table-column>
+            <el-table-column
+                prop="date"
+                label=">44月">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column
+              prop="stock1"
+              label="配怀存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock2"
+              label="分娩存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock3"
+              label="空怀存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock4"
+              label="后备存栏">
+          </el-table-column>
+          <el-table-column
+              prop="stock5"
+              label="公猪存栏">
+          </el-table-column>
+        </el-table>
+        <table-footer
+            :totals="totalPages"
+            :size="pageSize"
+            @sizeChange="sizeChange"
+            @pageChange="pageChange"></table-footer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TableFooter from "../../../components/TableFooter";
+import {mapState} from "vuex";
+export default {
+  name: "farm",
+  components: {
+    TableFooter
+  },
+  props: ['farmCode'],
+  data() {
+    return {
+      boxList: [
+        {
+          id: 1,
+          name: '母猪总存栏',
+          value: 2500,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 2,
+          name: '配怀存栏',
+          value: 1689,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 3,
+          name: '分娩存栏',
+          value: 1689,
+          data: 20,
+          isUp: false,
+        },
+        {
+          id: 4,
+          name: '后备存栏',
+          value: 1689,
+          data: 0,
+          isUp: true,
+        },
+        {
+          id: 5,
+          name: '公猪存栏',
+          value: 1689,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 6,
+          name: '预计年出栏量',
+          value: 50000,
+          data: 20,
+          isUp: true,
+        },
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      value2: '',
+      tableData: [],
+      totalPages: 0,
+      pageNum: 1,
+      pageSize: 20,
+      minStockTotal: '',
+      maxStockTotal: '',
+      minStockNew: '',
+      maxStockNew: '',
+      minOfflineNo: '',
+      maxOfflineNo: '',
+      minSowStock: '',
+      maxSowStock: '',
+      isProvince: false,
+    }
+  },
+  computed: {
+    ...mapState(['baseUrl'])
+  },
+  methods: {
+    getCityCode(val) {
+      let len = val.length;
+      this.countyCode = val[len - 1];
+    },
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum = val;
+    },
+    search() {
+      // this.init();
+    },
+    renderHeader(createElement, {column}) {
+      const label = column.label
+      const labelArr = label.split(' ')
+      return createElement(
+          'span',     //创建最外层的标签可随意
+          [
+            createElement('span', {  // 创建第一个元素的标签可随意
+              attrs: {type: 'text'}
+            }, [labelArr[0]]),
+            createElement('div', {  // 创建第二个元素的标签可随意
+              attrs: {type: 'text', style: 'font-size:14px'} // 给分割的某个元素单独加样式
+            }, [labelArr[1] || ''])
+          ]
+      )
+    },
+    // 省级
+    // init() {
+    //   let params = {
+    //     countyCode: this.countyCode,
+    //     farmCode: this.farmCode,
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock
+    //   }
+    //   console.log(111);
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/countAll`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         if (res.data.code === 0) {
+    //           this.tableData = res.data.page;
+    //         }
+    //       })
+    // },
+    // // 市级
+    // initCity() {
+    //   let params = {
+    //     countyCode: this.countyCode,
+    //     farmCode: this.farmCode,
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock
+    //   }
+    //   console.log(222);
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/cityCountAll`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         if(res.data.code === 0) {
+    //           this.tableData = res.data.page;
+    //         }
+    //       })
+    // },
+    // 县级
+    // initCounty() {
+    //   let params = {
+    //     countyCode: this.countyCode,
+    //     farmName: this.farmName,
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock
+    //   }
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/list`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         if(res.data.code === 0) {
+    //           this.tableData = res.data.page.list;
+    //         }
+    //       })
+    // },
+    // // 去牧场
+    onFarm() {
+      let params = {
+        farmCode: this.farmCode,
+        startTime: this.value2[0],
+        endTime: this.value2[1],
+        minStockTotal: this.minStockTotal,
+        maxStockTotal: this.maxStockTotal,
+        minStockNew: this.minStockNew,
+        maxStockNew: this.maxStockNew,
+        minOfflineNo: this.minOfflineNo,
+        maxOfflineNo: this.maxOfflineNo,
+        minSowStock: this.minSowStock,
+        maxSowStock: this.maxSowStock,
+      }
+      this.$http({
+        url: this.$http.adornUrl(`${this.baseUrl}/manager/dailytabulatedata/list`),
+        method: 'get',
+        params: this.$http.adornParams(params)
+      })
+          .then(res => {
+            if(res.data.code === 0) {
+              this.tableData = res.data.page.list;
+            }
+            console.log(res);
+          })
+    },
+    // 选择
+    // onSelect(row) {
+    //   console.log(row);
+    //   this.countyCode = row.code;
+    //   this.type = row.type;
+    //   this.$emit('getCountyCode', {countyCode: this.countyCode, type: this.type});
+    //   // if (row.type === 1) {
+    //   //   this.initCity();
+    //   // } else if (row.type === 2) {
+    //   //   this.initCounty();
+    //   // }
+    // },
+  },
+  mounted() {
+    this.onFarm();
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .el-form--inline .el-form-item {
+  margin-right: 15px;
+}
+.box{
+  width: 100%;
+  height: 140px;
+  background-color: #F9F9F9;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.box_item {
+  width: 198px;
+  height: 78px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+.box_item p {
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+}
+.form_item {
+  width: 100%;
+  height: 60px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.box_table {
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 10px;
+  padding-right: 10px;
+  /*padding: 10px;*/
+}
+.icon {
+  display: inline-block;
+  background-image: url("../../../assets/up.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+}
+.icon_red {
+  background-image: url("../../../assets/decline.png");
+  background-size: 100% 100%;
+}
+.number {
+  font-size: 24px;
+  font-weight: 600;
+}
+.icon_green {
+  color: #33FA40;
+  font-size: 16px;
+}
+.icon_dev {
+  color: #DA331D;
+  font-size: 16px;
+}
+</style>

src/views/pastureData/homeComponent/proinvce.vue

@@ -0,0 +1,444 @@
+<template>
+  <div>
+    <div class="box">
+      <div class="box_item" v-for="item in boxList" :key="item.id">
+        <p>{{item.name}}</p>
+        <p class="number">
+          {{item.value}}
+          <template v-if="item.data !==0">
+            <i :class="['icon', item.isUp ? '' : 'icon_red']"></i>
+            <span v-if="item.isUp" class="icon_green">+{{item.data}}</span>
+            <span v-else class="icon_dev">-{{item.data}}</span>
+          </template>
+        </p>
+      </div>
+    </div>
+    <!-- 拆分 市 -->
+    <div class="form_item">
+      <el-form :inline="true" size="mini">
+        <el-form-item label="市县">
+          <areaZz @getCityCode="getCityCode"></areaZz>
+        </el-form-item>
+        <el-form-item label="时间:"  v-if="isProvince">
+          <el-date-picker
+              v-if="isProvince"
+              v-model="value2"
+              type="datetimerange"
+              :picker-options="pickerOptions"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              align="right">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="母猪存栏:">
+          <el-input style="width: 50px;" v-model="minStockTotal"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="maxStockTotal"></el-input>
+        </el-form-item>
+        <el-form-item label="母猪新增:">
+          <el-input style="width: 50px;" v-model="minStockNew"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="maxStockNew"></el-input>
+        </el-form-item>
+        <el-form-item label="耳标离线:">
+          <el-input style="width: 50px;" v-model="minOfflineNo"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="maxOfflineNo"></el-input>
+        </el-form-item>
+        <el-form-item label="能繁母猪:">
+          <el-input style="width: 50px;" v-model="minSowStock"></el-input>
+          &nbsp;至&nbsp;
+          <el-input style="width: 50px;" v-model="maxSowStock"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="search">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!--  拆分 市  -->
+    <div class="box_table">
+      <el-table
+          :data="tableData"
+          border
+          stripe
+          :header-cell-style="{'text-align':'center', 'background-color': '#F9FAFC', 'padding': '5px 0', 'color': '#666666'}"
+          :cell-style="{'text-align':'center', 'padding': '5px 0'}"
+          height="700"
+          row-key="name"
+          default-expand-all
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+          style="width: 100%;">
+        <el-table-column
+            label="市县"
+            prop="name">
+          <template slot-scope="scope">
+            <span style="cursor: pointer;" @click="onSelect(scope.row)">{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+            prop="sowTotalStock"
+            label="母猪总存栏">
+        </el-table-column>
+        <el-table-column
+            prop="eartagNew"
+            label="母猪新增">
+        </el-table-column>
+        <el-table-column
+            prop="eartagOffone"
+            label="耳标离线">
+        </el-table-column>
+        <el-table-column
+            prop="sowStock"
+            label="能繁母猪存栏">
+        </el-table-column>
+        <el-table-column
+            prop="stock1"
+            label="配怀存栏">
+        </el-table-column>
+        <el-table-column
+            prop="stock2"
+            label="分娩存栏">
+        </el-table-column>
+        <el-table-column
+            prop="stock3"
+            label="空怀存栏">
+        </el-table-column>
+        <el-table-column
+            prop="stock4"
+            label="后备存栏">
+        </el-table-column>
+        <el-table-column
+            prop="stock5"
+            label="公猪存栏">
+        </el-table-column>
+      </el-table>
+      <table-footer
+          :totals="totalPages"
+          :size="pageSize"
+          @sizeChange="sizeChange"
+          @pageChange="pageChange"></table-footer>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaZz from "../../../components/areaZz";
+import TableFooter from "../../../components/TableFooter";
+import {mapState} from "vuex";
+export default {
+  name: "proinvce",
+  components: {
+    areaZz,
+    TableFooter
+  },
+  data() {
+    return {
+      boxList: [
+        {
+          id: 1,
+          name: '母猪总存栏',
+          value: 2500,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 2,
+          name: '配怀存栏',
+          value: 1689,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 3,
+          name: '分娩存栏',
+          value: 1689,
+          data: 20,
+          isUp: false,
+        },
+        {
+          id: 4,
+          name: '后备存栏',
+          value: 1689,
+          data: 0,
+          isUp: true,
+        },
+        {
+          id: 5,
+          name: '公猪存栏',
+          value: 1689,
+          data: 20,
+          isUp: true,
+        },
+        {
+          id: 6,
+          name: '预计年出栏量',
+          value: 50000,
+          data: 20,
+          isUp: true,
+        },
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      value2: '',
+      tableData: [],
+      totalPages: 0,
+      pageNum: 1,
+      pageSize: 20,
+      farmCode: '',
+      minStockTotal: '',
+      maxStockTotal: '',
+      minStockNew: '',
+      maxStockNew: '',
+      minOfflineNo: '',
+      maxOfflineNo: '',
+      minSowStock: '',
+      maxSowStock: '',
+      isProvince: false,
+      countyCode: '',
+      farmName: '',
+    }
+  },
+  computed: {
+    ...mapState(['baseUrl'])
+  },
+  methods: {
+    getCityCode(val) {
+      let len = val.length;
+      this.countyCode = val[len - 1];
+    },
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum = val;
+    },
+    search() {
+      this.init();
+    },
+    renderHeader(createElement, {column}) {
+      const label = column.label
+      const labelArr = label.split(' ')
+      return createElement(
+          'span',     //创建最外层的标签可随意
+          [
+            createElement('span', {  // 创建第一个元素的标签可随意
+              attrs: {type: 'text'}
+            }, [labelArr[0]]),
+            createElement('div', {  // 创建第二个元素的标签可随意
+              attrs: {type: 'text', style: 'font-size:14px'} // 给分割的某个元素单独加样式
+            }, [labelArr[1] || ''])
+          ]
+      )
+    },
+    // 省级
+    init() {
+      let params = {
+        countyCode: this.countyCode,
+        farmCode: this.farmCode,
+        minStockTotal: this.minStockTotal,
+        maxStockTotal: this.maxStockTotal,
+        minStockNew: this.minStockNew,
+        maxStockNew: this.maxStockNew,
+        minOfflineNo: this.minOfflineNo,
+        maxOfflineNo: this.maxOfflineNo,
+        minSowStock: this.minSowStock,
+        maxSowStock: this.maxSowStock
+      }
+      console.log(111);
+      this.$http({
+        url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/countAll`),
+        method: 'get',
+        params: this.$http.adornParams(params)
+      })
+          .then(res => {
+            if (res.data.code === 0) {
+              this.tableData = res.data.page;
+            }
+          })
+    },
+    // // 市级
+    // initCity() {
+    //   let params = {
+    //     countyCode: this.countyCode,
+    //     farmCode: this.farmCode,
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock
+    //   }
+    //   console.log(222);
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/cityCountAll`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         if(res.data.code === 0) {
+    //           this.tableData = res.data.page;
+    //         }
+    //       })
+    // },
+    // 县级
+    // initCounty() {
+    //   let params = {
+    //     countyCode: this.countyCode,
+    //     farmName: this.farmName,
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock
+    //   }
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/farmstock/list`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         if(res.data.code === 0) {
+    //           this.tableData = res.data.page.list;
+    //         }
+    //       })
+    // },
+    // // 去牧场
+    // onFarm(row) {
+    //   this.farmCode = row.farmCode;
+    //   let params = {
+    //     farmCode: this.farmCode,
+    //     startTime: this.value2[0],
+    //     endTime: this.value2[1],
+    //     minStockTotal: this.minStockTotal,
+    //     maxStockTotal: this.maxStockTotal,
+    //     minStockNew: this.minStockNew,
+    //     maxStockNew: this.maxStockNew,
+    //     minOfflineNo: this.minOfflineNo,
+    //     maxOfflineNo: this.maxOfflineNo,
+    //     minSowStock: this.minSowStock,
+    //     maxSowStock: this.maxSowStock,
+    //   }
+    //   this.$http({
+    //     url: this.$http.adornUrl(`${this.baseUrl}/manager/dailytabulatedata/list`),
+    //     method: 'get',
+    //     params: this.$http.adornParams(params)
+    //   })
+    //       .then(res => {
+    //         console.log(res);
+    //       })
+    // },
+    // 选择
+    onSelect(row) {
+      console.log(row);
+      this.countyCode = row.code;
+      this.type = row.type;
+      this.$emit('getCountyCode', {countyCode: this.countyCode, type: this.type});
+      // if (row.type === 1) {
+      //   this.initCity();
+      // } else if (row.type === 2) {
+      //   this.initCounty();
+      // }
+    },
+  },
+  mounted() {
+    this.init();
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .el-form--inline .el-form-item {
+  margin-right: 15px;
+}
+.box{
+  width: 100%;
+  height: 140px;
+  background-color: #F9F9F9;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.box_item {
+  width: 198px;
+  height: 78px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+.box_item p {
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+}
+.form_item {
+  width: 100%;
+  height: 60px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+  padding: 15px;
+}
+.box_table {
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 10px;
+  padding-right: 10px;
+  /*padding: 10px;*/
+}
+.icon {
+  display: inline-block;
+  background-image: url("../../../assets/up.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+}
+.icon_red {
+  background-image: url("../../../assets/decline.png");
+  background-size: 100% 100%;
+}
+.number {
+  font-size: 24px;
+  font-weight: 600;
+}
+.icon_green {
+  color: #33FA40;
+  font-size: 16px;
+}
+.icon_dev {
+  color: #DA331D;
+  font-size: 16px;
+}
+</style>