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"
                      @load="detailUrlLeftLoad"
                      sandbox="allow-same-origin allow-scripts"
                      id="iframe-left"
                      class="detail-text-iframe" frameborder="0"></iframe>
            </div>
            <JLoading :loading="loadingLeft">{{$t('dataLoading')}}</JLoading>
          </div>
          <div class="detail-content-right">
            <div class="detail-text-top">
              {{$t('translatedText')}}
            </div>
            <div class="detail-text">
              <iframe :src="detailUrlRight" @load="detailUrlrightLoad" class="detail-text-iframe"
                      frameborder="0"></iframe>
            </div>
            <JLoading :loading="loadingRight">{{$t('dataLoading')}}</JLoading>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { Base64 } from 'js-base64'
  import mammoth from 'mammoth'
  import axios from 'axios'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import Vue from 'vue'

  export default {
    name: 'documentTranslationResults',
    data() {
      return {
        detailUrlLeft: '',
        detailUrlRight: '',
        loadingLeft: false,
        loadingRight: false,
        downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
        fileQuery: {}
      }
    },
    mounted() {
      this.fileQuery = this.$route.query
      this.onlinePreview()
    },
    methods: {
      Fallback() {
        this.$router.push({
          path: '/documentTranslation'
        })
      },
      detailUrlLeftLoad() {
        this.loadingLeft = false
      },
      detailUrlrightLoad() {
        this.loadingRight = false
      },
      onlinePreview() {
        let fileName = this.fileQuery.fileName
        let index1 = fileName.lastIndexOf('.')
        let index2 = fileName.length
        let fileSuffix = fileName.substring(index1, index2)
        this.loadingLeft = true
        this.loadingRight = true
        // this.readExcelFromRemoteFileLeft(this.downLoadFileUrl + '/' + this.fileQuery.sourceFileId + fileSuffix)
        // this.readExcelFromRemoteFileRight(this.downLoadFileUrl + '/' + this.fileQuery.targetFileId + fileSuffix)
        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)
      },
      readExcelFromRemoteFileLeft: function(url) {
        var vm = this
        var xhr = new XMLHttpRequest()
        xhr.open('get', url, true)
        xhr.responseType = 'arraybuffer'
        xhr.onload = function() {
          if (xhr.status == 200) {
            mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
              .then(function(resultObject) {
                vm.$nextTick(() => {
                  vm.detailUrlLeft = resultObject.value
                })
              })
          }
        }
        xhr.send()
      },
      readExcelFromRemoteFileRight: function(url) {
        var vm = this
        var xhr = new XMLHttpRequest()
        xhr.open('get', url, true)
        xhr.responseType = 'arraybuffer'
        xhr.onload = function() {
          if (xhr.status == 200) {
            mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
              .then(function(resultObject) {
                vm.$nextTick(() => {
                  vm.detailUrlRight = resultObject.value
                })
              })
          }
        }
        xhr.send()
      }
    }
  }
</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;
    position: relative;
  }

  .detail-content-right {
    position: relative;
    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>