123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649 |
- <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" v-if="true">
- <main class="inputWrap">
- <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>
- <!-- <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> -->
- <span v-for="(item, index) in retrospectInfo" :key="item.title" :class="'time_'+(index+1)">{{ item.time }}</span>
- <!-- <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> -->
- </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";
- export default {
- name: "Butcher",
- components: {
- HyHeader,
- ELeft1,
- ELeft2,
- ERight1,
- EBottom1,
- EBottom2,
- EBottom3,
- },
- data() {
- return {
- searchStr: "00008",
- 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 = "湖羊产业";
- },
- methods: {
- search() {
- console.log(this.searchStr);
- if(this.searchStr%2 == 0) {
- this.retrospectInfo = this.retrospectInfo1
- } else {
- this.retrospectInfo = this.retrospectInfo2
- }
- },
- },
- };
- </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%;
- }
- }
- }
- }
- > .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>
|