功能开发

2024-08-30 11:41:06 +08:00
parent 1ae3e877a0
commit c040663c36
6 changed files with 205 additions and 85 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,4 +6,7 @@
 </template>

 <style lang="less">
+a {
+  color: #67c23a !important;
+}
 </style>
--- a/src/assets/img/one.png
+++ b/src/assets/img/one.png
--- a/src/assets/img/two.png
+++ b/src/assets/img/two.png
--- a/src/views/breedMgmt/BLUP.vue
+++ b/src/views/breedMgmt/BLUP.vue
@@ -67,12 +67,12 @@

        <el-table-column label="详情">
          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="text"
-              @click="download(scope.row.id)"
-              class="detail-btn"
-              >查看</el-button
+            <el-button 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>
--- a/src/views/breedMgmt/lineage.vue
+++ b/src/views/breedMgmt/lineage.vue
@@ -9,54 +9,94 @@
        label-width="auto"
        size="mini"
      >
-        <el-form-item label="文件名">
-          <el-input
-            v-model="searchForm.farm"
-            placeholder="请输入文件名"
-          ></el-input>
+        <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="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
+    <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"
            >
-          </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>
+            </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>
@@ -67,56 +107,103 @@ export default {
  data() {
    return {
      searchForm: {
-        farm: '',
-        number: ''
+        a: '',
+        b: '',
+        c: ''
      },
-      tableData: [
+      options1: [
        {
-          id: 0,
-          a: 'CX_82010000990',
-          b: '10.23MB',
-          c: '2024-03-06',
-          d: '九龙牦牛',
-          e: '已上传'
+          value: '选项1',
+          label: '西门塔尔'
        },
+        {
+          value: '选项2',
+          label: '九龙牦牛'
+        },
+        {
+          value: '选项3',
+          label: '荷斯坦牛'
+        },
+        {
+          value: '选项4',
+          label: '安格斯牛'
+        }
+      ],
+      options2: [
+        {
+          value: '选项1',
+          label: '单个'
+        },
+        {
+          value: '选项2',
+          label: '多个'
+        }
+      ],
+      tableData: [
        {
          id: 1,
-          a: 'CX_82010000991',
-          b: '8.6MB',
-          c: '2024-03-06',
-          d: '西门塔尔',
-          e: '已上传'
+          a: 'CX_82010000990'
        },
        {
          id: 2,
-          a: 'CX_82010000992',
-          b: '21.23MB',
-          c: '2024-03-06',
-          d: '华西牛',
-          e: '已上传'
+          a: 'CX_82010000991'
        },
        {
          id: 3,
-          a: 'CX_82010000993',
-          b: '13.21MB',
-          c: '2024-03-06',
-          d: '西门塔尔',
-          e: '已上传'
+          a: 'CX_82010000992'
        },
        {
          id: 4,
-          a: 'CX_82010000994',
-          b: '15.3MB',
-          c: '2024-03-06',
-          d: '西藏高山牦牛',
-          e: '已上传'
+          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
+      total: 2,
+      multipleSelection: [],
+      maxSelectionCount: 2
    }
  },
  methods: {
@@ -136,11 +223,13 @@ export default {
    handleCurrentChange(val) {
      this.form.page = parseInt(val)
    },
-    download(id) {
-      this.$message({
-        message: '下载成功',
-        type: 'success'
-      })
+    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)
    }
  }
 }
@@ -183,4 +272,37 @@ export default {
 /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>
--- a/src/views/geneMgmt/SPNPanel.vue
+++ b/src/views/geneMgmt/SPNPanel.vue
@@ -109,12 +109,7 @@ export default {
    handleCurrentChange(val) {
      this.form.page = parseInt(val)
    },
-    download(id) {
-      this.$message({
-        message: '下载成功',
-        type: 'success'
-      })
-    }
+    download(id) {}
  }
 }
 </script>