askbot-dragon 1.6.21-beta → 1.6.21

package/src/components/pdfPosition.vue

@@ -1,37 +1,45 @@
 <template>
-    <div class="pdf_view" ref="pdfView" @scroll="pdfScroll" :style="{
-        marginTop: isPC ? '50px' : '',
-        marginBottom: tagIds.length > 1 ? '60px' : '0px',
-        height: setHeight
-    }">
-        <div class="change_scale" v-if="isPC">
-            <section @click="changeScale('reduce')">
-                <i class="el-icon-minus"></i>
-            </section>
-            <el-divider direction="vertical"></el-divider>
-            <section @click="changeScale('zoom')">
-                <i class="el-icon-plus"></i>
-            </section>
-            <el-select size="small" v-model="handScale" @change="changeScale" placeholder="请选择">
-                <el-option v-for="item in scaleList" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-            </el-select>
-        </div>
-        <div class="btn_footer" v-if="tagIds.length > 1 && !isPC">
-            <div class="prev" @click="prev">上一段</div>
-            <div class="next" @click="next">下一段</div>
-        </div>
-        <div id="pagination" v-if="tagIds.length > 1 && 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="tagIds.length">
-                <span class="total-class">答案由{{ tagIds.length }}段内容生成</span>
-            </el-pagination>
-        </div>
+    <div class="pdf_view" id="pdf_view">
+      <div class="change_scale" v-if="isPC">
+        <section @click="changeScale('reduce')">
+          <i class="el-icon-minus"></i>
+        </section>
+        <el-divider direction="vertical"></el-divider>
+        <section @click="changeScale('zoom')">
+          <i class="el-icon-plus"></i>
+        </section>
+        <el-select size="small" v-model="handScale" @change="changeScale" :placeholder="$t('dragonCommon.selectScale')">
+          <el-option v-for="item in scaleList" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="pdf_container_view" id="pdf_container_view" @scroll="pdfScroll" ref="pdfView"></div>
+      <div class="btn_footer" v-if="tagIds.length > 1 && !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="tagIds.length > 1 && 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="tagIds.length"
+        >
+          <span class="total-class">{{ $t('dragonCommon.answersGeneratedByPre') }}{{tagIds.length}}{{ $t('dragonCommon.answersGeneratedByAfter') }}</span>
+        </el-pagination>
+      </div>
     </div>
 </template>
-
 <script>
+// :style="{
+//     marginBottom: tagIds.length > 1 ? '60px' : '0px',
+//     height: setHeight
+// }"
 import _ from 'lodash'
+import { newInitWaterMark } from "../assets/js/common";
 // import * as pdfjsLib from 'pdfjs-dist'
 // pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker';
 // import { TextLayerBuilder }  from "pdfjs-dist/web/pdf_viewer";
@@ -47,7 +55,7 @@ const { TextLayerBuilder } = window['pdfjs-dist/web/pdf_viewer']
 // import { zoomElement } from '../assets/js/hammer'
 export default {
     name: 'pdfView',
-    props: ['tagIds', 'isMessageRecord'],
+    props: ['tagIds', 'isMessageRecord','textWatermarkStr'],
     data () {
         return {
             url: '',
@@ -96,37 +104,7 @@ export default {
             transformSalce: null,
             isPC: false,
             handScale: 'auto',
-            scaleList: [
-                {
-                    label: '自动缩放',
-                    value: 'auto'
-                },
-                {
-                    label: '实际比例',
-                    value: 'reality'
-                },
-                {
-                    label: '100%',
-                    value: 1
-                },
-                {
-                    label: '120%',
-                    value: 1.2
-                },
-                {
-                    label: '150%',
-                    value: 1.5
-                },
-                {
-                    label: '170%',
-                    value: 1.7
-                }
-                ,
-                {
-                    label: '200%',
-                    value: 2
-                }
-            ],
+            scaleList: [],
             scrollTop: 0,
             scrollLeft: 0
         }
@@ -258,6 +236,9 @@ export default {
                 this.contentView.style.paddingBottom = '60px'
                 // contentView.style.overflowY = 'auto'
                 this.$refs.pdfView.appendChild(this.contentView);
+                if (this.textWatermarkStr){
+                  newInitWaterMark('pdf_container_view',this.textWatermarkStr)
+                }
             }
             this.renderPages(pageIndex)
         },
@@ -335,30 +316,32 @@ export default {
                             rectdom.style.top = 0
                             rectdom.style.left = 0
                             rectdom.classList.add('rectdom')
-                            for (let index = 0; index < lines.length; index++) {
+                            if (lines){
+                              for (let index = 0; index < lines.length; index++) {
                                 if (!/^\s+$/g.test(lines[index].content)) {
-                                    let postionArr = lines[index].location
-                                    let div = document.createElement('div')
-                                    div.style.position = 'absolute';
-                                    div.style.left = postionArr[0] * this.scale + 'px',
-                                    // 后端返回的坐标有基线对齐的问题，top 值是后端算好（基线top - 文字高度），在此加上文字高度的 1/9 （大致比例）为实际展示出文字的top值
-                                    div.style.top = postionArr[1] * this.scale + 'px'
-                                    div.style.height = postionArr[3] * this.scale + 'px';
-                                    div.style.width = postionArr[2] * this.scale + 'px'
-                                    div.style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
-                                    div.classList.add('lineHeight')
-                                    rectdom.appendChild(div)
-                                    if (index == 0 && j == 0) {
-                                        if (this.transformSalce !== null) {
-                                            rectdomTop = postionArr[1] * this.scale * this.transformSalce
-                                        } else {
-                                            rectdomTop = postionArr[1] * this.scale
-                                        }
-                                        // if(this.isPC) {
-                                        //     rectdomTop = rectdomTop - 50 < 0 ? 0 : rectdomTop - 50
-                                        // }
+                                  let postionArr = lines[index].location
+                                  let div = document.createElement('div')
+                                  div.style.position = 'absolute';
+                                  div.style.left = postionArr[0] * this.scale + 'px',
+                                      // 后端返回的坐标有基线对齐的问题，top 值是后端算好（基线top - 文字高度），在此加上文字高度的 1/9 （大致比例）为实际展示出文字的top值
+                                      div.style.top = postionArr[1] * this.scale + 'px'
+                                  div.style.height = postionArr[3] * this.scale + 'px';
+                                  div.style.width = postionArr[2] * this.scale + 'px'
+                                  div.style.backgroundColor = 'rgba(54, 106, 255, 0.3)'
+                                  div.classList.add('lineHeight')
+                                  rectdom.appendChild(div)
+                                  if (index == 0 && j == 0) {
+                                    if (this.transformSalce !== null) {
+                                      rectdomTop = postionArr[1] * this.scale * this.transformSalce
+                                    } else {
+                                      rectdomTop = postionArr[1] * this.scale
                                     }
+                                    // if(this.isPC) {
+                                    //     rectdomTop = rectdomTop - 50 < 0 ? 0 : rectdomTop - 50
+                                    // }
+                                  }
                                 }
+                              }
                             }
                             if (rectdom.children.length > 0) {
                                 pageDom.appendChild(rectdom)
@@ -444,7 +427,7 @@ export default {
                 endNum = startNum + Math.ceil(height / (that.pageSize.height + that.PAGE_INTVERVAL))
             }
             for (let pageIndex = startNum; pageIndex < endNum; pageIndex++) {
-                if (pageIndex > 0 && pageIndex < that.pages.length) {
+                if (pageIndex > 0 && pageIndex <= that.pages.length) {
                     that.loadPdfData(pageIndex)
                 }
             }
@@ -548,7 +531,7 @@ export default {
                 this.currentPage = 0
                 if (!this.isPC) {
                     this.$toast({
-                        message: '当前已经是第一段了',
+                        message: this.$t('dragonCommon.firstParagraph'),
                         duration: 2000,
                     })
                     return
@@ -567,7 +550,7 @@ export default {
                 this.currentPage = this.tagIds.length - 1
                 if (!this.isPC) {
                     this.$toast({
-                        message: '当前已经是最后一段了',
+                        message: this.$t('dragonCommon.lastParagraph'),
                         duration: 2000,
                     })
                     return
@@ -864,6 +847,7 @@ export default {
                     // 在 pdf_view 下创建 所有canvs的容器
                     this.contentView = document.createElement('div')
                     this.contentView.style.transformOrigin = '0px 0px 0px'
+                    this.contentView.setAttribute('id','contentView');
                     this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/list?ids=' + value.join(',')).then(res => {
                         // res.data = {"data":[{"id":"64591b7d8bb8ab1b91c65f24","knowledgeId":"64591a9c8da27649473f3b4b","mainId":"fb348d095c0b4fd7bbd37826563dac7d","page":3,"total":18,"pageHeight":540.0,"pageWidth":960.00946,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/fb348d095c0b4fd7bbd37826563dac7d/2023/05/08/11/55/18/64591b638bb8ab1b91c65eed/3.pdf","extractInfo":{"location":[280.488,161.32,398.71573,61.99298],"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距北京市区65公里，是以奇而著称，融山川、碧水、古长城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","lines":[{"content":"黄花城水长城旅游区位于北京市怀柔区九渡河镇境内，距","location":[280.488,161.32,398.71573,15.9869995]},{"content":"北京市区65公里，是以奇而著称，融山川、碧水、古长","location":[283.691,184.30899,392.3055,15.9869995]},{"content":"城为一体的旅游休闲胜地。而这里的“三绝景”更是引人入","location":[282.699,207.32599,394.3033,15.9869995]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
                         // res.data = {"data":[{"id":"64590ce1eb1320043401cc90","knowledgeId":"64590cd5017b461d67e282e1","mainId":"fb348d095c0b4fd7bbd37826563dac7d","page":2,"total":5,"pageHeight":841.8898,"pageWidth":595.30396,"publicPageFileUrl":"https://askbot-pdf-all.oss-cn-zhangjiakou.aliyuncs.com/fb348d095c0b4fd7bbd37826563dac7d/2023/05/08/10/53/20/64590ce0eb1320043401cc7b/2.pdf","extractInfo":{"location":[89.32981,638.1907,415.15512,98.63251],"content":":北京地铁 13\r号线 :藤黄\r色 :西直门站—\r东直门站 :17 :41.\r5 :6\r准\rB :2002年\r09月\r28日 ","lines":[{"content":":北京地铁 13\r号线 ","location":[89.32981,638.1907,99.44599,98.63251]},{"content":":藤黄\r色 ","location":[188.7758,638.1907,46.79959,98.63251]},{"content":":西直门站—\r东直门站 ","location":[235.5754,638.1907,86.09996,98.63251]},{"content":":17 ","location":[321.67535,638.1907,36.200012,98.63251]},{"content":":41.\r5 ","location":[357.87537,638.1907,39.400696,98.63251]},{"content":":6\r准\rB ","location":[397.27606,638.1907,41.099,98.63251]},{"content":":2002年\r09月\r28日 ","location":[438.37506,638.1907,66.10986,98.63251]}],"tagId":null}}],"code":"0","msg":null,"traceId":null}
@@ -1030,9 +1014,9 @@ export default {
                             // tagIds 会按照gpt识别的生成有序的数组，前端直接按照下标的顺序取就可以了
                             // 缓存拿到的所有数据
                             this.cachePdf = res.data.data
-                            let publicPageFileUrl = res.data.data[0].publicPageFileUrl
+                            let publicPageFileUrl = res.data.data && res.data.data[0] ? res.data.data[0].publicPageFileUrl : ''
                             this.currentPage = 0
-                            if (publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')) === '.pdf') {
+                            if (publicPageFileUrl && publicPageFileUrl.substring(publicPageFileUrl.lastIndexOf('.')) === '.pdf') {
                                 this.preViewType = 'pdf'
                                 this.setPageAllLine(this.cachePdf)
                                 this.getpdfResloutePage(res.data.data[0])
@@ -1074,7 +1058,7 @@ export default {
                             }
                         } else {
                             let div = document.createElement('div')
-                            div.innerText = '文件加载异常'
+                            div.innerText = this.$t('dragonCommon.fileloadException')
                             this.contentView.appendChild(div)
                             this.$refs.pdfView.appendChild(this.contentView)
                         }
@@ -1086,6 +1070,38 @@ export default {
         }
     },
     mounted () {
+        this.$i18n.locale = sessionStorage.getItem("systemLanguage") || 'cn';
+        this.scaleList = [
+            {
+                label: this.$t('dragonCommon.scaleAuto'),
+                value: 'auto'
+            },
+            {
+                label: this.$t('dragonCommon.scaleReality'),
+                value: 'reality'
+            },
+            {
+                label: '100%',
+                value: 1
+            },
+            {
+                label: '120%',
+                value: 1.2
+            },
+            {
+                label: '150%',
+                value: 1.5
+            },
+            {
+                label: '170%',
+                value: 1.7
+            }
+            ,
+            {
+                label: '200%',
+                value: 2
+            }
+        ]
         if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
             this.isPC = false
         } else {
@@ -1098,12 +1114,12 @@ export default {
 <style lang="less" scoped>
 .pdf_view {
     width: 100%;
-    height: calc(100% - 110px);
+    // height: calc(100% - 110px);
+    height: 100%;
     overflow: auto;
     background-color: #f5f7fb;
     // margin-bottom: 60px;
     box-sizing: border-box;
-
     // position: relative;
     // > div {
     //     width: 100%;
@@ -1292,6 +1308,12 @@ export default {
             background: rgba(221, 222, 223, 1);
         }
     }
+  .pdf_container_view{
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: auto;
+  }
 }
 </style>
 <style lang="less">

package/src/components/popup.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="popUp">
     <div class="topBtn">
-      <span class="cancel" @click="closeBtn">取消</span>
-      <span class="sure" @click="sure">确定</span>
+      <span class="cancel" @click="closeBtn">{{ $t('dragonCommon.cancel') }}</span>
+      <span class="sure" @click="sure">{{ $t('dragonCommon.confirm') }}</span>
     </div>
     <slot name="popup-header" class="popup-header"></slot>
     <div class="popup-content">
       <div
-          class="filter-item"
-          v-for="(item,index) in options"
-          :key="index"
-          @click="checked(item,index)"
+        class="filter-item"
+        v-for="(item, index) in options"
+        :key="index"
+        @click="checked(item, index)"
       >
-        <div :class="[checkIdList.includes(item[props.value]) && 'setColor', 'label']">{{item[props.label]}}</div>
+        <div :class="[checkIdList.includes(item[props.value]) && 'setColor', 'label']">{{ item[props.label] }}</div>
       </div>
     </div>
     <div class="popup-footer">
@@ -164,6 +164,7 @@ export default {
     },
   },
   mounted() {
+    this.$i18n.locale = sessionStorage.getItem("systemLanguage") || 'cn';
     console.debug('options',this.options)
 
   }

package/src/components/preview/docView.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="docView">
+    <div class="docHtml"
+         ref="docHtml"
+         v-html="html"
+         @click="selectDiv"
+    >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "docView",
+  data(){
+    return{
+      colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
+      html:"",
+    }
+  },
+  props:{
+    html_result:{
+      type:String,
+      default:""
+    },
+    split_paragraphs:{
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    fileSuffix:{
+      type:String,
+      default:""
+    }
+  },
+  methods:{
+    selectDiv(e){
+      this.$emit('selectDiv',e)
+    },
+    getHtml(){
+      // let url = 'https://guoranwisdom.oss-cn-zhangjiakou.aliyuncs.com/123/2024/12/09/14/18/17/123/%E5%85%AC%E5%8F%B8%E5%91%98%E5%B7%A5%E6%89%8B%E5%86%8C_1733725097.html'
+      let url = this.html_result
+      this.$http.get(url).then(res => {
+        this.html = res.data;
+        let drawer = document.getElementById('drawer_content_pre')
+        if (drawer){
+          drawer.style.backgroundImage = 'none';
+          drawer.style.overflowX = 'hidden'
+        }
+        this.$nextTick(() => {
+          this.setColor()
+        })
+      })
+    },
+    setColor(){
+      this.split_paragraphs.forEach((item,index) => {
+        const colorIndex = index % this.colors.length;
+        if (item.original_paragraph){
+          item.original_paragraph.forEach(items => {
+            let dom = document.getElementById(items.paragraph_id);
+            if (this.fileSuffix === 'TXT'){
+              const paragraphs = this.$el.querySelectorAll(`[paragraph-id="${items.paragraph_id}"]`);
+              paragraphs.forEach(paragraph => {
+                paragraph.style.background = this.colors[colorIndex]
+              })
+            } else if (dom){
+              dom.style.background = this.colors[colorIndex];
+            }
+          })
+          let newOriginal = item.original_paragraph.filter(items => !items.type)
+          let dom = document.getElementById(newOriginal[newOriginal.length - 1].paragraph_id);
+          if (dom){
+            dom.style.marginBottom = '8px';
+          }
+        }
+        if (item.tableId){
+          let dom = document.getElementById(item.tableId);
+          if (dom){
+            dom.style.backgroundColor = this.colors[colorIndex]
+          }
+        }
+      })
+      setTimeout(() => {
+        this.$parent.scrollToParagraph('first')
+      },500)
+    },
+  },
+  watch:{
+    html_result:{
+      handler(){
+        if (this.html_result){
+          this.getHtml();
+        }
+      },
+      immediate:true
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+.docView{
+  width: 100%;
+  flex: none;
+  box-sizing: border-box;
+  div{
+    position: relative;
+  }
+  /deep/img{
+    max-width: 100%;
+  }
+}
+</style>

package/src/components/preview/excelView.vue

@@ -0,0 +1,187 @@
+<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('first');
+      })
+    },
+    getRowKey(row){
+      return row.id
+    },
+    setRowColor(type){
+      this.tableChunkData.forEach((item,index) => {
+        const colorIndex = index % this.colors.length;
+        let id = item.tableChunkId;
+        let dom = document.getElementsByClassName('setBgClass' + id);
+        if (dom && dom.length > 0){
+          let newDom = Array.from(dom)
+          newDom.forEach(doms => {
+            doms.style.backgroundColor = this.colors[colorIndex];
+          })
+        }
+      })
+      if (this.tableChunkData.length > 0 && type === 'first'){
+        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);
+        const rowIndex = this.rowDataList.findIndex(row => row.id === rowId);
+        let index = Math.ceil(rowIndex / 20)
+        this.currentPage = index;
+        setTimeout(() => {
+          let dom = document.getElementsByClassName('setBgClass' + rowId);
+          if (dom && dom.length > 0){
+            let newDom = Array.from(dom)
+            newDom.forEach(doms => {
+              doms.style.backgroundColor = this.colors[0];
+            })
+            newDom[0].scrollIntoView({ behavior: "smooth"})
+          }
+        },500)
+      });
+    },
+    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>