cfc/cfc-web/src/views/admin/ReportCollectorTrainer.vue

<template>
  <div class="report-trainer admin-page">
    <el-row :gutter="16">
      <!-- 左侧：聚类列表 -->
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <span>报告采集训练</span>
            <el-select v-model="statusFilter" size="small" style="width:120px;float:right" @change="fetchClusters">
              <el-option label="全部" value="" />
              <el-option label="收集中" value="collecting" />
              <el-option label="可生成" value="ready" />
              <el-option label="已生成" value="generated" />
            </el-select>
          </div>
                    <div class="adm-table-wrap">
<el-table :data="clusters" v-loading="loading" border stripe height="100%" @row-click="selectCluster">
            <el-table-column prop="id" label="ID" width="50">
              <template slot="header">
                <span class="sort-header" @click.stop="onSortClick('id', $event)">ID{{ sortIcon('id') }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="clusterKey" label="聚类键" width="120" show-overflow-tooltip>
              <template slot="header">
                <span class="sort-header" @click.stop="onSortClick('clusterKey', $event)">聚类键<span v-if="sortIndex('clusterKey') !== null" class="sort-index" :class="sortClass('clusterKey') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('clusterKey') }}</span>{{ sortIcon('clusterKey') }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="reportCount" label="报告数" width="70">
              <template slot="header">
                <span class="sort-header" @click.stop="onSortClick('reportCount', $event)">报告数{{ sortIcon('reportCount') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="80">
              <template slot-scope="{ row }">
                <el-tag :type="clusterStatusType(row.status)" size="small">{{ clusterStatusText(row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" fixed="right">
              <template slot-scope="{ row }">
                <el-button size="mini" type="text" @click.stop="handleGenerate(row)" v-if="row.status==='ready'">生成</el-button>
              </template>
            </el-table-column>
          </el-table>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧：详情面板 -->
      <el-col :span="16">
        <el-card v-if="currentCluster">
          <div slot="header">
            <span>{{ currentCluster.clusterKey }}（{{ currentCluster.reportCount }} 份报告）</span>
            <el-tag :type="clusterStatusType(currentCluster.status)" size="small" style="margin-left:8px">{{ clusterStatusText(currentCluster.status) }}</el-tag>
          </div>

                    <div class="adm-table-wrap">
<el-table :data="uploads" v-loading="uploadLoading" border stripe height="100%" @row-click="selectUpload">
            <el-table-column prop="id" label="ID" width="50" />
            <el-table-column label="文件" min-width="200">
              <template slot-scope="{ row }">
                <a :href="row.fileUrl" target="_blank">{{ row.fileUrl }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="uploadedAt" label="上传时间" width="170">
              <template slot-scope="{ row }">{{ formatTime(row.uploadedAt) }}</template>
            </el-table-column>
            <el-table-column label="标注" width="100">
              <template slot-scope="{ row }">
                <el-tag v-if="row.annotation" size="small" type="success">已标注</el-tag>
                <el-tag v-else size="small" type="info">未标注</el-tag>
              </template>
            </el-table-column>
        </el-card>
        <el-card v-else>
          <div style="text-align:center;padding:80px;color:#bbb">
            <i class="el-icon-document" style="font-size:48px"></i>
            <p style="margin-top:16px">请从左侧选择一个聚类</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 标注对话框 -->
    <el-dialog :title="'标注报告 #' + (selectedUpload ? selectedUpload.id : '')" :visible.sync="annotateVisible" width="800px" :close-on-click-modal="false">
      <div v-loading="annotateLoading">
        <el-descriptions :column="2" border size="small" v-if="selectedUpload">
          <el-descriptions-item label="文件">{{ selectedUpload.fileUrl }}</el-descriptions-item>
          <el-descriptions-item label="上传时间">{{ formatTime(selectedUpload.uploadedAt) }}</el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">LLM 解析结果</el-divider>
        <pre class="llm-result">{{ formatJson(selectedLlmResult) }}</pre>

        <el-divider content-position="left">模板预览</el-divider>
        <div v-if="previewBlocks.length" class="trainer-preview">
          <div v-for="(block, bi) in previewBlocks" :key="bi" class="trainer-block">
            <div class="trainer-block-title">{{ block.title }}</div>
            <div v-if="block.type === 'score'" class="trainer-score">
              <span v-for="item in block.items" :key="item.label" class="trainer-score-item">{{ item.label }}: {{ item.value }}</span>
            </div>
            <div v-else-if="block.type === 'indicator'" class="trainer-indicator">
              <div v-for="(item, ii) in block.items" :key="ii" class="trainer-ind-item">
                <span class="t-ind-name">{{ item.name }}</span>
                <span class="t-ind-val">{{ item.value }} {{ item.unit }}</span>
              </div>
            </div>
            <div v-else class="trainer-text">{{ block.content || '(空)' }}</div>
          </div>
        </div>
        <div v-else class="empty-hint">暂无模板预览（请先保存该报告类型的模板）</div>

        <el-divider content-position="left">手动指定报告类型</el-divider>
        <el-form label-width="100px">
          <el-form-item label="报告类型">
            <el-select v-model="annotateForm.typeId" placeholder="选择类型" style="width:100%" @change="onTypeChange">
              <el-option v-for="t in allTypes" :key="t.typeId" :label="t.displayName + ' (' + t.typeId + ')'" :value="t.typeId" />
            </el-select>
          </el-form-item>
          <el-form-item label="确认标注">
            <el-switch v-model="annotateForm.confirmed" :active-value="true" :inactive-value="false" />
            <span class="hint-text">确认后作为训练数据纳入</span>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="annotateVisible = false">取消</el-button>
        <el-button type="primary" :loading="savingAnnotation" @click="saveAnnotation">保存标注</el-button>
      </div>
    </el-dialog>
  </el-table>
  </div>

</div></template>

<script>
import { getUnknownClusters, getClusterUploads, generateTypeFromCluster } from '@/api/reportParser'
import { getReportTemplates } from '@/api/reportTemplate'
import SortMixin from '@/mixins/SortMixin'

export default {
  name: 'ReportCollectorTrainer',
  mixins: [SortMixin],
  data() {
    return {
      loading: false,
      uploadLoading: false,
      annotateLoading: false,
      savingAnnotation: false,
      statusFilter: '',
      clusters: [],
      sortableColumns: { id: 'ID', reportCount: '报告数', clusterKey: '聚类键' },
      currentCluster: null,
      uploads: [],
      selectedUpload: null,
      selectedLlmResult: null,
      annotateVisible: false,
      annotateForm: { typeId: '', confirmed: false },
      allTypes: [],
      previewBlocks: []
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 200
    }
  },
  mounted() { this.fetchClusters() },
  methods: {
    loadList() {
      this.fetchClusters()
    },
    fetchClusters() {
      this.loading = true
      var params = { page: 1, size: 100, status: this.statusFilter || undefined }
      if (this.sortState.length > 0) params.sort = this.sortState
      getUnknownClusters(params).then(res => {
        this.clusters = res.data && res.data.records ? res.data.records : (res.data || [])
      }).catch(() => {}).finally(() => { this.loading = false })
    },
    fetchAllTypes() {
      getReportTemplates({}).then(res => {
        this.allTypes = (res.data || []).map(t => ({ typeId: t.reportType, displayName: t.name }))
      }).catch(() => {})
    },
    selectCluster(row) {
      this.currentCluster = row
      this.uploads = []
      this.selectedUpload = null
      this.uploadLoading = true
      getClusterUploads({ clusterId: row.id }).then(res => {
        this.uploads = res.data || []
      }).catch(() => {}).finally(() => { this.uploadLoading = false })
    },
    selectUpload(row) {
      this.selectedUpload = row
      try {
        this.selectedLlmResult = row.llmResult ? JSON.parse(row.llmResult) : {}
      } catch (e) {
        this.selectedLlmResult = {}
      }
      this.annotateForm = { typeId: '', confirmed: false }
      this.previewBlocks = []
      this.annotateVisible = true
      this.fetchAllTypes()
    },
    onTypeChange() {
      // 根据选定类型预览模板渲染效果
      this.previewBlocks = this.renderPreview(this.annotateForm.typeId, this.selectedLlmResult)
    },
    renderPreview(reportType, llmResult) {
      // 简化的预览渲染
      if (!reportType) return []
      var blocks = []
      var payload = llmResult.payload || llmResult
      if (payload.summary) {
        var items = []
        if (payload.summary.overallScore != null) items.push({ label: '综合', value: payload.summary.overallScore })
        if (payload.summary.gutHealthScore != null) items.push({ label: '菌群健康', value: payload.summary.gutHealthScore })
        if (items.length) blocks.push({ type: 'score', title: '健康评分', items: items })
      }
      if (payload.indicators && payload.indicators.length) {
        blocks.push({ type: 'indicator', title: '指标详情', items: payload.indicators })
      }
      return blocks
    },
    handleGenerate(row) {
      this.$confirm('确定由此聚类生成报告类型？', '提示', { type: 'warning' }).then(() => {
        generateTypeFromCluster({ clusterId: row.id }).then(res => {
          this.$message.success('类型已生成: ' + (res.data && res.data.typeId))
          this.fetchClusters()
        }).catch(() => { this.$message.error('生成失败') })
      }).catch(() => {})
    },
    saveAnnotation() {
      if (!this.selectedUpload) return
      this.savingAnnotation = true
      var annotation = JSON.stringify({
        typeId: this.annotateForm.typeId,
        confirmed: this.annotateForm.confirmed,
        llmResult: this.selectedLlmResult
      })
      // 通过 report-parser/unknown-uploads/update 更新标注
      this.$http.post('/api/admin/report-parser/unknown-updates/update', {
        id: this.selectedUpload.id,
        annotation: annotation
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('标注已保存')
          this.annotateVisible = false
          this.selectCluster(this.currentCluster)
        } else {
          this.$message.error(res.message || '保存失败')
        }
      }).catch(() => { this.$message.error('保存失败') }).finally(() => { this.savingAnnotation = false })
    },
    clusterStatusType(s) {
      if (s === 'ready') return 'warning'
      if (s === 'generated' || s === 'imported') return 'success'
      return 'info'
    },
    clusterStatusText(s) {
      var map = { collecting: '收集中', ready: '可生成', generated: '已生成', imported: '已导入' }
      return map[s] || s
    },
    formatJson(str) {
      if (!str) return ''
      try { return JSON.stringify(JSON.parse(str), null, 2) } catch (e) { return str }
    },

  }
}
</script>

<style scoped>
.report-trainer { padding: 16px; }
.llm-result { background: #f5f7fa; padding: 12px; border-radius: 4px; font-size: 13px; max-height: 300px; overflow: auto; white-space: pre-wrap; }
.hint-text { margin-left: 8px; color: #999; font-size: 12px; }
.trainer-preview { border: 1px solid #ebeef5; border-radius: 8px; padding: 12px; margin-top: 8px; }
.trainer-block { margin-bottom: 12px; }
.trainer-block-title { font-weight: bold; font-size: 14px; color: #303133; margin-bottom: 6px; }
.trainer-score { display: flex; flex-wrap: wrap; gap: 8px; }
.trainer-score-item { background: #f0f9ff; padding: 4px 12px; border-radius: 4px; font-size: 13px; }
.trainer-indicator { max-height: 200px; overflow-y: auto; }
.trainer-ind-item { display: flex; padding: 4px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.t-ind-name { flex: 1; color: #333; }
.t-ind-val { color: #666; margin-left: 12px; }
.trainer-text { font-size: 13px; color: #555; line-height: 1.6; }
.empty-hint { color: #bbb; text-align: center; padding: 20px; }
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
</style>