askbot-dragon 1.7.84-beta → 1.7.86-beta

package/src/components/previewPdf.vue

@@ -1,1119 +1,1119 @@
-<!-- preview-pdf
-  组件主要负责 知识项目中 文件的预览，携带定位信息参数 tagIds tagId 的会解析文件增加定位功能
-  不携带定位信息的 也是走 kkview项目预览
-  另外增加了在知识项目中预览当前文件的一些功能
--->
-<template>
-    <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="(isDownload || (isHasChat && fileType != 'IMAGE')) && isLiBang ? 'has_btn_libang_head' : (isLiBang ? 'libang_head' : (isDownload || (isHasChat && fileType != 'IMAGE') ? 'has_btn_head' : ''))"
-            v-if="!isPc">
-            <div class="header_title">
-                <template v-if="isDownload || (isHasChat && fileType != 'IMAGE')">
-                    <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 && fileType != 'IMAGE'">
-                                <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
-                                <span>{{ $t('dragonCommon.smartSummary') }}</span>
-                            </div>
-                            <template v-if="isHasChat && fileType != 'IMAGE'">
-                                <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 : $t('dragonCommon.viewDetails') }}
-                    </span>
-                    <section @click="close">
-                        <i class="iconfont guoran-shanchu"></i>
-                    </section>
-                </div>
-                <p v-if="folderName && isLiBang" class="header_floder" @click="clickFloder">
-                    <i class="iconfont guoran-tongyichicun-wenjianjia-zhankaizhuangtai--folderOpen"></i>
-                    {{ folderName }}
-                    <i v-if="folderUrl" class="iconfont guoran-tongyichicun-dianjichakantuli"></i>
-                </p>
-            </div>
-        </div>
-        <div class="drawer-header" :class="isLiBang && folderName ? 'libang_head' : ''" v-else>
-            <div class="header_title">
-                <div :class="isLiBang && folderName ? 'header_close' : 'header_top'">
-                    <span class="title_left">
-                        {{ title ? title : $t('dragonCommon.viewDetails') }}
-                    </span>
-                    <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 && fileType != 'IMAGE'">
-                            <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
-                            <span>{{ $t('dragonCommon.smartSummary') }}</span>
-                        </div>
-                        <template v-if="isHasChat && fileType != 'IMAGE'">
-                            <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>
-                        <section @click="close">
-                            <i class="iconfont guoran-shanchu"></i>
-                        </section>
-                    </div>
-                </div>
-                <p v-if="folderName && isLiBang" class="header_floder" @click="clickFloder">
-                    <i class="iconfont guoran-tongyichicun-wenjianjia-zhankaizhuangtai--folderOpen"></i>
-                    {{ folderName }}
-                    <i v-if="folderUrl" class="iconfont guoran-tongyichicun-dianjichakantuli"></i>
-                </p>
-            </div>
-        </div>
-        <div id="drawer_content_pre"
-            :class="(isDownload || (isHasChat && fileType != 'IMAGE')) && !isPc && isLiBang && folderName ? 'has_btn_libang_content_pre' : (isLiBang && folderName ? 'libang_content_pre' : '')">
-            <intelligent-summary v-show="showSummary && (isHasChat && fileType != 'IMAGE')" :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 && 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'"
-                :textWatermarkStr="textWatermarkStr"
-                :knowledgeId="knowledgeId" :tagIds="tagIds" :url="previewHref"></new-position-preview>
-            <template v-else>
-                <div v-if="fileType == 'VIDEO'" style="width: 100%;">
-                    <video :src="url" controls width="100%;" height="98%"></video>
-                </div>
-                <div v-else-if="fileType == 'HTML'" style="width: 100%;">
-                    <div class="preview_iframe_html" style="text-align:left" v-html="fileText"></div>
-                </div>
-                <template v-else-if="url.includes('https://www') || url.includes('http://www')">
-                    <iframe class="preview_iframe" :src="url" width="100%" height="100%" scrolling="100%"
-                        frameborder="no" border="0"></iframe>
-                </template>
-                <template v-else>
-                    <iframe class="preview_iframe_kk" :src="previewUrl" @load="load" 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>
-        <div class="loading_img" v-show="loading">
-            <img src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif" alt="">
-        </div>
-        <div id="text">
-            {{ copy }}
-        </div>
-    </el-drawer>
-</template>
-
-<script>
-import pdfPosition from './pdfPosition.vue'
-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() {
-        return {
-            previewShowPopup: false,
-            fileText: '',
-            fileType: "",
-            isPc: false,
-            drawer: false,
-            tagIds: [],
-            // '6454aa1a70573a6ead6f0f7d', '6454aa1a70573a6ead6f0f81',
-            loading: true,
-            previewKnowledgeId: "",
-            showSummary: false,
-            iframeHeight: "100%",
-            isDownload: false,
-            textWatermarkStr: "",
-            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,
-        },
-        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
-        },
-        mainId: {
-            type: String,
-            default: ''
-        },
-        userId: {
-            type: String,
-            default: ''
-        }
-    },
-    components: {
-        NewPositionPreview,
-        IntelligentSummary,
-        pdfPosition
-    },
-    watch: {
-        drawer(value) {
-            if (value) {
-                this.$emit('open')
-                this.$nextTick(() => {
-                    zoomElement(document.getElementById('drawer_content_pre'))
-                })
-            } 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();
-                }
-            }
-        }
-    },
-    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)
-            //     }
-            // }
-            url = url + this.url
-            if (this.sourceFileType == '.ppt' || this.sourceFileType == '.pptx' || this.sourceFileType == '.pdf') {
-                url += '&officePreviewType=pdf'
-            }
-            if(sessionStorage.getItem('wxAuth') ) {
-                let wxAuth = JSON.parse(sessionStorage.getItem('wxAuth'))
-                let mainId = wxAuth.mainId ? wxAuth.mainId : ''
-                let userId = wxAuth.userId ? wxAuth.userId : ''
-                let test = wxAuth.test ? wxAuth.test : ''
-                let corpId = wxAuth.corpId ? wxAuth.corpId : ''
-                url += '&mainId=' + mainId + '&userId=' + userId + '&test=' + test + '&corpId=' + corpId
-            }
-            // 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: {
-        load() {
-            this.loading = false;
-            if(sessionStorage.getItem('wxAuth')){
-                window.postMessage({
-                    type: "wx_bind",
-                    data: JSON.parse(sessionStorage.getItem('wxAuth'))
-                }, '*')
-            } else {
-                window.postMessage({
-                    type: "wx_bind",
-                    data: 'pass'
-                }, '*')
-            }
-        },
-        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)
-            }
-        },
-        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'
-                }
-            }
-            if (res.data.type == 'getViewPage' && res.data.data) {
-                this.numberPage = Number(res.data.data);
-                if (this.pageChunkData.length > 0) {
-                    this.scrollPPTPage(this.pageChunkData[0])
-                }
-            }
-            if (res.data.type == 'getViewerHeight' || res.data.type == 'getViewPage') {
-                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;
-                }
-            })
-        },
-        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",
-                }
-            }).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 {
-                        // 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()
-                    }
-                }
-            })
-        },
-        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'
-                            }
-                        }
-                    } else {
-                        this.newVersion = false;
-                    }
-                }
-            })
-        },
-        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)
-                }
-            }
-        }
-    },
-    beforeDestroy() {
-        window.removeEventListener('message', this.handleIframeMessage);
-    }
-}
-</script>
-
-<style lang="less" scoped>
-#drawer_content_pre {
-    padding: 20px;
-    scroll-behavior: smooth;
-
-    .mobile_onload_btn {
-        position: absolute;
-        right: 0;
-        bottom: 10%;
-        width: 20px;
-        height: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        border-top-left-radius: 10px;
-        border-bottom-left-radius: 10px;
-        color: #366aff;
-        background: #ffffff;
-        border: 1px solid #a1b9ff;
-        font-size: 12px;
-        border-right: none;
-        text-align: center;
-    }
-
-    .pdf_positon {
-        width: 100%;
-        box-sizing: border-box;
-    }
-}
-
-.onload_btn {
-    width: 76px;
-    height: 26px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    margin-right: 10px;
-    border-radius: 15px;
-    color: #366aff;
-    background: #ffffff;
-    border: 1px solid #a1b9ff;
-    box-sizing: border-box;
-}
-
-.preview_iframe {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    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;
-}
-
-.preview_iframe_kk {
-    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%;
-    overflow-y: scroll;
-    text-align: left;
-    box-sizing: border-box;
-    padding: 16px;
-
-    /deep/.lake-content {
-        margin-left: 10px;
-    }
-
-    /deep/a:link {
-        color: #0000ee !important;
-    }
-
-    /deep/a:visited {
-        color: #0000ee !important;
-    }
-
-    /deep/a:hover {
-        color: #0000ee !important;
-    }
-
-    /deep/a:active {
-        color: #0000ee !important;
-    }
-
-    /deep/li:not(.rich-text-li),
-    ol:not(.list-paddingleft-2),
-    ul:not(.list-paddingleft-2) {
-        list-style-type: auto !important;
-    }
-
-    /deep/img {
-        width: 100%;
-    }
-
-    /deep/.ne-table {
-        width: 100% !important;
-    }
-}
-
-.footer {
-    width: calc(100% - 40px);
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    padding: 0 20px;
-    border-bottom: 1px solid #cccccc;
-}
-
-.loading_img {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: #FFF;
-
-    img {
-        width: 50px;
-        height: 50px;
-    }
-}
-
-.libang_head {
-    height: 64px !important;
-}
-
-.has_btn_libang_head {
-    height: 85px !important;
-}
-
-.has_btn_head {
-    height: 60px !important;
-}
-
-.drawer-header {
-    width: 100%;
-    height: 50px;
-    cursor: pointer;
-    padding: 6px 20px;
-    border-bottom: 1px solid #cccccc;
-
-    .btn_position {
-        position: absolute;
-        top: -34px;
-        left: 12px;
-    }
-
-    .header-btn {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .header-right {
-            display: flex;
-        }
-
-        .summaryBtn {
-            flex: none;
-            //width: 95px;
-            height: 26px;
-            padding: 0 8px;
-            background: #ffffff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-            border: 1px solid #a1b9ff;
-            border-radius: 15px;
-            cursor: pointer;
-            color: #366aff;
-            margin-right: 10px;
-            font-size: 14px;
-
-            i {
-                font-size: 14px;
-                margin-right: 5px;
-            }
-        }
-
-        .summaryActiveBtn {
-            background: #366aff !important;
-            color: #ffffff !important;
-        }
-
-        .chat {
-            flex: none;
-            height: 26px;
-            padding: 0 8px;
-            background: #ffffff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-            border: 1px solid #a1b9ff;
-            border-radius: 15px 0px 15px 15px;
-            cursor: pointer;
-            color: #366aff;
-            margin-right: 10px;
-            font-size: 14px;
-
-            i {
-                font-size: 14px;
-                margin-right: 5px;
-                margin-top: 2px;
-            }
-        }
-
-        .chat_active {
-            background: #366aff !important;
-            color: #FFFFFF !important;
-        }
-    }
-
-    .header_title {
-        font-size: 14px;
-        height: 100%;
-
-        .header_close {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            line-height: 26px;
-        }
-
-        .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;
-            }
-        }
-
-        .header_top {
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-    }
-}
-
-.has_btn_libang_content_pre {
-    height: calc(100% - 85px) !important;
-}
-
-@media screen and (max-width: 767px) {
-
-    /* 这里是针对移动设备的css样式设置 */
-    /deep/.el-drawer__body {
-        height: 100%;
-    }
-
-    #drawer_content_pre {
-        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 {
-        height: calc(100% - 64px) !important;
-    }
-}
-
-@media screen and (min-width: 768px) {
-
-    /* 这里是针对pc设备的css样式设置 */
-    /deep/.el-drawer__body {
-        height: 100%;
-    }
-
-    #drawer_content_pre {
-        overflow: auto;
-        height: calc(100% - 50px);
-        background: #FFF;
-    }
-
-    .libang_content_pre {
-        height: calc(100% - 64px) !important;
-    }
-}
-
-@media screen and (min-width: 1200px) {
-
-    /* 这里是针对pc设备的css样式设置 */
-    .el-drawer__wrapper {
-        width: 55%;
-        left: calc(100vw - 55%);
-        right: 0;
-
-        /deep/.pdf-preview-drawer {
-            width: 100% !important;
-        }
-    }
-
-    /deep/.el-drawer__body {
-        height: 100%;
-    }
-
-    #drawer_content_pre {
-        overflow: auto;
-        height: calc(100% - 50px);
-        background: #FFF;
-    }
-
-    .libang_content_pre {
-        height: calc(100% - 64px) !important;
-    }
-}
-</style>
-<style lang="less">
-.pdf-preview-drawer {
-    overflow: visible !important;
-}
-
-.libang_content_pre {
-    .change_scale {
-        top: 64px !important;
-    }
-
-    .float_intelligentSummary {
-        top: 74px !important;
-    }
-}
-</style>
+<!-- preview-pdf
+  组件主要负责 知识项目中 文件的预览，携带定位信息参数 tagIds tagId 的会解析文件增加定位功能
+  不携带定位信息的 也是走 kkview项目预览
+  另外增加了在知识项目中预览当前文件的一些功能
+-->
+<template>
+    <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="(isDownload || (isHasChat && fileType != 'IMAGE')) && isLiBang ? 'has_btn_libang_head' : (isLiBang ? 'libang_head' : (isDownload || (isHasChat && fileType != 'IMAGE') ? 'has_btn_head' : ''))"
+            v-if="!isPc">
+            <div class="header_title">
+                <template v-if="isDownload || (isHasChat && fileType != 'IMAGE')">
+                    <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 && fileType != 'IMAGE'">
+                                <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
+                                <span>{{ $t('dragonCommon.smartSummary') }}</span>
+                            </div>
+                            <template v-if="isHasChat && fileType != 'IMAGE'">
+                                <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 : $t('dragonCommon.viewDetails') }}
+                    </span>
+                    <section @click="close">
+                        <i class="iconfont guoran-shanchu"></i>
+                    </section>
+                </div>
+                <p v-if="folderName && isLiBang" class="header_floder" @click="clickFloder">
+                    <i class="iconfont guoran-tongyichicun-wenjianjia-zhankaizhuangtai--folderOpen"></i>
+                    {{ folderName }}
+                    <i v-if="folderUrl" class="iconfont guoran-tongyichicun-dianjichakantuli"></i>
+                </p>
+            </div>
+        </div>
+        <div class="drawer-header" :class="isLiBang && folderName ? 'libang_head' : ''" v-else>
+            <div class="header_title">
+                <div :class="isLiBang && folderName ? 'header_close' : 'header_top'">
+                    <span class="title_left">
+                        {{ title ? title : $t('dragonCommon.viewDetails') }}
+                    </span>
+                    <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 && fileType != 'IMAGE'">
+                            <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
+                            <span>{{ $t('dragonCommon.smartSummary') }}</span>
+                        </div>
+                        <template v-if="isHasChat && fileType != 'IMAGE'">
+                            <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>
+                        <section @click="close">
+                            <i class="iconfont guoran-shanchu"></i>
+                        </section>
+                    </div>
+                </div>
+                <p v-if="folderName && isLiBang" class="header_floder" @click="clickFloder">
+                    <i class="iconfont guoran-tongyichicun-wenjianjia-zhankaizhuangtai--folderOpen"></i>
+                    {{ folderName }}
+                    <i v-if="folderUrl" class="iconfont guoran-tongyichicun-dianjichakantuli"></i>
+                </p>
+            </div>
+        </div>
+        <div id="drawer_content_pre"
+            :class="(isDownload || (isHasChat && fileType != 'IMAGE')) && !isPc && isLiBang && folderName ? 'has_btn_libang_content_pre' : (isLiBang && folderName ? 'libang_content_pre' : '')">
+            <intelligent-summary v-show="showSummary && (isHasChat && fileType != 'IMAGE')" :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 && 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'"
+                :textWatermarkStr="textWatermarkStr"
+                :knowledgeId="knowledgeId" :tagIds="tagIds" :url="previewHref":textWatermarkStr="textWatermarkStr"></new-position-preview>
+            <template v-else>
+                <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%;">
+                    <div class="preview_iframe_html" style="text-align:left" v-html="fileText"></div>
+                </div>
+                <template v-else-if="url.includes('https://www') || url.includes('http://www')">
+                    <iframe class="preview_iframe" :src="url" width="100%" height="100%" scrolling="100%"
+                        frameborder="no" border="0"></iframe>
+                </template>
+                <template v-else>
+                    <iframe class="preview_iframe_kk" :src="previewUrl" @load="load" 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>
+        <div class="loading_img" v-show="loading">
+            <img src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif" alt="">
+        </div>
+        <div id="text">
+            {{ copy }}
+        </div>
+    </el-drawer>
+</template>
+
+<script>
+import pdfPosition from './pdfPosition.vue'
+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() {
+    return {
+      previewShowPopup: false,
+      fileText: '',
+      fileType: "",
+      isPc: false,
+      drawer: false,
+      tagIds: [],
+      // '6454aa1a70573a6ead6f0f7d', '6454aa1a70573a6ead6f0f81',
+      loading: true,
+      fileName: '',
+      previewKnowledgeId: "",
+      showSummary: false,
+      iframeHeight: "100%",
+      isDownload: false,
+      textWatermarkStr: "",
+      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,
+      },
+      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
+      },
+      mainId: {
+          type: String,
+          default: ''
+      },
+      userId: {
+          type: String,
+          default: ''
+      }
+    },
+    components: {
+        NewPositionPreview,
+        IntelligentSummary,
+        pdfPosition
+    },
+  watch: {
+    drawer (value) {
+      if (value) {
+        this.$emit('open')
+        this.$nextTick(() => {
+          zoomElement(document.getElementById('drawer_content_pre'))
+        })
+      } 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();
+        }
+      }
+    }
+  },
+  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)
+        //     }
+        // }
+        url = url + this.url
+        if (this.sourceFileType == '.ppt' || this.sourceFileType == '.pptx' || this.sourceFileType == '.pdf') {
+            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
+            }
+            let mainId = sessionStorage.getItem('_mainId')
+            let userId = sessionStorage.getItem('_currentUserId')
+            let test = process.env.VUE_APP_ENV === 'production'
+            url += '&mainId=' + mainId+ '&userId=' + userId + '&test=' + test
+            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: {
+        load() {
+            this.loading = false;
+            if(sessionStorage.getItem('wxAuth')){
+                window.postMessage({
+                    type: "wx_bind",
+                    data: JSON.parse(sessionStorage.getItem('wxAuth'))
+                }, '*')
+            } else {
+                window.postMessage({
+                    type: "wx_bind",
+                    data: 'pass'
+                }, '*')
+            }
+        },
+        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)
+            }
+        },
+        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'
+                }
+            }
+            if (res.data.type == 'getViewPage' && res.data.data) {
+                this.numberPage = Number(res.data.data);
+                if (this.pageChunkData.length > 0) {
+                    this.scrollPPTPage(this.pageChunkData[0])
+                }
+            }
+            if (res.data.type == 'getViewerHeight' || res.data.type == 'getViewPage') {
+                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;
+                }
+            })
+        },
+        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",
+                }
+            }).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 {
+                        // 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()
+                    }
+                }
+            })
+        },
+        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'
+                            }
+                        }
+                    } else {
+                        this.newVersion = false;
+                    }
+                }
+            })
+        },
+        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)
+                }
+            }
+        }
+    },
+    beforeDestroy() {
+      window.removeEventListener('message', this.handleIframeMessage);
+    }
+}
+</script>
+
+<style lang="less" scoped>
+#drawer_content_pre {
+    padding: 20px;
+    scroll-behavior: smooth;
+
+    .mobile_onload_btn {
+        position: absolute;
+        right: 0;
+        bottom: 10%;
+        width: 20px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+        color: #366aff;
+        background: #ffffff;
+        border: 1px solid #a1b9ff;
+        font-size: 12px;
+        border-right: none;
+        text-align: center;
+    }
+
+    .pdf_positon {
+        width: 100%;
+        box-sizing: border-box;
+    }
+}
+
+.onload_btn {
+    width: 76px;
+    height: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin-right: 10px;
+    border-radius: 15px;
+    color: #366aff;
+    background: #ffffff;
+    border: 1px solid #a1b9ff;
+    box-sizing: border-box;
+}
+
+.preview_iframe {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    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;
+}
+
+.preview_iframe_kk {
+    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%;
+    overflow-y: scroll;
+    text-align: left;
+    box-sizing: border-box;
+    padding: 16px;
+
+    /deep/.lake-content {
+        margin-left: 10px;
+    }
+
+    /deep/a:link {
+        color: #0000ee !important;
+    }
+
+    /deep/a:visited {
+        color: #0000ee !important;
+    }
+
+    /deep/a:hover {
+        color: #0000ee !important;
+    }
+
+    /deep/a:active {
+        color: #0000ee !important;
+    }
+
+    /deep/li:not(.rich-text-li),
+    ol:not(.list-paddingleft-2),
+    ul:not(.list-paddingleft-2) {
+        list-style-type: auto !important;
+    }
+
+    /deep/img {
+        width: 100%;
+    }
+
+    /deep/.ne-table {
+        width: 100% !important;
+    }
+}
+
+.footer {
+    width: calc(100% - 40px);
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    padding: 0 20px;
+    border-bottom: 1px solid #cccccc;
+}
+
+.loading_img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #FFF;
+
+    img {
+        width: 50px;
+        height: 50px;
+    }
+}
+
+.libang_head {
+    height: 64px !important;
+}
+
+.has_btn_libang_head {
+    height: 85px !important;
+}
+
+.has_btn_head {
+    height: 60px !important;
+}
+
+.drawer-header {
+    width: 100%;
+    height: 50px;
+    cursor: pointer;
+    padding: 6px 20px;
+    border-bottom: 1px solid #cccccc;
+
+    .btn_position {
+        position: absolute;
+        top: -34px;
+        left: 12px;
+    }
+
+    .header-btn {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+    .header-right {
+      display: flex;
+    }
+
+    .summaryBtn {
+      flex: none;
+      //width: 95px;
+      height: 26px;
+      padding: 0 8px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border: 1px solid #a1b9ff;
+      border-radius: 15px;
+      cursor: pointer;
+      color: #366aff;
+      margin-right: 10px;
+      font-size: 14px;
+
+            i {
+                font-size: 14px;
+                margin-right: 5px;
+            }
+        }
+
+        .summaryActiveBtn {
+            background: #366aff !important;
+            color: #ffffff !important;
+        }
+
+        .chat {
+            flex: none;
+            height: 26px;
+            padding: 0 8px;
+            background: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            border: 1px solid #a1b9ff;
+            border-radius: 15px 0px 15px 15px;
+            cursor: pointer;
+            color: #366aff;
+            margin-right: 10px;
+            font-size: 14px;
+
+            i {
+                font-size: 14px;
+                margin-right: 5px;
+                margin-top: 2px;
+            }
+        }
+
+        .chat_active {
+            background: #366aff !important;
+            color: #FFFFFF !important;
+        }
+    }
+
+    .header_title {
+        font-size: 14px;
+        height: 100%;
+
+        .header_close {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            line-height: 26px;
+        }
+
+        .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;
+            }
+        }
+
+        .header_top {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+    }
+}
+
+.has_btn_libang_content_pre {
+    height: calc(100% - 85px) !important;
+}
+
+@media screen and (max-width: 767px) {
+
+    /* 这里是针对移动设备的css样式设置 */
+    /deep/.el-drawer__body {
+        height: 100%;
+    }
+
+  #drawer_content_pre {
+    overflow: auto;
+    height: calc(100% - 50px);
+    background: #FFF;
+  }
+
+    .libang_content_pre {
+        height: calc(100% - 64px) !important;
+    }
+}
+
+@media screen and (min-width: 768px) {
+
+    /* 这里是针对pc设备的css样式设置 */
+    /deep/.el-drawer__body {
+        height: 100%;
+    }
+
+    #drawer_content_pre {
+        overflow: auto;
+        height: calc(100% - 50px);
+        background: #FFF;
+    }
+
+    .libang_content_pre {
+        height: calc(100% - 64px) !important;
+    }
+}
+
+@media screen and (min-width: 1200px) {
+
+    /* 这里是针对pc设备的css样式设置 */
+    .el-drawer__wrapper {
+        width: 55%;
+        left: calc(100vw - 55%);
+        right: 0;
+
+        /deep/.pdf-preview-drawer {
+            width: 100% !important;
+        }
+    }
+
+    /deep/.el-drawer__body {
+        height: 100%;
+    }
+
+    #drawer_content_pre {
+        overflow: auto;
+        height: calc(100% - 50px);
+        background: #FFF;
+    }
+
+    .libang_content_pre {
+        height: calc(100% - 64px) !important;
+    }
+}
+</style>
+<style lang="less">
+.pdf-preview-drawer {
+    overflow: visible !important;
+}
+
+.libang_content_pre {
+    .change_scale {
+        top: 64px !important;
+    }
+
+    .float_intelligentSummary {
+        top: 74px !important;
+    }
+}
+</style>