calf-feed-pc/src/views/dataStatistics/FeedProcess.vue

<template>
 
  <div>


    <el-card class="box-card">
      <!-- 搜索区域 -->
      <div class="search-bx1">

        <el-row :gutter="20">
            <el-col :span="24">
              <el-date-picker v-model="searchData.date"  type="date"  placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  :clearable="false" style="width: 180px;"  class="g-mr20  g-mb20" />
 

              <el-select v-model="searchData.feed_plan_id" filterable placeholder="饲喂计划" class="g-mr20" style="width: 180px;" clearable>
                <el-option v-for="item in feedPlanList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="searchData.class_number" filterable placeholder="班次" class="g-mr20  g-mb20" style="width: 180px;" clearable>
                <el-option v-for="item in classList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-select v-model="searchData.feed_vehicle_id" filterable placeholder="饲喂车" class="g-mr20" style="width: 180px;" clearable  @change="change_car">
                <el-option v-for="item in feedCarList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <span>饲喂车编号：</span>
              <el-input v-model="searchData.carNum" placeholder=""  style="width: 180px;" disabled />
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
 
                <el-input v-model="searchData.barn_name" placeholder="栏舍名称"  style="width: 220px;" class="g-mr20  g-mb20" clearable />
                <el-input v-model="searchData.barn_group_name" placeholder="栏舍组名称"  style="width: 220px;" class="g-mr20 " clearable />

                <el-input-number v-model="searchData.min_accurate_ratio" style="width:120px;" :controls="false" placeholder="准确率" />
                <span style="margin:0px 8px;">至</span>
                <el-input-number v-model="searchData.max_accurate_ratio" style="width:120px;" class="g-mr20" :controls="false" placeholder="准确率" />

                <el-input-number v-model="searchData.min_temp" style="width:120px;" :controls="false" placeholder="温差" />
                <span style="margin:0px 8px;">至</span>
                <el-input-number v-model="searchData.max_temp" style="width:120px;" class="g-mr20" :controls="false" placeholder="温差" />

                <el-button type="primary"   @click="form_search">搜索</el-button>
                <el-button type="primary"   @click="form_clear">重置</el-button>
            </el-col>
        </el-row>

 
      </div>

 
      <!-- 表格 -->
      <el-table   key="0"  :data="tableList"  v-loading="tableLoading" element-loading-text="给我一点时间"    border fit>
                <el-table-column label="序号"  width="50px" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="栏舍名称" min-width="120px" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.barn_name  }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="栏舍组名称" min-width="120px" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.barn_group_name  }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="开始日龄" min-width="120px" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.start_age  }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="结束日龄" min-width="120px" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.end_age  }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="计划量(kg)" min-width="120px" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.plan_feed_number  }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="实际量(kg)" min-width="120px" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.reality_feed_number  }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="误差量(kg)" min-width="120px" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.error_number  }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="准确率" min-width="120px" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.accurate_ratio  }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="计划温度°C" min-width="120px" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.plan_temp  }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="温差°C" min-width="120px" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.reality_temp - scope.row.plan_temp  }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="过程时间" min-width="120px" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.process_time  }}</span>
                  </template>
                </el-table-column>

      </el-table>

      <!-- 图表 -->
      <div id="chartLine"  style="width: 100%;height:400px;"></div>

   
    </el-card>


   
 
    
  </div>


</template> 

<script>
import {  ajaxDataGet, ajaxDataPost, ajaxDataPut, ajaxDataDelete, checkButtons} from '@/api/common'
import { parseTime, json2excel } from '@/utils/index.js'
export default {
  data() {


    
 
  
    return {

 

      //接口 - 获取 - 表格
      url_get_table:'/api/v1/ops/statistics/feed_process',
     
      
      //接口 - 下拉框 列表 
      url_get_select1:'/role/getAll',

      //按钮权限
      isButtonEdit:false,

      //获取 - 表格数据 - 参数
      searchData:{
        date: '',
        feed_plan_id: undefined,
        class_number: undefined,
        feed_vehicle_id: undefined,
        barn_name: "",
        barn_group_name: "",
        min_accurate_ratio: undefined,
        max_accurate_ratio: undefined,
        min_temp: undefined,
        max_temp: undefined,
 
        page: 1,  //页码
        page_size: 10,   //每页数量
        total:0,  //总页数
        pastureId: ""
      },
      tableLoading: false,
      //表格内容
      tableList:[
        //  { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123',roleList:[2,3] },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123',roleList:[] },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
      ],


      
      feedPlanList:[
    
      ],
      classList:[
    
      ],
      feedCarList:[
    
    ],
  

 


    
     
       
    }
  },
  created(){
      //获取按钮权限
      // this.get_auto_buttons 
     

     //获取下拉框
      this.get_select_list1()

      //表格 - 初始化 
      this.get_table_data()

     

    
  },
  methods:{

    get_auto_buttons() {
      // 编辑
      const isButtonEdit = checkButtons(this.$store.state.buttonsList, "用户管理编辑")
      this.isButtonEdit = isButtonEdit
      console.log('this.isButtonEdit==========',this.isButtonEdit)
    },
    
    //获取 下拉框
    get_select_list1(){
        var me = this
        ajaxDataPost('/api/v1/ops/formula_plan/list?page=1&page_size=1000', { }).then(e => {
          console.log("饲喂下拉框：",e)

          //打印请求成功结果
          if(e.code === 200){
            me.feedPlanList = e.data.list
          } else {
            me.feedPlanList = []
          }
 
        })


        // 班次下拉框
        ajaxDataGet('/api/v1/ops/calf_feed/enum/list').then(e => {
          console.log("班次下拉框：",e)
          if(e.code === 200){
            me.classList = e.data.class_list
          } else {
            me.classList = []
          }
        })

        ajaxDataPost('/api/v1/ops/base_setting/feed_vehicle/list?page=1&page_size=1000', { }).then(e => {
          console.log("饲喂车下拉框：",e)
          //打印请求成功结果
          if(e.code === 200){
            me.feedCarList = e.data.list
          } else {
            me.feedCarList = []
          }
 
        })

     

     

    
    },

    change_car(item){
      var me = this
      console.log(item)
      var carNum = me.feedCarList.find(obj => obj.id == item).number
      console.log(carNum)
      me.searchData.carNum = carNum
    },
    //获取 表格
    get_table_data() {
 
     var me = this

     me.tableLoading = true
     console.log("searchData======>", me.searchData)

      var send_url = me.url_get_table + '?page=1&page_size=1000'

      ajaxDataPost(send_url,  me.searchData).then(e => {
        console.log("表格请求结果：",e)
          //打印请求成功结果
          if(e.code == 200 ){
            me.tableList = e.data.list
            me.searchData.total = e.data.total;	// 总数
            me.searchData.page = e.data.page;	//页码
            me.searchData.page_size = e.data.page_size;	//每页数量
           
          } else {
            me.$message({ type: 'error', message: '请求表格列表失败！' + e.msg, duration: 2000 })
          }

          setTimeout(() => {
            me.tableLoading = false
          }, 100)
  
        })

       
    },
    //搜索 查询表格
    form_search(){
      var me = this
      console.log('请求表格列表searchData',me.searchData)
      me.get_table_data()

    },

    //重置 表格
    form_clear(){
      var me = this
      me.searchData.name = ""
      me.get_table_data()
    },
 

    
   
 


    
    



  
 
    form_export() {
    //获取请求表格数据的参数
    //this.download.getdataListParm.parammaps = this.tableObj.getdataListParm.parammaps
    //请求表格
    // GetDataByName(this.download.getdataListParm).then(response => {
    //     if (response.data.list !== null) {
    //       this.download.list = response.data.list
    //     } else {
    //       this.download.list = []
    //     }
    //     var excelDatas = [
    //       {
    //         tHeader: ['表头1', '表头2', '表头3', '表头4',],
    //         filterVal: ['title1', 'title2', 'title3', 'title4'],
    //         tableDatas: this.download.list,
    //         sheetName: 'Sheet1'
    //       }
    //     ]
    //     json2excel(excelDatas, '表格大标题', true, 'xlsx')
    // })

    var excelDatas = [
        {
            tHeader: ['表头1', '表头2', '表头3', '表头4',],
            filterVal: ['title1', 'title2', 'title3', 'title4'],
            tableDatas: [ 
                {title1: "内容1",title2: "内容2",title3: "内容3",title4: "内容4"},
                {title1: "内容11",title2: "内容22",title3: "内容32",title4: "内容44"},
                {title1: "内容111",title2: "内容222",title3: "内容333",title4: "内容444"},
            ],
            sheetName: 'Sheet1'
        }
    ]
    json2excel(excelDatas, '表格大标题', true, 'xlsx')
}

     

  }
}
</script>
<!-- 加了scoped，则是仅在此组件里生效 -->
<style scoped>

</style>