“基芯农育种”修改为“智慧育种”

package.json

@@ -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",

public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="icon" href="<%= BASE_URL %>title.ico">
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>

src/App.vue

@@ -6,4 +6,7 @@
 </template>
 
 <style lang="less">
+a {
+  color: #67c23a !important;
+}
 </style>

src/assets/fonts/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 3368735 */
-  src: url('iconfont.woff2?t=1687687235044') format('woff2'),
-       url('iconfont.woff?t=1687687235044') format('woff'),
-       url('iconfont.ttf?t=1687687235044') format('truetype');
+  font-family: "iconfont"; /* Project id 4669413 */
+  src: url('iconfont.woff2?t=1725246332040') format('woff2'),
+       url('iconfont.woff?t=1725246332040') format('woff'),
+       url('iconfont.ttf?t=1725246332040') format('truetype');
 }
 
 .iconfont {
@@ -13,147 +13,43 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.ai-yangniuxueyuan:before {
-  content: "\e627";
-}
-
-.ai-xianshangwenzhen:before {
-  content: "\e61e";
-}
-
-.ai-jiaoliushequ:before {
-  content: "\e61c";
-}
-
-.ai-hangqing-wulianwang:before {
-  content: "\e618";
-}
-
-.ai-jiaqin:before {
-  content: "\e62f";
-}
-
-.ai-a-jiankangguanli:before {
-  content: "\e626";
-}
-
-.ai-a-wenzhenyiyuan:before {
-  content: "\e623";
-}
-
-.ai-a-yangniuxueyuan:before {
-  content: "\e624";
-}
-
-.ai-a-jiaoliushequ:before {
-  content: "\e625";
-}
-
-.ai-fenwubaoshou:before {
-  content: "\e61d";
-}
-
-.ai-luguanli:before {
+.icon-icon_bingjia:before {
   content: "\e61b";
 }
 
-.ai-baoxianguanli:before {
-  content: "\e61a";
-}
-
-.ai-shouye:before {
-  content: "\e619";
-}
-
-.ai-baoxiangongsi:before {
+.icon-jiyinjianceke:before {
   content: "\e610";
 }
 
-.ai-zhifu:before {
-  content: "\e611";
+.icon-chaxuncaijia:before {
+  content: "\e635";
 }
 
-.ai-shangchuancailiao:before {
-  content: "\e612";
-}
-
-.ai-lipeishouli:before {
-  content: "\e613";
-}
-
-.ai-bangdingshebei:before {
-  content: "\e614";
-}
-
-.ai-heyanshebei:before {
-  content: "\e615";
-}
-
-.ai-tijiaobaodanshenqing:before {
-  content: "\e616";
-}
-
-.ai-baoxianbaoan:before {
-  content: "\e617";
-}
-
-.ai-dianzijianyi:before {
-  content: "\e60f";
-}
-
-.ai-jianyirenzheng:before {
-  content: "\e60e";
-}
-
-.ai-xipusuyuan:before {
-  content: "\e60d";
-}
-
-.ai-huanjingguanli:before {
-  content: "\e60c";
-}
-
-.ai-yangguanli:before {
-  content: "\e60b";
-}
-
-.ai-a-ai_huaban1fuben15:before {
-  content: "\e601";
-}
-
-.ai-a-ai_huaban1fuben14:before {
-  content: "\e602";
-}
-
-.ai-a-ai_huaban1fuben11:before {
-  content: "\e603";
-}
-
-.ai-a-ai_huaban1fuben10:before {
-  content: "\e604";
-}
-
-.ai-a-ai_huaban1fuben17:before {
-  content: "\e605";
-}
-
-.ai-a-ai_huaban1fuben16:before {
-  content: "\e606";
-}
-
-.ai-a-ai_huaban1fuben18:before {
-  content: "\e607";
-}
-
-.ai-a-ai_huaban1fuben12:before {
-  content: "\e608";
-}
-
-.ai-a-ai_huaban1fuben13:before {
-  content: "\e609";
-}
-
-.ai-a-ai_huaban1fuben19:before {
+.icon-xitongguanli:before {
   content: "\e60a";
 }
 
+.icon-gaojichaxun:before {
+  content: "\e632";
+}
+
+.icon-dangan:before {
+  content: "\e676";
+}
+
+.icon-nannvbili:before {
+  content: "\e73f";
+}
+
+.icon-pinzhong:before {
+  content: "\e645";
+}
+
+.icon-fenxi-05:before {
+  content: "\ec81";
+}
+
+.icon-shouye:before {
+  content: "\e61d";
+}
+

src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 // 引入element-ui框架
 import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css';
 // import 'element-ui/lib/theme-chalk/index.css'
 import App from './App.vue'
 import router from './router'

src/router/index.js

@@ -15,8 +15,107 @@ const routes = [
   {
     path: '/',
     component: Layout,
-    redirect: '/disease-resistance/disease-resistance',
-    meta: { title: '首页', activeMenu: '/disease-resistance/disease-resistance' }
+    redirect: '/login',
+    meta: { title: '', activeMenu: '/login' }
+  }, {
+    // 首页
+    path: '/index',
+    component: Layout,
+    children: [
+      {
+        path: '/index/index',
+        component: () =>
+          import('../views/index/index.vue'),
+        meta: { title: '首页', activeMenu: '/index/index' }
+      }
+    ]
+  }, {
+    // 快速查询
+    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' }
+      }
+    ]
+  }, {
+    // 基因管理
+    path: '/geneMgmt',
+    component: Layout,
+    children: [
+      {
+        path: '/geneMgmt/SPN',
+        component: () =>
+          import('../views/geneMgmt/SPN.vue'),
+        meta: { title: 'SNP位点管理', activeMenu: '/geneMgmt/SPN' }
+      },
+      {
+        path: '/geneMgmt/SPNPanel',
+        component: () =>
+          import('../views/geneMgmt/SPNPanel.vue'),
+        meta: { title: 'SNP 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' }
+      },
+      {
+        path: '/phylogeneticAnalysis/pca',
+        component: () =>
+          import('../views/phylogeneticAnalysis/pca.vue'),
+        meta: { title: 'PCA', activeMenu: '/phylogeneticAnalysis/pca' }
+      },
+      {
+        path: '/phylogeneticAnalysis/admixture',
+        component: () =>
+          import('../views/phylogeneticAnalysis/admixture.vue'),
+        meta: { title: 'ADMIXTURE', activeMenu: '/phylogeneticAnalysis/admixture' }
+      },
+    ]
   },
   {
     // 遗传病风险
@@ -30,6 +129,39 @@ const routes = [
         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: '/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' }
+      },
+    ]
   }
 ]
 
@@ -38,10 +170,9 @@ const router = new VueRouter({
 })
 // 前置路由守卫
 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是关键
+    document.title = '智慧育种' + '-' + to.meta.title // routes数组中--meta是关键
   }
   if (token) { // ok
     next()
@@ -49,7 +180,8 @@ router.beforeEach((to, from, next) => {
     if (to.path === '/login') {
       next()
     }
-    next('/login')
   }
-})
+}
+  // next('/login')
+)
 export default router

src/views/archive-information/archive-information.vue

@@ -0,0 +1,447 @@
+<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"
+      >
+        <div style="height: 40px"></div>
+        <el-form-item label="名称" prop="pic1">
+          <el-input
+            type="text"
+            v-model="searchForm.pic1"
+            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%">
+      <div
+        style="
+          color: black;
+          font-weight: bold;
+          font-size: 20px;
+          padding-left: 2%;
+          border-bottom: 2px solid #f1f1f1;
+          padding-bottom: 18px;
+          margin-bottom: 20px;
+        "
+      >
+        平台认证
+      </div>
+      <el-form
+        :model="searchForm"
+        status-icon
+        ref="searchForm"
+        label-width="80px"
+        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: '',
+        pic: '爱农智慧牧场'
+      },
+      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;
+}
+/deep/.el-dialog__body {
+  padding: 0px 10px 10px 10px;
+}
+</style>

src/views/breedMgmt/BLUP.vue

@@ -0,0 +1,514 @@
+<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"
+        :model="searchForm"
+        class="demo-form-inline"
+        label-width="auto"
+        size="mini"
+        style="margin: 15px 0 25px"
+      >
+        <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>
+      <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" class="detail-btn"
+            ><a
+              target="_blank"
+              href="https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/82010000945ABLUP%E8%82%B2%E7%A7%8D%E6%8A%A5%E5%91%8A.pdf"
+              >预览</a
+            ></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="详情">
+          <el-button size="mini" type="text" class="detail-btn">
+            <a
+              href="https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/82010000923GBLUP%E8%82%B2%E7%A7%8D%E6%8A%A5%E5%91%8A.pdf"
+              target="_blank"
+            >
+              预览
+            </a>
+          </el-button>
+        </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="详情">
+          <el-button size="mini" type="text" class="detail-btn">
+            <a
+              href="https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/82010000995ssGBLUP%E8%82%B2%E7%A7%8D%E6%8A%A5%E5%91%8A.pdf"
+              target="_blank"
+              >预览</a
+            ></el-button
+          >
+        </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 {
+      activeName: 'ABLUP',
+      searchForm: {
+        a: '',
+        b: ''
+      },
+      tableDataABLUP: [
+        {
+          id: 0,
+          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: 1,
+          a: '若尔盖',
+          b: '82010000991',
+          c: '雌',
+          d: '86',
+          e: '133',
+          f: '160',
+          g: '196',
+          h: '20',
+          i: '569',
+          j: '10.3',
+          k: '41.36',
+          l: '4560',
+          m: '4',
+          n: '3.2',
+          o: '252.16'
+        },
+        {
+          id: 2,
+          a: '若尔盖',
+          b: '82010000992',
+          c: '雌',
+          d: '95',
+          e: '130',
+          f: '155',
+          g: '199',
+          h: '21',
+          i: '587',
+          j: '10.5',
+          k: '43.69',
+          l: '4578',
+          m: '4.2',
+          n: '3.3',
+          o: '259.69'
+        },
+        {
+          id: 3,
+          a: '若尔盖',
+          b: '82010000993',
+          c: '雌',
+          d: '84',
+          e: '128',
+          f: '154',
+          g: '200',
+          h: '19',
+          i: '566',
+          j: '10.8',
+          k: '41.58',
+          l: '4589',
+          m: '4',
+          n: '3.5',
+          o: '250.76'
+        },
+        {
+          id: 4,
+          a: '若尔盖',
+          b: '82010000994',
+          c: '雌',
+          d: '89',
+          e: '129',
+          f: '159',
+          g: '197',
+          h: '18',
+          i: '599',
+          j: '11',
+          k: '41.36',
+          l: '4578',
+          m: '4.3',
+          n: '3.4',
+          o: '264.34'
+        },
+        {
+          id: 5,
+          a: '若尔盖',
+          b: '82010000995',
+          c: '雌',
+          d: '96',
+          e: '126',
+          f: '156',
+          g: '192',
+          h: '20',
+          i: '578',
+          j: '9.9',
+          k: '40.86',
+          l: '4600',
+          m: '4',
+          n: '3.2',
+          o: '255.24'
+        },
+        {
+          id: 6,
+          a: '若尔盖',
+          b: '82010000996',
+          c: '雌',
+          d: '84',
+          e: '130',
+          f: '155',
+          g: '193',
+          h: '22',
+          i: '589',
+          j: '10.3',
+          k: '42.59',
+          l: '4523',
+          m: '4.2',
+          n: '3.4',
+          o: '260.27'
+        },
+        {
+          id: 7,
+          a: '若尔盖',
+          b: '82010000997',
+          c: '雌',
+          d: '87',
+          e: '129',
+          f: '160',
+          g: '195',
+          h: '24',
+          i: '598',
+          j: '10.5',
+          k: '44.25',
+          l: '4538',
+          m: '4',
+          n: '3.2',
+          o: '238.70'
+        }
+      ],
+      tableDataGBLUP: [
+        {
+          a: '若尔盖',
+          b: '82010000990',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '-10'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000991',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '50'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000992',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '-10'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000993',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '40'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000994',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '77'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000995',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '-10'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000996',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '20'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000997',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '-10'
+        }
+      ],
+      tableDatassGBLUP: [
+        {
+          a: '若尔盖',
+          b: '82010000990',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '80'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000991',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '0'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000992',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '20'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000993',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '76'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000994',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '-10'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000995',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '30'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000996',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '-1'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000997',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '60'
+        }
+      ],
+      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)
+    },
+    handleClick(tab, event) {
+      console.log(tab, event)
+    }
+  }
+}
+</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;
+}
+
+/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+  background-color: #67c23a;
+  border-color: #67c23a;
+}
+/deep/ .el-radio-button__inner:hover {
+  color: #67c23a;
+}
+</style>

src/views/breedMgmt/lineage.vue

@@ -0,0 +1,296 @@
+<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-select v-model="searchForm.a" placeholder="选择品种">
+          <el-option
+            v-for="item in options1"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select v-model="searchForm.b" placeholder="选择单个">
+          <el-option
+            v-for="item in options2"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-form-item label="">
+          <el-input v-model="searchForm.c" placeholder="请输入编号"></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="warning" icon="el-icon-refresh" @click="resetClick"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="list-box con">
+      <div class="con">
+        <div class="left">
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            size="mini"
+            border
+            height="504"
+            ref="multipleTable"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55"> </el-table-column>
+            <el-table-column prop="a" label="标记编号"></el-table-column>
+          </el-table>
+        </div>
+        <div class="right">
+          <div style="height: 480px; width: 500px">
+            <img
+              src="@/assets/img/one.png"
+              alt=""
+              v-if="multipleSelection.length == 1"
+            />
+            <img
+              src="@/assets/img/two.png"
+              alt=""
+              v-if="multipleSelection.length == 2"
+            />
+          </div>
+          <div class="info">
+            <p>
+              <el-tooltip placement="top">
+                <div slot="content">
+                  低近交系数（0% -
+                  5%）：表示个体的遗传多样性较高，近交程度较低。这些个体的基因组中<br />
+                  来自近亲的比例很小，通常表示良好的遗传多样性和较低的遗传疾病风险。<br />
+                  中等近交系数（5% -
+                  15%）：表示个体存在一定程度的近交，遗传多样性略有下降。这些个体<br />
+                  可能会有一些遗传问题的风险，但整体仍然在可接受范围内。<br />
+                  高近交系数（15%
+                  以上）：表示个体的近交程度较高，遗传多样性明显下降。这些个体可能面<br />
+                  临更高的遗传疾病风险，且可能出现表现不稳定的情况，如生长缓慢、繁殖问题等<br />
+                </div>
+                <span class="el-icon-info"></span>
+              </el-tooltip>
+              近交系数
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        a: '',
+        b: '',
+        c: ''
+      },
+      options1: [
+        {
+          value: '选项1',
+          label: '西门塔尔'
+        },
+        {
+          value: '选项2',
+          label: '九龙牦牛'
+        },
+        {
+          value: '选项3',
+          label: '荷斯坦牛'
+        },
+        {
+          value: '选项4',
+          label: '安格斯牛'
+        }
+      ],
+      options2: [
+        {
+          value: '选项1',
+          label: '单个'
+        },
+        {
+          value: '选项2',
+          label: '多个'
+        }
+      ],
+      tableData: [
+        {
+          id: 1,
+          a: 'CX_82010000990'
+        },
+        {
+          id: 2,
+          a: 'CX_82010000991'
+        },
+        {
+          id: 3,
+          a: 'CX_82010000992'
+        },
+        {
+          id: 4,
+          a: 'CX_82010000993'
+        },
+        {
+          id: 5,
+          a: 'CX_82010000994'
+        },
+        {
+          id: 6,
+          a: 'CX_82010000995'
+        },
+        {
+          id: 7,
+          a: 'CX_82010000996'
+        },
+        {
+          id: 8,
+          a: 'CX_82010000997'
+        },
+        {
+          id: 9,
+          a: 'CX_82010000998'
+        },
+        {
+          id: 10,
+          a: 'CX_82010000999'
+        },
+        {
+          id: 11,
+          a: 'CX_82010001000'
+        },
+        {
+          id: 12,
+          a: 'CX_82010001001'
+        },
+        {
+          id: 13,
+          a: 'CX_82010001002'
+        },
+        {
+          id: 14,
+          a: 'CX_82010001003'
+        }
+      ],
+      form: {
+        page: 1,
+        pagesize: 20
+      },
+      total: 2,
+      multipleSelection: [],
+      maxSelectionCount: 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)
+    },
+    handleSelectionChange(val) {
+      if (val.length > this.maxSelectionCount) {
+        val.splice(0, val.length - 2)
+        this.$refs.multipleTable.toggleRowSelection(val[0], false) // 取消第一行的选中状态
+      }
+      this.multipleSelection = val
+      console.log(this.multipleSelection)
+    }
+  }
+}
+</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;
+}
+/deep/ .el-input--suffix .el-input__inner {
+  padding-right: 30px;
+  width: 150px;
+  height: 28px;
+  line-height: 28px;
+}
+/deep/ .el-input__suffix {
+  height: 120%;
+}
+.con {
+  width: 100%;
+  height: 508px;
+  border: #ccc solid 1px;
+  padding: 15px;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: row;
+}
+.left {
+  width: 200px;
+}
+.right {
+  flex: 1;
+  img {
+    width: auto;
+    height: 480px;
+    margin-left: 100px;
+  }
+}
+.info p {
+  padding-right: 200px;
+  float: right;
+}
+</style>

src/views/breedMgmt/paternityTest.vue

@@ -0,0 +1,231 @@
+<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>
+        <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="相似度" sortable></el-table-column>
+        <el-table-column label="亲缘关系结果">
+          <el-button size="mini" type="text" class="detail-btn"
+            ><a
+              href="https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/82010000990%E5%88%86%E5%AD%90%E8%82%B2%E7%A7%8D%E4%BA%B2%E5%AD%90%E9%89%B4%E5%AE%9A.pdf"
+              target="_blank"
+              rel="noopener noreferrer"
+              >预览</a
+            ></el-button
+          >
+        </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: ''
+      },
+      tableData: [
+        {
+          id: 0,
+          a: '若尔盖',
+          b: '82010000990',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000991',
+          g: '99.89%'
+        },
+        {
+          id: 1,
+          a: '若尔盖',
+          b: '82010000991',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000992',
+          g: '67%'
+        },
+        {
+          id: 2,
+          a: '若尔盖',
+          b: '82010000992',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000993',
+          g: '96.32%'
+        },
+        {
+          id: 3,
+          a: '若尔盖',
+          b: '82010000993',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000994',
+          g: '98.96%'
+        },
+        {
+          id: 4,
+          a: '若尔盖',
+          b: '82010000994',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000995',
+          g: '67%'
+        },
+        {
+          id: 5,
+          a: '若尔盖',
+          b: '82010000995',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000996',
+          g: '97.65%'
+        },
+        {
+          id: 6,
+          a: '若尔盖',
+          b: '82010000996',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000997',
+          g: '67%'
+        },
+        {
+          id: 7,
+          a: '若尔盖',
+          b: '82010000997',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000998',
+          g: '96.23%'
+        }
+      ],
+      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)
+    },
+    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>

src/views/disease-resistance/disease-resistance.vue

@@ -45,7 +45,7 @@
         <el-table-column prop="farm" label="养殖场"></el-table-column>
         <el-table-column prop="number" label="标记编号"></el-table-column>
         <el-table-column prop="age" label="月龄"></el-table-column>
-        <el-table-column prop="result" label="监测结果"></el-table-column>
+        <el-table-column prop="result" label="检测结果"></el-table-column>
         <el-table-column label="详情">
           <template slot-scope="scope">
             <el-button
@@ -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,24 +85,73 @@ 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: {
         page: 1,
         pagesize: 20
       },
-      total: 2
+      total: 9
     }
   },
   methods: {
@@ -125,11 +174,17 @@ export default {
     // 当监测结果为 已携带 的状态，加上背景色,字体颜色
     cellStyle({ row, column, rowIndex, columnIndex }) {
       // 注意，这里返回的是一个对象
-      if (row.result == '携带' && column.label == '监测结果') {
+      if (row.result == '携带' && column.label == '检测结果') {
         return 'background:#d9001b;textAlign: center;color:#fff;'
       } 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'
+      )
     }
   }
 }

src/views/geneMgmt/SPN.vue

@@ -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="标记编号" style="margin-bottom: 10px">
+          <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: 'G',
+          g: 'C',
+          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>

src/views/geneMgmt/SPNPanel.vue

@@ -0,0 +1,209 @@
+<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.a" placeholder="请输入Panel"></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>
+        <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-button size="mini" type="text" class="detail-btn">
+            <router-link :to="{ path: '/geneMgmt/SPN' }">详情</router-link>
+          </el-button>
+        </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: ''
+      },
+      tableData: [
+        {
+          id: 1,
+          a: 'test_1',
+          b: 'illumina',
+          c: 'ARS-UCD1.2',
+          d: '1011',
+          e: '--'
+        },
+        {
+          id: 2,
+          a: 'test_2',
+          b: 'illumina',
+          c: 'ARS-UCD1.2',
+          d: '2365',
+          e: '--'
+        },
+        {
+          id: 3,
+          a: 'test_3',
+          b: 'illumina',
+          c: 'ARS-UCD1.2',
+          d: '2589',
+          e: '--'
+        },
+        {
+          id: 4,
+          a: 'test_4',
+          b: 'illumina',
+          c: 'ARS-UCD1.2',
+          d: '4568',
+          e: '--'
+        },
+        {
+          id: 5,
+          a: 'test_5',
+          b: 'illumina',
+          c: 'ARS-UCD1.2',
+          d: '2587',
+          e: '--'
+        },
+        {
+          id: 6,
+          a: 'test_6',
+          b: 'illumina',
+          c: 'ARS-UCD1.2',
+          d: '1452',
+          e: '--'
+        },
+        {
+          id: 7,
+          a: 'test_7',
+          b: 'illumina',
+          c: 'ARS-UCD1.2',
+          d: '7854',
+          e: '--'
+        },
+        {
+          id: 8,
+          a: 'test_8',
+          b: 'illumina',
+          c: 'ARS-UCD1.2',
+          d: '5894',
+          e: '--'
+        },
+        {
+          id: 9,
+          a: 'test_9',
+          b: 'illumina',
+          c: 'ARS-UCD1.2',
+          d: '3354',
+          e: '--'
+        }
+      ],
+      form: {
+        page: 1,
+        pagesize: 20
+      },
+      total: 9
+    }
+  },
+  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) {}
+  }
+}
+</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>

src/views/geneMgmt/sequence.vue

@@ -0,0 +1,217 @@
+<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="操作">
+          <el-button size="mini" type="text" class="detail-btn">
+            <a
+              href="https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/CX_82010000990.txt"
+              target="_blank"
+              rel="noopener noreferrer"
+              >下载</a
+            >
+          </el-button>
+        </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: '11.05MB',
+          c: '2024-03-06',
+          d: '西门塔尔',
+          e: '已上传'
+        },
+        {
+          id: 2,
+          a: 'CX_82010000992',
+          b: '12.36MB',
+          c: '2024-03-06',
+          d: '华西牛',
+          e: '已上传'
+        },
+        {
+          id: 3,
+          a: 'CX_82010000993',
+          b: '14.78MB',
+          c: '2024-03-06',
+          d: '西门塔尔',
+          e: '已上传'
+        },
+        {
+          id: 4,
+          a: 'CX_82010000994',
+          b: '14.36MB',
+          c: '2024-03-06',
+          d: '西藏高山牦牛',
+          e: '已上传'
+        },
+        {
+          id: 5,
+          a: 'CX_82010000995',
+          b: '18.64MB',
+          c: '2024-03-06',
+          d: '西门塔尔',
+          e: '已上传'
+        },
+        {
+          id: 6,
+          a: 'CX_82010000996',
+          b: '15.78MB',
+          c: '2024-03-06',
+          d: '西门塔尔',
+          e: '已上传'
+        },
+        {
+          id: 7,
+          a: 'CX_82010000997',
+          b: '13.85MB',
+          c: '2024-03-06',
+          d: '西门塔尔',
+          e: '已上传'
+        },
+        {
+          id: 8,
+          a: 'CX_82010000998',
+          b: '16.12MB',
+          c: '2024-03-06',
+          d: '西门塔尔',
+          e: '已上传'
+        }
+      ],
+      form: {
+        page: 1,
+        pagesize: 20
+      },
+      total: 9
+    }
+  },
+  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>

src/views/index/index.vue

@@ -0,0 +1,403 @@
+<template>
+  <div style="padding: 0px 10px 10px 10px">
+    <div class="formtitle">若尔盖养殖场</div>
+    <div class="layouts">
+      <div class="layoutsdiv">
+        <div class="tile" style="margin-bottom: 0px">总资源展示</div>
+        <div class="echartsdiv">
+          <!-- 总资源展示两个图表 -->
+          <div id="Inventory" class="chartstyle"></div>
+          <div id="Inventory1" class="chartstylepc"></div>
+        </div>
+        <div class="text">
+          <div>种质资源</div>
+          <div>基因数据资源</div>
+        </div>
+      </div>
+      <div class="layoutsdiv">
+        <div class="tile">综合育种值</div>
+        <div
+          style="
+            display: flex;
+            font-weight: bold;
+            width: 100%;
+            padding-top: 4px;
+          "
+        >
+          <div style="width: 50%; text-align: left; padding-left: 1%">
+            育种值
+          </div>
+          <div class="yzz">平均育种值</div>
+        </div>
+        <div style="display: flex">
+          <div
+            class="echartsdiv"
+            style="display: flex; flex-direction: column; width: 100%"
+          >
+            <div id="Inventory2" class="chartstyle2"></div>
+          </div>
+          <div class="flexdiv">
+            <div
+              style="width: 100%; display: flex; justify-content: center"
+            ></div>
+            <div class="tabsdata">
+              <div class="tabs">
+                <div>平均育种值</div>
+                <div>258</div>
+              </div>
+            </div>
+            <div style="text-align: center">
+              <img
+                style="width: 100%"
+                src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/ymc_travel/2024/09/23/eebaca34a02b3398edaf107b1ae7415e.png"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+        <div class="rightstyle">
+          <div>群体育种值趋势图</div>
+          <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/ymc_travel/2024/09/23/8efcf4aa9ab05f1a4937a081a20a52d5.png"
+            alt=""
+          />
+        </div>
+        <div class="newstyle">
+          <div style="width: 42%; text-align: center">群体系统发育NJ树</div>
+          <div style="width: 47%; text-align: center">分布位置展示</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" style="display: flex">
+            <img
+              style="width: 110%"
+              src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/ymc_travel/2024/09/24/d1995dff7f26663444619f1620d83bc0.png"
+              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: [
+          {
+            type: 'bar',
+            data: [35, 140, 300, 420],
+            itemStyle: {
+              color: '#6A63E8'
+            },
+            barWidth: 30 //柱图宽度
+          }
+        ]
+      })
+      var myChart1 = echarts.init(document.getElementById('Inventory1'))
+      myChart1.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          top: '40px'
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: [30, 70],
+            roseType: 'area',
+            data: [
+              { value: 40, name: '西门塔尔牛' },
+              { value: 30, name: '九龙牦牛' },
+              { value: 15, name: '安格斯牛' },
+              { value: 10, name: '黄牛' },
+              { value: 5, name: '荷斯坦牛' }
+            ],
+            top: '70px'
+          }
+        ]
+      })
+      var myChart2 = echarts.init(document.getElementById('Inventory2'))
+      myChart2.setOption({
+        title: {},
+        tooltip: {},
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '82010000990',
+            '82010000991',
+            '82010000992',
+            '82010000993',
+            '82010000994',
+            '82010000995',
+            '82010000996',
+            '82010000997'
+          ]
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            // name: '销量',
+            type: 'line',
+            data: [
+              255.85, 252.16, 259.69, 250.76, 264.34, 255.24, 260.27, 238.7
+            ],
+            areaStyle: {},
+            areaStyle: {
+              normal: {
+                color: '#DADFFB' //改变区域颜色
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#6A63E8', //改变折线点的颜色
+                lineStyle: {
+                  color: '#6A63E8' //改变折线颜色
+                }
+              }
+            }
+          }
+        ]
+      })
+      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%', '50%'],
+            data: [
+              { value: 25, name: '低风险', itemStyle: { color: '#5CAAF8' } },
+              { value: 75, name: '高风险', itemStyle: { color: '#E8556F' } }
+            ],
+            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: 2px;
+  font-size: 20px;
+}
+.layouts {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  width: 100%;
+  overflow: hidden;
+  .layouts > .layoutsdiv {
+    width: 47.86%;
+    margin-top: 10px;
+    background: white;
+    padding: 18px 14px 18px 16px;
+    border-radius: 6px;
+  }
+  .tile {
+    border-bottom: 1px solid #29272718;
+    padding-bottom: 18px;
+    padding-top: 6px;
+    font-weight: 600;
+    color: rgb(49, 49, 49);
+    margin-bottom: 20px;
+  }
+  .echartsdiv {
+    display: flex;
+    .chartstyle {
+      height: 350px;
+      text-align: center;
+    }
+    .chartstylepc {
+      height: 350px;
+      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 #89d7b2;
+      display: flex;
+      justify-content: space-between;
+      color: #89d7b2;
+      background: #f2fffa;
+      margin-top: 26px;
+      font-size: 14px;
+    }
+    .tabs div {
+      border: 1px solid #89d7b2;
+      text-align: center;
+      width: 60%;
+      padding: 8px 16px 8px 16px;
+    }
+  }
+  .flexdiv {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .newstyle {
+    display: flex;
+    font-weight: bold;
+    width: 100%;
+    justify-content: space-around;
+    padding-bottom: 20px;
+    position: relative;
+    margin-top: -38px;
+  }
+  .yzz {
+    width: 35%;
+    text-align: center;
+  }
+  .rightstyle {
+    display: flex;
+    font-weight: bold;
+    width: 104%;
+    justify-content: space-around;
+    margin-top: -40px;
+    padding-bottom: 20px;
+  }
+  .text {
+    display: flex;
+    font-weight: bold;
+    width: 104%;
+    justify-content: space-around;
+    padding-top: 40px;
+  }
+}
+@media (max-width: 1669px) {
+    .text {
+    padding-top: 10px !important;
+    margin-bottom: 30px;
+  }
+  .rightstyle {
+    padding-bottom: 0px !important;
+    margin-top: 0px !important;
+    width: 99% !important;
+  }
+  .yzz {
+    width: 26% !important;
+  }
+  .newstyle {
+    margin-top: -22px !important;
+  }
+  .layouts > .layoutsdiv {
+    width: 47% !important;
+  }
+  .chartstyle {
+    height: 340px !important;
+  }
+  .chartstylepc {
+    height: 380px !important;
+  }
+  .chartstyle2 {
+    height: 340px !important;
+  }
+  .chartstyle3 {
+    height: 270px !important;
+  }
+  .tabsdata {
+    padding-top: 0px;
+  }
+}
+</style>
+  

src/views/layout/left-menu.vue

@@ -11,8 +11,8 @@
       <el-image
         class="el-img-box"
         v-else
-        style="height: 72px; width: 80px"
-        src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/youpin/20240724/xl34jq31yvdzd73b5im9.png"
+        style="height: 72px; width: 100%; background-color: white"
+        src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/304274395c99e45476a1c783cc806e72b8.jpg"
         fit="cover"
       ></el-image>
     </div>
@@ -23,10 +23,66 @@
       :default-active="activeIndex"
       :unique-opened="true"
     >
+      <el-menu-item index="/index/index">
+        <i class="icon iconfont icon-shouye"></i>
+        <span slot="title">首页</span>
+      </el-menu-item>
+      <el-menu-item index="/quick-Search/quick-Search">
+        <i class="icon iconfont icon-chaxuncaijia"></i>
+        <span slot="title">快速查询</span>
+      </el-menu-item>
+      <el-submenu index="66">
+        <template slot="title">
+          <i class="icon iconfont icon-jiyinjianceke"></i>
+          <span slot="title">基因管理</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="/geneMgmt/SPN">SNP位点管理</el-menu-item>
+          <el-menu-item index="/geneMgmt/SPNPanel"
+            >SNP 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="icon iconfont icon-nannvbili"></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="icon iconfont icon-fenxi-05"></i>
+          <span slot="title">进化分析</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="/phylogeneticAnalysis/evolutionaryTree"
+            >进化树</el-menu-item
+          >
+          <el-menu-item index="/phylogeneticAnalysis/pca">PCA</el-menu-item>
+          <el-menu-item index="/phylogeneticAnalysis/admixture"
+            >ADMIXTURE</el-menu-item
+          >
+        </el-menu-item-group>
+      </el-submenu>
       <el-menu-item index="/disease-resistance/disease-resistance">
-        <i class="el-icon-orange"></i>
+        <i class="icon iconfont icon-icon_bingjia"></i>
         <span slot="title">遗传病风险</span>
       </el-menu-item>
+      <el-menu-item index="/variety-resources/variety-resources">
+        <i class="icon iconfont icon-pinzhong"></i>
+        <span slot="title">品种资源</span>
+      </el-menu-item>
+      <el-menu-item index="/archive-information/archive-information">
+        <i class="icon iconfont icon-dangan"></i>
+        <span slot="title">档案信息</span>
+      </el-menu-item>
     </el-menu>
   </div>
 </template>
@@ -37,7 +93,7 @@ export default {
     return {
       activeIndex: '/',
       isCollapse: false,
-      system_name: '肉牛溯源系统',
+      system_name: '智慧育种',
       logo: '',
       index: 0,
       menuList: [], // 菜单权限列表
@@ -82,7 +138,7 @@ export default {
 
   .logo {
     max-width: 220px;
-    height: 80px;
+    height: 72px;
     color: #fff;
     font-size: 25px;
     font-weight: bold;
@@ -117,7 +173,7 @@ export default {
 
 .icon {
   vertical-align: middle;
-  font-size: 23px;
+  font-size: 18px;
   margin-right: 5px;
 }
 

src/views/phylogeneticAnalysis/admixture.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="container-box">
+      <div style="padding-top: 20%">建设中~</div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {}
+    },
+    methods: {}
+  }
+  </script>
+  
+  <style lang="less" scoped>
+  .container-box {
+    height: 100%;
+    background: white;
+    text-align: center;
+  }
+  </style>
+  

src/views/phylogeneticAnalysis/evolutionaryTree.vue

@@ -0,0 +1,222 @@
+<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>
+        <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-button size="mini" type="text" class="detail-btn">
+            <a
+              href="https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/82010000990%E8%BF%9B%E5%8C%96%E6%A0%91%E5%88%86%E6%9E%90%E6%8A%A5%E5%91%8A.pdf"
+              target="_blank"
+              rel="noopener noreferrer"
+              >预览</a
+            >
+          </el-button>
+        </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: ''
+      },
+      tableData: [
+        {
+          id: 1,
+          a: '若尔盖',
+          b: '82010000990',
+          c: '45MB',
+          d: '2024-03-06',
+          e: 'PhyML'
+        },
+        {
+          id: 2,
+          a: '若尔盖',
+          b: '82010000991',
+          c: '46MB',
+          d: '2024-03-06',
+          e: 'PhyML'
+        },
+        {
+          id: 3,
+          a: '若尔盖',
+          b: '82010000992',
+          c: '56MB',
+          d: '2024-03-06',
+          e: 'PhyML'
+        },
+        {
+          id: 4,
+          a: '若尔盖',
+          b: '82010000993',
+          c: '34MB',
+          d: '2024-03-06',
+          e: 'PhyML'
+        },
+        {
+          id: 5,
+          a: '若尔盖',
+          b: '82010000994',
+          c: '29MB',
+          d: '2024-03-06',
+          e: 'PhyML'
+        },
+        {
+          id: 6,
+          a: '若尔盖',
+          b: '82010000995',
+          c: '45MB',
+          d: '2024-03-06',
+          e: 'PhyML'
+        },
+        {
+          id: 7,
+          a: '若尔盖',
+          b: '82010000996',
+          c: '68MB',
+          d: '2024-03-06',
+          e: 'PhyML'
+        },
+        {
+          id: 8,
+          a: '若尔盖',
+          b: '82010000997',
+          c: '45MB',
+          d: '2024-03-06',
+          e: 'PhyML'
+        },
+        {
+          id: 9,
+          a: '若尔盖',
+          b: '82010000998',
+          c: '47MB',
+          d: '2024-03-06',
+          e: 'PhyML'
+        }
+      ],
+      form: {
+        page: 1,
+        pagesize: 20
+      },
+      total: 9
+    }
+  },
+  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>

src/views/phylogeneticAnalysis/pca.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="container-box">
+    <div style="padding-top: 20%">建设中~</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  height: 100%;
+  background: white;
+  text-align: center;
+}
+</style>

src/views/quick-Search/quick-Search.vue

@@ -0,0 +1,381 @@
+<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" v-if="showtable">
+      <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 label="综合育种指数">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="detailClickgo(scope.row)"
+              class="detail-btn"
+              >{{ scope.row.c }}</el-button
+            >
+          </template>
+        </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 label="遗传病风险">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="detailClick1(scope.row)"
+              class="detail-btn"
+              >{{ scope.row.e }}</el-button
+            >
+          </template>
+        </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>
+    <div
+      v-loading="loading"
+      element-loading-text="加载中"
+      v-else
+      style="
+        width: 100%;
+        text-align: center;
+        padding: 50px 0px 50px 0px;
+        background: white;
+      "
+    >
+      <img
+        style="width: 80%"
+        src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/30934b551c5bab2f2727d4dfa9ccd85a69.jpg"
+        alt=""
+      />
+    </div>
+    <el-dialog :visible.sync="dialogVisible" width="40%">
+      <div style="text-align: center">
+        <div class="btmstyle">综合分子育种报告</div>
+        <div class="textstyle">
+          <div>标记编号:82010000990</div>
+          <div>养殖场:若尔盖</div>
+          <div>品种信息:牦牛</div>
+        </div>
+        <div class="textdiv">
+          <div style="font-weight: bold; padding: 30px 0px 6px 14px">
+            1. 繁育管理的育种值
+          </div>
+          <div class="pl">综合育种值：225.85</div>
+          <div class="pl">性状名称: 外貌评分、生长性状、产奶性状</div>
+          <div class="pl">
+            分析说明:
+            该个体在生长性能上的优异表现，更在经济性能上展现了其潜在的高价值。基于此，我们强烈推荐将此个体作为未来育种计划中的亲本首选，以期望通过其遗传优势，孕育出更多具备优良性状的后代。
+          </div>
+        </div>
+        <div class="textdiv">
+          <div style="font-weight: bold; padding: 30px 0px 6px 14px">
+            2. 进化分析结果中的近交系数
+          </div>
+          <div class="pl">近交系数: 0</div>
+          <div class="pl">
+            分析说明:
+            经过精确的遗传评估，该个体和82010001456的近交系数计算结果为零，意味着它们在遗传上不存在亲缘关系。因此，这两个个体可以作为无亲缘关系的育种候选者，进行交配以产生后代。这样的配对有助于避免近交衰退，同时促进遗传多样性的保持，为育种项目带来潜在的遗传增益。
+          </div>
+        </div>
+        <div
+          class="textdiv"
+          style="border-bottom: 2px solid #ebebeb; padding-bottom: 50px"
+        >
+          <div style="font-weight: bold; padding: 30px 0px 6px 14px">
+            3. 携带遗传基因风险警告
+          </div>
+          <div class="pl">风险等级:低</div>
+          <div class="pl">
+            建议措施:
+            经过专业的基因检测分析，确认该个体并未携带任何已知的遗传性疾病相关基因。在进行繁育计划时，可以放心地将该个体纳入考虑，以实现遗传改良的目标。
+          </div>
+        </div>
+      </div>
+      <div
+        class="textdiv"
+        style="border-bottom: 2px solid #ebebeb; padding-bottom: 20px"
+      >
+        <div style="font-weight: bold; padding: 30px 0px 6px 14px">总结</div>
+        <div class="pl">
+          繁育：经过严格的遗传评估和基因检测，该个体证实具备出色的生长性能和繁殖能力。特别值得注意的是，基因检测结果表明，该个体并未携带任何已知的遗传性疾病相关基因。因此，我们可以放心地选择此个体作为繁育计划中的亲本，以期在维持遗传多样性的同时，促进后代群体生产性能的提升和遗传改良。
+          选配：该个体和82010001456的近交系数为0，不存在亲缘关系，可放心进行繁育。
+        </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 {
+      loading: false,
+      showtable: false,
+      dialogVisible: false,
+      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() {
+      this.$router.push('/phylogeneticAnalysis/evolutionaryTree')
+    },
+    detailClickgo() {
+      this.$router.push('/breedMgmt/BLUP')
+    },
+    detailClick1() {
+      this.$router.push('/disease-resistance/disease-resistance')
+    },
+    report(row) {
+      if (row.b == '82010000990') {
+        window.open(
+          'https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/82010000990%E7%BB%BC%E5%90%88%E5%88%86%E5%AD%90%E8%82%B2%E7%A7%8D%E6%8A%A5%E5%91%8A.pdf',
+          '_blank'
+        )
+      }
+    },
+    // 搜索
+    searchClick() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+        this.showtable = true
+      }, 1500)
+    },
+    // 重置
+    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;
+  font-size: 24px;
+  font-weight: bold;
+  color: black;
+}
+.textstyle {
+  display: flex;
+  padding: 24px;
+  border-bottom: 2px solid #ebebeb;
+}
+.textstyle div {
+  margin-right: 10%;
+}
+.textdiv div {
+  text-align: left;
+}
+.pl {
+  padding-left: 14px;
+  padding-bottom: 4px;
+  line-height: 18px;
+}
+// table
+/deep/.el-table th.el-table__cell {
+  background-color: #f5f7fa;
+}
+/deep/ .cell {
+  font-weight: normal;
+}
+</style>

src/views/variety-resources/pig-list.vue

@@ -0,0 +1,962 @@
+<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"
+          >46
+        </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;
+      text-align: center;
+    }
+  }
+}
+// 弹层--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>

src/views/variety-resources/variety-resources.vue

@@ -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>

vue.config.js

@@ -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',
@@ -78,7 +78,7 @@ module.exports = {
   chainWebpack: config => {
     // if (IS_PRODUCTION) {
     config.plugin('html').tap(args => {
-      args[0].title = '智慧畜牧平台'
+      args[0].title = '智慧育种'
       args[0].cdn = cdn
       return args
     })