|
@@ -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>
|