|
|
@@ -1,9 +1,322 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <el-page-header @back="$router.go(-1)">
|
|
|
+ <div class="clan">
|
|
|
+ <el-page-header @back="$router.go(-1)" style="margin-bottom: 15px;">
|
|
|
<template v-slot:content>
|
|
|
<h4>系谱管理</h4>
|
|
|
</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?'母':'公' }}</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>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </section>
|
|
|
</div>
|
|
|
-</template>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { reqClanInfo } from "@/api/cultivateSeed.js";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "clan",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ self: {
|
|
|
+ birthday:'' // 防报错
|
|
|
+ },
|
|
|
+ father: {},
|
|
|
+ fatherFather: {},
|
|
|
+ fatherMother: {},
|
|
|
+ mother: {},
|
|
|
+ motherFather: {},
|
|
|
+ motherMother: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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>
|
linan