huimv_cloud_client/src/views/collectData/collectData.vue

<template>
  <div>
    <div class="header_title">数据分析</div>
    <div class="collectData">

      <!-- 汇总数据的 nav -->
      <div class="box">
        <div class="box_item" v-for="item in boxList" :key="item.id">
          <p>{{item.name}}</p>
          <p>{{item.value}}</p>
        </div>
      </div>

      <div class="conditions">
        <el-form inline size="mini" label-width="110px">
          <el-form-item label="区域选择：" style="width: 310px">
            <!-- <el-input v-model="searchForm.registerTime" placeholder=""></el-input> -->
            <area-zz :countyCode="330000" @getCityCode="getCityCode" style="width: 200px"></area-zz>
          </el-form-item>
          <el-form-item style="margin-left: 55px">
            <el-button type="primary" @click="selectCity">查询</el-button>
            <!-- <el-button plain type="info" @click="resetForm('searchForm')">清空</el-button> -->
          </el-form-item>
        </el-form>
      </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>各{{ range }}母猪存栏比较</span>
          </div>
          <div>
            <his-chart :hisList="hisList"></his-chart>
          </div>
        </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"
              @row-click="rowClick">
              <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.stop="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>
  </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 {
      range: '市',
      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
      this.init()
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val
      this.init()
    },
    // 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 () {
      this.init()
    },
    // 牧场排名 - 表格
    init () {
      this.$http({
        url: this.$http.adornUrl(`http://122.112.224.199:9500/management/sowranktable/list`),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageNum,
          'limit': this.pageSize,
          'maxSowCount': this.searchForm.pigAllMax || undefined,
          'minSowCount': this.searchForm.pigAllMin || undefined,
          'maxSowInc': this.searchForm.pigAddMax || undefined,
          'minSowInc': this.searchForm.pigAddMin || undefined,
        })
      }).then(({data}) => {
        if(data.code === 0) {
          this.tableData = data.page.list
          this.totalPages = data.page.totalCount
        } else {
          this.hisList = [];
        }
      })
      // 放一下上面的母猪总存栏 母猪目标存栏...
      this.$http({
        url: this.$http.adornUrl(`http://122.112.224.199:9000/management/stockout/findByCode`),
        method: 'get'
      }).then(({data}) => {
        if(data.code === 0) {
          this.boxList[0].value = data.data[0].sowTotalStock
          this.boxList[1].value = data.data[0].sowPlanStock
          this.boxList[2].value = data.data[0].expectOut
          this.boxList[3].value = data.data[0].planOut
        } else {
          // this.hisList = [];
        }
      })
    },
    // 点击表格的某一行
    rowClick (row) {
      this.updateSelected(1);
      this.$router.push({
        path: '/',
        query: {farmCode: row.farmCode, type: 4, isColl: true}
      })
    },
    // 牧场对比
    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]
      const ranges = {
        1: '市',
        2: '县',
        3: '牧场'
      }
      this.range = ranges[len]
      // this.initCom();
    },
    selectCity () {
      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>
.header_title {
  height: 40px;
  background-color: #F7F7F7;
  border: 1px solid #ddd;
  line-height: 40px;
  color: #6FA8C8;
  margin-bottom: 10px;
  padding-left: 20px;
  position: fixed;
  width: 1660px;
  z-index: 1000;
}
.box {
  width: 100%;
  height: 140px;
  background-color: #F9F9F9;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* margin-right: 10px; */
}

/* 汇总数据块的顶栏 */
.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;
  margin-left: 0;
  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;
}
/** 选择条件 */
.conditions {
  /* width: 100%; */
  background-color: #fff;
  margin: 30px 0;
  border: 1px solid #ddd;
  padding: 20px;
  padding-bottom: 10px;
}
.collectData {
  padding-top: 40px;
}
</style>