askbot-dragon 1.7.41-beta → 1.7.44-beta

package/src/components/preview/excelView.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="excelView">
+    <table border="1" v-if="false">
+      <thead>
+      <tr>
+        <th v-for="(person2,index2) in headerArray" :key="index2">{{person2}}</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="(person, index) in rowDataList" :key="index" :id="person.id">
+        <td v-for="(person2,index2) in headerArray" :key="index2">
+          {{person[person2]}}
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <el-table
+        :data="pagedData"
+        border
+        ref="table"
+        :row-key="getRowKey"
+        :row-class-name="tableRowClassName"
+        height="100%"
+        style="width: 100%">
+      <template v-for="(item,index) in headerArray">
+        <el-table-column
+            :label="item"
+            :key="index"
+            min-width="100">
+          <template slot-scope="scope">
+            {{scope.row[item]}}
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+    <pagination-page :pageSize="pageSize" :currentPage="currentPage" :total="rowDataList.length" @currentChange="handleCurrentChange"></pagination-page>
+  </div>
+</template>
+
+<script>
+
+import PaginationPage from "../pagination";
+export default {
+  name: "excelView",
+  components: { PaginationPage },
+  data(){
+    return{
+      rowData:[
+        {
+          "row_id": "659164be-19bd-4fd7-a47d-b04c3dbbfa6f",
+          "row_data_md": "| 王明宇 | 27 | 189 |",
+          "row_number": 2,
+          "table_html": "<table border='1' style='border-collapse:collapse;'><thead><tr><th>姓名1</th><th>年龄</th><th>身高</th></tr></thead><tbody><tr><td>王明宇</td><td>27</td><td>189</td></tr></tbody></table>"
+        },
+        {
+          "row_id": "fac98d6a-2580-4f62-8f50-61521debeeef",
+          "row_data_md": "| 老王 | 38 | 178 |",
+          "row_number": 3,
+          "table_html": "<table border='1' style='border-collapse:collapse;'><thead><tr><th>姓名1</th><th>年龄</th><th>身高</th></tr></thead><tbody><tr><td>老王</td><td>38</td><td>178</td></tr></tbody></table>"
+        },
+      ],
+      rowDataList:[],
+      headerArray:[],
+      currentPage:1,
+      pageSize:20,
+      colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
+    }
+  },
+  props:{
+    headerData:{
+      type:String,
+      default:""
+    },
+    excelRowList:{
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    tableChunkData:{
+      type:Array,
+      default(){
+        return [{
+          "sheet_name": null,
+          "table_md": null,
+          "tableChunkText": "| 序号 | 电子色片 | 旧色号 | 颜色名称 | R68-Y32 17w77b06c L32-1 | 新 | 色卡页码 | -ICN色号 | R | G | B | C | M | Y | | 154 | 22 | B99-G01 81w11b08c L88-4 | OW060-4 |  | 雪蓝 | 蓝色系 | 210 | 218 | 223 | 5.5761039841401502E-2 | 2.08606534553369E-2 | 0 | 0.12603452469972801 |",
+          "tableChunkId": "5e80ff30-ea7e-4c47-878b-59d9b1c833ce",
+          "tableId": null
+        }]
+      }
+    }
+  },
+  computed:{
+    pagedData() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.rowDataList.slice(start, end);
+    }
+  },
+  methods:{
+    tableRowData(){
+      const headerString = this.headerData.trim().replace(/^\||\|$/g, '');
+
+      // 使用竖线作为分隔符来分割字符串
+      const headerArray = headerString.split('|').map(item => item.trim());
+      this.headerArray = headerArray
+      for (let i =0;i<this.excelRowList.length;i++){
+        // 去除字符串两端的竖线（如果它们存在的话）
+        const trimmedString = this.excelRowList[i].row_data_md.trim().replace(/^\||\|$/g, '');
+
+        // 使用竖线作为分隔符来分割字符串
+        const resultArray = trimmedString.split('|').map(item => item.trim());
+        let obj = {}
+        for (let j=0;j<headerArray.length;j++){
+          this.$set(obj,headerArray[j],resultArray[j])
+          this.$set(obj,'id',this.excelRowList[i].row_id)
+        }
+        this.rowDataList.push(obj);
+      }
+      this.$nextTick(() => {
+        this.setRowColor();
+      })
+    },
+    getRowKey(row){
+      return row.id
+    },
+    setRowColor(){
+      this.tableChunkData.forEach((item,index) => {
+        const colorIndex = index % this.colors.length;
+        let id = item.tableChunkId;
+        let dom = document.getElementsByClassName('setBgClass' + id);
+        console.log('dom',dom)
+        if (dom && dom.length > 0){
+          dom.forEach(doms => {
+            doms.style.backgroundColor = this.colors[colorIndex];
+          })
+        }
+      })
+      if (this.tableChunkData.length > 0){
+        this.scrollToRow(this.tableChunkData[0].tableChunkId)
+      }
+    },
+    tableRowClassName({ row }){
+      let id = this.tableChunkData.filter(item => item.tableChunkId == row.id);
+      if (id && id.length > 0){
+        return 'setBgClass' + id[0].tableChunkId
+      }
+    },
+    scrollToRow(rowId) {
+      this.$nextTick(() => {
+        const row = this.rowDataList.find(row => row.id === rowId);
+        if (row) {
+          this.$refs.table.setCurrentRow(row);
+        }
+      });
+    },
+    handleCurrentChange(val){
+      this.currentPage = val;
+      this.$nextTick(() => {
+        this.setRowColor();
+      })
+    }
+  },
+  mounted() {
+    this.tableRowData();
+  }
+};
+</script>
+
+<style scoped lang="less">
+.excelView{
+  height: 100%;
+  /deep/.setBgClass{
+    background-color: #E3EBFF!important;
+  }
+}
+</style>

package/src/components/preview/newPositionPreview.vue

@@ -0,0 +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"
+          :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>