分割登记 企业收购 静态完成

src/router/routes.js

@@ -1,12 +1,13 @@
 import Home from '../views/Home/Home.vue'
 /* 首页  */
 import Index from '@/views/index/Index.vue'
-import DeliveryRoom from '@/views/deliveryRoom/DeliveryRoom.vue'
-import Detail from '@/views/deliveryRoom/detail/Detail.vue'
-/* 统计分许 */
-import PSY from '@/views/statisticAnalysis/PSY.vue'
-import Crop from '@/views/statisticAnalysis/Crop.vue'
+/* 定点屠宰智能管控 */
+import firmBuy from '@/views/slaughterManagment/firmBuy.vue'
+import packinghouse from '@/views/slaughterManagment/packinghouse.vue'
 
+/* 产品制作智能监控 */
+
+/* 鲜肉储运智能管控 */
 
 /* 模板 */
 import Aa from '../views/template/Aa.vue'
@@ -29,25 +30,14 @@ export default [
 			},
 			// 产床管理
 			{
-				path: 'DeliveryRoom',
-				name: 'DeliveryRoom',
-				component: DeliveryRoom
-			},
-			{
-				path: 'Detail',
-				name: 'Detail',
-				component: Detail
-			},
-			// 统计分许
-			{
-				path: 'PSY',
-				name: 'PSY',
-				component: PSY
+				path: 'firmBuy',
+				name: 'firmBuy',
+				component: firmBuy
 			},
 			{
-				path: 'Crop',
-				name: 'Crop',
-				component: Crop
+				path: 'packinghouse',
+				name: 'packinghouse',
+				component: packinghouse
 			},
 			
 			

src/views/Home/mencCofig.js

@@ -8,7 +8,7 @@ export const menuData = [
         disabled: false
     },
     {
-        optionName: "定点屠宰只能管控",
+        optionName: "定点屠宰智能管控",
         iconClassName: "el-icon-setting",
         index: '1',
         disabled: false, // 是否禁用
@@ -16,12 +16,12 @@ export const menuData = [
             {
                 optionName: '企业采购',
                 index: '1-1',
-                routerName: "DeliveryRoom"
+                routerName: "firmBuy"
             },
             {
                 optionName: '屠宰加工',
                 index: '1-2',
-                routerName: "DeliveryRoom"
+                routerName: "packinghouse"
             },
             {
                 optionName: '分割加工',

src/views/deliveryRoom/DeliveryRoom.vue

@@ -1,168 +0,0 @@
-<template>
-    <div class="deliveryRoom">
-        <section class="section">
-            <ul class="ul">
-
-                <li @click="toDetail" class="li" v-for="(item, index) in list" :key="index">
-                    <h5>产房00{{ index+1 }}</h5>
-                    <img class="img" :src="typeImgUrl[item.type - 1]" />
-                    <div class="info" v-if="item.type != 1">
-                        <p class="p">
-                            <span class="title">母猪耳标：</span>
-                            <span class="content">16545</span>
-                        </p>
-                        <p class="p">
-                            <span class="title">入床时间：</span>
-                            <span class="content">2020-04-15</span>
-                        </p>
-                        <p class="p">
-                            <span class="title">预计产仔：</span>
-                            <span class="content">2020-04-15</span>
-                        </p>
-                    </div>
-                    <p v-else class="info fontC">空床时间{{ 4 }}天</p>
-                </li>
-
-            </ul>
-            <el-row type="flex" justify="center">
-                <el-col :span="8" class="pagination">
-                    <el-pagination
-                        @current-change="pageChange"
-                        background
-                        layout="prev, pager, next"
-                        :page-count="5"
-                    ></el-pagination>
-                </el-col>
-            </el-row>
-        </section>
-    </div>
-</template>
-
-
-<script>
-import typeImgUrl_1 from "@/assets/deliveryRoom_1.png";
-import typeImgUrl_2 from "@/assets/deliveryRoom_2.png";
-import typeImgUrl_3 from "@/assets/deliveryRoom_3.png";
-import typeImgUrl_4 from "@/assets/deliveryRoom_4.png";
-// 每页数据条数
-const pageSize = 10;
-
-let list = [
-    {
-        type: 1
-    },
-    {
-        type: 2
-    },
-    {
-        type: 3
-    },
-    {
-        type: 4
-    },
-    {
-        type: 1
-    },
-    {
-        type: 3
-    },
-    {
-        type: 3
-    },
-    {
-        type: 4
-    },
-    {
-        type: 2
-    },
-    {
-        type: 1
-    }
-];
-
-export default {
-    name: "deliveryRoom",
-    data() {
-        return {
-            list,
-            typeImgUrl: [
-                typeImgUrl_1,
-                typeImgUrl_2,
-                typeImgUrl_3,
-                typeImgUrl_4
-            ],
-            pageSize,
-            page: 1
-        };
-    },
-    created() {},
-    methods: {
-        toDetail() {
-            this.$router.push({path: "Detail"})
-        },
-        pageChange(p) {
-            console.log(p);
-            this.page = p;
-            // this.getDeviceList();
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.deliveryRoom {
-    .section {
-        .ul {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            
-            .li {
-                display: flex;
-                flex-direction: column;
-                width: 290px;
-                height: 350px;
-                margin: 10px;
-                h5 {
-                    text-align: center;
-                    font-size: 30px;
-                    color: #424242;
-                    background-color: #199ed8;
-                }
-                .img {
-                    width: 100%;
-                }
-                .info {
-                    flex: 1;
-                    display: flex;
-                    padding-left: 20px;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    .p {
-                        .title {
-                            font-weight: 600;
-                            color: rgb(136, 127, 127);
-                        }
-                        .content {
-                            color: #777;
-                        }
-                    }
-                }
-                .fontC {
-                    align-items: center;
-                    padding-left: 0px;
-                    color: rgb(80, 183, 231);
-                    font-size: 20px;
-                    font-weight: 600;
-                }
-            }
-        }
-    }
-}
-
-// border: 1px solid #00f;
-
-.pagination {
-    margin-top: 5px;
-}
-</style>

src/views/deliveryRoom/detail/Detail.vue

@@ -1,233 +0,0 @@
-<template>
-    <div class="Detail">
-        <header class="header">
-            <el-page-header @back="goBack" content="产床信息" />
-            <div class="title">
-                <h4></h4>
-                <span class="title">产床002</span>
-                <el-date-picker
-                    v-model="date"
-                    @change="pickerChange"
-                    type="date"
-                    value-format="yyyy-MM-dd"
-                    :picker-options="pickerOptions"
-                    placeholder="选择日期"
-                ></el-date-picker>
-            </div>
-        </header>
-
-        <section class="section">
-            <article class="left">
-                <ul class="ul">
-                    <li class="li">
-                        <span class="title">产仔数：</span>
-                        <span class="content">9只</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">活仔数：</span>
-                        <span class="content">9只</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">存活率：</span>
-                        <span class="content">100%</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">仔猪日龄：</span>
-                        <span class="content">12天</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">产床状态：</span>
-                        <span class="content">已产仔</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">出生日期：</span>
-                        <span class="content">2020-04-25</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">预计断奶剩余天数：</span>
-                        <span class="content">16天</span>
-                    </li>
-                </ul>
-            </article>
-
-            <article class="right">
-                <div class="contianer">
-                    <el-carousel height="250px" indicator-position="none">
-                        <el-carousel-item>
-                            <img
-                                @click="toSowDetail"
-                                src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00044-516.jpg"
-                            />
-                        </el-carousel-item>
-                        <el-carousel-item>
-                            <img
-                                @click="toSowDetail"
-                                src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1451307779,3128056523&fm=26&gp=0.jpg"
-                            />
-                        </el-carousel-item>
-                        <el-carousel-item>
-                            <img
-                                @click="toSowDetail"
-                                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1510260968,1676318121&fm=26&gp=0.jpg"
-                            />
-                        </el-carousel-item>
-                        <el-carousel-item>
-                            <img
-                                @click="toSowDetail"
-                                src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3523098162,3587342676&fm=26&gp=0.jpg"
-                            />
-                        </el-carousel-item>
-                    </el-carousel>
-                </div>
-            </article>
-        </section>
-
-        <footer class="footer">
-            <div class="h">
-                <chart-a></chart-a>
-            </div>
-            <div class="d">
-                <chart-b></chart-b>
-            </div>
-        </footer>
-    </div>
-</template>
-
-<script>
-import chart_a from "./charts/chart_a";
-import chart_b from "./charts/chart_b";
-
-// 时间选择器配置
-const pickerOptions = {
-    // 禁用时间
-    disabledDate(time) {
-        return time.getTime() > Date.now();
-    },
-    shortcuts: [
-        {
-            text: "今天",
-            onClick(picker) {
-                picker.$emit("pick", new Date());
-            }
-        },
-        {
-            text: "昨天",
-            onClick(picker) {
-                const date = new Date();
-                date.setTime(date.getTime() - 3600 * 1000 * 24);
-                picker.$emit("pick", date);
-            }
-        },
-        {
-            text: "前天",
-            onClick(picker) {
-                const date = new Date();
-                date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
-                picker.$emit("pick", date);
-            }
-        }
-    ]
-};
-
-export default {
-    name: "Detail",
-    components: {
-        "chart-a": chart_a,
-        "chart-b": chart_b
-    },
-    data() {
-        return {
-            date: "",
-            pickerOptions
-        };
-    },
-    created() {},
-    methods: {
-        pickerChange(value) {
-            console.log(value);
-            // this.date = Math.floor(new Date(value[0]).getTime() / 1000)
-            // this.getReportList()
-        },
-        toSowDetail() {
-            console.log(555);
-            this.$message.warning("母猪详细信息正在开发中！！");
-        },
-        goBack() {
-            this.$router.go(-1);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.Detail {
-    .header {
-        > .title {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0px 30% 10px 20px;
-            margin: 0 0 10px 0;
-            border-bottom: 2px solid #eee;
-            > h4 {
-                color: #777;
-            }
-            > .title {
-                font-size: 20px;
-                font-weight: 600;
-                color: #444;
-            }
-        }
-    }
-    .section {
-        display: flex;
-        padding-bottom: 20px;
-        border-bottom: 2px solid #eee;
-        .left {
-            padding-left: 70px;
-            width: 40%;
-            // border: 2px solid rgb(182, 63, 63);
-            .ul {
-                .li {
-                    margin: 5px 0 5px 10px;
-                    .title {
-                        font-size: 17px;
-                        font-weight: 600;
-                        color: rgb(136, 115, 115);
-                    }
-                    .content {
-                        font-size: 18px;
-                        font-weight: 600;
-                        color: rgb(139, 138, 138);
-                    }
-                }
-            }
-        }
-        .right {
-            flex: 1;
-            // border: 2px solid rgb(63, 182, 69);
-            .contianer {
-                width: 500px;
-                height: 250px;
-                border-radius: 6px;
-                overflow: hidden;
-                img {
-                    width: 100%;
-                    height: 250px;
-                }
-            }
-        }
-    }
-    .footer {
-        margin-top: 20px;
-        .h {
-            border-bottom: 2px solid #eee;
-        }
-        .d{
-            padding-top: 15px;
-        }
-    }
-}
-
-// border: 1px solid #00f;
-</style>

src/views/deliveryRoom/detail/charts/chart_a.vue

@@ -1,133 +0,0 @@
-<template>
-    <div class="chart_a">
-        <div id="chart_a" style="width: 75%;height:300px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "chart_a",
-    props: [
-        'tagId'
-    ],
-    data() {
-        return {
-        };
-    },
-    mounted() {
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById("chart_a")
-            );
-            // 指定图表的配置项和数据
-            let option = {
-                title: {
-                    text: "小时温度",
-                    subtext: "纯属虚构",
-                    left: 100
-                },
-                tooltip: {
-                    trigger: "axis"
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        dataZoom: {
-                            yAxisIndex: "none"
-                        },
-                        dataView: { readOnly: true },
-                        magicType: { type: ["line", "bar"] },
-                        restore: {},
-                        saveAsImage: {}
-                    }
-                },
-                color: {
-                    type: "linear",
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [
-                        {
-                            offset: 0,
-                            color: "rgb(14,182,195)" // 0% 处的颜色
-                        },
-                        {
-                            offset: 1,
-                            color: "rgb(14,182,195)" // 100% 处的颜色
-                        }
-                    ]
-                },
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: [
-                        "七小时前",
-                        "六小时前",
-                        "五小时前",
-                        "四小时前",
-                        "三小时前",
-                        "两小时前",
-                        "七小时前",
-                        "六小时前",
-                        "五小时前",
-                        "四小时前",
-                        "三小时前",
-                        "两小时前",
-                        "七小时前",
-                        "六小时前",
-                        "五小时前",
-                        "四小时前",
-                        "三小时前",
-                        "两小时前",
-                        "七小时前",
-                        "六小时前",
-                        "五小时前",
-                        "四小时前",
-                        "三小时前",
-                        "两小时前",
-                        "当前"
-                    ]
-                },
-                yAxis: {
-                    type: "value",
-                    axisLabel: {
-                        formatter: "{value} °C"
-                    },
-                    scale: true
-                },
-                series: [
-                    {
-                        name: "时间",
-                        type: "line",
-                        data: [32.5,32.66,32.52, 32.6, 32.4, 32.5, 32.4, 32.6, 32.4,32.66,32.52, 32.6, 32.4, 32.5,32.5, 32.4, 32.6, 32.4, 32.4, 32.5, 32.4, 32.6, 32.4,32.66,32.52, 32.6, 32.4],
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.chart_a {
-    .chart {
-        width: 100%;
-    }
-}
-</style>

src/views/deliveryRoom/detail/charts/chart_b.vue

@@ -1,133 +0,0 @@
-<template>
-    <div class="chart_b">
-        <div id="chart_b" style="width: 75%;height:300px;"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "chart_b",
-    props: {
-    },
-    data() {
-        return {
-        };
-    },
-    created() {
-        
-    },
-    mounted() {
-        
-        this.drawChart();
-    },
-    methods: {
-        drawChart() {
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById('chart_b')
-            );
-            // 指定图表的配置项和数据
-            let option = {
-                title: {
-                    text: "日温度",
-                    subtext: "纯属虚构",
-                    left: 100
-                },
-                tooltip: {
-                    trigger: "axis"
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        dataZoom: {
-                            yAxisIndex: "none"
-                        },
-                        dataView: { readOnly: true },
-                        magicType: { type: ["line", "bar"] },
-                        restore: {},
-                        saveAsImage: {}
-                    }
-                },
-                color: {
-                    type: "linear",
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [
-                        {
-                            offset: 0,
-                            // color: "rgb(251,132,32)" // 0% 处的颜色
-                            color: "rgb(14,182,195)" // 0% 处的颜色
-                        },
-                        {
-                            offset: 1,
-                            color: "rgb(14,182,195)" // 100% 处的颜色
-                        }
-                    ]
-                },
-                xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: [
-                       "七小时前",
-                        "六小时前",
-                        "五小时前",
-                        "四小时前",
-                        "三小时前",
-                        "两小时前",
-                        "七小时前",
-                        "六小时前",
-                        "五小时前",
-                        "四小时前",
-                        "三小时前",
-                        "两小时前",
-                        "七小时前",
-                        "六小时前",
-                        "五小时前",
-                        "四小时前",
-                        "三小时前",
-                        "两小时前",
-                        "七小时前",
-                        "六小时前",
-                        "五小时前",
-                        "四小时前",
-                        "三小时前",
-                        "两小时前",
-                        "当前"
-                    ]
-                },
-                yAxis: {
-                    type: "value",
-                    axisLabel: {
-                        formatter: "{value} °C"
-                    },
-                    scale: true
-                },
-                series: [
-                    {
-                        name: "时间",
-                        type: "line",
-                        data: [32.6, 32.4, 32.5, 32.4, 32.5,32.66,32.6, 32.4, 32.4, 32.5, 32.4,32.52, 32.6, 32.4,32.69,32.52, 32.6, 32.4, 32.5,32.5, 32.4,  32.6, 32.4,32.6,32.52, 32.6, 32.4],
-                        markPoint: {
-                            data: [
-                                { type: "max", name: "最大值" },
-                                { type: "min", name: "最小值" }
-                            ]
-                        },
-                        markLine: {
-                            data: [{ type: "average", name: "平均值" }]
-                        }
-                    }
-                ]
-            };
-            // 使用刚指定的配置项和数据显示图表。
-            myChart.setOption(option);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/slaughterManagment/firmBuy.vue

@@ -0,0 +1,176 @@
+<template>
+    <!-- 静态  -->
+    <div class="firmBuy">
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1区" value="11"></el-option>
+                        <el-option label="2区" value="22"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1舍" value="13"></el-option>
+                        <el-option label="2舍" value="24"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="可用" value="15"></el-option>
+                        <el-option label="可用" value="26"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">新增</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    @selection-change="handleSelectionChange"
+                >
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column prop="id" label="羊只编号" width="180"></el-table-column>
+                    <el-table-column prop="date" label="收购时间" width="180"></el-table-column>
+                    <el-table-column prop="area" label="来源牧场" ></el-table-column>
+                    <el-table-column prop="buyWeight" label="收购重量"></el-table-column>
+                    <el-table-column prop="buyPeople" label="收购人员"></el-table-column>
+                    <el-table-column prop="transportCar" label="运输车辆"></el-table-column>
+                    <!-- <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column> -->
+                </el-table>
+                <div style="margin-top: 20px">
+                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+                    <el-button @click="toggleSelection()">取消选择</el-button>
+                    <el-button @click="inStore">入待宰栏</el-button>
+                </div>
+
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :page-count="10"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+
+const pageSize = 10
+const tableData = [
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    area: "哈斯牧场",
+                    buyWeight: "49kg",
+                    buyPeople: "张小刚",
+                    transportCar: "浙A45154"
+                },
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    area: "哈斯牧场",
+                    buyWeight: "43kg",
+                    buyPeople: "李小红",
+                    transportCar: "浙A45154"
+                },
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    area: "哈斯牧场",
+                    buyWeight: "48kg",
+                    buyPeople: "王小明",
+                    transportCar: "浙A45154"
+                },
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    area: "哈斯牧场",
+                    buyWeight: "51kg",
+                    buyPeople: "周小伟",
+                    transportCar: "浙A45154"
+                },
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    area: "哈斯牧场",
+                    buyWeight: "48kg",
+                    buyPeople: "李小红",
+                    transportCar: "浙A45154"
+                },
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    area: "哈斯牧场",
+                    buyWeight: "49kg",
+                    buyPeople: "李小红",
+                    transportCar: "浙A45154"
+                },
+                
+            ]
+
+export default {
+    data() {
+        return {
+            value: "",
+            multipleSelection: [],
+            page: 1,
+            tableData
+        };
+    },
+    created() {},
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach(row => {
+                    this.$refs.multipleTable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.multipleTable.clearSelection();
+            }
+        },
+        // 入待宰栏
+        inStore() {},
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        edit(row) {},
+        del(row) {},
+        pageChange(p) {
+            console.log(p);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/slaughterManagment/packinghouse.vue

@@ -0,0 +1,176 @@
+<template>
+    <!-- 静态  -->
+    <div class="packinghouse">
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1区" value="11"></el-option>
+                        <el-option label="2区" value="22"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="1舍" value="13"></el-option>
+                        <el-option label="2舍" value="24"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="可用" value="15"></el-option>
+                        <el-option label="可用" value="26"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+                <el-col :span="4">
+                    <el-button type="primary">新增</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table
+                    ref="multipleTable"
+                    :data="tableData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    @selection-change="handleSelectionChange"
+                >
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column prop="id" label="屠宰批次" width="180"></el-table-column>
+                    <el-table-column prop="date" label="分割时间" width="180"></el-table-column>
+                    <el-table-column prop="a" label="带骨羊前腿"></el-table-column>
+                    <el-table-column prop="b" label="羊菲力"></el-table-column>
+                    <el-table-column prop="c" label="十二肋法排"></el-table-column>
+                    <el-table-column prop="d" label="带骨羊后腿"></el-table-column>
+                    <!-- <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column> -->
+                </el-table>
+                <div style="margin-top: 20px">
+                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+                    <el-button @click="toggleSelection()">取消选择</el-button>
+                    <el-button @click="inStore">入待宰栏</el-button>
+                </div>
+
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :page-count="10"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+
+const pageSize = 10
+const tableData = [
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    a: "7.6kg",
+                    b: "7kg",
+                    c: "15.4kg",
+                    d: "4.6 kg"
+                },
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    a: "6kg",
+                    b: "8kg",
+                    c: "12kg",
+                    d: "4.6 kg"
+                },
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    a: "7kg",
+                    b: "5kg",
+                    c: "15.4kg",
+                    d: "4.6 kg"
+                },
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    a: "7kg",
+                    b: "8kg",
+                    c: "12kg",
+                    d: "4.6 kg"
+                },
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    a: "9.5kg",
+                    b: "7kg",
+                    c: "12kg",
+                    d: "4.6 kg"
+                },
+                {
+                    id: "825",
+                    date: "2020-05-02",
+                    a: "9.5kg",
+                    b: "8kg",
+                    c: "12kg",
+                    d: "4.6 kg"
+                },
+                
+            ]
+
+export default {
+    data() {
+        return {
+            value: "",
+            multipleSelection: [],
+            page: 1,
+            tableData
+        };
+    },
+    created() {},
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach(row => {
+                    this.$refs.multipleTable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.multipleTable.clearSelection();
+            }
+        },
+        // 入待宰栏
+        inStore() {},
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        edit(row) {},
+        del(row) {},
+        pageChange(p) {
+            console.log(p);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>