huimv_cloud_client/src/views/pastureData/dayData.vue

<template>
  <div class="home">
    <div class="header_title">耳标数据</div>
    <div style="padding-top: 40px;">
      <div class="box" v-if="show">
        <div class="box_item">
          <p>母猪存栏</p>
          <p>{{pigData.stockTotal}}</p>
        </div>
        <div class="box_item">
          <p>能繁母猪存栏</p>
          <p>{{pigData.sowStock}}</p>
        </div>
        <div class="box_item">
          <p>配怀存栏</p>
          <p>{{pigData.stock1}}</p>
        </div>
        <div class="box_item">
          <p>分娩存栏</p>
          <p>{{pigData.stock2}}</p>
        </div>
        <div class="box_item">
          <p>母猪新增</p>
          <p>{{pigData.stockNew}}</p>
        </div>
        <div class="box_item">
          <p>耳标离线</p>
          <p>{{pigData.offlineNo}}</p>
        </div>
      </div>
      <div class="form_item">
        <el-form :inline="true" size="mini">
          <el-form-item label="时间:">
            <el-date-picker
                v-model="value1"
                type="date"
                :clearable="false"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <!--        <el-form-item label="牧场:">-->
          <!--          <el-select filterable style="width: 120px;"></el-select>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="栋舍:">-->
          <!--          <el-select filterable style="width: 120px;"></el-select>-->
          <!--        </el-form-item>-->
          <el-form-item label="采集器编码:">
            <el-input v-model="deviceCode" ></el-input>
          </el-form-item>
          <el-form-item label="耳标号:">
            <el-input v-model="eartagNo"></el-input>
          </el-form-item>
          <!--        <el-form-item label="配标日龄:">-->
          <!--          <el-select filterable style="width: 120px;"></el-select>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="日龄:">-->
          <!--          <el-select filterable style="width: 120px;"></el-select>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="耳根温度:">-->
          <!--          <el-select filterable style="width: 120px;"></el-select>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="环境温度:">-->
          <!--          <el-select filterable style="width: 120px;"></el-select>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="耳标电量:">-->
          <!--          <el-select filterable style="width: 120px;"></el-select>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="信号强度:">-->
          <!--          <el-select filterable style="width: 120px;"></el-select>-->
          <!--        </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
            v-loading="loading"
            :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"
            style="width: 100%;">
          <el-table-column
              prop="time"
              label="最近采集时间"
              width="160">
          </el-table-column>
          <el-table-column
              prop="eartagNo"
              label="耳标号"
              width="150">
          </el-table-column>
          <el-table-column
              prop="tail"
              label="配标时间"
              width="160">
          </el-table-column>
          <el-table-column
              prop="dayAge"
              label="佩标日龄">
          </el-table-column>
          <el-table-column
              prop="dayAge2"
              label="日龄">
          </el-table-column>
          <el-table-column
              label="耳根温度">
            <template slot-scope="scope">
              <span>{{scope.row.earTemp}}℃</span>
            </template>
          </el-table-column>
          <el-table-column
              label="环境温度">
            <template slot-scope="scope">
              <span>{{scope.row.envTemp}}℃</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="exercise"
              label="运动量">
          </el-table-column>
          <el-table-column
              label="电池电量">
            <template slot-scope="scope">
              <span>{{scope.row.bat}}%</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="rssi"
              label="信号强度">
            <template slot-scope="scope">
              <span>-{{scope.row.rssi}}db</span>
            </template>
          </el-table-column>
          <el-table-column
              label="阶段">
            <template slot-scope="scope">
              <span>{{getStage(scope.row.stage)}}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="栋舍">
            <template slot-scope="scope">
              <span>{{scope.row.version}}{{scope.row.command}}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="deviceCode"
              label="采集器编码"
              width="150">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="open(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <table-footer
            :totals="totalPages"
            :size="pageSize"
            @sizeChange="sizeChange"
            @pageChange="pageChange"></table-footer>
      </div>
    </div>
  </div>
</template>

<script>
import TableFooter from "../../components/TableFooter";
import utils from '../../utils/index';
export default {
  name: "dayData",
  components: {
    TableFooter
  },
  data() {
    return {
      value1: utils.timestamp(new Date().getTime()),
      totalPages: 0,
      pageNum: 1,
      pageSize: 20,
      tableData: [],
      pigData: {},
      farmCode: '330703010000422',
      farmName: '',
      eartagNo: '',
      deviceCode: '',
      show: true,
      options: [
        {
          id: 1,
          name: '配怀'
        },
        {
          id: 2,
          name: '分娩'
        },
        {
          id: 3,
          name: '保育'
        },
        {
          id: 4,
          name: '育成育肥'
        },
        {
          id: 5,
          name: '空怀'
        },
        {
          id: 6,
          name: '后备母猪'
        },
        {
          id: 7,
          name: '公猪'
        },
        {
          id: 8,
          name: '病死猪场内收集'
        },
        {
          id: 9,
          name: '病死猪无害化'
        },
      ],
      loading: true,
      isParent: false,
    }
  },
  methods: {
    // 过滤
    getStage(id) {
      let str = '';
      this.options.forEach(item => {
        if(item.id === id) {
          str = item.name;
        }
      })
      return str;
    },
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.initTable()
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.initTable()
    },
    renderHeader(createElement, { column }) {
      const label = column.label
      const labelArr = label.split(' ')
      return createElement(
          'span',     //创建最外层的标签可随意
          [
            createElement('span', {  // 创建第一个元素的标签可随意
              attrs: { type: 'text' }
            },[labelArr[0]] ),
            createElement('div', {  // 创建第二个元素的标签可随意
              attrs: { type: 'text', style: 'font-size:14px' } // 给分割的某个元素单独加样式
            }, [labelArr[1] || ''] )
          ]
      )
    },
    search() {
      this.init();
      this.initTable();
    },
    // 初始化
    init() {
      let params = {
        farmCode: this.farmCode,
        date: this.value1,
      }
      this.$http({
        url: this.$http.adornUrl('http://122.112.224.199:9000/manager/dailytabulatedata/listByFarm'),
        method: 'get',
        params: this.$http.adornParams(params)
      })
          .then(res => {
            if(res.data.code === 0) {
              if(res.data.page != null) {
                this.show = true;
                this.pigData = res.data.page;
              } else {
                this.show = false;
              }
            }
          })
    },
    // 初始化表格
    initTable() {
      this.loading = true;
      let starttime = String(`${this.value1} 00:00:00`);
      let endtime = String(`${this.value1} 23:59:59`);
      let fromData = new FormData();
      fromData.append('farmID', this.farmCode);
      fromData.append('starttime', starttime);
      fromData.append('endtime', endtime);
      fromData.append('page', this.pageNum);
      fromData.append('limit', this.pageSize);
      // let data = {
      //   farmID: this.farmCode,
      //   starttime: starttime,
      //   endtime: endtime,
      //   page: this.pageNum,
      //   limit: this.pageSize
      // }
      if(this.eartagNo !== ''){
        fromData.append('eartagNo', this.eartagNo);
        // data.eartagNo = this.eartagNo;
      }
      if(this.deviceCode !=='') {
        fromData.append('deviceCode', this.deviceCode);
        // data.deviceCode = this.deviceCode;
      }
      //http://122.112.224.199:9500/manager/eartagdata/findByConditions
      this.$http({
        url: this.$http.adornUrl("http://122.112.224.199:9500/manager/eartagdata/findByConditions"),
        method: 'post',
        data: fromData,
      }).then(res => {
        this.loading = false;
        if(res.data.code === 0) {
          this.tableData = res.data.page.list;
          this.totalPages = res.data.page.totalCount;
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(() => {
        this.loading = false;
      })
    },
    open(row) {
      let endTime = new Date().getTime();
      let startTime = endTime - 3600 * 1000 * 24;
      this.$router.push({
        path: '/dataDetail',
        query: {
          id: row.id,
          startTime: utils.timeDate(startTime),
          endTime: utils.timeDate(endTime)
        }
      })
    },
  },
  mounted() {
    let farmCode = this.$route.query.farmCode;
    if(farmCode) {
      this.farmCode = farmCode;
    }
    this.init();
    this.initTable();
  }
}
</script>

<style scoped>
/deep/ .el-form--inline .el-form-item {
  margin-right: 15px;
}
.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;
}
.form_item {
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  padding: 10px 5px 0 12px;
}
.box_table {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.header_title {
  position: fixed;
  width: 1640px;
  height: 40px;
  background-color: #F7F7F7;
  border: 1px solid #ddd;
  line-height: 40px;
  color: #6FA8C8;
  margin-bottom: 10px;
  padding-left: 20px;
  z-index: 99;
}
</style>