数据页面

src/views/pastureData/Home.vue

@@ -41,7 +41,7 @@
           :data="tableData"
           border
           stripe
-          :header-cell-style="{'text-align':'center', 'background-color': '#F9FAFC', 'padding': '5px 0'}"
+          :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%;">

src/views/pastureData/dayData.vue

@@ -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>