RuoYi-Cloud/ruoyi-ui/src/views/business/openapi/translation/index.vue

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" v-loading="loading1">
        <div class="grid-content bg-purple" style="height: 180px">
          <!--          文案内容区域-->
          <!--          内容-->
          <div class="content_div">
            {{ responseCopyWriting.content }}
          </div>
          <!--          来源-->
          <div class="source_div">
            {{ responseCopyWriting.source }}
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <!--        翻译区域-->
        <div class="grid-content bg-purple">
          <el-row :gutter="15">
            <el-form ref="translation" :model="translationData" :rules="translationRules" size="medium"
                     label-width="100px" label-position="top">
              <el-col :span="12">
                <el-form-item label="翻译平台" prop="translationType">
                  <el-select
                    v-model="translationData.translationType"
                    placeholder="翻译平台"
                    clearable
                    size="small"
                    style="width: 150px">
                    <el-option
                      v-for="dict in dict.type.translation_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="翻译区域" prop="q">
                  <el-input v-model="translationData.q" type="textarea" placeholder="请输入翻译内容" show-word-limit
                            :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item size="large">
                  <el-button type="primary" @click="submitForm">提交</el-button>
                  <el-button @click="resetForm">重置</el-button>
                  <el-button type="info" icon="el-icon-check" @click="getCopyWriting" circle></el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <!--        翻译结果显示区域-->
        <div class="grid-content bg-purple ">
          <div class="spans" v-loading="loading2">
            {{ responseTranslation }}
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="0">
      <el-col :span="24" v-loading="loading3"></el-col>
      <div class="aword">
        <div class="div1">
          <el-image
            style="width: 120px; height: 148px"
            :src=apiAWord.imgurl
            :preview-src-list=[apiAWord.imgurl]
          >
          </el-image>
        </div>

        <div class="div2 div23">
          <audio :src=apiAWord.tts controls="controls">
            您的浏览器不支持 audio 标签。
          </audio>
        </div>

        <div class="div3 div23 div34" style="margin-left: 0px">
          <p>
            {{apiAWord.content}}
          </p>
        </div>

        <div class="div4 div34">
          <p>
            {{apiAWord.note}}
          </p>
        </div>
      </div>

    </el-row>


  </div>
</template>

<script>
import {translation, getCopyWriting} from "@/api/business/openapi/translation";

import {getApiAWord} from "@/api/business/openapi/aword";
import Aword from "@/views/business/openapi/aword";

export default {
  components: {Aword},
  dicts: ['translation_type'],
  name: "Translation",
  data() {
    return {
      // 遮罩层
      loading1: true,
      loading2: false,
      loading3: false,

      //响应数据
      apiAWord: {},

      //apiAWord请求参数
      apiAWordParams: {
        rand: 1
      },

      //翻译响应数据
      responseTranslation: '',

      translationData: {
        translationType: '',
        q: '',
      },

      //文案参数
      copyWriting: [],

      //文案响应数据
      responseCopyWriting: {},

      translationRules: {
        translationType: [{
          required: true,
          message: '翻译平台不能为空',
          trigger: 'change'
        }],
        q: [
          {
            required: true,
            message: '请输入翻译内容',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 120,
            message: '长度在 1 到 120 个字符',
            trigger: 'blur'
          }
        ],
      },



    }
  },
  created() {
    this.getCopyWriting()
    this.getApiAWord()



    //下拉框默认选中
  },

  watch: {
    'dict.type.translation_type'(newVal) {
      if (newVal[0]) {
        this.translationData.translationType= newVal[0].value
      }
    }
  },
  methods: {
    //随机获取一条每日一句
    getApiAWord() {
      getApiAWord(this.apiAWordParams).then(res => {
        this.apiAWord = res.data
      })
    },

    //获取文案
    getCopyWriting() {
      this.loading1 = true;
      getCopyWriting(this.copyWriting).then(res => {
        this.responseCopyWriting = res.data
        this.loading1 = false;
      })
    },

    submitForm() {
      this.$refs['translation'].validate(valid => {
        if (valid) {
          this.loading2 = true;
          translation(this.translationData).then(res => {
            let result = res.data.transResult
            let results = ''
            result.forEach(r => {
              results = results + '  ' + r.dst;
            })
            this.responseTranslation = results
            this.loading2 = false;
          })
        }

      })
    },
    resetForm() {
      this.$refs['translation'].resetFields()
    },
  },
};
</script>

<style scoped>
.aword div {
  float: left;
  width: 24%;
  height: 100%;
}

.aword .div1 {
  padding-left: 110px;
}
.aword .div2 {
  padding: 50px 0px;
}

.aword .div23{
  margin: 0 18px;
}

.aword .div34{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.aword {
  box-shadow: 0 0 9px 3px #999;
  font-style: italic;
  height: 200px;
  font-family: Georgia;
  border-radius: 4px;
  margin-top: 20px;

  padding: 25px;
  min-height: 36px;

}

.bg-purple {
  box-shadow: 0 0 9px 3px #999;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 360px;
  margin-top: 15px;
  padding: 25px;
}

.spans {
  margin: 25px;
  margin-top: 5px;
  padding: 30px;
  font-family: Georgia;
  font-size: 20px;
  height: 300px;
  box-shadow: 0 0 9px 3px #999;
  font-style: italic;
}

.content_div {
  float: left;
  width: 75%;
  text-shadow: 2px 2px 2px grey;
}

.source_div {
  float: left;
  padding-top: 100px;
  width: 25%;
  text-shadow: 2px 2px 2px grey;
  text-align: right
}

</style>