Tmr-Admin/src/views/statisticalAnalysis/errorAnalysis/group/tab2.vue

<template>
  <div class="app-container">
    <div class="search">
      <div>
        <el-date-picker v-model="table.getdataListParm.parammaps.inputDatetime" :clearable="false" style="width: 250px;float: left;margin-bottom: 10px;" class="inputDatetime filter-item" type="daterange" :range-separator="$t('common.to')"  :start-placeholder="$t('common.startTime')"" :end-placeholder="$t('common.endTime')" :picker-options="pickerOptions" />
        <el-button style="float: left;margin-bottom: 10px;" class="el-icon-arrow-left elIconArrowLeft" :disabled="Beforedisabled" @click="handleBefore" />
        <el-button style="float: left;margin-bottom: 10px;" class="el-icon-arrow-right elIconArrowRight" :disabled="Nextdisabled" @click="handleNext" />
      </div>
      <div style="clear: both;">
        <el-select v-model="table.getdataListParm.parammaps.pastureid" placeholder="牧场" class="filter-item" style="width: 120px;float: left;">
          <el-option v-for="item in pastureList" :key="item.pastureid" :label="item.pasturename" :value="item.pastureid" />
        </el-select>
        <el-input v-model="table.getdataListParm.parammaps.tmrtname" style="width: 110px;float: left;"  :placeholder="$t('processAnalysis.tmrName')"   class="filter-item" clearable />
        <el-input v-model="table.getdataListParm.parammaps.projname" style="width: 100px;float: left;" :placeholder="$t('errorAnalysis.projname')"  class="filter-item" clearable />
        <el-select v-model="table.getdataListParm.parammaps.times" style="width: 100px;float: left;" filterable :placeholder="$t('errorAnalysis.isTrainNumber')"  class="filter-item" clearable>
          <el-option v-for="item in frequencyList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-input v-model="table.getdataListParm.parammaps.templetname" style="width: 120px;float: left;" placeholder="配方名称" class="filter-item" clearable />
        <el-select v-model="table.getdataListParm.parammaps.buttontype" style="width: 120px;float: left;" filterable placeholder="跳转方式" class="filter-item" clearable>
          <el-option v-for="item in jumpModeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-select v-model="table.getdataListParm.parammaps.isuse" style="width: 120px;float: left;" filterable placeholder="上传状态" class="filter-item" clearable>
          <el-option v-for="item in isuseList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-button class="successBorder" @click="form_search">{{$t('common.query')}}</el-button>
        <el-button class="successBorder" @click="handleRefresh">{{$t('common.reset')}}</el-button>
        <el-button class="export" style="float: right;margin-right: 10px;margin-bottom:10px;" @click="handleExport"{{$t('dashboard.Export')}}/el-button>
      </div>
    </div>

    <div class="table">
      <el-table
        :key="table.tableKey"
        v-loading="table.listLoading"
        element-loading-text="给我一点时间"
        :data="table.list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        class="elTable table-fixed"
        :height="myHeight2"
      >
        <el-table-column label="牧场" min-width="90px" align="center" prop="牧场" />
        <el-table-column :label="$t('errorAnalysis.date')" min-width="70px" align="center" prop="日期" />
        <el-table-column label="TMR名称" min-width="70px" align="center" prop="TMR名称" />
        <el-table-column label="车次" min-width="50px" align="center" prop="车次" />
        <el-table-column label="班次" min-width="50px" align="center" prop="班次" />
        <el-table-column  :label="$t('errorAnalysis.feedName')"  min-width="90px" align="center" prop="配方名称" />
        <el-table-column label="饲料" min-width="70px" align="center" prop="饲料" />
        <el-table-column  :label="$t('errorAnalysis.llzl')"  min-width="55px" align="center" prop="理论重量" />
        <el-table-column  :label="$t('errorAnalysis.acWeight')"  min-width="55px" align="center" prop="实际重量" />
        <el-table-column label="误差值" min-width="45px" align="center" prop="误差值" />
        <el-table-column :label="$t('errorAnalysis.zql')" min-width="45px" align="center" prop="准确率" />
        <el-table-column label="计划时间" min-width="55px" align="center" prop="计划时间" />
        <el-table-column label="开始时间" min-width="55px" align="center" prop="开始时间" />
        <el-table-column label="结束时间" min-width="55px" align="center" prop="结束时间" />
        <el-table-column label="搅拌时间" min-width="55px" align="center" prop="搅拌时间" />
        <el-table-column label="跳转方式" min-width="55px" align="center" prop="跳转方式" />
        <el-table-column label="开始重量" min-width="55px" align="center" prop="开始重量" />
        <el-table-column label="结束重量" min-width="55px" align="center" prop="结束重量" />
      </el-table>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons')
import { GetDataByName, GetReportform, GetDataByNames } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import Pagination from '@/components/Pagination'
import { json2excel } from '@/utils/index.js'
import { MessageBox } from 'element-ui'
export default {
  name: 'Tab2',
  components: { Pagination },
  data() {
    return {
      Beforedisabled: false,
      Nextdisabled: false,
      pickerMinDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) {
            this.pickerMinDate = ''
          }
        },
        // 限制不能选择今天之后的日期
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const one = 31 * 24 * 3600 * 1000
            const minTime = this.pickerMinDate - one
            let maxTime = this.pickerMinDate + one
            if (maxTime > new Date()) {
              maxTime = new Date()
            }
            return time.getTime() < minTime || time.getTime() > maxTime
          }
          return time.getTime() > Date.now()
        }
      },
      requestParams: [
        { name: 'getPastureListJT', offset: 0, pagecount: 0, parammaps: { pastureid: Cookies.get('pastureid'), pasturename: '' }}
      ],
      pastureList: [], // 牧场
      // 班次
      maxTime: {
        getMaxTimesParm: {
          name: 'getSysoptEnable',
          page: 1,
          offset: 1,
          pagecount: 1,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            inforname: 'times'
          }
        }
      },
      frequencyList: [],
      jumpModeList: [{ id: '0', name: '手动跳转' }, { id: '1', name: '自动跳转' }],
      isuseList: [{ id: '0', name: '未完成' }, { id: '2', name: '部分完成' }, { id: '1', name: '全部完成' }],
      table: {
        getdataListParm: {
          name: 'getStatisticsHL',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            startTime: parseTime(new Date(), '{y}-{m}-{d}'),
            stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
            inputDatetime: [new Date(), new Date()],
            tmrtname: '',
            projname: '',
            times: '',
            buttontype: '',
            templetname: ''
          }
        },
        tableKey: 1,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },

      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      myHeight2: document.documentElement.clientHeight - 85 - 210
    }
  },
  created() {
    this.getTimeFn()
    this.getDownList()
    this.getIsDisplay()
  },
  activated() {
    this.getDownList()
    this.getIsDisplay()
  },
  methods: {
    getTimeFn() {
      const that = this
      const start = new Date()
      const end = new Date()
      const start2 = new Date()
      const end2 = new Date()
      start2.setTime(start2.getTime() - 3600 * 1000 * 24 * 1)
      end2.setTime(end2.getTime() - 3600 * 1000 * 24 * 1)
      that.table.getdataListParm.parammaps.inputDatetime = [start2, end2]
      that.table.getdataListParm.parammaps.startTime = parseTime(start2, '{y}-{m}-{d}')
      that.table.getdataListParm.parammaps.stopTime = parseTime(end2, '{y}-{m}-{d}')
    },
    getIsDisplay() {
      GetDataByName(this.maxTime.getMaxTimesParm).then(response => {
        if (response.data.list[0].inforvalue == 1) {
          this.frequencyList = [{ id: '1', name: '第一班' }]
          this.frequencyList = [{ id: '1', name: '第一班' }]
        } else if (response.data.list[0].inforvalue == 2) {
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }]
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }]
        } else if (response.data.list[0].inforvalue == 3) {
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }, { id: '3', name: '第三班' }]
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }, { id: '3', name: '第三班' }]
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }, { id: '3', name: '第三班' }]
        } else if (response.data.list[0].inforvalue == 4) {
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }, { id: '3', name: '第三班' }, { id: '4', name: '第四班' }]
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }, { id: '3', name: '第三班' }, { id: '4', name: '第四班' }]
        }
      })
    },
    getDownList() {
      GetDataByNames(this.requestParams).then(response => {
        this.pastureList = response.data.getPastureListJT.list
        this.table.getdataListParm.parammaps.pastureid = response.data.getPastureListJT.list[0].pastureid
        this.getList()
      })
    },
    getList() {
      this.table.listLoading = true
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('混料统计table数据', response.data.list)
        if (response.data.list !== null) {
          this.table.list = response.data.list
          this.table.total = response.data.total
        } else {
          this.table.list = []
        }
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    form_search() {
      this.table.getdataListParm.name = 'getStatisticsHL'
      if (this.table.getdataListParm.parammaps.inputDatetime !== '' && this.table.getdataListParm.parammaps.inputDatetime !== null) {
        console.log(this.table.getdataListParm.parammaps.inputDatetime)
        this.table.getdataListParm.parammaps.startTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
        this.table.getdataListParm.parammaps.stopTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
      } else {
        this.table.getdataListParm.parammaps.inputDatetime = ''
        this.table.getdataListParm.parammaps.startTime = ''
        this.table.getdataListParm.parammaps.stopTime = ''
      }
      this.table.getdataListParm.offset = 1
      this.getList()
    },
    handleRefresh() {
      this.table.getdataListParm.parammaps.tmrtname = ''
      this.table.getdataListParm.parammaps.projname = ''
      this.table.getdataListParm.parammaps.times = ''
      this.table.getdataListParm.parammaps.templetname = ''
      this.table.getdataListParm.parammaps.buttontype = ''
      this.getList()
    },
    handleBefore() {
      if (this.table.getdataListParm.parammaps.inputDatetime !== '' && this.table.getdataListParm.parammaps.inputDatetime !== null) {
        var start = new Date(this.table.getdataListParm.parammaps.inputDatetime[0].setDate(this.table.getdataListParm.parammaps.inputDatetime[0].getDate() - 1))
        var stop = new Date(this.table.getdataListParm.parammaps.inputDatetime[1].setDate(this.table.getdataListParm.parammaps.inputDatetime[1].getDate() - 1))
        if (stop > Date.now() - 8.64e7) {
          this.Nextdisabled = true
          this.Beforedisabled = false
        } else {
          this.Nextdisabled = false
          this.Beforedisabled = false
        }
        this.table.getdataListParm.parammaps.inputDatetime.length = 0
        this.table.getdataListParm.parammaps.inputDatetime.push(start, stop)
        this.$forceUpdate()
      }
      this.table.getdataListParm.parammaps.startTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
      this.table.getdataListParm.parammaps.stopTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
      this.getList()
    },
    handleNext() {
      if (this.table.getdataListParm.parammaps.inputDatetime !== '' && this.table.getdataListParm.parammaps.inputDatetime !== null) {
        var start2 = new Date(this.table.getdataListParm.parammaps.inputDatetime[0].setDate(this.table.getdataListParm.parammaps.inputDatetime[0].getDate() + 1))
        var stop2 = new Date(this.table.getdataListParm.parammaps.inputDatetime[1].setDate(this.table.getdataListParm.parammaps.inputDatetime[1].getDate() + 1))
        if (stop2 > Date.now() - 8.64e7) {
          this.Nextdisabled = true
          this.Beforedisabled = false
        } else {
          this.Nextdisabled = false
          this.Beforedisabled = false
        }
        this.table.getdataListParm.parammaps.inputDatetime.length = 0
        this.table.getdataListParm.parammaps.inputDatetime.push(start2, stop2)
        this.$forceUpdate()
      }
      this.table.getdataListParm.parammaps.startTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
      this.table.getdataListParm.parammaps.stopTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
      this.getList()
    },
    handleExport() {
      var excelDatasTab2 = [
        {
          tHeader: ['日期', 'TMR名称', '车次', '班次', '配方名称', '饲料', '理论重量', '实际重量', '误差值', '准确率', '计划时间', '开始时间', '结束时间', ' 跳转方式', '开始重量', '结束重量', '搅拌时间'],
          filterVal: ['日期', 'TMR名称', '车次', '班次', '配方名称', '饲料', '理论重量', '实际重量', '误差值', '准确率', '计划时间', '开始时间', '结束时间', '跳转方式', '开始重量', '结束重量', '搅拌时间'],
          tableDatas: this.table.list,
          sheetName: '混料统计'
        }
      ]
      json2excel(excelDatasTab2, '混料统计', true, 'xlsx')
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table th>.cell{
    padding-left: 0 !important;;
    padding-right: 0 !important;;
  }
  /deep/ .el-table td>.cell{
    padding-left: 0 !important;;
    padding-right: 0 !important;;
  }
</style>