Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
d14b2f2f81 | ||
|
|
85967d7989 | ||
|
|
19f304e7d0 |
@@ -7,49 +7,87 @@ import local from '../utils/local'
|
||||
Vue.use(VueRouter)
|
||||
|
||||
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: '/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: '/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: '/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' }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
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()
|
||||
// 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')
|
||||
}
|
||||
next('/login')
|
||||
}
|
||||
})
|
||||
export default router
|
||||
|
||||
429
src/views/archive-information/archive-information.vue
Normal file
429
src/views/archive-information/archive-information.vue
Normal file
@@ -0,0 +1,429 @@
|
||||
<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"
|
||||
>
|
||||
<div class="common-title">
|
||||
<h4>档案信息</h4>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="uploadialogVisible = true"
|
||||
>上传</el-button
|
||||
>
|
||||
<el-button type="success">修改</el-button
|
||||
><el-button type="success">删除</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="获取数据">
|
||||
<el-select
|
||||
value="searchForm.status"
|
||||
v-model="searchForm.status"
|
||||
placeholder="请选择数据类型"
|
||||
class="topselect"
|
||||
@change="change"
|
||||
>
|
||||
<el-option label="基本信息" :value="0"></el-option>
|
||||
<el-option label="系谱信息" :value="1"></el-option>
|
||||
<el-option label="育种分析" :value="2"></el-option>
|
||||
<el-option label="进化分析" :value="3"></el-option>
|
||||
<el-option label="遗传病风险" :value="4"></el-option>
|
||||
<el-option label="综合育种报告" :value="5"></el-option>
|
||||
<el-option label="基因组信息" :value="6"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="标记编号">
|
||||
<el-input
|
||||
v-model="searchForm.number"
|
||||
placeholder="请输入标记编号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="success" icon="el-icon-search">搜索</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
icon="el-icon-refresh"
|
||||
@click="resetClick"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="list-box">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
size="mini"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center', color: '#606266' }"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<el-table-column type="selection" width="55"> </el-table-column>
|
||||
<el-table-column prop="yzc" label="养殖场"></el-table-column>
|
||||
<el-table-column prop="bjbh" label="标记编号"></el-table-column>
|
||||
<el-table-column prop="jbxx" label="基本信息"></el-table-column>
|
||||
<el-table-column prop="xpxx" label="系谱信息"></el-table-column>
|
||||
<el-table-column prop="yzfx" label="育种分析"></el-table-column>
|
||||
<el-table-column prop="jhfx" label="进化分析"></el-table-column>
|
||||
<el-table-column prop="ycbfx" label="遗传病风险"></el-table-column>
|
||||
<el-table-column prop="jyzxx" label="基因组信息"></el-table-column>
|
||||
<el-table-column prop="zhyzbg" 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>
|
||||
<el-dialog :visible.sync="uploadialogVisible" width="40%">
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
status-icon
|
||||
ref="searchForm"
|
||||
label-width="110px"
|
||||
class="demo-ruleForm"
|
||||
style="padding-left: 20px; box-sizing: border-box"
|
||||
>
|
||||
<el-form-item label="名称" prop="pic">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="searchForm.pic"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测平台" prop="title">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="searchForm.title"
|
||||
placeholder="请输入检测平台"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="address">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="searchForm.address"
|
||||
placeholder="请输入描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择上传" prop="address">
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox label="基本信息"></el-checkbox>
|
||||
<el-checkbox label="系谱信息"></el-checkbox>
|
||||
<el-checkbox label="育种分析"></el-checkbox>
|
||||
<el-checkbox label="进化分析"></el-checkbox>
|
||||
<el-checkbox label="遗传病风险"></el-checkbox>
|
||||
<el-checkbox label="基因组信息"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="导入文件名称" prop="address">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
multiple
|
||||
:limit="3"
|
||||
>
|
||||
<el-button size="small" type="success">点击上传</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="uploadialogVisible = false" size="mini"
|
||||
>关闭</el-button
|
||||
>
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
@click="uploadialogVisible = false"
|
||||
>确认</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog :visible.sync="dialogVisible" width="40%">
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
status-icon
|
||||
ref="searchForm"
|
||||
label-width="110px"
|
||||
class="demo-ruleForm"
|
||||
style="padding-left: 20px; box-sizing: border-box"
|
||||
>
|
||||
<el-form-item v-if="evalue == 0 || evalue == 1" label="平台" prop="pic">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="searchForm.pic"
|
||||
placeholder="请输入平台名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="evalue == 0 || evalue == 1"
|
||||
label="手机号"
|
||||
prop="title"
|
||||
>
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="searchForm.title"
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="evalue == 0 || evalue == 1"
|
||||
label="密码"
|
||||
prop="address"
|
||||
>
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="searchForm.address"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="
|
||||
evalue == 2 ||
|
||||
evalue == 3 ||
|
||||
evalue == 4 ||
|
||||
evalue == 5 ||
|
||||
evalue == 6
|
||||
"
|
||||
label="获取编码"
|
||||
prop="address"
|
||||
>
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="searchForm.address1"
|
||||
placeholder="请输入获取编码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" size="mini">关闭</el-button>
|
||||
<el-button type="success" size="mini" @click="dialogVisible = false"
|
||||
>确认</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkList: [],
|
||||
// 上传
|
||||
uploadialogVisible: false,
|
||||
dialogVisible: false,
|
||||
searchForm: {
|
||||
farm: '',
|
||||
number: ''
|
||||
},
|
||||
evalue: '',
|
||||
tableData: [
|
||||
{
|
||||
yzc: '若尔盖',
|
||||
bjbh: '99715011920',
|
||||
jbxx: '已上传',
|
||||
xpxx: '已上传',
|
||||
yzfx: '未上传',
|
||||
jhfx: '未上传',
|
||||
ycbfx: '未上传',
|
||||
jyzxx: '未上传',
|
||||
zhyzbg: '已上传'
|
||||
},
|
||||
{
|
||||
yzc: '若尔盖',
|
||||
bjbh: '99715011921',
|
||||
jbxx: '已上传',
|
||||
xpxx: '已上传',
|
||||
yzfx: '已上传',
|
||||
jhfx: '已上传',
|
||||
ycbfx: '已上传',
|
||||
jyzxx: '已上传',
|
||||
zhyzbg: '已上传'
|
||||
},
|
||||
{
|
||||
yzc: '若尔盖',
|
||||
bjbh: '99715011922',
|
||||
jbxx: '已上传',
|
||||
xpxx: '已上传',
|
||||
yzfx: '已上传',
|
||||
jhfx: '已上传',
|
||||
ycbfx: '已上传',
|
||||
jyzxx: '已上传',
|
||||
zhyzbg: '已上传'
|
||||
},
|
||||
{
|
||||
yzc: '若尔盖',
|
||||
bjbh: '99715011923',
|
||||
jbxx: '已上传',
|
||||
xpxx: '已上传',
|
||||
yzfx: '已上传',
|
||||
jhfx: '已上传',
|
||||
ycbfx: '已上传',
|
||||
jyzxx: '已上传',
|
||||
zhyzbg: '已上传'
|
||||
},
|
||||
{
|
||||
yzc: '若尔盖',
|
||||
bjbh: '99715011924',
|
||||
jbxx: '已上传',
|
||||
xpxx: '已上传',
|
||||
yzfx: '已上传',
|
||||
jhfx: '已上传',
|
||||
ycbfx: '已上传',
|
||||
jyzxx: '已上传',
|
||||
zhyzbg: '已上传'
|
||||
},
|
||||
{
|
||||
yzc: '若尔盖',
|
||||
bjbh: '99715011925',
|
||||
jbxx: '已上传',
|
||||
xpxx: '已上传',
|
||||
yzfx: '已上传',
|
||||
jhfx: '已上传',
|
||||
ycbfx: '已上传',
|
||||
jyzxx: '已上传',
|
||||
zhyzbg: '已上传'
|
||||
},
|
||||
{
|
||||
yzc: '若尔盖',
|
||||
bjbh: '99715011926',
|
||||
jbxx: '已上传',
|
||||
xpxx: '已上传',
|
||||
yzfx: '已上传',
|
||||
jhfx: '已上传',
|
||||
ycbfx: '已上传',
|
||||
jyzxx: '已上传',
|
||||
zhyzbg: '已上传'
|
||||
},
|
||||
{
|
||||
yzc: '若尔盖',
|
||||
bjbh: '99715011927',
|
||||
jbxx: '已上传',
|
||||
xpxx: '已上传',
|
||||
yzfx: '已上传',
|
||||
jhfx: '已上传',
|
||||
ycbfx: '已上传',
|
||||
jyzxx: '已上传',
|
||||
zhyzbg: '已上传'
|
||||
},
|
||||
{
|
||||
yzc: '若尔盖',
|
||||
bjbh: '99715011928',
|
||||
jbxx: '已上传',
|
||||
xpxx: '已上传',
|
||||
yzfx: '已上传',
|
||||
jhfx: '已上传',
|
||||
ycbfx: '已上传',
|
||||
jyzxx: '已上传',
|
||||
zhyzbg: '已上传'
|
||||
}
|
||||
],
|
||||
form: {
|
||||
page: 1,
|
||||
pagesize: 20
|
||||
},
|
||||
total: 9
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.evalue = e
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 上传
|
||||
upload() {},
|
||||
// 搜索
|
||||
searchClick() {},
|
||||
// 重置
|
||||
resetClick() {
|
||||
this.searchForm.status = this.searchForm.number = ''
|
||||
},
|
||||
// 条
|
||||
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;
|
||||
.common-title {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
margin-bottom: 25px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
/deep/.el-form-item__content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
335
src/views/index/index.vue
Normal file
335
src/views/index/index.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div style="padding: 0px 10px 10px 10px">
|
||||
<div class="formtitle">若尔盖养殖场</div>
|
||||
<div class="layouts">
|
||||
<div class="layoutsdiv">
|
||||
<div class="tile">总资源展示</div>
|
||||
<div class="echartsdiv">
|
||||
<!-- 总资源展示两个图表 -->
|
||||
<div id="Inventory" class="chartstyle"></div>
|
||||
<div id="Inventory1" class="chartstyle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layoutsdiv">
|
||||
<div class="tile">综合育种植</div>
|
||||
<div style="display: flex">
|
||||
<div
|
||||
class="echartsdiv"
|
||||
style="display: flex; flex-direction: column; width: 100%"
|
||||
>
|
||||
<!-- 综合育种植图表 -->
|
||||
<div id="Inventory2" class="chartstyle2"></div>
|
||||
<div style="font-weight: 600; width: 100%">群体育种值趋势图</div>
|
||||
</div>
|
||||
<div class="flexdiv">
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div style="font-weight: bold; width: 70%">平均育种值</div>
|
||||
</div>
|
||||
<div class="tabsdata">
|
||||
<div class="tabs">
|
||||
<div>平均育种值</div>
|
||||
<div>132</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
<img
|
||||
style="width: 100%"
|
||||
src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/30581be380a8e407b6a193bc04d1a5f52a.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layoutsdiv">
|
||||
<div class="tile">系谱分析</div>
|
||||
<div style="display: flex">
|
||||
<img
|
||||
style="width: 100%"
|
||||
src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/303d04e7494f5e595cc624c05e03e57c4d.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<!-- <div
|
||||
class="echartsdiv"
|
||||
style="display: flex; flex-direction: column; width: 100%"
|
||||
>
|
||||
<div
|
||||
id="Inventory2"
|
||||
style="height: 350px; text-align: center; width: 100%"
|
||||
></div>
|
||||
<div style="font-weight: 600; width: 100%">群体系统发育NJ树</div>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<div style="text-align: center">
|
||||
<img
|
||||
style="width: 80%"
|
||||
src=""
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="layoutsdiv">
|
||||
<div class="tile">遗传病风险警告</div>
|
||||
<div style="display: flex">
|
||||
<div
|
||||
class="echartsdiv"
|
||||
style="display: flex; flex-direction: column; width: 100%"
|
||||
>
|
||||
<!-- 遗传病风险警告图表 -->
|
||||
<div id="Inventory3" class="chartstyle3"></div>
|
||||
<div style="font-weight: 600; width: 100%">
|
||||
群体遗传比风险概率图
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexdiv">
|
||||
<!-- <div style="width: 100%; display: flex; justify-content: center">
|
||||
<div style="font-weight: bold; width: 70%">群体遗传病风险数量统计表</div>
|
||||
</div> -->
|
||||
<!-- <div class="tabsdata">
|
||||
<div class="tabs">
|
||||
<div>平均育种值</div>
|
||||
<div>132</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<img
|
||||
style="width: 100%"
|
||||
src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/30ed0c054a729a918a324a884a4e920ca7.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
var myChart = echarts.init(document.getElementById('Inventory'))
|
||||
myChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['奶牛', '种母牛', '种公牛', '犊牛']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '种质资源',
|
||||
type: 'bar',
|
||||
data: [35, 140, 300, 420]
|
||||
}
|
||||
]
|
||||
})
|
||||
var myChart1 = echarts.init(document.getElementById('Inventory1'))
|
||||
myChart1.setOption({
|
||||
title: {
|
||||
text: '基因数据资源',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
top: 'bottom',
|
||||
data: ['西门塔尔牛', '九龙牦牛', '安格斯牛', '黄牛', '荷斯坦牛']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [30, 110],
|
||||
roseType: 'area',
|
||||
data: [
|
||||
{ value: 40, name: '西门塔尔牛' },
|
||||
{ value: 30, name: '九龙牦牛' },
|
||||
{ value: 15, name: '安格斯牛' },
|
||||
{ value: 10, name: '黄牛' },
|
||||
{ value: 5, name: '荷斯坦牛' }
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
var myChart2 = echarts.init(document.getElementById('Inventory2'))
|
||||
myChart2.setOption({
|
||||
title: {
|
||||
text: '育种值'
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
'82010000990',
|
||||
'82010000991',
|
||||
'82010000992',
|
||||
'82010000993',
|
||||
'82010000994',
|
||||
'82010000995',
|
||||
'82010000996',
|
||||
'82010000997'
|
||||
]
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
// name: '销量',
|
||||
type: 'line',
|
||||
data: [
|
||||
255.85, 252.16, 259.69, 250.76, 264.34, 255.24, 260.27, 238.7
|
||||
],
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
})
|
||||
var myChart3 = echarts.init(document.getElementById('Inventory3'))
|
||||
myChart3.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['低风险', '高风险']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '占比',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{ value: 25, name: '低风险' },
|
||||
{ value: 75, name: '高风险' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.formtitle {
|
||||
font-weight: bold;
|
||||
padding-left: 12px;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.layouts {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.layouts > .layoutsdiv {
|
||||
width: 47.5%;
|
||||
margin-top: 10px;
|
||||
background: white;
|
||||
padding: 18px 14px 18px 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.tile {
|
||||
border-bottom: 1px solid #29272718;
|
||||
padding-bottom: 10px;
|
||||
font-weight: 600;
|
||||
color: rgb(49, 49, 49);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.echartsdiv {
|
||||
display: flex;
|
||||
.chartstyle {
|
||||
height: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
.chartstyle2 {
|
||||
height: 350px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.chartstyle3 {
|
||||
height: 350px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.echartsdiv div {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.tabsdata {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 30px;
|
||||
.tabs {
|
||||
width: 80%;
|
||||
border: 1px solid #a6c5ee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #468ce7;
|
||||
background: #f2f6fb;
|
||||
}
|
||||
.tabs div {
|
||||
border: 1px solid #a6c5ee;
|
||||
text-align: center;
|
||||
width: 60%;
|
||||
padding: 8px 16px 8px 16px;
|
||||
}
|
||||
}
|
||||
.flexdiv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1669px) {
|
||||
.layouts > .layoutsdiv {
|
||||
width: 47% !important;
|
||||
}
|
||||
.chartstyle {
|
||||
height: 300px !important;
|
||||
}
|
||||
.chartstyle2 {
|
||||
height: 310px !important;
|
||||
}
|
||||
.chartstyle3 {
|
||||
height: 270px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,10 +23,22 @@
|
||||
:default-active="activeIndex"
|
||||
:unique-opened="true"
|
||||
>
|
||||
<el-menu-item index="/index/index">
|
||||
<i class="el-icon-price-tag"></i>
|
||||
<span slot="title">首页</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/disease-resistance/disease-resistance">
|
||||
<i class="el-icon-orange"></i>
|
||||
<span slot="title">遗传病风险</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/archive-information/archive-information">
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">档案信息</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/quick-Search/quick-Search">
|
||||
<i class="el-icon-folder-checked"></i>
|
||||
<span slot="title">快速查询</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
File diff suppressed because one or more lines are too long
267
src/views/quick-Search/quick-Search.vue
Normal file
267
src/views/quick-Search/quick-Search.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<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>
|
||||
<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
|
||||
:header-cell-style="{ textAlign: 'center', color: '#606266' }"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<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 label="系谱分析">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="detailClick(scope.row)"
|
||||
class="detail-btn"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</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="report(scope.row)"
|
||||
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>
|
||||
<el-dialog :visible.sync="dialogVisible" width="40%">
|
||||
<div style="text-align: center">
|
||||
<div class="btmstyle">1</div>
|
||||
<div class="textstyle">
|
||||
<div>标记编号:213</div>
|
||||
<div>养殖场:234</div>
|
||||
<div>品种信息:43223</div>
|
||||
</div>
|
||||
<div style="text-align: left; padding: 30px 0px 18px 14px;font-weight: bold;">11</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" size="mini">关闭</el-button>
|
||||
<el-button type="success" size="mini" @click="dialogVisible = false"
|
||||
>下载</el-button
|
||||
><el-button type="success" size="mini" @click="dialogVisible = false"
|
||||
>打印</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
searchForm: {
|
||||
a: '',
|
||||
b: '',
|
||||
c: '',
|
||||
d: '',
|
||||
e: '',
|
||||
f: ''
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
a: '若尔盖',
|
||||
b: '82010000990',
|
||||
c: '123',
|
||||
d: '详情',
|
||||
e: '未携带',
|
||||
f: '报告'
|
||||
},
|
||||
{
|
||||
a: '若尔盖',
|
||||
b: '82010000991',
|
||||
c: '100',
|
||||
d: '详情',
|
||||
e: '未携带'
|
||||
},
|
||||
{
|
||||
a: '若尔盖',
|
||||
b: '82010000992',
|
||||
c: '96',
|
||||
d: '详情',
|
||||
e: '携带'
|
||||
},
|
||||
{
|
||||
a: '若尔盖',
|
||||
b: '82010000993',
|
||||
c: '85',
|
||||
d: '详情',
|
||||
e: '携带'
|
||||
},
|
||||
{
|
||||
a: '若尔盖',
|
||||
b: '82010000994',
|
||||
c: '74',
|
||||
d: '详情',
|
||||
e: '未携带'
|
||||
},
|
||||
{
|
||||
a: '若尔盖',
|
||||
b: '82010000995',
|
||||
c: '56',
|
||||
d: '详情',
|
||||
e: '携带'
|
||||
},
|
||||
{
|
||||
a: '若尔盖',
|
||||
b: '82010000996',
|
||||
c: '58',
|
||||
d: '详情',
|
||||
e: '未携带'
|
||||
},
|
||||
{
|
||||
a: '若尔盖',
|
||||
b: '82010000997',
|
||||
c: '98',
|
||||
d: '详情',
|
||||
e: '携带'
|
||||
}
|
||||
],
|
||||
form: {
|
||||
page: 1,
|
||||
pagesize: 20
|
||||
},
|
||||
total: 8
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
detailClick() {},
|
||||
report() {},
|
||||
// 搜索
|
||||
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;
|
||||
}
|
||||
.btmstyle {
|
||||
border-bottom: 2px solid #ebebeb;
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
.textstyle {
|
||||
display: flex;
|
||||
padding: 24px;
|
||||
border-bottom: 2px solid #ebebeb;
|
||||
}
|
||||
.textstyle div {
|
||||
margin-right: 15%;
|
||||
}
|
||||
// table
|
||||
/deep/.el-table th.el-table__cell {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
/deep/ .cell {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
@@ -48,7 +48,7 @@ const cdn = {
|
||||
// 'https://code.jquery.com/jquery-3.6.0.min.js'
|
||||
],
|
||||
|
||||
css: ["https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css"],
|
||||
css: ["https://unpkg.com/element-ui/lib/theme-chalk/index.css"],
|
||||
}
|
||||
module.exports = {
|
||||
assetsDir: 'assets',
|
||||
|
||||
Reference in New Issue
Block a user