Преглед изворни кода

驾驶舱页面隐藏逾期作业并重新调整布局;
作业列表内容取消加粗效果,并调整外层状态按钮颜色;

wyn пре 3 месеци
родитељ
комит
6fc2da0206
1 измењених фајлова са 36 додато и 25 уклоњено
  1. 36 25
      src/components/Dashboard.tsx

+ 36 - 25
src/components/Dashboard.tsx

@@ -186,6 +186,7 @@ export default function Dashboard() {
   const [approvalComment, setApprovalComment] = useState('');
   const [approvalLoading, setApprovalLoading] = useState(false);
   const [submitLoading, setSubmitLoading] = useState(false);
+  const [showOverdueJobs, setShowOverdueJobs] = useState(false); // 默认隐藏逾期作业
 
   // 获取统计数据
   const fetchStatistics = async () => {
@@ -1658,13 +1659,13 @@ export default function Dashboard() {
       {/* 作业管理部分 */}
       <div>
         {/* 作业状态统计卡片 */}
-        <div className="flex gap-4 mb-6">
-          {/* 待执行作业 - 色主题 */}
+        <div className="flex mb-6 gap-8">
+          {/* 待执行作业 - 色主题 */}
           <div className="flex-1 bg-white rounded-lg border border-gray-200 p-4 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
             <div className="flex items-start justify-between mb-3">
               <div className="text-sm text-gray-500 font-medium">待执行作业</div>
-              <div className="p-3 rounded-xl flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(249, 115, 22, 0.2)' }}>
-                <Clock className="w-6 h-6 text-orange-700" strokeWidth={2} />
+              <div className="p-3 rounded-xl flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(188, 185, 183, 0.2)' }}>
+                <Clock className="w-6 h-6 text-black-700" strokeWidth={2} />
               </div>
             </div>
             <div>
@@ -1705,19 +1706,29 @@ export default function Dashboard() {
           </div>
           
           {/* 逾期作业 - 红色主题 */}
-          <div className="flex-1 bg-white rounded-lg border border-gray-200 p-4 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
-            <div className="flex items-start justify-between mb-3">
-              <div className="text-sm text-gray-500 font-medium">逾期作业</div>
-              <div className="p-3 rounded-xl flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(239, 68, 68, 0.2)' }}>
-                <AlertTriangle className="w-6 h-6 text-red-700" strokeWidth={2} />
+          {showOverdueJobs && (
+            <div className="flex-1 bg-white rounded-lg border border-red-200 p-4 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
+              <div className="flex items-start justify-between mb-3">
+                <div className="text-sm text-gray-500 font-medium">逾期作业</div>
+                <div className="p-3 rounded-xl flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(239, 68, 68, 0.2)' }}>
+                  <AlertTriangle className="w-6 h-6 text-red-700" strokeWidth={2} />
+                </div>
               </div>
-            </div>
-            <div>
-              <div className="text-2xl font-bold text-gray-900 leading-none">
-                {statistics.overdueJobsCount ?? 0} <span className="text-base font-normal text-gray-500">项</span>
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="text-2xl font-bold text-gray-900 leading-none">
+                    {statistics.overdueJobsCount ?? 0} <span className="text-base font-normal text-gray-500">项</span>
+                  </div>
+                </div>
+                <button
+                  onClick={() => setShowOverdueJobs(false)}
+                  className="text-red-600 text-sm font-medium hover:text-red-700 transition-colors"
+                >
+                  隐藏
+                </button>
               </div>
             </div>
-          </div>
+          )}
         </div>
 
         {/* 作业列表 */}
@@ -1800,7 +1811,7 @@ export default function Dashboard() {
                 {managerWorkList.map((job: ManagerWorkItemVO, index: number) => {
                   const isExpanded = expandedJobs.has(job.id!);
                   const isSelected = selectedJob === job.id;
-                  const statusInfo = getJobStatusInfo(job.status);
+                  const statusInfo = getTaskStatusInfo(job.status);
                   const jobName = job.name || job.orderNo || job.code || `作业#${job.id}`;
                   const responsiblePerson = job.initiatorName || job.initiator || '未分配';
                   
@@ -1819,33 +1830,33 @@ export default function Dashboard() {
                         >
                           {/* 作业名称 - 固定宽度100px,超出显示省略号 */}
                           <div className="flex-shrink-0 min-w-0" style={{ width: '300px' }}>
-                            <span className={`text-base font-bold truncate block ${
+                            <span className={`text-base truncate block ${
                               isSelected ? '' : 'text-gray-900'
-                            }`} style={isSelected ? { color: '#2563eb', fontWeight: 700 } : { fontWeight: 700, color: '#111827' }}>
+                            }`} style={isSelected ? { color: '#2563eb' } : { color: '#111827' }}>
                               {jobName}
                             </span>
                           </div>
                           
                           {/* 状态标签 - 固定宽度 */}
                           <div className="flex-shrink-0 ml-6" style={{ width: '80px',marginRight:'50px' }}>
-                            <span className={`px-2 py-0.5 rounded text-xs font-bold border ${statusInfo.className} whitespace-nowrap inline-block`} style={{ fontWeight: 700 }}>
+                            <span className="inline-flex px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style={statusInfo.style}>
                               {statusInfo.label}
                             </span>
                           </div>
                           
-                          {/* 负责人 - 固定宽度 */}
+                          {/* 作业发起人 - 固定宽度 */}
                           <div className="flex-shrink-0 ml-6" style={{ width: '160px' }}>
-                            <span className={`text-sm font-bold truncate block ${
+                            <span className={`text-sm truncate block ${
                               isSelected ? '' : 'text-gray-900'
-                            }`} style={isSelected ? { color: '#2563eb', fontWeight: 700 } : { fontWeight: 700, color: '#111827' }}>
-                              <span>负责人:</span>{responsiblePerson}
+                            }`} style={isSelected ? { color: '#2563eb' } : { color: '#111827' }}>
+                              <span>作业发起人:</span>{responsiblePerson}
                             </span>
                           </div>
                           {/* 整体进度 - 固定宽度和位置,右对齐 */}
                           <div className="flex-shrink-0" style={{ width: '128px', textAlign: 'right' }}>
-                            <span className={`text-sm font-bold whitespace-nowrap ${
+                            <span className={`text-sm whitespace-nowrap ${
                               isSelected ? '' : 'text-gray-900'
-                            }`} style={isSelected ? { color: '#2563eb', fontWeight: 700 } : { fontWeight: 700, color: '#111827' }}>
+                            }`} style={isSelected ? { color: '#2563eb' } : { color: '#111827' }}>
                               <span>整体进度:</span>{calculateJobProgress(job)}%
                             </span>
                           </div>
@@ -2302,7 +2313,7 @@ export default function Dashboard() {
               </div>
               <div className="text-sm flex gap-4" style={{ color: '#898f9a', marginTop: '12px' }}>
                 <span>工单编号:{taskDetailData.orderNo || '-'}</span>
-                <span>作业负责人:{taskDetailData.initiatorName || '-'}</span>
+                <span>作业发起人:{taskDetailData.initiatorName || '-'}</span>
                 <span>任务负责人:{taskDetailData.workerUserName || '-'}</span>
                 <span>开始时间:{taskDetailData.workTime ? dateFormatter(taskDetailData.workTime) : '-'}</span>
               </div>