2025-12-01

过站采集-》车间工作平台优化

src/views/modules/yieldReport/com_produce_report_normal.vue

@@ -131,25 +131,25 @@
             <el-button type="primary" size="small" @click="refreshPageData" icon="el-icon-refresh">
               刷新
             </el-button>
-            <el-button type="warning" size="small" @click="switchOperatorModal" icon="el-icon-user">
+            <el-button type="primary" size="small" @click="switchOperatorModal" icon="el-icon-user">
               切换用户
             </el-button>
           </div>
 
           <!-- 生产准备 -->
           <div class="control-section">
-            <div class="section-header production-header">
+            <div class="section-title">
               <i class="el-icon-setting"></i>
               <span>生产准备</span>
             </div>
-            <div class="section-content">
+            <div class="section-content section-content-grid">
               <el-button type="primary" size="small" @click="startTuningModal" :disabled="buttonTags.tuningFlag" icon="el-icon-time">
                 开始调机
               </el-button>
-              <el-button type="success" size="small" @click="startProduceModal" :disabled="buttonTags.produceFlag" icon="el-icon-video-play">
+              <el-button type="primary" size="small" @click="startProduceModal" :disabled="buttonTags.produceFlag" icon="el-icon-video-play">
                 开始生产
               </el-button>
-              <el-button type="info" size="small" @click="sopPreviewModal" icon="el-icon-document">
+              <el-button type="primary" size="small" @click="sopPreviewModal" icon="el-icon-document" style="grid-column: 1 / -1;">
                 SOP预览
               </el-button>
             </div>
@@ -157,11 +157,11 @@
 
           <!-- 过程控制 -->
           <div class="control-section">
-            <div class="section-header control-header">
+            <div class="section-title">
               <i class="el-icon-truck"></i>
               <span>过程控制</span>
             </div>
-            <div class="section-content">
+            <div class="section-content section-content-grid">
               <el-button type="primary" size="small" @click="produceToolModal" :disabled="buttonTags.toolFlag" icon="el-icon-office-building">
                 刀模上机
               </el-button>
@@ -173,12 +173,12 @@
 
           <!-- 过程不良 -->
           <div class="control-section">
-            <div class="section-header defect-header">
+            <div class="section-title">
               <i class="el-icon-warning"></i>
               <span>过程不良</span>
             </div>
-            <div class="section-content">
-              <el-button type="danger" size="small" @click="defectRollModal" :disabled="buttonTags.defectFlag" icon="el-icon-warning-outline">
+            <div class="section-content section-content-grid">
+              <el-button type="primary" size="small" @click="defectRollModal" :disabled="buttonTags.defectFlag" icon="el-icon-warning-outline" style="grid-column: 1 / -1;">
                 报告不良
               </el-button>
             </div>
@@ -186,12 +186,12 @@
 
           <!-- 过程异常 -->
           <div class="control-section">
-            <div class="section-header exception-header">
+            <div class="section-title">
               <i class="el-icon-remove-outline"></i>
               <span>过程异常</span>
             </div>
-            <div class="section-content">
-              <el-button type="warning" size="small" @click="produceDownModal" :disabled="buttonTags.downTimeFlag" icon="el-icon-video-pause">
+            <div class="section-content section-content-grid">
+              <el-button type="primary" size="small" @click="produceDownModal" :disabled="buttonTags.downTimeFlag" icon="el-icon-video-pause" style="grid-column: 1 / -1;">
                 异常停机
               </el-button>
             </div>
@@ -199,15 +199,15 @@
 
           <!-- 质量检验 -->
           <div class="control-section">
-            <div class="section-header quality-header">
+            <div class="section-title">
               <i class="el-icon-data-analysis"></i>
               <span>质量检验</span>
             </div>
-            <div class="section-content">
+            <div class="section-content section-content-grid">
               <el-button type="primary" size="small" @click="openProcessInspectionModal" :disabled="buttonTags.processInspectionFlag" icon="el-icon-view">
                 过程检验
               </el-button>
-              <el-button type="info" size="small" @click="openMrbRegisterModal" icon="el-icon-document-add">
+              <el-button type="primary" size="small" @click="openMrbRegisterModal" icon="el-icon-document-add">
                 MRB异常单
               </el-button>
             </div>
@@ -215,12 +215,12 @@
 
           <!-- TID绑定 -->
           <div class="control-section">
-            <div class="section-header" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+            <div class="section-title">
               <i class="el-icon-link"></i>
               <span>TID绑定</span>
             </div>
-            <div class="section-content">
-              <el-button type="primary" size="small" icon="el-icon-paperclip">
+            <div class="section-content section-content-grid">
+              <el-button type="primary" size="small" icon="el-icon-paperclip" style="grid-column: 1 / -1;">
                 TID文件
               </el-button>
             </div>
@@ -5121,12 +5121,12 @@ export default {
 /* 右侧控制面板 - 绝对定位 */
 .control-panel {
   position: absolute;
-  top: 10px; /* 从最顶部开始 */
+  top: 0px; /* 从最顶部开始 */
   right: 15px;
   width: 190px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
   max-height: 755px;
   overflow-y: auto;
   padding-right: 4px;
@@ -5156,32 +5156,32 @@ export default {
 .top-actions {
   display: flex;
   gap: 6px;
-  margin-bottom: 4px;
+  margin-bottom: 2px;
 }
 
 .top-actions .el-button {
   flex: 1;
-  padding: 8px 10px;
+  padding: 8px 8px;
   font-size: 12px;
   border-radius: 4px;
-  font-weight: 500;
   transition: all 0.3s ease;
   text-align: center;
 }
 
-.top-actions .el-button:hover {
+.top-actions .el-button:hover:not(:disabled) {
   transform: translateY(-1px);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
 }
 
 /* 控制区块 */
 .control-section {
   background: #ffffff;
   border-radius: 6px;
-  padding: 8px 10px;
+  padding: 0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
   border: 1px solid #e8eaed;
   transition: all 0.3s ease;
+  overflow: hidden;
 }
 
 .control-section:hover {
@@ -5189,69 +5189,73 @@ export default {
   border-color: #d0d4d9;
 }
 
-.section-header {
+/* 模块标题 - 改为卡片标题样式 */
+.section-title {
   display: flex;
   align-items: center;
-  padding: 4px 8px;
-  border-radius: 4px;
-  margin-bottom: 8px;
-  font-size: 12px;
+  padding: 8px 12px;
+  background: #fafbfc;
+  border-bottom: 1px solid #e8eaed;
+  font-size: 13px;
   font-weight: 600;
-  color: #ffffff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.section-header i {
-  font-size: 14px;
-  margin-right: 5px;
-}
-
-.production-header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.control-header {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-}
-
-.defect-header {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-}
-
-.exception-header {
-  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  color: #303133;
 }
 
-.quality-header {
-  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
+.section-title i {
+  font-size: 16px;
+  margin-right: 6px;
+  color: #667eea;
 }
 
 .section-content {
   display: flex;
   flex-direction: column;
   gap: 6px;
+  padding: 5px;
+}
+
+/* 网格布局 - 每行两个按钮 */
+.section-content-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 5px;
 }
 
 .section-content .el-button {
-  width: 100%;
-  padding: 8px 10px;
+  padding: 7px 8px;
   font-size: 12px;
   border-radius: 4px;
-  font-weight: 500;
   transition: all 0.3s ease;
-  text-align: left;
-  display: flex;
-  align-items: center;
+  text-align: center;
+}
+
+.section-content-grid .el-button {
+  width: 100%;
+  padding: 7px 5px;
+  font-size: 11px;
 }
 
 .section-content .el-button:hover:not(:disabled) {
-  transform: translateX(3px);
+  transform: translateY(-1px);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
 }
 
 .section-content .el-button i {
-  margin-right: 5px;
-  font-size: 13px;
+  margin-right: 3px;
+  font-size: 12px;
+}
+
+/* plain按钮样式优化 */
+.section-content .el-button--default.is-plain {
+  background: #f5f7fa;
+  border-color: #dcdfe6;
+  color: #606266;
+}
+
+.section-content .el-button--default.is-plain:hover:not(:disabled) {
+  background: #ecf5ff;
+  border-color: #b3d8ff;
+  color: #409eff;
 }
 
 /* 操作链接样式 */