hy.big_screen/src/views/Butcher/Butcher.vue

<template>
    <div class="Butcher">
        <header>
            <!-- <h1 class="title">湖羊全产业链数字化管理系统</h1> -->
            <hy-header :navTag="1"></hy-header>
        </header>
        <section>
            <aside class="left">
                <article class="left_1">
                    <h3>市场行情</h3>
                    <table class="table">
                        <tr>
                            <th>产品</th>
                            <th>价格</th>
                            <th>市场</th>
                        </tr>
                        <tr v-for="item in sheepPriceList" :key="item.site">
                            <td>{{ item.description }}</td>
                            <td>
                                {{ item.price }}元/公斤
                                <b v-if="item.isRise" style="color: #00ca01"
                                    >▲</b
                                >
                                <b v-else style="color: red">▼</b>
                            </td>
                            <td>{{ item.site }}</td>
                        </tr>
                    </table>
                </article>
                <article class="left_2">
                    <h3>市场行情</h3>
                    <E-Left1 style="height: 100%"></E-Left1>
                </article>
                <article class="left_3">
                    <h3>长兴县销售情况</h3>
                    <E-Left2 style="height: 100%"></E-Left2>
                </article>
            </aside>
            <div class="center">
                <div class="top">
                    <article class="upper">
                        <div class="date">{{ `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}` }}</div>
                        <div class="title">首 页</div>
                        <img class="icon" src="../../assets/chilun.png" />
                    </article>
                    <article class="mid">
                        <div class="warp">
                            <div class="item">
                                <div>
                                    <span class="title">总存栏量：</span>
                                    <span class="num">10534</span>
                                    <span class="unit">只</span>
                                </div>
                            </div>
                            <div class="item">
                                <div>
                                    <span class="title">昨日屠宰数：</span>
                                    <span class="num">1534</span>
                                    <span class="unit">只</span>
                                </div>
                            </div>
                            <div class="item">
                                <div>
                                    <span class="title">检疫合格率：</span>
                                    <span class="num">94.2</span>
                                    <span class="unit">%</span>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="lower">
                        <main class="inputWrap">
                            <input type="text" class="input" v-model="searchStr">
                            <i class="icon_search" @click="search"></i>
                        </main>
                        <div class="item_1">
                            <h3>入库</h3>
                            <div class="row">入库时间：10:15:11 </div>
                        </div>
                        <div class="item_2">
                            <h3>运输</h3>
                            <div class="row">运输单号：586874578</div>
                            <div class="row">目的地：浙江金华超市</div>
                        </div>
                        <div class="item_3">
                            <h3>收购</h3>
                            <div class="row">来源：吕山牧场</div>
                            <div class="row">收购重量：浙江金华超市</div>
                            <div class="row">收购时间：8月28日</div>
                        </div>
                        <div class="item_4">
                            <h3>屠宰</h3>
                            <div class="row">屠宰时间：9月2日</div>
                        </div>
                        <div class="item_5">
                            <h3>分割</h3>
                            <div class="row">分割批次：12451</div>
                        </div>
                        <div class="item_6">
                            <h3>检疫</h3>
                            <div class="row">检疫结果：合格</div>
                            <div class="row">检疫时间：8月30日</div>
                        </div>
                        <div class="item_7">
                            <h3>排酸</h3>
                            <div class="row">排酸时间：9月3日</div>
                        </div>
                        <div class="item_8">
                            <h3>运输</h3>
                            <div class="row">运输单号：586874578</div>
                            <div class="row">目的地：浙江金华超市</div>
                        </div>
                        <span class="time_1">9月3</span>
                        <span class="time_2">9月3</span>
                        <span class="time_3">8月30</span>
                        <span class="time_4">9月3</span>
                        <span class="time_5">9月4</span>
                        <span class="time_6">8月28</span>
                        <span class="time_7">9月2</span>
                        <span class="time_8">9月3</span>
                    </article>
                </div>
                <div class="bottom">
                    <article>
                        <E-Bottom1 style="height: 100%"></E-Bottom1>
                    </article>
                    <article>
                        <E-Bottom2 style="height: 100%"></E-Bottom2>
                    </article>
                    <article>
                        <E-Bottom3 style="height: 100%"></E-Bottom3>
                    </article>
                </div>
            </div>
            <aside class="right">
                <article class="right_1">
                    <h3>产品运输任务</h3>
                    <E-Right1 style="height: 100%"></E-Right1>
                </article>
                <article class="right_2">
                    <h3>屠宰采购来源</h3>
                    <!--  cellspacing="0px" -->
                    <table class="table">
                        <tr>
                            <th>羊只</th>
                            <th>来源地</th>
                        </tr>
                        <tr v-for="item in 8" :key="item" class="row">
                            <td style="width: 30%">{{ 12457 + item }}</td>
                            <td>湖州市长兴县吕山乡</td>
                        </tr>
                    </table>
                </article>
                <article class="right_3">
                    <h3>屠宰销售去向</h3>
                    <table class="table">
                        <tr>
                            <th>羊只</th>
                            <th>去向</th>
                        </tr>
                        <tr v-for="item in 8" :key="item" class="row">
                            <td style="width: 30%">{{ 11457 + item }}</td>
                            <td>安徽</td>
                        </tr>
                    </table>
                </article>
            </aside>
        </section>
    </div>
</template>

<script>
import HyHeader from "@/components/HyHeader";
import ELeft1 from "./charts/ELeft1";
import ELeft2 from "./charts/ELeft2";
import ERight1 from "./charts/ERight1";
import EBottom1 from "./charts/EBottom1";
import EBottom2 from "./charts/EBottom2";
import EBottom3 from "./charts/EBottom3";

export default {
    name: "Butcher",
    components: {
        HyHeader,
        ELeft1,
        ELeft2,
        ERight1,
        EBottom1,
        EBottom2,
        EBottom3,
    },
    data() {
        return {
            searchStr: '',
            sheepPriceList: [
                {
                    description: "肉羊",
                    price: '32.5',
                    site: '长兴',
                    isRise: true
                },
                {
                    description: "肉羊",
                    price: '32.5',
                    site: '杭州',
                    isRise: true
                },
                {
                    description: "肉羊",
                    price: '33',
                    site: '金华',
                    isRise: true
                },
                {
                    description: "肉羊",
                    price: '32.5',
                    site: '苏州',
                    isRise: false
                },
                {
                    description: "肉羊",
                    price: '31',
                    site: '安徽',
                    isRise: false
                },
                {
                    description: "肉羊",
                    price: '31',
                    site: '湖南',
                    isRise: true
                },
                {
                    description: "肉羊",
                    price: '32',
                    site: '江西',
                    isRise: true
                },
                {
                    description: "肉羊",
                    price: '29',
                    site: '内蒙古',
                    isRise: true
                },
            ]
        };
    },
    created() {
        document.title = '湖羊产业'
    },
    methods: {
        search() {
            console.log(this.searchStr)
            console.log("search")
        }
    },
};
</script>

<style lang="scss" scope>
.Butcher {
    background-image: url(../../assets/bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    > section {
        flex-grow: 1;
        display: flex;
        > aside {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            > article {
                height: 31%;
                background-image: url(../../assets/download.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                > h3 {
                    color: #fff;
                    font-size: 25px;
                    margin-left: 12%;
                    margin-top: 13px;
                    display: flex;
                    align-items: center;
                    &:before {
                        content: "";
                        display: inline-block;
                        height: 25px;
                        width: 25px;
                        margin-right: 50px;
                        background-color: #fff;
                    }
                }
            }
        }
        > .left {
            width: 19.8%;
            // border: 1px solid rgb(218, 99, 99);
            display: flex;
            flex-direction: column;
            > .left_1, .left_2, .left_3 {
                min-width: 600px;
            }
            > .left_1 {
                overflow: hidden;
                > .table {
                    color: #fff;
                    font-size: 30px;
                    margin: 20px;
                    width: 100%;
                    text-align: center;
                }
            }
        }
        > .center {
            width: 60.4%;
            min-width: 1600px;
            // border: 1px solid rgb(163, 147, 58);
            display: flex;
            flex-direction: column;
            > .top {
                height: 72%;
                // border: 1px solid rgb(62, 58, 128);
                display: flex;
                flex-direction: column;
                .upper {
                    font-size: 40px;
                    color: #fff;
                    display: flex;
                    justify-content: space-around;
                    margin: 20px 3%;
                    // .date {}
                    .title {
                        flex-grow: 1;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        &::before {
                            content: "";
                            border: 1px solid #4b81ec;
                            box-sizing: border-box;
                            height: 0px;
                            flex-grow: 1;
                            margin: 0 50px;
                        }
                        &::after {
                            content: "";
                            border: 1px solid #4b81ec;
                            box-sizing: border-box;
                            height: 0px;
                            flex-grow: 1;
                            margin: 0 50px;
                        }
                    }
                    .icon {
                        width: 50px;
                        height: 50px;
                    }
                }
                .mid {
                    > .warp {
                        display: flex;
                        justify-content: space-around;
                        margin: 20px 5%;
                        .item {
                            border-radius: 20px;
                            height: 90px;
                            min-width: 400px;
                            box-sizing: border-box;
                            border: 4px solid #53bafd;
                            flex: 1 0 20%;
                            margin: 20px 3%;
                            padding: 10px 10px 10px 10px;
                            font-size: 35px;
                            font-weight: 600;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .title {
                                color: #fff;
                            }
                            .num {
                                color: #53bafd;
                                font-size: 1.2em;
                            }
                            .unit {
                                color: #53bafd;
                                font-size: 20px;
                                margin-left: 15px;
                            }
                        }
                    }
                }
                .lower {
                    min-height: 800px;
                    flex-grow: 1;
                    background: url(../../assets/bg_main.png) no-repeat;
                    background-size: 100% 100%;
                    margin: 0 3% 1.5% 3%;
                    color: #fff;
                    font-size: 30px;
                    font-weight: 600;
                    position: relative;
                    > .inputWrap {
                        width: 700px;
                        height: 80px;
                        display: flex;
                        align-items: center;
                        font-size: 60px;
                        color: #fff;
                        box-sizing: border-box;
                        border: 2px solid #797979;
                        border-radius: 10px;
                        background-color: #0e93b2;
                        position: relative;
                        > .input {
                            width: 200px;
                            flex-grow: 1;
                            font-size: 60px;
                            color: #fff;
                            padding-left: 20px;
                            background: none;
                            // outline: none;
                            border: none;
                            &:focus {
                                // border: 4px solid #797979;
                                background: none;
                                outline: none;
                            }
                        }
                        > .icon_search{
                            position: absolute;
                            right: 10px;
                            width: 60px;
                            height: 60px;
                            background: url(../../assets/search.png) no-repeat;
                            background-size: contain;
                        }
                    }
                    > div {
                        // border: 1px solid rgb(243, 14, 14);
                        display: inline-block;
                        width: 15.1%;
                        height: 17.4%;
                        box-sizing: border-box;
                        position: absolute;
                        color: #333333;
                        > h3 {
                            text-align: center;
                        }
                        > .row {
                            font-weight: normal;
                            font-size: 25px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow:ellipsis;
                        }
                    }
                    > .item_1 {
                        left: 59.1%;
                        top: 18.7%;
                    }
                    > .item_2 {
                        left: 81.4%;
                        top: 18%;
                    }
                    > .item_3 {
                        left: 0.8%;
                        top: 42.3%;
                    }
                    > .item_4 {
                        left: 27.3%;
                        top: 42.3%;
                    }
                    > .item_5 {
                        left: 64.3%;
                        top: 42.3%;
                    }
                    > .item_6 {
                        left: 13.2%;
                        top: 80.8%;
                    }
                    > .item_7 {
                        left: 40.5%;
                        top: 80.8%;
                    }
                    > .item_8 {
                        left: 79.9%;
                        top: 80.8%;
                    }

                    > span {
                        font-size: 35px;
                        position: absolute;
                    }
                    > .time_1 {
                        left: 64.8%;
                        top: 0%;
                    }
                    > .time_2 {
                        left: 87%;
                        top: 0%;
                    }
                    > .time_3 {
                        left: 19%;
                        top: 61%;
                    }
                    > .time_4 {
                        left: 46%;
                        top: 61%;
                    }
                    > .time_5 {
                        left: 85.4%;
                        top: 61%;
                    }
                    > .time_6 {
                        left: 6.4%;
                        top: 74%;
                    }
                    > .time_7 {
                        left: 33%;
                        top: 74%;
                    }
                    > .time_8 {
                        left: 70%;
                        top: 74%;
                    }
                }
            }
            > .bottom {
                height: 28%;
                // border: 1px solid rgb(23, 131, 116);
                display: flex;
                justify-content: space-between;
                > article {
                    width: 33%;
                }
            }
        }
        > .right {
            width: 19.8%;
            // border: 1px solid rgb(61, 197, 179);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            > .right_2,
            > .right_3 {
                overflow: hidden;
                > .table {
                    color: #fff;
                    font-size: 30px;
                    margin: 20px;
                    width: 96%;
                    text-align: center;
                    .row {
                        background-color: #006666ee;
                    }
                }
            }
        }
    }
}
</style>