meilan-web/src/views/performanceManage/performanceConfig/index.vue

<template>
  <div class="app-container">
    <el-card>
      <!-- 第一行：标题 -->
      <div class="header-section">
        <h2 class="section-title">绩效指标</h2>
      </div>

      <!-- 第二行：多选按钮组 -->
      <div class="button-group-section">
        <el-checkbox-group v-model="selectedIndicators" class="indicator-checkbox-group" :min="3">
          <el-checkbox-button v-for="indicator in indicatorOptions" :key="indicator.value" :label="indicator.value" disabled>
            {{ indicator.label }}
          </el-checkbox-button>
        </el-checkbox-group>
      </div>

      <!-- 第三行：绩效矩阵标题 -->
      <div class="header-section" style="margin-top: 30px;">
        <h2 class="section-title">绩效矩阵</h2>
      </div>

      <!-- 第四行：默认值说明 -->
      <!-- <div class="default-value-section">
        <p class="default-value-text">
          默认值a=3,b=5,c=2;abc可编辑，编辑后，计算逻辑按照下图取倒数
        </p>
      </div> -->

      <!-- 第五行：绩效矩阵表格 -->
      <div class="matrix-section">

        <el-table :data="matrixData" border style="width:600px; margin-top: 20px;" class="performance-matrix">

          <!-- 表头 -->
          <el-table-column label="" prop="rowName" align="center" width="120" fixed />

          <el-table-column v-for="header in matrixHeaders" :key="header" :label="header" align="center" min-width="120">
            <template #default="scope">
              <div v-if="scope.row.rowName === '查获效率' && header === '查获效率'" class="fixed-cell">
                1
              </div>
              <div v-else-if="scope.row.rowName === '查获效率' && header === '巡检合格率'" class="editable-cell">
                <el-input-number v-model="aValue" :min="1" :step="1" controls-position="right" size="small"
                  style="width: 100%;" />
              </div>
              <div v-else-if="scope.row.rowName === '查获效率' && header === '抽问抽答正确率'" class="editable-cell">
                <el-input-number v-model="bValue" :min="1" :step="1" controls-position="right" size="small"
                  style="width: 100%;" />
              </div>
              <div v-else-if="scope.row.rowName === '巡检合格率' && header === '查获效率'" class="calculated-cell">
                {{ reciprocalA }}
              </div>
              <div v-else-if="scope.row.rowName === '巡检合格率' && header === '巡检合格率'" class="fixed-cell">
                1
              </div>
              <div v-else-if="scope.row.rowName === '巡检合格率' && header === '抽问抽答正确率'" class="editable-cell">
                <el-input-number v-model="cValue" :min="1" :step="1" controls-position="right" size="small"
                  style="width: 100%;" />
              </div>
              <div v-else-if="scope.row.rowName === '抽问抽答正确率' && header === '查获效率'" class="calculated-cell">
                {{ reciprocalB }}
              </div>
              <div v-else-if="scope.row.rowName === '抽问抽答正确率' && header === '巡检合格率'" class="calculated-cell">
                {{ reciprocalC }}
              </div>
              <div v-else-if="scope.row.rowName === '抽问抽答正确率' && header === '抽问抽答正确率'" class="fixed-cell">
                1
              </div>
              <div v-else>
                -
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="matrix-actions" style="margin-bottom: 20px;">
          <el-button type="primary" @click="handleSaveMatrixConfig">保存配置</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getMatrixConfig, saveMatrixConfig } from '@/api/performance/performance.js'

// 绩效指标选项
const indicatorOptions = [
  { label: '查获效率', value: 'detectionEfficiency' },
  { label: '巡检合格率', value: 'inspectionPassRate' },
  { label: '抽问抽答正确率', value: 'trainingScore' }
]

// 选中的指标（默认全选）
const selectedIndicators = ref(['detectionEfficiency', 'inspectionPassRate', 'trainingScore'])

// 矩阵表头
const matrixHeaders = ['查获效率', '巡检合格率', '抽问抽答正确率']

// 矩阵数据（简化版，主要用于显示行名）
const matrixData = reactive([
  { rowName: '查获效率' },
  { rowName: '巡检合格率' },
  { rowName: '抽问抽答正确率' }
])

// 可编辑的a、b、c值
const aValue = ref(0)
const bValue = ref(0)
const cValue = ref(0)

// 计算值（使用computed实现自动更新）
const reciprocalA = computed(() => `1/${aValue.value}`)
const reciprocalB = computed(() => `1/${bValue.value}`)
const reciprocalC = computed(() => `1/${cValue.value}`)

// 保存绩效矩阵配置
const handleSaveMatrixConfig = async () => {
  try {
    const params = {
      a: aValue.value,
      b: bValue.value,
      c: cValue.value
    }

    const response = await saveMatrixConfig(params)

    if (response.code === 200) {
      ElMessage.success('保存成功')
    } else {
      ElMessage.error('保存失败：' + response.msg)
    }
  } catch (error) {
    console.error('保存配置异常:', error)
    ElMessage.error('保存失败，请重试')
  }
}

// 获取绩效矩阵配置
const fetchMatrixConfig = async () => {
  try {
    const response = await getMatrixConfig({})

    if (response.code === 200 && response.data) {
      const { paramA, paramB, paramC } = response.data
      // 设置从接口返回的a、b、c值
      aValue.value = paramA || 0
      bValue.value = paramB || 0
      cValue.value = paramC || 0
    }
  } catch (error) {
    console.error('获取配置异常:', error)
    // 使用默认值
    aValue.value = 3
    bValue.value = 5
    cValue.value = 2
  }
}

onMounted(() => {
  // 页面加载时获取配置
  fetchMatrixConfig()
})
</script>

<style lang="less" scoped>
.app-container {
  padding: 20px;
}

.header-section {
  margin-bottom: 20px;

  .section-title {
    margin: 0;
    color: #303133;
    font-size: 18px;
    font-weight: 600;
  }
}

.button-group-section {
  margin-bottom: 30px;

  .indicator-checkbox-group {
    display: flex;
    gap: 10px;

    :deep(.el-checkbox-button) {
      .el-checkbox-button__inner {
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;

        &:hover {
          color: #409EFF;
          border-color: #409EFF;
        }
      }

      &.is-checked {
        .el-checkbox-button__inner {
          background-color: #409EFF;
          border-color: #409EFF;
          color: #fff;

          &:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
          }
        }
      }
    }
  }
}

.default-value-section {
  margin: 20px 0;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border-left: 4px solid #409EFF;

  .default-value-text {
    margin: 0;
    color: #606266;
    font-size: 14px;
    line-height: 1.5;
  }
}

.matrix-section {
  .matrix-actions {
    margin-top: 20px;
  }

  .performance-matrix {
    :deep(.el-table__header-wrapper) {
      th {
        background-color: #f5f7fa;
        font-weight: 600;
        color: #303133;
      }
    }

    :deep(.el-table__body-wrapper) {
      td {
        .fixed-cell {
          color: #303133;
          font-weight: 600;
        }

        .editable-cell {
          padding: 4px;
        }

        .calculated-cell {
          color: #409EFF;
          font-weight: 500;
        }

        &:not(:first-child) {
          font-weight: 500;
        }
      }
    }
  }
}
</style>