askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/preview/newPositionPreview.vue

@@ -0,0 +1,601 @@
+<template>
+  <div class="positionView">
+    <div class="positionContainer" :class="splitParagraph.length > 1  && fileType !== 'XLS' && fileType !== 'XLSX' ? 'has-footer' : 'no-footer'">
+      <doc-view
+          v-if="fileType === 'TXT' || fileType === 'DOCX' || fileType === 'DOC' || fileType === 'HTML' || fileType === 'MD'"
+          :html_result="html_result"
+          :split_paragraphs="splitParagraph"
+          ref="docView"
+          :fileSuffix="fileType"
+          :textWatermarkStr="textWatermarkStr"
+          :isLining="isLining"
+      ></doc-view>
+      <excel-view v-else-if="fileType === 'XLS' || fileType === 'XLSX'"
+                  ref="excelView"
+                  :headerData="excelHeaderData"
+                  :excelRowList="excelRowList"
+                  :tableChunkData="tableChunkData"
+                  :textWatermarkStr="textWatermarkStr"
+      ></excel-view>
+      <pdf-view v-else-if="fileType === 'PDF'" ref="pdfView" :split_paragraphs="splitParagraph" :ossPath="url" :isPC="isPC" :textWatermarkStr="textWatermarkStr"></pdf-view>
+      <mark-down-view v-else-if="fileType === 'MD'" :url="url" :split_paragraphs="splitParagraph" :textWatermarkStr="textWatermarkStr"></mark-down-view>
+      <template v-else-if="fileType === 'URL'">
+        <div class="preview_iframe_html" id="preview_iframe_html" style="text-align:left" v-html="fileText"></div>
+      </template>
+    </div>
+    <template v-if="splitParagraph.length > 1 && fileType !== 'XLS' && fileType !== 'XLSX'">
+      <div class="btn_footer" v-if="!isPC">
+        <div class="prev" @click="prev">{{$t('dragonCommon.previous')}}</div>
+        <div class="next" @click="next">{{$t('dragonCommon.next')}}</div>
+      </div>
+      <div id="pagination" v-if="isPC">
+        <el-pagination :current-page="currentPage + 1" @current-change="currentChange" @prev-click="prev"
+                       @next-click="next" layout="slot, prev, pager, next" :page-size="1" :total="splitParagraph.length">
+          <span class="total-class">{{$t('dragonCommon.answersGeneratedByPre')}} {{ splitParagraph.length }} {{$t('dragonCommon.answersGeneratedByAfter')}}</span>
+        </el-pagination>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import DocView from "./docView";
+import ExcelView from "./excelView";
+import PdfView from "./pdfView";
+import MarkDownView from "./markDownView";
+import { newInitWaterMark } from "../../assets/js/common";
+export default {
+  name: "newPositionPreview",
+  components: { MarkDownView, PdfView, ExcelView, DocView },
+  data(){
+    return{
+      tagId:[],
+      newVersion:false,
+      html_result:"",
+      parseInfo:{},
+      fileType:"",
+      splitParagraph:[],
+      isPC:true,
+      currentPage:0,
+      excelHeaderData:"",
+      excelRowList:[],
+      tableChunkData:[],
+      fileText:"",
+      colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
+    }
+  },
+  props:{
+    knowledgeId:{
+      type:String,
+      default:""
+    },
+    tagIds:{
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    url:{
+      type:String,
+      default:""
+    },
+    textWatermarkStr:{
+      type:String,
+      default:""
+    },
+    previewOssPath:{
+      type:String,
+      default:""
+    },
+    isLining:{
+      type:Boolean,
+      default:false
+    }
+  },
+  methods:{
+    getLocationInfo(){
+      this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/list?ids=' + this.tagIds.join(',')).then(res => {
+        if (res.data.code == 0){
+          if (res.data.data && res.data.data.length){
+            let original_paragraph = []
+            for (let i=0;i<res.data.data.length;i++){
+              if (res.data.data[i].paragraphChunkInfo && res.data.data[i].paragraphChunkInfo.splitParagraph){
+                this.splitParagraph.push(res.data.data[i].paragraphChunkInfo.splitParagraph)
+              }
+              if (res.data.data[i].paragraphChunkInfo && res.data.data[i].paragraphChunkInfo.tableChunkData){
+                if (res.data.data[i].paragraphChunkInfo.tableChunkData.bbox && res.data.data[i].paragraphChunkInfo.tableChunkData.bbox.length > 0){
+                  let obj = {
+                    page:res.data.data[i].paragraphChunkInfo.tableChunkData.page,
+                    position:res.data.data[i].paragraphChunkInfo.tableChunkData.bbox
+                  }
+                  original_paragraph.push(obj)
+                } else {
+                  this.tableChunkData.push(res.data.data[i].paragraphChunkInfo.tableChunkData)
+                }
+              }
+            }
+            if (original_paragraph.length > 0){
+              this.splitParagraph.push({
+                original_paragraph
+              })
+            }
+          }
+        }
+        this.splitParagraph = this.splitParagraph.concat(this.tableChunkData);
+        console.log('splitParagraph',this.splitParagraph,this.tableChunkData)
+        this.getParseInfo();
+      })
+    },
+    getParseInfo(){
+      let url = '/knowledge-api/correction/knowledge-parse-info/' + this.knowledgeId;
+      this.$http.get(url).then(res => {
+        console.log('getParseInfo',res)
+        if (res.data.code == 0 && res.data.data){
+          this.parseInfo = res.data.data;
+          if (res.data.data.extractChunkInfo && res.data.data.extractChunkInfo.docChunkData){
+            this.html_result = res.data.data.extractChunkInfo.docChunkData.html_result;
+          }
+          if (res.data.data.extractChunkInfo && res.data.data.extractChunkInfo.tableChunkData && res.data.data.extractChunkInfo.tableChunkData.length > 0){
+            this.excelHeaderData = res.data.data.extractChunkInfo.tableChunkData[0].table_md.table_header;
+            this.excelRowList = res.data.data.extractChunkInfo.tableChunkData[0].table_md.table_data;
+          }
+          this.fileType = res.data.data.fileType
+          // 判断是否为 HTTP 链接，但排除包含 aliyuncs 的OSS链接
+          if (this.html_result && !this.isLining && ((this.previewOssPath.startsWith('http://') || this.previewOssPath.startsWith('https://')) && !this.previewOssPath.includes('aliyuncs'))) {
+            this.fileType = 'URL';
+            this.getUrlContent(this.html_result)
+          }
+        }
+        this.$nextTick(() => {
+          if (this.fileType === 'XLS' || this.fileType === 'XLSX'){
+            let dom = document.getElementById('drawer_content_pre');
+            if (dom){
+              dom.style.height = 'calc(100% - 90px)'
+            }
+          }
+        })
+      })
+    },
+    currentChange (value) {
+      this.currentPage = value - 1;
+      this.scrollToParagraph()
+    },
+    prev(){
+      if (this.currentPage == 0){
+        return
+      }
+      this.currentPage--;
+      this.scrollToParagraph()
+    },
+    next(){
+      if (this.currentPage === (this.splitParagraph.length - 1)){
+        return
+      }
+      this.currentPage++;
+      this.scrollToParagraph()
+    },
+    async scrollToParagraph(type){
+      if (this.fileType == 'PDF') {
+        let currentPage = this.splitParagraph[this.currentPage];
+        let page = 1;
+        if (currentPage){
+          page = currentPage.original_paragraph[0].page
+        }
+        await this.$refs.pdfView.loadPage(page);
+        this.$refs.pdfView.jumpToHighlight(this.currentPage)
+      } else if (this.fileType == 'DOC' || this.fileType == 'DOCX' || this.fileType == 'TXT' || this.fileType == 'MD' || this.fileType == 'HTML' || this.fileType == 'URL'){
+        if (this.splitParagraph[this.currentPage] && this.splitParagraph[this.currentPage].original_paragraph){
+          const id = this.splitParagraph[this.currentPage].original_paragraph[0].paragraph_id;
+          let dom = document.getElementById(id);
+          let paragraphs = this.$el.querySelectorAll(`[paragraph-id="${this.splitParagraph[this.currentPage].original_paragraph[0].paragraph_id}"]`);
+          if (this.fileType == 'HTML' || this.fileType == 'URL'){
+            if (this.splitParagraph[this.currentPage].original_paragraph[0].images && this.splitParagraph[this.currentPage].original_paragraph[0].images.length > 0){
+              paragraphs = this.$el.querySelectorAll(`[data-paragraph-id="${this.splitParagraph[this.currentPage].original_paragraph[1].paragraph_id}"]`);
+            } else {
+              paragraphs = this.$el.querySelectorAll(`[data-paragraph-id="${this.splitParagraph[this.currentPage].original_paragraph[0].paragraph_id}"]`);
+            }
+
+          }
+          console.debug('scrollToParagraph',dom,paragraphs,type)
+          if (dom){
+            dom.scrollIntoView({ behavior: 'smooth' });
+          }
+          if (paragraphs && paragraphs.length > 0){
+            paragraphs[0].scrollIntoView({ behavior: 'smooth' })
+          }
+          if (type === 'first'){
+            if (dom){
+              dom.classList.add('animation')
+              setTimeout(() => {
+                dom.classList.remove('animation')
+              }, 3000)
+            }
+            if (paragraphs && paragraphs.length > 0){
+              paragraphs[0].classList.add('animation')
+              setTimeout(() => {
+                paragraphs[0].classList.remove('animation')
+              }, 3000)
+            }
+          } else {
+            for (let i=0;i<this.splitParagraph[this.currentPage].original_paragraph.length;i++){
+              const id = this.splitParagraph[this.currentPage].original_paragraph[i].paragraph_id;
+              const dom = document.getElementById(id);
+              if (dom){
+                dom.classList.add('animation')
+                setTimeout(() => {
+                  dom.classList.remove('animation')
+                }, 3000)
+              }
+              if (paragraphs && paragraphs.length > 0){
+                paragraphs[0].classList.add('animation')
+                setTimeout(() => {
+                  paragraphs[0].classList.remove('animation')
+                }, 3000)
+              }
+            }
+          }
+        } else if (this.splitParagraph[this.currentPage] && this.splitParagraph[this.currentPage].tableId){
+          const id = this.splitParagraph[this.currentPage].tableId;
+          const dom = document.getElementById(id);
+          if (dom){
+            dom.scrollIntoView({ behavior: 'smooth' });
+          }
+        }
+      }
+    },
+    // 新增方法：获取URL内容并对图片地址进行签名处理
+    getUrlContent(url) {
+      this.loading = true;
+      console.log('url',url)
+      this.$http.get(url).then((res) => {
+        if (res.status === 200) {
+          // 处理HTML内容中的图片地址，添加签名
+          this.processImageUrls(res.data);
+        } else {
+          console.error('获取URL内容失败');
+          this.loading = false;
+        }
+      }).catch((err) => {
+        console.error('获取URL内容失败:', err);
+        this.loading = false;
+      });
+    },
+    setColor(){
+      this.splitParagraph.forEach((item,index) => {
+        const colorIndex = index % this.colors.length;
+        if (item.original_paragraph){
+          item.original_paragraph.forEach(items => {
+            const paragraphs = this.$el.querySelectorAll(`[data-paragraph-id="${items.paragraph_id}"]`);
+            paragraphs.forEach(paragraph => {
+              paragraph.style.background = this.colors[colorIndex]
+            })
+          })
+        }
+      })
+    },
+    // 处理HTML内容中的图片地址，为OSS图片添加签名
+    processImageUrls(htmlContent) {
+      // 创建临时DOM元素来解析HTML
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = htmlContent;
+
+      // 查找所有图片标签
+      const imgTags = tempDiv.querySelectorAll('img');
+      let processedCount = 0;
+      let totalImages = imgTags.length;
+
+      if (totalImages === 0) {
+        // 没有图片，直接显示内容
+        this.fileText = htmlContent;
+        this.loading = false;
+        this.$nextTick(() => {
+          let dom = document.getElementById('drawer_content_pre');
+          if (dom){
+            dom.style.backgroundImage = 'none';
+          }
+          this.setColor()
+          if (this.textWatermarkStr){
+            newInitWaterMark('preview_iframe_html',this.textWatermarkStr)
+          }
+        })
+        this.$emit('loadingSuccess');
+        return;
+      }
+
+      // 处理每个图片地址
+      imgTags.forEach((img) => {
+        const imgSrc = img.getAttribute('src');
+        if (imgSrc && (imgSrc.includes('aliyuncs') || imgSrc.includes('oss-'))) {
+          // 为OSS图片获取签名URL
+          this.getSignedImageUrl(imgSrc, (signedUrl) => {
+            if (signedUrl) {
+              img.setAttribute('src', signedUrl);
+            }
+            processedCount++;
+
+            // 所有图片处理完成后，更新内容
+            if (processedCount === totalImages) {
+              this.fileText = tempDiv.innerHTML;
+              this.loading = false;
+              this.$nextTick(() => {
+                let dom = document.getElementById('drawer_content_pre');
+                if (dom){
+                  dom.style.backgroundImage = 'none';
+                }
+                this.setColor()
+                if (this.textWatermarkStr){
+                  newInitWaterMark('preview_iframe_html',this.textWatermarkStr)
+                }
+              })
+              this.$emit('loadingSuccess');
+            }
+          });
+        } else {
+          // 非OSS图片，直接跳过
+          processedCount++;
+          if (processedCount === totalImages) {
+            this.fileText = tempDiv.innerHTML;
+            this.loading = false;
+            this.$nextTick(() => {
+              let dom = document.getElementById('drawer_content_pre');
+              if (dom){
+                dom.style.backgroundImage = 'none';
+              }
+              this.setColor()
+              if (this.textWatermarkStr){
+                newInitWaterMark('preview_iframe_html',this.textWatermarkStr)
+              }
+            })
+            this.$emit('loadingSuccess');
+          }
+        }
+      });
+    },
+
+    // 获取图片的签名URL
+    getSignedImageUrl(imgSrc, callback) {
+      // 检查是否是相对路径，如果是则拼接完整URL
+      let fullImgUrl = imgSrc;
+      if (imgSrc.startsWith('/') || !imgSrc.startsWith('http')) {
+        // 从当前URL中提取域名
+        const urlObj = new URL(this.url);
+        fullImgUrl = urlObj.origin + (imgSrc.startsWith('/') ? imgSrc : '/' + imgSrc);
+      }
+
+      // 调用获取临时证书的API
+      this.$http.post('/knowledge-api/knowledge/getTemporaryCertificate', {
+        "fileInOssPath": fullImgUrl
+      }, {
+        params: { needEncrypt: false }
+      }).then(res => {
+        if (res.data.code === '0') {
+          callback(res.data.data);
+        } else {
+          console.error('获取图片签名失败:', res.data.message);
+          callback(null);
+        }
+      }).catch(err => {
+        console.error('获取图片签名失败:', err);
+        callback(null);
+      });
+    },
+  },
+  mounted() {
+    this.getLocationInfo();
+    if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
+      this.isPC = false
+    } else {
+      this.isPC = true
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+@import "../../assets/less/variables.less";
+
+.positionView{
+  height: 100%;
+  .has-footer{
+    height: calc(100% - 60px);
+  }
+  .no-footer{
+    height: 100%;
+  }
+  .btn_footer {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    z-index: 999;
+    background: @background-color-light;
+
+    .prev,
+    .next {
+      width: 35%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50px;
+      cursor: pointer;
+    }
+
+    .prev {
+      background: @background-color-custom;
+      color: @font-primary-color;
+    }
+
+    .next {
+      background: @primary-color;
+      color: @font-primary-light-color;
+    }
+  }
+  #pagination {
+    .total-class {
+      margin-right: 13px;
+      font-weight: 400;
+    }
+
+    position: absolute;
+    bottom: 0px;
+    right: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    background-color: @background-color-light;
+    box-shadow: 0px 0px 18px 0px rgba(29, 55, 129, 0.07);
+    border-radius: 5px;
+    z-index: 1000;
+
+
+
+    /deep/.el-pagination {
+      margin-right: 110px;
+    }
+
+    /deep/.el-pager {
+      background: @background-color-pagination;
+      border-radius: 15px;
+    }
+
+    /deep/.el-pagination.is-background .btn-next {
+      width: 30px;
+      height: 30px;
+      background: @background-color-pagination;
+      border-radius: 50%;
+    }
+
+    /deep/.el-pagination .btn-next {
+      width: 30px;
+      height: 30px;
+      background: @background-color-pagination;
+      border-radius: 50%;
+      padding-left: 0;
+      margin-left: 5px;
+    }
+
+    /deep/.el-pagination .btn-prev {
+      width: 30px;
+      height: 30px;
+      background: @background-color-pagination;
+      border-radius: 50%;
+      padding-right: 0;
+      margin-right: 5px;
+    }
+
+    /deep/.el-pagination button {
+      padding: 0;
+      min-width: 30px;
+    }
+
+    /deep/.el-pager li {
+      background: @background-color-pagination;
+      height: 30px;
+      min-width: 30px;
+      line-height: 30px;
+      font-size: 12px;
+      color: @font-pagination-color;
+    }
+
+    /deep/.el-pager li:first-child {
+      border-bottom-left-radius: 15px !important;
+      border-top-left-radius: 15px !important;
+    }
+
+    /deep/.el-pager li:last-child {
+      border-top-right-radius: 15px !important;
+      border-bottom-right-radius: 15px !important;
+    }
+
+    /deep/.el-pager li.active {
+      width: 30px;
+      height: 30px;
+      min-width: 30px;
+      background: @primary-color;
+      border: 3px solid @border-color-copy;
+      border-radius: 50%;
+      line-height: 24px;
+      color: @font-primary-light-color;
+    }
+
+    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+      background: @primary-color;
+    }
+  }
+}
+.preview_iframe_html {
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  text-align: left;
+  box-sizing: border-box;
+  padding: 16px;
+
+  /deep/.lake-content {
+    margin-left: 10px;
+  }
+
+  /deep/a:link {
+    color: #0000ee !important;
+  }
+
+  /deep/a:visited {
+    color: #0000ee !important;
+  }
+
+  /deep/a:hover {
+    color: #0000ee !important;
+  }
+
+  /deep/a:active {
+    color: #0000ee !important;
+  }
+
+  /deep/li:not(.rich-text-li),
+  ol:not(.list-paddingleft-2),
+  ul:not(.list-paddingleft-2) {
+    list-style-type: auto !important;
+  }
+
+  /deep/img {
+    width: auto;
+  }
+
+  /deep/.ne-table {
+    width: 100% !important;
+  }
+}
+.animation {
+  animation-name: highlight;
+  animation-duration: 4s;
+}
+
+@keyframes highlight {
+  0% {
+    background: rgba(255, 136, 0, 0.3);
+  }
+
+  25% {
+    background: rgba(255, 136, 0, 0.6);
+  }
+
+  50% {
+    background: rgba(255, 136, 0, 0.3);
+  }
+
+  75% {
+    background: rgba(255, 136, 0, 0.6);
+  }
+
+  100% {
+    background: rgba(255, 136, 0, 0.3);
+  }
+}
+</style>