首页-员工添加扣分工单反馈列表

ygtx-ui/src/components/Dashboard/ChartsGroupThree.vue

@@ -13,6 +13,46 @@
         <div ref="personalPointsChart" class="chart"></div>
       </div>
     </el-col>
+    
+    <!-- 扣分工单列表 -->
+    <el-col :span="24" v-if="showDeductionPointList">
+      <div class="table-container floating-card">
+        <div class="table-title">扣分工单反馈列表</div>
+        <el-table :data="deductionPointList" style="width: 100%;margin-top: 20px;" :empty-text="deductionPointListEmptyText">
+          <el-table-column prop="code" label="工单编码" width="400"></el-table-column>
+          <el-table-column prop="deductionPoint" label="扣分值" width="200">
+            <template #default="scope">
+              <span v-if="scope && scope.row" style="color: red;">
+                {{ scope.row.deductionPoint }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="扣分原因"></el-table-column>
+          <el-table-column prop="status" label="处理状态" width="200">
+            <template #default="scope">
+              <span v-if="scope && scope.row">
+                <el-tag v-if="scope.row.status === '0'" type="warning">待反馈</el-tag>
+                <el-tag v-else-if="scope.row.status === '1'" type="success">已处理</el-tag>
+                <el-tag v-else type="info">未知</el-tag>
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="200">
+            <template #default="scope">
+              <span v-if="scope && scope.row">
+                <el-button 
+                  type="text" 
+                  style="color: #165dff"
+                  @click="handleFeedback(scope.row)"
+                >
+                  反馈
+                </el-button>
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-col>
   </el-row>
 </template>
 
@@ -34,6 +74,9 @@ export default {
       personalPointsChart: null,
       showPersonalWorkOrderChart: true, // 控制个人工单完成情况图表的显示
       showPersonalPointsChart: true, // 控制个人工分统计图表的显示
+      deductionPointList: [], // 扣分工单列表数据
+      showDeductionPointList: false, // 控制扣分工单列表的显示
+      deductionPointListEmptyText: '当前没有扣分工单' // 空数据时的提示文本
     }
   },
   watch: {
@@ -101,6 +144,17 @@ export default {
             this.personalPointsChart = null;
           }
         }
+        
+        // 处理扣分工单列表数据
+        if (response && response.deductionPointStatistics !== null && response.deductionPointStatistics !== undefined) {
+          // 当deductionPointStatistics不为null时显示列表
+          this.showDeductionPointList = true;
+          this.deductionPointList = response.deductionPointStatistics;
+        } else {
+          // 当deductionPointStatistics为null时隐藏列表
+          this.showDeductionPointList = false;
+          this.deductionPointList = [];
+        }
       } catch (error) {
         console.error('获取图表数据失败:', error);
         // 出错时隐藏图表
@@ -115,6 +169,9 @@ export default {
           this.personalPointsChart.dispose();
           this.personalPointsChart = null;
         }
+        // 出错时隐藏列表
+        this.showDeductionPointList = false;
+        this.deductionPointList = [];
       }
     },
     
@@ -366,6 +423,13 @@ export default {
           chart.resize();
         }
       });
+    },
+    
+    // 处理反馈按钮点击事件
+    handleFeedback(row) {
+      // 这里可以添加反馈逻辑，比如打开一个对话框或跳转到反馈页面
+      console.log('点击反馈按钮，工单信息：', row);
+      this.$message.info('反馈功能待实现');
     }
   }
 }
@@ -376,6 +440,7 @@ export default {
 .floating-card {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
+  position: relative;
 }
 
 .floating-card:hover {
@@ -404,6 +469,28 @@ export default {
   height: 100%;
 }
 
+/* 表格容器样式 */
+.table-container {
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 8px;
+  padding: 20px;
+  margin-top: 20px;
+  box-sizing: border-box;
+  backdrop-filter: blur(5px);
+  position: relative;
+}
+
+/* 表格标题样式 - 与图表标题保持一致 */
+.table-title {
+  position: absolute;
+  left: 20px;
+  top: 10px;
+  font-size: 18px; /* 与ECharts默认标题大小一致 */
+  font-weight: bold;
+  color: #333;
+  z-index: 1;
+}
+
 .post-type-debug {
   margin-top: 10px;
   padding: 5px;