Butcher.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649
  1. <template>
  2. <div class="Butcher">
  3. <header>
  4. <!-- <h1 class="title">湖羊全产业链数字化管理系统</h1> -->
  5. <hy-header :navTag="1"></hy-header>
  6. </header>
  7. <section>
  8. <aside class="left">
  9. <article class="left_1">
  10. <h3>市场行情</h3>
  11. <table class="table">
  12. <tr>
  13. <th>产品</th>
  14. <th>价格</th>
  15. <th>市场</th>
  16. </tr>
  17. <tr v-for="item in sheepPriceList" :key="item.site">
  18. <td>{{ item.description }}</td>
  19. <td>
  20. {{ item.price }}元/公斤
  21. <b v-if="item.isRise" style="color: #00ca01"
  22. >▲</b
  23. >
  24. <b v-else style="color: red">▼</b>
  25. </td>
  26. <td>{{ item.site }}</td>
  27. </tr>
  28. </table>
  29. </article>
  30. <article class="left_2">
  31. <h3>市场行情</h3>
  32. <E-Left1 style="height: 100%"></E-Left1>
  33. </article>
  34. <article class="left_3">
  35. <h3>长兴县销售情况</h3>
  36. <E-Left2 style="height: 100%"></E-Left2>
  37. </article>
  38. </aside>
  39. <div class="center">
  40. <div class="top">
  41. <article class="upper">
  42. <div class="date">
  43. {{
  44. `${new Date().getFullYear()}-${
  45. new Date().getMonth() + 1
  46. }-${new Date().getDate()}`
  47. }}
  48. </div>
  49. <div class="title">首 页</div>
  50. <img class="icon" src="../../assets/chilun.png" />
  51. </article>
  52. <article class="mid">
  53. <div class="warp">
  54. <div class="item">
  55. <div>
  56. <span class="title">总存栏量:</span>
  57. <span class="num">10534</span>
  58. <span class="unit">只</span>
  59. </div>
  60. </div>
  61. <div class="item">
  62. <div>
  63. <span class="title">昨日屠宰数:</span>
  64. <span class="num">1534</span>
  65. <span class="unit">只</span>
  66. </div>
  67. </div>
  68. <div class="item">
  69. <div>
  70. <span class="title">检疫合格率:</span>
  71. <span class="num">94.2</span>
  72. <span class="unit">%</span>
  73. </div>
  74. </div>
  75. </div>
  76. </article>
  77. <article class="lower" v-if="true">
  78. <main class="inputWrap">
  79. <input
  80. type="text"
  81. class="input"
  82. v-model.number="searchStr"
  83. />
  84. <i class="icon_search" @click="search"></i>
  85. </main>
  86. <div class="container">
  87. <div v-for="(item, index) in retrospectInfo" :key="index" :class="'item_'+(index+1)">
  88. <h3>{{ item.title }}</h3>
  89. <div class="row" v-for="(item1, index1) in item.list" :key="index1">{{ item1 }}</div>
  90. </div>
  91. <!-- <div class="item_1">
  92. <h3>入库</h3>
  93. <div class="row">入库时间:10:15:11</div>
  94. </div>
  95. <div class="item_2">
  96. <h3>运输</h3>
  97. <div class="row">运输单号:586874578</div>
  98. <div class="row">目的地:浙江金华超市</div>
  99. </div>
  100. <div class="item_3">
  101. <h3>收购</h3>
  102. <div class="row">来源:吕山牧场</div>
  103. <div class="row">收购重量:浙江金华超市</div>
  104. <div class="row">收购时间:8月28日</div>
  105. </div>
  106. <div class="item_4">
  107. <h3>屠宰</h3>
  108. <div class="row">屠宰时间:9月2日</div>
  109. </div>
  110. <div class="item_5">
  111. <h3>分割</h3>
  112. <div class="row">分割批次:12451</div>
  113. </div>
  114. <div class="item_6">
  115. <h3>检疫</h3>
  116. <div class="row">检疫结果:合格</div>
  117. <div class="row">检疫时间:8月30日</div>
  118. </div> -->
  119. <span v-for="(item, index) in retrospectInfo" :key="item.title" :class="'time_'+(index+1)">{{ item.time }}</span>
  120. <!-- <span class="time_1">9月3日</span>
  121. <span class="time_2">9月3日</span>
  122. <span class="time_3">8月30日</span>
  123. <span class="time_4">9月3日</span>
  124. <span class="time_5">9月4日</span>
  125. <span class="time_6">8月28日</span> -->
  126. </div>
  127. </article>
  128. </div>
  129. <div class="bottom">
  130. <article>
  131. <E-Bottom1 style="height: 100%"></E-Bottom1>
  132. </article>
  133. <article>
  134. <E-Bottom2 style="height: 100%"></E-Bottom2>
  135. </article>
  136. <article>
  137. <E-Bottom3 style="height: 100%"></E-Bottom3>
  138. </article>
  139. </div>
  140. </div>
  141. <aside class="right">
  142. <article class="right_1">
  143. <h3>产品运输任务</h3>
  144. <E-Right1 style="height: 100%"></E-Right1>
  145. </article>
  146. <article class="right_2">
  147. <h3>屠宰采购来源</h3>
  148. <!-- cellspacing="0px" -->
  149. <table class="table">
  150. <tr>
  151. <th>羊只</th>
  152. <th>来源地</th>
  153. </tr>
  154. <tr v-for="item in 8" :key="item" class="row">
  155. <td style="width: 30%">{{ 12457 + item }}</td>
  156. <td>湖州市长兴县吕山乡</td>
  157. </tr>
  158. </table>
  159. </article>
  160. <article class="right_3">
  161. <h3>屠宰销售去向</h3>
  162. <table class="table">
  163. <tr>
  164. <th>羊只</th>
  165. <th>去向</th>
  166. </tr>
  167. <tr v-for="item in 8" :key="item" class="row">
  168. <td style="width: 30%">{{ 11457 + item }}</td>
  169. <td>安徽</td>
  170. </tr>
  171. </table>
  172. </article>
  173. </aside>
  174. </section>
  175. </div>
  176. </template>
  177. <script>
  178. import HyHeader from "@/components/HyHeader";
  179. import ELeft1 from "./charts/ELeft1";
  180. import ELeft2 from "./charts/ELeft2";
  181. import ERight1 from "./charts/ERight1";
  182. import EBottom1 from "./charts/EBottom1";
  183. import EBottom2 from "./charts/EBottom2";
  184. import EBottom3 from "./charts/EBottom3";
  185. export default {
  186. name: "Butcher",
  187. components: {
  188. HyHeader,
  189. ELeft1,
  190. ELeft2,
  191. ERight1,
  192. EBottom1,
  193. EBottom2,
  194. EBottom3,
  195. },
  196. data() {
  197. return {
  198. searchStr: "00008",
  199. sheepPriceList: [
  200. {
  201. description: "肉羊",
  202. price: "32.5",
  203. site: "长兴",
  204. isRise: true,
  205. },
  206. {
  207. description: "肉羊",
  208. price: "32.5",
  209. site: "杭州",
  210. isRise: true,
  211. },
  212. {
  213. description: "肉羊",
  214. price: "33",
  215. site: "金华",
  216. isRise: true,
  217. },
  218. {
  219. description: "肉羊",
  220. price: "32.5",
  221. site: "苏州",
  222. isRise: false,
  223. },
  224. {
  225. description: "肉羊",
  226. price: "31",
  227. site: "安徽",
  228. isRise: false,
  229. },
  230. {
  231. description: "肉羊",
  232. price: "31",
  233. site: "湖南",
  234. isRise: true,
  235. },
  236. {
  237. description: "肉羊",
  238. price: "32",
  239. site: "江西",
  240. isRise: true,
  241. },
  242. {
  243. description: "肉羊",
  244. price: "29",
  245. site: "内蒙古",
  246. isRise: true,
  247. },
  248. ],
  249. retrospectInfo: [],
  250. retrospectInfo1: [
  251. {
  252. title: "收购",
  253. list: [
  254. "来源:永盛牧场",
  255. "收购重量:50kg",
  256. "收购时间:11月30日",
  257. ],
  258. time: "11月30日",
  259. },
  260. {
  261. title: "检疫",
  262. list: ["检疫结果:合格", "检疫时间:11月30日"],
  263. time: "11月30日",
  264. },
  265. {
  266. title: "屠宰",
  267. list: ["屠宰时间:11月30日"],
  268. time: "11月30日",
  269. },
  270. {
  271. title: "排酸",
  272. list: ["排酸时间:11月30日"],
  273. time: "11月30日",
  274. },
  275. {
  276. title: "分割",
  277. list: ["分割时间:11月30日"],
  278. time: "11月30日",
  279. },
  280. {
  281. title: "运输",
  282. list: [
  283. "运输单号:50kg",
  284. "目的地:杭州",
  285. ],
  286. time: "11月30日",
  287. },
  288. ],
  289. retrospectInfo2: [
  290. {
  291. title: "收购",
  292. list: [
  293. "来源:永盛牧场",
  294. "收购重量:50kg",
  295. "收购时间:11月30日",
  296. ],
  297. time: "11月30日",
  298. },
  299. {
  300. title: "检疫",
  301. list: ["检疫结果:合格", "检疫时间:11月30日"],
  302. time: "11月30日",
  303. },
  304. {
  305. title: "屠宰",
  306. list: ["屠宰时间:11月30日"],
  307. time: "11月30日",
  308. },
  309. {
  310. title: "排酸",
  311. list: ["排酸时间:11月30日"],
  312. time: "11月30日",
  313. },
  314. {
  315. title: "入库",
  316. list: ["入库时间:11月30日"],
  317. time: "11月30日",
  318. },
  319. {
  320. title: "运输",
  321. list: [
  322. "运输单号:50kg",
  323. "目的地:杭州",
  324. ],
  325. time: "11月30日",
  326. },
  327. ],
  328. };
  329. },
  330. created() {
  331. document.title = "湖羊产业";
  332. },
  333. methods: {
  334. search() {
  335. console.log(this.searchStr);
  336. if(this.searchStr%2 == 0) {
  337. this.retrospectInfo = this.retrospectInfo1
  338. } else {
  339. this.retrospectInfo = this.retrospectInfo2
  340. }
  341. },
  342. },
  343. };
  344. </script>
  345. <style lang="scss" scope>
  346. .Butcher {
  347. background-image: url(../../assets/bg.png);
  348. background-size: 100% 100%;
  349. background-repeat: no-repeat;
  350. height: 100%;
  351. display: flex;
  352. flex-direction: column;
  353. overflow: hidden;
  354. > section {
  355. flex-grow: 1;
  356. display: flex;
  357. > aside {
  358. display: flex;
  359. flex-direction: column;
  360. justify-content: space-between;
  361. > article {
  362. height: 31%;
  363. background-image: url(../../assets/download.png);
  364. background-size: 100% 100%;
  365. background-repeat: no-repeat;
  366. > h3 {
  367. color: #fff;
  368. font-size: 25px;
  369. margin-left: 12%;
  370. margin-top: 13px;
  371. display: flex;
  372. align-items: center;
  373. &:before {
  374. content: "";
  375. display: inline-block;
  376. height: 25px;
  377. width: 25px;
  378. margin-right: 50px;
  379. background-color: #fff;
  380. }
  381. }
  382. }
  383. }
  384. > .left {
  385. width: 19.8%;
  386. // border: 1px solid rgb(218, 99, 99);
  387. display: flex;
  388. flex-direction: column;
  389. > .left_1,
  390. .left_2,
  391. .left_3 {
  392. min-width: 600px;
  393. }
  394. > .left_1 {
  395. overflow: hidden;
  396. > .table {
  397. color: #fff;
  398. font-size: 30px;
  399. margin: 20px;
  400. width: 100%;
  401. text-align: center;
  402. }
  403. }
  404. }
  405. > .center {
  406. width: 60.4%;
  407. min-width: 1600px;
  408. // border: 1px solid rgb(163, 147, 58);
  409. display: flex;
  410. flex-direction: column;
  411. > .top {
  412. height: 72%;
  413. // border: 1px solid rgb(62, 58, 128);
  414. display: flex;
  415. flex-direction: column;
  416. .upper {
  417. font-size: 40px;
  418. color: #fff;
  419. display: flex;
  420. justify-content: space-around;
  421. margin: 20px 3%;
  422. // .date {}
  423. .title {
  424. flex-grow: 1;
  425. text-align: center;
  426. display: flex;
  427. align-items: center;
  428. &::before {
  429. content: "";
  430. border: 1px solid #4b81ec;
  431. box-sizing: border-box;
  432. height: 0px;
  433. flex-grow: 1;
  434. margin: 0 50px;
  435. }
  436. &::after {
  437. content: "";
  438. border: 1px solid #4b81ec;
  439. box-sizing: border-box;
  440. height: 0px;
  441. flex-grow: 1;
  442. margin: 0 50px;
  443. }
  444. }
  445. .icon {
  446. width: 50px;
  447. height: 50px;
  448. }
  449. }
  450. .mid {
  451. > .warp {
  452. display: flex;
  453. justify-content: space-around;
  454. margin: 20px 5%;
  455. .item {
  456. border-radius: 20px;
  457. height: 90px;
  458. min-width: 400px;
  459. box-sizing: border-box;
  460. border: 4px solid #53bafd;
  461. flex: 1 0 20%;
  462. margin: 20px 3%;
  463. padding: 10px 10px 10px 10px;
  464. font-size: 35px;
  465. font-weight: 600;
  466. display: flex;
  467. justify-content: center;
  468. align-items: center;
  469. .title {
  470. color: #fff;
  471. }
  472. .num {
  473. color: #53bafd;
  474. font-size: 1.2em;
  475. }
  476. .unit {
  477. color: #53bafd;
  478. font-size: 20px;
  479. margin-left: 15px;
  480. }
  481. }
  482. }
  483. }
  484. .lower {
  485. min-height: 800px;
  486. flex-grow: 1;
  487. display: flex;
  488. flex-direction: column;
  489. margin: 0 3% 1.5% 3%;
  490. color: #fff;
  491. font-size: 30px;
  492. font-weight: 600;
  493. position: relative;
  494. > .inputWrap {
  495. width: 700px;
  496. height: 80px;
  497. display: flex;
  498. align-items: center;
  499. font-size: 60px;
  500. color: #fff;
  501. box-sizing: border-box;
  502. border: 2px solid #797979;
  503. border-radius: 10px;
  504. background-color: #0e93b2;
  505. position: relative;
  506. > .input {
  507. width: 200px;
  508. flex-grow: 1;
  509. font-size: 60px;
  510. color: #fff;
  511. padding-left: 20px;
  512. background: none;
  513. // outline: none;
  514. border: none;
  515. &:focus {
  516. // border: 4px solid #797979;
  517. background: none;
  518. outline: none;
  519. }
  520. }
  521. > .icon_search {
  522. position: absolute;
  523. right: 10px;
  524. width: 60px;
  525. height: 60px;
  526. background: url(../../assets/search.png) no-repeat;
  527. background-size: contain;
  528. }
  529. }
  530. > .container {
  531. position: relative;
  532. // border: 1px solid #797979;
  533. margin: 80px 0;
  534. flex-grow: 1;
  535. background: url(../../assets/bg_main.png) no-repeat;
  536. background-size: 100% 100%;
  537. > div {
  538. // border: 1px solid rgb(243, 14, 14);
  539. display: inline-block;
  540. width: 15.1%;
  541. height: 27.3%;
  542. box-sizing: border-box;
  543. position: absolute;
  544. color: #333333;
  545. > h3 {
  546. text-align: center;
  547. }
  548. > .row {
  549. font-weight: normal;
  550. font-size: 25px;
  551. overflow: hidden;
  552. white-space: nowrap;
  553. text-overflow: ellipsis;
  554. }
  555. }
  556. > .item_1 {
  557. left: 0.7%;
  558. top: 4.7%;
  559. }
  560. > .item_2 {
  561. left: 13.2%;
  562. top: 69%;
  563. }
  564. > .item_3 {
  565. left: 27.3%;
  566. top: 5.5%;
  567. }
  568. > .item_4 {
  569. left: 40.4%;
  570. top: 69.3%;
  571. }
  572. > .item_5 {
  573. left: 64.3%;
  574. top: 5.4%;
  575. }
  576. > .item_6 {
  577. left: 79.8%;
  578. top: 68.9%;
  579. }
  580. > span {
  581. font-size: 35px;
  582. position: absolute;
  583. }
  584. > .time_1 {
  585. left: 5.2%;
  586. top: 57%;
  587. }
  588. > .time_2 {
  589. left: 18.3%;
  590. top: 37%;
  591. }
  592. > .time_3 {
  593. left: 32%;
  594. top: 57%;
  595. }
  596. > .time_4 {
  597. left: 45.6%;
  598. top: 37%;
  599. }
  600. > .time_5 {
  601. left: 69.1%;
  602. top: 57%;
  603. }
  604. > .time_6 {
  605. left: 84.7%;
  606. top: 37%;
  607. }
  608. }
  609. }
  610. }
  611. > .bottom {
  612. height: 28%;
  613. // border: 1px solid rgb(23, 131, 116);
  614. display: flex;
  615. justify-content: space-between;
  616. > article {
  617. width: 33%;
  618. }
  619. }
  620. }
  621. > .right {
  622. width: 19.8%;
  623. // border: 1px solid rgb(61, 197, 179);
  624. display: flex;
  625. flex-direction: column;
  626. justify-content: space-between;
  627. > .right_2,
  628. > .right_3 {
  629. overflow: hidden;
  630. > .table {
  631. color: #fff;
  632. font-size: 30px;
  633. margin: 20px;
  634. width: 96%;
  635. text-align: center;
  636. .row {
  637. background-color: #006666ee;
  638. }
  639. }
  640. }
  641. }
  642. }
  643. }
  644. </style>