Merge branch 'jx-dev' into dev
This commit is contained in:
lijinxuan123
23710
package-lock.json
generated
23710
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -13,7 +13,7 @@
|
||||
"axios": "^0.26.1",
|
||||
"core-js": "^3.6.5",
|
||||
"echarts": "^5.3.2",
|
||||
"element-ui": "^2.15.6",
|
||||
"element-ui": "^2.15.14",
|
||||
"file-saver": "^2.0.5",
|
||||
"jquery": "^3.6.0",
|
||||
"js-base64": "^3.7.2",
|
||||
|
||||
@@ -30,7 +30,72 @@ const routes = [
|
||||
meta: { title: '遗传病风险', activeMenu: '/disease-resistance/disease-resistance' }
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
// 基因管理
|
||||
path: '/geneMgmt',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '/geneMgmt/SPN',
|
||||
component: () =>
|
||||
import('../views/geneMgmt/SPN.vue'),
|
||||
meta: { title: 'SPN位点管理', activeMenu: '/geneMgmt/SPN' }
|
||||
},
|
||||
{
|
||||
path: '/geneMgmt/SPNPanel',
|
||||
component: () =>
|
||||
import('../views/geneMgmt/SPNPanel.vue'),
|
||||
meta: { title: 'SPN Panel位点管理', activeMenu: '/geneMgmt/SPNPanel' }
|
||||
},
|
||||
{
|
||||
path: '/geneMgmt/sequence',
|
||||
component: () =>
|
||||
import('../views/geneMgmt/sequence.vue'),
|
||||
meta: { title: '原始测序数据', activeMenu: '/geneMgmt/sequence' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
// 繁育管理
|
||||
path: '/breedMgmt',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '/breedMgmt/BLUP',
|
||||
component: () =>
|
||||
import('../views/breedMgmt/BLUP.vue'),
|
||||
meta: { title: 'BLUP', activeMenu: '/breedMgmt/BLUP' }
|
||||
},
|
||||
{
|
||||
path: '/breedMgmt/paternityTest',
|
||||
component: () =>
|
||||
import('../views/breedMgmt/paternityTest.vue'),
|
||||
meta: { title: '亲子鉴定', activeMenu: '/breedMgmt/paternityTest' }
|
||||
},
|
||||
{
|
||||
path: '/breedMgmt/lineage',
|
||||
component: () =>
|
||||
import('../views/breedMgmt/lineage.vue'),
|
||||
meta: { title: '血统管理', activeMenu: '/breedMgmt/lineage' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
// 进化分析
|
||||
path: '/phylogeneticAnalysis',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '/phylogeneticAnalysis/evolutionaryTree',
|
||||
component: () =>
|
||||
import('../views/phylogeneticAnalysis/evolutionaryTree.vue'),
|
||||
meta: { title: '进化树', activeMenu: '/phylogeneticAnalysis/evolutionaryTree' }
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
||||
186
src/views/breedMgmt/BLUP.vue
Normal file
186
src/views/breedMgmt/BLUP.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<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: '已上传'
|
||||
}
|
||||
],
|
||||
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>
|
||||
186
src/views/breedMgmt/lineage.vue
Normal file
186
src/views/breedMgmt/lineage.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<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: '已上传'
|
||||
}
|
||||
],
|
||||
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>
|
||||
372
src/views/breedMgmt/paternityTest.vue
Normal file
372
src/views/breedMgmt/paternityTest.vue
Normal file
@@ -0,0 +1,372 @@
|
||||
<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: '已上传'
|
||||
}
|
||||
],
|
||||
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: '已上传'
|
||||
}
|
||||
],
|
||||
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>
|
||||
258
src/views/geneMgmt/SPN.vue
Normal file
258
src/views/geneMgmt/SPN.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<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.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 label="Panel">
|
||||
<el-input v-model="searchForm.c" placeholder="请输入Panel"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="染色体">
|
||||
<el-input
|
||||
v-model="searchForm.d"
|
||||
placeholder="请输入染色体"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始位置">
|
||||
<el-input
|
||||
v-model="searchForm.e"
|
||||
placeholder="请输入开始位置"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束位置">
|
||||
<el-input
|
||||
v-model="searchForm.f"
|
||||
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 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="参考基因"></el-table-column>
|
||||
<el-table-column prop="g" label="等位基因"></el-table-column>
|
||||
<el-table-column prop="h" label="备注"></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: {
|
||||
a: '',
|
||||
b: '',
|
||||
c: '',
|
||||
d: '',
|
||||
e: '',
|
||||
f: ''
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
a: '82010000990',
|
||||
b: '--',
|
||||
c: 'ARS-UCD1.2',
|
||||
d: '10',
|
||||
e: '10011101',
|
||||
f: 'T',
|
||||
g: 'G',
|
||||
h: '--'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
a: '82010000991',
|
||||
b: '--',
|
||||
c: 'ARS-UCD1.2',
|
||||
d: '10',
|
||||
e: '10011102',
|
||||
f: 'G',
|
||||
g: 'C',
|
||||
h: '--'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
a: '82010000992',
|
||||
b: '--',
|
||||
c: 'ARS-UCD1.2',
|
||||
d: '10',
|
||||
e: '10011103',
|
||||
f: 'A',
|
||||
g: 'G',
|
||||
h: '--'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
a: '82010000993',
|
||||
b: '--',
|
||||
c: 'ARS-UCD1.2',
|
||||
d: '10',
|
||||
e: '1001457',
|
||||
f: 'C',
|
||||
g: 'G',
|
||||
h: '--'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
a: '82010000994',
|
||||
b: '--',
|
||||
c: 'ARS-UCD1.2',
|
||||
d: '10',
|
||||
e: '100118',
|
||||
f: 'A',
|
||||
g: 'T',
|
||||
h: '--'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
a: '82010000995',
|
||||
b: '--',
|
||||
c: 'ARS-UCD1.2',
|
||||
d: '10',
|
||||
e: '10011109',
|
||||
f: 'T',
|
||||
g: 'G',
|
||||
h: '--'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
a: '82010000996',
|
||||
b: '--',
|
||||
c: 'ARS-UCD1.2',
|
||||
d: '10',
|
||||
e: '10011105',
|
||||
f: 'G',
|
||||
g: 'C',
|
||||
h: '--'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
a: '82010000997',
|
||||
b: '--',
|
||||
c: 'ARS-UCD1.2',
|
||||
d: '10',
|
||||
e: '100111023',
|
||||
f: 'A',
|
||||
g: 'G',
|
||||
h: '--'
|
||||
}
|
||||
],
|
||||
form: {
|
||||
page: 1,
|
||||
pagesize: 20
|
||||
},
|
||||
total: 8
|
||||
}
|
||||
},
|
||||
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)
|
||||
},
|
||||
// 当监测结果为 已携带 的状态，加上背景色,字体颜色
|
||||
cellStyle({ row, column, rowIndex, columnIndex }) {
|
||||
// 注意，这里返回的是一个对象
|
||||
if (row.result == '携带' && column.label == '监测结果') {
|
||||
return 'background:#d9001b;textAlign: center;color:#fff;'
|
||||
} else {
|
||||
return 'textAlign: center'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
159
src/views/geneMgmt/SPNPanel.vue
Normal file
159
src/views/geneMgmt/SPNPanel.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<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="Panel">
|
||||
<el-input
|
||||
v-model="searchForm.farm"
|
||||
placeholder="请输入Panel"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<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 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="操作">
|
||||
<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: 1,
|
||||
a: '',
|
||||
b: 'illumina',
|
||||
c: '',
|
||||
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>
|
||||
186
src/views/geneMgmt/sequence.vue
Normal file
186
src/views/geneMgmt/sequence.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<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: '已上传'
|
||||
}
|
||||
],
|
||||
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>
|
||||
@@ -27,6 +27,41 @@
|
||||
<i class="el-icon-orange"></i>
|
||||
<span slot="title">遗传病风险</span>
|
||||
</el-menu-item>
|
||||
<el-submenu index="66">
|
||||
<template slot="title">
|
||||
<i class="el-icon-printer"></i>
|
||||
<span slot="title">基因管理</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/geneMgmt/SPN">SPN位点管理</el-menu-item>
|
||||
<el-menu-item index="/geneMgmt/SPNPanel"
|
||||
>SPN Panel位点管理</el-menu-item
|
||||
>
|
||||
<el-menu-item index="/geneMgmt/sequence">原始测序数据</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-submenu index="67">
|
||||
<template slot="title">
|
||||
<i class="el-icon-suitcase"></i>
|
||||
<span slot="title">繁育管理</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/breedMgmt/BLUP">BLUP</el-menu-item>
|
||||
<el-menu-item index="/breedMgmt/paternityTest">亲子鉴定</el-menu-item>
|
||||
<el-menu-item index="/breedMgmt/lineage">血统管理</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-submenu index="68">
|
||||
<template slot="title">
|
||||
<i class="el-icon-suitcase"></i>
|
||||
<span slot="title">进化分析</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="/phylogeneticAnalysis/evolutionaryTree"
|
||||
>进化树</el-menu-item
|
||||
>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
159
src/views/phylogeneticAnalysis/evolutionaryTree.vue
Normal file
159
src/views/phylogeneticAnalysis/evolutionaryTree.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<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="Panel">
|
||||
<el-input
|
||||
v-model="searchForm.farm"
|
||||
placeholder="请输入Panel"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<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 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="操作">
|
||||
<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: 1,
|
||||
a: '',
|
||||
b: 'illumina',
|
||||
c: '',
|
||||
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>
|
||||
Reference in New Issue
Block a user