laws_weilai/jero-web/src/views/documentTools/documentTranslation/components/documentTranslationResults.vue

<template>
  <div class="doc-detail">
    <div class="doc-detail-wrap">
      <div class="doc-detail-header" style="position: fixed;top: 0">
        <div class="doc-detail-title">
             <span style="line-height: 66px;display: inline-block;float: left" @click="Fallback">
               <a-icon type="arrow-left" style="margin-right: 6px;"/>
             </span>
          <span> {{$t('DocumentTranslation')}}</span>
        </div>
      </div>
      <div style="padding-top: 68px;background: #fff">
        <div class="detail-content">
          <div class="detail-content-left">
            <div class="detail-text-top">
              {{$t('originalText')}}
            </div>
            <div class="detail-text">
              <iframe :src="detailUrlLeft"
                      ref="iframeLeft"
                      sandbox="allow-same-origin allow-scripts"
                      id="iframe-left"
                      class="detail-text-iframe" frameborder="0"></iframe>
            </div>
          </div>
          <div class="detail-content-right">
            <div class="detail-text-top">
              {{$t('translatedText')}}
            </div>
            <div class="detail-text">
              <iframe :src="detailUrlRight" class="detail-text-iframe" frameborder="0"></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { Base64 } from 'js-base64'

  export default {
    name: 'documentTranslationResults',
    data() {
      return {
        detailUrlLeft: '',
        detailUrlRight: '',
        downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
        fileQuery: {}
      }
    },
    mounted() {
      this.fileQuery = this.$route.query
      this.onlinePreview()
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.iframeLeft.contentWindow.document.body.style = 'background-color:#fff'
          console.log(this.$refs.iframeLeft.contentWindow.document.body.style.backgroundColor)
        })
      }, 2000)

    },
    methods: {
      Fallback() {
        this.$router.push({
          path: '/documentTranslation'
        })
      },
      onlinePreview() {
        let fileName = this.fileQuery.fileName
        let index1 = fileName.lastIndexOf('.')
        let index2 = fileName.length
        let fileSuffix = fileName.substring(index1, index2)
        this.detailUrlLeft = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + this.fileQuery.sourceFileId + fileSuffix)
        this.detailUrlRight = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + this.fileQuery.targetFileId + fileSuffix)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@assets/less/common.less';

  .doc-detail {
    background: #fff;
    height: 100%;

    .doc-detail-wrap {
      .doc-detail-header {
        width: 100%;
        z-index: 1000;
        height: 68px;
        line-height: 68px;
        padding: 0 0 0 32px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-bottom: 2px #eff1f3 solid;
        background: #fff;

        .doc-detail-title {
          display: inline-block;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 20px;
          font-weight: 400;
          color: #040B29;
          line-height: 68px;
        }
      }
    }
  }

  .detail-content {
    padding: 32px;
    box-sizing: border-box;
  }

  .detail-content-left {
    width: calc(50% - 12px);
    height: calc(100vh - 130px);
    float: left;
    border: 1px solid #CED0D8;
    padding: 24px 32px;
    box-sizing: border-box;
    overflow: auto;
  }

  .detail-content-right {
    float: left;
    width: calc(50% - 12px);
    padding: 24px 32px;
    margin-left: 24px;
    height: calc(100vh - 130px);
    box-sizing: border-box;
    border: 1px solid #CED0D8;
    overflow: auto;
  }

  .detail-text-top {
    height: 30px;
    font-size: 18px;
    font-weight: 400;
    color: #040B29;
    margin-bottom: 20px;
  }

  .detail-text {
    font-size: 14px;
    font-weight: 400;
    color: #040B29;
    height: calc(100vh - 230px);
  }

  .page {
    text-align: right;
    margin-top: 20px;
  }

  .detail-text-iframe {
    width: 100%;
    height: 100%;
    border-width: 0px;
  }
</style>
<style>
  .detail-text-iframe .container {
    display: none !important;
  }
</style>