页面开发

This commit is contained in:
lijinxuan123
2024-08-29 18:03:38 +08:00
parent beb5558464
commit 1ae3e877a0
4 changed files with 395 additions and 294 deletions

View File

@@ -1,6 +1,13 @@
<template>
<div class="container-box">
<div class="search-box">
<el-radio-group v-model="activeName" style="margin: 20px 10px">
<el-radio-button label="ABLUP"></el-radio-button>
<el-radio-button label="GBLUP"></el-radio-button>
<el-radio-button label="ssGBLUP"></el-radio-button>
</el-radio-group>
</div>
<div class="list-box">
<el-form
:inline="true"
ref="searchForm"
@@ -8,14 +15,20 @@
class="demo-form-inline"
label-width="auto"
size="mini"
style="margin: 15px 0 25px"
>
<el-form-item label="文件名">
<el-form-item label="养殖场">
<el-input
v-model="searchForm.farm"
placeholder="请输入文件名"
v-model="searchForm.a"
placeholder="请输入养殖场"
></el-input>
</el-form-item>
<el-form-item label="标记编号">
<el-input
v-model="searchForm.b"
placeholder="请输入标记编号"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-search" @click="searchClick"
>搜索</el-button
@@ -25,23 +38,99 @@
>
</el-form-item>
</el-form>
</div>
<div class="list-box">
<el-table :data="tableData" style="width: 100%" size="mini" border>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="a" label="文件名"></el-table-column>
<el-table-column prop="b" label="文件大小"></el-table-column>
<el-table-column prop="c" label="上传时间"></el-table-column>
<el-table-column prop="d" label="品种"></el-table-column>
<el-table-column prop="e" label="文件状态"></el-table-column>
<el-table-column label="操作">
<el-table
:data="tableDataABLUP"
style="width: 100%"
size="mini"
border
v-if="activeName == 'ABLUP'"
>
<el-table-column prop="a" label="养殖场"></el-table-column>
<el-table-column prop="b" label="标记编号"></el-table-column>
<el-table-column prop="c" label="性别"></el-table-column>
<el-table-column prop="d" label="外貌评分"></el-table-column>
<el-table-column prop="e" label="18月龄体高(CM)"></el-table-column>
<el-table-column prop="f" label="18月龄体长(CM)"></el-table-column>
<el-table-column prop="g" label="18月龄胸围(CM)"></el-table-column>
<el-table-column prop="h" label="18月龄官维(CM)"></el-table-column>
<el-table-column prop="i" label="18月龄体重(KG)"></el-table-column>
<el-table-column prop="j" label="18月龄背膘厚度(MM)"></el-table-column>
<el-table-column prop="k" label="18月龄眼肌面积(MM)"></el-table-column>
<el-table-column prop="l" label="平均产奶量(KG)"></el-table-column>
<el-table-column prop="m" label="平均乳脂率(%)"></el-table-column>
<el-table-column prop="n" label="平均乳蛋白率(%)"></el-table-column>
<el-table-column
prop="o"
label="综合育种指数"
sortable
></el-table-column>
<el-table-column label="详情">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="download(scope.row.id)"
class="detail-btn"
>下载</el-button
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<el-table
:data="tableDataGBLUP"
style="width: 100%"
size="mini"
border
v-if="activeName == 'GBLUP'"
>
<el-table-column prop="a" label="养殖场"></el-table-column>
<el-table-column prop="b" label="标记编号"></el-table-column>
<el-table-column prop="c" label="性别"></el-table-column>
<el-table-column prop="d" label="月龄"></el-table-column>
<el-table-column prop="e" label="样本"></el-table-column>
<el-table-column
prop="f"
label="综合育种指数"
sortable
></el-table-column>
<el-table-column label="详情">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="download(scope.row.id)"
class="detail-btn"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<el-table
:data="tableDatassGBLUP"
style="width: 100%"
size="mini"
border
v-if="activeName == 'ssGBLUP'"
>
<el-table-column prop="a" label="养殖场"></el-table-column>
<el-table-column prop="b" label="标记编号"></el-table-column>
<el-table-column prop="c" label="性别"></el-table-column>
<el-table-column prop="d" label="月龄"></el-table-column>
<el-table-column prop="e" label="样本"></el-table-column>
<el-table-column
prop="f"
label="综合育种指数"
sortable
></el-table-column>
<el-table-column label="详情">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="download(scope.row.id)"
class="detail-btn"
>查看</el-button
>
</template>
</el-table-column>
@@ -66,50 +155,187 @@
export default {
data() {
return {
activeName: 'ABLUP',
searchForm: {
farm: '',
number: ''
a: '',
b: ''
},
tableData: [
tableDataABLUP: [
{
id: 0,
a: 'CX_82010000990',
b: '10.23MB',
c: '2024-03-06',
d: '九龙牦牛',
e: '已上传'
},
{
id: 1,
a: 'CX_82010000991',
b: '8.6MB',
c: '2024-03-06',
d: '西门塔尔',
e: '已上传'
a: '若尔盖',
b: '82010000990',
c: '',
d: '93',
e: '132',
f: '161',
g: '198',
h: '18',
i: '577',
j: '10.9',
k: '42.92',
l: '4500',
m: '4.1',
n: '3.4',
o: '255.85'
},
{
id: 2,
a: 'CX_82010000992',
b: '21.23MB',
c: '2024-03-06',
d: '华西牛',
e: '已上传'
a: '若尔盖',
b: '82010000991',
c: '',
d: '90',
e: '130',
f: '155',
g: '192',
h: '19',
i: '567',
j: '9.9',
k: '41.2',
l: '4490',
m: '4.0',
n: '3.2',
o: '252.85'
},
{
id: 3,
a: 'CX_82010000993',
b: '13.21MB',
c: '2024-03-06',
d: '西门塔尔',
e: '已上传'
a: '若尔盖',
b: '82010000992',
c: '',
d: '91',
e: '130',
f: '155',
g: '192',
h: '19',
i: '567',
j: '9.9',
k: '41.2',
l: '4490',
m: '4.0',
n: '3.2',
o: '252.85'
},
{
id: 6,
a: '若尔盖',
b: '82010000993',
c: '雌',
d: '98',
e: '140',
f: '175',
g: '199',
h: '20',
i: '597',
j: '12.9',
k: '47.2',
l: '4690',
m: '4.9',
n: '3.4',
o: '259.85'
},
{
id: 4,
a: 'CX_82010000994',
b: '15.3MB',
c: '2024-03-06',
d: '西藏高山牦牛',
e: '已上传'
a: '若尔盖',
b: '82010000994',
c: '',
d: '96',
e: '140',
f: '185',
g: '199',
h: '20',
i: '597',
j: '12.9',
k: '47.2',
l: '4800',
m: '4.9',
n: '3.4',
o: '254.85'
}
],
tableDataGBLUP: [
{
a: '若尔盖',
b: '82010000990',
c: '雌',
d: '6',
e: '血液',
f: '1'
},
{
a: '若尔盖',
b: '82010000991',
c: '雌',
d: '8',
e: '血液',
f: '3'
},
{
a: '若尔盖',
b: '82010000992',
c: '雌',
d: '7',
e: '血液',
f: '5'
},
{
a: '若尔盖',
b: '82010000993',
c: '雌',
d: '6',
e: '血液',
f: '4'
},
{
a: '若尔盖',
b: '82010000994',
c: '雌',
d: '6',
e: '血液',
f: '9'
}
],
tableDatassGBLUP: [
{
a: '若尔盖',
b: '82010000991',
c: '雌',
d: '8',
e: '血液',
f: '3'
},
{
a: '若尔盖',
b: '82010000994',
c: '雌',
d: '6',
e: '血液',
f: '8'
},
{
a: '若尔盖',
b: '82010000992',
c: '雌',
d: '7',
e: '血液',
f: '5'
},
{
a: '若尔盖',
b: '82010000990',
c: '雌',
d: '6',
e: '血液',
f: '6'
},
{
a: '若尔盖',
b: '82010000993',
c: '雌',
d: '6',
e: '血液',
f: '4'
}
],
form: {
@@ -136,11 +362,8 @@ export default {
handleCurrentChange(val) {
this.form.page = parseInt(val)
},
download(id) {
this.$message({
message: '下载成功',
type: 'success'
})
handleClick(tab, event) {
console.log(tab, event)
}
}
}

View File

@@ -9,13 +9,18 @@
label-width="auto"
size="mini"
>
<el-form-item label="文件名">
<el-form-item label="养殖场">
<el-input
v-model="searchForm.farm"
placeholder="请输入文件名"
v-model="searchForm.a"
placeholder="请输入养殖场"
></el-input>
</el-form-item>
<el-form-item label="标记编号">
<el-input
v-model="searchForm.b"
placeholder="请输入标记编号"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-search" @click="searchClick"
>搜索</el-button
@@ -28,20 +33,21 @@
</div>
<div class="list-box">
<el-table :data="tableData" style="width: 100%" size="mini" border>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="a" label="文件名"></el-table-column>
<el-table-column prop="b" label="文件大小"></el-table-column>
<el-table-column prop="c" label="上传时间"></el-table-column>
<el-table-column prop="d" label="品种"></el-table-column>
<el-table-column prop="e" label="文件状态"></el-table-column>
<el-table-column label="操作">
<el-table-column prop="a" label="养殖场"></el-table-column>
<el-table-column prop="b" label="标记编号"></el-table-column>
<el-table-column prop="c" label="性别"></el-table-column>
<el-table-column prop="d" label="月龄"></el-table-column>
<el-table-column prop="e" label="样本"></el-table-column>
<el-table-column prop="d" label="疑是父母编号"></el-table-column>
<el-table-column prop="e" label="相似度"></el-table-column>
<el-table-column label="亲缘关系结果">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="download(scope.row.id)"
class="detail-btn"
>下载</el-button
>查看</el-button
>
</template>
</el-table-column>
@@ -67,235 +73,59 @@ export default {
data() {
return {
searchForm: {
farm: '',
number: ''
a: '',
b: ''
},
tableData: [
{
id: 0,
a: 'CX_82010000990',
b: '10.23MB',
c: '2024-03-06',
d: '九龙牦牛',
e: '已上传'
a: '若尔盖',
b: '82010000991',
c: '',
d: '8',
e: '血液',
f: '82020000981',
g: '99.99%'
},
{
id: 1,
a: 'CX_82010000991',
b: '8.6MB',
c: '2024-03-06',
d: '西门塔尔',
e: '已上传'
a: '若尔盖',
b: '82010000992',
c: '',
d: '6',
e: '血液',
f: '82020000986',
g: '69.99%'
},
{
id: 2,
a: 'CX_82010000992',
b: '21.23MB',
c: '2024-03-06',
d: '华西牛',
e: '已上传'
a: '若尔盖',
b: '82010000994',
c: '',
d: '6',
e: '血液',
f: '82020000985',
g: '79.99%'
},
{
id: 3,
a: 'CX_82010000993',
b: '13.21MB',
c: '2024-03-06',
d: '西门塔尔',
e: '已上传'
a: '若尔盖',
b: '82010000995',
c: '',
d: '6',
e: '血液',
f: '82020000989',
g: '98.99%'
},
{
id: 4,
a: 'CX_82010000994',
b: '15.3MB',
c: '2024-03-06',
d: '西藏高山牦牛',
e: '已上传'
}
],
form: {
page: 1,
pagesize: 20
},
total: 2
}
},
methods: {
// 搜索
searchClick() {},
// 重置
resetClick() {
for (const key in this.searchForm) {
this.searchForm[key] = ''
}
},
// 条
handleSizeChange(val) {
this.form.pagesize = parseInt(val)
},
// 页
handleCurrentChange(val) {
this.form.page = parseInt(val)
},
download(id) {
this.$message({
message: '下载成功',
type: 'success'
})
}
}
}
</script>
<style lang="less" scoped>
.container-box {
min-height: calc(100vh - 84px);
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.search-box {
background: #fff;
border-radius: 6px;
padding: 10px 15px;
margin-bottom: 25px;
}
.list-box {
flex: 1;
background: #fff;
border-radius: 6px;
padding: 10px 15px;
.detail-btn {
color: #67c23a;
}
.page-box {
margin-top: 10px;
}
}
}
.el-form-item {
margin-bottom: 0px;
margin-right: 20px;
}
// table
/deep/.el-table th.el-table__cell {
background-color: #f5f7fa;
}
/deep/ .cell {
font-weight: normal;
}
</style>
<template>
<div class="container-box">
<div class="search-box">
<el-form
:inline="true"
ref="searchForm"
:model="searchForm"
class="demo-form-inline"
label-width="auto"
size="mini"
>
<el-form-item label="文件名">
<el-input
v-model="searchForm.farm"
placeholder="请输入文件名"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-search" @click="searchClick"
>搜索</el-button
>
<el-button type="warning" icon="el-icon-refresh" @click="resetClick"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="list-box">
<el-table :data="tableData" style="width: 100%" size="mini" border>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="a" label="文件名"></el-table-column>
<el-table-column prop="b" label="文件大小"></el-table-column>
<el-table-column prop="c" label="上传时间"></el-table-column>
<el-table-column prop="d" label="品种"></el-table-column>
<el-table-column prop="e" label="文件状态"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="download(scope.row.id)"
class="detail-btn"
>下载</el-button
>
</template>
</el-table-column>
</el-table>
<div class="page-box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:current-page="form.page"
:page-size="form.pagesize"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
searchForm: {
farm: '',
number: ''
},
tableData: [
{
id: 0,
a: 'CX_82010000990',
b: '10.23MB',
c: '2024-03-06',
d: '九龙牦牛',
e: '已上传'
},
{
id: 1,
a: 'CX_82010000991',
b: '8.6MB',
c: '2024-03-06',
d: '西门塔尔',
e: '已上传'
},
{
id: 2,
a: 'CX_82010000992',
b: '21.23MB',
c: '2024-03-06',
d: '华西牛',
e: '已上传'
},
{
id: 3,
a: 'CX_82010000993',
b: '13.21MB',
c: '2024-03-06',
d: '西门塔尔',
e: '已上传'
},
{
id: 4,
a: 'CX_82010000994',
b: '15.3MB',
c: '2024-03-06',
d: '西藏高山牦牛',
e: '已上传'
id: 3,
a: '若尔盖',
b: '82010000998',
c: '',
d: '6',
e: '血液',
f: '82020000976',
g: '78.99%'
}
],
form: {

View File

@@ -42,7 +42,7 @@
</el-submenu>
<el-submenu index="67">
<template slot="title">
<i class="el-icon-suitcase"></i>
<i class="el-icon-news"></i>
<span slot="title">繁育管理</span>
</template>
<el-menu-item-group>

View File

@@ -9,16 +9,16 @@
label-width="auto"
size="mini"
>
<el-form-item label="Panel">
<el-form-item label="养殖场">
<el-input
v-model="searchForm.farm"
placeholder="请输入Panel"
placeholder="请输入养殖场"
></el-input>
</el-form-item>
<el-form-item label="检测平台">
<el-form-item label="标记编号">
<el-input
v-model="searchForm.farm"
placeholder="请输入检测平台"
placeholder="请输入标记编号"
></el-input>
</el-form-item>
@@ -34,19 +34,19 @@
</div>
<div class="list-box">
<el-table :data="tableData" style="width: 100%" size="mini" border>
<el-table-column prop="a" label="Panel名称"></el-table-column>
<el-table-column prop="b" label="检测平台"></el-table-column>
<el-table-column prop="c" label="基因版本"></el-table-column>
<el-table-column prop="d" label="位点数目"></el-table-column>
<el-table-column prop="e" label="描述"></el-table-column>
<el-table-column label="操作">
<el-table-column prop="a" label="养殖场"></el-table-column>
<el-table-column prop="b" label="标记编号"></el-table-column>
<el-table-column prop="c" label="文件大小"></el-table-column>
<el-table-column prop="d" label="创建时间"></el-table-column>
<el-table-column prop="e" label="分析工具"></el-table-column>
<el-table-column label="详情">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="download(scope.row.id)"
class="detail-btn"
>详情</el-button
>查看</el-button
>
</template>
</el-table-column>
@@ -78,11 +78,59 @@ export default {
tableData: [
{
id: 1,
a: '',
b: 'illumina',
c: '',
d: '',
e: ''
a: '若尔盖',
b: '82010000990',
c: '45MB',
d: '2024.03.06',
e: 'PhyML'
},
{
id: 2,
a: '若尔盖',
b: '82010000991',
c: '40MB',
d: '2024.03.06',
e: 'PhyML'
},
{
id: 3,
a: '若尔盖',
b: '82010000992',
c: '42MB',
d: '2024.03.27',
e: 'PhyML'
},
{
id: 4,
a: '若尔盖',
b: '82010000993',
c: '35MB',
d: '2024.08.02',
e: 'PhyML'
},
{
id: 5,
a: '若尔盖',
b: '82010000994',
c: '40MB',
d: '2024.05.03',
e: 'PhyML'
},
{
id: 6,
a: '若尔盖',
b: '82010000995',
c: '50MB',
d: '2024.04.23',
e: 'PhyML'
},
{
id: 7,
a: '若尔盖',
b: '82010000996',
c: '38MB',
d: '2024.06.03',
e: 'PhyML'
}
],
form: {