askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/previewPdf.vue

@@ -1,757 +1,1106 @@
-
-<!-- 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">
-    <!-- v-else-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 || true" @click="downLoad">
-          下载
-        </div>
-        <div class="summaryBtn" :class="showSummary ? 'summaryActiveBtn' : ''" @click="summaryFun"
-          v-if="isHasChat || true">
-          <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
-          <span>智能摘要</span>
-        </div>
-        <template v-if="isHasChat || true">
-          <div class="chat" @click="previewToDialog(true)" v-if="!previewKnowledgeId">
-            <i class="iconfont guoran-wendapingjia"></i>
-            聊一聊
-          </div>
-          <div class="chat chat_active" @click="previewToDialog(false)" v-else>
-            <i class="iconfont guoran-wendapingjia"></i>
-            聊一聊
-          </div>
-        </template>
-      </div>
-      <div class="header_title">
-        <div class="header_close">
-          <span>
-            {{ title ? title : "查看详情" }}
-          </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>
-            {{ title ? title : "查看详情" }}
-          </span>
-          <div class="header-btn">
-            <div class="onload_btn" v-if="isDownload || true" @click="downLoad">
-              下载
-            </div>
-            <div class="summaryBtn" :class="showSummary ? 'summaryActiveBtn' : ''" @click="summaryFun"
-              v-if="isHasChat || true">
-              <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
-              <span>智能摘要</span>
-            </div>
-            <template v-if="isHasChat || true">
-              <div class="chat" @click="previewToDialog(true)" v-if="!previewKnowledgeId">
-                <i class="iconfont guoran-wendapingjia"></i>
-                聊一聊
-              </div>
-              <div class="chat chat_active" @click="previewToDialog(false)" v-else>
-                <i class="iconfont guoran-wendapingjia"></i>
-                聊一聊
-              </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="isLiBang && folderName ? 'libang_content_pre' : ''">
-      <!-- :style="{marginTop:tagIds && tagIds.length != 0 && isPc ? '50px' : ''}" -->
-      <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">
-        <pdfPosition :tagIds="tagIds" :isMessageRecord="isMessageRecord" :textWatermarkStr="textWatermarkStr">
-        </pdfPosition>
-      </div>
-      <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-algin: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" style="border:none;"
-            :style="{ height: iframeHeight }"></iframe>
-        </template>
-      </template>
-      <!-- <div class="mobile_onload_btn" v-if="isDownload && !isPc" @click="downLoad">
-        下载
-      </div> -->
-    </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>
-  </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';
-export default {
-  data () {
-    return {
-          previewShowPopup: false,
-          fileText: '',
-          fileType: "",
-          isPc: false,
-          drawer: false,
-          tagIds: [],
-          // '6454aa1a70573a6ead6f0f7d', '6454aa1a70573a6ead6f0f81',
-          loading: true,
-          fileName:'',
-          previewKnowledgeId:"",
-          showSummary:true,
-          iframeHeight:"100%",
-          isDownload: false,
-          textWatermarkStr:""
-        }
-    },
-    mounted() {
-      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
-    }
-  },
-  components: {
-    IntelligentSummary,
-    pdfPosition
-  },
-  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'
-            }
-          })
-        })
-      },
-      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
-            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
-      }
-      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'
-          }
-        }
-        // 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) {
-      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'
-        }
-      }
-    },
-    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 (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 || res.bodyText);
-            } else {
-              let a = document.createElement('a')
-              a.href = res.data|| res.bodyText
-              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')
-    }
-  },
-  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%;
-}
-
-
-.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;
-}
-
-.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;
-    }
-    .header_floder {
-      display: flex;
-      align-items: center;
-      line-height: 26px;
-      i {
-        margin: 0 5px;
-        color: #366aff;
-      }
-    }
-    .header_top {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-  }
-}
-
-@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>
+
+<!-- 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="!isPc ? 'btt' : 'rtl'" :size="!isPc ? '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' && newFileType !== 'PPTX' && newFileType !== 'IMAGE'">
+        <pdfPosition :tagIds="tagIds" :isMessageRecord="isMessageRecord" :textWatermarkStr="textWatermarkStr">
+        </pdfPosition>
+      </div>
+      <new-position-preview
+          ref="newPositionPreview"
+          v-else-if="tagIds && tagIds.length!= 0 && newVersion && newFileType !== 'PPT' && newFileType !== 'PPTX' && newFileType !== 'IMAGE'"
+          :knowledgeId="knowledgeId"
+          :tagIds="tagIds"
+          :url="previewHref"
+          :textWatermarkStr="textWatermarkStr"
+          :previewOssPath="previewOssPath"
+          :isLining="isLining"
+      ></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" style="border:none;"
+            :style="{ height: iframeHeight }"></iframe>
+          <template v-if="!loading && ((newFileType === 'PPT' || newFileType === 'PPTX') && pageChunkData.length > 1)">
+            <div class="btn_footer" v-if="!isPc">
+              <div class="prev" @click="prev">{{$t('dragonCommon.previous')}}</div>
+              <div class="next" @click="next">{{$t('dragonCommon.next')}}</div>
+            </div>
+            <div id="pagination" v-if="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">{{$t('dragonCommon.answersGeneratedByPre')}} {{ pageChunkData.length }} {{$t('dragonCommon.answersGeneratedByAfter')}}</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
+    },
+    isLining:{
+      type: Boolean,
+      default: false
+    },
+    processEnvUrl:{
+      type: String,
+      default: ''
+    },
+    isProduction:{
+      type: Boolean,
+      default: false
+    }
+  },
+  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 () {
+        let url = ""
+        if (process.env.VUE_APP_ENV == 'production'){
+          url = "https://kkfileview.askbot.cn/onlinePreview?url="
+        } else {
+          url = "https://test.open.askbot.cn/kkfileview/onlinePreview?url="
+        }
+        if (this.processEnvUrl){
+          url = this.processEnvUrl
+        }
+        if(process.env.VUE_APP_SOURCE == 'lining_test') {
+            url = 'https://wxgw.lining.com/askbot/kkfileview/onlinePreview?url='
+        }
+        console.debug('VUE_APP_ENV', process.env.VUE_APP_ENV,process.env.VUE_APP_SOURCE,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'
+      }
+      console.log('textWatermarkStr 216', this.textWatermarkStr)
+      if (this.textWatermarkStr) {
+        url += '&textWatermarkValue=' + this.textWatermarkStr
+      }
+      if (this.isLining){
+        url += '&isLining=true'
+      }
+      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.newFileType !== 'PPT' && this.newFileType !== 'PPTX' && this.newFileType !== 'IMAGE')) {
+        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 {
+        let documentWidth = document.documentElement.clientWidth;
+        if(documentWidth < 750) {
+            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;
+      console.log('type',type)
+      if (type === 'VIDEO' || type === 'PDF' || type === 'EXCEL' || type === 'TXT' || type === 'DOC' || type === 'MD') {
+        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 if (fileType === '.md'){
+        return 'MD'
+      } 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.newFileType !== 'PPTX' && this.newFileType !== 'IMAGE'){
+              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>
+@import "../assets/less/variables.less";
+
+#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: @font-primary-accent-color;
+    background: @background-color-light;
+    border: 1px solid @border-color-copy;
+    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: @font-primary-accent-color;
+  background: @background-color-light;
+  border: 1px solid @border-color-copy;
+  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: @background-color-light;
+
+  .prev,
+  .next {
+    width: 35%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50px;
+    cursor: pointer;
+  }
+
+  .prev {
+    background: @background-color-prev;
+    color: @font-primary-color;
+  }
+
+  .next {
+    background: @primary-color;
+    color: @font-primary-light-color;
+  }
+}
+#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: @background-color-light;
+  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: @background-color-pagination;
+    border-radius: 15px;
+  }
+
+  /deep/.el-pagination.is-background .btn-next {
+    width: 30px;
+    height: 30px;
+    background: @background-color-pagination;
+    border-radius: 50%;
+  }
+
+  /deep/.el-pagination .btn-next {
+    width: 30px;
+    height: 30px;
+    background: @background-color-pagination;
+    border-radius: 50%;
+    padding-left: 0;
+    margin-left: 5px;
+  }
+
+  /deep/.el-pagination .btn-prev {
+    width: 30px;
+    height: 30px;
+    background: @background-color-pagination;
+    border-radius: 50%;
+    padding-right: 0;
+    margin-right: 5px;
+  }
+
+  /deep/.el-pagination button {
+    padding: 0;
+    min-width: 30px;
+  }
+
+  /deep/.el-pager li {
+    background: @background-color-pagination;
+    height: 30px;
+    min-width: 30px;
+    line-height: 30px;
+    font-size: 12px;
+    color: @font-pagination-color;
+  }
+
+  /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: @primary-color;
+    border: 3px solid @border-color-copy;
+    border-radius: 50%;
+    line-height: 24px;
+    color: @font-primary-light-color;
+  }
+
+  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+    background: @primary-color;
+  }
+}
+.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 @border-color-r5;
+}
+
+.loading_img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: @background-color-light;
+
+  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 @border-color-r5;
+  .btn_position {
+    position: absolute;
+    top: -34px;
+    left: 12px;
+  }
+
+  .header-btn {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: none;
+    .header-right {
+      display: flex;
+    }
+    .summaryBtn {
+      flex: none;
+      //width: 95px;
+      height: 26px;
+      padding: 0 8px;
+      background: @background-color-light;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border: 1px solid @border-color-copy;
+      border-radius: 15px;
+      cursor: pointer;
+      color: @font-primary-accent-color;
+      margin-right: 10px;
+      font-size: 14px;
+
+      i {
+        font-size: 14px;
+        margin-right: 5px;
+      }
+    }
+
+    .summaryActiveBtn {
+      background: @primary-color !important;
+      color: @font-primary-light-color !important;
+    }
+
+    .chat {
+      flex: none;
+      height: 26px;
+      padding: 0 8px;
+      background: @background-color-light;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border: 1px solid @border-color-copy;
+      border-radius: 15px 0px 15px 15px;
+      cursor: pointer;
+      color: @font-primary-accent-color;
+      margin-right: 10px;
+      font-size: 14px;
+
+      i {
+        font-size: 14px;
+        margin-right: 5px;
+        margin-top: 2px;
+      }
+    }
+
+    .chat_active {
+      background: @primary-color !important;
+      color: @font-primary-light-color !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: @font-primary-accent-color;
+      }
+    }
+    .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: @background-color-light;
+    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: @background-color-light;
+  }
+
+  .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: @background-color-light;
+  }
+
+  .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>