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="母猪存栏:" style="width: 270px">
              <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="母猪新增:" style="width: 270px">
              <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="耳标离线:" style="width: 270px">
              <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="能繁母猪:" style="width: 270px">
              <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%;"
            @selection-change="selectFarm"
            ref="table">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="牧场名"
              prop="farmName">
            </el-table-column>
            <el-table-column label="母猪存栏">
              <el-table-column
                label="存栏量"
                prop="sowLivestock">
              </el-table-column>
              <el-table-column
                label="省排名"
                prop="sowLivestockRank">
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="母猪存栏月增长">
              <el-table-column
                label="存栏月环比增长量"
                prop="sowLivestockInc">
              </el-table-column>
              <el-table-column
                label="省排名"
                prop="sowLivestockIncRank">
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="MSY">
              <el-table-column
                label="MSY"
                prop="sowMsy">
              </el-table-column>
              <el-table-column
                label="省排名"
                prop="sowMsyRank">
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop="outStockCount"
              label="今年累计出栏量">
            </el-table-column>
            <el-table-column
              prop="outStockExpected"
              label="预计年出栏量">
            </el-table-column>
            <el-table-column
              prop="ainOutStock"
              label="目标年出栏量">
            </el-table-column>
            <el-table-column
              prop="finishPercent"
              label="目标完成度">
            </el-table-column>
            <el-table-column
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <table-footer
            :totals="totalPages"
            :size="pageSize"
            @sizeChange="sizeChange"
            @pageChange="pageChange">
          </table-footer>
          <!-- 对比框 -->
          <div v-show="constrastShow" class="constrast_box">
            <el-card style="height: 100%">
              <div class="card_title">
                <span>对比框（{{constrastNum}}/8）</span>
                <i class="el-icon-circle-close card_icon" @click="closeConstrast"></i>
              </div>
              <!-- 被选中的牧场 -->
              <div class="card_body">
                <ul class="card_ul">
                  <li 
                    v-for="item in cardFarms"
                    :key="item.id">
                    {{ item.farmName }}
                  </li>
                </ul>
              </div>
              <div class="card_footer">
                <el-button plain size="small" @click="handleClear">清 空</el-button>
                <el-button type="primary" size="small" @click="handleConstrast">对 比</el-button>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
    <update ref="update" @refreshData="init"></update>
  </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 update from './update.vue'
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,
      constrastNum: 0, // 对比框中的牧场数量
      constrastShow: false, // 对比框是否显示
      cardFarms: []
    }
  },
  computed: {
    ...mapState(['selected'])
  },
  components: {
    lineChart,
    hisChart,
    areaZz,
    TableFooter,
    update
  },
  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://122.112.224.199:9500/management/sowranktable/list`),
        method: 'get',
        data: this.$http.adornData({
          'page': this.pageNum,
          'limit': this.pageSize
        })
      }).then(({data}) => {
        if(data.code === 0) {
          this.tableData = data.page.list
        } else {
          this.hisList = [];
        }
      })
    },
    // // 点击表格的某一行
    // rowClick (row) {
    //   console.log(row);
    //   console.log('点击了某一行');
    // },
    // 牧场对比
    selectFarm (val) {
      this.constrastShow = true
      this.constrastNum = val.length
      this.cardFarms = val
      if (this.constrastNum === 0) {
        this.constrastShow = false
      }
    },
    // 关闭对比框
    closeConstrast () {
      this.constrastShow = false
    },
    // 清空牧场对比
    handleClear () {
      console.log('清空--------------------');
      this.cardFarms = []
      this.$refs.table.clearSelection()
    },
    // 进入 对比页面
    handleConstrast () {
      this.$router.push({
        name: 'collectFarm',
        params: {
          row: this.cardFarms
        }
      })
    },
    // 表格 - 编辑 - 更新数据
    handleEdit (row) {
      this.$nextTick(() => {
        this.$refs.update.init(row)
      })
    },
    // 省市县
    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;
  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;
  position: relative;
  /*padding: 10px;*/
}

/** 对比框 */
.constrast_box {
  width: 220px;
  height: 340px;
  position: absolute;
  right: 50px;
  top: 10%;
  background-color: #fff;
}
/* 去除 el-card 自带的 padding */
/deep/ .el-card__body {
  padding: 0;
}
/* 对比框的 title */
.card_title {
  font-weight: 700;
  font-size: 17px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #eee;
  padding: 15px 20px;
  border-bottom: 1px solid #ddd;
}
.card_icon {
  cursor: pointer;
}
/* 对比框的 body */
.card_body {
  border-bottom: 1px solid #ddd;
  height: 200px;
}
.card_ul {
  text-decoration: none;
  list-style: none;
  padding-left: 30px;
}
.card_ul li {
  margin-top: 5px;
  font-size: 14px;
}
/* 对比框的底部按钮 */
.card_footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 15px 20px;
}
</style>