HY.yield.client/src/views/cultivateSeed/sub/clan.vue

<template>
    <div class="clan">
        <el-page-header @back="$router.go(-1)" style="margin-bottom: 15px;">
            <template v-slot:content>
                <h3>系谱管理</h3>
            </template>
        </el-page-header>
        <!-- rowspan="2"    -->
        <section class="section">
            <div class="container">
                <div class="left">
                    <table cellspacing="0">
                        <thead>
                            <th colspan="4">基 本 情 况</th>
                        </thead>
                        <tr>
                            <td class="title">品 种</td>
                            <td>{{ self.variety }}</td>
                            <td class="title">耳 标 编 号</td>
                            <td>{{ self.id }}</td>
                        </tr>
                        <tr>
                            <td class="title">性 别</td>
                            <td>{{ self.gender==0?'母':self.gender==1?'公':'' }}</td>
                            <td class="title">出 生 日 期</td>
                            <td>{{ self.birthday.substr(0,10) }}</td>
                        </tr>
                        <tr>
                            <td class="title">同 胞 数</td>
                            <td>{{ self.brotherNum }}</td>
                            <td class="title">出 生 体 重</td>
                            <td>{{ self.birthWeight }}kg</td>
                        </tr>
                        <tr>
                            <td class="title">6月龄体重</td>
                            <td>{{ self.sixWeight }}kg</td>
                            <td class="title">12月龄体重</td>
                            <td>{{ self.twelveWeight }}kg</td>
                        </tr>
                        <tr>
                            <td class="title">级 别</td>
                            <td>
                                <div
                                    v-for="item in $store.state['seedSheedLevel']"
                                    :key="item.value"
                                >
                                    <span v-if="item.value == self.level">{{ item.label }}</span>
                                </div>
                            </td>
                            <td class="title">胎 次</td>
                            <td>{{ self.parity }}</td>
                        </tr>
                    </table>
                </div>
                <div class="right">
                    <article class="l">
                        <span class="title">系谱</span>
                        <span class="line"></span>
                    </article>
                    <article class="m">
                        <p>
                            <span class="title">父</span>
                            <span class="content">{{ father.id }}</span>
                        </p>
                        <p>
                            <span class="title">母</span>
                            <span class="content">{{ mother.id }}</span>
                        </p>
                    </article>
                    <article class="m">
                        <div>
                            <p>
                                <span class="title">父父</span>
                                <span class="content">{{ fatherFather.id }}</span>
                            </p>
                            <p>
                                <span class="title">父母</span>
                                <span class="content">{{ fatherMother.id }}</span>
                            </p>
                        </div>
                        <div>
                            <p>
                                <span class="title">母父</span>
                                <span class="content">{{ motherFather.id }}</span>
                            </p>
                            <p>
                                <span class="title">母母</span>
                                <span class="content">{{ motherMother.id }}</span>
                            </p>
                        </div>
                    </article>
                </div>
            </div>
            <table cellspacing="0">
                <tr>
                    <td rowspan="2" class="title">代别</td>
                    <td rowspan="2" class="title">个体编码</td>
                    <td rowspan="2" class="title">产自单（多）羔羊</td>
                    <td colspan="2" class="title">体高</td>
                    <td colspan="3" class="title">体重</td>
                    <td rowspan="2" class="title">12月龄剪毛重</td>
                    <td rowspan="2" class="title">繁殖成绩</td>
                </tr>
                <tr>
                    <td class="title">12月龄</td>
                    <td class="title">24月龄</td>
                    <td class="title">6月龄</td>
                    <td class="title">12月龄</td>
                    <td class="title" style="border-right: 1px solid #ccc;">24月龄</td>
                </tr>
                <tr>
                    <td class="title">父</td>
                    <td>{{ father.id }}</td>
                    <td>{{ father.brotherNum>1?'是':'否' }}</td>
                    <td>{{ father.twelveHeight }}</td>
                    <td>{{ father.twFourHeight }}</td>
                    <td>{{ father.sixWeight }}</td>
                    <td>{{ father.twelveWeight }}</td>
                    <td>{{ father.twFourWeight }}</td>
                    <td>{{ father.twelveHair }}</td>
                    <!-- <td>{{ father.deliverRank }}</td> -->
                    <td>{{ calc_seedSheedLevel(father.deliverRank) }}</td>
                </tr>
                <tr>
                    <td class="title">母</td>
                    <td>{{ mother.id }}</td>
                    <td>{{ mother.brotherNum>1?'是':'否' }}</td>
                    <td>{{ mother.twelveHeight }}</td>
                    <td>{{ mother.twFourHeight }}</td>
                    <td>{{ mother.sixWeight }}</td>
                    <td>{{ mother.twelveWeight }}</td>
                    <td>{{ mother.twFourWeight }}</td>
                    <td>{{ mother.twelveHair }}</td>
                    <!-- <td>{{ mother.deliverRank }}</td> -->
                    <td>{{ calc_seedSheedLevel(mother.deliverRank) }}</td>
                </tr>
                <tr>
                    <td class="title">父父</td>
                    <td>{{ fatherFather.id }}</td>
                    <td>{{ fatherFather.brotherNum>1?'是':'否' }}</td>
                    <td>{{ fatherFather.twelveHeight }}</td>
                    <td>{{ fatherFather.twFourHeight }}</td>
                    <td>{{ fatherFather.sixWeight }}</td>
                    <td>{{ fatherFather.twelveWeight }}</td>
                    <td>{{ fatherFather.twFourWeight }}</td>
                    <td>{{ fatherFather.twelveHair }}</td>
                    <!-- <td>{{ fatherFather.deliverRank }}</td> -->
                    <td>{{ calc_seedSheedLevel(fatherFather.deliverRank) }}</td>
                </tr>
                <tr>
                    <td class="title">父母</td>
                    <td>{{ fatherMother.id }}</td>
                    <td>{{ fatherMother.brotherNum>1?'是':'否' }}</td>
                    <td>{{ fatherMother.twelveHeight }}</td>
                    <td>{{ fatherMother.twFourHeight }}</td>
                    <td>{{ fatherMother.sixWeight }}</td>
                    <td>{{ fatherMother.twelveWeight }}</td>
                    <td>{{ fatherMother.twFourWeight }}</td>
                    <td>{{ fatherMother.twelveHair }}</td>
                    <!-- <td>{{ fatherMother.deliverRank }}</td> -->
                    <td>{{ calc_seedSheedLevel(fatherMother.deliverRank) }}</td>
                </tr>
                <tr>
                    <td class="title">母父</td>
                    <td>{{ motherFather.id }}</td>
                    <td>{{ motherFather.brotherNum>1?'是':'否' }}</td>
                    <td>{{ motherFather.twelveHeight }}</td>
                    <td>{{ motherFather.twFourHeight }}</td>
                    <td>{{ motherFather.sixWeight }}</td>
                    <td>{{ motherFather.twelveWeight }}</td>
                    <td>{{ motherFather.twFourWeight }}</td>
                    <td>{{ motherFather.twelveHair }}</td>
                    <!-- <td>{{ motherFather.deliverRank }}</td> -->
                    <td>{{ calc_seedSheedLevel(motherFather.deliverRank) }}</td>
                </tr>
                <tr>
                    <td class="title">母母</td>
                    <td>{{ motherMother.id }}</td>
                    <td>{{ motherMother.brotherNum>1?'是':'否' }}</td>
                    <td>{{ motherMother.twelveHeight }}</td>
                    <td>{{ motherMother.twFourHeight }}</td>
                    <td>{{ motherMother.sixWeight }}</td>
                    <td>{{ motherMother.twelveWeight }}</td>
                    <td>{{ motherMother.twFourWeight }}</td>
                    <td>{{ motherMother.twelveHair }}</td>
                    <!-- <td>{{ motherMother.deliverRank }}</td> -->
                    <td>{{ calc_seedSheedLevel(motherMother.deliverRank) }}</td>
                </tr>
            </table>
        </section>
    </div>
</template>

<script>
import { reqClanInfo } from "@/api/cultivateSeed.js";

export default {
    name: "clan",
    data() {
        return {
            self: {
                birthday: "" // 防报错
            },
            father: {},
            fatherFather: {},
            fatherMother: {},
            mother: {},
            motherFather: {},
            motherMother: {},
            aa: this.$store.state["seedSheedLevel"],
            calc_seedSheedLevel(id) {
                let obj = this.$store.state["seedSheedLevel"].find(item => {
                    return item.value == id;
                });
                if (obj) return obj.label;
            }
        };
    },
    created() {
        // 系谱信息
        this.getClanInfo();
    },
    methods: {
        // 系谱信息
        getClanInfo() {
            reqClanInfo({
                id: this.$route.query.id
            })
                .then(res => {
                    // this.CF = res;
                    console.log(res);
                    this.self = res.self;
                    this.father = res.father;
                    this.fatherFather = res.fatherFather;
                    this.fatherMother = res.fatherMother;
                    this.mother = res.mother;
                    this.motherFather = res.motherFather;
                    this.motherMother = res.motherMother;
                })
                .catch(err => {
                    console.log(err);
                });
        }
    }
};
</script>

<style lang="scss" scoped>
$border: 1px solid #ccc;

.clan {
    .section {
        width: 92%;
        .container {
            display: flex;

            .left {
                width: 55%;
            }
            .right {
                flex-grow: 1;
                border: $border;
                border-left: none;
                display: flex;
                color: #777;
                article {
                    width: 33%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                .title {
                    font-weight: 600;
                    color: #555;
                    font-size: 15px;
                }
                .l {
                    display: flex;
                    flex-direction: row;
                    .line {
                        display: inline-block;
                        width: 50%;
                        border-bottom: 1px solid #000;
                        transform: translateY(0.5px);
                        margin-left: 5px;
                    }
                }
                .m {
                    p {
                        margin: 35px;
                        .content {
                            width: 100px;
                            display: inline-block;
                            margin-left: 10px;
                            border-bottom: 1px solid #444;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
}

table {
    border: $border;
    width: 100%;
    thead {
        th {
            height: 60px;
            font-size: 20px;
            color: #555;
        }
    }
    tr {
        height: 56px;
        td {
            border-top: $border;
            border-right: $border;
            text-align: center;
            color: #777;
        }
        td:last-of-type {
            border-right: none;
        }
        .title {
            font-weight: 600;
            color: #555;
            font-size: 15px;
        }
    }
}
</style>