功能开发

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

src/App.vue

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

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

@@ -30,7 +30,72 @@ const routes = [
         meta: { title: '遗传病风险', activeMenu: '/disease-resistance/disease-resistance' }
       }
     ]
-  }
+  },
+  {
+    // 基因管理
+    path: '/geneMgmt',
+    component: Layout,
+    children: [
+      {
+        path: '/geneMgmt/SPN',
+        component: () =>
+          import('../views/geneMgmt/SPN.vue'),
+        meta: { title: 'SPN位点管理', activeMenu: '/geneMgmt/SPN' }
+      },
+      {
+        path: '/geneMgmt/SPNPanel',
+        component: () =>
+          import('../views/geneMgmt/SPNPanel.vue'),
+        meta: { title: 'SPN Panel位点管理', activeMenu: '/geneMgmt/SPNPanel' }
+      },
+      {
+        path: '/geneMgmt/sequence',
+        component: () =>
+          import('../views/geneMgmt/sequence.vue'),
+        meta: { title: '原始测序数据', activeMenu: '/geneMgmt/sequence' }
+      }
+    ]
+  },
+
+  {
+    // 繁育管理
+    path: '/breedMgmt',
+    component: Layout,
+    children: [
+      {
+        path: '/breedMgmt/BLUP',
+        component: () =>
+          import('../views/breedMgmt/BLUP.vue'),
+        meta: { title: 'BLUP', activeMenu: '/breedMgmt/BLUP' }
+      },
+      {
+        path: '/breedMgmt/paternityTest',
+        component: () =>
+          import('../views/breedMgmt/paternityTest.vue'),
+        meta: { title: '亲子鉴定', activeMenu: '/breedMgmt/paternityTest' }
+      },
+      {
+        path: '/breedMgmt/lineage',
+        component: () =>
+          import('../views/breedMgmt/lineage.vue'),
+        meta: { title: '血统管理', activeMenu: '/breedMgmt/lineage' }
+      }
+    ]
+  },
+
+  {
+    // 进化分析
+    path: '/phylogeneticAnalysis',
+    component: Layout,
+    children: [
+      {
+        path: '/phylogeneticAnalysis/evolutionaryTree',
+        component: () =>
+          import('../views/phylogeneticAnalysis/evolutionaryTree.vue'),
+        meta: { title: '进化树', activeMenu: '/phylogeneticAnalysis/evolutionaryTree' }
+      },
+    ]
+  },
 ]
 
 const router = new VueRouter({

src/views/breedMgmt/BLUP.vue

@@ -0,0 +1,409 @@
+<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/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"
+                >查看</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="详情">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="download(scope.row.id)"
+              class="detail-btn"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-table
+        :data="tableDatassGBLUP"
+        style="width: 100%"
+        size="mini"
+        border
+        v-if="activeName == 'ssGBLUP'"
+      >
+        <el-table-column prop="a" label="养殖场"></el-table-column>
+        <el-table-column prop="b" label="标记编号"></el-table-column>
+        <el-table-column prop="c" label="性别"></el-table-column>
+        <el-table-column prop="d" label="月龄"></el-table-column>
+        <el-table-column prop="e" label="样本"></el-table-column>
+        <el-table-column
+          prop="f"
+          label="综合育种指数"
+          sortable
+        ></el-table-column>
+        <el-table-column label="详情">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="download(scope.row.id)"
+              class="detail-btn"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
+      </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: 2,
+          a: '若尔盖',
+          b: '82010000991',
+          c: '雌',
+          d: '90',
+          e: '130',
+          f: '155',
+          g: '192',
+          h: '19',
+          i: '567',
+          j: '9.9',
+          k: '41.2',
+          l: '4490',
+          m: '4.0',
+          n: '3.2',
+          o: '252.85'
+        },
+
+        {
+          id: 3,
+          a: '若尔盖',
+          b: '82010000992',
+          c: '雌',
+          d: '91',
+          e: '130',
+          f: '155',
+          g: '192',
+          h: '19',
+          i: '567',
+          j: '9.9',
+          k: '41.2',
+          l: '4490',
+          m: '4.0',
+          n: '3.2',
+          o: '252.85'
+        },
+        {
+          id: 6,
+          a: '若尔盖',
+          b: '82010000993',
+          c: '雌',
+          d: '98',
+          e: '140',
+          f: '175',
+          g: '199',
+          h: '20',
+          i: '597',
+          j: '12.9',
+          k: '47.2',
+          l: '4690',
+          m: '4.9',
+          n: '3.4',
+          o: '259.85'
+        },
+
+        {
+          id: 4,
+          a: '若尔盖',
+          b: '82010000994',
+          c: '雌',
+          d: '96',
+          e: '140',
+          f: '185',
+          g: '199',
+          h: '20',
+          i: '597',
+          j: '12.9',
+          k: '47.2',
+          l: '4800',
+          m: '4.9',
+          n: '3.4',
+          o: '254.85'
+        }
+      ],
+      tableDataGBLUP: [
+        {
+          a: '若尔盖',
+          b: '82010000990',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '1'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000991',
+          c: '雌',
+          d: '8',
+          e: '血液',
+          f: '3'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000992',
+          c: '雌',
+          d: '7',
+          e: '血液',
+          f: '5'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000993',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '4'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000994',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '9'
+        }
+      ],
+      tableDatassGBLUP: [
+        {
+          a: '若尔盖',
+          b: '82010000991',
+          c: '雌',
+          d: '8',
+          e: '血液',
+          f: '3'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000994',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '8'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000992',
+          c: '雌',
+          d: '7',
+          e: '血液',
+          f: '5'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000990',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '6'
+        },
+        {
+          a: '若尔盖',
+          b: '82010000993',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '4'
+        }
+      ],
+      form: {
+        page: 1,
+        pagesize: 20
+      },
+      total: 2
+    }
+  },
+  methods: {
+    // 搜索
+    searchClick() {},
+    // 重置
+    resetClick() {
+      for (const key in this.searchForm) {
+        this.searchForm[key] = ''
+      }
+    },
+    // 条
+    handleSizeChange(val) {
+      this.form.pagesize = parseInt(val)
+    },
+    // 页
+    handleCurrentChange(val) {
+      this.form.page = parseInt(val)
+    },
+    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;
+}
+</style>

src/views/breedMgmt/lineage.vue

@@ -0,0 +1,308 @@
+<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="500"
+            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 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 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: 500px;
+  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,202 @@
+<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="d" label="疑是父母编号"></el-table-column>
+        <el-table-column prop="e" label="相似度"></el-table-column>
+        <el-table-column label="亲缘关系结果">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="download(scope.row.id)"
+              class="detail-btn"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page-box">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="form.page"
+          :page-size="form.pagesize"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        a: '',
+        b: ''
+      },
+      tableData: [
+        {
+          id: 0,
+          a: '若尔盖',
+          b: '82010000991',
+          c: '雌',
+          d: '8',
+          e: '血液',
+          f: '82020000981',
+          g: '99.99%'
+        },
+        {
+          id: 1,
+          a: '若尔盖',
+          b: '82010000992',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000986',
+          g: '69.99%'
+        },
+        {
+          id: 2,
+          a: '若尔盖',
+          b: '82010000994',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000985',
+          g: '79.99%'
+        },
+        {
+          id: 3,
+          a: '若尔盖',
+          b: '82010000995',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000989',
+          g: '98.99%'
+        },
+        {
+          id: 3,
+          a: '若尔盖',
+          b: '82010000998',
+          c: '雌',
+          d: '6',
+          e: '血液',
+          f: '82020000976',
+          g: '78.99%'
+        }
+      ],
+      form: {
+        page: 1,
+        pagesize: 20
+      },
+      total: 2
+    }
+  },
+  methods: {
+    // 搜索
+    searchClick() {},
+    // 重置
+    resetClick() {
+      for (const key in this.searchForm) {
+        this.searchForm[key] = ''
+      }
+    },
+    // 条
+    handleSizeChange(val) {
+      this.form.pagesize = parseInt(val)
+    },
+    // 页
+    handleCurrentChange(val) {
+      this.form.page = parseInt(val)
+    },
+    download(id) {
+      this.$message({
+        message: '下载成功',
+        type: 'success'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  min-height: calc(100vh - 84px);
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .search-box {
+    background: #fff;
+    border-radius: 6px;
+    padding: 10px 15px;
+    margin-bottom: 25px;
+  }
+  .list-box {
+    flex: 1;
+    background: #fff;
+    border-radius: 6px;
+    padding: 10px 15px;
+    .detail-btn {
+      color: #67c23a;
+    }
+    .page-box {
+      margin-top: 10px;
+    }
+  }
+}
+.el-form-item {
+  margin-bottom: 0px;
+  margin-right: 20px;
+}
+// table
+/deep/.el-table th.el-table__cell {
+  background-color: #f5f7fa;
+}
+/deep/ .cell {
+  font-weight: normal;
+}
+</style>

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="标记编号">
+          <el-input
+            v-model="searchForm.a"
+            placeholder="请输入标记编号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="标记名称">
+          <el-input
+            v-model="searchForm.b"
+            placeholder="请输入标记名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="Panel">
+          <el-input v-model="searchForm.c" placeholder="请输入Panel"></el-input>
+        </el-form-item>
+        <el-form-item label="染色体">
+          <el-input
+            v-model="searchForm.d"
+            placeholder="请输入染色体"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="开始位置">
+          <el-input
+            v-model="searchForm.e"
+            placeholder="请输入开始位置"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="结束位置">
+          <el-input
+            v-model="searchForm.f"
+            placeholder="请输入结束位置"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" icon="el-icon-search" @click="searchClick"
+            >搜索</el-button
+          >
+          <el-button type="warning" icon="el-icon-refresh" @click="resetClick"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="list-box">
+      <el-table :data="tableData" style="width: 100%" size="mini" border>
+        <el-table-column prop="a" label="标记编号"></el-table-column>
+        <el-table-column prop="b" label="标记名称"></el-table-column>
+        <el-table-column prop="c" label="基因版本"></el-table-column>
+        <el-table-column prop="d" label="染色体号"></el-table-column>
+        <el-table-column prop="e" label="位置"></el-table-column>
+        <el-table-column prop="f" label="参考基因"></el-table-column>
+        <el-table-column prop="g" label="等位基因"></el-table-column>
+        <el-table-column prop="h" label="备注"></el-table-column>
+      </el-table>
+      <div class="page-box">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="form.page"
+          :page-size="form.pagesize"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        a: '',
+        b: '',
+        c: '',
+        d: '',
+        e: '',
+        f: ''
+      },
+      tableData: [
+        {
+          id: 1,
+          a: '82010000990',
+          b: '--',
+          c: 'ARS-UCD1.2',
+          d: '10',
+          e: '10011101',
+          f: 'T',
+          g: 'G',
+          h: '--'
+        },
+        {
+          id: 2,
+          a: '82010000991',
+          b: '--',
+          c: 'ARS-UCD1.2',
+          d: '10',
+          e: '10011102',
+          f: 'G',
+          g: 'C',
+          h: '--'
+        },
+        {
+          id: 3,
+          a: '82010000992',
+          b: '--',
+          c: 'ARS-UCD1.2',
+          d: '10',
+          e: '10011103',
+          f: 'A',
+          g: 'G',
+          h: '--'
+        },
+        {
+          id: 4,
+          a: '82010000993',
+          b: '--',
+          c: 'ARS-UCD1.2',
+          d: '10',
+          e: '1001457',
+          f: 'C',
+          g: 'G',
+          h: '--'
+        },
+        {
+          id: 5,
+          a: '82010000994',
+          b: '--',
+          c: 'ARS-UCD1.2',
+          d: '10',
+          e: '100118',
+          f: 'A',
+          g: 'T',
+          h: '--'
+        },
+        {
+          id: 6,
+          a: '82010000995',
+          b: '--',
+          c: 'ARS-UCD1.2',
+          d: '10',
+          e: '10011109',
+          f: 'T',
+          g: 'G',
+          h: '--'
+        },
+        {
+          id: 7,
+          a: '82010000996',
+          b: '--',
+          c: 'ARS-UCD1.2',
+          d: '10',
+          e: '10011105',
+          f: 'G',
+          g: 'C',
+          h: '--'
+        },
+        {
+          id: 8,
+          a: '82010000997',
+          b: '--',
+          c: 'ARS-UCD1.2',
+          d: '10',
+          e: '100111023',
+          f: 'A',
+          g: 'G',
+          h: '--'
+        }
+      ],
+      form: {
+        page: 1,
+        pagesize: 20
+      },
+      total: 8
+    }
+  },
+  methods: {
+    // 搜索
+    searchClick() {},
+    // 重置
+    resetClick() {
+      for (const key in this.searchForm) {
+        this.searchForm[key] = ''
+      }
+    },
+    // 条
+    handleSizeChange(val) {
+      this.form.pagesize = parseInt(val)
+    },
+    // 页
+    handleCurrentChange(val) {
+      this.form.page = parseInt(val)
+    },
+    // 当监测结果为 已携带 的状态，加上背景色,字体颜色
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      // 注意，这里返回的是一个对象
+      if (row.result == '携带' && column.label == '监测结果') {
+        return 'background:#d9001b;textAlign: center;color:#fff;'
+      } else {
+        return 'textAlign: center'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  min-height: calc(100vh - 84px);
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .search-box {
+    background: #fff;
+    border-radius: 6px;
+    padding: 10px 15px;
+    margin-bottom: 25px;
+  }
+  .list-box {
+    flex: 1;
+    background: #fff;
+    border-radius: 6px;
+    padding: 10px 15px;
+    .detail-btn {
+      color: #67c23a;
+    }
+    .page-box {
+      margin-top: 10px;
+    }
+  }
+}
+.el-form-item {
+  margin-bottom: 0px;
+  margin-right: 20px;
+}
+// table
+/deep/.el-table th.el-table__cell {
+  background-color: #f5f7fa;
+}
+/deep/ .cell {
+  font-weight: normal;
+}
+</style>

src/views/geneMgmt/SPNPanel.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="container-box">
+    <div class="search-box">
+      <el-form
+        :inline="true"
+        ref="searchForm"
+        :model="searchForm"
+        class="demo-form-inline"
+        label-width="auto"
+        size="mini"
+      >
+        <el-form-item label="Panel">
+          <el-input
+            v-model="searchForm.farm"
+            placeholder="请输入Panel"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="检测平台">
+          <el-input
+            v-model="searchForm.farm"
+            placeholder="请输入检测平台"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="success" icon="el-icon-search" @click="searchClick"
+            >搜索</el-button
+          >
+          <el-button type="warning" icon="el-icon-refresh" @click="resetClick"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="list-box">
+      <el-table :data="tableData" style="width: 100%" size="mini" border>
+        <el-table-column prop="a" label="Panel名称"></el-table-column>
+        <el-table-column prop="b" label="检测平台"></el-table-column>
+        <el-table-column prop="c" label="基因版本"></el-table-column>
+        <el-table-column prop="d" label="位点数目"></el-table-column>
+        <el-table-column prop="e" label="描述"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="download(scope.row.id)"
+              class="detail-btn"
+              >详情</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page-box">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="form.page"
+          :page-size="form.pagesize"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        farm: '',
+        number: ''
+      },
+      tableData: [
+        {
+          id: 1,
+          a: '',
+          b: 'illumina',
+          c: '',
+          d: '',
+          e: ''
+        }
+      ],
+      form: {
+        page: 1,
+        pagesize: 20
+      },
+      total: 2
+    }
+  },
+  methods: {
+    // 搜索
+    searchClick() {},
+    // 重置
+    resetClick() {
+      for (const key in this.searchForm) {
+        this.searchForm[key] = ''
+      }
+    },
+    // 条
+    handleSizeChange(val) {
+      this.form.pagesize = parseInt(val)
+    },
+    // 页
+    handleCurrentChange(val) {
+      this.form.page = parseInt(val)
+    },
+    download(id) {}
+  }
+}
+</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,186 @@
+<template>
+  <div class="container-box">
+    <div class="search-box">
+      <el-form
+        :inline="true"
+        ref="searchForm"
+        :model="searchForm"
+        class="demo-form-inline"
+        label-width="auto"
+        size="mini"
+      >
+        <el-form-item label="文件名">
+          <el-input
+            v-model="searchForm.farm"
+            placeholder="请输入文件名"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="success" icon="el-icon-search" @click="searchClick"
+            >搜索</el-button
+          >
+          <el-button type="warning" icon="el-icon-refresh" @click="resetClick"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="list-box">
+      <el-table :data="tableData" style="width: 100%" size="mini" border>
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column prop="a" label="文件名"></el-table-column>
+        <el-table-column prop="b" label="文件大小"></el-table-column>
+        <el-table-column prop="c" label="上传时间"></el-table-column>
+        <el-table-column prop="d" label="品种"></el-table-column>
+        <el-table-column prop="e" label="文件状态"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="download(scope.row.id)"
+              class="detail-btn"
+              >下载</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page-box">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="form.page"
+          :page-size="form.pagesize"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        farm: '',
+        number: ''
+      },
+      tableData: [
+        {
+          id: 0,
+          a: 'CX_82010000990',
+          b: '10.23MB',
+          c: '2024-03-06',
+          d: '九龙牦牛',
+          e: '已上传'
+        },
+        {
+          id: 1,
+          a: 'CX_82010000991',
+          b: '8.6MB',
+          c: '2024-03-06',
+          d: '西门塔尔',
+          e: '已上传'
+        },
+        {
+          id: 2,
+          a: 'CX_82010000992',
+          b: '21.23MB',
+          c: '2024-03-06',
+          d: '华西牛',
+          e: '已上传'
+        },
+        {
+          id: 3,
+          a: 'CX_82010000993',
+          b: '13.21MB',
+          c: '2024-03-06',
+          d: '西门塔尔',
+          e: '已上传'
+        },
+        {
+          id: 4,
+          a: 'CX_82010000994',
+          b: '15.3MB',
+          c: '2024-03-06',
+          d: '西藏高山牦牛',
+          e: '已上传'
+        }
+      ],
+      form: {
+        page: 1,
+        pagesize: 20
+      },
+      total: 2
+    }
+  },
+  methods: {
+    // 搜索
+    searchClick() {},
+    // 重置
+    resetClick() {
+      for (const key in this.searchForm) {
+        this.searchForm[key] = ''
+      }
+    },
+    // 条
+    handleSizeChange(val) {
+      this.form.pagesize = parseInt(val)
+    },
+    // 页
+    handleCurrentChange(val) {
+      this.form.page = parseInt(val)
+    },
+    download(id) {
+      this.$message({
+        message: '下载成功',
+        type: 'success'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  min-height: calc(100vh - 84px);
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .search-box {
+    background: #fff;
+    border-radius: 6px;
+    padding: 10px 15px;
+    margin-bottom: 25px;
+  }
+  .list-box {
+    flex: 1;
+    background: #fff;
+    border-radius: 6px;
+    padding: 10px 15px;
+    .detail-btn {
+      color: #67c23a;
+    }
+    .page-box {
+      margin-top: 10px;
+    }
+  }
+}
+.el-form-item {
+  margin-bottom: 0px;
+  margin-right: 20px;
+}
+// table
+/deep/.el-table th.el-table__cell {
+  background-color: #f5f7fa;
+}
+/deep/ .cell {
+  font-weight: normal;
+}
+</style>

src/views/layout/left-menu.vue

@@ -27,6 +27,41 @@
         <i class="el-icon-orange"></i>
         <span slot="title">遗传病风险</span>
       </el-menu-item>
+      <el-submenu index="66">
+        <template slot="title">
+          <i class="el-icon-printer"></i>
+          <span slot="title">基因管理</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="/geneMgmt/SPN">SPN位点管理</el-menu-item>
+          <el-menu-item index="/geneMgmt/SPNPanel"
+            >SPN Panel位点管理</el-menu-item
+          >
+          <el-menu-item index="/geneMgmt/sequence">原始测序数据</el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+      <el-submenu index="67">
+        <template slot="title">
+          <i class="el-icon-news"></i>
+          <span slot="title">繁育管理</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="/breedMgmt/BLUP">BLUP</el-menu-item>
+          <el-menu-item index="/breedMgmt/paternityTest">亲子鉴定</el-menu-item>
+          <el-menu-item index="/breedMgmt/lineage">血统管理</el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+      <el-submenu index="68">
+        <template slot="title">
+          <i class="el-icon-suitcase"></i>
+          <span slot="title">进化分析</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="/phylogeneticAnalysis/evolutionaryTree"
+            >进化树</el-menu-item
+          >
+        </el-menu-item-group>
+      </el-submenu>
     </el-menu>
   </div>
 </template>

src/views/phylogeneticAnalysis/evolutionaryTree.vue

@@ -0,0 +1,207 @@
+<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 label="标记编号">
+          <el-input
+            v-model="searchForm.farm"
+            placeholder="请输入标记编号"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="success" icon="el-icon-search" @click="searchClick"
+            >搜索</el-button
+          >
+          <el-button type="warning" icon="el-icon-refresh" @click="resetClick"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="list-box">
+      <el-table :data="tableData" style="width: 100%" size="mini" border>
+        <el-table-column prop="a" label="养殖场"></el-table-column>
+        <el-table-column prop="b" label="标记编号"></el-table-column>
+        <el-table-column prop="c" label="文件大小"></el-table-column>
+        <el-table-column prop="d" label="创建时间"></el-table-column>
+        <el-table-column prop="e" label="分析工具"></el-table-column>
+        <el-table-column label="详情">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="download(scope.row.id)"
+              class="detail-btn"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page-box">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="form.page"
+          :page-size="form.pagesize"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        farm: '',
+        number: ''
+      },
+      tableData: [
+        {
+          id: 1,
+          a: '若尔盖',
+          b: '82010000990',
+          c: '45MB',
+          d: '2024.03.06',
+          e: 'PhyML'
+        },
+        {
+          id: 2,
+          a: '若尔盖',
+          b: '82010000991',
+          c: '40MB',
+          d: '2024.03.06',
+          e: 'PhyML'
+        },
+        {
+          id: 3,
+          a: '若尔盖',
+          b: '82010000992',
+          c: '42MB',
+          d: '2024.03.27',
+          e: 'PhyML'
+        },
+        {
+          id: 4,
+          a: '若尔盖',
+          b: '82010000993',
+          c: '35MB',
+          d: '2024.08.02',
+          e: 'PhyML'
+        },
+        {
+          id: 5,
+          a: '若尔盖',
+          b: '82010000994',
+          c: '40MB',
+          d: '2024.05.03',
+          e: 'PhyML'
+        },
+        {
+          id: 6,
+          a: '若尔盖',
+          b: '82010000995',
+          c: '50MB',
+          d: '2024.04.23',
+          e: 'PhyML'
+        },
+        {
+          id: 7,
+          a: '若尔盖',
+          b: '82010000996',
+          c: '38MB',
+          d: '2024.06.03',
+          e: 'PhyML'
+        }
+      ],
+      form: {
+        page: 1,
+        pagesize: 20
+      },
+      total: 2
+    }
+  },
+  methods: {
+    // 搜索
+    searchClick() {},
+    // 重置
+    resetClick() {
+      for (const key in this.searchForm) {
+        this.searchForm[key] = ''
+      }
+    },
+    // 条
+    handleSizeChange(val) {
+      this.form.pagesize = parseInt(val)
+    },
+    // 页
+    handleCurrentChange(val) {
+      this.form.page = parseInt(val)
+    },
+    download(id) {
+      this.$message({
+        message: '下载成功',
+        type: 'success'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  min-height: calc(100vh - 84px);
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .search-box {
+    background: #fff;
+    border-radius: 6px;
+    padding: 10px 15px;
+    margin-bottom: 25px;
+  }
+  .list-box {
+    flex: 1;
+    background: #fff;
+    border-radius: 6px;
+    padding: 10px 15px;
+    .detail-btn {
+      color: #67c23a;
+    }
+    .page-box {
+      margin-top: 10px;
+    }
+  }
+}
+.el-form-item {
+  margin-bottom: 0px;
+  margin-right: 20px;
+}
+// table
+/deep/.el-table th.el-table__cell {
+  background-color: #f5f7fa;
+}
+/deep/ .cell {
+  font-weight: normal;
+}
+</style>