ebiz-ai-knowledge-manage/src/views/knowledge/detail/components/words/WordIndex.vue

<template>
  <div class="render-container">
    <div class="splitConfig mt20">
      <div>
        <ul class="flex">
          <!-- 自动题词 -->
          <li
            class="flex"
            :class="activeIndex === index ? 'active' : ''"
            v-for="(item, index) in splitOptions"
            :key="index"
            @click="handleClick(index)"
          >
            <div>
              <svg
                v-if="index === 0"
                t="1744335709188"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2464"
                width="32"
                height="32"
              >
                <path
                  d="M933.868272 511.691752a140.807706 140.807706 0 0 1 90.131728-131.067068 525.562914 525.562914 0 0 0-57.334136-138.64997 139.882962 139.882962 0 0 1-184.948826-184.948826A525.562914 525.562914 0 0 0 643.067068 0a140.376159 140.376159 0 0 1-262.134136 0A525.562914 525.562914 0 0 0 242.282962 57.334136a139.882962 139.882962 0 0 1-184.948826 184.948826A506.698134 506.698134 0 0 0 0 380.932932a140.376159 140.376159 0 0 1 0 262.134136 525.562914 525.562914 0 0 0 57.334136 138.64997 139.882962 139.882962 0 0 1 184.948826 184.948826 525.562914 525.562914 0 0 0 138.64997 57.334136 140.376159 140.376159 0 0 1 262.134136 0 525.562914 525.562914 0 0 0 138.64997-57.334136 139.882962 139.882962 0 0 1 184.948826-184.948826 506.698134 506.698134 0 0 0 57.334136-138.64997A140.807706 140.807706 0 0 1 933.868272 511.691752zM511.691752 652.437809A140.437809 140.437809 0 1 1 652.437809 511.691752 140.499458 140.499458 0 0 1 511.691752 652.437809z"
                  fill="#1D85ED"
                  p-id="2465"
                ></path>
              </svg>
              <svg
                v-if="index === 1"
                t="1744335834635"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7994"
                width="32"
                height="32"
              >
                <path
                  d="M746 181.1c10.3 0 19.4 6.1 23.3 15.6l1 2.3 1.2 2.2 110.4 210c2.9 8.6 0.9 18.3-5.3 25l-0.6 0.7-0.6 0.7-344.5 401.9c-6.4 6.7-14.1 7.7-18.2 7.7s-11.7-1-18.2-7.7L150.1 437.6l-0.6-0.7-0.6-0.7c-6.2-6.8-8.2-16.4-5.3-25l110.4-210 1.2-2.2 1-2.3c3.9-9.5 13.1-15.6 23.3-15.6H746m0-54.6H279.4c-32.3 0-61.4 19.5-73.8 49.3L93.8 388.7c-11.9 28.7-6 61.6 14.9 84.4l345.2 402.7c15.8 17.3 37.3 25.9 58.9 25.9 21.5 0 43-8.6 58.9-25.9l345.2-402.7c20.9-22.9 26.8-55.8 14.9-84.4l-112-212.9c-12.3-29.8-41.5-49.3-73.8-49.3z"
                  p-id="7995"
                  fill="#d81e06"
                ></path>
                <path
                  d="M513.9 524.6c-19.1 0-37.5-8.1-50.4-22.2l-97.7-106.7c-10.2-11.1-9.4-28.4 1.7-38.5 11.1-10.2 28.4-9.4 38.5 1.7l97.7 106.7c3.6 3.9 7.9 4.5 10.2 4.5 2.3 0 6.6-0.6 10.2-4.5l95.5-104.2c10.2-11.1 27.4-11.9 38.5-1.7 11.1 10.2 11.9 27.4 1.7 38.5l-95.5 104.2c-13 14.1-31.3 22.2-50.4 22.2z"
                  p-id="7996"
                  fill="#d81e06"
                ></path>
              </svg>
            </div>
            <div class="block">
              <h3>{{ item.title }}</h3>
              <p class="tips">{{ item.description }}</p>
              <p v-if="item.tip" class="tips">{{ item.tip }}</p>
            </div>
          </li>
        </ul>
        <!-- 弹窗组件 -->
        <custom-split-dialog class="active" ref="customTable">
        </custom-split-dialog>

        <!-- 添加题词预览组件 -->
        <extract-preview
          @update:visible="value => (previewVisible = value)"
          style="z-index: 2010"
          :visible.sync="previewVisible"
          :extract-results="extractResults"
          :is-auto-extract="activeIndex === 0"
          :loading="previewLoading"
          :documentList="documentList"
          @confirm="handlePreviewConfirm"
        />
      </div>
      <div class="card-bottom text-right mt10">
        <el-button type="primary" size="medium" @click="onBack()">
          取消
        </el-button>
        <el-button
          type="primary"
          size="medium"
          @click="nextStep(documentExtractId)"
        >
          确定
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import CustomSplitDialog from './CustomWords.vue'
import ExtractPreview from './ExtractPreview.vue'
import {
  datasetDocumentEx,
  execExtract,
  getExtractResultList,
  saveContentToDocument
} from '@/api/generatedApi'

export default {
  name: 'splitConfig',
  components: {
    CustomSplitDialog,
    ExtractPreview
  },
  data() {
    return {
      dialogVisible: false,
      activeIndex: 0,
      previewVisible: false,
      extractResults: [],
      previewLoading: false,
      splitOptions: [
        {
          icon: 'el-icon-setting',
          title: '立即挖掘',
          description:
            '使用系统默认的题词方式，适合新手或紧急任务，直接使用系统预设题词规则处理文本。',
          tip: '提示：首次使用时建议先用自动题词测试效果，再决定是否调整。'
        },
        {
          icon: 'el-icon-medal',
          title: '自定义规则',
          description:
            '使用自定义题词方式可以根据具体需求灵活调整文本分割逻辑。',
          tip: '但需要权衡灵活性与复杂度，需要用户具备一定的题词经验。'
        }
      ],
      isRedig: false,
      // 题词结果
      digRes: [],
      documentId: '',
      extractStatus: {
        timer: NaN,
        status: undefined
      }
    }
  },
  props: {
    documentList: {
      type: Array,
      default: () => []
    },
    documentExtractId: {
      type: String,
      default: () => ''
    }
  },
  watch: {},
  filters: {},
  methods: {
    handleClick(index) {
      this.activeIndex = index
      if (index === 1) {
        this.$refs.customTable.init()
      } else {
        this.$refs.customTable.close()
      }
    },

    // 构建执行题词的参数
    buildExecExtractParams(documentId) {
      let params = {
        documentId: documentId,
        beAuto: this.activeIndex === 0
      }
      let splitDocIds = documentId.split(',')
      if (splitDocIds.length > 1) {
        params.documentId = undefined
        params.documentIds = splitDocIds
      }

      if (!params.beAuto && this.$refs.customTable.ruleId) {
        params.rulesId = this.$refs.customTable.ruleId
      }

      return params
    },

    // 执行题词操作
    async execExtractOperation(params) {
      if (!params.beAuto && !params.rulesId) {
        this.$message.error('请勾选数据')
        return false
      }
      const res = await execExtract(params)
      if (res.content.result !== '0') {
        throw new Error(res.content.resultMessage || '执行题词失败')
      }

      return res.content.content
    },

    // 显示预览
    showExtractPreview(results) {
      this.extractResults = results || []
      this.previewVisible = true
    },

    // 获取题词结果列表 - 修改后的方法
    async getExtractResultOperation() {
      const params = { documentId: this.documentId }
      const res = await getExtractResultList(params)
      if (res.content.result !== '0') {
        throw new Error(res.content.resultMessage || '获取题词结果失败')
      }

      // this.digRes = res.content.content || []
      const results = res.content.content || []

      // 显示预览弹窗
      this.showExtractPreview(results)
    },
    // 处理预览确认
    handlePreviewConfirm(extractResults) {
      this.$router.push({
        path: '/knowledge/reviewKnowledge',
        query: {
          documentId: this.documentId,
          datasetId: this.$route.query.datasetId,
          active: '3'
        }
      })

      // this.saveContentToDocumentOperation(this.documentId, extractResults)
    },
    // 保存题词内容到文档
    async saveContentToDocumentOperation(documentId, resultList) {
      const params = {
        documentId,
        resultDTOList: resultList.map(item => ({
          id: item.id,
          attribute: item.attribute,
          attributeContent: item.attributeContent
        }))
      }
      await saveContentToDocument(params)
      this.$router.push({
        path: '/knowledge/detail',
        query: { ...this.$route.query }
      })
    },

    // 主方法
    async nextStep() {
      this.documentId = this.$route.query.documentId
      const params = this.buildExecExtractParams(this.documentId)
      this.execExtractOperation(params).then(async res => {
        if (res) {
          this.getExtractStatus()
        }
      })

      // return new Promise(async (resolve, reject) => {
      //   try {
      //     // 1. 执行题词
      //     const params = this.buildExecExtractParams(this.documentId)
      //     this.execExtractOperation(params).then(async res => {
      //       if (res) {
      //         await this.getExtractResultOperation(this.documentId)
      //         // 显示预览弹窗
      //         // this.showExtractPreview(res)
      //       }
      //     })
      //   } catch (error) {
      //     console.error('题词操作失败:', error)
      //     reject({
      //       success: false,
      //       message: error.message || '题词操作失败'
      //     })
      //   }
      // })
    },
    getExtractStatus() {
      if (this.extractStatus.timer) return
      this.$notify({
        title: '提示',
        message: this.$createElement('i', {}, this.extractStatusResults)
      })
      datasetDocumentEx({ documentId: this.documentId })
        .then(() => {
        this.onBack()
      })
    },
    onBack() {
      this.$router.history.go(-1)
    }
  },
  computed: {
    columns: vm => {
      return [
        {
          prop: 'attribute',
          label: '属性',
          width: 90
        },
        {
          prop: 'attributeContent',
          label: '题词内容',
          render: (h, p) => {
            return h('el-input', {
              props: {
                value: p.row.attributeContent,
                size: 'medium',
                disabled: !vm.isEdit
              },
              on: {
                input: value => {
                  p.row.attributeContent = value
                }
              }
            })
          }
        }
      ]
    },
    extractStatusResults() {
      const map = new Map([
        [0, '相关数据信息还未执行'],
        [1, '相关数据已经处理完成，请移步相关知识库查看'],
        [2, '数据处理失败，请返回相关知识库重新处理相应内容'],
        [3, '题词数据挖掘正在排队中，稍后将进行处理'],
        [4, '题词数据挖掘正在处理中']
      ])
      if (map.has(this.extractStatus.status))
        return map.get(this.extractStatus.status)
      return '数据正在处理中'
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/sass/renderSass/theme.scss';

.splitConfig {
  .title {
    font-size: 20px;
    margin: 10px 0;
    font-weight: bold;
  }

  ul {
    list-style-type: none;
    padding: 10px;

    & li {
      flex: 1;
      border: 1px solid #d9d9d9;
      padding: 15px;
      border-radius: 6px;
      list-style-type: none;
      //width: 80%;

      p {
        margin: 10px 0;
        font-size: 14px;
        color: #666;
      }

      .block {
        margin-left: 20px;

        h3 {
          margin-bottom: 20px;
          font-size: 16px;
          color: #333;
        }

        .tips {
          color: #9e9e9e;
        }
      }

      &.active {
        border: 1px solid var(--color-primary);
        //background: #fefefe;
        transition: all 1s ease;
        //color: #fff;
        & .tips {
          //color: #fff;
          //transition: all 1s ease;
        }
      }
    }

    li + li {
      margin-left: 20px;
    }
  }
}
</style>