gdphm/gm-web/src/views/knowledgeExtraction/index.vue

<template>
  <div class="view-table-content">
    <div style="width: 100%">
      <div class="view-dataType-title">
        <div class="view-dataType-title-btn">
          <el-button type="success" @click="openDialog()">新增抽取任务</el-button>
          <el-button type="warning" @click="remove(tableCheckItems)" :disabled="tableCheckItems.length === 0">删除</el-button>
        </div>
        <div class="view-dataType-title-search">
          <el-input placeholder="请输入任务名称" v-model="keyWordData" class="input1">
            <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
          </el-input>
        </div>
      </div>
      <div class="view-dataType-table">
        <LTable ref="table" @selection-change="selection" :defaultFetch="false" :fetch="fetch" :columns="columns" :dataSource="tableData" :options="options" :pagination="tableRequest"></LTable>
      </div>
      <!-- 添加或修改抽取任务对话框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="任务名称" prop="taskName">
            <el-input v-model="form.taskName" placeholder="请输入任务名称" />
          </el-form-item>
          <el-form-item label="选择抽取文件" label-width="110px" prop="ossId">
            <el-select v-model="form.ossId" placeholder="请选择文件">
              <el-option v-for="item in optionFileList" :key="item.id" :label="item.dataTitle" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="详情" :visible.sync="detailDialogVisible" top="10vh" width="90%" :before-close="detailHandleClose">
        <div style="width: 80%; margin-left: 10%">
          <!-- 分句、抽取、审核、入库 -->
          <el-steps :active="active" finish-status="success" process-status="finish">
            <!-- 需要判断分句中、抽取中、。。。。 -->
            <el-step :title="zeroTitle"></el-step>
            <el-step :title="oneTitle"></el-step>
            <el-step :title="twoTitle"></el-step>
            <el-step :title="threeTitle"></el-step>
          </el-steps>
        </div>
        <div class="view-dataType-table">
          <div v-if="active === 0" style="width: 500px; margin: 50px 0px 0px 300px">
            <el-form ref="taskFormRef" disabled :model="taskForm" label-width="80px">
              <el-form-item label="任务名称" prop="taskName">
                <el-input v-model="taskForm.taskName" />
              </el-form-item>
              <el-form-item label="抽取文件" prop="ossId">
                <!-- <el-input v-model="taskForm.ossId" /> -->
                <el-select v-model="taskForm.ossId" placeholder="请选择文件">
                  <el-option v-for="item in optionFileList" :key="item.id" :label="item.dataTitle" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>

          <LTable
            ref="clauseTableRef"
            v-if="active === 1 || active === 2"
            @selection-change="clauseSelection"
            :defaultFetch="false"
            :fetch="clauseFetch"
            :showColumnSetting="false"
            :columns="clauseColumns"
            :dataSource="clauseTableData"
            :options="clauseOptions"
            :pagination="clauseTableRequest"
          ></LTable>
          <graphECharts v-if="active === 3" style="margin: 0 auto" :width="1400" :height="500" :graphData="graphData" class="charts"></graphECharts>
          <!-- <LTable ref="extractTable" v-if="active === 2" @selection-change="extractSelection" :defaultFetch="false" :fetch="fetch" :columns="extractColumns" :dataSource="extractTableData" :options="extractOptions" :pagination="extractTableRequest"></LTable> -->
        </div>

        <el-dialog width="50%" title="详情" :visible.sync="clauseDialogVisible" :before-close="clauseHandleClose" append-to-body>
          <el-form ref="clauseFormRef" :model="clauseForm" label-width="80px">
            <el-form-item label="内容" prop="clause">
              <el-input type="textarea" :rows="7" v-model="clauseForm.clause" placeholder="请输入内容" />
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="clauseDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="clauseSubmit">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog width="80%" title="抽取详情" :visible.sync="extractDialogVisible" :before-close="extractHandleClose" append-to-body>
          <div class="content">
            <div class="left">
              <p>{{ this.extractData.content }}</p>
            </div>
            <div class="right">
              <LTable
                ref="extractDetailTableRef"
                :showColumnSetting="false"
                :defaultFetch="false"
                :fetch="extractDetailFetch"
                :columns="extractDetailColumns"
                :dataSource="extractData.extractDetailTable"
                :pagination="extractDetailRequest"
                :options="extractDetailOptions"
              ></LTable>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="success" @click="addER">新增实体关系</el-button>
            <el-button @click="handleCancel">作 废</el-button>
            <el-button type="primary" @click="passThrough">通 过</el-button>
          </div>
        </el-dialog>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="handleClose">取 消</el-button> -->
          <el-button type="primary" v-if="active === 0 && zeroTitle !== '分句中'" :loading="clauseLoading" @click="handleClause">分 句</el-button>
          <el-button type="primary" v-if="active === 1 && oneTitle !== '抽取中'" :loading="extractLoading" @click="handleExtract">抽 取</el-button>
          <el-button type="primary" v-if="active === 2 && oneTitle !== '入库中'" :loading="storageLoading" @click="handleStorage">入 库</el-button>
        </span>
      </el-dialog>

      <el-dialog width="30%" title="增加实体关系" :visible.sync="addERDialogVisible" :before-close="addERHandleClose" append-to-body>
        <el-form ref="addERFormRef" :model="addERForm" label-width="80px">
          <el-form-item label="头实体" prop="headEntity">
            <el-input v-model="addERForm.headEntity" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="头实体类" prop="headEntityClass">
            <!-- <el-input  v-model="addERForm.headEntityClass" placeholder="请输入内容" /> -->
            <el-select v-model="addERForm.headEntityClass" placeholder="请选择实体类型">
              <el-option v-for="(item, index) in entityClassList" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="关系" prop="relation">
            <!-- <el-input  v-model="addERForm.relation" placeholder="请输入内容" /> -->
            <el-select v-model="addERForm.relation" placeholder="请选择实体类型">
              <el-option v-for="(item, index) in relationClassList" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="尾实体" prop="tailEntity">
            <el-input v-model="addERForm.tailEntity" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="尾实体类" prop="tailEntityClass">
            <el-select v-model="addERForm.tailEntityClass" placeholder="请选择实体类型">
              <el-option v-for="(item, index) in entityClassList" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addERHandleClose">取 消</el-button>
          <el-button type="primary" @click="addERSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {extractStatusss} from '@/utils/enum-data'
import { listTechData, download, delTechData, addTechData, updateTechData } from "@/api/tech/techData";
import { getTaskList, addTask, updateTask, removeTask, taskPro, getVisually, removeClause, updateClause, getClauseList, getExtractList, updateExtractInfo, removeExtractInfo, addER } from '@/api/als/knowledgeExtraction'
import { getAllEntityClass } from '@/api/als/entityManage'
import { getAllRelationClass } from '@/api/als/ERManage'
import graphECharts from '@/views/components/Charts/graph.vue'

import { getAtlasFile } from '@/api/als/atlasFile'
// import { getOssIdDataAPI } from '@/api/als/algorithm'
import { deepClone, debounce } from '@/utils'
import LTable from '@/views/components/LTable/index.vue'

export default {
  name: 'KnowledgeExtraction',
  components: { LTable, graphECharts },
  data() {
    // 这里存放数据
    return {
      dialogTitle: '新增',
      dialogVisible: false,
      detailDialogVisible: false,
      clauseDialogVisible: false,
      extractDialogVisible: false,
      addERDialogVisible: false,
      clauseLoading: false,
      extractLoading: false,
      storageLoading: false,
      keyWordData: '',
      searchValue: '',
      rules: {
        taskName: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
        ossId: [{ required: true, message: '抽取文件不能为空', trigger: 'change' }]
      },
      columns: [
        {
          prop: 'taskName',
          label: '任务名称'
        },
        {
          prop: 'ossId',
          label: '文件',
          render: (h, params) => {
            const matchedItem = this.fileList.find((item) => params.row.ossId.trim() === item.ossId.trim())
            if (matchedItem) {
              return h('span', matchedItem.fileName)
            } else {
              return h('span', {}, '')
            }
          }
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            const matchedItem = extractStatusss.find((item) => params.row.status === item.key)
            if (matchedItem) {
              return h('span', matchedItem.name)
              // return h('span', { class: matchedItem.colorType }, matchedItem.name)
            } else {
              return h('span', {}, '')
            }
          }
        },
        {
          button: true,
          label: '操作',
          width: '240px',
          group: [
            {
              name: '查看',
              type: 'text',
              round: false,
              plain: false,
              onClick: (row, index, scope) => {
                this.checkProcess(row)
              }
            },
            {
              name: '编辑',
              type: 'text',
              round: false,
              plain: false,
              onClick: (row, index, scope) => {
                this.handUpdate(row)
              }
            },
            {
              name: '删除',
              type: 'text',
              round: false,
              plain: false,
              onClick: (row, index, scope) => {
                this.remove([row])
              }
            }
          ]
        }
      ],
      options: {
        stripe: false, // 斑马纹
        mutiSelect: true, // 多选框
        index: false, // 显示序号， 多选则 mutiSelect
        loading: false, // 表格动画
        initTable: false, // 是否一挂载就加载数据
        border: true,
        height: 'calc(100vh - 300px)'
      },
      tableCheckItems: [],
      tableData: [],
      tableRequest: {
        total: 0,
        pageIndex: 1,
        pageSize: 20,
        searchValue: ''
      },
      clauseColumns: [
        {
          prop: 'clause',
          label: '内容'
        },
        {
          prop: 'status',
          label: '状态',
          width: '240px',
          render: (h, params) => {
            if (params.row.status === '0') {
              return h('span', { class: 'danger-state' }, '未审核')
            } else if (params.row.status === '1') {
              return h('span', { class: 'success-state' }, '通过')
            } else if (params.row.status === '2') {
              return h('span', { class: 'warning-state' }, '作废')
            }
          }
        },
        // {
        //   prop: 'statusKey',
        //   label: '状态',
        //   width: '240px',
        //   render: (h, params) => {
        //     // if (params.row.status !== ' ') {
        //     //   if (params.row.status == '0') {
        //     //     return h('span', { class: 'danger-state' }, '未审核')
        //     //   } else if (params.row.status == '1') {
        //     //     return h('span', { class: 'success-state' }, '通过')
        //     //   } else if (params.row.status == '2') {
        //     //     return h('span', { class: 'warning-state' }, '作废')
        //     //   }
        //     // } else {
        //     const matchedItem = this.$enumData.extractStatus.find((item) => params.row.statusKey === item.key)
        //     if (matchedItem) {
        //       return h('span', { class: 'success-state' }, matchedItem.name)
        //       // return h('span', { class: matchedItem.colorType }, matchedItem.name)
        //     } else {
        //       return h('span', {}, '')
        //     }
        //     // }
        //   }
        // },
        {
          button: true,
          label: '操作',
          width: '240px',
          group: [
            {
              name: '编辑',
              type: 'text',
              statusKey: 'statusKey',
              disableKey: [3, 4],
              round: false,
              plain: false,
              onClick: (row, index, scope) => {
                this.clauseHandUpdate(row)
              }
            },
            {
              name: '删除',
              type: 'text',
              statusKey: 'statusKey',
              disableKey: [3, 4],
              round: false,
              plain: false,
              onClick: (row, index, scope) => {
                this.clauseRemove([row])
              }
            },
            {
              name: '查看抽取结果',
              type: 'text',
              statusKey: 'statusKey',
              unDisableKey: '4',
              round: false,
              plain: false,
              onClick: (row, index, scope) => {
                this.getExtractListAPI({ clauseId: row.id })
                this.checkExtractResult(row)
              }
            }
          ]
        }
      ],
      clauseOptions: {
        stripe: false, // 斑马纹
        mutiSelect: false, // 多选框
        index: true, // 显示序号， 多选则 mutiSelect
        loading: false, // 表格动画
        initTable: false, // 是否一挂载就加载数据
        border: true,
        height: 'calc(100vh - 470px)'
      },
      clauseTableCheckItems: [],
      clauseTableData: [],
      clauseTableRequest: {
        total: 0,
        pageIndex: 1,
        pageSize: 20,
        searchValue: ''
      },
      form: {
        id: '',
        taskName: '',
        ossId: ''
      },
      taskForm: {
        id: '',
        ossId: '',
        status: '',
        taskName: '',
        fileName: '',
        taskType: ''
      },
      debounceFn: debounce(this.fetch, 500),
      fileList: [],
      active: 0,
      clauseForm: {
        id: '',
        taskId: '',
        clause: '',
        status: ''
      },
      extractData: {
        content: '',
        extractDetailTable: []
      },
      extractDetailColumns: [
        {
          prop: 'headEntity',
          label: '头实体',
          edit: true,
          editStatus: false,
          onChange: (scope, oldRow) => {
            const { row } = scope
            if (oldRow.headEntity === row.headEntity) return
            this.updateExtractInfoAPI(row)
          }
        },
        {
          prop: 'headEntityClass',
          label: '头实体类',
          edit: true,
          editStatus: false,
          onChange: (scope, oldRow) => {
            const { row } = scope
            if (oldRow.headEntity === row.headEntityClass) return
            this.updateExtractInfoAPI(row)
          }
        },
        {
          prop: 'relation',
          label: '关系',
          edit: true,
          editStatus: false,
          onChange: (scope, oldRow) => {
            const { row } = scope
            if (oldRow.headEntity === row.relation) return
            this.updateExtractInfoAPI(row)
          }
        },
        {
          prop: 'tailEntity',
          label: '尾实体',
          edit: true,
          editStatus: false,
          onChange: (scope, oldRow) => {
            const { row } = scope
            if (oldRow.headEntity === row.tailEntity) return
            this.updateExtractInfoAPI(row)
          }
        },
        {
          prop: 'tailEntityClass',
          label: '尾实体类',
          edit: true,
          editStatus: false,
          onChange: (scope, oldRow) => {
            const { row } = scope
            if (oldRow.headEntity === row.tailEntityClass) return
            this.updateExtractInfoAPI(row)
          }
        },
        {
          button: true,
          label: '操作',
          width: '120px',
          group: [
            {
              name: '删除',
              type: 'text',
              round: false,
              plain: false,
              onClick: (row, index, scope) => {
                this.removeExtractDetail([row])
              }
            }
          ]
        }
      ],
      extractDetailOptions: {
        stripe: false, // 斑马纹
        mutiSelect: false, // 多选框
        index: true, // 显示序号， 多选则 mutiSelect
        loading: false, // 表格动画
        initTable: false, // 是否一挂载就加载数据
        border: true,
        height: '450px'
      },
      extractDetailRequest: {
        total: 0,
        pageIndex: 1,
        pageSize: 20,
        searchValue: ''
      },
      // extractDetailTableData: [{ content: 'qqq' }, { content: 'www' }, { content: 'eee' }]
      zeroTitle: '分句',
      oneTitle: '抽取',
      twoTitle: '审核',
      threeTitle: '入库',
      taskStatus: null,
      optionFileList:[],
      entityClassList: [],
      relationClassList: [],
      addERForm: {
        clauseId: '',
        headEntity: '',
        headEntityClass: '',
        relation: '',
        tailEntity: '',
        tailEntityClass: ''
      },
      graphData: {}
    }
  },
  watch: {
    keyWord() {
      this.tableRequest.pageIndex = 1
      this.debounceFn()
    }
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      this.getTaskListAPI()
      this.getAtlasFileAPI()
      // this.getEntityClassAPI()
      // this.getAllRelationClassAPI()

    },
    infoOptions(){
      listTechData().then(response => {
        this.optionFileList = response.rows;
        console.log('logData',this.optionFileList)
      });
    },
    async getAtlasFileAPI(params) {
      try {
        const {
          data: { list, total }
        } = await getAtlasFile()
        this.fileList = list
      } catch (error) {}
    },

    async getEntityClassAPI(params) {
      try {
        const {
          data: { dataList }
        } = await getAllEntityClass()
        dataList.forEach((item) => {
          this.entityClassList.push(item.name)
        })
      } catch (error) {}
    },

    async getAllRelationClassAPI(params) {
      try {
        const {
          data: { dataList }
        } = await getAllRelationClass()
        dataList.forEach((item) => {
          this.relationClassList.push(item.name)
        })
      } catch (error) {}
    },

    async removeTaskAPI(params) {
      try {
        const { code } = await removeTask(params)
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          await this.getTaskListAPI()
          this.handleClose()
        }
      } catch (error) {}
    },

    async removeClauseAPI(params) {
      try {
        const { code } = await removeClause(params)
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          await this.getClauseListAPI({ taskId: this.taskForm.id })
          this.clauseHandleClose()
        }
      } catch (error) {}
    },

    async getTaskListAPI(params) {
      if (this.$refs.table) this.$refs.table.clearSelection()
      const { keyWord } = this
      const { pageSize, pageIndex } = this.tableRequest
      await getTaskList({ pageSize, pageNum: pageIndex, ...params }).then(res=>{
        this.tableData= res.rows
        this.tableRequest.total= res.total
      })
    },

    async getClauseListAPI(params) {
      if (this.$refs.clauseTableRef) this.$refs.clauseTableRef.clearSelection()
      const { keyWord } = this
      const { pageSize, pageIndex } = this.clauseTableRequest
      await getClauseList({ pageSize, pageNum: pageIndex, ...params }).then(res=>{
        this.clauseTableRequest.total = res.total
        this.clauseTableData = res.rows.map((el) => {
          return { ...el, statusKey: this.taskStatus }
        })
      })
    },

    async getExtractListAPI(params) {
      if (this.$refs.extractDetailTableRef) this.$refs.extractDetailTableRef.clearSelection()
      const { keyWord } = this
      const { pageSize, pageIndex } = this.extractDetailRequest
      await getExtractList({ pageSize, pageNum: pageIndex, ...params }).then(res=>{
        this.extractData.extractDetailTable = res.data.records;
        this.extractDetailRequest.total = res.total
      })
    },

    fetch() {
      this.getTaskListAPI()
    },

    clauseFetch() {
      this.getClauseListAPI({ taskId: this.taskForm.id })
    },

    extractDetailFetch() {
      this.getExtractListAPI({ clauseId: this.clauseForm.id })
    },

    async searchClick() {
      await this.getTaskListAPI({ taskName: this.keyWordData })
    },

    async addTaskAPI() {
      try {
        delete this.form.aircaftModelName
        const { code } = await addTask({ ...this.form })
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.handleClose()
          await this.getTaskListAPI()
        }
      } catch (error) {}
    },

    async updateTaskAPI() {
      try {
        const { code } = await updateTask({ ...this.form })
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.handleClose()
          await this.getTaskListAPI()
        }
      } catch (error) {}
    },

    async updateClauseAPI() {
      try {
        const { code } = await updateClause({ ...this.clauseForm })
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.clauseHandleClose()
          this.extractHandleClose()
          await this.getClauseListAPI({ taskId: this.taskForm.id })
        }
      } catch (error) {}
    },

    openDialog() {
      this.dialogTitle = '新增'
      this.infoOptions()
      this.dialogVisible = true

    },

    handleClose() {
      this.dialogVisible = false
      this.form = {
        id: '',
        taskName: '',
        ossId: ''
      }
    },

    handUpdate(row) {
      this.dialogTitle = '编辑'
      this.form = deepClone(row)
      this.dialogVisible = true
    },

    // 分句编辑
    clauseHandUpdate(row) {
      this.clauseForm = deepClone(row)
      this.clauseDialogVisible = true
    },

    // 查看抽取结果
    checkExtractResult(row) {
      this.clauseForm = deepClone(row)
      this.getExtractListAPI({ clauseId: row.id })
      this.extractData.content = row.clause
      console.log('this.extractData.content',this.extractData.content)
      this.extractDialogVisible = true
    },

    // 表格更新抽取结果
    async updateExtractInfoAPI(row) {
      if (this.handleVerify(row)) {
        try {
          console.log('row', row)
          const { code } = await updateExtractInfo({ ...row })
          if (code === 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            // this.clauseHandleClose()
            // this.getClauseListAPI({ taskId: this.taskForm.id })
            this.getExtractListAPI({ clauseId: this.clauseForm.id })
          }
        } catch (error) {}
      }fen
    },

    // 校验实体关系
    handleVerify(data) {
      const { headEntity, headEntityClass, relation, tailEntity, tailEntityClass } = data
      let str = this.extractData.content
      if (str.indexOf(headEntity) === -1 || str.indexOf(tailEntity) === -1) {
        this.extractDetailFetch()
        this.$message({
          type: 'warning',
          message: '实体与文本中匹配有误，请重新输入'
        })
        return false
      }
      if (!this.entityClassList.includes(headEntityClass) || !this.entityClassList.includes(tailEntityClass)) {
        this.extractDetailFetch()
        this.$message({
          type: 'warning',
          message: `实体类有误，请重新输入。目前实体类有<${this.entityClassList}>`,
          duration: 5000
        })
        return false
      }

      if (!this.relationClassList.includes(relation)) {
        this.extractDetailFetch()
        this.$message({
          type: 'warning',
          message: `关系有误，请重新输入。目前关系有<${this.relationClassList}>`,
          duration: 5000
        })
        return false
      }
      return true
    },

    // 新增实体关系
    addER() {
      this.addERDialogVisible = true
    },

    async addERSubmit() {
      if (this.handleVerify(this.addERForm)) {
        try {
          this.addERForm.clauseId = this.clauseForm.id
          const { code } = await addER({ ...this.addERForm })
          if (code === 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.addERHandleClose()
            this.getExtractListAPI({ clauseId: this.clauseForm.id })
          }
        } catch (error) {}
      }
    },

    // 作废
    handleCancel() {
      this.clauseForm.status = 2
      this.$confirm('是否将该抽取结果作废？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // this.removeTaskAPI(row.map((e) => e.id))
          this.updateClauseAPI()
        })
        .catch(() => {})
    },

    // 通过
    passThrough() {
      this.clauseForm.status = 1
      this.updateClauseAPI()
    },

    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          switch (this.dialogTitle) {
            case '编辑':
              this.updateTaskAPI()

              break
            case '新增':
              this.addTaskAPI()
              break
          }
        }
      })
    },

    clauseSubmit() {
      this.updateClauseAPI()
    },

    extractSubmit() {
      // this.updateClauseAPI()
    },

    selection(val) {
      this.tableCheckItems = val
    },

    clauseSelection(val) {
      this.clauseTableCheckItems = val
    },

    // extractSelection(val) {
    //   this.extractTableCheckItems = val
    // },

    remove(row) {
      this.$confirm('是否删除该数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.removeTaskAPI(row.map((e) => e.id))
        })
        .catch(() => {})
    },

    removeExtractDetail(row) {
      console.log('row', row)
      this.$confirm('是否删除该条实体关系', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.removeExtractInfoAPI(row.map((e) => e.id))
        })
        .catch(() => {})
    },

    async removeExtractInfoAPI(params) {
      try {
        const { code } = await removeExtractInfo(params)
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          await this.getExtractListAPI({ clauseId: this.clauseForm.id })
        }
      } catch (error) {}
    },

    clauseRemove(row) {
      this.$confirm('是否删除该数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.removeClauseAPI(row.map((e) => e.id))
        })
        .catch(() => {})
    },

    checkProcess(row) {
      this.taskStatus = row.status
      this.taskForm = deepClone(row)
      switch (this.taskStatus) {
        case '0':
          this.active = 0
          this.zeroTitle = '待分句'
          break
        case '1':
          this.active = 0
          this.zeroTitle = '分句中'
          break
        case '2':
          this.active = 1
          this.zeroTitle = '分句'
          this.getClauseListAPI({ taskId: row.id })
          this.oneTitle = '待抽取'
          break
        case '3':
          this.active = 1
          this.oneTitle = '抽取中'
          this.getClauseListAPI({ taskId: row.id })
          break
        case '4':
          this.active = 2
          this.oneTitle = '抽取'
          this.getClauseListAPI({ taskId: row.id })
          this.twoTitle = '审核中'
          break
        case '5':
          this.active = 2
          this.getClauseListAPI({ taskId: row.id })
          this.twoTitle = '入库中'
          break
        case '6':
          this.twoTitle = '审核'
          this.threeTitle = '已入库'
          this.getVisuallyAPI(row)
          this.active = 3
          break

        default:
          break
      }
      this.detailDialogVisible = true
    },

    async getVisuallyAPI(row) {
      try {
        const { code, data } = await getVisually({ ossId: row.ossId })
        if (code === 200) {
          // const newData = this.handleData(JSON.parse(data))
          // console.log('newData', newData)
          const categories = []
          data.data.forEach((node) => {
            const flag = categories.find((item) => {
              return item.name === node.category
            })
            if (!flag) {
              categories.push({ name: node.category })
            }
          })
          data.categories = categories
          this.graphData = data
          console.log('this.graphData', this.graphData)
        }
      } catch (error) {}
    },

    handleData(data) {
      if (data) {
        // const newData = eval('(' + data + ')')
        // data.data = graphData
        const categories = []
        data.data.forEach((node) => {
          const flag = categories.find((item) => {
            return item.name === node.category
          })
          if (!flag) {
            categories.push({ name: node.category })
          }
        })
        data.categories = categories
      }
      return data
    },

    detailHandleClose() {
      this.detailDialogVisible = false
      this.taskForm = {
        id: '',
        ossId: '',
        status: '',
        taskName: '',
        fileName: '',
        taskType: ''
      }
      this.clauseForm = {
        id: '',
        taskId: '',
        clause: '',
        status: ''
      }
    },

    clauseHandleClose() {
      this.clauseDialogVisible = false
      this.clauseForm = {
        id: '',
        taskId: '',
        clause: '',
        status: ''
      }
    },

    extractHandleClose() {
      this.extractDialogVisible = false
      this.extractData = {
        content: '',
        extractDetailTable: []
      }
    },

    addERHandleClose() {
      this.addERDialogVisible = false
      this.addERForm = {
        clauseId: '',
        headEntity: '',
        headEntityClass: '',
        relation: '',
        tailEntity: '',
        tailEntityClass: ''
      }
    },

    async handleClause() {
      this.clauseLoading = true
      this.taskForm.taskType = 0
      try {
        const { code } = await taskPro(this.taskForm)
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '文件开始分句中,稍后刷新页面查看进度',
            duration: 5000
          })
          this.getTaskListAPI()
          this.detailDialogVisible = false
          this.clauseLoading = false
          this.active = 1
        }
      } catch (error) {
        this.clauseLoading = false
        this.$message({
          type: 'warning',
          message: '接口错误请联系管理员'
        })
      }
    },

    async handleExtract() {
      this.extractLoading = true
      this.taskForm.taskType = 2
      try {
        const { code } = await taskPro(this.taskForm)
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '文件开始抽取中,稍后刷新页面查看进度',
            duration: 5000
          })
          this.getTaskListAPI()
          this.detailDialogVisible = false
          this.extractLoading = false
          this.active = 2
        }
      } catch (error) {
        this.extractLoading = false
        this.$message({
          type: 'warning',
          message: '接口错误请联系管理员'
        })
      }
    },

    async handleStorage() {
      this.storageLoading = true
      this.taskForm.taskType = 4
      try {
        const { code } = await taskPro(this.taskForm)
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '文件开始入库中,稍后刷新页面查看进度',
            duration: 5000
          })
          this.getTaskListAPI()
          this.detailDialogVisible = false
          this.storageLoading = false
          this.active = 2
        }
      } catch (error) {
        this.storageLoading = false
        this.$message({
          type: 'warning',
          message: '接口错误请联系管理员'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 500px;
  display: flex;
  .left {
    width: 30%;
    padding: 20px;
    // font-size: 1.1rem;
    color: white;
    border-right: 1px solid #eeeeee;
    overflow: hidden;
  }
  .right {
    width: 70%;
  }
}
</style>