11

“wangming”
1 parent caa83ded
Showing 1 changed file with 168 additions and 187 deletions
antis-ncc-admin/src/views/salaryCalculation/index.vue
 <template>
   <div class="salary-calculation-container">
-    <!-- 页面头部 -->
-    <div class="header-card">
-      <h1 class="title">工资计算与统计系统</h1>
-      <p class="subtitle">智能生成各类业绩统计数据，一键完成工资计算</p>
-    </div>
-
-    <!-- 月份选择区域 -->
-    <el-card class="box-card month-selector-card">
-      <div slot="header" class="clearfix">
-        <span><i class="el-icon-date"></i> 选择统计月份</span>
-        <el-button style="float: right; padding: 3px 0" type="text" @click="resetMonth">重置</el-button>
-      </div>
-      <div class="month-picker-wrapper">
-        <el-date-picker
-          v-model="statisticsMonth"
-          type="month"
-          placeholder="选择月份"
-          format="yyyy年MM月"
-          value-format="yyyyMM"
-          :clearable="false"
-          class="month-picker"
-        >
-        </el-date-picker>
-      </div>
-    </el-card>
-
     <!-- 主要内容区域 - 左右布局 -->
     <div class="main-content">
       <!-- 左侧：统计操作区域 -->
       <div class="left-panel">
-        <!-- 一键计算工资 -->
-        <el-card class="box-card calculate-card">
-          <div slot="header" class="clearfix">
-            <span><i class="el-icon-cpu"></i> 一键计算工资</span>
-          </div>
-          <div class="calculate-content">
-            <p class="calculate-desc">按顺序执行所有统计方法，生成完整的工资数据</p>
-            <el-button
-              type="primary"
-              size="large"
-              :loading="isCalculating"
-              @click="handleCalculateSalary"
-              class="calculate-button"
-              :disabled="!statisticsMonth"
-            >
-              <i class="el-icon-magic-stick"></i> 
-              {{ isCalculating ? '计算中...' : '一键计算工资' }}
-            </el-button>
-            <div v-if="calculationProgress.length > 0" class="progress-info">
-              <div class="progress-title">计算进度：</div>
-              <div v-for="(step, index) in calculationProgress" :key="index" class="progress-step">
-                <i :class="getProgressIcon(step.status)" :style="{ color: getProgressColor(step.status) }"></i>
-                <span :class="{ 'completed': step.status === 'completed', 'failed': step.status === 'failed' }">
-                  {{ step.name }}
-                </span>
-              </div>
+        <!-- 顶部控制区域 - 同一行显示 -->
+        <div class="top-controls-row">
+          <!-- 月份选择区域 -->
+          <el-card class="box-card month-selector-card">
+            <div slot="header" class="clearfix">
+              <span><i class="el-icon-date"></i> 选择统计月份</span>
+              <el-button style="float: right; padding: 3px 0" type="text" @click="resetMonth">重置</el-button>
             </div>
-          </div>
-        </el-card>
+            <div class="month-picker-wrapper">
+              <el-date-picker
+                v-model="statisticsMonth"
+                type="month"
+                placeholder="选择月份"
+                format="yyyy年MM月"
+                value-format="yyyyMM"
+                :clearable="false"
+                class="month-picker"
+              >
+              </el-date-picker>
+            </div>
+          </el-card>
+
+          <!-- 一键计算工资 -->
+          <el-card class="box-card calculate-card">
+            <div slot="header" class="clearfix">
+              <span><i class="el-icon-cpu"></i> 一键计算工资</span>
+            </div>
+            <div class="calculate-content">
+              <p class="calculate-desc">按顺序执行所有统计方法，生成完整的工资数据</p>
+              <el-button
+                type="primary"
+                size="large"
+                :loading="isCalculating"
+                @click="handleCalculateSalary"
+                class="calculate-button"
+                :disabled="!statisticsMonth"
+              >
+                <i class="el-icon-magic-stick"></i> 
+                {{ isCalculating ? '计算中...' : '一键计算工资' }}
+              </el-button>
+            </div>
+          </el-card>
+        </div>
         <!-- 单独统计操作 -->
         <el-card class="box-card statistics-card">
@@ -134,17 +122,27 @@
       <!-- 右侧：结果显示区域 -->
       <div class="right-panel">
+        <!-- 计算进度区域 -->
+        <el-card class="box-card progress-card" v-if="calculationProgress.length > 0">
+          <div slot="header" class="clearfix">
+            <span><i class="el-icon-time"></i> 计算进度</span>
+          </div>
+          <div class="progress-content">
+            <div v-for="(step, index) in calculationProgress" :key="index" class="progress-step">
+              <i :class="getProgressIcon(step.status)" :style="{ color: getProgressColor(step.status) }"></i>
+              <span :class="{ 'completed': step.status === 'completed', 'failed': step.status === 'failed' }">
+                {{ step.name }}
+              </span>
+            </div>
+          </div>
+        </el-card>
+
         <el-card class="box-card result-card">
           <div slot="header" class="clearfix">
             <span><i class="el-icon-document"></i> 统计结果</span>
-            <div class="header-actions">
-              <el-button type="text" @click="exportResults" :disabled="results.length === 0">
-                <i class="el-icon-download"></i> 导出
-              </el-button>
-              <el-button type="text" @click="clearResults">
-                <i class="el-icon-delete"></i> 清空
-              </el-button>
-            </div>
+            <el-button type="text" @click="clearResults">
+              <i class="el-icon-delete"></i> 清空
+            </el-button>
           </div>
           <div class="result-list" ref="resultList">
             <div v-if="results.length === 0" class="no-results">
@@ -220,14 +218,6 @@ export default {
       }
       return json
     },
-    exportResults() {
-      if (this.results.length === 0) {
-        this.$message.warning('没有可导出的结果')
-        return
-      }
-      // 这里可以实现导出功能
-      this.$message.success('导出功能开发中...')
-    },
     // 一键计算工资
     async handleCalculateSalary() {
@@ -440,27 +430,6 @@ export default {
   min-height: calc(100vh - 50px);
   font-family: 'Arial', sans-serif;
-  .header-card {
-    background: linear-gradient(135deg, #409EFF, #79BBFF);
-    color: #fff;
-    padding: 30px;
-    border-radius: 15px;
-    margin-bottom: 20px;
-    text-align: center;
-    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.2);
-
-    .title {
-      font-size: 2.5em;
-      margin-bottom: 10px;
-      font-weight: bold;
-    }
-
-    .subtitle {
-      font-size: 1.1em;
-      opacity: 0.9;
-    }
-  }
-
   .box-card {
     border-radius: 10px;
     margin-bottom: 20px;
@@ -480,115 +449,90 @@ export default {
     }
   }
-  .month-selector-card {
-    .month-picker-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    .month-picker {
-      width: 100%;
-      max-width: 300px;
-    }
-  }
-
-  // 主要内容区域 - 左右布局
-  .main-content {
+  // 顶部控制区域 - 同一行显示两个卡片
+  .top-controls-row {
     display: flex;
     gap: 20px;
-    min-height: 600px;
-
-    .left-panel {
-      flex: 1;
-      min-width: 0; // 防止flex子项溢出
-    }
+    margin-bottom: 20px;
-    .right-panel {
+    .month-selector-card, .calculate-card {
       flex: 1;
       min-width: 0;
     }
-  }
-
-  // 一键计算工资卡片
-  .calculate-card {
-    margin-bottom: 20px;
-    background: linear-gradient(135deg, #67C23A, #85CE61);
-    color: white;
-    ::v-deep .el-card__header {
-      background: rgba(255, 255, 255, 0.1);
-      color: white;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .calculate-content {
-      text-align: center;
-
-      .calculate-desc {
-        color: rgba(255, 255, 255, 0.9);
-        margin-bottom: 20px;
-        font-size: 1.1em;
+    .month-selector-card {
+      .month-picker-wrapper {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
       }
-
-      .calculate-button {
+      .month-picker {
         width: 100%;
-        height: 60px;
-        font-size: 1.3em;
-        font-weight: bold;
-        border-radius: 10px;
-        background: rgba(255, 255, 255, 0.2);
-        border: 2px solid rgba(255, 255, 255, 0.3);
-        color: white;
+        max-width: 200px;
+      }
+    }
-        &:hover:not(:disabled) {
-          background: rgba(255, 255, 255, 0.3);
-          border-color: rgba(255, 255, 255, 0.5);
-        }
+    .calculate-card {
+      background: linear-gradient(135deg, #67C23A, #85CE61);
+      color: white;
-        &:disabled {
-          opacity: 0.6;
-        }
+      ::v-deep .el-card__header {
+        background: rgba(255, 255, 255, 0.1);
+        color: white;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
       }
-      .progress-info {
-        margin-top: 20px;
-        text-align: left;
+      .calculate-content {
+        text-align: center;
-        .progress-title {
-          font-weight: bold;
-          margin-bottom: 10px;
+        .calculate-desc {
           color: rgba(255, 255, 255, 0.9);
+          margin-bottom: 15px;
+          font-size: 0.95em;
+          line-height: 1.4;
         }
-        .progress-step {
-          display: flex;
-          align-items: center;
-          margin-bottom: 8px;
-          font-size: 0.95em;
+        .calculate-button {
+          width: 100%;
+          height: 40px;
+          font-size: 1em;
+          font-weight: bold;
+          border-radius: 6px;
+          background: rgba(255, 255, 255, 0.2);
+          border: 2px solid rgba(255, 255, 255, 0.3);
+          color: white;
-          i {
-            margin-right: 8px;
-            font-size: 1.1em;
+          &:hover:not(:disabled) {
+            background: rgba(255, 255, 255, 0.3);
+            border-color: rgba(255, 255, 255, 0.5);
           }
-          span {
-            color: rgba(255, 255, 255, 0.9);
-
-            &.completed {
-              color: #fff;
-              font-weight: bold;
-            }
-
-            &.failed {
-              color: #ffeb3b;
-              font-weight: bold;
-            }
+          &:disabled {
+            opacity: 0.6;
           }
         }
       }
     }
   }
+  // 主要内容区域 - 左右布局
+  .main-content {
+    display: flex;
+    gap: 20px;
+    min-height: 600px;
+
+    .left-panel {
+      flex: 1;
+      min-width: 0; // 防止flex子项溢出
+    }
+
+    .right-panel {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+
   // 统计操作卡片
   .statistics-card {
     .statistics-grid {
@@ -657,15 +601,53 @@ export default {
     }
   }
+  // 进度卡片
+  .progress-card {
+    margin-bottom: 20px;
+    background: linear-gradient(135deg, #E6F7FF, #BAE7FF);
+    border: 1px solid #91D5FF;
+
+    .progress-content {
+      .progress-step {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
+        padding: 8px 12px;
+        background: rgba(255, 255, 255, 0.7);
+        border-radius: 6px;
+        font-size: 0.95em;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        i {
+          margin-right: 10px;
+          font-size: 1.1em;
+        }
+
+        span {
+          color: #333;
+          font-weight: 500;
+
+          &.completed {
+            color: #67C23A;
+            font-weight: bold;
+          }
+
+          &.failed {
+            color: #F56C6C;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+
   // 结果显示卡片
   .result-card {
     height: 100%;
-    .header-actions {
-      display: flex;
-      gap: 10px;
-    }
-
     .result-list {
       max-height: 500px;
       overflow-y: auto;
@@ -764,14 +746,13 @@ export default {
     padding: 10px;
   }
-  .header-card {
-    padding: 20px;
-    .title {
-      font-size: 1.8em;
-    }
-    .subtitle {
-      font-size: 0.9em;
-    }
+  .top-controls-row {
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .month-selector-card, .calculate-card {
+    width: 100%;
   }
   .statistics-grid {