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

<template>
  <div class="TextAnalysis" v-loading="loading">
    <Header />
    <div class="main">
      <div class="title">文本分析</div>
      <div class="input_main">
        <el-input
          type="textarea"
          placeholder="请输入文本"
          :autosize="{ minRows: 9 }"
          v-model="txt"
        >
        </el-input>
        <div class="text_btn">
          <span class="left">{{ txt.length }}/1000</span>
          <span class="btn" @click="submit">分析</span>
        </div>
      </div>
      <div class="list_main">
        <div class="title">
          <span style="margin-right: 16px">分析记录：</span>
          <span>{{ data.total }}/20</span>
        </div>
        <div class="list" v-if="data">
          <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 class="cxjx" @click="anewSubmit(item)">重新解析</div>
            <img
              @click="deleteOne(item.id, i)"
              src="../../assets/teacherdev/delete-one.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "@/components/Header";
import { postapi } from "@/api/api";
import { getToken } from "@/utils/auth";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      txt: "",
      loading: false,
      token: null,
      page: 1,
      pageSize: 20,
      data: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 分析结果统计
    goresult(item) {
      this.$router.push({
        path: "/textanalysis/Result",
        query: {
          partitionKey: item.partitionKey,
          subjectWords: item.subjectWords,
          textCount: item.textCount,
          wordCount: item.wordCount,
        },
      });
    },
    // 删除
    deleteOne(id, index) {
      this.loading = true;
      postapi({
        url: "GCLSTRCServer/tools/TS/analysis/record/del",
        data: {
          id,
        },
      })
        .then((res) => {
          this.data.list.splice(index, 1);
          this.data.total = this.data.total - 1;
          this.$message.success(res.msg);
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    anewSubmit(item) {
      this.txt = item.firstSentence;
      this.submit();
    },
    // 分析
    submit() {
      if (this.txt == "") {
        this.$message.warning("请先输入内容");
        return;
      }
      this.loading = true;
      postapi({
        url: "GCLSTRCServer/tools/TS/analys",
        data: {
          tenantId: "",
          text: this.txt,
        },
      })
        .then((res) => {
          this.txt = "";
          this.getlist();
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    getlist() {
      this.loading = true;
      postapi({
        url: "GCLSTRCServer/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++;
          });
          this.data = res.data.result;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let data = getToken();
    this.token = JSON.parse(data);
    this.getlist();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.TextAnalysis {
  height: 100%;
  .main {
    height: 100%;
    background: #f6f6f6;
    padding-top: 54px;
    padding-bottom: 24px;
    > div {
      width: 1200px;
      margin: 0 auto;
    }
    > .title {
      font-weight: 700;
      font-size: 30px;
      line-height: 43px;
      color: #2c2c2c;
    }
    .input_main {
      width: 1168px;
      margin-top: 17px;
      padding: 16px;
      height: 295px;
      background: #ffffff;
      border-radius: 4px;
      .text_btn {
        margin-top: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          font-weight: 400;
          font-size: 14px;
          line-height: 26px;
          color: #000000;
        }
        .btn {
          font-weight: 500;
          font-size: 16px;
          line-height: 40px;
          color: #000000;
          width: 124px;
          height: 40px;
          background: #ffc600;
          border: 1px solid rgba(0, 0, 0, 0.15);
          box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.04);
          border-radius: 4px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
    .list_main {
      margin-top: 37px;
      .title {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #000000;
      }
      .list {
        margin-top: 16px;
        > div {
          display: flex;
          align-items: center;
          padding: 0 16px;
          height: 48px;
          background: #ffffff;
          border-bottom: 1px solid rgba(0, 0, 0, 0.08);

          font-weight: 400;
          font-size: 16px;
          color: #000000;
          .number {
            width: 20px;
            text-align: right;
            margin-right: 24px;
          }
          .txt {
            width: 774px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-right: 24px;
            cursor: pointer;
          }
          .time {
            width: 190px;
            margin-right: 24px;
          }
          .cxjx {
            margin-right: 24px;
            cursor: pointer;
          }
          img {
            width: 24px;
            height: 24px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>