crs-double-resistance/src/view/antibody/index.vue

<template>
    <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="nameList"
                  @change="nameChange"
                >
                  <el-checkbox class="list_checkbox" v-for="(item, index) in nameObject.show ? nameObject.list : nameObject.list.slice(0, 12)" :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.sampleName, 20)}}</span>
                    </el-tooltip>
                    <span v-else>{{ item.sampleName }}</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="targetList"
                  @change="targetChange"
                >
                  <el-checkbox class="list_checkbox" v-for="(item, index) in targetObject.show ? targetObject.list : targetObject.list.slice(0, !$util.isMobileDevice() ? 12 : 0)" :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.sampleName, 20)}}</span>
                    </el-tooltip>
                    <span v-else>{{ item.sampleName }}</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="companyList"
                  @change="companyChange"
                >
                  <el-checkbox class="list_checkbox" v-for="(item, index) in companyObject.show ? companyObject.list : companyObject.list.slice(0, !$util.isMobileDevice() ? 12 : 0)" :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.sampleName, 20)}}</span>
                    </el-tooltip>
                    <span v-else>{{ item.sampleName }}</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
                    :data="overView"
                    stripe
                    empty-text="Not Date"
                    style="width: 100%"
                    @row-click="gotoArticle">
                    <el-table-column prop="catalog" :label="$t('AntibodyDatabase.CatNo')" width="140"/>
                    <el-table-column prop="name" :label="$t('AntibodyDatabase.AntibodyName')" />
                    <el-table-column prop="targetAbbreviation" :label="$t('AntibodyDatabase.Target')" width="400">
                      <!-- <template slot-scope="scope">
                        <span>{{ $util.targetDictionaries(scope.row.productTarget) }}</span>
                      </template> -->
                    </el-table-column>
                    <!-- <el-table-column prop="moa" :label="$t('AntibodyDatabase.MOA')" /> -->
                    <el-table-column prop="company" :label="$t('AntibodyDatabase.Inventor')"/>
                </el-table>
            </template>
        </div>
        <div class="articleMove">
            <template>
                <el-table
                    :data="overView"
                    stripe
                    empty-text="Not Date"
                    style="width: 100%"
                    @row-click="gotoArticle">
                    <el-table-column prop="catalog" width="75" :label="$t('AntibodyDatabase.CatNo')" />
                    <el-table-column prop="name" width="112"  :label="$t('AntibodyDatabase.AntibodyName')" />
                    <el-table-column prop="target" :label="$t('AntibodyDatabase.Target')" >
                      <template slot-scope="scope">
                        <span>{{ $util.targetDictionaries(scope.row.target) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="company" :label="$t('AntibodyDatabase.Inventor')" />
                </el-table>
            </template>
        </div>
    </div>
  </template>
<script>
import banner from "@/components/banner";
export default {
  name: "antibody",
  components: {
    banner
  },
  data() {
    return {
      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,
        nameList: this.nameList,
        targetList: this.targetList,
        companyList: this.companyList
      }).then(res => {
        console.log(res)
        this.overView = res.data
        console.log(this.overView)
      })
    },
    gotoArticle(row, column, event) {
      console.log(row, column, event)
      this.$router.push({
        path: "/antibodyDetail",
        query: {
          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>
  <style lang="scss">
  .site-header-suggestion-select {
    .el-autocomplete-suggestion__wrap {
      max-height: 380px;
    }
  }
  </style>
  <style lang="scss" scoped>
  @media screen and (min-width: 751px) and (max-width: 9999px) {
    .box {
      .list_title{
        width: 1200px;
        margin: 30px auto 0;
        font-size: 18px;
        font-weight: 600;
      }
      .article /deep/{
        width: 1200px;
        margin: 30px auto 90px;
        .cell{
          color: #000;
        }
        .el-table__row td{
            background-color: #fff !important;
            cursor: pointer;
        }
        .el-table__row--striped td{
            background-color: #F0FAFE !important;
            cursor: pointer;
        }
      }
      .articleMove{
        display: none;
      }
      // 筛选项
      .classificationMenu {
        width: 1200px;
        margin: 20px auto;
        .list {
          display: flex;
          align-content: center;
          .list-name {
            width: 190px;
            min-height: 40px;
            background: #dff3ff;
            // background-color: #f7faff;
            font-size: 16px;
            font-family: Arial;
            color: #000;
            padding-left: 20px;
            display: flex;
            align-items: center;
          }
          .SpeciesBox{
            flex: 1;
            // background: #F7FAFF;
            background: #DFF3FE;
            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 rgba(7,91,169,.1);
            // padding: 10px 0;
            .list_tit{
              width: 260px;
              text-align: center;
              font-weight: bold;
              // padding-top: 10px;
            }
            .SpeciesBox_list2{
              padding: 10px;
              background-color: #F1FAFF;
            }
            .list_checkbox{
              width: 23%;
            }
            .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) {
    .box {
      .list_title{
        width: 100%;
        padding: 0.15rem 0.2rem;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 600;
      }
      .article{
        display: none;
      }
      .articleMove /deep/{
        width: 100%;
        padding: 0 0.15rem 0.15rem;
        // box-sizing: border-box;
        overflow-x: hidden;
        .cell{
          color: #000;
          font-size: 0.1rem;
        }
        .el-table__row td{
            background-color: #fff !important;
            cursor: pointer;
        }
        .el-table__row--striped td{
            background-color: #F0FAFE !important;
            cursor: pointer;
        }
      }
      // 筛选项
      .classificationMenu {
        margin-bottom: 0.2rem;
        .list {
          // border-bottom: 1px solid #ededed;
          .list-name {
            width: 100%;
            min-height: 0.4rem;
            background: #dff3ff;
            font-size: 16px;
            font-family: Arial;
            color: #000;
            padding-left: 0.2rem;
            display: flex;
            align-items: center;
          }
          .SpeciesBox{
            padding: 0.1rem 0.15rem;
          }
          .list-s /deep/ {
            position: relative;
            background: #F7FAFF;
            // padding:0 0.15rem;
            .SpeciesBox_list{
              max-height: 310px;
              overflow-y: auto;
            }
            .list_tit{
              font-size: 14px;
              margin-bottom: .1rem;
              background: #dff3ff;
              line-height: 0.4rem;
              padding-left: 0.1rem;
            }
            .SpeciesBox_list2{
              padding:0 0.1rem;
            }
            .SpeciesImg{
              position: absolute;
              top: 0.14rem;
              right: 0.1rem;
              width: 26px;
              height: 14px;
              padding: 0 5px;
              background: #005bab;
              border-radius: 2px;
            }
            .SpeciesBox_name{
              font-size: 14px;
              line-height: 1;
              margin-bottom: 0.1rem;
            }
            .el-checkbox {
              padding: 6px 0;
              .el-checkbox__label {
                font-size: 12px;
                font-family: Arial;
                color: #000;
              }
            }
            .is-checked {
              .el-checkbox__label {
                color: #005bab;
              }
            }
          }
        }
      }
    }
  }
  </style>