|
|
@@ -1,13 +1,234 @@
|
|
|
<template>
|
|
|
- <div>每日数据</div>
|
|
|
+ <div>
|
|
|
+ <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="form_item">
|
|
|
+ <el-form :inline="true">
|
|
|
+ <el-form-item label="时间:">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value1"
|
|
|
+ type="date"
|
|
|
+ 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 style="width: 120px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="耳标号:">
|
|
|
+ <el-input style="width: 120px;"></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>查询</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"
|
|
|
+ style="width: 100%;">
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="采集时间">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="采集器编码">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="耳标号">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="佩标日龄">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ width="180"
|
|
|
+ label="日龄 （佩标日龄+戴标日龄）"
|
|
|
+ :render-header="renderHeader">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="耳根温度">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="运动量">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="栋舍">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="环境温度">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="电池电量">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="信号强度">
|
|
|
+ </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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import TableFooter from "../../components/TableFooter";
|
|
|
export default {
|
|
|
- name: "dayData"
|
|
|
+ name: "dayData",
|
|
|
+ components: {
|
|
|
+ TableFooter
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ boxList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: '母猪存栏',
|
|
|
+ value: 2500,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '分娩舍母猪数',
|
|
|
+ value: 1689
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: '配怀舍母猪数',
|
|
|
+ value: 1689
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: '母猪新增',
|
|
|
+ value: 1689
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: '耳标离线',
|
|
|
+ value: 1689
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ name: '预计未来三月出栏量',
|
|
|
+ value: 50000
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ value1: '',
|
|
|
+ totalPages: 0,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 修改size
|
|
|
+ sizeChange(val) {
|
|
|
+ this.pageSize = val;
|
|
|
+ },
|
|
|
+ // 修改页数
|
|
|
+ pageChange(val) {
|
|
|
+ this.pageNum = val;
|
|
|
+ },
|
|
|
+ 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] || ''] )
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</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 5px;
|
|
|
+}
|
|
|
+.box_table {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
</style>
|
