1.科学研究加入pdf预览的提示

2.首页加入pdf预览

src/views/Home/PdfDialog/index.vue

+<template>
+  <div>
+    <el-dialog
+      custom-class="pdfDialog"
+      :title="''"
+      :visible.sync="showPdf"
+      :close-on-click-modal="true"
+      :close-on-press-escape="false"
+      :show-close="true"
+      width="70%"
+      :destroy-on-close="true"
+      top="10vh"
+    >
+      <div class="innerBody">
+        <div class="title">{{ curPdf.articleTitle }}</div>
+        <div class="refuteList">
+          <!-- <pdf :src="pdfSrc"></pdf> -->
+          <pdf-view ref="pdfView" :pdf-src="pdfSrc"></pdf-view>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import PdfView from "../PdfView/index"
+export default {
+  components: { PdfView },
+  props: {
+    curPdf: {
+      type: Object,
+    },
+    pdfSrc: String,
+  },
+  data() {
+    return {
+      showPdf: false,
+    }
+  },
+  watch: {
+    showPdf(v) {
+      if (v) {
+        setTimeout(() => {
+          this.$refs.pdfView.loadPDF()
+        }, 250)
+      }
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.innerBody {
+  padding: 0 60px 40px;
+  .title {
+    font-size: 24px;
+    font-family: AlibabaPuHuiTiM;
+    color: #333333;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+  .refuteList {
+    height: 600px;
+    overflow: auto;
+  }
+}
+</style>
+<style lang="scss">
+.pdfDialog .el-dialog__header {
+  // display: none;
+  padding: 0px !important;
+}
+</style>

src/views/Home/PdfView/index.vue

@@ -3,6 +3,7 @@
     <div v-loading="loadingPdf" class="pdfEle_wrap">
       <div id="pdfEle"></div>
     </div>
+    <!-- 页码 -->
     <div class="pdf-render-pager">
       <div class="prev-next" @click="goPrevPdf">
         <i class="el-icon-arrow-left"></i>
@@ -10,6 +11,7 @@
       <input
         v-model="curPage"
         type="text"
+        title="输入页码后按enter即可跳至目标页"
         style="border: 1px solid #ccc; position: relative; z-index: 9999"
         @keyup.enter="handleChangePage"
       />

src/views/Home/ScientificResearch/index.vue

@@ -18,6 +18,7 @@
         <li
           v-for="(item, index) in tableData"
           :key="index"
+          title="点击预览pdf"
           @click="setPdf(item)"
         >
           <div class="left_text">
@@ -46,33 +47,19 @@
       </div>
     </div>
     <!-- 弹窗 -->
-    <el-dialog
-      custom-class="pdfDialog"
-      :title="''"
-      :visible.sync="showPdf"
-      :close-on-click-modal="true"
-      :close-on-press-escape="false"
-      :show-close="true"
-      width="70%"
-      :destroy-on-close="true"
-      top="10vh"
-    >
-      <div class="innerBody">
-        <div class="title">{{ curPdf.articleTitle }}</div>
-        <div class="refuteList">
-          <!-- <pdf :src="pdfSrc"></pdf> -->
-          <pdf-view ref="pdfView" :pdf-src="pdfSrc"></pdf-view>
-        </div>
-      </div>
-    </el-dialog>
+    <pdf-dialog
+      ref="pdfDialog"
+      :cur-pdf="curPdf"
+      :pdf-src="pdfSrc"
+    ></pdf-dialog>
   </div>
 </template>
 <script>
 import { articleList } from "@/api/operation-management"
 import paginationMixin from "@/components/TabComponents/mixin"
-import PdfView from "../PdfView/index"
+import PdfDialog from "../PdfDialog/index.vue"
 export default {
-  components: { PdfView },
+  components: { PdfDialog },
   mixins: [paginationMixin],
   data() {
     return {
@@ -93,20 +80,10 @@ export default {
         },
       ],
       tableData: [],
-      showPdf: false,
       curPdf: { articleTitle: "测试pdf" },
       pdfSrc: "",
     }
   },
-  watch: {
-    showPdf(v) {
-      if (v) {
-        setTimeout(() => {
-          this.$refs.pdfView.loadPDF()
-        }, 250)
-      }
-    },
-  },
   mounted() {
     if (this.$route.query.tabIndex) {
       this.activeBar = this.$route.query.tabIndex
@@ -141,7 +118,7 @@ export default {
         })
     },
     setPdf(item) {
-      this.showPdf = true
+      this.$refs.pdfDialog.showPdf = true
       this.curPdf = item
       this.pdfSrc =
         "https://ds.cixincloud.com/geca-api/disease-data/file/info/" +
@@ -234,24 +211,4 @@ export default {
     }
   }
 }
-.innerBody {
-  padding: 0 60px 40px;
-  .title {
-    font-size: 24px;
-    font-family: AlibabaPuHuiTiM;
-    color: #333333;
-    text-align: center;
-    margin-bottom: 30px;
-  }
-  .refuteList {
-    height: 600px;
-    overflow: auto;
-  }
-}
-</style>
-<style lang="scss">
-.pdfDialog .el-dialog__header {
-  // display: none;
-  padding: 0px !important;
-}
 </style>

src/views/Home/index.vue

@@ -14,7 +14,11 @@
             :name="index + 1 + ''"
           >
             <ul class="tabslist">
-              <li v-for="(item, index) in noticeList" :key="index">
+              <li
+                v-for="(item, index) in noticeList"
+                :key="index"
+                @click="setPdf(item)"
+              >
                 <div class="left">
                   <div class="circle"></div>
                   {{ item.articleTitle }}
@@ -189,16 +193,25 @@
         </el-popover>
       </ul>
     </div>
+    <!-- 弹窗 -->
+    <pdf-dialog
+      ref="pdfDialog"
+      :cur-pdf="curPdf"
+      :pdf-src="pdfSrc"
+    ></pdf-dialog>
   </div>
 </template>
 <script>
 import { getRankTotal, getCurrentQuarter } from "@/api/Home"
 import { articleList } from "@/api/operation-management"
 import Map from "./Map"
+import PdfDialog from "./PdfDialog/index.vue"
 export default {
-  components: { Map },
+  components: { Map, PdfDialog },
   data() {
     return {
+      curPdf: {},
+      pdfSrc: "",
       fixIndex: -1,
       // videoSrc: require("../../../public/aaa.mp4"),
       videoSrc: "",
@@ -290,6 +303,15 @@ export default {
     })
   },
   methods: {
+    setPdf(item) {
+      this.$refs.pdfDialog.showPdf = true
+      this.curPdf = item
+      this.pdfSrc =
+        "https://ds.cixincloud.com/geca-api/disease-data/file/info/" +
+        item.filePath[0].bucketName +
+        "/" +
+        item.filePath[0].uuidName
+    },
     handleClick() {
       this.getArticleList(this.curTab)
     },