GCLS_Page_TC/src/views/Textanalysis/CheckArticle.vue

<template>
  <div v-loading="loading" class="check-article">
    <HeaderPage />
    <div class="main">
      <div class="main-top">
        <a class="go-back" @click="$router.go(-1)">
            <i class="el-icon-arrow-left"></i>
            返回
        </a>
        <b>校对</b>
        <div class="btn-box">
            <el-button @click="checkPinyin">校对拼音</el-button>
            <el-button type="primary" @click="checkWord">校对分词</el-button>
        </div>
      </div>
      <div class="paragraph" v-for="(item, index) in indexArr" :key="index + 'paragraph'" >
        <label>段 {{index+1}}</label>
        <div class="sentence-box" v-for="(items, indexs) in item" :key="indexs + 'words'">
            <div class="sentence" v-for="(itemss, indexss) in items" :key="indexss + 'words'">
                <b>{{itemss.index}}.</b>
                <div class="sentence" v-html="itemss.text">
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderPage from '@/components/Header.vue';
import { publicMethods } from '@/api/api';

export default {
  components: {
    HeaderPage,
  },
  data() {
    return {
      loading: false,
      id: '',
      ArticelData: null,
      indexArr: [], // 索引数组
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.routerData = JSON.parse(JSON.stringify(this.$route.query));
    this.id = this.routerData.id
    this.getArticleData()
  },
  methods: {
    // 获取分析结果
    getArticleData() {
      this.loading = true;
      publicMethods('/TeachingServer/TextAnalyser/GetParsedTextInfo',{
          analyse_record_id: this.id,
        }
      )
        .then((res) => {
            if(res.status===1){
                let newdata = [];
                res.parsed_text.paragraph_list.forEach((item) => {
                    if (item.length !== 0) {
                        newdata.push(item);
                    }
                });
                this.ArticelData = newdata;
                let arr = []
                let indexS = 0;
                // 添加索引
                this.ArticelData.forEach((item,index) => {
                    arr.push([])
                    item.forEach((items,indexs) => {
                        arr[index].push([])
                        indexS += 1;
                        let str = ''
                        items.forEach((itemss,indexss)=>{
                            itemss.text.forEach(itemT=>{
                                str += itemT.word
                            })
                            if(indexss!==items.length-1) str+='&nbsp;&nbsp;'
                        })
                        let obj = {
                            text: str,
                            index: JSON.parse(JSON.stringify(indexS))
                        }
                        arr[index][indexs].push(obj)
                    });
                });
                this.indexArr = arr
                this.loading = false;
            }
          
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 校对拼音
    checkPinyin(){
        this.$router.push({
            path: "/textanalysis/checkPinyin",
            query: {
                id: this.id
            },
        });
    },
    // 校对分词
    checkWord(){
        this.$router.push({
            path: "/textanalysis/checkWord",
            query: {
                id: this.id
            },
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.check-article {
  min-height: 100%;
  background: #f6f6f6;

  .wheader {
    background: #fff;
  }

  .main {
    width: 1200px;
    margin: 23px auto;
    background: #FFF;
    padding: 24px;
    &-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        position: relative;
        b{
            color: #000;
            font-size: 24px;
            font-weight: 500;
            line-height: 34px;
            position: absolute;
            width: 600px;
            text-align: center;
            top: 0;
            left: 50%;
            margin-left: -300px;
        }
        .el-button{
            padding: 5px 16px;
            border-radius: 2px;
            border: 1px solid #165DFF;
            color: #165DFF;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            &.el-button--primary{
                background: #165DFF;
                color: #FFF;
            }
        }
    }
    .go-back{
        border-radius: 4px;
        border: 1px solid #D9D9D9;
        background: #FFF;
        box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
        display: flex;
        width: 60px;
        color: #333;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        padding: 5px 8px;
        align-items: center;
        cursor: pointer;
        .el-icon-arrow-left{
            font-size: 16px;
            margin-right: 8px;
        }
    }
    .paragraph{
        margin-bottom: 8px;
        text-align: center;
        >label{
            border-radius: 2px;
            border: 1px solid #175DFF;
            background: #E7EEFF;
            padding: 1px 8px;
            color: var(--blue-05, #175DFF);
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
        }
        .sentence-box{
            .sentence{
                display: flex;
                margin-top: 8px;
                b{
                    width: 32px;
                    line-height: 24px;
                    flex-shrink: 0;
                    color: #000;
                    font-size: 16px;
                    font-weight: 400;
                    margin-top: 16px;
                }
                .sentence{
                    flex: 1;
                    padding: 8px;
                    background: #F7F7F7;
                    color: #000;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 24px;
                    text-align: left;
                }
            }
        }
    }
  }
}
</style>