wei

config/index.js

@@ -12,7 +12,7 @@ module.exports = {
         proxyTable: {
             '/api/': {
                 // target: 'http://192.168.0.104:18182/api/',
-                target: 'https://crs.sanyoubio.com/api/',
+                target: 'https://crstest.jiinfo.cn/api/',
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {

src/router/routerList.js

@@ -128,5 +128,16 @@ export default [
       navActive: "antibodyDetail",
       fullScreen: true
     }
+  }, {
+    path: "/articleDetail",
+    name: "articleDetail",
+    component: () => import("@/view/articleDetail/index"),
+    hidden: true,
+    meta: {
+      pageTitle: "articleDetail",
+      chineseTitle: "详情",
+      navActive: "articleDetail",
+      fullScreen: true
+    }
   }
 ]

src/view/antibody/index.vue

@@ -1,17 +1,24 @@
 <template>
     <div class="box">
         <banner></banner>
+        <p class="list_title">抗体数据库</p>
         <div class="article">
             <template>
                 <el-table
-                    :data="list"
+                    :data="overView"
                     stripe
                     style="width: 100%">
-                    <el-table-column prop="name" label="产品货号" />
-                    <el-table-column prop="name" label="抗体名称" />
-                    <el-table-column prop="name" label="靶点" />
-                    <el-table-column prop="name" label="MOA" />
-                    <el-table-column prop="name" label="公司" />
+                    <el-table-column prop="catalog" label="产品货号" width="100"/>
+                    <el-table-column prop="name" label="抗体名称" width="400"/>
+                    <el-table-column prop="targetList" label="靶点" >
+                      <template slot-scope="scope">
+                        <span v-for="(one, i) in scope.row.targetList" :key="i">
+                          {{ one }}
+                        </span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="moa" label="MOA" />
+                    <el-table-column prop="company" label="公司" />
                 </el-table>
             </template>
         </div>
@@ -26,60 +33,21 @@ export default {
   },
   data() {
     return {
-      list: [
-        {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }
-      ]
+      overView: []
     };
   },
   methods: {
+    changeSearchAll() {
+      this.$api.post("/basb/searchAll", {
+      }).then(res => {
+        console.log(res)
+        this.overView = res.data
+      })
+    }
   },
   mounted() {},
   created() {
+    this.changeSearchAll()
   }
 };
 </script>
@@ -93,6 +61,12 @@ export default {
   <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;

src/view/article/index.vue

@@ -1,27 +1,28 @@
 <template>
     <div class="box">
         <banner></banner>
+        <p class="list_title">相关文章</p>
         <div class="article">
             <template>
                 <el-table
-                    :data="list"
+                    :data="overView"
                     stripe
-                    style="width: 100%">
+                    style="width: 100%"
+                    @row-click="gotoArticle">
                     <el-table-column type="index" label="序号" width="80" />
-                    <el-table-column prop="name" label="货号" />
-                    <el-table-column prop="name" label="原研公司" />
+                    <el-table-column prop="catalog" label="货号" />
+                    <el-table-column prop="company" label="原研公司" />
                     <el-table-column
-                        prop="date"
+                        prop="moa"
                         label="MOA"
                         width="180"
-                        column-key="date"
-                        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
+                        :filters="filters"
                         :filter-method="filterHandler"
                         >
                     </el-table-column>
-                    <el-table-column prop="name" label="上市国家" />
+                    <el-table-column prop="country" label="上市国家" />
                     <el-table-column prop="name" label="抗体名称" />
-                    <el-table-column prop="name" label="文章题目" />
+                    <el-table-column prop="articleTitle" label="文章题目" />
                 </el-table>
             </template>
         </div>
@@ -36,60 +37,49 @@ export default {
   },
   data() {
     return {
-      list: [
-        {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }
-      ]
+      overView: [],
+      filters: []
     };
   },
   methods: {
+    changeSearchAll() {
+      this.$api.post("/basb/searchAll", {
+      }).then(res => {
+        this.overView = res.data
+      })
+    },
+    gotoArticle(row, column, event) {
+      console.log(row, column, event)
+      this.$router.push({
+        path: "/articleDetail",
+        query: {
+          id: row.id
+        }
+      });
+    },
+    filterHandler(value, row) {
+      console.log(value, row)
+      return row.moa == value;
+    },
+    changeSearchMoaList() {
+      this.$api.post("/basb/searchMoaList", {
+      }).then(res => {
+        var filtersArray = []
+        for (let index = 0; index < res.data.length; index++) {
+          let filtersList = {
+            text: res.data[index],
+            value: res.data[index]
+          }
+          filtersArray.push(filtersList)
+        }
+        this.filters = filtersArray
+      })
+    }
   },
   mounted() {},
   created() {
+    this.changeSearchAll()
+    this.changeSearchMoaList()
   }
 };
 </script>
@@ -103,6 +93,12 @@ export default {
   <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;

src/view/articleDetail/index.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="box">
+        <banner></banner>
+        <div class="article">
+          <div class="return-news" @click="GoNews">
+            <img class="return-img" src="@/assets/img/antibody/left.png" alt="">
+            <p class="return-text">Back</p>
+          </div>
+          <p class="article_title">{{ overView.articleTitle }}</p>
+          <p class="article_text">{{ overView.articleContent }}</p>
+        </div>
+    </div>
+  </template>
+<script>
+import banner from "@/components/banner";
+export default {
+  name: "articleDetail",
+  components: {
+    banner
+  },
+  data() {
+    return {
+      overView: {}
+    };
+  },
+  methods: {
+    changeSearchById() {
+      this.$api.post("/basb/searchById", {
+        id: this.$route.query.id
+      }).then(res => {
+        console.log(res)
+        this.overView = res.data
+      })
+    },
+    GoNews() {
+      this.$router.push({
+        name: "article"
+      });
+    }
+  },
+  mounted() {},
+  created() {
+    this.changeSearchById()
+  }
+};
+</script>
+<style lang="scss" scoped>
+  @media screen and (min-width: 751px) and (max-width: 9999px) {
+    .box {
+      .article{
+        width: 1200px;
+        margin: 30px auto 90px;
+        .return-news{
+          display: flex;
+          align-items: center;
+          margin-bottom: 25px;
+          cursor: pointer;
+          .return-img{
+            width: 16px;
+          }
+          .return-text{
+            font-size: 14px;
+            color: #333333;
+            line-height: 1;
+            margin-left: 10px;
+          }
+        }
+        .article_title{
+          font-size: 18px;
+          font-weight: 600;
+          margin-bottom: 15px;
+        }
+        .article_text{
+          font-size: 14px;
+          line-height: 24px;
+        }
+      }
+    }
+  }
+</style>

src/view/overView/index.vue

@@ -1,16 +1,17 @@
 <template>
     <div class="box">
         <banner></banner>
+        <p class="list_title">全览图</p>
         <div class="list">
-            <div class="format-box" v-for="(one, i) in 20" :key="i">
+            <div class="format-box" v-for="(one, i) in overView" :key="i">
                 <div class="images_box">
-                    <p class="images_title">CHBA068</p>
+                    <p class="images_title">{{one.catalog}}</p>
                     <img class="icons-item-imgbox" src="@/assets/img/Mab004.jpg">
-                    <p class="images_weight">Blinatumomab</p>
-                    <p class="images_text">TCE 54.05</p>
-                    <p class="images_text">kDa</p>
-                    <p class="images_text">(Amgen)</p>
-                    <p class="images_footer">US, Approved</p>
+                    <p class="images_weight">{{ one.name }}</p>
+                    <p class="images_text">{{one.moa}} </p>
+                    <p class="images_text">{{one.proteinWeight}}</p>
+                    <p class="images_text">({{one.company}})</p>
+                    <p class="images_footer">{{one.country}}, {{ one.stage }}</p>
                 </div>
             </div>
         </div>
@@ -25,60 +26,21 @@ export default {
   },
   data() {
     return {
-      list: [
-        {
-          name: "12",
-          fileUrl: require('@/assets/img/Mab004.jpg')
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }, {
-          name: "12",
-          fileUrl: "/static/img/mRNA1.af470f1.jpg"
-        }
-      ]
+      overView: []
     };
   },
   methods: {
+    changeSearchAll() {
+      this.$api.post("/basb/searchAll", {
+      }).then(res => {
+        console.log(res)
+        this.overView = res.data
+      })
+    }
   },
   mounted() {},
   created() {
+    this.changeSearchAll()
   }
 };
 </script>
@@ -92,6 +54,12 @@ export default {
   <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;
+      }
       .list{
         width: 1200px;
         margin: 30px auto 90px;
@@ -115,6 +83,7 @@ export default {
                 .images_weight{
                     font-size: 14px;
                     font-weight: 600;
+                    margin-bottom: 10px;
                 }
                 .images_text{
                     font-size: 12px;