huimv_cloud_client/src/views/collectData/collectData.vue

<template>
  <div class="collectData">
    <!-- 汇总数据的 nav -->
    <div class="box">
      <label>区域选择：</label>
      <area-zz @getCityCode="getCityCode"></area-zz>
      <div class="box_item" v-for="item in boxList" :key="item.id">
        <p>{{item.name}}</p>
        <p>{{item.value}}</p>
      </div>
    </div>

    <!-- 以下为图表 -->
    <div>
      <div class="chartDiv">
        <div class="title">
          <span>母猪总存栏走势</span>
          <div class="right">
            <el-date-picker
              v-model="timeSelected"
              v-show="daySelected === 1"
              type="daterange"
              range-separator="—"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onChange"
              value-format="yyyy-MM-dd"
              size="mini">
            </el-date-picker>
            <el-date-picker
                v-model="monthSelected"
                v-show="daySelected === 2"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                @change="onChange"
                size="mini"
                value-format="yyyy-MM">
            </el-date-picker>
            <div v-show="daySelected === 3">
              <el-date-picker
                  v-model="startYear"
                  type="year"
                  placeholder="选择年"
                  size="mini"
                  style="width: 100px;"
                  value-format="yyyy">
              </el-date-picker>
              -
              <el-date-picker
                  v-model="endYear"
                  type="year"
                  placeholder="选择年"
                  size="mini"
                  @change="onChange"
                  style="width: 100px;"
                  value-format="yyyy">
              </el-date-picker>
            </div>
          </div>
          <div class="right">
            <span :class="{'scopeEle': true, 'ifScoped': daySelected === 1, 'borderLeft': true}" @click="scopeDay(1)">日</span>
            <span :class="{'scopeEle': true, 'ifScoped': daySelected === 2}" @click="scopeDay(2)">月</span>
            <span :class="{'scopeEle': true, 'ifScoped': daySelected === 3, 'borderRight': true}" @click="scopeDay(3)">年</span>
          </div>
        </div>
        <line-chart :lineList="lineList"></line-chart>
      </div>
      <div class="chartDiv">
        <div class="title">
          <span>各牧场母猪存栏比较</span>
        </div>
        <his-chart :hisList="hisList"></his-chart>
      </div>
      <div class="chartDiv">
        <div class="title">
          <span>牧场排名</span>
        </div>
        <!-- 查询 -->
        <div class="form_item">
          <el-form :inline="true" size="mini">
            <el-form-item label="母猪存栏:">
              <el-input style="width: 50px;" v-model="searchForm.pigAllMin"></el-input>
              &nbsp;至&nbsp;
              <el-input style="width: 50px;" v-model="searchForm.pigAllMax"></el-input>
            </el-form-item>
            <el-form-item label="母猪新增:">
              <el-input style="width: 50px;" v-model="searchForm.pigAddMin"></el-input>
              &nbsp;至&nbsp;
              <el-input style="width: 50px;" v-model="searchForm.pigAddMax"></el-input>
            </el-form-item>
            <el-form-item label="耳标离线:">
              <el-input style="width: 50px;" v-model="searchForm.eartagMin"></el-input>
              &nbsp;至&nbsp;
              <el-input style="width: 50px;" v-model="searchForm.eartagMax"></el-input>
            </el-form-item>
            <el-form-item label="能繁母猪:">
              <el-input style="width: 50px;" v-model="searchForm.bearPigMin"></el-input>
              &nbsp;至&nbsp;
              <el-input style="width: 50px;" v-model="searchForm.bearPigMax"></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%;"
            @row-click="rowClick">
            <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 label="母猪存栏">
              <el-table-column
                label="存栏量">
              </el-table-column>
              <el-table-column
                label="省排名">
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop="eartagNew"
              label="母猪存栏月增长">
              <el-table-column
                label="存栏月环比增长量">
              </el-table-column>
              <el-table-column
                label="省排名">
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop="eartagNew"
              label="MSY">
              <el-table-column
                label="MSY">
              </el-table-column>
              <el-table-column
                label="省排名">
              </el-table-column>
            </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>
          <table-footer
            :totals="totalPages"
            :size="pageSize"
            @sizeChange="sizeChange"
            @pageChange="pageChange"></table-footer>
        </div>
      </div>
    </div>
    <el-button @click="toCollectDay">每日汇总</el-button>
  </div>
</template>

<script>
import lineChart from './charts/lineChart.vue'
import hisChart from './charts/hisChart.vue'
import areaZz from '../../components/areaZz.vue'
import TableFooter from "../../components/TableFooter"
import {mapState, mapMutations} from 'vuex';
export default {
  name: "collectData",
  data () {
    return {
      areaSelected: '330000',
      boxList: [
        {
          id: 1,
          name: '母猪总存栏',
          value: 25000,
        },
        {
          id: 2,
          name: '预计年出栏量',
          value: 500000
        },
        {
          id: 3,
          name: '母猪目标存栏',
          value: 40000
        },
        {
          id: 4,
          name: '目标年出栏量',
          value: 800000
        }
      ],
      daySelected: 1, // 年月日选中值，默认月
      timeSelected: '', // 时间选择器选中的时间
      monthSelected: '', // 月份选择
      startYear: '',
      endYear: '',
      // 母猪总存栏走势
      lineList: [],
      // 母猪存栏比较
      hisList: [],
      searchForm: {
        pigAllMin: '', // 母猪存栏
        pigAllMax: '',
        pigAddMin: '', // 母猪新增
        pigAddMax: '',
        eartagMin: '', // 耳标离线
        eartagMax: '',
        bearPigMin: '', // 能繁母猪
        bearPigMax: ''
      },
      tableData: [
        {
          name: '测试牧场'
        }
      ],
      totalPages: 0,
      pageNum: 1,
      pageSize: 20
    }
  },
  computed: {
    ...mapState(['selected'])
  },
  components: {
    lineChart,
    hisChart,
    areaZz,
    TableFooter
  },
  methods: {
    ...mapMutations(['updateSelected']),
    /* 年月日选择 */
    scopeDay (val) {
      this.daySelected = val
      switch (val) {
        case 1: // 日
          this.initEchart()
          break;
        case 2: // 月
          this.initEchart()
          break;
        case 3: // 年
          this.initEchart()
          break;
        default:
          break;
      }
    },
    toCollectDay () {
      this.$router.push('/collectDay')
    },
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
    },
    // echarts 图的数据
    initEchart () {
      let data = {}
      if(this.daySelected === 1) {
        data = {
          regionCode: this.areaSelected,
          start: this.timeSelected[0] ? this.timeSelected[0]: '',
          end: this.timeSelected[1] ? this.timeSelected[1]: '',
          type: this.daySelected
        }
      } else if(this.daySelected === 2) {
        data = {
          regionCode: this.areaSelected,
          start: this.monthSelected[0] ? this.monthSelected[0] : '',
          end: this.monthSelected[1] ? this.monthSelected[1] : '',
          type: this.daySelected
        }
      } else {
        data = {
          regionCode: this.areaSelected,
          start: this.startYear ? this.startYear : '',
          end: this.endYear ? this.endYear : '',
          type: this.daySelected
        }
      }
      this.$http({
        url: this.$http.adornUrl(`http://122.112.224.199:9000/dataAnalysis/getPigStockByRegionCode`),
        method: 'post',
        data: this.$http.adornData(data)
      }).then(res => {
        if(res.data.code === 0) {
          this.lineList = [res.data.dateList, res.data.stockList];
        }
      })
    },
    // 牧场排名的查询
    search () {
      console.log('查询');
    },
    // 牧场排名 - 表格
    init () {
      this.$http({
        url: this.$http.adornUrl(`http://192.168.1.171:8210/management/sowranktable/list`),
        method: 'post',
        data: this.$http.adornData({
          'page': this.pageNum,
          'limit': this.pageSize
        })
      }).then(res => {
      //   if(data.code === 0) {
        console.log(res);
      //     this.tableData = data.
      //   } else {
      //     this.hisList = [];
      //   }
      })
    },
    // 点击表格的某一行
    rowClick (row) {
      console.log(row);
      console.log('点击了某一行');
    },
    // 省市县
    getCityCode (val) {
      console.log(val);
      let len = val.length
      this.areaSelected = val[len-1]
      this.initCom();
    },
    onChange() {
      if(this.daySelected === 3) {
        if(this.startYear > this.endYear) {
          this.$message.error('起始年份不能大于终止年份')
          this.startYear = '';
          this.endYear = '';
          return false;
        } else {
          this.initEchart()
        }
      } else {
        this.initEchart()
      }
    },
    // 存栏比较
    initCom() {
      let params = {
        regionCode: this.areaSelected
      }
      this.$http({
        url: this.$http.adornUrl('http://122.112.224.199:9000/dataAnalysis/childPigStock'),
        method: 'get',
        params: this.$http.adornParams(params)
      })
      .then(res => {
        if(res.data.code === 0) {
          this.hisList = [res.data.regionList, res.data.regionStockList];
        } else {
          this.hisList = [];
        }
      })
    },
    // 跳转
    onSelect() {
      this.updateSelected(1);
      this.$router.push({
        path: '/',
        query: {farmCode: 'N0003', type: 4}
      })
    }
  },
  mounted() {
    this.initEchart();
    this.initCom();
    // this.init()
  },
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 140px;
  background-color: #F9F9F9;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* 汇总数据块的顶栏 */
.box_item {
  width: 198px;
  height: 78px;
  border: 1px solid #ddd;
  text-align: center;
}
.box_item p {
  height: 39px;
  line-height: 39px;
  margin: 0;
}

/* 图表结构的大局 */
.chartDiv {
  margin: 10px;
  margin-top: 20px;
  border: 1px solid #ddd;
  height: 305px;
  background-color: #fff;
}

.title {
  background-color: rgba(243, 243, 243, 1);
  height: 50px;
  line-height: 50px;
  padding-left: 50px;
  font-size: 14px;
  border-bottom: 1px solid #ddd;
}

.right {
  float: right;
  margin-right: 20px;
  font-size: 12px;
}

/** 年月日选择 */
.scopeEle {
  display: inline-block;
  border: 1px solid #ccc;
  width: 75px;
  text-align: center;
  height: 26px;
  line-height: 26px;
  margin-left: -1px;
  cursor: pointer;
  background-color: #fff;
}
.borderLeft {
  border-radius: 5px 0 0 5px;
}
.borderRight {
  border-radius: 0 5px 5px 0 ;
}
/* 如果选中了 */
.ifScoped {
  background-color: #1abc9c;
  color: #fff;
  border: 1px solid #1abc9c;
}
.form_item {
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  padding: 15px;
  margin-top: 15px;
}
.box_table {
  width: 100%;
  box-sizing: border-box;
  margin-top: 15px;
  padding-right: 10px;
  /*padding: 10px;*/
}
</style>