cykj/hzdyjs

0 Fork 0

Files

T

wuzhen c8fb6fa032 wuzhen update

2025-08-01 08:35:47 +08:00

9.0 KiB

Raw Blame History

重新设计绩效指标组件（层级结构）

日期: 2025-08-01
问题: 绩效指标页面报错严重，数据无法正确录入数据库，前后端字段不一致，且缺少正确的层级结构 解决方案: 完全重新设计绩效指标组件，采用正确的层级结构：产出指标、效益指标、满意度指标

🚨 主要问题

前端问题

绩效指标页面各种报错，控制台错误多
复杂的组件结构导致维护困难
数据传递逻辑混乱
Vue组件响应式问题

数据一致性问题

前后端字段映射不一致
绩效指标数据无法正确录入数据库
数据类型转换问题（BigDecimal vs Number）
必填字段缺失导致后端验证失败

🔴 层级结构问题（用户反馈）

缺少正确的绩效指标分类层级
应该按照以下结构组织：
- 产出指标
  - 数量指标
  - 质量指标
  - 时效指标
  - 成本指标
- 效益指标
  - 经济效益指标
  - 社会效益指标
  - 生态效益指标
- 满意度指标
  - 服务对象满意度指标

🔧 重新设计方案（层级结构）

1. 层级组件架构

主组件：PerformanceIndicators.vue

🏗️ 三大分类卡片：产出指标、效益指标、满意度指标
📋 Tab页设计：每个分类下使用Tab页区分具体指标类型
🎨 清晰的视觉层级：使用不同颜色和图标区分各类指标

子组件：IndicatorList.vue

📝 具体指标管理：管理每个指标类型下的具体指标
➕ 动态增删：支持添加和删除具体指标项
✅ 表单验证：每个指标的完整性验证

2. 组件结构设计

PerformanceIndicators.vue (主组件)
├── 产出指标 (Card)
│   ├── 数量指标 (Tab + IndicatorList)
│   ├── 质量指标 (Tab + IndicatorList)
│   ├── 时效指标 (Tab + IndicatorList)
│   └── 成本指标 (Tab + IndicatorList)
├── 效益指标 (Card)
│   ├── 经济效益指标 (Tab + IndicatorList)
│   ├── 社会效益指标 (Tab + IndicatorList)
│   └── 生态效益指标 (Tab + IndicatorList)
└── 满意度指标 (Card)
    └── 服务对象满意度指标 (IndicatorList)

3. 数据结构设计

主组件数据结构：

// 产出指标
const outputIndicators = ref({
  quantity: [],      // 数量指标列表
  quality: [],       // 质量指标列表
  timeliness: [],    // 时效指标列表
  cost: []          // 成本指标列表
})

// 效益指标
const effectIndicators = ref({
  economic: [],      // 经济效益指标列表
  social: [],        // 社会效益指标列表
  ecological: []     // 生态效益指标列表
})

// 满意度指标
const satisfactionIndicators = ref([])  // 服务对象满意度指标列表

统一的指标对象结构：

interface PerformanceIndicator {
  indicatorType: string           // quantity/quality/timeliness/cost/economic/social/ecological/service_satisfaction
  indicatorTypeName: string       // 对应的中文名称
  goalName: string               // 绩效目标名称
  targetValue: string            // 目标值
  unit: string                   // 计量单位
  weightPercentage: number       // 分值占比
  description: string            // 详细说明
  measurementMethod: string      // 测量方法
  dataSource: string            // 数据来源
  isQuantitative: boolean       // 是否定量指标
  sortOrder: number             // 排序
  status: string                // 状态
}

4. UI设计改进

分类卡片设计：

🎯 产出指标：蓝色主题，TrendCharts图标，"数量、质量、时效、成本"标签
💰 效益指标：绿色主题，Money图标，"经济、社会、生态效益"标签
⭐ 满意度指标：橙色主题，Star图标，"服务对象满意度"标签

Tab页设计：

📑 border-card类型：清晰的边框和分隔
🔄 响应式切换：支持在不同指标类型间切换
📊 内容区域：每个Tab内嵌入IndicatorList组件

指标列表设计（IndicatorList）：

📋 卡片布局：每个具体指标一个卡片
🔧 完整表单：目标名称、目标值、单位、分值占比、详细说明
➕ 添加按钮：动态添加同类型指标
❌ 删除功能：删除不需要的指标（保留至少一个）

5. 数据处理逻辑

数据收集逻辑：

const collectAllIndicators = () => {
  const allIndicators = []
  
  // 收集产出指标
  Object.keys(outputIndicators.value).forEach(type => {
    outputIndicators.value[type].forEach((item) => {
      if (item.goalName?.trim()) {
        allIndicators.push({...item, sortOrder: allIndicators.length})
      }
    })
  })
  
  // 收集效益指标
  Object.keys(effectIndicators.value).forEach(type => {
    effectIndicators.value[type].forEach((item) => {
      if (item.goalName?.trim()) {
        allIndicators.push({...item, sortOrder: allIndicators.length})
      }
    })
  })
  
  // 收集满意度指标
  satisfactionIndicators.value.forEach((item) => {
    if (item.goalName?.trim()) {
      allIndicators.push({...item, sortOrder: allIndicators.length})
    }
  })
  
  return allIndicators
}

数据初始化逻辑：

const initializeIndicators = (data) => {
  // 清空现有数据
  outputIndicators.value = { quantity: [], quality: [], timeliness: [], cost: [] }
  effectIndicators.value = { economic: [], social: [], ecological: [] }
  satisfactionIndicators.value = []
  
  // 按类型分配数据
  data.forEach(item => {
    switch (item.indicatorType) {
      case 'quantity': outputIndicators.value.quantity.push(item); break
      case 'quality': outputIndicators.value.quality.push(item); break
      case 'timeliness': outputIndicators.value.timeliness.push(item); break
      case 'cost': outputIndicators.value.cost.push(item); break
      case 'economic': effectIndicators.value.economic.push(item); break
      case 'social': effectIndicators.value.social.push(item); break
      case 'ecological': effectIndicators.value.ecological.push(item); break
      case 'service_satisfaction': satisfactionIndicators.value.push(item); break
    }
  })
}

6. 分值占比计算

跨分类统计：

const totalWeight = computed(() => {
  let total = 0
  
  // 产出指标各类型
  Object.values(outputIndicators.value).forEach(indicators => {
    indicators.forEach(item => total += Number(item.weightPercentage) || 0)
  })
  
  // 效益指标各类型  
  Object.values(effectIndicators.value).forEach(indicators => {
    indicators.forEach(item => total += Number(item.weightPercentage) || 0)
  })
  
  // 满意度指标
  satisfactionIndicators.value.forEach(item => {
    total += Number(item.weightPercentage) || 0
  })
  
  return Math.round(total * 10) / 10
})

7. 校验机制

分层校验：

✅ 基础校验：每个指标的必填字段（目标名称、目标值、分值占比）
✅ 分值校验：所有指标分值占比总和必须等于100%
✅ 数量校验：至少要有一个指标
✅ 类型校验：指标类型和名称的一致性

🧪 测试验证

层级结构测试

产出指标分类：
- 切换到数量指标Tab，添加指标
- 切换到质量指标Tab，添加指标
- 切换到时效指标Tab，添加指标
- 切换到成本指标Tab，添加指标
效益指标分类：
- 切换到经济效益指标Tab，添加指标
- 切换到社会效益指标Tab，添加指标
- 切换到生态效益指标Tab，添加指标
满意度指标：
- 直接添加服务对象满意度指标

数据一致性测试

指标类型自动设置：验证每个Tab下的指标类型字段自动正确设置
分值占比统计：验证跨分类的分值占比总和计算
数据保存加载：验证保存后重新加载时按正确分类显示

用户体验测试

视觉层级：验证三大分类的视觉区分度
操作便捷性：验证Tab切换和指标增删的流畅性
数据展示：验证分值占比实时统计的准确性

🎯 预期效果

层级结构设计后的优势：

✅ 符合业务逻辑：按照标准的绩效指标分类法组织
✅ 操作直观：用户能够快速理解和定位指标类型
✅ 数据清晰：每个分类和类型的指标一目了然
✅ 扩展性好：未来可以轻松添加新的指标类型
✅ 维护性强：组件职责清晰，便于维护和调试

解决的关键问题：

🔧 正确的绩效指标层级结构
🔧 产出指标下的四个子类型清晰分离
🔧 效益指标下的三个子类型清晰分离
🔧 满意度指标独立管理
🔧 跨分类的分值占比统计正确
🔧 数据保存和加载按分类正确处理

用户现在可以按照标准的绩效管理框架设置指标了！

9.0 KiB Raw Blame History Unescape Escape