askbot-dragon 1.6.21-beta → 1.6.21

package/src/components/preview/newPositionPreview.vue

@@ -0,0 +1,370 @@
+<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'"
+          :html_result="html_result"
+          :split_paragraphs="splitParagraph"
+          ref="docView"
+          :fileSuffix="fileType"
+      ></doc-view>
+      <excel-view v-else-if="fileType === 'XLS' || fileType === 'XLSX'"
+                  ref="excelView"
+                  :headerData="excelHeaderData"
+                  :excelRowList="excelRowList"
+                  :tableChunkData="tableChunkData"
+      ></excel-view>
+      <pdf-view v-else-if="fileType === 'PDF'" ref="pdfView" :split_paragraphs="splitParagraph" :ossPath="url" :isPC="isPC"></pdf-view>
+    </div>
+    <template v-if="splitParagraph.length > 1 && fileType !== 'XLS' && fileType !== 'XLSX'">
+      <div class="btn_footer" v-if="!isPC">
+        <div class="prev" @click="prev">上一段</div>
+        <div class="next" @click="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">答案由{{ splitParagraph.length }}段内容生成</span>
+        </el-pagination>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import DocView from "./docView";
+import ExcelView from "./excelView";
+import PdfView from "./pdfView";
+export default {
+  name: "newPositionPreview",
+  components: { PdfView, ExcelView, DocView },
+  data(){
+    return{
+      tagId:[],
+      newVersion:false,
+      html_result:"",
+      parseInfo:{},
+      fileType:"",
+      splitParagraph:[],
+      isPC:true,
+      currentPage:0,
+      excelHeaderData:"",
+      excelRowList:[],
+      tableChunkData:[]
+
+    }
+  },
+  props:{
+    knowledgeId:{
+      type:String,
+      default:""
+    },
+    tagIds:{
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    url:{
+      type:String,
+      default:""
+    }
+  },
+  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){
+            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){
+                this.tableChunkData.push(res.data.data[i].paragraphChunkInfo.tableChunkData)
+              }
+            }
+          }
+        }
+        this.splitParagraph = this.splitParagraph.concat(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
+        }
+        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'){
+        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);
+          const paragraphs = this.$el.querySelectorAll(`[paragraph-id="${this.splitParagraph[this.currentPage].original_paragraph[0].paragraph_id}"]`);
+          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' });
+          }
+        }
+      }
+    }
+  },
+  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">
+.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: #ffffff;
+
+    .prev,
+    .next {
+      width: 35%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50px;
+      cursor: pointer;
+    }
+
+    .prev {
+      background: #F2F5FA;
+      color: #000;
+    }
+
+    .next {
+      background: #366aff;
+      color: #ffffff;
+    }
+  }
+  #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: white;
+    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: #EDF0F6;
+      border-radius: 15px;
+    }
+
+    /deep/.el-pagination.is-background .btn-next {
+      width: 30px;
+      height: 30px;
+      background: #EDF0F6;
+      border-radius: 50%;
+    }
+
+    /deep/.el-pagination .btn-next {
+      width: 30px;
+      height: 30px;
+      background: #EDF0F6;
+      border-radius: 50%;
+      padding-left: 0;
+      margin-left: 5px;
+    }
+
+    /deep/.el-pagination .btn-prev {
+      width: 30px;
+      height: 30px;
+      background: #EDF0F6;
+      border-radius: 50%;
+      padding-right: 0;
+      margin-right: 5px;
+    }
+
+    /deep/.el-pagination button {
+      padding: 0;
+      min-width: 30px;
+    }
+
+    /deep/.el-pager li {
+      background: #EDF0F6;
+      height: 30px;
+      min-width: 30px;
+      line-height: 30px;
+      font-size: 12px;
+      color: #717b90;
+    }
+
+    /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: #366AFF;
+      border: 3px solid #A1B9FF;
+      border-radius: 50%;
+      line-height: 24px;
+      color: white;
+    }
+
+    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+      background: #366AFF;
+    }
+  }
+}
+.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>