askbot-dragon 1.7.43-beta → 1.7.44-beta

package/src/components/preview/newPositionPreview.vue

@@ -1,338 +1,351 @@
-<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"
-      ></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"></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
-        }
-        if (this.fileType === 'XLS' || this.fileType === 'XLSX'){
-          let dom = document.getElementById('drawer_content_pre');
-          dom.style.height = 'calc(100% - 90px)'
-        }
-      })
-    },
-    currentChange (value) {
-      this.currentPage = value - 1;
-      this.scrollToParagraph()
-    },
-    prev(){
-      this.currentPage--;
-      this.scrollToParagraph()
-    },
-    next(){
-      this.currentPage++;
-      this.scrollToParagraph()
-    },
-    scrollToParagraph(type){
-      if (this.fileType == 'PDF') {
-        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;
-          const dom = document.getElementById(id);
-          if (dom){
-            dom.scrollIntoView({ behavior: 'smooth' });
-          }
-          if (type === 'first'){
-            if (dom){
-              dom.classList.add('animation')
-              setTimeout(() => {
-                dom.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.scrollIntoView({ behavior: 'smooth' });
-                dom.classList.add('animation')
-                setTimeout(() => {
-                  dom.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);
-  }
-}
+<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"></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
+        }
+        if (this.fileType === 'XLS' || this.fileType === 'XLSX'){
+          let dom = document.getElementById('drawer_content_pre');
+          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;
+          const dom = document.getElementById(id);
+          if (dom){
+            dom.scrollIntoView({ behavior: 'smooth' });
+          }
+          if (type === 'first'){
+            if (dom){
+              dom.classList.add('animation')
+              setTimeout(() => {
+                dom.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.scrollIntoView({ behavior: 'smooth' });
+                dom.classList.add('animation')
+                setTimeout(() => {
+                  dom.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>