feat(绩效管理): 重构考核指标模块并添加汇总图表功能

重构非干部考核指标数据结构，将核心指标和其他指标合并为可配置的指标组
添加指标编辑对话框，支持奖励和惩罚明细的录入
在月度考核汇总页面新增多个图表展示考核数据分布
优化响应式布局，适配不同屏幕尺寸

src/views/performanceManage/monthlyAssess/index.vue

@@ -212,40 +212,22 @@
         </el-row>
 
         <!-- 考核指标区域 -->
-        <div class="section-title blue">考核指标</div>
+        <div class="section-title blue" style="cursor: pointer;" @click="addIndicator(0)">考核指标</div>
         <div class="indicators-box">
-          <!-- 核心指标 -->
-          <div class="indicator-group">
-            <div class="indicator-group-title">核心指标</div>
-            <div class="indicator-item" v-for="(item, index) in nonCadreForm.coreIndicators" :key="index">
+          <div v-for="(group, groupIndex) in nonCadreForm.indicatorGroups" :key="groupIndex" class="indicator-group">
+            <div class="indicator-group-title">{{ group.title }}</div>
+            <div v-for="(item, itemIndex) in group.items" :key="itemIndex" class="indicator-item">
               <div class="indicator-name">{{ item.name }}</div>
               <div class="indicator-value">{{ item.score }}/次</div>
               <div class="indicator-count">{{ item.count }}次</div>
               <div class="indicator-source">{{ item.source }}</div>
               <div class="indicator-total">{{ item.total }}</div>
               <div class="indicator-actions">
-                <el-button type="primary" link icon="Edit" @click="editIndicator('core', index)">编辑</el-button>
-                <el-button type="danger" link icon="Delete" @click="deleteIndicator('core', index)">删除</el-button>
+                <el-button type="primary" link icon="Edit" @click="editIndicator(groupIndex, itemIndex)"></el-button>
+                <el-button type="danger" link icon="Delete" @click="deleteIndicator(groupIndex, itemIndex)"></el-button>
               </div>
             </div>
-            <el-button type="primary" plain icon="Plus" @click="addIndicator('core')" style="margin-top: 10px;">添加核心指标</el-button>
-          </div>
-
-          <!-- 其他指标 -->
-          <div class="indicator-group" style="margin-top: 20px;">
-            <div class="indicator-group-title">其他指标</div>
-            <div class="indicator-item" v-for="(item, index) in nonCadreForm.otherIndicators" :key="index">
-              <div class="indicator-name">{{ item.name }}</div>
-              <div class="indicator-value">{{ item.score }}/次</div>
-              <div class="indicator-count">{{ item.count }}次</div>
-              <div class="indicator-source">{{ item.source }}</div>
-              <div class="indicator-total">{{ item.total }}</div>
-              <div class="indicator-actions">
-                <el-button type="primary" link icon="Edit" @click="editIndicator('other', index)">编辑</el-button>
-                <el-button type="danger" link icon="Delete" @click="deleteIndicator('other', index)">删除</el-button>
-              </div>
-            </div>
-            <el-button type="primary" plain icon="Plus" @click="addIndicator('other')" style="margin-top: 10px;">添加其他指标</el-button>
+            <el-button type="primary" plain icon="Plus" @click="addIndicator(groupIndex)" style="margin-top: 10px;">添加指标</el-button>
           </div>
         </div>
 
@@ -523,6 +505,69 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 第二个模态框：添加/编辑扣分指标 -->
+    <el-dialog :title="indicatorDialog.title" v-model="indicatorDialog.visible" width="60%">
+      <el-form label-width="150px" class="indicator-form">
+        <el-form-item label="指标名称">
+          <div style="display: flex; align-items: center; gap: 10px; width: 100%;">
+            <el-select v-model="indicatorDialog.form.name" placeholder="下拉菜单" filterable style="flex: 1;" @change="onIndicatorNameChange">
+              <el-option v-for="item in indicatorNameOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          
+          </div>
+        </el-form-item>
+
+        <el-form-item label="分值/单位">
+          <div style="display: flex; align-items: center; gap: 10px;">
+            <span style="font-size: 24px; font-weight: bold;">{{ indicatorDialog.form.score }}/次</span>
+           
+          </div>
+        </el-form-item>
+
+        <el-form-item label="发生次数">
+          <div style="display: flex; align-items: center; gap: 10px;">
+            <el-input-number v-model="indicatorDialog.form.count" :min="1" style="width: 200px;" @change="updateTotal" />
+          
+          </div>
+        </el-form-item>
+
+        <el-form-item label="检查部门">
+          <el-select v-model="indicatorDialog.form.source" placeholder="请选择" style="width: 200px;">
+            <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="奖励明细">
+          <el-input v-model="indicatorDialog.form.rewardDetails" type="textarea" :rows="2" />
+        </el-form-item>
+
+        <el-form-item label="奖励">
+          <div style="display: flex; align-items: center; gap: 10px;">
+            <el-input-number v-model="indicatorDialog.form.reward" :min="0" :precision="2" style="width: 200px;" />
+            <span>元</span>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="惩罚明细">
+          <el-input v-model="indicatorDialog.form.penaltyDetails" type="textarea" :rows="2" />
+        </el-form-item>
+
+        <el-form-item label="扣罚">
+          <div style="display: flex; align-items: center; gap: 10px;">
+            <el-input-number v-model="indicatorDialog.form.penalty" :min="0" :precision="2" style="width: 200px;" />
+            <span>元</span>
+          </div>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="indicatorDialog.visible = false">取消</el-button>
+          <el-button type="primary" @click="saveIndicator">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -585,14 +630,43 @@ const nonCadreForm = reactive({
   applicationMethodRemark: '',
   isExempted: false,
   exemptionRemark: '',
-  coreIndicators: [
-    { name: '核心指标细项', score: -3, count: 3, source: 'SOC', total: -9 }
-  ],
-  otherIndicators: [
-    { name: '其他指标细项', score: -3, count: 1, source: '品控', total: -3 }
+  // 两级结构的考核指标
+  indicatorGroups: [
+    {
+      title: '核心指标',
+      items: [
+        { name: '核心指标细项', score: -3, count: 3, source: 'SOC', total: -9, rewardDetails: '', reward: 0, penaltyDetails: '', penalty: 0 }
+      ]
+    },
+    {
+      title: '其他指标',
+      items: [
+        { name: '其他指标细项', score: -3, count: 1, source: '品控', total: -3, rewardDetails: '', reward: 0, penaltyDetails: '', penalty: 0 }
+      ]
+    }
   ]
 })
 
+// 第二个模态框状态
+const indicatorDialog = reactive({
+  visible: false,
+  title: '',
+  mode: 'add', // add or edit
+  groupIndex: null,
+  itemIndex: null,
+  form: {
+    name: '',
+    score: -3,
+    count: 1,
+    source: '其他',
+    total: 0,
+    rewardDetails: '',
+    reward: 0,
+    penaltyDetails: '',
+    penalty: 0
+  }
+})
+
 // 干部表单数据
 const cadreForm = reactive({
   employeeName: '',
@@ -644,6 +718,21 @@ const applicationMethodOptions = [
   { label: '特殊处理', value: 'special' }
 ]
 
+// 指标名称选项
+const indicatorNameOptions = [
+  { label: '核心指标细项', value: '核心指标细项', score: -3 },
+  { label: '其他指标细项', value: '其他指标细项', score: -3 },
+  { label: '红线指标细项', value: '红线指标细项', score: -5 },
+  { label: '安全指标细项', value: '安全指标细项', score: -4 }
+]
+
+// 检查部门选项
+const sourceOptions = [
+  { label: 'SOC', value: 'SOC' },
+  { label: '品控', value: '品控' },
+  { label: '其他', value: '其他' }
+]
+
 // 非干部表单验证规则
 const nonCadreRules = {
   employeeName: [{ required: true, message: '员工姓名不能为空', trigger: 'blur' }],
@@ -820,32 +909,77 @@ const getResultText = (value) => {
   return map[value] || ''
 }
 
-// 添加指标
-const addIndicator = (type) => {
-  ElMessage.success('添加功能开发中')
+// 添加指标 - 打开新增模态框
+const addIndicator = (groupIndex) => {
+  indicatorDialog.visible = true
+  indicatorDialog.title = '添加扣分指标'
+  indicatorDialog.mode = 'add'
+  indicatorDialog.groupIndex = groupIndex
+  indicatorDialog.itemIndex = null
+  indicatorDialog.form = {
+    name: '',
+    score: -3,
+    count: 1,
+    source: '其他',
+    total: 0,
+    rewardDetails: '',
+    reward: 0,
+    penaltyDetails: '',
+    penalty: 0
+  }
 }
 
-// 编辑指标
-const editIndicator = (type, index) => {
-  ElMessage.success('编辑功能开发中')
+// 编辑指标 - 打开编辑模态框
+const editIndicator = (groupIndex, itemIndex) => {
+  const item = nonCadreForm.indicatorGroups[groupIndex].items[itemIndex]
+  indicatorDialog.visible = true
+  indicatorDialog.title = '编辑扣分指标'
+  indicatorDialog.mode = 'edit'
+  indicatorDialog.groupIndex = groupIndex
+  indicatorDialog.itemIndex = itemIndex
+  indicatorDialog.form = { ...item }
 }
 
 // 删除指标
-const deleteIndicator = (type, index) => {
+const deleteIndicator = (groupIndex, itemIndex) => {
   ElMessageBox.confirm('确认删除该指标吗？', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
-    if (type === 'core') {
-      nonCadreForm.coreIndicators.splice(index, 1)
-    } else {
-      nonCadreForm.otherIndicators.splice(index, 1)
-    }
+    nonCadreForm.indicatorGroups[groupIndex].items.splice(itemIndex, 1)
     ElMessage.success('删除成功')
   }).catch(() => {})
 }
 
+// 指标名称变化时更新分值
+const onIndicatorNameChange = (value) => {
+  const selected = indicatorNameOptions.find(item => item.value === value)
+  if (selected) {
+    indicatorDialog.form.score = selected.score
+    updateTotal()
+  }
+}
+
+// 更新总分
+const updateTotal = () => {
+  indicatorDialog.form.total = indicatorDialog.form.score * indicatorDialog.form.count
+}
+
+// 保存指标
+const saveIndicator = () => {
+  if (indicatorDialog.mode === 'add') {
+    // 新增
+    nonCadreForm.indicatorGroups[indicatorDialog.groupIndex].items.push({ ...indicatorDialog.form })
+    ElMessage.success('添加成功')
+  } else {
+    // 编辑
+    Object.assign(nonCadreForm.indicatorGroups[indicatorDialog.groupIndex].items[indicatorDialog.itemIndex], indicatorDialog.form)
+    ElMessage.success('修改成功')
+  }
+  indicatorDialog.visible = false
+}
+
 // 监听Tab切换
 const handleTabChange = () => {
   queryParams.pageNum = 1
@@ -946,7 +1080,7 @@ onMounted(() => {
 
 .section-title.blue {
   color: #409eff;
-  border-left: 4px solid #409eff;
+  // border-left: 4px solid #409eff;
 }
 
 .indicators-box {
@@ -1012,4 +1146,14 @@ onMounted(() => {
 .exemption-hint {
   font-size: 12px;
 }
+
+.indicator-form {
+  padding: 20px 0;
+}
+
+.indicator-form :deep(.el-form-item__label) {
+  font-size: 20px;
+  font-weight: 500;
+  color: #303133;
+}
 </style>

src/views/performanceManage/monthlyAssessSum/index.vue

@@ -64,9 +64,9 @@
       </div>
     </div>
 
-    <!-- 分干部月度考核分类结果汇总 -->
+    <!-- 非干部月度考核分类结果汇总 -->
     <div class="main-section">
-      <h2 class="section-title">分干部月度考核分类结果汇总</h2>
+      <h2 class="section-title">非干部月度考核分类结果汇总</h2>
       
       <!-- 汇总统计表格 -->
       <el-card class="summary-table-card">
@@ -104,6 +104,78 @@
         </el-card>
       </div>
     </div>
+
+    <!-- 第一个遍历：表格和两个饼状图 -->
+    <div class="traversal-section">
+      <div v-for="(item, index) in traversalData1" :key="index" class="traversal-container">
+        <div class="traversal-header">{{ item.title }}</div>
+        <div class="traversal-content">
+          <!-- 左边表格 -->
+          <div class="table-section">
+            <el-table :data="item.tableData" border style="width: 100%;">
+              <el-table-column prop="brigade" label="大队" align="center" min-width="100" />
+              <el-table-column prop="assessmentGroup" label="考核组" align="center" min-width="100" />
+              <el-table-column prop="groupCount" label="考核组人数" align="center" min-width="120" />
+              <el-table-column prop="calculatedImprovement" label="测算待改进人数" align="center" min-width="140" />
+              <el-table-column prop="improvementCount" label="待改进人数" align="center" min-width="120" />
+              <el-table-column prop="exemption1" label="豁免" align="center" min-width="80" />
+              <el-table-column prop="actualImprovement" label="实际待改进人数" align="center" min-width="140" />
+              <el-table-column prop="unqualifiedCount" label="不称职人数" align="center" min-width="120" />
+              <el-table-column prop="exemption2" label="豁免" align="center" min-width="80" />
+              <el-table-column prop="actualUnqualified" label="实际不称职人数" align="center" min-width="140" />
+            </el-table>
+          </div>
+          
+          <!-- 右边两个饼状图 -->
+          <div class="chart-section">
+            <div class="pie-chart-container">
+              <div class="pie-chart-title">考核结果分布</div>
+              <div :ref="el => setTraversalChartRef(el, `pieChart1_${index}`)" class="pie-chart"></div>
+            </div>
+            <div class="pie-chart-container">
+              <div class="pie-chart-title">改进情况分布</div>
+              <div :ref="el => setTraversalChartRef(el, `pieChart2_${index}`)" class="pie-chart"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 第二个遍历：表格、柱状图和饼状图 -->
+    <div class="traversal-section">
+      <div v-for="(item, index) in traversalData2" :key="index" class="traversal-container">
+        <div class="traversal-header">{{ item.title }}</div>
+        <div class="traversal-content">
+          <!-- 左边表格 -->
+          <div class="table-section">
+            <el-table :data="item.tableData" border style="width: 100%;">
+              <el-table-column prop="brigade" label="大队" align="center" min-width="100" />
+              <el-table-column prop="assessmentGroup" label="考核组" align="center" min-width="100" />
+              <el-table-column prop="groupCount" label="考核组人数" align="center" min-width="120" />
+              <el-table-column prop="calculatedImprovement" label="测算待改进人数" align="center" min-width="140" />
+              <el-table-column prop="improvementCount" label="待改进人数" align="center" min-width="120" />
+              <el-table-column prop="exemption1" label="豁免" align="center" min-width="80" />
+              <el-table-column prop="actualImprovement" label="实际待改进人数" align="center" min-width="140" />
+              <el-table-column prop="unqualifiedCount" label="不称职人数" align="center" min-width="120" />
+              <el-table-column prop="exemption2" label="豁免" align="center" min-width="80" />
+              <el-table-column prop="actualUnqualified" label="实际不称职人数" align="center" min-width="140" />
+            </el-table>
+          </div>
+          
+          <!-- 右边柱状图和饼状图 -->
+          <div class="chart-section">
+            <div class="bar-chart-container">
+              <div class="chart-title">考核分数分布</div>
+              <div :ref="el => setTraversalChartRef(el, `barChart_${index}`)" class="bar-chart"></div>
+            </div>
+            <div class="pie-chart-container">
+              <div class="pie-chart-title">岗位分布</div>
+              <div :ref="el => setTraversalChartRef(el, `pieChart3_${index}`)" class="pie-chart"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -133,6 +205,9 @@ const brigadePieChart2 = ref(null)
 const positionPieChart1 = ref(null)
 const positionPieChart2 = ref(null)
 
+// 遍历图表引用
+const traversalChartsRefs = ref({})
+
 // 表格数据
 const summaryTableData = ref([
   { range: '90-100分', simulationScore: '85', team1: '15', team2: '20', team3: '25' },
@@ -155,6 +230,30 @@ const classificationTableData = ref([
   }
 ])
 
+// 遍历数据
+const traversalData1 = ref([
+  {
+    title: '大队考核统计',
+    tableData: [
+      { brigade: '一大队', assessmentGroup: '一组', groupCount: 50, calculatedImprovement: 8, improvementCount: 6, exemption1: 1, actualImprovement: 5, unqualifiedCount: 2, exemption2: 0, actualUnqualified: 2 },
+      { brigade: '一大队', assessmentGroup: '二组', groupCount: 45, calculatedImprovement: 7, improvementCount: 5, exemption1: 1, actualImprovement: 4, unqualifiedCount: 1, exemption2: 0, actualUnqualified: 1 },
+      { brigade: '二大队', assessmentGroup: '一组', groupCount: 55, calculatedImprovement: 9, improvementCount: 7, exemption1: 1, actualImprovement: 6, unqualifiedCount: 3, exemption2: 1, actualUnqualified: 2 },
+      { brigade: '二大队', assessmentGroup: '二组', groupCount: 48, calculatedImprovement: 6, improvementCount: 5, exemption1: 0, actualImprovement: 5, unqualifiedCount: 2, exemption2: 0, actualUnqualified: 2 }
+    ]
+  }
+])
+
+const traversalData2 = ref([
+  {
+    title: '岗位考核统计',
+    tableData: [
+      { brigade: '安检员', assessmentGroup: '一组', groupCount: 60, calculatedImprovement: 10, improvementCount: 8, exemption1: 1, actualImprovement: 7, unqualifiedCount: 3, exemption2: 0, actualUnqualified: 3 },
+      { brigade: '安检员', assessmentGroup: '二组', groupCount: 55, calculatedImprovement: 8, improvementCount: 6, exemption1: 1, actualImprovement: 5, unqualifiedCount: 2, exemption2: 0, actualUnqualified: 2 },
+      { brigade: '设备操作员', assessmentGroup: '一组', groupCount: 40, calculatedImprovement: 5, improvementCount: 4, exemption1: 0, actualImprovement: 4, unqualifiedCount: 1, exemption2: 0, actualUnqualified: 1 }
+    ]
+  }
+])
+
 // 图表实例
 let overallBarChartInstance = null
 let participantPieChartInstance = null
@@ -281,6 +380,91 @@ const initCharts = () => {
   })
 }
 
+// 设置遍历图表引用
+const setTraversalChartRef = (el, key) => {
+  if (el) {
+    traversalChartsRefs.value[key] = el
+  }
+}
+
+// 初始化遍历图表
+const initTraversalCharts = () => {
+  nextTick(() => {
+    // 第一个遍历的饼状图
+    traversalData1.value.forEach((item, index) => {
+      // 饼状图1：考核结果分布
+      const pieChart1Key = `pieChart1_${index}`
+      if (traversalChartsRefs.value[pieChart1Key]) {
+        const pieChart1 = echarts.init(traversalChartsRefs.value[pieChart1Key])
+        pieChart1.setOption({
+          tooltip: { trigger: 'item' },
+          series: [{
+            type: 'pie',
+            radius: '70%',
+            data: [
+              { value: 120, name: '优秀' },
+              { value: 280, name: '合格' },
+              { value: 75, name: '待改进' }
+            ]
+          }]
+        })
+      }
+
+      // 饼状图2：改进情况分布
+      const pieChart2Key = `pieChart2_${index}`
+      if (traversalChartsRefs.value[pieChart2Key]) {
+        const pieChart2 = echarts.init(traversalChartsRefs.value[pieChart2Key])
+        pieChart2.setOption({
+          tooltip: { trigger: 'item' },
+          series: [{
+            type: 'pie',
+            radius: '70%',
+            data: [
+              { value: 15, name: '已改进' },
+              { value: 60, name: '待改进' },
+              { value: 5, name: '未改进' }
+            ]
+          }]
+        })
+      }
+    })
+
+    // 第二个遍历的图表
+    traversalData2.value.forEach((item, index) => {
+      // 柱状图：考核分数分布
+      const barChartKey = `barChart_${index}`
+      if (traversalChartsRefs.value[barChartKey]) {
+        const barChart = echarts.init(traversalChartsRefs.value[barChartKey])
+        barChart.setOption({
+          tooltip: { trigger: 'axis' },
+          xAxis: { type: 'category', data: ['90-100分', '80-89分', '70-79分', '60-69分', '60分以下'] },
+          yAxis: { type: 'value' },
+          series: [{ type: 'bar', data: [85, 120, 95, 60, 20], itemStyle: { color: '#3b82f6' } }]
+        })
+      }
+
+      // 饼状图：岗位分布
+      const pieChart3Key = `pieChart3_${index}`
+      if (traversalChartsRefs.value[pieChart3Key]) {
+        const pieChart3 = echarts.init(traversalChartsRefs.value[pieChart3Key])
+        pieChart3.setOption({
+          tooltip: { trigger: 'item' },
+          series: [{
+            type: 'pie',
+            radius: '70%',
+            data: [
+              { value: 150, name: '安检员' },
+              { value: 120, name: '设备操作员' },
+              { value: 80, name: '管理人员' },
+              { value: 50, name: '其他' }
+            ]
+          }]
+        })
+      }
+    })
+  })
+}
+
 // 窗口大小变化时重绘图表
 const handleResize = () => {
   const charts = [
@@ -334,6 +518,7 @@ const handleExport = async () => {
 
 onMounted(() => {
   initCharts()
+  initTraversalCharts()
   window.addEventListener('resize', handleResize)
   getList()
 })
@@ -441,6 +626,70 @@ onUnmounted(() => {
   }
 }
 
+/* 遍历样式 */
+.traversal-section {
+  margin-bottom: 30px;
+}
+
+.traversal-container {
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+
+.traversal-header {
+  background-color: #f5f7fa;
+  padding: 15px 20px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  border-bottom: 1px solid #dcdfe6;
+  text-align: left;
+}
+
+.traversal-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  padding: 20px;
+}
+
+.table-section {
+  min-height: 400px;
+}
+
+.chart-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+  height: 400px;
+}
+
+.pie-chart-container, .bar-chart-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  padding: 10px;
+  background-color: #fff;
+}
+
+.pie-chart-title, .chart-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #606266;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.pie-chart, .bar-chart {
+  flex: 1;
+  min-height: 300px;
+}
+
+/* 响应式布局 */
 @media (max-width: 1200px) {
   .chart-row {
     grid-template-columns: 1fr;
@@ -449,5 +698,33 @@ onUnmounted(() => {
   .pie-charts-container {
     grid-template-columns: 1fr;
   }
+  
+  .traversal-content {
+    grid-template-columns: 1fr;
+    gap: 15px;
+  }
+  
+  .chart-section {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+  
+  .pie-chart, .bar-chart {
+    min-height: 250px;
+  }
+}
+
+@media (max-width: 768px) {
+  .traversal-content {
+    padding: 15px;
+  }
+  
+  .chart-section {
+    gap: 10px;
+  }
+  
+  .pie-chart-container, .bar-chart-container {
+    padding: 8px;
+  }
 }
 </style>