ccdi/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue

<template>
  <section class="risk-model-section">
    <div class="section-card">
      <div class="block">
        <div class="block-header">
          <div>
            <div class="block-title">模型预警次数统计</div>
            <div class="block-subtitle">按模型汇总预警命中次数与涉及人数</div>
          </div>
          <el-button size="mini" type="text">导出</el-button>
        </div>

        <div class="model-card-grid">
          <div
            v-for="item in sectionData.cardList || []"
            :key="item.key"
            class="model-card"
          >
            <div class="model-card-title">{{ item.title }}</div>
            <div class="model-card-count">{{ item.count }}</div>
            <div class="model-card-meta">涉及 {{ item.peopleCount }} 人</div>
            <el-button type="text" size="mini">查看详情</el-button>
          </div>
        </div>
      </div>

      <div class="block">
        <div class="block-header">
          <div>
            <div class="block-title">命中模型涉及人员</div>
            <div class="block-subtitle">基于筛选条件查看模型命中人员</div>
          </div>
        </div>

        <div class="filter-bar">
          <div class="filter-item">
            <span class="filter-label">筛查模型</span>
            <el-select
              :value="sectionData.filterValues && sectionData.filterValues.model"
              size="mini"
              placeholder="请选择筛查模型"
            >
              <el-option
                v-for="item in (sectionData.filterOptions && sectionData.filterOptions.modelOptions) || []"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <div class="filter-item">
            <span class="filter-label">预警类型</span>
            <el-select
              :value="sectionData.filterValues && sectionData.filterValues.warningType"
              size="mini"
              placeholder="请选择预警类型"
            >
              <el-option
                v-for="item in (sectionData.filterOptions && sectionData.filterOptions.warningTypeOptions) || []"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>

        <el-table :data="sectionData.peopleList || []" class="model-table">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="name" label="姓名" min-width="100" />
          <el-table-column prop="idNo" label="身份证号" min-width="180" />
          <el-table-column prop="department" label="所属部门" min-width="140" />
          <el-table-column prop="warningType" label="预警类型" min-width="120" />
          <el-table-column prop="modelName" label="筛查模型" min-width="180" />
          <el-table-column label="操作" width="100" align="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini">{{ scope.row.actionLabel || "查看详情" }}</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-bar">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="5"
            :total="(sectionData.peopleList || []).length"
          />
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "RiskModelSection",
  props: {
    sectionData: {
      type: Object,
      default: () => ({}),
    },
  },
};
</script>

<style lang="scss" scoped>
.risk-model-section {
  margin-bottom: 16px;
}

.section-card {
  padding: 20px;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.block + .block {
  margin-top: 24px;
}

.block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.block-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.block-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #94a3b8;
}

.model-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.model-card {
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.model-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.model-card-count {
  margin-top: 12px;
  font-size: 28px;
  font-weight: 700;
  color: #2563eb;
}

.model-card-meta {
  margin-top: 8px;
  font-size: 12px;
  color: #94a3b8;
}

.filter-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f8fafc;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 12px;
  color: #64748b;
}

.model-table {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.model-table th) {
  background: #f8fafc;
  color: #64748b;
}

.pagination-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>