This commit is contained in:
liupengcheng
2024-08-30 15:19:20 +08:00
15 changed files with 1249 additions and 77 deletions

BIN
src/assets/img/e.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

BIN
src/assets/img/gongzhu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 429 KiB

BIN
src/assets/img/huoji.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

BIN
src/assets/img/ji.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

BIN
src/assets/img/lv.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

BIN
src/assets/img/muzhu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 KiB

BIN
src/assets/img/niu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 KiB

BIN
src/assets/img/ya.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

BIN
src/assets/img/yang.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

BIN
src/assets/img/zhu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

View File

@@ -96,87 +96,70 @@ const routes = [
},
]
},
{
path: '/login',
component: Login,
meta: { title: '登录', activeMenu: '/login' }
},
{
path: '/',
component: Layout,
redirect: '/disease-resistance/disease-resistance',
meta: { title: '', activeMenu: '/disease-resistance/disease-resistance' }
}, {
// 首页
path: '/index',
component: Layout,
children: [
{
path: '/index/index',
component: () =>
import('../views/index/index.vue'),
meta: { title: '首页', activeMenu: '/index/index' }
}
]
},
{
// 遗传病风险
path: '/disease-resistance',
component: Layout,
children: [
{
path: '/disease-resistance/disease-resistance',
component: () =>
import('../views/disease-resistance/disease-resistance.vue'),
meta: { title: '遗传病风险', activeMenu: '/disease-resistance/disease-resistance' }
}
]
},
{
// 档案信息
path: '/archive-information',
component: Layout,
children: [
{
path: '/archive-information/archive-information',
component: () =>
import('../views/archive-information/archive-information.vue'),
meta: { title: '档案信息', activeMenu: '/archive-information/archive-information' }
}
]
},
{
// 快速查询
{
// 档案信息
path: '/archive-information',
component: Layout,
children: [
{
path: '/archive-information/archive-information',
component: () =>
import('../views/archive-information/archive-information.vue'),
meta: { title: '档案信息', activeMenu: '/archive-information/archive-information' }
}
]
},
{
// 快速查询
path: '/quick-Search/quick-Search',
component: Layout,
children: [
{
path: '/quick-Search/quick-Search',
component: Layout,
children: [
{
path: '/quick-Search/quick-Search',
component: () =>
import('../views/quick-Search/quick-Search.vue'),
meta: { title: '快速查询', activeMenu: '/quick-Search/quick-Search' }
}
]
}
component: () =>
import('../views/quick-Search/quick-Search.vue'),
meta: { title: '快速查询', activeMenu: '/quick-Search/quick-Search' }
}
]
},
{
// 品种资源
path: '/variety-resources',
component: Layout,
children: [
{
path: '/variety-resources/variety-resources',
component: () =>
import('../views/variety-resources/variety-resources.vue'),
meta: { title: '品种资源', activeMenu: '/variety-resources/variety-resources' }
},
{
path: '/variety-resources/pig-list',
component: () =>
import('../views/variety-resources/pig-list.vue'),
meta: { title: '品种猪', activeMenu: '/variety-resources/pig-list' }
},
]
}
]
const router = new VueRouter({
routes
routes
})
// 前置路由守卫
router.beforeEach((to, from, next) => {
// to到哪里取 from 从哪里来 next 放行
const token = local.get('token_sd')
if (to.meta.title) { // 修改总标题
document.title = '肉牛溯源系统' + '-' + to.meta.title // routes数组中--meta是关键
}
if (token) { // ok
next()
} else { // no
if (to.path === '/login') {
next()
}
next('/login')
// to到哪里取 from 从哪里来 next 放行
const token = local.get('token_sd')
if (to.meta.title) { // 修改总标题
document.title = '肉牛溯源系统' + '-' + to.meta.title // routes数组中--meta是关键
}
if (token) { // ok
next()
} else { // no
if (to.path === '/login') {
next()
}
next('/login')
}
})
export default router

View File

@@ -62,7 +62,7 @@
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[20, 50, 100]"
:page-sizes="[10, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:current-page="form.page"
:page-size="form.pagesize"
@@ -85,17 +85,66 @@ export default {
tableData: [
{
id: 1,
farm: '爱农养殖场',
farm: '若尔盖',
number: '82010000990',
age: '6',
result: '携带'
},
{
id: 2,
farm: '小新养殖场',
farm: '若尔盖',
number: '82010000991',
age: '6',
result: '未携带'
},
{
id: 3,
farm: '若尔盖',
number: '82010000992',
age: '6',
result: '携带'
},
{
id: 4,
farm: '若尔盖',
number: '82010000993',
age: '6',
result: '未携带'
},
{
id: 5,
farm: '若尔盖',
number: '82010000994',
age: '6',
result: '未携带'
},
{
id: 6,
farm: '若尔盖',
number: '82010000995',
age: '6',
result: '未携带'
},
{
id: 7,
farm: '若尔盖',
number: '82010000996',
age: '6',
result: '未携带'
},
{
id: 8,
farm: '若尔盖',
number: '82010000997',
age: '6',
result: '未携带'
},
{
id: 9,
farm: '若尔盖',
number: '82010000973',
age: '6',
result: '未携带'
}
],
form: {
@@ -130,6 +179,12 @@ export default {
} else {
return 'textAlign: center'
}
},
// 查看
detailClick() {
window.open(
'https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/99715011920%E7%89%9B%E9%81%97%E4%BC%A0%E7%97%85%E5%9F%BA%E5%9B%A0%E6%A3%80%E6%B5%8B%E6%8A%A5%E5%91%8A.pdf'
)
}
}
}

View File

@@ -74,6 +74,10 @@
<i class="el-icon-folder-checked"></i>
<span slot="title">快速查询</span>
</el-menu-item>
<el-menu-item index="/variety-resources/variety-resources">
<i class="el-icon-copy-document"></i>
<span slot="title">品种资源</span>
</el-menu-item>
</el-menu>
</div>
</template>

View File

@@ -0,0 +1,961 @@
<template>
<div class="container-box">
<div class="top-box">
<i
class="el-icon-arrow-left"
style="font-size: 24px"
@click="backClick"
></i>
<div class="top-title"></div>
</div>
<div class="list-box">
<el-table
:data="tableData"
style="width: 100%"
size="mini"
border
stripe
:header-cell-style="{ textAlign: 'center', color: '#606266' }"
:cell-style="{ textAlign: 'center' }"
>
<el-table-column prop="id" label="序号"></el-table-column>
<el-table-column prop="number" label="品种登记号"></el-table-column>
<el-table-column prop="cate" label="畜种名称"></el-table-column>
<el-table-column prop="varieties" label="品种名称"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="detailClick(scope.row)"
icon="el-icon-view"
class="detail-btn"
>查看详情</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog title="详情" :visible.sync="dialogVisible" width="60%">
<el-descriptions :column="2" border>
<el-descriptions-item
label="品种登记号"
label-class-name="my-label"
content-class-name="my-content"
>X-01-01-001-01</el-descriptions-item
>
<el-descriptions-item
label="畜种名称"
label-class-name="my-label"
content-class-name="my-content"
></el-descriptions-item
>
<el-descriptions-item
label="品种来源"
label-class-name="my-label"
content-class-name="my-content"
>
地方</el-descriptions-item
>
<el-descriptions-item
label="品种名称"
content-class-name="my-content"
label-class-name="my-label"
>
民猪</el-descriptions-item
>
<el-descriptions-item
label="品种英文名"
label-class-name="my-label"
content-class-name="my-content"
></el-descriptions-item>
<el-descriptions-item
label="品种别名"
label-class-name="my-label"
content-class-name="my-content"
>东北民猪</el-descriptions-item
>
<el-descriptions-item
label="类群名称"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="类群别名"
content-class-name="my-content"
label-class-name="my-label"
>
</el-descriptions-item>
<el-descriptions-item
label="图片(公)"
label-class-name="my-label"
content-class-name="my-content"
>
<el-image
style="width: 80px; height: 50px; overflow: hidden"
:src="boarImage"
fit="contain"
:preview-src-list="[boarImage]"
>
<div
slot="error"
class="image-slot"
style="
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
"
>
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</el-descriptions-item>
<el-descriptions-item
label="图片(母)"
content-class-name="my-content"
label-class-name="my-label"
>
<el-image
style="width: 80px; height: 50px; overflow: hidden"
:src="sowImage"
fit="contain"
:preview-src-list="[sowImage]"
>
<div
slot="error"
class="image-slot"
style="
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
"
>
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</el-descriptions-item>
<el-descriptions-item
label="影像(公)"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="影像(母)"
content-class-name="my-content"
label-class-name="my-label"
>
</el-descriptions-item>
<el-descriptions-item
label="图像(公)"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="图像(母)"
content-class-name="my-content"
label-class-name="my-label"
>
</el-descriptions-item>
<el-descriptions-item
label="照片(群体)"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="图像(群体)"
content-class-name="my-content"
label-class-name="my-label"
>
</el-descriptions-item>
<el-descriptions-item
label="影像(群体)"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="引进国家"
content-class-name="my-content"
label-class-name="my-label"
>
</el-descriptions-item>
<el-descriptions-item
label="信息来源"
label-class-name="my-label"
content-class-name="my-content"
>
国家品种志
</el-descriptions-item>
<el-descriptions-item
label="中心产区"
content-class-name="my-content"
label-class-name="my-label"
>
辽宁省岫岩建昌复县海城昌图朝阳吉林省九站桦甸永吉靖宇通化黑龙江省绥滨富锦集贤北安德都双城兰西河北省迁西遵化兴隆丰宁等
</el-descriptions-item>
<el-descriptions-item
label="主要分布区"
label-class-name="my-label"
content-class-name="my-content"
>
东北和华北部分地区
</el-descriptions-item>
<el-descriptions-item
label="最高海拔"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="最低海拔"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="气候类型"
label-class-name="my-label"
content-class-name="my-content"
>
温带大陆性季风半温润气候地型
</el-descriptions-item>
<el-descriptions-item
label="地型"
label-class-name="my-label"
content-class-name="my-content"
>以丘陵为主
</el-descriptions-item>
<el-descriptions-item
label="年均温度"
label-class-name="my-label"
content-class-name="my-content"
>
8
</el-descriptions-item>
<el-descriptions-item
label="年最高温度"
label-class-name="my-label"
content-class-name="my-content"
>25
</el-descriptions-item>
<el-descriptions-item
label="年最低温度"
label-class-name="my-label"
content-class-name="my-content"
>
-14
</el-descriptions-item>
<el-descriptions-item
label="相对湿度"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="年均降水量"
label-class-name="my-label"
content-class-name="my-content"
>
647
</el-descriptions-item>
<el-descriptions-item
label="无霜期"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="土壤类型"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<!-- ----------- -->
<el-descriptions-item
label="作物种类"
label-class-name="my-label"
content-class-name="my-content"
>高粱玉米大豆谷子棉花芝麻向日葵甜菜等
</el-descriptions-item>
<el-descriptions-item
label="生态适应性"
label-class-name="my-label"
content-class-name="my-content"
>适应性强
</el-descriptions-item>
<el-descriptions-item
label="抗病能力"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="独特性状"
label-class-name="my-label"
content-class-name="my-content"
>抗寒能力强
</el-descriptions-item>
<el-descriptions-item
label="典型生态影像"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="填报人"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="填报单位"
label-class-name="my-label"
content-class-name="my-content"
>中国农业科学院畜牧研究所
</el-descriptions-item>
<el-descriptions-item
label="更新日期 "
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="采集日期"
label-class-name="my-label"
content-class-name="my-content"
>01/01/1982
</el-descriptions-item>
<el-descriptions-item
label="群体总数"
label-class-name="my-label"
content-class-name="my-content"
>850
</el-descriptions-item>
<el-descriptions-item
label="公畜数量"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="配种公畜数量"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="母畜数量"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="繁殖母畜数量"
label-class-name="my-label"
content-class-name="my-content"
>2
</el-descriptions-item>
<el-descriptions-item
label="品种杂交比例"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="人工授精公畜"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="人工授精母畜"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="保护等级"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="保护方法"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="濒危状态"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="濒危依据及说明"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="体貌概述"
label-class-name="my-label"
content-class-name="my-content"
>
头中等大面直耳大下垂体躯扁平背腰窄狭臀部斜四肢粗壮全身被毛黑色毛密而长猪鬃较多冬季密生绒毛起防寒保温作用
</el-descriptions-item>
<el-descriptions-item
label="体型"
label-class-name="my-label"
content-class-name="my-content"
>体躯扁平背腰窄狭臀部倾斜四肢粗壮
</el-descriptions-item>
<el-descriptions-item
label="毛色"
label-class-name="my-label"
content-class-name="my-content"
>全身被毛黑色毛密而长
</el-descriptions-item>
<el-descriptions-item
label="肤色"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="头型"
label-class-name="my-label"
content-class-name="my-content"
>头中等大面直长
</el-descriptions-item>
<el-descriptions-item
label="角型"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="耳型"
label-class-name="my-label"
content-class-name="my-content"
>耳大下垂
</el-descriptions-item>
<el-descriptions-item
label="乳头个数"
label-class-name="my-label"
content-class-name="my-content"
>14
</el-descriptions-item>
<el-descriptions-item
label="体高(公)"
label-class-name="my-label"
content-class-name="my-content"
>86
</el-descriptions-item>
<el-descriptions-item
label="体斜长(公)"
label-class-name="my-label"
content-class-name="my-content"
>148
</el-descriptions-item>
<el-descriptions-item
label="胸围(公)"
label-class-name="my-label"
content-class-name="my-content"
>139
</el-descriptions-item>
<el-descriptions-item
label="体重(公)"
label-class-name="my-label"
content-class-name="my-content"
>195
</el-descriptions-item>
<el-descriptions-item
label="体高(母)"
label-class-name="my-label"
content-class-name="my-content"
>82
</el-descriptions-item>
<el-descriptions-item
label="体斜长(母)"
label-class-name="my-label"
content-class-name="my-content"
>141
</el-descriptions-item>
<el-descriptions-item
label="胸围(母)"
label-class-name="my-label"
content-class-name="my-content"
>132
</el-descriptions-item>
<el-descriptions-item
label="体重(母)"
label-class-name="my-label"
content-class-name="my-content"
>151
</el-descriptions-item>
<el-descriptions-item
label="独特特征"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="性成熟日龄(公)"
label-class-name="my-label"
content-class-name="my-content"
>90
</el-descriptions-item>
<el-descriptions-item
label="配种日龄(公)"
label-class-name="my-label"
content-class-name="my-content"
>270
</el-descriptions-item>
<el-descriptions-item
label="性成熟日龄(母)"
label-class-name="my-label"
content-class-name="my-content"
>120
</el-descriptions-item>
<el-descriptions-item
label="配种日龄(母)"
label-class-name="my-label"
content-class-name="my-content"
>240
</el-descriptions-item>
<el-descriptions-item
label="发情月份"
label-class-name="my-label"
content-class-name="my-content"
>全年多次发情
</el-descriptions-item>
<el-descriptions-item
label="发情周期"
label-class-name="my-label"
content-class-name="my-content"
>21
</el-descriptions-item>
<el-descriptions-item
label="怀孕期"
label-class-name="my-label"
content-class-name="my-content"
>114
</el-descriptions-item>
<el-descriptions-item
label="初产仔数"
label-class-name="my-label"
content-class-name="my-content"
>11
</el-descriptions-item>
<el-descriptions-item
label="经产仔数"
label-class-name="my-label"
content-class-name="my-content"
>12
</el-descriptions-item>
<el-descriptions-item
label="初生重(公)"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="初生重(母)"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="断奶日龄"
label-class-name="my-label"
content-class-name="my-content"
>60
</el-descriptions-item>
<el-descriptions-item
label="断奶重"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="断奶窝重"
label-class-name="my-label"
content-class-name="my-content"
>120
</el-descriptions-item>
<el-descriptions-item
label="断奶活仔数"
label-class-name="my-label"
content-class-name="my-content"
>9.7
</el-descriptions-item>
<el-descriptions-item
label="空怀天数"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="繁殖率"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="繁殖成活率"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="主要用途"
label-class-name="my-label"
content-class-name="my-content"
>肉脂兼用
</el-descriptions-item>
<el-descriptions-item
label="产奶量"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="乳脂率"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="料肉比"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="屠宰活重"
label-class-name="my-label"
content-class-name="my-content"
>90
</el-descriptions-item>
<el-descriptions-item
label="屠宰日龄"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="胴体重"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="屠宰率"
label-class-name="my-label"
content-class-name="my-content"
>72
</el-descriptions-item>
<el-descriptions-item
label="净肉率"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="瘦肉率"
label-class-name="my-label"
content-class-name="my-content"
>45
</el-descriptions-item>
<el-descriptions-item
label="肉色评分"
label-class-name="my-label"
content-class-name="my-content"
>3
</el-descriptions-item>
<el-descriptions-item
label="肉ph1"
label-class-name="my-label"
content-class-name="my-content"
>6.3
</el-descriptions-item>
<el-descriptions-item
label="肉ph2"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="肉系水力"
label-class-name="my-label"
content-class-name="my-content"
>76.3
</el-descriptions-item>
<el-descriptions-item
label="大理石纹评分"
label-class-name="my-label"
content-class-name="my-content"
>4
</el-descriptions-item>
<el-descriptions-item
label="肉嫩度"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="肉风味"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="毛绒类型"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="毛绒产量(公)"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="毛绒产量(母)"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="毛绒纤维细度"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="毛绒纤维长度"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="净毛绒率"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="挽力"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="速率"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="饲养类型"
label-class-name="my-label"
content-class-name="my-content"
>舍饲和放牧
</el-descriptions-item>
<el-descriptions-item
label="补饲状况"
label-class-name="my-label"
content-class-name="my-content"
>精料及农副产品
</el-descriptions-item>
<el-descriptions-item
label="管理容易否"
label-class-name="my-label"
content-class-name="my-content"
>易管理
</el-descriptions-item>
<el-descriptions-item
label="遗传检测"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="检测单位"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="检测人"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="基因组文库"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="文件存放单位"
label-class-name="my-label"
content-class-name="my-content"
>
</el-descriptions-item>
<el-descriptions-item
label="品种评价及开发利用"
label-class-name="my-label"
content-class-name="my-content"
>
民猪具有抗寒能力强体质强健产仔较多脂肪沉积能力强和肉质好的特点适于放牧和较粗放的管理与约克夏巴克夏苏白克米洛夫和长白猪杂交培育成哈白猪新金猪东北花猪和三江白猪这些新品种猪大都保留了民猪抗寒性强的特点繁殖力高和肉质好的特点但胴体脂肪率高皮较厚后腿肌肉不发达增重较慢今后应继续加强本品种选育提高胴体的瘦肉率
</el-descriptions-item>
</el-descriptions>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="mini"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: '1',
number: 'x-01-01-001-01',
cate: '猪',
varieties: '民猪'
},
{
id: '2',
number: 'x-01-01-002-01',
cate: '猪',
varieties: '八眉猪'
},
{
id: '3',
number: 'x-01-01-003-01',
cate: '猪',
varieties: '黄淮海黑猪'
},
{
id: '4',
number: 'x-01-01-003-02',
cate: '猪',
varieties: '黄淮海黑猪'
},
{
id: '5',
number: 'x-01-01-003-03',
cate: '猪',
varieties: '黄淮海黑猪'
},
{
id: '6',
number: 'x-01-01-003-04',
cate: '猪',
varieties: '黄淮海黑猪'
},
{
id: '7',
number: 'x-01-01-003-05',
cate: '猪',
varieties: '黄淮海黑猪'
},
{
id: '8',
number: 'x-01-01-004-01',
cate: '猪',
varieties: '汉江黑猪'
},
{
id: '9',
number: 'x-01-01-005-01',
cate: '猪',
varieties: '沂蒙黑猪'
},
{
id: '10',
number: 'x-01-01-006-01',
cate: '猪',
varieties: '两广小花猪'
},
{
id: '11',
number: 'x-01-01-007-01',
cate: '猪',
varieties: '粤东猪'
}
],
dialogVisible: false,
boarImage: require('../../assets/img/gongzhu.png'),
sowImage: require('../../assets/img/muzhu.png')
}
},
methods: {
// 返回
backClick() {
window.history.go(-1)
},
detailClick() {
this.dialogVisible = true
}
}
}
</script>
<style lang="less" scoped>
.container-box {
min-height: calc(100vh - 84px);
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
background: #fff;
.top-box {
display: flex;
align-items: center;
margin-bottom: 20px;
.top-title {
background-color: #5aad00;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
width: 80px;
}
}
}
// 弹层--header
/deep/.el-dialog__header {
font-weight: bold;
box-shadow: 0 0.2px 1px rgba(0, 0, 0, 0.12), 0 0 4px rgba(0, 0, 0, 0.04);
}
/deep/ .my-label {
background: #f0f8ff;
width: 120px;
text-align: right !important;
// display: flex;
// align-items: center;
// align-items: center;
}
/deep/ .my-content {
width: 425px;
}
</style>

View File

@@ -0,0 +1,169 @@
<template>
<div class="container-box">
<div class="all-box">
<div class="top-box">
<div class="top-title1">家畜品种库</div>
</div>
<div class="content-box">
<div
class="item-box"
v-for="item in livestockList"
:key="item.id"
@click="livestockClick(item)"
>
<div class="img-box">
<img :src="item.url" alt="" style="width: 100%" />
</div>
<div class="title">{{ item.title }}</div>
</div>
</div>
</div>
<div class="all-box" style="margin-top: 60px">
<div class="top-box">
<div class="top-title1">家禽品种库</div>
</div>
<div class="content-box">
<div
class="item-box"
v-for="item in poultryList"
:key="item.id"
@click="poultryClick(item)"
>
<div class="img-box">
<img :src="item.url" alt="" style="width: 100%" />
</div>
<div class="title">{{ item.title }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
livestockList: [
{
id: 1,
url: require('../../assets/img/zhu.png'),
title: '猪'
},
{
id: 2,
url: require('../../assets/img/niu.png'),
title: '牛'
},
{
id: 3,
url: require('../../assets/img/yang.png'),
title: '羊'
},
{
id: 4,
url: require('../../assets/img/lv.png'),
title: '驴'
}
],
poultryList: [
{
id: 1,
url: require('../../assets/img/huoji.png'),
title: '火鸡'
},
{
id: 2,
url: require('../../assets/img/e.png'),
title: '鹅'
},
{
id: 3,
url: require('../../assets/img/ya.png'),
title: '鸭'
},
{
id: 4,
url: require('../../assets/img/ji.png'),
title: '鸡'
}
]
}
},
methods: {
livestockClick(item) {
console.log(item, 'item.name')
if (item.title == '猪') {
this.$router.push({
path: '/variety-resources/pig-list'
})
} else {
this.$alert('建设中,请耐心等待!', '提示', {
confirmButtonText: '确定',
callback: (action) => {}
})
}
},
poultryClick(item) {
this.$alert('建设中,请耐心等待!', '提示', {
confirmButtonText: '确定',
callback: (action) => {}
})
}
}
}
</script>
<style lang="less" scoped>
.container-box {
min-height: calc(100vh - 84px);
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.all-box {
.top-box {
border-radius: 6px;
background: #fff;
padding: 10px;
margin-bottom: 10px;
.top-title1 {
background-color: #5aad00;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
width: 80px;
}
}
.content-box {
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
background: #fff;
padding: 10px;
.item-box {
flex: 1;
cursor: pointer;
margin-right: 20px;
.img-box {
padding: 5px 15px;
border: 1px solid #f2f2f2;
}
.title {
margin-top: 10px;
width: 100%;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
}
.item-box:last-child {
margin-right: 0px;
}
}
}
}
</style>