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

<template>
    <div class="Butcher" @click="isShowMap = true">
        <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="mapContainer" v-if="isShowMap">
                        <E-Map style="height: 100%" @e-click="eClick"></E-Map>
                    </article>
                    <article class="lower" v-else>
                        <main class="inputWrap" @click.stop>
                            <input
                                type="text"
                                class="input"
                                v-model.number="searchStr"
                            />
                            <i class="icon_search" @click="search"></i>
                        </main>
                        <div class="container">
                            <div
                                v-for="(item, index) in retrospectInfo"
                                :key="index"
                                :class="'item_' + (index + 1)"
                            >
                                <h3>{{ item.title }}</h3>
                                <div
                                    class="row"
                                    v-for="(item1, index1) in item.list"
                                    :key="index1"
                                >
                                    {{ item1 }}
                                </div>
                            </div>
                            <span
                                v-for="(item, index) in retrospectInfo"
                                :key="item.title"
                                :class="'time_' + (index + 1)"
                                >{{ item.time }}</span
                            >
                        </div>
                    </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";
import EMap from "./charts/EMap";

export default {
    name: "Butcher",
    components: {
        HyHeader,
        ELeft1,
        ELeft2,
        ERight1,
        EBottom1,
        EBottom2,
        EBottom3,
        EMap,
    },
    data() {
        return {
            searchStr: "00008",
            isShowMap: true,
            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,
                },
            ],
            retrospectInfo: [],
            retrospectInfo1: [
                {
                    title: "收购",
                    list: [
                        "来源：永盛牧场",
                        "收购重量：50kg",
                        "收购时间：11月30日",
                    ],
                    time: "11月30日",
                },
                {
                    title: "检疫",
                    list: ["检疫结果：合格", "检疫时间：11月30日"],
                    time: "11月30日",
                },
                {
                    title: "屠宰",
                    list: ["屠宰时间：11月30日"],
                    time: "11月30日",
                },
                {
                    title: "排酸",
                    list: ["排酸时间：11月30日"],
                    time: "11月30日",
                },
                {
                    title: "分割",
                    list: ["分割时间：11月30日"],
                    time: "11月30日",
                },
                {
                    title: "运输",
                    list: ["运输单号：50kg", "目的地：杭州"],
                    time: "11月30日",
                },
            ],
            retrospectInfo2: [
                {
                    title: "收购",
                    list: [
                        "来源：永盛牧场",
                        "收购重量：50kg",
                        "收购时间：11月30日",
                    ],
                    time: "11月30日",
                },
                {
                    title: "检疫",
                    list: ["检疫结果：合格", "检疫时间：11月30日"],
                    time: "11月30日",
                },
                {
                    title: "屠宰",
                    list: ["屠宰时间：11月30日"],
                    time: "11月30日",
                },
                {
                    title: "排酸",
                    list: ["排酸时间：11月30日"],
                    time: "11月30日",
                },
                {
                    title: "入库",
                    list: ["入库时间：11月30日"],
                    time: "11月30日",
                },
                {
                    title: "运输",
                    list: ["运输单号：50kg", "目的地：杭州"],
                    time: "11月30日",
                },
            ],
        };
    },
    created() {
        document.title = "湖羊产业";
        if (Math.floor(Math.random()*10) % 2 == 0) {
                this.retrospectInfo = this.retrospectInfo1;
            } else {
                this.retrospectInfo = this.retrospectInfo2;
            }
    },
    methods: {
        search() {
            console.log(Math.floor(Math.random()*10));
            if (this.searchStr % 2 == 0) {
                this.retrospectInfo = this.retrospectInfo1;
            } else {
                this.retrospectInfo = this.retrospectInfo2;
            }
        },
        eClick(params) {
            console.log(params)
            this.isShowMap = false
        }
    },
};
</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;
                    display: flex;
                    flex-direction: column;
                    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;
                        }
                    }
                    > .container {
                        position: relative;
                        // border: 1px solid #797979;
                        margin: 80px 0;
                        flex-grow: 1;
                        background: url(../../assets/bg_main.png) no-repeat;
                        background-size: 100% 100%;

                        > div {
                            // border: 1px solid rgb(243, 14, 14);
                            display: inline-block;
                            width: 15.1%;
                            height: 27.3%;
                            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: 0.7%;
                            top: 4.7%;
                        }
                        > .item_2 {
                            left: 13.2%;
                            top: 69%;
                        }
                        > .item_3 {
                            left: 27.3%;
                            top: 5.5%;
                        }
                        > .item_4 {
                            left: 40.4%;
                            top: 69.3%;
                        }
                        > .item_5 {
                            left: 64.3%;
                            top: 5.4%;
                        }
                        > .item_6 {
                            left: 79.8%;
                            top: 68.9%;
                        }

                        > span {
                            font-size: 35px;
                            position: absolute;
                        }
                        > .time_1 {
                            left: 5.2%;
                            top: 57%;
                        }
                        > .time_2 {
                            left: 18.3%;
                            top: 37%;
                        }
                        > .time_3 {
                            left: 32%;
                            top: 57%;
                        }
                        > .time_4 {
                            left: 45.6%;
                            top: 37%;
                        }
                        > .time_5 {
                            left: 69.1%;
                            top: 57%;
                        }
                        > .time_6 {
                            left: 84.7%;
                            top: 37%;
                        }
                    }
                }
                .mapContainer {
                    flex-grow: 1;
                }
            }
            > .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>