GCLS_Page_TC/src/views/teacher-dev/TextAnalysis.vue

<template>
  <div v-loading="loading" class="TextAnalysis">
    <HeaderPage />
    <div class="main">
      <div class="title">文本分析</div>
      <div class="input_main">
        <el-input v-model="txt" type="textarea" placeholder="请输入文本" :autosize="{ minRows: 9 }" />
        <div class="text_btn">
          <span class="left">{{ txt.length }}/1000</span>
          <span class="btn" @click="submit">分析</span>
        </div>
      </div>
      <div v-if="data" class="list_main">
        <div class="title">
          <span style="margin-right: 16px">分析记录：</span>
          <span>{{ data.total }}/20</span>
        </div>
        <div class="list">
          <div v-for="(item, i) in data.list" :key="i + 'one'">
            <div class="number">{{ item.number }}</div>
            <div class="txt" @click="goresult(item)">
              {{ item.firstSentence }}
            </div>
            <div class="time">{{ item.createDate }}</div>
            <div v-if="item.analysisStatus == 3" class="cxjx" @click="anewSubmit(item)">重新解析</div>
            <el-popconfirm title="确定删除这一条记录吗？" @confirm="deleteOne(item.id, i)">
              <img slot="reference" src="../../assets/teacherdev/delete-one.png" alt="" />
            </el-popconfirm>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderPage from '@/components/Header';
import { postapi } from '@/api/api';
import { getToken } from '@/utils/auth';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    HeaderPage,
  },
  props: {},
  data() {
    // 这里存放数据
    return {
      txt: '',
      loading: false,
      token: null,
      page: 1,
      pageSize: 20,
      data: null,
    };
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let data = getToken();
    this.token = JSON.parse(data);
    this.getlist();
  },
  // 方法集合
  methods: {
    // 分析结果统计
    goresult(item) {
      if (item.analysisStatus !== 2) {
        this.$message.warning('当前数据解析失败，请重新解析');
        return;
      }
      window.open(
        this.$router.resolve({
          path: '/textanalysis/Result',
          query: {
            partitionKey: item.partitionKey,
            subjectWords: item.subjectWords,
            wordTextCount: item.wordTextCount,
            wordCount: item.wordCount,
            vocabularyTextCount: item.vocabularyTextCount,
            vocabularyCount: item.vocabularyCount,
            pinyinCount: item.pinyinCount,
            pinyinTextCount: item.pinyinTextCount,
            pinyinDifficulty: item.pinyinDifficulty,
            wordDifficulty: item.wordDifficulty,
            vocabularyDifficulty: item.vocabularyDifficulty,
            type: '文本分析',
          },
        }).href,
        '_blank',
      );
    },
    // 删除
    deleteOne(id, index) {
      this.loading = true;
      postapi({
        url: '/GCLSTCServer/tools/TS/analysis/record/del',
        data: {
          id,
        },
      })
        .then((res) => {
          this.data.list.splice(index, 1);
          this.data.total -= 1;

          let num = this.page * this.pageSize - this.pageSize + 1;
          this.data.list.forEach((item) => {
            item.number = num;
            num += 1;
          });
          this.$message.success(res.msg);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    anewSubmit(item) {
      this.loading = true;
      postapi({
        url: '/GCLSTCServer/tools/TS/reparse',
        data: {
          partitionKey: item.partitionKey,
        },
      })
        .then((res) => {
          if (res.data.result.analysisStatus !== 2) {
            this.$message.warning('当前数据解析失败，请重新解析');
            this.loading = false;
            return;
          }
          window.open(
            this.$router.resolve({
              path: '/textanalysis/Result',
              query: {
                partitionKey: res.data.result.partitionKey,
                subjectWords: res.data.result.subjectWords,
                wordTextCount: res.data.result.wordTextCount,
                wordCount: res.data.result.wordCount,
                vocabularyTextCount: res.data.result.vocabularyTextCount,
                vocabularyCount: res.data.result.vocabularyCount,
                pinyinCount: res.data.result.pinyinCount,
                pinyinTextCount: res.data.result.pinyinTextCount,
                pinyinDifficulty: res.data.result.pinyinDifficulty,
                wordDifficulty: res.data.result.wordDifficulty,
                vocabularyDifficulty: res.data.result.vocabularyDifficulty,
                type: '文本分析',
              },
            }).href,
            '_blank',
          );
          this.getlist(true);
          // this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 分析
    submit() {
      if (this.txt === '') {
        this.$message.warning('请先输入内容');
        return;
      }
      if (this.txt.length > 1000) {
        this.$message.warning('超出字数限制');
        return;
      }
      this.loading = true;
      postapi({
        url: '/GCLSTCServer/tools/TS/analys',
        data: {
          tenantId: '',
          text: this.txt,
        },
      })
        .then((res) => {
          this.txt = '';
          if (res.data.result.analysisStatus !== 2) {
            this.$message.warning('当前数据解析失败，请重新解析');
            this.loading = false;
            return;
          }
          window.open(
            this.$router.resolve({
              path: '/textanalysis/Result',
              query: {
                partitionKey: res.data.result.partitionKey,
                subjectWords: res.data.result.subjectWords,
                wordTextCount: res.data.result.wordTextCount,
                wordCount: res.data.result.wordCount,
                vocabularyTextCount: res.data.result.vocabularyTextCount,
                vocabularyCount: res.data.result.vocabularyCount,
                pinyinCount: res.data.result.pinyinCount,
                pinyinTextCount: res.data.result.pinyinTextCount,
                pinyinDifficulty: res.data.result.pinyinDifficulty,
                wordDifficulty: res.data.result.wordDifficulty,
                vocabularyDifficulty: res.data.result.vocabularyDifficulty,
                type: '文本分析',
              },
            }).href,
            '_blank',
          );
          this.getlist(true);
          // this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getlist(msg) {
      this.loading = true;
      postapi({
        url: '/GCLSTCServer/tools/TS/analysis/record/list',
        data: {
          pageIndex: this.page,
          pageSize: this.pageSize,
        },
      })
        .then((res) => {
          let num = this.page * this.pageSize - this.pageSize + 1;
          res.data.result.list.forEach((item) => {
            item.number = num;
            num += 1;
          });
          this.data = res.data.result;
          if (msg) {
            this.$message.success(res.msg);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.TextAnalysis {
  min-height: 100%;

  .main {
    min-height: 80.2vh;
    padding-top: 54px;
    padding-bottom: 24px;
    background: #f6f6f6;

    > div {
      width: 1200px;
      margin: 0 auto;
    }

    > .title {
      font-size: 30px;
      font-weight: 700;
      line-height: 43px;
      color: #2c2c2c;
    }

    .input_main {
      width: 1168px;
      min-height: 295px;
      padding: 16px;
      margin-top: 17px;
      background: #fff;
      border-radius: 4px;

      .text_btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;

        .left {
          font-size: 14px;
          font-weight: 400;
          line-height: 26px;
          color: #000;
        }

        .btn {
          width: 124px;
          height: 40px;
          font-size: 16px;
          font-weight: 500;
          line-height: 40px;
          color: #000;
          text-align: center;
          cursor: pointer;
          background: #ffc600;
          border: 1px solid rgba(0, 0, 0, 15%);
          border-radius: 4px;
          box-shadow: 0 2px 0 rgba(0, 0, 0, 4%);
        }
      }
    }

    .list_main {
      margin-top: 37px;

      .title {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #000;
      }

      .list {
        margin-top: 16px;

        > div {
          display: flex;
          align-items: center;
          height: 48px;
          padding: 0 16px;
          font-size: 16px;
          font-weight: 400;
          color: #000;
          background: #fff;
          border-bottom: 1px solid rgba(0, 0, 0, 8%);

          .number {
            width: 20px;
            margin-right: 24px;
            text-align: right;
          }

          .txt {
            width: 774px;
            margin-right: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
          }

          .time {
            width: 190px;
            margin-right: 24px;
          }

          .cxjx {
            margin-right: 24px;
            cursor: pointer;
          }

          img {
            width: 24px;
            height: 24px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>