askbot-dragon 1.7.61-beta → 1.7.63-beta

package/src/components/previewPdf.vue

@@ -8,31 +8,41 @@
   <el-drawer title="" :visible.sync="drawer" :with-header="false" :append-to-body="true" :destroy-on-close="true"
     :modal="false" :direction="previewShowPopup ? 'btt' : 'rtl'" :size="previewShowPopup ? '90%' : '65%'"
     custom-class="pdf-preview-drawer" v-if="drawer">
-    <div class="drawer-header" :class="isLiBang ? 'libang_head' : ''" v-if="!isPc">
-      <div class="header-btn btn_position">
-        <div class="onload_btn" v-if="isDownload" @click="downLoad">
-          {{ $t('dragonCommon.download') }}
-        </div>
-        <div class="summaryBtn" :class="showSummary ? 'summaryActiveBtn' : ''" @click="summaryFun" v-if="isHasChat">
-          <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
-          <span>{{ $t('dragonCommon.smartSummary') }}</span>
-        </div>
-        <template v-if="isHasChat">
-          <div class="chat" @click="previewToDialog(true)" v-if="!previewKnowledgeId">
-            <i class="iconfont guoran-wendapingjia"></i>
-            {{ $t('dragonCommon.chat') }}
-          </div>
-          <div class="chat chat_active" @click="previewToDialog(false)" v-else>
-            <i class="iconfont guoran-wendapingjia"></i>
-            {{ $t('dragonCommon.chat') }}
-          </div>
-        </template>
-      </div>
+    <div class="drawer-header" :class="(isDownload || isHasChat) && isLiBang ? 'has_btn_libang_head' : (isLiBang ? 'libang_head' : (isDownload || isHasChat ? 'has_btn_head' : ''))" v-if="!isPc">
       <div class="header_title">
-        <div class="header_close">
+        <template v-if="isDownload || isHasChat">
+          <div class="top-header">
+            <div class="header-btn">
+              <div class="onload_btn" v-if="isDownload" @click="downLoad">
+                {{ $t('dragonCommon.download') }}
+              </div>
+              <div class="summaryBtn" :class="showSummary ? 'summaryActiveBtn' : ''" @click="summaryFun" v-if="isHasChat">
+                <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
+                <span>{{ $t('dragonCommon.smartSummary') }}</span>
+              </div>
+              <template v-if="isHasChat">
+                <div class="chat" @click="previewToDialog(true)" v-if="!previewKnowledgeId">
+                  <i class="iconfont guoran-wendapingjia"></i>
+                  {{ $t('dragonCommon.chat') }}
+                </div>
+                <div class="chat chat_active" @click="previewToDialog(false)" v-else>
+                  <i class="iconfont guoran-wendapingjia"></i>
+                  {{ $t('dragonCommon.chat') }}
+                </div>
+              </template>
+            </div>
+            <section @click="close">
+              <i class="iconfont guoran-shanchu"></i>
+            </section>
+          </div>
           <span class="title_left">
             {{ title ? title : $t('dragonCommon.viewDetails') }}
           </span>
+        </template>
+        <div class="header_close" v-else>
+          <span class="title_left">
+            {{ title ? title : '查看详情' }}
+          </span>
           <section @click="close">
             <i class="iconfont guoran-shanchu"></i>
           </section>
@@ -55,7 +65,7 @@
               {{ $t('dragonCommon.download') }}
             </div>
             <div class="summaryBtn" :class="showSummary ? 'summaryActiveBtn' : ''" @click="summaryFun"
-              v-if="isHasChat">
+              v-if="isHasChat || formKnowledgeManagement">
               <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
               <span>{{ $t('dragonCommon.smartSummary') }}</span>
             </div>
@@ -81,16 +91,23 @@
         </p>
       </div>
     </div>
-    <div id="drawer_content_pre" :class="isLiBang && folderName ? 'libang_content_pre' : ''">
+    <div id="drawer_content_pre" :class="(isDownload || isHasChat) && !isPc && isLiBang && folderName ? 'has_btn_libang_content_pre' : (isLiBang && folderName ? 'libang_content_pre' : '')">
       <intelligent-summary v-show="showSummary && isHasChat" :tagIds="tagIds" :knowledgeId="knowledgeId"
         @closeSummary="closeSummary" @recommendQues="recommendQues"
         @getSummarySuccess="getSummarySuccess"></intelligent-summary>
-      <div class="pdf_positon" :style="pdfStyle" v-if="tagIds && tagIds.length != 0 && drawer">
+      <div class="pdf_positon" :style="pdfStyle" v-if="tagIds && tagIds.length != 0 && drawer && newVersion === false && newFileType !== 'PPT'">
         <pdfPosition :tagIds="tagIds" :isMessageRecord="isMessageRecord" :textWatermarkStr="textWatermarkStr">
         </pdfPosition>
       </div>
+      <new-position-preview
+          ref="newPositionPreview"
+          v-else-if="tagIds && tagIds.length!= 0 && newVersion && newFileType !== 'PPT'"
+          :knowledgeId="knowledgeId"
+          :tagIds="tagIds"
+          :url="previewHref"
+      ></new-position-preview>
       <template v-else>
-        <div v-if="fileType == 'VIDEO'" style="width: 100%;">
+        <div v-if="fileType == 'VIDEO'" style="width: 100%;height: 100%">
           <video :src="url" controls width="100%;" height="98%"></video>
         </div>
         <div v-else-if="fileType == 'HTML'" style="width: 100%;">
@@ -103,6 +120,18 @@
         <template v-else>
           <iframe class="preview_iframe_kk" :src="previewUrl" style="border:none;"
             :style="{ height: iframeHeight }"></iframe>
+          <template v-if="!loading && (newFileType === 'PPT' && pageChunkData.length > 1)">
+            <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="pageChunkData.length">
+                <span class="total-class">答案由{{ pageChunkData.length }}段内容生成</span>
+              </el-pagination>
+            </div>
+          </template>
         </template>
       </template>
     </div>
@@ -121,8 +150,9 @@ import { zoomElement } from '../assets/js/hammer'
 import IntelligentSummary from "./intelligentSummary";
 import { isMobile } from "../assets/js/common";
 import { Toast } from 'vant';
+import NewPositionPreview from "./preview/newPositionPreview";
 export default {
-  data () {
+  data() {
     return {
       previewShowPopup: false,
       fileText: '',
@@ -132,317 +162,461 @@ export default {
       tagIds: [],
       // '6454aa1a70573a6ead6f0f7d', '6454aa1a70573a6ead6f0f81',
       loading: true,
+      fileName: '',
       previewKnowledgeId: "",
-      showSummary: true,
+      showSummary: false,
       iframeHeight: "100%",
       isDownload: false,
       textWatermarkStr: "",
-      copy:''
+      copy: '',
+      newVersion: '',
+      previewHref: "",
+      newFileType: "",
+      numberPage: 0,
+      pageChunkData: [],
+      currentPage: 0
     }
   },
-  mounted () {
-    this.$i18n.locale = sessionStorage.getItem("systemLanguage") || 'cn';
-    window.addEventListener('message', this.handleIframeMessage, false);
-    this.isPcFun();
-  },
-  props: {
-    url: {
-      type: String,
-      required: true,
-    },
-    officePreviewType: {
-      type: String,
-      default: ''
-    },
-    isMessageRecord: {
-      type: Boolean,
-      default: false,
+    mounted() {
+      this.$i18n.locale = sessionStorage.getItem("systemLanguage") || 'cn';
+      window.addEventListener('message', this.handleIframeMessage, false);
+      this.isPcFun();
     },
-    sourceFileType: {
-      type: String,
-      default: '',
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    isHasChat: {
-      type: Boolean,
-      default: false
-    },
-    knowledgeId: {
-      type: String,
-      default: '',
-    },
-    previewOssPath: {
-      type: String,
-      default: '',
-    },
-  folderName: {
-      type: String,
-      default: '',
+    props: {
+      url: {
+        type: String,
+        required: true,
+      },
+      officePreviewType: {
+        type: String,
+        default: ''
+      },
+      isMessageRecord: {
+        type: Boolean,
+        default: false,
+      },
+      sourceFileType: {
+        type: String,
+        default: '',
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      isHasChat: {
+        type: Boolean,
+        default: false
+      },
+      knowledgeId: {
+        type: String,
+        default: '',
+      },
+      previewOssPath: {
+        type: String,
+        default: '',
+      },
+      folderName: {
+        type: String,
+        default: '',
+      },
+      folderUrl: {
+        type: String,
+        default: '',
+      },
+      isLiBang: {
+        type: Boolean,
+        default: false
+      },
+      formKnowledgeManagement: {
+        type: Boolean,
+        default: false
+      }
     },
-    folderUrl: {
-      type: String,
-      default: '',
+    components: {
+      NewPositionPreview,
+      IntelligentSummary,
+      pdfPosition
     },
-    isLiBang: {
-      type: Boolean,
-      default: false
-    }},
-  components: {
-    IntelligentSummary,
-    pdfPosition
-  },
-  watch: {
-    drawer (value) {
-      if (value) {
-        this.$emit('open')
-        this.$nextTick(() => {
-          zoomElement(document.getElementById('drawer_content_pre'))
+    watch: {
+      drawer(value) {
+        if (value) {
+          this.$emit('open')
+          this.$nextTick(() => {
+            if (this.tagIds && this.tagIds.length != 0) {
+              zoomElement(document.getElementById('pdf_container_view'))
+            }
+          })
+        } else {
+          this.$emit('close')
+        }
+        setTimeout(() => {
+          let previewIframe = document.getElementsByClassName('preview_iframe')
+          Array.from(previewIframe).forEach(item => {
+            item.onload = () => {
+              console.debug('previewIframe 106', previewIframe, this.drawer)
+              item.style.backgroundImage = 'none'
+            }
+          })
         })
-      } else {
-        this.$emit('close')
+      },
+      showSummary: {
+        handler(val) {
+          // if (!val){
+          //   this.$nextTick(() => {
+          //     let preCon = document.querySelector('.pdf_view');
+          //     if (preCon){
+          //       preCon.style.height = 'calc(100% - ' + 50 + 'px)'
+          //     }
+          //   })
+          // } else {
+          //   this.getSummarySuccess();
+          // }
+          if (val) {
+            this.getSummarySuccess();
+          }
+        }
+      },
+      knowledgeId: {
+        handler(val) {
+          if (val) {
+            this.getTextWatermark();
+          }
+        }
       }
     },
-    showSummary: {
-      handler (val) {
-        // if (!val){
-        //   this.$nextTick(() => {
-        //     let preCon = document.querySelector('.pdf_view');
-        //     if (preCon){
-        //       preCon.style.height = 'calc(100% - ' + 50 + 'px)'
+    computed: {
+      pdfStyle() {
+        return {
+          paddingTop: this.isPc ? '30px' : '0', // 30px 是 加上外层的 20 流出 50的上边距展示 放大缩小操作栏
+          paddingBottom: this.tagIds > 1 ? '60px' : '0',
+          height: '100%'
+        }
+      },
+      previewUrl() {
+        console.debug('VUE_APP_ENV', process.env.VUE_APP_ENV)
+        let url = process.env.VUE_APP_ENV === 'production' ? 'https://kkfileview.askbot.cn/onlinePreview?url=' : 'https://test.open.askbot.cn/kkfileview/onlinePreview?url='
+        // if(this.url != '') {
+        //     if(/[\u4E00-\u9FA5]+/g.test(this.url)) {
+        //         url += btoa(encodeURIComponent(this.url))
+        //     } else {
+        //         url += btoa(this.url)
         //     }
-        //   })
-        // } else {
-        //   this.getSummarySuccess();
         // }
-        if (val) {
-          this.getSummarySuccess();
+        url = url + this.url
+        url += '&officePreviewType=pdf'
+        if (this.watermark) {
+          url = this.watermark.textWatermarkValue ? (url += '&textWatermarkValue=' + this.watermark.textWatermarkValue) : url
+          url = this.watermark.visitorWatermarkValue ? (url += '&visitorWatermarkValue=' + this.watermark.visitorWatermarkValue) : url
         }
-      }
-    },
-    knowledgeId: {
-      handler (val) {
-        if (val) {
-          this.getTextWatermark();
+        console.log('textWatermarkStr 216', this.textWatermarkStr)
+        if (this.textWatermarkStr) {
+          url += '&textWatermarkValue=' + this.textWatermarkStr
         }
-      }
-    }
-  },
-  computed: {
-    pdfStyle () {
-      return {
-        paddingTop: this.isPc ? '30px' : '0', // 30px 是 加上外层的 20 流出 50的上边距展示 放大缩小操作栏
-        paddingBottom: this.tagIds > 1 ? '60px' : '0',
-        height: '100%'
-      }
-    },
-    previewUrl () {
-      console.debug('VUE_APP_ENV', process.env.VUE_APP_ENV)
-      let url = process.env.VUE_APP_ENV === 'production' ? 'https://kkfileview.askbot.cn/onlinePreview?url=' : 'https://test.open.askbot.cn/kkfileview/onlinePreview?url='
-      // if(this.url != '') {
-      //     if(/[\u4E00-\u9FA5]+/g.test(this.url)) {
-      //         url += btoa(encodeURIComponent(this.url))
+        return url
+      },
+      // fileType() {
+      //     const fileType = this.url.substring(this.url.lastIndexOf('.'));
+      //     if (fileType === '.mp4' || fileType === '.MP4'  || fileType === '.MOV'  || fileType === '.mov') {
+      //         return 'VIDEO'
       //     } else {
-      //         url += btoa(this.url)
+      //         return 'OTHER'
       //     }
+
       // }
-      url = url + this.url
-      if (this.sourceFileType == '.ppt' || this.sourceFileType == '.pptx' || this.sourceFileType == '.pdf') {
-        url += '&officePreviewType=pdf'
-      }
-      console.log('textWatermarkStr 216', this.textWatermarkStr)
-      if (this.textWatermarkStr) {
-        url += '&textWatermarkValue=' + this.textWatermarkStr
-      }
-      return url
-    },
-    // fileType() {
-    //     const fileType = this.url.substring(this.url.lastIndexOf('.'));
-    //     if (fileType === '.mp4' || fileType === '.MP4'  || fileType === '.MOV'  || fileType === '.mov') {
-    //         return 'VIDEO'
-    //     } else {
-    //         return 'OTHER'
-    //     }
-
-    // }
-  },
-  methods: {
-    close () {
-      setTimeout(() => {
-        this.previewShowPopup = false;
-        this.fileType = ''
-      }, 300)
-      this.drawer = false;
-      this.showSummary = false;
     },
-    loadIframe () {
-
-      if (this.fileType == 'VIDEO' || this.fileType == 'WECHAT' || (this.tagIds && this.tagIds.length != 0)) {
-        this.loading = false
-      } else {
-        let iframe = document.getElementsByClassName('preview_iframe')[0] || document.getElementsByClassName('preview_iframe_kk')[0];
-        if (iframe) {
-          iframe.onload = () => {
-            this.loading = false;
-            document.getElementById('drawer_content_pre').style.backgroundImage = 'none'
+    methods: {
+      close() {
+        setTimeout(() => {
+          this.previewShowPopup = false;
+          this.fileType = ''
+        }, 300)
+        this.drawer = false;
+        this.showSummary = false;
+      },
+      loadIframe() {
+
+        if (this.fileType == 'VIDEO' || this.fileType == 'WECHAT' || (this.tagIds && this.tagIds.length != 0 && this.newFileType !== 'PPT')) {
+          this.loading = false
+        } else {
+          let iframe = document.getElementsByClassName('preview_iframe')[0] || document.getElementsByClassName('preview_iframe_kk')[0];
+          if (iframe) {
+            iframe.onload = () => {
+              this.loading = false;
+              document.getElementById('drawer_content_pre').style.backgroundImage = 'none'
+            }
           }
+          // let time = setInterval(() =>{
+          //
+          //   if(iframe) {
+          //       this.loading = false
+          //       clearInterval(time)
+          //   }
+          // }, 500)
         }
-        // let time = setInterval(() =>{
-        //
-        //   if(iframe) {
-        //       this.loading = false
-        //       clearInterval(time)
-        //   }
-        // }, 500)
-      }
-    },
-    getBolb () {
-      this.$http.post('/knowledge-api/knowledge/htmlTextDeal?onlyText=false', {
-        fileInOssPath: this.url,
-        templateId: ''
-      }).then(res => {
-        if (res.data.code == 0) {
-          this.fileText = res.data.data
-          this.loading = false
+      },
+      getBolb() {
+        this.$http.post('/knowledge-api/knowledge/htmlTextDeal?onlyText=false', {
+          fileInOssPath: this.url,
+          templateId: ''
+        }).then(res => {
+          if (res.data.code == 0) {
+            this.fileText = res.data.data
+            this.loading = false
+          }
+        })
+      },
+      previewToDialog(flag) {
+        this.$emit('previewToDialog', flag)
+      },
+      closeSummary() {
+        this.showSummary = false;
+      },
+      recommendQues(item, knowledgeId) {
+        console.log('recommendQues', item, knowledgeId);
+        this.$emit('recommendQues', item, knowledgeId)
+      },
+      handleIframeMessage(res) {
+        if (res.data.type == 'getViewerHeight') {
+          let iframeHeight = this.iframeHeight.replace('px', '')
+          if (res.data.data && iframeHeight != (res.data.data + 50)) {
+            this.iframeHeight = res.data.data + 50 + 'px'
+          }
         }
-      })
-    },
-    previewToDialog (flag) {
-      this.$emit('previewToDialog', flag)
-    },
-    closeSummary () {
-      this.showSummary = false;
-    },
-    recommendQues (item, knowledgeId) {
-      console.log('recommendQues', item, knowledgeId);
-      this.$emit('recommendQues', item, knowledgeId)
-    },
-    handleIframeMessage (res) {
-      console.log('handleIframeMessage', res)
-      if (res.data.type == 'getViewerHeight') {
-        let iframeHeight = this.iframeHeight.replace('px', '')
-        if (res.data.data && iframeHeight != (res.data.data + 50)) {
-          this.iframeHeight = res.data.data + 50 + 'px'
+        if (res.data.type == 'getViewPage' && res.data.data) {
+          this.numberPage = Number(res.data.data);
+          if (this.pageChunkData.length > 0) {
+            this.scrollPPTPage(this.pageChunkData[0])
+          }
         }
-      }
-    },
-    summaryFun () {
-      this.showSummary = !this.showSummary;
-      if (this.showSummary) {
-        document.getElementById('drawer_content_pre').scrollTop = 0;
-      }
-    },
-    getSummarySuccess () {
-      this.$nextTick(() => {
-        // if (this.tagIds.length > 0){
-        //   let intelligentSummary = document.getElementById('intelligentSummary');
-        //   let preCon = document.querySelector('.pdf_view')
-        //   if (intelligentSummary){
-        //     let height = intelligentSummary.offsetHeight + (this.isPc ? 100 : 50 );
-        //     if (preCon){
-        //       preCon.style.height = 'calc(100% - ' + height + 'px)'
-        //     }
-        //     console.log('height',height,preCon)
-        //   }
-        // }
-        // let intelligentSummary = document.getElementById('intelligentSummary');
-        // let height = intelligentSummary.offsetHeight
-        // this.pdfStyle.height = 'calc(100% - ' + height + 'px)'
-      })
-    },
-    getTextWatermark () {
-      let url = '/knowledge-api/open/knowledge/getPermissionInfo';
-      let obj = {
-        "knowledgeId": this.knowledgeId,
-        "userId": sessionStorage.getItem('_currentUserId'),
-        "mainId": sessionStorage.getItem('_mainId'),
-        "corpId": sessionStorage.getItem('_corpid')
-      }
-      this.$http.post(url, obj).then(res => {
-        console.log('getTextWatermark', res.data.data)
-        if (res.data.data) {
-          this.textWatermarkStr = res.data.data.textWatermarkStr;
-          this.isDownload = res.data.data.showDownloadBtn;
+        if (res.data.type == 'getViewerHeight' || res.data.type == 'getViewPage') {
+          if (this.pageChunkData.length > 0) {
+            this.scrollPPTPage(this.pageChunkData[0])
+          }
         }
-      })
-    },
-    downLoad () {
-      let url = this.previewOssPath
-      if (decodeURIComponent(url) != url) {
-        url = decodeURIComponent(url)
-      }
-      const fileType = url.substring(url.lastIndexOf('.'));
-      this.$http.post('/knowledge-api/temporary-certificate/or-origin?expired=10', url, {
-        headers: {
-          "Content-Type": "application/json",
+      },
+      summaryFun() {
+        this.showSummary = !this.showSummary;
+        if (this.showSummary) {
+          document.getElementById('drawer_content_pre').scrollTop = 0;
+        }
+      },
+      getSummarySuccess() {
+        this.$nextTick(() => {
+          // if (this.tagIds.length > 0){
+          //   let intelligentSummary = document.getElementById('intelligentSummary');
+          //   let preCon = document.querySelector('.pdf_view')
+          //   if (intelligentSummary){
+          //     let height = intelligentSummary.offsetHeight + (this.isPc ? 100 : 50 );
+          //     if (preCon){
+          //       preCon.style.height = 'calc(100% - ' + height + 'px)'
+          //     }
+          //     console.log('height',height,preCon)
+          //   }
+          // }
+          // let intelligentSummary = document.getElementById('intelligentSummary');
+          // let height = intelligentSummary.offsetHeight
+          // this.pdfStyle.height = 'calc(100% - ' + height + 'px)'
+        })
+      },
+      getTextWatermark() {
+        let url = '/knowledge-api/open/knowledge/getPermissionInfo';
+        let obj = {
+          "knowledgeId": this.knowledgeId,
+          "userId": sessionStorage.getItem('_currentUserId'),
+          "mainId": sessionStorage.getItem('_mainId'),
+          "corpId": sessionStorage.getItem('_corpid')
+        }
+        this.$http.post(url, obj).then(res => {
+          console.log('getTextWatermark', res.data.data)
+          if (res.data.data) {
+            this.textWatermarkStr = res.data.data.textWatermarkStr;
+            this.isDownload = res.data.data.showDownloadBtn;
+          }
+        })
+      },
+      downLoad() {
+        if (this.formKnowledgeManagement) {
+          this.$emit('downLoad', this.previewOssPath);
+          return
+        }
+        let url = this.previewOssPath
+        if (decodeURIComponent(url) != url) {
+          url = decodeURIComponent(url)
         }
-      }).then(res => {
-        console.log('downLoad 341', res)
-        if (res.data || res.bodyText) {
-          if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
-            this.copy = res.data
-            if (isMobile()) {
-              setTimeout(() =>{
-                const range = document.createRange();
-                range.selectNode(document.getElementById('text'));
-                const selection = window.getSelection();
-                //移除之前选中内容
-                if (selection.rangeCount > 0) selection.removeAllRanges();
-                selection.addRange(range);
-                document.execCommand('copy');
-                selection.removeAllRanges()
-                Toast(this.$t('dragonCommon.Safaridownload'));
-                this.close()
-              },100)
+        const fileType = url.substring(url.lastIndexOf('.'));
+        this.$http.post('/knowledge-api/temporary-certificate/or-origin?expired=10', url, {
+          headers: {
+            "Content-Type": "application/json",
+          }
+        }).then(res => {
+          console.log('downLoad 341', res)
+          if (res.data || res.bodyText) {
+            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
+              this.copy = res.data
+              if (isMobile()) {
+                setTimeout(() => {
+                  const range = document.createRange();
+                  range.selectNode(document.getElementById('text'));
+                  const selection = window.getSelection();
+                  //移除之前选中内容
+                  if (selection.rangeCount > 0) selection.removeAllRanges();
+                  selection.addRange(range);
+                  document.execCommand('copy');
+                  selection.removeAllRanges()
+                  Toast(this.$t('dragonCommon.Safaridownload'));
+                  this.close()
+                }, 100)
+              } else {
+                let a = document.createElement('a')
+                a.href = res.data
+                a.download = (this.title) + fileType
+                a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
+              }
+              return
             } else {
-              let a = document.createElement('a')
-              a.href = res.data
-              a.download = (this.title) + fileType
-              a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
+              // setTimeout(() =>{
+              //   window.open(res.data,'下载', 'noopener')
+              // }, 2000)
+              // window.open(res.data,'下载', 'noopener')
+              if (isMobile()) {
+
+                const iframe = document.createElement("iframe");
+                iframe.setAttribute("hidden", "hidden");
+                iframe.onload = () => {
+                  if (iframe) {
+                    console.log("iframe onload....")
+                    iframe.setAttribute('src', 'about:blank');
+                  }
+                };
+                document.body.insertBefore(iframe, null);
+                iframe.setAttribute("src", res.data);
+              } else {
+                let a = document.createElement('a')
+                a.href = res.data
+                a.download = (this.title) + fileType
+                a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
+              }
+              this.close()
             }
-            return
-          } else {
-            // setTimeout(() =>{
-            //   window.open(res.data,'下载', 'noopener')
-            // }, 2000)
-            // window.open(res.data,'下载', 'noopener')
-            if (isMobile()) {
-              const iframe = document.createElement("iframe");
-              iframe.setAttribute("hidden", "hidden");
-              iframe.onload = () => {
-                if (iframe) {
-                  console.log("iframe onload....")
-                  iframe.setAttribute('src', 'about:blank');
+          }
+        })
+      },
+      isPcFun() {
+        if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
+          this.isPc = false
+        } else {
+          this.isPc = true
+        }
+      },
+      clickFloder() {
+        this.$emit('previewClickFloder')
+      },
+      getOssPath(url) {
+        let httpUrl = '/knowledge-api/knowledge/getTemporaryCertificate';
+        let type = this.getFileType(url)
+        this.newFileType = type;
+        if (type === 'VIDEO' || type === 'PDF' || type === 'EXCEL' || type === 'TXT' || type === 'DOC') {
+          httpUrl += '?needEncrypt=false'
+        } else {
+          httpUrl += '?needEncrypt=true'
+        }
+        this.$http.post(httpUrl, {
+          "fileInOssPath": url
+        }).then(res => {
+          console.log('getOssPath', res)
+          if (res.data.code == '0') {
+            this.previewHref = res.data.data;
+          }
+        })
+      },
+      getFileType(url) {
+        let index = url.lastIndexOf('?')
+        let newFileInOssPath = url.substring(0, url.indexOf("?"))
+        if (index == -1) {
+          newFileInOssPath = url
+        }
+        const fileType = newFileInOssPath.substring(newFileInOssPath.lastIndexOf('.'));
+        if (fileType === '.mp4' || fileType === '.MP4' || fileType === '.MOV' || fileType === '.MOVC' || fileType === '.mov' || fileType === '.movc') {
+          return 'VIDEO'
+        } else if (fileType === '.html') {
+          return 'HTML'
+        } else if (fileType === '.png' || fileType === '.jpg' || fileType === '.jpeg' || fileType === '.PNG' || fileType === '.JPG' || fileType === '.JPEG') {
+          return 'IMAGE'
+        } else if (fileType === '.docx' || fileType === '.doc') {
+          return 'DOC'
+        } else if (fileType === '.ppt' || fileType === '.pptx') {
+          return 'PPT'
+        } else if (fileType === '.pdf') {
+          return 'PDF'
+        } else if (fileType === '.txt') {
+          return 'TXT'
+        } else {
+          return 'OTHER'
+        }
+      },
+      //判断是否使用新定位组件
+      getLocationInfo() {
+        this.newVersion = "";
+        this.$http.get('/knowledge-api/knowledge/knowledge-part-location-info/list?ids=' + this.tagIds.join(',')).then(res => {
+          console.log('getLocationInfo', res)
+          this.pageChunkData = [];
+          if (res.data.code == 0) {
+            if (res.data.data && res.data.data.length > 0 && res.data.data[0].extractVersion == 'v3') {
+              this.newVersion = true;
+              if (this.newFileType !== 'PPT') {
+                this.loading = false;
+              }
+              for (let i = 0; i < res.data.data.length; i++) {
+                if (res.data.data[i].paragraphChunkInfo && res.data.data[i].paragraphChunkInfo.pageChunkData) {
+                  this.pageChunkData.push(res.data.data[i].paragraphChunkInfo.pageChunkData.page_number)
+                }
+              }
+              if (this.pageChunkData.length > 1) {
+                let iframe = document.getElementsByClassName('preview_iframe_kk')
+                if (iframe && iframe.length > 0) {
+                  iframe[0].style.paddingBottom = '50px'
                 }
-              };
-              document.body.insertBefore(iframe, null);
-              iframe.setAttribute("src", res.data);
+              }
             } else {
-              let a = document.createElement('a')
-              a.href = res.data
-              a.download = (this.title) + fileType
-              a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
+              this.newVersion = false;
             }
-            this.close()
+          }
+        })
+      },
+      currentChange(value) {
+        this.currentPage = value - 1;
+        this.scrollPPTPage()
+      },
+      prev() {
+        if (this.currentPage == 0) {
+          return
+        }
+        this.currentPage--;
+        this.scrollPPTPage()
+      },
+      next() {
+        if (this.currentPage === (this.pageChunkData.length - 1)) {
+          return;
+        }
+        this.currentPage++;
+        this.scrollPPTPage()
+      },
+      scrollPPTPage() {
+        if (this.numberPage > 0) {
+          let pageNumber = this.pageChunkData[this.currentPage];
+          let height = Math.floor(Number(this.iframeHeight.replace('px', "")));
+          let pageHeight = Math.floor(height / this.numberPage);
+          let scrollHeight = (pageNumber - 1) * pageHeight;
+          let dom = document.getElementById('drawer_content_pre');
+          if (dom) {
+            dom.scrollTo(0, scrollHeight)
           }
         }
-      })
-    },
-    isPcFun () {
-      if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
-        this.isPc = false
-      } else {
-        this.isPc = true
       }
     },
-  clickFloder() {
-      this.$emit('previewClickFloder')
-    }},
-  beforeDestroy () {
-    window.removeEventListener('message', this.handleIframeMessage);
-  }
+    beforeDestroy() {
+      window.removeEventListener('message', this.handleIframeMessage);
+    }
 }
 </script>
 
@@ -506,7 +680,133 @@ export default {
   width: 100%;
   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;
+  }
+}
 .preview_iframe_html {
   width: 100%;
   height: 100%;
@@ -581,7 +881,12 @@ export default {
 .libang_head {
   height: 64px !important;
 }
-
+.has_btn_libang_head{
+  height: 85px!important;
+}
+.has_btn_head{
+  height: 60px!important;
+}
 .drawer-header {
   width: 100%;
   height: 50px;
@@ -602,6 +907,7 @@ justify-content: space-between;
     .header-right {
       display: flex;
     }
+
     .summaryBtn {
       flex: none;
       //width: 95px;
@@ -667,17 +973,25 @@ justify-content: space-between;
       align-items: center;
       justify-content: space-between;
       line-height: 26px;
-      .title_left {
-        white-space: nowrap; /* 确保文本不会换行 */  
-        overflow: hidden; /* 隐藏超出容器的文本 */  
-        text-overflow: ellipsis; /* 当文本超出容器时显示省略号 */  
-        margin-right: 8px;
-      }
+    }
+    .title_left {
+      white-space: nowrap; /* 确保文本不会换行 */
+      overflow: hidden; /* 隐藏超出容器的文本 */
+      text-overflow: ellipsis; /* 当文本超出容器时显示省略号 */
+      margin-right: 8px;
+      text-align: left;
+    }
+    .top-header{
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-bottom: 6px;
     }
     .header_floder {
       display: flex;
       align-items: center;
       line-height: 26px;
+      text-align: left;
       i {
         margin: 0 5px;
         color: #366aff;
@@ -691,7 +1005,9 @@ justify-content: space-between;
     }
   }
 }
-
+.has_btn_libang_content_pre{
+  height: calc(100% - 85px) !important;
+}
 @media screen and (max-width: 767px) {
 
   /* 这里是针对移动设备的css样式设置 */
@@ -703,10 +1019,6 @@ justify-content: space-between;
     overflow: auto;
     height: calc(100% - 50px);
     background: #FFF;
-    background-image: url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif');
-    background-position: center;
-    background-size: 50px;
-    background-repeat: no-repeat;
   }
 
   .libang_content_pre {