fix swiper

src/api/project/index.js

@@ -110,6 +110,12 @@ export default {
   totalSearch (params) {
     return fetch('/blade-project-manage-v2/searcher/v2/getListByKeyword', params, 'post', 'json')
   },
+  /**
+   * 搜索详情
+   */
+  searchDetail (params) {
+    return fetch('/blade-project-manage-v2/searcher/v2/searchFileDetails', params, 'post', 'json')
+  },
   total (params) {
     return fetch('/blade-project-manage-v2/searcher/v2/getTotalByKeyword', params, 'post')
   },

src/layout/top.vue

@@ -24,7 +24,7 @@
                        :src="user.info.avatarUrl && user.info.avatarUrl.length > 0 ?  user.info.avatarUrl : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"/>
             <el-dropdown @command='dropDown'>
                 <span class="flex flex-center">
-                  {{ user.info.name }} / {{ user.info.deptName }}
+                  {{ user.info.userName }} / {{ user.info.deptName }}
                   <el-icon class="el-icon--right">
                     <arrow-down/>
                   </el-icon>
@@ -260,7 +260,7 @@ export default {
         })
         this.show = false
       } else if (this.params.searchType === 'file') {
-        const routeData = this.$router.resolve({ path: '/home/file_detail', query: { id: res.fileId.replace('fileid-', '') } })
+        const routeData = this.$router.resolve({ path: '/home/file_detail', query: { id: res.fileId.replace('fileid-', ''), search: true, keywords: this.params.keyword } })
         window.open(routeData.href, '_blank')
       } else if (this.params.searchType === 'picture') {
         this.imgList = [res.url]

src/views/home/component/files_list.vue

@@ -208,7 +208,7 @@ export default {
           this.imgList.push(item.url)
           return
         }
-        const routeData = this.$router.resolve({ path: '/home/file_detail', query: { id: item.fileId } })
+        const routeData = this.$router.resolve({ path: '/home/file_detail', query: { id: item.fileId, search: true } })
         window.open(routeData.href, '_blank')
       } else {
         this.query.id = item.id

src/views/home/file_detail.vue

@@ -1,20 +1,57 @@
 <template>
-    <div class="full-width flex flex-center grey-f-bg" style='width: 100vw;height: 100vh'>
-      <el-card class="flex flex-col flex-center mt-20 white-bg ">
-        <div class="font-24">{{ data.title }}</div>
-        <div class="flex flex-center mt-20 grey-6">
-          <span v-if='data.classification' class="mr-20">来源：{{ data.classification }}</span>
-          <span v-if='data.author' class="mr-20 ml-20 ">作者：{{ data.author }}</span>
+  <div class="padding-top flex flex-center " ref='content' style='width: 100vw;'>
+    <div style='width: 960px;' class='flex  flex-justify-start '>
+      <el-affix :offset='820'>
+        <div class='flex flex-col flex-justify-end mb-20 padding-bottom mr-20 full-height tools'>
+          <div class='mt-20 pointer' @click='up'>
+            <div class='icon flex flex-center mb-5'>
+              <el-icon>
+                <CaretTop/>
+              </el-icon>
+            </div>
+            <span>上一页</span>
+          </div>
+          <div class='mt-20 pointer' @click='next'>
+            <div class='icon flex flex-center mb-5'>
+              <el-icon>
+                <CaretBottom/>
+              </el-icon>
+            </div>
+            <span>下一页</span>
+          </div>
+          <div class='mt-20 pointer' @click='searchResult' v-if='search'>
+            <div class='icon flex flex-center mb-5'>
+              <el-icon>
+                <Search/>
+              </el-icon>
+            </div>
+            <span>匹配项</span>
+          </div>
+          <div @click='download' class='mt-20 pointer'>
+            <div class='icon flex flex-center mb-5'>
+              <el-icon>
+                <Bottom/>
+              </el-icon>
+            </div>
+            <span>下载</span>
+          </div>
         </div>
-        <div class="flex flex-col mt-10 padding hide-scrollbar" style="width: 1080px;height: 84vh;overflow-x: auto">
-          <div v-if='imgList.length > 0' class='flex flex-center flex-col'>
-            <el-image v-for='item in imgList' :key='item' :src='item' style='width: 90%;height: 70%'/>
+      </el-affix>
+      <el-card class="mt-10 white-bg " style='width:910px'>
+        <div>
+          <div v-if='imgList.length > 0'>
+            <div v-for='(item,index) in imgList' :key='item.id'>
+              <a :href='`#header`+(index+1)'>
+                <div class='full-width ' :id="`header`+(index+1)">
+                </div>
+                <el-image :src='item' style='width: 90%'/>
+              </a>
+            </div>
           </div>
-          <div v-else class="flex flex-col hide-scrollbar" style="height: 78vh;overflow-x: auto;line-height: 32px;"
-               v-html="data.content"></div>
         </div>
       </el-card>
     </div>
+  </div>
 </template>
 
 <route>
@@ -33,20 +70,48 @@ export default {
     return {
       id: '',
       data: {},
-      imgList: []
+      imgList: [],
+      search: false,
+      count: 1,
+      keywords: '',
+      url: '',
+      pageNumber: [],
+      pageIndex: 0
     }
   },
   created () {
     this.id = this.$route.query.id
+    this.search = this.$route.query.search
+    this.keywords = this.$route.query.keywords
+    if (this.keywords) {
+      this.getKeyDetail()
+    }
+    const tmp = window.location.href
+    if (tmp.indexOf('#header') > 0) {
+      this.url = tmp.split('#header')[0]
+    }
     this.getFileDetail()
   },
   methods: {
+    getKeyDetail () {
+      this.$api.project.searchDetail({
+        fileId: 'fileid-' + this.id,
+        keyword: this.keywords,
+        pages: 1,
+        size: 100
+      }
+      ).then(res => {
+        if (res.code === 200) {
+          this.pageNumber = res.data.result.map(sub => (sub.pageNumber + 1))
+        }
+      })
+    },
     getFileDetail () {
       this.$api.project.articleDetailByFile(this.id).then(res => {
         if (res.code === 200) {
           this.data = res.data
           if (this.data.category === 4) {
-            // this.imgList = this.data.imgs.map(sub => sub.filePath);
+            this.imgList = this.data.imgs.map(sub => sub.filePath)
             let content = ''
             this.data.imgs.forEach(sub => {
               const img = "<img src='" + sub.filePath + "'/>"
@@ -57,11 +122,56 @@ export default {
           this.data.content = this.data.content.replace('overflow:hidden', 'overflow:scroll')
         }
       })
+    },
+    download () {
+      if (this.data && this.data.fileAttach) {
+        window.open(this.data.fileAttach.filePath, '')
+      }
+    },
+    up () {
+      if (this.count === 1) {
+        this.$message.error('已经是第一页了')
+        return
+      }
+      this.$nextTick(() => {
+        this.count--
+        window.location.href = this.url + '#header' + this.count
+      })
+    },
+    next () {
+      if (this.count === this.imgList.length) {
+        this.$message.error('已经是最后一页了')
+        return
+      }
+      this.$nextTick(() => {
+        this.count++
+        window.location.href = this.url + '#header' + this.count
+      })
+    },
+    searchResult () {
+      if (this.pageIndex < this.pageNumber.length - 1) {
+        this.pageIndex++
+      } else {
+        this.pageIndex = 0
+      }
+      window.location.href = this.url + '#header' + this.pageNumber[this.pageIndex]
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
+.tools {
+  position: relative;
+  width: 50px;
+  margin-left: -50px;
+}
 
+.icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #ECAB56;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
 </style>

vite.config.js

@@ -35,8 +35,8 @@ export default defineConfig({
       '/api': {
         // 正式环境地址
         // target: 'https://dev.wutongresearch.club/api',
-        target: 'https://prod.wutongshucloud.com/api',
-        // target: 'http://192.168.31.181:8110',
+        // target: 'https://prod.wutongshucloud.com/api',
+        target: 'http://192.168.31.181:8110',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')
       }