添加赛选项

src/view/antibody/index.vue

@@ -2,6 +2,77 @@
     <div class="box">
         <banner></banner>
         <p class="list_title">{{ $t("nav.AntibodyDatabase") }}</p>
+        <!-- 头部 -->
+        <div class="classificationMenu">
+        <div class="list list_pc">
+          <div class="SpeciesBox">
+            <!-- Name -->
+            <div class="list-s" v-if="nameObject.list.length">
+              <div class="list_tit">Name</div>
+              <div class="SpeciesBox_list2"  style="flex: 1;">
+                <el-checkbox-group
+                  style="flex: 1;"
+                  v-model="checkList"
+                  @change="nameChange"
+                >
+                  <el-checkbox class="list_checkbox" v-for="(item, index) in nameObject.show ? nameObject.list : nameObject.list.slice(0, 9)" :key="index" :label="item.name">
+                    <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start" v-if="item.name.length > 20">
+                      <span> {{subString(item.name, 20)}}</span>
+                    </el-tooltip>
+                    <span v-else>{{ item.name }}</span>
+                    ({{ item.count }})
+                  </el-checkbox>
+                </el-checkbox-group>
+              </div>
+              <img v-if="nameObject.show" class="SpeciesImg" src="@/assets/img/superscript.png" alt="" @click="nameObject.show = false">
+              <img v-else class="SpeciesImg" src="@/assets/img/subscript.png" alt="" @click="nameObject.show = true">
+            </div>
+            <!-- Target -->
+            <div class="list-s" v-if="targetObject.list.length">
+              <div class="list_tit">Target</div>
+              <div class="SpeciesBox_list2"  style="flex: 1;">
+                <el-checkbox-group
+                  style="flex: 1;"
+                  v-model="checkList"
+                  @change="targetChange"
+                >
+                  <el-checkbox class="list_checkbox" v-for="(item, index) in targetObject.show ? targetObject.list : targetObject.list.slice(0, 9)" :key="index" :label="item.name">
+                    <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start" v-if="item.name.length > 20">
+                      <span> {{subString(item.name, 20)}}</span>
+                    </el-tooltip>
+                    <span v-else>{{ item.name }}</span>
+                    ({{ item.count }})
+                  </el-checkbox>
+                </el-checkbox-group>
+              </div>
+              <img v-if="targetObject.show" class="SpeciesImg" src="@/assets/img/superscript.png" alt="" @click="targetObject.show = false">
+              <img v-else class="SpeciesImg" src="@/assets/img/subscript.png" alt="" @click="targetObject.show = true">
+            </div>
+            <!-- Inventor -->
+            <div class="list-s" v-if="companyObject.list.length" style="border: none;">
+              <div class="list_tit">Inventor</div>
+              <div class="SpeciesBox_list2"  style="flex: 1;">
+                <el-checkbox-group
+                  style="flex: 1;"
+                  v-model="checkList"
+                  @change="companyChange"
+                >
+                  <el-checkbox class="list_checkbox" v-for="(item, index) in companyObject.show ? companyObject.list : companyObject.list.slice(0, 9)" :key="index" :label="item.name">
+                    <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start" v-if="item.name.length > 20">
+                      <span> {{subString(item.name, 20)}}</span>
+                    </el-tooltip>
+                    <span v-else>{{ item.name }}</span>
+                    ({{ item.count }})
+                  </el-checkbox>
+                </el-checkbox-group>
+              </div>
+              <img v-if="companyObject.show" class="SpeciesImg" src="@/assets/img/superscript.png" alt="" @click="companyObject.show = false">
+              <img v-else class="SpeciesImg" src="@/assets/img/subscript.png" alt="" @click="companyObject.show = true">
+            </div>
+          </div>
+        </div>
+      </div>
+        <!-- 列表 -->
         <div class="article">
             <template>
                 <el-table
@@ -56,13 +127,62 @@ export default {
   },
   data() {
     return {
-      overView: []
+      overView: [],
+      nameObject: {
+        name: "Inventor",
+        list: "",
+        show: false
+      },
+      targetObject: {
+        name: "Inventor",
+        list: "",
+        show: false
+      },
+      companyObject: {
+        name: "Inventor",
+        list: "",
+        show: false
+      },
+      checkList: [],
+      nameList: [],
+      targetList: [],
+      companyList: []
     };
   },
   methods: {
+    tapSuperscript(i) {
+      this.speciesList[i].show = !this.speciesList[i].show;
+    },
+    // 搜索
+    nameChange(e) {
+      console.log(e);
+      this.nameList = e
+      this.changeSearchAll()
+    },
+    targetChange(e) {
+      console.log(e);
+      this.targetList = e
+      this.changeSearchAll()
+    },
+    companyChange(e) {
+      console.log(e);
+      this.companyList = e
+      this.changeSearchAll()
+    },
+    // 字符串截取
+    subString (str, len) {
+      if (str.length > len) {
+        return str.substring(0, len) + '...'
+      } else {
+        return str
+      }
+    },
     changeSearchAll() {
       this.$api.post("/basb/searchAll", {
-        articleFlag: 0
+        articleFlag: 0,
+        nameList: this.nameList,
+        targetList: this.targetList,
+        companyList: this.companyList
       }).then(res => {
         console.log(res)
         this.overView = res.data
@@ -77,11 +197,24 @@ export default {
           id: row.id
         }
       });
+    },
+    // 获取双特异性抗体-针对database获取统计信息
+    getDoubleInfo() {
+      this.$api.post("/basb/searchStatisticForDatabase", {}).then(res => {
+        console.log(res)
+        if (res.code == 0) {
+          // this.species = res.data
+          this.nameObject.list = res.data.nameList
+          this.targetObject.list = res.data.targetList
+          this.companyObject.list = res.data.companyList
+        }
+      })
     }
   },
   mounted() {},
   created() {
     this.changeSearchAll()
+    this.getDoubleInfo()
   }
 };
 </script>
@@ -119,6 +252,105 @@ export default {
       .articleMove{
         display: none;
       }
+      // 筛选项
+      .classificationMenu {
+        width: 1200px;
+        margin: 20px auto;
+        .list {
+          display: flex;
+          align-content: center;
+          .list-name {
+            width: 190px;
+            min-height: 40px;
+            background: #dff3ff;
+            font-size: 16px;
+            font-family: Arial;
+            color: #000;
+            padding-left: 20px;
+            display: flex;
+            align-items: center;
+          }
+          .SpeciesBox{
+            flex: 1;
+            background: #F7FAFF;
+            position: relative;
+            .SpeciesImg{
+              position: absolute;
+              right: 10px;
+              bottom: 10px;
+              width: 15px;
+              height: 15px;
+              cursor: pointer;
+            }
+          }
+          .list-s /deep/ {
+            display: flex;
+            // align-items: flex-start;
+            align-items: center;
+            position: relative;
+            border-bottom: 1px solid #E3F1FF;
+            padding: 10px 0;
+            .list_tit{
+              width: 260px;
+              text-align: center;
+            }
+            .list_checkbox{
+              width: 31%;
+            }
+            .SpeciesBox_list{
+              max-height: 240px;
+              overflow-y: auto;
+            }
+            .el-checkbox {
+              padding: 6px 0;
+              margin-right: 10px !important;
+              .el-checkbox__label {
+                font-size: 14px;
+                font-family: Arial;
+                color: #6f6f6f;
+              }
+            }
+            .is-checked {
+              .el-checkbox__label {
+                color: #005bab;
+              }
+            }
+            .top_img {
+              position: absolute;
+              top: 50%;
+              right: 16px;
+              transform: translateY(-50%);
+              width: 24px;
+              cursor: pointer;
+            }
+            .purple_img {
+              display: flex;
+              align-items: center;
+              background: #ffffff;
+              border-radius: 2px;
+              border: 1px solid #005bab;
+              padding: 6px 10px;
+              cursor: pointer;
+              .icon {
+                width: 26px;
+              }
+              .name {
+                font-size: 14px;
+                font-family: Arial;
+                color: #005bab;
+              }
+            }
+            .active {
+              background: #005bab;
+              border-radius: 2px;
+              border: 1px solid #005bab;
+              .name {
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
     }
   }
   @media screen and (min-width: 0px) and (max-width: 750px) {
@@ -150,6 +382,10 @@ export default {
             cursor: pointer;
         }
       }
+      // 筛选项
+      .classificationMenu {
+       display: none;
+      }
     }
   }
   </style>