huimv_cloud_client/src/views/pastureData/homeComponent/city.vue

<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>