Эх сурвалжийг харах

修改bug和优化界面的显示

695593266@qq.com 2 долоо хоног өмнө
parent
commit
0500a56475

+ 47 - 4
src/views/productionPlan/components/gantt/components/GanttFilterBar.vue

@@ -91,26 +91,69 @@
   .calendar-toolbar {
     padding: 12px 16px;
     background: #fff;
-    border: 1px solid #dfe6ec;
-    border-radius: 4px;
+    border: 1px solid #e6edf5;
+    border-radius: 8px;
+    box-shadow: 0 4px 14px rgba(31, 45, 61, 0.05);
   }
 
   .calendar-filters {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 12px;
+    gap: 10px 14px;
   }
 
   .calendar-filter-item {
     display: flex;
     align-items: center;
     gap: 8px;
+    min-width: 0;
   }
 
   .calendar-filter-label {
-    color: #606266;
+    color: #4b5563;
     font-size: 14px;
+    font-weight: 600;
     white-space: nowrap;
   }
+
+  .calendar-filter-item :deep(.el-input) {
+    width: 250px;
+  }
+
+  .calendar-filter-item :deep(.el-input__inner) {
+    height: 34px;
+    border-color: #e1e8f0;
+    border-radius: 4px;
+    background: #fbfdff;
+    color: #364152;
+  }
+
+  .calendar-filter-item :deep(.el-input__inner:focus) {
+    border-color: #1f8ceb;
+    box-shadow: 0 0 0 2px rgba(31, 140, 235, 0.08);
+  }
+
+  .calendar-filters > .el-button {
+    margin-left: 0;
+    border-radius: 4px;
+    font-weight: 600;
+  }
+
+  @media (max-width: 1440px) {
+    .calendar-filter-item :deep(.el-input) {
+      width: 210px;
+    }
+  }
+
+  @media (max-width: 1180px) {
+    .calendar-filter-item {
+      width: 100%;
+    }
+
+    .calendar-filter-item :deep(.el-input) {
+      flex: 1;
+      width: auto;
+    }
+  }
 </style>

+ 71 - 26
src/views/productionPlan/components/gantt/components/ResourcePanel.vue

@@ -90,7 +90,7 @@
 
 <style lang="scss" scoped>
   .resource-panel {
-    width: 180px;
+    width: 216px;
     flex-shrink: 0;
     position: sticky;
     top: 0;
@@ -99,88 +99,133 @@
     display: flex;
     flex-direction: column;
     background: #fff;
-    border: 1px solid #dfe6ec;
-    border-radius: 4px;
+    border: 1px solid #e6edf5;
+    border-radius: 8px;
     overflow: hidden;
+    box-shadow: 0 4px 14px rgba(31, 45, 61, 0.06);
 
     &.is-fullscreen {
-      width: 200px;
+      width: 224px;
       height: 100%;
     }
   }
 
   .resource-tabs {
     display: flex;
-    gap: 8px;
-    padding: 12px 12px 8px;
-    border-bottom: 1px solid #eef2f6;
+    gap: 6px;
+    padding: 10px;
+    background: linear-gradient(180deg, #fbfdff 0%, #f3f7fb 100%);
+    border-bottom: 1px solid #edf2f7;
   }
 
   .resource-tab {
     flex: 1;
-    height: 30px;
-    line-height: 30px;
+    height: 32px;
+    line-height: 32px;
     text-align: center;
     font-size: 12px;
-    color: #606266;
-    background: #f5f7fa;
-    border: 1px solid #dcdfe6;
-    border-radius: 4px;
+    font-weight: 500;
+    color: #5f6b7a;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 5px;
     cursor: pointer;
     user-select: none;
     transition: all 0.2s ease;
 
     &.is-active {
       color: #fff;
-      background: #2f7df6;
-      border-color: #2f7df6;
+      background: #1f8ceb;
+      border-color: #1f8ceb;
+      box-shadow: 0 3px 8px rgba(31, 140, 235, 0.22);
+    }
+
+    &:not(.is-active):hover {
+      color: #1f8ceb;
+      background: #fff;
+      border-color: #d8e8f8;
     }
   }
 
   .resource-search {
-    padding: 10px 12px;
-    border-bottom: 1px solid #eef2f6;
+    padding: 10px;
+    border-bottom: 1px solid #edf2f7;
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
 
     :deep(.el-input) {
       flex: 1;
     }
+
+    :deep(.el-input__inner) {
+      height: 30px;
+      border-color: #e1e8f0;
+      border-radius: 4px;
+      background: #fbfdff;
+      color: #364152;
+    }
+
+    :deep(.el-button) {
+      margin-left: 0;
+      border-radius: 4px;
+    }
   }
 
   .resource-list {
     flex: 1;
     overflow-y: auto;
-    padding: 8px 0;
+    padding: 8px 8px 10px;
+    background: #fff;
   }
 
   .resource-item,
   .resource-empty {
-    min-height: 36px;
-    padding: 8px 14px;
+    min-height: 34px;
+    padding: 8px 10px;
     line-height: 20px;
     font-size: 13px;
-    color: #303133;
+    color: #364152;
     word-break: break-all;
   }
 
   .resource-item {
+    position: relative;
+    margin-bottom: 5px;
+    border: 1px solid transparent;
+    border-radius: 5px;
     cursor: pointer;
     transition: all 0.2s ease;
 
     &.is-selected {
-      color: #2f7df6;
-      background: #ecf5ff;
-      font-weight: 500;
+      color: #1683d8;
+      background: #edf7ff;
+      border-color: #d7ebff;
+      font-weight: 600;
+    }
+
+    &.is-selected::before {
+      position: absolute;
+      top: 8px;
+      bottom: 8px;
+      left: 0;
+      width: 3px;
+      border-radius: 0 3px 3px 0;
+      background: #1f8ceb;
+      content: '';
     }
 
     &:hover {
-      background: #f5f7fa;
+      background: #f6f9fc;
+      border-color: #e7edf5;
     }
   }
 
   .resource-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 120px;
     color: #909399;
   }
 </style>

+ 59 - 32
src/views/productionPlan/components/gantt/project-gantt.vue

@@ -1407,7 +1407,12 @@
     width: 100%;
     height: 100%;
     min-height: 280px;
-    gap: 12px;
+    gap: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+    border: 1px solid #edf2f7;
+    border-radius: 8px;
+    background: #f7f9fc;
 
     &.is-fullscreen {
       position: fixed;
@@ -1418,7 +1423,7 @@
       width: 100vw;
       height: 100vh;
       z-index: 9999;
-      background: #fff;
+      background: #f6f8fb;
       padding: 16px;
       box-sizing: border-box;
     }
@@ -1428,11 +1433,28 @@
     align-items: center;
     justify-content: space-between;
     gap: 8px;
+    min-height: 46px;
+    padding: 7px 10px;
+    box-sizing: border-box;
+    border: 1px solid #e7edf5;
+    border-radius: 7px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(31, 45, 61, 0.04);
   }
   .view-switch-left {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
+    min-width: 0;
+    flex-wrap: wrap;
+  }
+  .view-switch ::v-deep .el-button {
+    border-radius: 4px;
+    font-weight: 600;
+  }
+  .view-switch ::v-deep .el-button--primary {
+    border-color: #1f8ceb;
+    background: #1f8ceb;
   }
   .calendar-view {
     flex: 1;
@@ -1455,7 +1477,7 @@
     min-height: 0;
     display: flex;
     align-items: stretch;
-    gap: 12px;
+    gap: 10px;
   }
   .gantt-box {
     flex: 1;
@@ -1463,9 +1485,10 @@
     width: calc(100%);
     height: calc(100%);
     background: #fff;
-    border: 1px solid #dfe6ec;
-    border-radius: 4px;
+    border: 1px solid #e6edf5;
+    border-radius: 8px;
     overflow: hidden;
+    box-shadow: 0 4px 14px rgba(31, 45, 61, 0.06);
   }
   .gantt-hover-tooltip {
     position: fixed;
@@ -1479,8 +1502,8 @@
 
   /* 周末高亮 */
   :deep(.weekend) {
-    background: #f3f3f3;
-    color: #676767 !important;
+    background: #f7f9fb;
+    color: #7a8794 !important;
   }
 
   /* 今日高亮 */
@@ -1498,7 +1521,7 @@
 
   :deep(.gantt_ver_scroll),
   :deep(.gantt_hor_scroll) {
-    background: #f8fafc;
+    background: #f4f7fb;
   }
 
   :deep(.gantt_ver_scroll::-webkit-scrollbar),
@@ -1523,33 +1546,34 @@
   }
 
   :deep(.gantt_task_scale) {
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid #dde7f0;
 
     .gantt_scale_line > .gantt_scale_cell {
-      color: #333333;
+      color: #3f4a56;
       font-size: 11px;
-      border-right: 1px solid #e5e5e5;
-      background: #fafafa;
+      border-right: 1px solid #e6edf5;
+      background: #fbfdff;
 
       &.today {
-        background: #dbeeff;
-        color: #1677c8 !important;
+        background: #e5f2ff;
+        color: #1683d8 !important;
+        box-shadow: inset 0 -2px 0 #1f8ceb;
       }
     }
   }
   :deep(.gantt_scale_line) {
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid #dde7f0;
   }
   :deep(.gantt_scale_line:first-child .gantt_scale_cell) {
-    height: 28px;
-    line-height: 28px;
-    font-size: 16px;
-    font-weight: 500;
-    color: #555;
-    background: #efefef;
+    height: 30px;
+    line-height: 30px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #2f3b4a;
+    background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
   }
   :deep(.gantt_scale_line:last-child .gantt_scale_cell) {
-    height: 36px;
+    height: 38px;
     padding: 0;
     box-sizing: border-box;
   }
@@ -1618,28 +1642,31 @@
     }
   }
   :deep(.gantt_cell) {
-    border-right: 1px solid #ebebeb;
+    border-right: 1px solid #edf2f7;
   }
   :deep(.gantt_task_bg) {
-    border-right: 1px solid #ebebeb;
+    border-right: 1px solid #edf2f7;
   }
   :deep(.gantt_task_bg .gantt_task_row),
   :deep(.gantt_task_row) {
-    border-bottom: 1px solid #f3f5f7;
+    border-bottom: 1px solid #f1f5f9;
+  }
+  :deep(.gantt_task_bg .gantt_task_row:nth-child(odd)) {
+    background: #fcfdff;
   }
   :deep(.task-222) {
-    height: 26px !important;
-    line-height: 26px !important;
+    height: 28px !important;
+    line-height: 28px !important;
     border: none !important;
-    border-radius: 3px !important;
-    box-shadow: none !important;
+    border-radius: 5px !important;
+    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.14) !important;
     filter: saturate(0.88) brightness(0.99);
     overflow: hidden;
     transition: box-shadow 0.18s ease, filter 0.18s ease;
   }
   :deep(.task-222:hover) {
     filter: saturate(0.94) brightness(1);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
   }
   :deep(.gantt_task_line.task-parent-red),
   :deep(.gantt_task_line.task-parent-red .gantt_task_progress) {
@@ -1676,7 +1703,7 @@
     color: #fff;
     font-size: 12px;
     font-weight: 500;
-    line-height: 26px;
+    line-height: 28px;
     white-space: nowrap;
     text-overflow: ellipsis;
     text-align: center;

+ 65 - 6
src/views/productionPlan/components/newFactoryProductionScheduling.vue

@@ -1022,7 +1022,11 @@
             workstationCode:
               item.workstationCode || item.code || item.stationCode || '',
             assetCode:
-              item.assetCode || item.deviceCode || substance.code || '',
+              item.assetCode ||
+              item.deviceCode ||
+              item.extInfo?.assetCode ||
+              substance.code ||
+              '',
             assetId:
               this.normalizeBackendLongId(item.assetId) ||
               this.normalizeBackendLongId(item.deviceId) ||
@@ -1030,7 +1034,11 @@
               this.normalizeBackendLongId(substance.id) ||
               '',
             assetName:
-              item.assetName || item.deviceName || substance.name || '',
+              item.assetName ||
+              item.deviceName ||
+              item.extInfo?.assetName ||
+              substance.name ||
+              '',
             assetModelType:
               item.assetModelType ||
               item.deviceModel ||
@@ -2454,7 +2462,7 @@
   }
 
   .scheduling-content {
-    margin-top: 12px;
+    margin-top: 10px;
     width: 100%;
   }
 
@@ -2463,6 +2471,10 @@
     height: 100%;
     min-width: 0;
     overflow: visible;
+    border: 1px solid #e6edf5;
+    border-radius: 8px;
+    background: #fff;
+    box-shadow: 0 4px 14px rgba(31, 45, 61, 0.05);
   }
 
   .form-wrapper.is-order-scheduling {
@@ -2473,6 +2485,48 @@
     overflow: hidden;
   }
 
+  .form-wrapper ::v-deep .ele-pro-table {
+    background: #fff;
+  }
+
+  .form-wrapper ::v-deep .el-table {
+    color: #364152;
+    border-color: #edf2f7;
+    font-size: 14px;
+  }
+
+  .form-wrapper ::v-deep .el-table th.el-table__cell {
+    background: #f7fafc;
+    color: #263445;
+    font-weight: 600;
+  }
+
+  .form-wrapper ::v-deep .el-table td.el-table__cell,
+  .form-wrapper ::v-deep .el-table th.el-table__cell {
+    border-bottom-color: #edf2f7;
+  }
+
+  .form-wrapper ::v-deep .el-table__row:hover > td.el-table__cell {
+    background: #f7fbff;
+  }
+
+  .form-wrapper ::v-deep .el-table__row.current-row > td.el-table__cell,
+  .form-wrapper
+    ::v-deep
+    .el-table__row.el-table__row--striped.current-row
+    > td.el-table__cell {
+    background: #eef7ff;
+  }
+
+  .form-wrapper ::v-deep .el-link {
+    color: #1683d8;
+    font-weight: 600;
+  }
+
+  .form-wrapper ::v-deep .el-checkbox__inner {
+    border-color: #d8e1eb;
+  }
+
   .form-wrapper.is-plan-scheduling ::v-deep .ele-pro-table {
     display: flex;
     flex-direction: column;
@@ -2495,7 +2549,8 @@
     height: 64px;
     padding: 0 12px;
     box-sizing: border-box;
-    background: #fff;
+    border-top: 1px solid #edf2f7;
+    background: #f8fbff;
   }
 
   .form-wrapper.is-plan-scheduling
@@ -2514,8 +2569,8 @@
     margin-top: 0 !important;
     padding: 0 12px;
     box-sizing: border-box;
-    border-top: 1px solid #ebeef5;
-    background: #fff;
+    border-top: 1px solid #edf2f7;
+    background: #f8fbff;
   }
 
   .form-wrapper.is-order-scheduling ::v-deep .order-plan-pagination > * {
@@ -2553,6 +2608,10 @@
     height: 100%;
     min-width: 0;
     overflow: hidden;
+    border: 1px solid #e6edf5;
+    border-radius: 8px;
+    background: #fff;
+    box-shadow: 0 4px 14px rgba(31, 45, 61, 0.05);
   }
 
   .plan-dot-line-scrollable {

+ 85 - 25
src/views/productionPlan/components/newFactoryProductionScheduling/TaskConfigPanel.vue

@@ -734,8 +734,16 @@
               teamTimeIds: task?.teamTimeIds || assignment?.teamTimeIds,
               weight: task?.weight || assignment?.weight || item.weight || '',
               code: item.code || item.workstationCode || '',
-              assetCode: item.assetCode || item.deviceCode || '',
-              assetName: item.assetName || item.deviceName || '',
+              assetCode:
+                item.assetCode ||
+                item.deviceCode ||
+                item.extInfo?.assetCode ||
+                '',
+              assetName:
+                item.assetName ||
+                item.deviceName ||
+                item.extInfo?.assetName ||
+                '',
               assetModelType: item.assetModelType || item.deviceModel || '',
               assetCategoryLevelPath:
                 item.assetCategoryLevelPath || item.deviceType || ''
@@ -1948,8 +1956,8 @@
     max-width: 100%;
     min-width: 0;
     box-sizing: border-box;
-    border: 1px solid #ebeef5;
-    border-radius: 4px;
+    border: 1px solid #e6edf5;
+    border-radius: 6px;
     padding: 8px 10px 10px;
     background: #fff;
     margin-top: 10px;
@@ -1959,7 +1967,8 @@
     height: 100%;
     margin-top: 0;
     padding: 0;
-    border-radius: 2px;
+    border: 0;
+    border-radius: 8px;
     overflow: hidden;
   }
 
@@ -1978,11 +1987,11 @@
     flex: 0 0 auto;
     align-items: center;
     gap: 8px;
-    padding: 12px 18px 10px;
+    padding: 12px 18px;
     color: #606266;
     font-size: 14px;
-    background: #fff;
-    border-bottom: 1px solid #ebeef5;
+    background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
+    border-bottom: 1px solid #edf2f7;
   }
 
   .dispatch-required {
@@ -2000,7 +2009,7 @@
     flex: 1 1 auto;
     align-items: center;
     justify-content: flex-end;
-    gap: 18px;
+    gap: 10px;
     min-width: 0;
     color: #008000;
   }
@@ -2010,6 +2019,10 @@
     align-items: baseline;
     gap: 4px;
     min-width: 0;
+    padding: 3px 8px;
+    border: 1px solid #d8efd9;
+    border-radius: 999px;
+    background: #f2fbf2;
     white-space: nowrap;
   }
 
@@ -2033,13 +2046,17 @@
 
     .el-tabs__header {
       margin: 0;
-      background: #fafafa;
-      border-bottom-color: #e4e7ed;
+      background: #f7fafc;
+      border-bottom-color: #edf2f7;
+    }
+
+    .el-tabs__nav-scroll {
+      padding: 0 12px;
     }
 
     .el-tabs__item {
-      height: 48px;
-      line-height: 48px;
+      height: 46px;
+      line-height: 46px;
       min-width: 82px;
       padding: 0 22px;
       font-size: 14px;
@@ -2051,6 +2068,8 @@
     .el-tabs__item.is-active {
       color: #1890ff;
       background: #fff;
+      font-weight: 600;
+      box-shadow: inset 0 -2px 0 #1890ff;
     }
 
     .el-tabs__content {
@@ -2060,21 +2079,36 @@
 
   .dispatch-process-meta {
     flex: 0 0 auto;
-    padding: 14px 18px;
+    position: relative;
+    margin: 10px 18px;
+    padding: 10px 12px 10px 16px;
+    border: 1px solid #d8efd9;
+    border-radius: 6px;
     color: #008000;
     font-size: 14px;
     font-weight: 600;
+    background: #f6fff6;
+  }
+
+  .dispatch-process-meta::before {
+    position: absolute;
+    top: 10px;
+    bottom: 10px;
+    left: 0;
+    width: 3px;
+    border-radius: 0 3px 3px 0;
+    background: #30b24a;
+    content: '';
   }
 
   .dispatch-toolbar {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    gap: 18px;
-    padding: 12px 18px;
-    border-top: 1px solid #ebeef5;
-    border-bottom: 1px solid #ebeef5;
-    background: #fff;
+    gap: 12px;
+    padding: 10px 18px;
+    border-bottom: 1px solid #edf2f7;
+    background: #f8fbff;
   }
 
   .dispatch-toolbar-left,
@@ -2087,13 +2121,22 @@
 
   .dispatch-toolbar-left {
     flex: 0 0 auto;
-    gap: 8px;
+    gap: 6px;
   }
 
   .dispatch-toolbar-left ::v-deep .el-button + .el-button {
     margin-left: 0;
   }
 
+  .dispatch-toolbar ::v-deep .el-button {
+    border-radius: 4px;
+    font-weight: 600;
+  }
+
+  .dispatch-toolbar-left ::v-deep .el-button--primary {
+    box-shadow: 0 2px 6px rgba(31, 140, 235, 0.2);
+  }
+
   .dispatch-assign-mode {
     flex: 1 1 auto;
     justify-content: center;
@@ -2105,6 +2148,10 @@
     font-weight: 600;
   }
 
+  .dispatch-assign-mode ::v-deep .el-button--primary {
+    box-shadow: 0 2px 6px rgba(31, 140, 235, 0.2);
+  }
+
   .dispatch-toolbar-icons {
     flex: 0 0 auto;
   }
@@ -2141,8 +2188,8 @@
     justify-content: center;
     min-height: 64px;
     padding: 8px 12px;
-    border-top: 1px solid #ebeef5;
-    background: #fff;
+    border-top: 1px solid #edf2f7;
+    background: #f8fbff;
   }
 
   .panel-title {
@@ -2276,10 +2323,23 @@
     font-size: 14px;
 
     .el-table th {
-      background: #fafafa;
-      color: #303133;
+      background: #f7fafc;
+      color: #263445;
       font-size: 14px;
-      font-weight: 500;
+      font-weight: 600;
+    }
+
+    .el-table td,
+    .el-table th {
+      border-bottom-color: #edf2f7;
+    }
+
+    .el-table__row:hover > td.el-table__cell {
+      background: #f7fbff;
+    }
+
+    .el-table__body tr.current-row > td.el-table__cell {
+      background: #eef7ff;
     }
 
     .el-table td,