diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 6b0139f..413d5d7 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,9 +1,19 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path">
-        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{ translateMenuTitle(item.meta.title) }}</span>
-        <router-link v-else :to="item.redirect||item.path">{{ translateMenuTitle(item.meta.title) }}</router-link>
+      <el-breadcrumb-item
+        v-for="(item, index) in filteredLevelList"
+        :key="item.path"
+      >
+        <span
+          v-if="item.redirect === 'noredirect' || index === filteredLevelList.length - 1"
+          class="no-redirect"
+        >
+          {{ translateMenuTitle(item.meta.title) }}
+        </span>
+        <router-link v-else :to="item.redirect || item.path">
+          {{ translateMenuTitle(item.meta.title) }}
+        </router-link>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -18,6 +28,12 @@ export default {
       levelList: null
     }
   },
+  computed: {
+    // 过滤掉没有 title 的项
+    filteredLevelList() {
+      return this.levelList.filter(item => item.meta?.title)
+    }
+  },
   watch: {
     $route() {
       this.getBreadcrumb()
diff --git a/src/lang/en-US.js b/src/lang/en-US.js
index 607a55f..45425bd 100644
--- a/src/lang/en-US.js
+++ b/src/lang/en-US.js
@@ -37,6 +37,7 @@ export default {
     secondLevelMenuName: 'Second-Level Menu',
     roleName: 'Role Name',
     role: 'Role:',
+    roleMenuData: 'Role Menu Data',
     selectPlaceholder: 'Please select',
     sequence: 'No.',
     addFirstLevelModule: 'Add First-Level Menu',
@@ -361,6 +362,11 @@ export default {
     qualified: 'Qualified',
     unqualified: 'Unqualified',
     all: 'All',
+    detailTitle: 'Assembly Quality Details',
+    detailSubtitle: 'Inspect measurements, limits, and quality status after multi-filter search',
+    summaryTotal: 'Total Results',
+    summaryPageSize: 'Page Size',
+    summaryFilters: 'Active Filters',
     noData: 'No data'
   },
   inquiryTransitInformation: {
@@ -406,11 +412,17 @@ export default {
     productModel: 'Product Model',
     offlineTime: 'Offline Time',
     trendTitle: 'Offline Output Trend Analysis',
+    trendSubtitle: 'Monitor output fluctuations and abnormal offline periods within the selected range',
+    detailTitle: 'Offline Detail Records',
+    detailSubtitle: 'Shows production offline details matching the current filters',
     saveAsImage: 'Save as Image',
     dateAxis: 'Date',
     hourAxis: 'Hour',
-    offlineQuantityAxis: 'Offline Engine Qty',
+    offlineQuantityAxis: 'Offline production Qty',
     offlineQuantitySeries: 'Offline Qty',
+    summaryTotal: 'Offline Total',
+    summaryTrendPoints: 'Trend Points',
+    summaryGranularity: 'Granularity',
     selectDateRange: 'Please select start date and end date!',
     noData: 'No data'
   },
@@ -431,9 +443,16 @@ export default {
     station: 'Station',
     totalAverageBeat: 'Total Avg Beat (s)',
     totalAverageBeatChartTitle: 'Total Average Beat Bar Chart',
+    chartSubtitle: 'Quickly identify bottleneck stations with higher average beat',
+    detailTitle: 'Station Beat Details',
+    detailSubtitle: 'Review average beat by station across each date',
     totalAverageBeatAxis: 'Total Avg Beat (s)',
     totalAverageBeatSeries: 'Total Avg Beat',
     saveAsImage: 'Save as Image',
+    summaryStations: 'Stations',
+    summaryDays: 'Days',
+    summarySelectedStations: 'Selected Stations',
+    allStations: 'All',
     noData: 'No data'
   },
   stationJph: {
@@ -453,12 +472,20 @@ export default {
     historyTab: 'History',
     realtimeChartTitle: 'Realtime Hourly Output by Station',
     historyChartTitle: 'Historical Hourly Output by Station',
+    realtimeSubtitle: 'Auto-refreshing view of today\'s hourly output distribution',
+    historySubtitle: 'Review hourly output changes by date',
+    detailTitle: 'Historical Output Details',
+    detailSubtitle: 'Tabular breakdown of output for each date and hour slot',
     saveAsImage: 'Save as Image',
     sequence: 'No.',
     date: 'Date',
     station: 'Station',
     hourSlot: 'Hour Slot',
     outputQty: 'Output Qty',
+    summaryRealtimePoints: 'Realtime Hours',
+    summaryRealtimeTotal: 'Realtime Total',
+    summaryRefreshMode: 'Refresh Mode',
+    autoRefresh: 'Auto Polling',
     noData: 'No data'
   },
   materialDataQuery: {
diff --git a/src/lang/zh-CN.js b/src/lang/zh-CN.js
index 8cb2019..a75c35f 100644
--- a/src/lang/zh-CN.js
+++ b/src/lang/zh-CN.js
@@ -37,6 +37,7 @@ export default {
     secondLevelMenuName: '二级菜单名称',
     roleName: '角色名称',
     role: '角色:',
+    roleMenuData: '角色菜单树',
     selectPlaceholder: '请选择',
     sequence: '序号',
     addFirstLevelModule: '新增一级菜单',
@@ -361,6 +362,11 @@ export default {
     qualified: '合格',
     unqualified: '不合格',
     all: '全部',
+    detailTitle: '装配质量明细',
+    detailSubtitle: '多维筛选后查看测量结果、上下限与合格状态',
+    summaryTotal: '结果总数',
+    summaryPageSize: '每页条数',
+    summaryFilters: '已启用筛选',
     noData: '暂无数据'
   },
   inquiryTransitInformation: {
@@ -406,11 +412,17 @@ export default {
     productModel: '产品型号',
     offlineTime: '下线时间',
     trendTitle: '下线产量趋势分析',
+    trendSubtitle: '用于监控指定时间范围内的下线产量波动与异常时段',
+    detailTitle: '下线明细记录',
+    detailSubtitle: '展示符合筛选条件产品下线明细',
     saveAsImage: '保存为图片',
     dateAxis: '日期',
     hourAxis: '小时',
-    offlineQuantityAxis: '下线发动机数量',
+    offlineQuantityAxis: '下线产品数量',
     offlineQuantitySeries: '下线数量',
+    summaryTotal: '下线总数',
+    summaryTrendPoints: '趋势点数',
+    summaryGranularity: '统计粒度',
     selectDateRange: '请选择开始时间与结束时间！',
     noData: '暂无数据'
   },
@@ -431,9 +443,16 @@ export default {
     station: '工位',
     totalAverageBeat: '总平均节拍(秒)',
     totalAverageBeatChartTitle: '总平均节拍横向柱状图',
+    chartSubtitle: '快速识别平均节拍偏高的瓶颈工位',
+    detailTitle: '工位节拍明细',
+    detailSubtitle: '按日期展开查看各工位平均节拍',
     totalAverageBeatAxis: '总平均节拍(秒)',
     totalAverageBeatSeries: '总平均节拍',
     saveAsImage: '保存为图片',
+    summaryStations: '工位数量',
+    summaryDays: '统计天数',
+    summarySelectedStations: '已选工位',
+    allStations: '全部',
     noData: '暂无数据'
   },
   stationJph: {
@@ -453,12 +472,20 @@ export default {
     historyTab: '历史',
     realtimeChartTitle: '工位每小时实时产量',
     historyChartTitle: '工位每小时历史产量',
+    realtimeSubtitle: '自动刷新今日每小时产量分布',
+    historySubtitle: '按日期回看每小时产量变化',
+    detailTitle: '历史产量明细',
+    detailSubtitle: '表格展示每个日期每小时段的产量结果',
     saveAsImage: '保存为图片',
     sequence: '序号',
     date: '日期',
     station: '工位',
     hourSlot: '小时段',
     outputQty: '产量',
+    summaryRealtimePoints: '实时小时点',
+    summaryRealtimeTotal: '实时总产量',
+    summaryRefreshMode: '刷新模式',
+    autoRefresh: '自动轮询',
     noData: '暂无数据'
   },
   materialDataQuery: {
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index fd34862..330f192 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -23,8 +23,14 @@
      padding: 10px 10px;
      border-radius: 10px 10px 0 0;
      .el-dialog__title {
-       color: #fff;
-       font-size: 1.2rem;
+       color: #203247 !important;
+       font-size: 16px;
+       font-weight: 700;
+     }
+     .el-dialog__title,
+     .el-dialog__title * {
+       color: #203247 !important;
+       font-weight: 700;
      }
      .el-dialog__headerbtn {
        top: 13px;
@@ -162,4 +168,3 @@
    border: 1px solid gray!important;
  }*/
 
-
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0d988da..299ba02 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @use './mixin.scss';
 @use './transition.scss';
 @use './element-ui.scss';
+@use './mes-admin-pages.scss';
 @use './sidebar.scss';
 
 body {
diff --git a/src/styles/mes-admin-pages.scss b/src/styles/mes-admin-pages.scss
new file mode 100644
index 0000000..a6dda45
--- /dev/null
+++ b/src/styles/mes-admin-pages.scss
@@ -0,0 +1,215 @@
+:root {
+  --mes-page-bg: linear-gradient(180deg, #f6f9fc 0%, #edf3f8 100%);
+  --mes-surface: rgba(255, 255, 255, 0.96);
+  --mes-surface-soft: linear-gradient(135deg, #f9fbfd 0%, #f1f6fb 100%);
+  --mes-border: #d6e1ec;
+  --mes-border-strong: #c3d3e4;
+  --mes-text: #243447;
+  --mes-text-soft: #5f7186;
+  --mes-primary: #1f78d1;
+  --mes-primary-soft: #eef6ff;
+  --mes-success-soft: #edf8f1;
+  --mes-warning-soft: #fff5e9;
+  --mes-shadow: 0 10px 24px rgba(31, 57, 90, 0.08);
+  --mes-radius-lg: 16px;
+  --mes-radius-md: 12px;
+}
+
+.mes-admin-page {
+  min-height: calc(100vh - 84px);
+  padding: 14px !important;
+  background:
+    radial-gradient(circle at top right, rgba(31, 120, 209, 0.08), transparent 28%),
+    radial-gradient(circle at top left, rgba(38, 166, 154, 0.06), transparent 24%),
+    var(--mes-page-bg);
+
+  .el-card {
+    border: 1px solid var(--mes-border);
+    border-radius: var(--mes-radius-lg);
+    background: var(--mes-surface);
+    box-shadow: var(--mes-shadow);
+    overflow: hidden;
+  }
+
+  .el-card__body {
+    padding: 16px !important;
+    margin: 0 !important;
+  }
+
+  .topCard,
+  > .el-card {
+    margin: 0 !important;
+  }
+
+  .topDiv,
+  .toolbarRow {
+    //display: flex;
+    //flex-wrap: wrap;
+    //align-items: center;
+    //gap: 10px 12px;
+    //margin-bottom: 14px;
+    //padding: 14px 16px;
+    //border: 1px solid var(--mes-border);
+    //border-radius: var(--mes-radius-md);
+    //background: var(--mes-surface-soft);
+  }
+
+  .promptText,
+  .topDiv > span,
+  .toolbarRow > span {
+    color: var(--mes-text);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  .el-input__inner,
+  .el-textarea__inner {
+    border-color: var(--mes-border);
+    border-radius: 10px;
+    color: var(--mes-text);
+    background: #fff;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+  }
+
+  .el-input__inner:hover,
+  .el-textarea__inner:hover {
+    border-color: var(--mes-border-strong);
+  }
+
+  .el-input__inner:focus,
+  .el-textarea__inner:focus {
+    border-color: var(--mes-primary) !important;
+    box-shadow: 0 0 0 3px rgba(31, 120, 209, 0.12);
+  }
+
+  .el-select,
+  .el-date-editor {
+    max-width: 100%;
+  }
+
+  .el-button {
+    min-height: 34px;
+    border-radius: 10px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+  }
+
+  .el-button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 18px rgba(31, 57, 90, 0.08);
+  }
+
+  .el-button--primary.is-plain {
+    color: var(--mes-primary);
+    border-color: rgba(31, 120, 209, 0.22);
+    background: var(--mes-primary-soft);
+  }
+
+  .el-button--info.is-plain,
+  .el-button--info {
+    border-color: rgba(86, 119, 153, 0.2);
+    background: #f3f7fb;
+    color: #4a627d;
+  }
+
+  .el-button--warning {
+    border-color: rgba(236, 160, 71, 0.22);
+    background: var(--mes-warning-soft);
+    color: #b66f10;
+  }
+
+  .el-button--distribution {
+    border-color: rgba(236, 122, 57, 0.26);
+    background: #fff2e8;
+    color: #d16a21;
+  }
+
+  .el-button--success,
+  .el-button--success.is-plain {
+    border-color: rgba(46, 174, 96, 0.22);
+    background: var(--mes-success-soft);
+    color: #1f8a4c;
+  }
+
+  .el-table {
+    margin-top: 6px;
+    border: 1px solid var(--mes-border) !important;
+    border-radius: 14px;
+    overflow: hidden;
+    background: #fff;
+  }
+
+  .el-table::before,
+  .el-table--border::after,
+  .el-table--group::after {
+    background-color: var(--mes-border) !important;
+  }
+
+  .el-table th {
+    background: linear-gradient(180deg, #f7fafc 0%, #edf3f8 100%) !important;
+    color: var(--mes-text) !important;
+    font-weight: 700;
+  }
+
+  .el-table td {
+    color: #31465c;
+  }
+
+  .el-table--striped .el-table__body tr.el-table__row--striped td {
+    background-color: #f8fbfd;
+  }
+
+  .el-table__body tr:hover > td {
+    background-color: #f0f7ff !important;
+  }
+
+  .el-table__body tr.current-row > td {
+    background: linear-gradient(90deg, #2f8be5 0%, #57a5ec 100%) !important;
+    color: #fff !important;
+  }
+
+  .block,
+  .el-pagination {
+    padding-top: 10px;
+  }
+
+  .el-pagination button,
+  .el-pagination .el-pager li {
+    border-radius: 8px;
+  }
+
+  .chartCard {
+    border: 1px solid var(--mes-border);
+    border-radius: 14px;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 249, 252, 0.98) 100%);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  }
+
+  .el-tabs__item {
+    height: 38px;
+    line-height: 38px;
+    font-weight: 600;
+    color: var(--mes-text-soft);
+  }
+
+  .el-tabs__item.is-active {
+    color: var(--mes-primary);
+  }
+
+  .el-dialog {
+    border-radius: 16px;
+    overflow: hidden;
+  }
+
+  .el-dialog__header {
+    background: linear-gradient(180deg, #f8fbfd 0%, #eef4f9 100%);
+    border-bottom: 1px solid var(--mes-border);
+  }
+
+  .el-dialog__title {
+    color: var(--mes-text);
+    font-weight: 700;
+  }
+}
diff --git a/src/views/BasicData/MenuManagement/index.vue b/src/views/BasicData/MenuManagement/index.vue
index 54e52f6..7442e28 100644
--- a/src/views/BasicData/MenuManagement/index.vue
+++ b/src/views/BasicData/MenuManagement/index.vue
@@ -1,16 +1,36 @@
 <template>
-  <div class="app-container">
-    <el-row>
+  <div class="app-container mes-admin-page menu-management-page">
+<!--    <div class="heroCard">-->
+<!--      <div class="heroContent">-->
+<!--        <div class="heroText">-->
+<!--          <div class="heroTitle">菜单权限编排</div>-->
+<!--          <div class="heroSubtitle">围绕角色完成一级菜单、二级菜单的分配、回收与排序维护。</div>-->
+<!--        </div>-->
+<!--        <div class="heroActions">-->
+<!--          <el-button size="small" type="primary" plain icon="el-icon-plus" @click="addFisrtLevel">-->
+<!--            {{ $t('menuManagement.addFirstLevelModule') }}-->
+<!--          </el-button>-->
+<!--          <div class="roleStatus">-->
+<!--            <span class="roleStatusLabel">{{ $t('menuManagement.role') }}</span>-->
+<!--            <span class="roleStatusValue">{{ roleName || '&#45;&#45;' }}</span>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+
+    <el-row :gutter="18" class="workspaceRow">
       <el-col :span="7">
-<!--        <el-card style="margin-bottom: 10px">-->
-<!--          <el-button size="small" type="distribution" @click="addFisrtLevel">创建一级菜单</el-button>-->
-<!--        </el-card>-->
-        <el-card style="height: 550px">
-          <div slot="header">
+        <el-card class="boardCard">
+          <div slot="header" style="padding: 5px 11px">
+            <div class="panelHeader">
+                <div class="panelTitle">{{ $t('menuManagement.firstLevelMenuName') }}</div>
+              <div class="panelCount">{{ fisrtLevelFilter.length }}</div>
+            </div>
             <el-input v-model="filterTextLeft" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small"/>
           </div>
           <el-table
             ref="multipleTableLeft"
+            class="panelTable"
             :data="fisrtLevelFilter"
             height="500"
             highlight-current-row
@@ -28,44 +48,51 @@
         </el-card>
       </el-col>
       <el-col :span="1">
-        <el-tooltip class="item" :content="$t('menuManagement.assignFirstLevelTooltip')" effect="dark" placement="top-start">
-          <el-button
-            :disabled="!roleName || selectLeft.length === 0"
-            icon="el-icon-right"
-            size="mini"
-            style="margin: 300px auto 0 auto;display: block"
-            type="primary"
-            @click="giveFirstLevel"/>
-        </el-tooltip>
+        <div class="transferRail">
+          <el-tooltip class="item" :content="$t('menuManagement.assignFirstLevelTooltip')" effect="dark" placement="top-start">
+            <el-button
+              :disabled="!roleName || selectLeft.length === 0"
+              class="transferButton"
+              icon="el-icon-right"
+              size="mini"
+              type="primary"
+              @click="giveFirstLevel"/>
+          </el-tooltip>
+        </div>
       </el-col>
       <el-col :span="8">
-<!--        <el-card style="margin-bottom: 10px">-->
-<!-- -->
-<!--        </el-card>-->
-        <el-card style="height: 550px">
-          <div slot="header">
-              <span>{{ $t('menuManagement.role') }}</span>
-            <el-select
-              v-model="roleName"
-              filterable
-              :placeholder="$t('menuManagement.selectPlaceholder')"
-              size="small"
-              style="width:150px;margin-left:10px"
-              @change="getModule">
-              <el-option
-                v-for="item in roleNames"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"/>
-            </el-select>
-            <el-input v-model="filterText" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small" style="width:200px;margin-left:10px"/>
+        <el-card class="boardCard centerBoardCard">
+          <div slot="header" style="padding: 5px 11px">
+            <div class="panelHeader">
+                <div class="panelTitle">{{ $t('menuManagement.roleMenuData') }}</div>
+              <div class="panelCount">{{ moduleTree.length }}</div>
+            </div>
+            <div class="panelControls">
+              <div class="roleSelector">
+                <span class="fieldLabel">{{ $t('menuManagement.role') }}</span>
+                <el-select
+                  v-model="roleName"
+                  filterable
+                  :placeholder="$t('menuManagement.selectPlaceholder')"
+                  size="small"
+                  style="width: 150px"
+                  @change="getModule">
+                  <el-option
+                    v-for="item in roleNames"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"/>
+                </el-select>
+              </div>
+              <el-input v-model="filterText" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small" style="width: 200px"/>
+            </div>
           </div>
           <el-tree
             ref="moduleTree"
             :data="moduleTree"
             :filter-node-method="filterNode"
             check-strictly
-            class="moduleTree"
+            class="moduleTree panelTree"
             default-expand-all
             node-key="id"
             show-checkbox
@@ -98,29 +125,32 @@
         </el-card>
       </el-col>
       <el-col :span="1">
-        <el-tooltip class="item" :content="$t('menuManagement.assignSecondLevelTooltip')" effect="dark" placement="top-start">
-          <el-button
-            :disabled="treeCheckList.length !== 1 || selectRight.length === 0 || treeCheckListJudge"
-            icon="el-icon-back"
-            size="mini"
-            style="margin: 300px auto 0 auto;display: block"
-            type="primary"
-            @click="giveSecondLevel"/>
-        </el-tooltip>
+        <div class="transferRail">
+          <el-tooltip class="item" :content="$t('menuManagement.assignSecondLevelTooltip')" effect="dark" placement="top-start">
+            <el-button
+              :disabled="treeCheckList.length !== 1 || selectRight.length === 0 || treeCheckListJudge"
+              class="transferButton"
+              icon="el-icon-back"
+              size="mini"
+              type="primary"
+              @click="giveSecondLevel"/>
+          </el-tooltip>
+        </div>
       </el-col>
       <el-col :span="7">
-<!--        <el-card style="margin-bottom: 10px">-->
-<!--          <el-button size="small" type="distribution" @click="addSecondLevel">创建二级菜单</el-button>-->
-<!--          <el-button size="small" style="float: right" type="success" @click="RoleNameasdShow=!RoleNameasdShow">-->
-<!--            模块分配情况-->
-<!--          </el-button>-->
-<!--        </el-card>-->
-        <el-card style="height: 550px;">
-          <div slot="header">
+        <el-card class="boardCard">
+          <div slot="header" style="padding: 5px 11px">
+          <div class="panelHeader">
+
+                <div class="panelTitle">{{ $t('menuManagement.secondLevelMenuName') }}</div>
+
+              <div class="panelCount">{{ secondLevelFilter.length }}</div>
+            </div>
             <el-input v-model="filterTextRight" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small"/>
           </div>
           <el-table
             ref="multipleTableRight"
+            class="panelTable"
             :data="secondLevelFilter"
             height="500"
             highlight-current-row
@@ -139,24 +169,30 @@
       </el-col>
     </el-row>
 
-    <el-row v-show="RoleNameasdShow">
-      <el-card>
+    <el-row v-show="RoleNameasdShow" class="statusRow">
+      <el-card class="statusCard">
         <div slot="header">
-          <el-select
-            v-model="TitleValue"
-            filterable
-            :placeholder="$t('menuManagement.selectPlaceholder')"
-            size="small"
-            style="width:200px;margin-left:10px"
-            @change="getTitle">
-            <el-option
-              v-for="item in Title"
-              :key="item.value"
-              :label="translateMenuTitle(item.label)"
-              :value="item.value"/>
-          </el-select>
+          <div class="panelHeader">
+            <div>
+              <div class="panelTitle">模块分配情况</div>
+              <div class="panelSubtitle">按菜单查看已分配角色</div>
+            </div>
+            <el-select
+              v-model="TitleValue"
+              filterable
+              :placeholder="$t('menuManagement.selectPlaceholder')"
+              size="small"
+              style="width: 220px"
+              @change="getTitle">
+              <el-option
+                v-for="item in Title"
+                :key="item.value"
+                :label="translateMenuTitle(item.label)"
+                :value="item.value"/>
+            </el-select>
+          </div>
         </div>
-        <el-table :data="RoleNameasd" border height="200" size="mini" stripe style="width: 465px">
+        <el-table :data="RoleNameasd" border class="statusTable" height="200" size="mini" stripe style="width: 100%">
           <el-table-column align="center" :label="$t('menuManagement.sequence')" type="index" width="50"/>
           <el-table-column align="center" :label="$t('menuManagement.roleName')" width="400">
             <template slot-scope="scope">
@@ -535,12 +571,225 @@ export default {
 </script>
 
 <style scoped>
+.menu-management-page {
+  min-height: calc(100vh - 84px);
+}
+
+.heroCard {
+  margin-bottom: 18px;
+  padding: 18px 22px;
+  border: 1px solid rgba(207, 220, 232, 0.9);
+  border-radius: 18px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 247, 252, 0.98) 100%);
+  box-shadow: 0 14px 34px rgba(31, 57, 90, 0.08);
+}
+
+.heroContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.heroTitle {
+  color: #203247;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.heroSubtitle {
+  margin-top: 6px;
+  color: #667a90;
+  font-size: 13px;
+}
+
+.heroActions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.roleStatus {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid rgba(31, 120, 209, 0.18);
+  border-radius: 999px;
+  background: rgba(239, 247, 255, 0.92);
+}
+
+.roleStatusLabel {
+  color: #5f7186;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.roleStatusValue {
+  color: #1f78d1;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.workspaceRow {
+  margin-top: 2px;
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.panelTitle {
+  color: #203247;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.panelSubtitle {
+  margin-top: 4px;
+  color: #6e8197;
+  font-size: 12px;
+}
+
+.panelCount {
+  min-width: 38px;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #edf6ff 0%, #dbeeff 100%);
+  color: #1f78d1;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 28px;
+  text-align: center;
+}
+
+.panelControls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  flex-wrap: nowrap;
+}
+
+.roleSelector {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.fieldLabel {
+  color: #203247;
+  font-weight: 600;
+}
+
+.transferRail {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 550px;
+}
+
+.transferButton {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  box-shadow: 0 12px 24px rgba(31, 120, 209, 0.16);
+}
+
+.panelTree {
+  min-height: 500px;
+  max-height: 500px;
+  overflow: auto;
+  padding: 6px 4px 0;
+}
+
+.panelTable,
+.statusTable {
+  width: 100% !important;
+}
+
+.statusRow {
+  margin-top: 18px;
+}
+
 .custom-tree-node {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 14px;
-  padding-right: 8px;
+  gap: 12px;
+  padding: 6px 8px 6px 2px;
+}
+
+::v-deep .boardCard > .el-card__header,
+::v-deep .statusCard > .el-card__header {
+  padding-bottom: 10px;
+}
+
+::v-deep .boardCard > .el-card__body,
+::v-deep .statusCard > .el-card__body {
+  //display: flex;
+  //flex-direction: column;
+}
+
+::v-deep .centerBoardCard > .el-card__body {
+  overflow: visible;
+}
+
+::v-deep .panelTree .el-tree-node__content {
+  height: auto;
+  min-height: 34px;
+  border-radius: 10px;
+}
+
+::v-deep .panelTree .el-tree-node__content:hover {
+  background: #eef6ff;
+}
+
+::v-deep .custom-tree-node .el-button--text {
+  padding: 4px 6px;
+  color: #1f78d1;
+}
+
+@media (max-width: 1400px) {
+  .heroContent {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .heroActions {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 1200px) {
+  .workspaceRow {
+    display: block;
+  }
+
+  .workspaceRow .el-col {
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
+  .transferRail {
+    min-height: auto;
+    padding: 4px 0;
+  }
+
+  .transferButton {
+    transform: rotate(90deg);
+  }
 }
 </style>
diff --git a/src/views/BasicData/PartsNumberMaintenance/index.vue b/src/views/BasicData/PartsNumberMaintenance/index.vue
index 6b2d0b2..5e81205 100644
--- a/src/views/BasicData/PartsNumberMaintenance/index.vue
+++ b/src/views/BasicData/PartsNumberMaintenance/index.vue
@@ -809,6 +809,7 @@ export default {
           return this.group[i].label
         }
       }
+      return ''
     }
   },
   watch: {
diff --git a/src/views/BasicData/PersonnelManagement/index.vue b/src/views/BasicData/PersonnelManagement/index.vue
index dd1442c..9d58630 100644
--- a/src/views/BasicData/PersonnelManagement/index.vue
+++ b/src/views/BasicData/PersonnelManagement/index.vue
@@ -1,20 +1,21 @@
 <template>
-  <div class="app-container">
-    <el-row>
+  <div class="app-container mes-admin-page">
+    <el-row class="personnel-shell">
       <el-col :span="6">
-        <el-card>
+        <el-card class="actionCard">
           <el-button
             icon="el-icon-circle-plus-outline"
             size="small"
             type="distribution"
-            @click="handleAdd('department_Form')">{{ $t('personnelManagement.add') }}
+            @click="handleAdd('department_Form')"
+          >{{ $t('personnelManagement.add') }}
           </el-button>
           <el-button icon="el-icon-edit" plain size="small" type="warning" @click="handleEdit()">{{ $t('personnelManagement.edit') }}</el-button>
           <el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteTable()">{{ $t('personnelManagement.delete') }}</el-button>
         </el-card>
       </el-col>
       <el-col :span="18">
-        <el-card>
+        <el-card class="actionCard searchCard">
           <span>{{ $t('personnelManagement.peopleName') }}</span>
           <el-input
             v-model="Name"
@@ -22,7 +23,8 @@
             clearable
             :placeholder="$t('personnelManagement.peopleNamePlaceholder')"
             size="small"
-            style="width: 200px; margin-right: 15px">
+            style="width: 200px; margin-right: 15px"
+          >
             <el-button slot="append" icon="el-icon-search" @click="fetchPeopleForName"/>
           </el-input>
           <el-button icon="el-icon-circle-plus-outline" size="small" type="distribution" @click="addPeople()">{{ $t('personnelManagement.add') }}
@@ -37,7 +39,8 @@
             plain
             size="small"
             type="success"
-            @click="moveGroup">{{ $t('personnelManagement.move') }}
+            @click="moveGroup"
+          >{{ $t('personnelManagement.move') }}
           </el-button>
           <!--<el-button size="small" @click="postMaintain()">岗位维护</el-button>-->
           <el-popover
@@ -46,13 +49,15 @@
             placement="bottom"
             trigger="click"
             width="178"
-            @hide="hide()">
+            @hide="hide()"
+          >
             <el-dropdown placement="right-start" size="small" style="margin-right: 0">
               <el-input
                 v-model="nodeName1"
                 :disabled="true"
                 :placeholder="$t('personnelManagement.selectDepartmentPlaceholder')"
-                size="small"/>
+                size="small"
+              />
               <el-button size="small" style="margin-left: 50px; margin-top: 15px" type="text" @click="moveGroupConfim">
                 {{ $t('common.confirm') }}
               </el-button>
@@ -64,7 +69,8 @@
                   accordion
                   node-key="id"
                   style="width: 200px;margin: 10px"
-                  @node-click="NodeClick"/>
+                  @node-click="NodeClick"
+                />
               </el-dropdown-menu>
             </el-dropdown>
           </el-popover>
@@ -72,10 +78,10 @@
       </el-col>
     </el-row>
 
-    <el-row>
+    <el-row class="personnel-shell contentRow">
       <el-col :span="6">
-        <el-card class="box-card" style="min-height: 600px; max-height: 650px">
-          <div slot="header" class="clearfix">
+        <el-card class="box-card departmentCard" style="min-height: 600px; max-height: 650px">
+          <div slot="header" class="clearfix" style="display: flex; align-items: center;justify-content: space-between;">
             <span>{{ $t('personnelManagement.departmentMaintenance') }}</span>
             <el-button style="float: right; padding: 3px 0" type="text" @click="expandALL()">{{ $t('personnelManagement.expand') }}</el-button>
           </div>
@@ -88,12 +94,13 @@
               default-expand-all
               node-key="id"
               show-checkbox
-              @check-change="handleClick"/>
+              @check-change="handleClick"
+            />
           </div>
         </el-card>
       </el-col>
       <el-col :span="18">
-        <el-card>
+        <el-card class="tableCard">
           <el-table
             ref="multipleTable"
             :data="List"
@@ -102,11 +109,13 @@
             size="mini"
             style="width: 100%"
             tooltip-effect="dark"
-            @selection-change="handleSelectionChange">
+            @selection-change="handleSelectionChange"
+          >
             <el-table-column
               align="center"
               type="selection"
-              width="50"/>
+              width="50"
+            />
             <el-table-column align="center" type="index" :label="$t('personnelManagement.sequence')" />
             <!--<el-table-column align="center" label="照片" width="200">-->
             <!--  <template slot-scope="scope">-->
@@ -171,11 +180,11 @@
             <!--                {{ scope.row.身份证号 }}-->
             <!--              </template>-->
             <!--            </el-table-column>-->
-<!--            <el-table-column align="center" label="学历" width="100">-->
-<!--              <template slot-scope="scope">-->
-<!--                {{ scope.row.学历名称 }}-->
-<!--              </template>-->
-<!--            </el-table-column>-->
+            <!--            <el-table-column align="center" label="学历" width="100">-->
+            <!--              <template slot-scope="scope">-->
+            <!--                {{ scope.row.学历名称 }}-->
+            <!--              </template>-->
+            <!--            </el-table-column>-->
             <!--            <el-table-column align="center" label="入职时间" width="100">-->
             <!--              <template slot-scope="scope">-->
             <!--                {{-->
@@ -190,16 +199,16 @@
             <!--                }}-->
             <!--              </template>-->
             <!--            </el-table-column>-->
-<!--            <el-table-column align="center" label="联系方式" width="110">-->
-<!--              <template slot-scope="scope">-->
-<!--                {{ scope.row.联系电话 }}-->
-<!--              </template>-->
-<!--            </el-table-column>-->
-<!--            <el-table-column align="center" label="班组" width="110">-->
-<!--              <template slot-scope="scope">-->
-<!--                {{ scope.row.班组名称 }}-->
-<!--              </template>-->
-<!--            </el-table-column>-->
+            <!--            <el-table-column align="center" label="联系方式" width="110">-->
+            <!--              <template slot-scope="scope">-->
+            <!--                {{ scope.row.联系电话 }}-->
+            <!--              </template>-->
+            <!--            </el-table-column>-->
+            <!--            <el-table-column align="center" label="班组" width="110">-->
+            <!--              <template slot-scope="scope">-->
+            <!--                {{ scope.row.班组名称 }}-->
+            <!--              </template>-->
+            <!--            </el-table-column>-->
             <!--            <el-table-column align="center" label="民族" width="100">-->
             <!--              <template slot-scope="scope">-->
             <!--                {{ scope.row.民族 }}-->
@@ -222,7 +231,8 @@
                   icon="el-icon-edit"
                   size="mini"
                   type="primary"
-                  @click="handleEditPeople(scope.row)">{{ $t('personnelManagement.edit') }}
+                  @click="handleEditPeople(scope.row)"
+                >{{ $t('personnelManagement.edit') }}
                 </el-button>
                 <!--<el-button-->
                 <!--size="mini"-->
@@ -240,7 +250,8 @@
               :total="total"
               layout="total, sizes, prev, pager, next, jumper"
               @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"/>
+              @current-change="handleCurrentChange"
+            />
           </div>
         </el-card>
       </el-col>
@@ -253,14 +264,16 @@
       :visible.sync="department_DFV"
       center
       style="min-height: 200px"
-      width="400px">
+      width="400px"
+    >
       <el-form
         ref="department_Form"
         :model="department_Form"
         :rules="rules"
         class="demo-ruleForm"
         label-position="left"
-        label-width="110px">
+        label-width="110px"
+      >
         <el-form-item :label="$t('personnelManagement.departmentName')" prop="DepartmentName">
           <el-input v-model="department_Form.DepartmentName" size="small" style="width:200px"/>
         </el-form-item>
@@ -271,13 +284,15 @@
           v-if="department_Title==='add'"
           :disabled="handleAdd_disable"
           type="primary"
-          @click="submitAdd('department_Form')">{{ $t('common.confirm') }}
+          @click="submitAdd('department_Form')"
+        >{{ $t('common.confirm') }}
         </el-button>
         <el-button
           v-else-if="department_Title==='edit'"
           :disabled="handleAdd_disable"
           type="primary"
-          @click="submitEdit('department_Form')">{{ $t('common.confirm') }}
+          @click="submitEdit('department_Form')"
+        >{{ $t('common.confirm') }}
         </el-button>
       </div>
     </el-dialog>
@@ -288,14 +303,16 @@
       :visible.sync="people_DFV"
       center
       style="min-height: 200px"
-      width="400px">
+      width="400px"
+    >
       <el-form
         ref="people_form"
         :model="people_form"
         :rules="rules"
         class="demo-ruleForm"
         label-position="left"
-        label-width="110px">
+        label-width="110px"
+      >
         <el-row>
           <el-form-item :label="$t('personnelManagement.employeeName')" prop="Name">
             <el-input v-model="people_form.Name" size="small" style="width:200px"/>
@@ -307,76 +324,75 @@
             <el-input v-model="people_form.Password" size="small" style="width:200px"/>
           </el-form-item>
 
-
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="性别" prop="Sex">-->
-<!--              <el-select v-model="people_form.Sex" clearable placeholder="请选择性别" size="small" style="width: 200px">-->
-<!--                <el-option-->
-<!--                  v-for="item in SexData"-->
-<!--                  :key="item.value"-->
-<!--                  :label="item.label"-->
-<!--                  :value="item.value"/>-->
-<!--              </el-select>-->
-<!--            </el-form-item>-->
-<!--          </el-col>-->
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="出生日期" prop="Birthday">-->
-<!--              <el-date-picker-->
-<!--                v-model="people_form.Birthday"-->
-<!--                placeholder="请选择出生日期"-->
-<!--                size="small"-->
-<!--                style="width: 200px"-->
-<!--                type="date"-->
-<!--                value-format="yyyy-MM-dd"/>-->
-<!--            </el-form-item>-->
-<!--          </el-col>-->
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="身份证号" prop="IDcard">-->
-<!--              <el-input v-model="people_form.IDcard" size="small" style="width:200px"/>-->
-<!--            </el-form-item>-->
-<!--          </el-col>-->
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="入职时间" prop="TimeOfEntry">-->
-<!--              <el-date-picker-->
-<!--                v-model="people_form.TimeOfEntry"-->
-<!--                placeholder="请选择入职时间"-->
-<!--                size="small"-->
-<!--                style="width: 200px"-->
-<!--                type="date"-->
-<!--                value-format="yyyy-MM-dd"/>-->
-<!--            </el-form-item>-->
-<!--          </el-col>-->
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="联系方式" prop="ContactInformation">-->
-<!--              <el-input v-model="people_form.ContactInformation" size="small" style="width:200px"/>-->
-<!--            </el-form-item>-->
-<!--          </el-col>-->
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="学历" prop="Education">-->
-<!--              <el-select-->
-<!--                v-model="people_form.Education"-->
-<!--                clearable-->
-<!--                placeholder="请选择学历"-->
-<!--                size="small"-->
-<!--                style="width: 200px">-->
-<!--                <el-option-->
-<!--                  v-for="item in EducationDate"-->
-<!--                  :key="item.value"-->
-<!--                  :label="item.label"-->
-<!--                  :value="item.value"/>-->
-<!--              </el-select>-->
-<!--            </el-form-item>-->
-<!--          </el-col>-->
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="家庭住址" prop="Address">-->
-<!--              <el-input v-model="people_form.Address" size="small" style="width:200px"/>-->
-<!--            </el-form-item>-->
-<!--          </el-col>-->
-<!--          <el-col :span="12">-->
-<!--            <el-form-item label="民族" prop="Nation">-->
-<!--              <el-input v-model="people_form.Nation" size="small" style="width:200px"/>-->
-<!--            </el-form-item>-->
-<!--          </el-col>-->
+          <!--          <el-col :span="12">-->
+          <!--            <el-form-item label="性别" prop="Sex">-->
+          <!--              <el-select v-model="people_form.Sex" clearable placeholder="请选择性别" size="small" style="width: 200px">-->
+          <!--                <el-option-->
+          <!--                  v-for="item in SexData"-->
+          <!--                  :key="item.value"-->
+          <!--                  :label="item.label"-->
+          <!--                  :value="item.value"/>-->
+          <!--              </el-select>-->
+          <!--            </el-form-item>-->
+          <!--          </el-col>-->
+          <!--          <el-col :span="12">-->
+          <!--            <el-form-item label="出生日期" prop="Birthday">-->
+          <!--              <el-date-picker-->
+          <!--                v-model="people_form.Birthday"-->
+          <!--                placeholder="请选择出生日期"-->
+          <!--                size="small"-->
+          <!--                style="width: 200px"-->
+          <!--                type="date"-->
+          <!--                value-format="yyyy-MM-dd"/>-->
+          <!--            </el-form-item>-->
+          <!--          </el-col>-->
+          <!--          <el-col :span="12">-->
+          <!--            <el-form-item label="身份证号" prop="IDcard">-->
+          <!--              <el-input v-model="people_form.IDcard" size="small" style="width:200px"/>-->
+          <!--            </el-form-item>-->
+          <!--          </el-col>-->
+          <!--          <el-col :span="12">-->
+          <!--            <el-form-item label="入职时间" prop="TimeOfEntry">-->
+          <!--              <el-date-picker-->
+          <!--                v-model="people_form.TimeOfEntry"-->
+          <!--                placeholder="请选择入职时间"-->
+          <!--                size="small"-->
+          <!--                style="width: 200px"-->
+          <!--                type="date"-->
+          <!--                value-format="yyyy-MM-dd"/>-->
+          <!--            </el-form-item>-->
+          <!--          </el-col>-->
+          <!--          <el-col :span="12">-->
+          <!--            <el-form-item label="联系方式" prop="ContactInformation">-->
+          <!--              <el-input v-model="people_form.ContactInformation" size="small" style="width:200px"/>-->
+          <!--            </el-form-item>-->
+          <!--          </el-col>-->
+          <!--          <el-col :span="12">-->
+          <!--            <el-form-item label="学历" prop="Education">-->
+          <!--              <el-select-->
+          <!--                v-model="people_form.Education"-->
+          <!--                clearable-->
+          <!--                placeholder="请选择学历"-->
+          <!--                size="small"-->
+          <!--                style="width: 200px">-->
+          <!--                <el-option-->
+          <!--                  v-for="item in EducationDate"-->
+          <!--                  :key="item.value"-->
+          <!--                  :label="item.label"-->
+          <!--                  :value="item.value"/>-->
+          <!--              </el-select>-->
+          <!--            </el-form-item>-->
+          <!--          </el-col>-->
+          <!--          <el-col :span="12">-->
+          <!--            <el-form-item label="家庭住址" prop="Address">-->
+          <!--              <el-input v-model="people_form.Address" size="small" style="width:200px"/>-->
+          <!--            </el-form-item>-->
+          <!--          </el-col>-->
+          <!--          <el-col :span="12">-->
+          <!--            <el-form-item label="民族" prop="Nation">-->
+          <!--              <el-input v-model="people_form.Nation" size="small" style="width:200px"/>-->
+          <!--            </el-form-item>-->
+          <!--          </el-col>-->
           <!--<el-col :span="12">-->
           <!--  <el-form-item label="职称" prop="Post">-->
           <!--    <el-select-->
@@ -413,14 +429,16 @@
           :disabled="addPeople_disable"
           :loading="btnLoading"
           type="primary"
-          @click="submitAddPeople">{{ $t('common.confirm') }}
+          @click="submitAddPeople"
+        >{{ $t('common.confirm') }}
         </el-button>
         <el-button
           v-else-if="people_title === 'edit'"
           :disabled="addPeople_disable"
           :loading="btnLoading"
           type="primary"
-          @click="submitEditPeople">{{ $t('common.confirm') }}
+          @click="submitEditPeople"
+        >{{ $t('common.confirm') }}
         </el-button>
       </div>
     </el-dialog>
@@ -432,7 +450,8 @@
       center
       style="height: 800px"
       :title="$t('personnelManagement.resignedList')"
-      width="40%">
+      width="40%"
+    >
       <el-table
         :data="LeavingList"
         border
@@ -441,7 +460,8 @@
         size="mini"
         stripe
         style="width: 100%"
-        tooltip-effect="dark">
+        tooltip-effect="dark"
+      >
         <el-table-column align="center" type="index" :label="$t('personnelManagement.sequence')" />
         <el-table-column align="center" :label="$t('personnelManagement.departmentName')" width="100">
           <template slot-scope="scope">
@@ -463,62 +483,63 @@
             {{ scope.row.姓名 }}
           </template>
         </el-table-column>
-<!--        <el-table-column align="center" label="性别" width="100">-->
-<!--          <template slot-scope="scope">-->
-<!--            {{ scope.row.性别 }}-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--        <el-table-column align="center" label="身份证号" width="165">-->
-<!--          <template slot-scope="scope">-->
-<!--            {{ scope.row.身份证号 }}-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--        <el-table-column align="center" label="学历" width="100">-->
-<!--          <template slot-scope="scope">-->
-<!--            {{ scope.row.学历名称 }}-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--        <el-table-column align="center" label="入职时间" width="100">-->
-<!--          <template slot-scope="scope">-->
-<!--            {{-->
-<!--              scope.row.入公司时间 !== '' && scope.row.入公司时间 !== null ? scope.row.入公司时间 = scope.row.入公司时间.split(' ')[0] : scope.row.入公司时间-->
-<!--            }}-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--        <el-table-column align="center" label="出生日期" width="100">-->
-<!--          <template slot-scope="scope">-->
-<!--            {{-->
-<!--              scope.row.出生日期 !== '' && scope.row.出生日期 !== null ? scope.row.出生日期 = scope.row.出生日期.split(' ')[0] : scope.row.出生日期-->
-<!--            }}-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--        <el-table-column align="center" label="联系方式" width="110">-->
-<!--          <template slot-scope="scope">-->
-<!--            {{ scope.row.联系电话 }}-->
-<!--          </template>-->
-<!--        </el-table-column>-->
+        <!--        <el-table-column align="center" label="性别" width="100">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            {{ scope.row.性别 }}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+        <!--        <el-table-column align="center" label="身份证号" width="165">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            {{ scope.row.身份证号 }}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+        <!--        <el-table-column align="center" label="学历" width="100">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            {{ scope.row.学历名称 }}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+        <!--        <el-table-column align="center" label="入职时间" width="100">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            {{-->
+        <!--              scope.row.入公司时间 !== '' && scope.row.入公司时间 !== null ? scope.row.入公司时间 = scope.row.入公司时间.split(' ')[0] : scope.row.入公司时间-->
+        <!--            }}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+        <!--        <el-table-column align="center" label="出生日期" width="100">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            {{-->
+        <!--              scope.row.出生日期 !== '' && scope.row.出生日期 !== null ? scope.row.出生日期 = scope.row.出生日期.split(' ')[0] : scope.row.出生日期-->
+        <!--            }}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+        <!--        <el-table-column align="center" label="联系方式" width="110">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            {{ scope.row.联系电话 }}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
         <!--        <el-table-column align="center" label="岗位工种" width="100">-->
         <!--          <template slot-scope="scope">-->
         <!--            {{ scope.row.岗位名称 }}-->
         <!--          </template>-->
         <!--        </el-table-column>-->
-<!--        <el-table-column align="center" label="民族" width="100">-->
-<!--          <template slot-scope="scope">-->
-<!--            {{ scope.row.民族 }}-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--        <el-table-column align="center" label="家庭住址">-->
-<!--          <template slot-scope="scope">-->
-<!--            {{ scope.row.家庭住址 }}-->
-<!--          </template>-->
-<!--        </el-table-column>-->
+        <!--        <el-table-column align="center" label="民族" width="100">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            {{ scope.row.民族 }}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+        <!--        <el-table-column align="center" label="家庭住址">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            {{ scope.row.家庭住址 }}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
         <el-table-column align="center" :label="$t('personnelManagement.operation')" width="100">
           <template slot-scope="scope">
             <el-button
               icon="el-icon-circle-close-outline"
               size="mini"
               type="danger"
-              @click="deletePeople(scope.row)">{{ $t('personnelManagement.delete') }}
+              @click="deletePeople(scope.row)"
+            >{{ $t('personnelManagement.delete') }}
             </el-button>
           </template>
         </el-table-column>
@@ -531,7 +552,8 @@
           :total="totalN"
           layout="total, sizes, prev, pager, next, jumper"
           @size-change="handleSizeChangeN"
-          @current-change="handleCurrentChangeN"/>
+          @current-change="handleCurrentChangeN"
+        />
       </div>
     </el-dialog>
     <el-dialog
@@ -540,7 +562,8 @@
       center
       style="height: 800px"
       :title="$t('personnelManagement.uploadPicture')"
-      width="300px">
+      width="300px"
+    >
       <el-upload
         id="invoiceScan"
         ref="upload"
@@ -556,7 +579,8 @@
         :on-remove="handelLimitStyle"
         :on-success="uploadSuccess"
         list-type="picture-card"
-        style="margin-left: 60px">
+        style="margin-left: 60px"
+      >
         <i class="el-icon-plus"/>
       </el-upload>
       <div slot="footer" class="dialog-footer">
@@ -1257,5 +1281,49 @@ export default {
 </script>
 
 <style scoped>
+.personnel-shell {
+  margin-bottom: 14px;
+}
 
+.actionCard,
+.departmentCard,
+.tableCard {
+  border-radius: 14px;
+}
+
+.searchCard {
+  min-height: 64px;
+}
+
+.contentRow ::v-deep .el-card__body {
+  padding: 14px !important;
+}
+
+.departmentCard {
+  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(244, 248, 252, 0.98) 100%);
+}
+
+.tableCard {
+  min-height: 650px;
+}
+
+::v-deep .departmentCard .el-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+::v-deep .departmentCard .el-tree {
+  padding: 4px 2px;
+  background: transparent;
+}
+
+::v-deep .departmentCard .el-tree-node__content,
+::v-deep .departmentCard .el-tree-node__label {
+  font-size: 13px;
+}
+
+::v-deep .tableCard .el-table {
+  margin-top: 0;
+}
 </style>
diff --git a/src/views/BasicData/SystemRrolemaintenance/index.vue b/src/views/BasicData/SystemRrolemaintenance/index.vue
index 3332f82..874fcab 100644
--- a/src/views/BasicData/SystemRrolemaintenance/index.vue
+++ b/src/views/BasicData/SystemRrolemaintenance/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container mes-admin-page">
     <el-card>
       <!--<el-input v-model="RoleFunctioning" size="small" clearable placeholder="请输入角色功能" style="width:200px"/>-->
       <!--<el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 15px" plain @click="searchData()">查询</el-button>-->
diff --git a/src/views/BasicData/WorkshopPersonnelRoleMana/index.vue b/src/views/BasicData/WorkshopPersonnelRoleMana/index.vue
index 28a6b23..40915a4 100644
--- a/src/views/BasicData/WorkshopPersonnelRoleMana/index.vue
+++ b/src/views/BasicData/WorkshopPersonnelRoleMana/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container mes-admin-page">
     <el-card>
       <div style="margin-top: 7px; margin-bottom: 7px">
         <el-input v-model="staffName" :placeholder="$t('workshopPersonnelRoleMana.staffName')" size="small" clearable style="width:200px"/>
diff --git a/src/views/BasicDataMaintenance/StationInformationMaintenance/index.vue b/src/views/BasicDataMaintenance/StationInformationMaintenance/index.vue
index 6006ef4..be08b4e 100644
--- a/src/views/BasicDataMaintenance/StationInformationMaintenance/index.vue
+++ b/src/views/BasicDataMaintenance/StationInformationMaintenance/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container mes-admin-page">
     <el-card>
       <el-table
         v-loading="loading"
diff --git a/src/views/ProcessManagement/MaterialVerificationMaintenance/index.vue b/src/views/ProcessManagement/MaterialVerificationMaintenance/index.vue
index 3d10709..acd67f2 100644
--- a/src/views/ProcessManagement/MaterialVerificationMaintenance/index.vue
+++ b/src/views/ProcessManagement/MaterialVerificationMaintenance/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="app-container mes-admin-page">
     <el-card class="topCard">
-      <div class="topDiv">
+      <div class="topDiv materialToolbar">
         <span style="margin-left: 10px">{{ $t('materialVerificationMaintenance.stationNumberLabel') }}</span>
         <el-select v-model="stationNumberValue" clearable :placeholder="$t('materialVerificationMaintenance.selectStationNumber')" size="small" style="width: 250px" @change="searchOrder">
           <el-option
@@ -46,6 +46,7 @@
         <!--        <el-button type="info" plain size="small" icon="el-icon-upload2" @click="importOrder('form')">物料导入</el-button>-->
         <el-button type="warning" plain size="small" icon="el-icon-download" @click="exportExcel()">{{ $t('materialVerificationMaintenance.exportMaterial') }}</el-button>
       </div>
+      <div class="tablePanel">
       <el-table
         v-loading="loading"
         ref="multipleTable"
@@ -149,6 +150,7 @@
           </template>
         </el-table-column>
       </el-table>
+      </div>
     </el-card>
     <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" :title="$t('materialVerificationMaintenance.createMaterial')" center style="min-height: 200px;" width="800px">
       <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="120px">
@@ -1239,6 +1241,16 @@ export default {
 .topDiv{
   margin-bottom: 10px;
 }
+
+.materialToolbar {
+  align-items: flex-end;
+}
+
+.tablePanel {
+  padding-top: 4px;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.52) 0%, rgba(243,248,252,0.92) 100%);
+}
 .el-select{
   width:200px
 }
@@ -1273,4 +1285,8 @@ export default {
 ::v-deep.el-input.is-disabled .el-input__inner{
   background-color: white!important;
 }
+
+::v-deep .materialToolbar .el-button {
+  margin-bottom: 2px;
+}
 </style>
diff --git a/src/views/QualityAssurance/AssemblyQualitydataQuery/index.vue b/src/views/QualityAssurance/AssemblyQualitydataQuery/index.vue
index 287d18b..e1ad368 100644
--- a/src/views/QualityAssurance/AssemblyQualitydataQuery/index.vue
+++ b/src/views/QualityAssurance/AssemblyQualitydataQuery/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="app-container mes-admin-page">
     <el-card class="topCard">
-      <div class="topDiv">
+      <div class="topDiv queryToolbar">
         <div>
           <!--<span style="margin-left: 10px">制造编号：</span>-->
           <!--<el-input v-model="workCode" placeholder="制造编号" clearable size="small" style="width: 200px; margin-left: 13px"/>-->
@@ -123,116 +123,118 @@
           <!--              size="mini"/>-->
           <!--          </el-select>-->
         </div>
-        <el-table
-          v-loading="loading"
-          ref="multipleTable"
-          :data="tableData"
-          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
-          :cell-class-name="tableRowClassName"
-          :element-loading-text="$t('assemblyQualitydataQuery.loadingData')"
-          element-loading-spinner="el-icon-loading"
-          element-loading-background="rgba(0, 0, 0, 0.2)"
-          class="main"
-          tooltip-effect="dark"
-          height="600px"
-          style="width: 100%"
-          border
-          size="mini">
-          <!--        <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
-          <el-table-column type="index" width="60" :label="$t('assemblyQualitydataQuery.sequence')" align="center"/>
-          <el-table-column align="center" :label="$t('assemblyQualitydataQuery.orderNumber')">
-            <template slot-scope="scope">
-              {{ scope.row.订单号 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.stationNumber')">
-            <template slot-scope="scope">
-              {{ scope.row.工位号 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" :label="$t('assemblyQualitydataQuery.productNumber')">
-            <template slot-scope="scope">
-              {{ scope.row.发动机号 }}
-            </template>
-          </el-table-column>
+        <div class="tablePanel">
+          <el-table
+            v-loading="loading"
+            ref="multipleTable"
+            :data="tableData"
+            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+            :cell-class-name="tableRowClassName"
+            :element-loading-text="$t('assemblyQualitydataQuery.loadingData')"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.2)"
+            class="main assemblyTable"
+            tooltip-effect="dark"
+            height="600px"
+            style="width: 100%"
+            border
+            size="mini">
+            <!--        <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
+            <el-table-column type="index" width="60" :label="$t('assemblyQualitydataQuery.sequence')" align="center"/>
+            <el-table-column align="center" :label="$t('assemblyQualitydataQuery.orderNumber')">
+              <template slot-scope="scope">
+                {{ scope.row.订单号 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.stationNumber')">
+              <template slot-scope="scope">
+                {{ scope.row.工位号 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('assemblyQualitydataQuery.productNumber')">
+              <template slot-scope="scope">
+                {{ scope.row.发动机号 }}
+              </template>
+            </el-table-column>
 
-          <el-table-column align="center" :label="$t('assemblyQualitydataQuery.productModel')">
-            <template slot-scope="scope">
-              {{ scope.row.发动机型号 }}
-            </template>
-          </el-table-column>
-          <!--<el-table-column align="center" label="制造编号">-->
-          <!--  <template slot-scope="scope">-->
-          <!--    {{ scope.row.制造编号 }}-->
-          <!--  </template>-->
-          <!--</el-table-column>-->
-          <!--<el-table-column align="center" label="项目名称">-->
-          <!--  <template slot-scope="scope">-->
-          <!--    {{ scope.row.项目名称 }}-->
-          <!--  </template>-->
-          <!--</el-table-column>-->
-          <!--<el-table-column align="center" label="间隔号">-->
-          <!--  <template slot-scope="scope">-->
-          <!--    {{ scope.row.间隔号 }}-->
-          <!--  </template>-->
-          <!--</el-table-column>-->
-          <!--<el-table-column align="center" label="DS/ES编号">-->
-          <!--  <template slot-scope="scope">-->
-          <!--    {{ scope.row.单元号 }}-->
-          <!--  </template>-->
-          <!--</el-table-column>-->
+            <el-table-column align="center" :label="$t('assemblyQualitydataQuery.productModel')">
+              <template slot-scope="scope">
+                {{ scope.row.发动机型号 }}
+              </template>
+            </el-table-column>
+            <!--<el-table-column align="center" label="制造编号">-->
+            <!--  <template slot-scope="scope">-->
+            <!--    {{ scope.row.制造编号 }}-->
+            <!--  </template>-->
+            <!--</el-table-column>-->
+            <!--<el-table-column align="center" label="项目名称">-->
+            <!--  <template slot-scope="scope">-->
+            <!--    {{ scope.row.项目名称 }}-->
+            <!--  </template>-->
+            <!--</el-table-column>-->
+            <!--<el-table-column align="center" label="间隔号">-->
+            <!--  <template slot-scope="scope">-->
+            <!--    {{ scope.row.间隔号 }}-->
+            <!--  </template>-->
+            <!--</el-table-column>-->
+            <!--<el-table-column align="center" label="DS/ES编号">-->
+            <!--  <template slot-scope="scope">-->
+            <!--    {{ scope.row.单元号 }}-->
+            <!--  </template>-->
+            <!--</el-table-column>-->
 
-          <!--<el-table-column align="center" label="工位名称">-->
-          <!--  <template slot-scope="scope">-->
-          <!--    {{ scope.row.工位名称 }}-->
-          <!--  </template>-->
-          <!--</el-table-column>-->
-          <el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.measuringPosition')">
-            <template slot-scope="scope">
-              {{ scope.row.测量位置 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.measuringProject')">
-            <template slot-scope="scope">
-              {{ scope.row.测量项目 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringValue')" width="120px">
-            <template slot-scope="scope">
-              {{ scope.row.测量值 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringUnit')" width="80px">
-            <template slot-scope="scope">
-              {{ scope.row.测量单位 }}
-            </template>
-          </el-table-column>
-          <!--          <el-table-column align="center" label="理论值" width="80px">-->
-          <!--            <template slot-scope="scope">-->
-          <!--              {{ scope.row.理论值 }}-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
-          <el-table-column align="center" :label="$t('assemblyQualitydataQuery.upperLimit')" width="100px">
-            <template slot-scope="scope">
-              {{ scope.row.上限值 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" :label="$t('assemblyQualitydataQuery.lowerLimit')" width="100px">
-            <template slot-scope="scope">
-              {{ scope.row.下限值 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.productionDate')">
-            <template slot-scope="scope">
-              {{ scope.row.生产日期 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" :label="$t('assemblyQualitydataQuery.qualifiedFlag')" width="110px">
-            <template slot-scope="scope">
-              {{ scope.row.合格标志 }}
-            </template>
-          </el-table-column>
-        </el-table>
+            <!--<el-table-column align="center" label="工位名称">-->
+            <!--  <template slot-scope="scope">-->
+            <!--    {{ scope.row.工位名称 }}-->
+            <!--  </template>-->
+            <!--</el-table-column>-->
+            <el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.measuringPosition')">
+              <template slot-scope="scope">
+                {{ scope.row.测量位置 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.measuringProject')">
+              <template slot-scope="scope">
+                {{ scope.row.测量项目 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringValue')" width="120px">
+              <template slot-scope="scope">
+                {{ scope.row.测量值 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringUnit')" width="80px">
+              <template slot-scope="scope">
+                {{ scope.row.测量单位 }}
+              </template>
+            </el-table-column>
+            <!--          <el-table-column align="center" label="理论值" width="80px">-->
+            <!--            <template slot-scope="scope">-->
+            <!--              {{ scope.row.理论值 }}-->
+            <!--            </template>-->
+            <!--          </el-table-column>-->
+            <el-table-column align="center" :label="$t('assemblyQualitydataQuery.upperLimit')" width="100px">
+              <template slot-scope="scope">
+                {{ scope.row.上限值 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('assemblyQualitydataQuery.lowerLimit')" width="100px">
+              <template slot-scope="scope">
+                {{ scope.row.下限值 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.productionDate')">
+              <template slot-scope="scope">
+                {{ scope.row.生产日期 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('assemblyQualitydataQuery.qualifiedFlag')" width="110px">
+              <template slot-scope="scope">
+                {{ scope.row.合格标志 }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
         <div class="block" style="margin-top: 10px;">
           <el-pagination
             v-if="!loading"
@@ -600,4 +602,41 @@ export default {
   .topDiv{
     margin-bottom: 10px;
   }
+  .queryToolbar {
+    align-items: flex-end;
+  }
+  .tablePanel {
+    width: 100%;
+    max-width: 100%;
+    padding-top: 4px;
+    border-radius: 14px;
+    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(243,247,251,0.94) 100%);
+    overflow-x: auto;
+  }
+  .assemblyTable {
+    width: 100% !important;
+    max-width: 100%;
+  }
+  .panelHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  .panelTitle {
+    color: #203247;
+    font-size: 15px;
+    font-weight: 700;
+  }
+  .panelSubtitle {
+    color: #6b7f93;
+    font-size: 12px;
+    margin-top: 3px;
+  }
+  .compactHeader {
+    padding: 0 2px;
+  }
+  ::v-deep .queryToolbar .el-button {
+    margin-bottom: 2px;
+  }
 </style>
diff --git a/src/views/QualityAssurance/InquiryTransitInformation/index.vue b/src/views/QualityAssurance/InquiryTransitInformation/index.vue
index 65143c9..496dc40 100644
--- a/src/views/QualityAssurance/InquiryTransitInformation/index.vue
+++ b/src/views/QualityAssurance/InquiryTransitInformation/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="app-container mes-admin-page">
     <el-card class="topCard">
-      <div class="topDiv">
+      <div class="topDiv queryToolbar">
         <!--<div>-->
         <!--  <span style="margin-left: 10px">制造编号：</span>-->
         <!--  <el-input v-model="workCode" placeholder="制造编号" clearable size="small" style="width: 150px; margin-left: 5px"/>-->
@@ -103,97 +103,98 @@
           </el-button>
           <el-button icon="el-icon-download" size="small" type="info" @click="exportExcel()">Excel</el-button>
         </div>
-        <el-table
-          v-loading="loading"
-          ref="multipleTable"
-          :cell-class-name="tableRowClassName"
-          :data="tableData"
-          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
-          border
-          class="main"
-          element-loading-background="rgba(0, 0, 0, 0.2)"
-          element-loading-spinner="el-icon-loading"
-          :element-loading-text="$t('inquiryTransitInformation.loadingData')"
-          height="600px"
-          size="mini"
-          style="width: 100%;max-height: 650px;margin-top: 10px"
-          tooltip-effect="dark">
-          <!--        <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
-          <el-table-column align="center" :label="$t('inquiryTransitInformation.sequence')" type="index" width="60"/>
-          <el-table-column align="center" :label="$t('inquiryTransitInformation.stationNumber')" width="120">
-            <template slot-scope="scope">
-              {{ scope.row.工位号 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" :label="$t('inquiryTransitInformation.orderNumber')">
-            <template slot-scope="scope">
-              {{ scope.row.订单号 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" :label="$t('inquiryTransitInformation.productNumber')">
-            <template slot-scope="scope">
-              {{ scope.row.发动机号 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" :label="$t('inquiryTransitInformation.productModel')">
-            <template slot-scope="scope">
-              {{ scope.row.机型 }}
-            </template>
-          </el-table-column>
 
-
-          <!--<el-table-column align="center" label="制造编号">-->
-          <!--  <template slot-scope="scope">-->
-          <!--    {{ scope.row.制造编号 }}-->
-          <!--  </template>-->
-          <!--</el-table-column>-->
-          <!--<el-table-column align="center" label="项目名称">-->
-          <!--  <template slot-scope="scope">-->
-          <!--    {{ scope.row.项目名称 }}-->
-          <!--  </template>-->
-          <!--</el-table-column>-->
-          <!--<el-table-column align="center" label="间隔号">-->
-          <!--  <template slot-scope="scope">-->
-          <!--    {{ scope.row.间隔号 }}-->
-          <!--  </template>-->
-          <!--</el-table-column>-->
-          <!--<el-table-column align="center" label="DS/ES编号">-->
-          <!--  <template slot-scope="scope">-->
-          <!--    {{ scope.row.单元号 }}-->
-          <!--  </template>-->
-          <!--</el-table-column>-->
-          <el-table-column align="center" :label="$t('inquiryTransitInformation.arrivalTime')">
-            <template slot-scope="scope">
-              {{ scope.row.到达时间 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" :label="$t('inquiryTransitInformation.departureTime')">
-            <template slot-scope="scope">
-              {{ scope.row.离开时间 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" :label="$t('inquiryTransitInformation.onlineTimeSeconds')">
-            <template slot-scope="scope">
-              {{ scope.row.在线时间 }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" :label="$t('inquiryTransitInformation.isQualified')" width="80px">
-            <template slot-scope="scope">
-              {{ scope.row.是否合格 }}
-            </template>
-          </el-table-column>
-<!--          <el-table-column align="center" label="是否报工" width="80px">-->
-<!--            <template slot-scope="scope">-->
-<!--              {{ scope.row.是否完成报工 ? '是' : '否' }}-->
-<!--            </template>-->
-<!--          </el-table-column>-->
-          <!--          <el-table-column align="center" label="操作时间">-->
-          <!--            <template slot-scope="scope">-->
-          <!--              {{ scope.row.操作时间 }}-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
-        </el-table>
-        <div class="block" style="margin-top: 10px;">
+        <div class="tablePanel">
+          <el-table
+            v-loading="loading"
+            ref="multipleTable"
+            :cell-class-name="tableRowClassName"
+            :data="tableData"
+            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+            border
+            class="main transitTable"
+            element-loading-background="rgba(0, 0, 0, 0.2)"
+            element-loading-spinner="el-icon-loading"
+            :element-loading-text="$t('inquiryTransitInformation.loadingData')"
+            height="600px"
+            size="mini"
+            style="width: 100%"
+            tooltip-effect="dark">
+            <!--        <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
+            <el-table-column align="center" :label="$t('inquiryTransitInformation.sequence')" type="index" width="60"/>
+            <el-table-column align="center" :label="$t('inquiryTransitInformation.stationNumber')" width="120">
+              <template slot-scope="scope">
+                {{ scope.row.工位号 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('inquiryTransitInformation.orderNumber')">
+              <template slot-scope="scope">
+                {{ scope.row.订单号 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('inquiryTransitInformation.productNumber')">
+              <template slot-scope="scope">
+                {{ scope.row.发动机号 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('inquiryTransitInformation.productModel')">
+              <template slot-scope="scope">
+                {{ scope.row.机型 }}
+              </template>
+            </el-table-column>
+            <!--<el-table-column align="center" label="制造编号">-->
+            <!--  <template slot-scope="scope">-->
+            <!--    {{ scope.row.制造编号 }}-->
+            <!--  </template>-->
+            <!--</el-table-column>-->
+            <!--<el-table-column align="center" label="项目名称">-->
+            <!--  <template slot-scope="scope">-->
+            <!--    {{ scope.row.项目名称 }}-->
+            <!--  </template>-->
+            <!--</el-table-column>-->
+            <!--<el-table-column align="center" label="间隔号">-->
+            <!--  <template slot-scope="scope">-->
+            <!--    {{ scope.row.间隔号 }}-->
+            <!--  </template>-->
+            <!--</el-table-column>-->
+            <!--<el-table-column align="center" label="DS/ES编号">-->
+            <!--  <template slot-scope="scope">-->
+            <!--    {{ scope.row.单元号 }}-->
+            <!--  </template>-->
+            <!--</el-table-column>-->
+            <el-table-column align="center" :label="$t('inquiryTransitInformation.arrivalTime')">
+              <template slot-scope="scope">
+                {{ scope.row.到达时间 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('inquiryTransitInformation.departureTime')">
+              <template slot-scope="scope">
+                {{ scope.row.离开时间 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('inquiryTransitInformation.onlineTimeSeconds')">
+              <template slot-scope="scope">
+                {{ scope.row.在线时间 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('inquiryTransitInformation.isQualified')" width="80px">
+              <template slot-scope="scope">
+                {{ scope.row.是否合格 }}
+              </template>
+            </el-table-column>
+  <!--          <el-table-column align="center" label="是否报工" width="80px">-->
+  <!--            <template slot-scope="scope">-->
+  <!--              {{ scope.row.是否完成报工 ? '是' : '否' }}-->
+  <!--            </template>-->
+  <!--          </el-table-column>-->
+            <!--          <el-table-column align="center" label="操作时间">-->
+            <!--            <template slot-scope="scope">-->
+            <!--              {{ scope.row.操作时间 }}-->
+            <!--            </template>-->
+            <!--          </el-table-column>-->
+          </el-table>
+        </div>
+        <div class="block paginationWrap">
           <el-pagination
             v-if="!loading"
             :current-page="pageCurrent"
@@ -456,7 +457,45 @@ export default {
   margin: 5px;
 }
 
+::v-deep .topCard > .el-card__body {
+  display: block !important;
+  width: 100%;
+}
+
 .topDiv {
-  margin-bottom: 10px;
+  //margin-bottom: 10px;
+}
+
+.queryToolbar {
+  //align-items: flex-end;
+}
+
+.contentStack {
+  display: block;
+  width: 100%;
+  clear: both;
+}
+
+.tablePanel {
+  display: block;
+  width: 100%;
+  padding-top: 4px;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(243,247,251,0.94) 100%);
+  overflow-x: auto;
+}
+
+.transitTable {
+  width: 100% !important;
+  max-width: 100%;
+}
+
+.paginationWrap {
+  display: block;
+  width: 100%;
+}
+
+::v-deep .queryToolbar .el-button {
+  margin-bottom: 2px;
 }
 </style>
diff --git a/src/views/QualityAssurance/MaterialDataQuery/index.vue b/src/views/QualityAssurance/MaterialDataQuery/index.vue
index 3dd5afe..512957d 100644
--- a/src/views/QualityAssurance/MaterialDataQuery/index.vue
+++ b/src/views/QualityAssurance/MaterialDataQuery/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="app-container mes-admin-page">
     <el-card class="topCard">
-      <div class="topDiv">
+      <div class="topDiv queryToolbar">
         <div>
           <span style="margin-left: 10px;margin-right: 1px;letter-spacing: 3px">{{ $t('materialDataQuery.stationNumberLabel') }}</span>
           <el-select
@@ -111,21 +111,23 @@
           <!--              size="mini"/>-->
           <!--          </el-select>-->
         </div>
-        <el-table
-          v-loading="loading"
-          ref="multipleTable"
-          :cell-class-name="tableRowClassName"
-          :data="tableData"
-          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
-          border
-          class="main"
-          element-loading-background="rgba(0, 0, 0, 0.2)"
-          element-loading-spinner="el-icon-loading"
-          :element-loading-text="$t('materialDataQuery.loadingData')"
-          height="560px"
-          size="mini"
-          style="width: 100%"
-          tooltip-effect="dark">
+        <div class="contentStack">
+          <div class="tablePanel">
+            <el-table
+              v-loading="loading"
+              ref="multipleTable"
+              :cell-class-name="tableRowClassName"
+              :data="tableData"
+              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
+              border
+              class="main materialTable"
+              element-loading-background="rgba(0, 0, 0, 0.2)"
+              element-loading-spinner="el-icon-loading"
+              :element-loading-text="$t('materialDataQuery.loadingData')"
+              height="560px"
+              size="mini"
+              style="width: 100%"
+              tooltip-effect="dark">
           <!--        <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
           <el-table-column align="center" :label="$t('materialDataQuery.sequence')" type="index" width="60"/>
           <el-table-column align="center" :label="$t('materialDataQuery.orderNumber')" width="120px">
@@ -195,17 +197,19 @@
               {{ scope.row.操作时间 }}
             </template>
           </el-table-column>
-        </el-table>
-        <div class="block" style="margin-top: 10px;">
-          <el-pagination
-            v-if="!loading"
-            :current-page="pageCurrent"
-            :page-size="pageSize"
-            :page-sizes="[15, 30, 40]"
-            :total="total"
-            layout="total, sizes, prev, pager, next, jumper"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"/>
+            </el-table>
+          </div>
+          <div class="block paginationWrap">
+            <el-pagination
+              v-if="!loading"
+              :current-page="pageCurrent"
+              :page-size="pageSize"
+              :page-sizes="[15, 30, 40]"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"/>
+          </div>
         </div>
       </div>
     </el-card>
@@ -524,7 +528,48 @@ export default {
   margin: 5px;
 }
 
+::v-deep .topCard > .el-card__body {
+  display: block !important;
+  width: 100%;
+}
+
 .topDiv {
   margin-bottom: 10px;
 }
+
+.queryToolbar {
+  align-items: flex-end;
+}
+
+.contentStack {
+  display: block;
+  width: 100%;
+  clear: both;
+}
+
+.tablePanel {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding-top: 4px;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(243,247,251,0.94) 100%);
+  overflow-x: auto;
+}
+
+.materialTable {
+  width: 100% !important;
+  max-width: 100%;
+}
+
+.paginationWrap {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+  text-align: right;
+}
+
+::v-deep .queryToolbar .el-button {
+  margin-bottom: 2px;
+}
 </style>
diff --git a/src/views/QualityAssurance/OffLinePartCount/index.vue b/src/views/QualityAssurance/OffLinePartCount/index.vue
index 1616195..ceafd66 100644
--- a/src/views/QualityAssurance/OffLinePartCount/index.vue
+++ b/src/views/QualityAssurance/OffLinePartCount/index.vue
@@ -1,128 +1,142 @@
 <template>
-  <el-card class="topCard">
-    <el-row class="toolbarRow">
-      <span class="promptText">{{ $t('offLinePartCount.productionTimeLabel') }}</span>
-      <el-date-picker
-        v-model="dateTime"
-        :clearable="false"
-        align="center"
-        :end-placeholder="$t('offLinePartCount.endDate')"
-        format="yyyy-MM-dd"
-        :range-separator="$t('offLinePartCount.dateRangeSeparator')"
-        size="small"
-        :start-placeholder="$t('offLinePartCount.startDate')"
-        style="width: 240px"
-        type="daterange"
-        value-format="yyyy-MM-dd"
-      />
-      <span style="margin-left: 10px">{{ $t('offLinePartCount.orderNumberLabel') }}</span>
-      <el-input
-        v-model="orderNumberValue"
-        :placeholder="$t('offLinePartCount.orderNumberPlaceholder')"
-        clearable
-        size="small"
-        style="width: 150px"
-      />
-      <span class="promptText">{{ $t('offLinePartCount.productModelLabel') }}</span>
-      <el-select
-        v-model="engineTypeValue"
-        :placeholder="$t('offLinePartCount.selectProductModel')"
-        filterable
-        clearable
-        size="small"
-        style="width: 150px"
-      >
-        <el-option
-          v-for="item in engineType"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-          size="mini"
-        />
-      </el-select>
-      <span class="promptText">{{ $t('offLinePartCount.trendGranularityLabel') }}</span>
-      <el-radio-group v-model="trendMode" size="small">
-        <el-radio-button label="day">{{ $t('offLinePartCount.byDay') }}</el-radio-button>
-        <el-radio-button label="hour">{{ $t('offLinePartCount.byHour') }}</el-radio-button>
-      </el-radio-group>
-      <el-button
-        class="functionButton"
-        type="primary"
-        size="small"
-        icon="el-icon-search"
-        plain
-        @click="searchTable(true)"
-      >{{ $t('offLinePartCount.search') }}</el-button>
-      <el-button
-        type="info"
-        style="margin-left: 0"
-        icon="el-icon-document"
-        size="small"
-        plain
-        @click="exportExcel()"
-      >{{ $t('offLinePartCount.export') }}</el-button>
-      <span v-show="isExporting" style="color: #16a188">{{ $t('offLinePartCount.exporting') }}</span>
-    </el-row>
-
-    <el-row>
-      <div class="chartCard">
-        <div id="offlineTrendChart" class="chartDom" />
-      </div>
-    </el-row>
-
-    <el-row>
-      <div>
-        <el-table
-          v-loading="loading"
-          :data="tableData"
-          highlight-current-row
-          border
-          stripe
-          class="tableCustomization"
-          height="600px"
-          style="width: 100%"
-        >
-          <el-table-column
-            type="index"
+  <div class="app-container mes-admin-page">
+    <el-card class="topCard">
+      <el-row>
+        <div class="toolbarRow">
+          <span class="promptText">{{ $t('offLinePartCount.productionTimeLabel') }}</span>
+          <el-date-picker
+            v-model="dateTime"
+            :clearable="false"
             align="center"
-            :label="$t('offLinePartCount.sequence')"
-            width="90px"
+            :end-placeholder="$t('offLinePartCount.endDate')"
+            format="yyyy-MM-dd"
+            :range-separator="$t('offLinePartCount.dateRangeSeparator')"
+            size="small"
+            :start-placeholder="$t('offLinePartCount.startDate')"
+            style="width: 240px"
+            type="daterange"
+            value-format="yyyy-MM-dd"
           />
-          <el-table-column width="200px" :label="$t('offLinePartCount.orderNumber')" align="center">
-            <template slot-scope="scope">
-              {{ scope.row.订单号 }}
-            </template>
-          </el-table-column>
-          <el-table-column min-width="240px" :label="$t('offLinePartCount.productNumber')" align="center">
-            <template slot-scope="scope">
-              {{ scope.row.发动机号 }}
-            </template>
-          </el-table-column>
-          <el-table-column :label="$t('offLinePartCount.productModel')" width="200px" align="center">
-            <template slot-scope="scope">
-              {{ scope.row.机型 }}
-            </template>
-          </el-table-column>
-          <el-table-column :label="$t('offLinePartCount.offlineTime')" width="250px" align="center">
-            <template slot-scope="scope">
-              {{ scope.row.离开时间 }}
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="block" style="margin-top: 10px">
-          <el-pagination
-            :current-page="pageCurrent"
-            :page-sizes="[15, 30, 40]"
-            :page-size="pageSize"
-            :total="total"
-            layout="total, sizes, prev, pager, next, jumper"
-            @size-change="handleSizeChanges"
-            @current-change="handleCurrentChanges"
+          <span style="margin-left: 10px">{{ $t('offLinePartCount.orderNumberLabel') }}</span>
+          <el-input
+            v-model="orderNumberValue"
+            :placeholder="$t('offLinePartCount.orderNumberPlaceholder')"
+            clearable
+            size="small"
+            style="width: 150px"
           />
+          <span class="promptText" style="margin-left: 10px">{{ $t('offLinePartCount.productModelLabel') }}</span>
+          <el-select
+            v-model="engineTypeValue"
+            :placeholder="$t('offLinePartCount.selectProductModel')"
+            filterable
+            clearable
+            size="small"
+            style="width: 150px"
+          >
+            <el-option
+              v-for="item in engineType"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              size="mini"
+            />
+          </el-select>
         </div>
-      </div>
-    </el-row>
-  </el-card>
+        <div style="margin-top: 10px" class="toolbarRow">
+          <span class="promptText">{{ $t('offLinePartCount.trendGranularityLabel') }}</span>
+          <el-radio-group v-model="trendMode" size="small">
+            <el-radio-button label="day">{{ $t('offLinePartCount.byDay') }}</el-radio-button>
+            <el-radio-button label="hour">{{ $t('offLinePartCount.byHour') }}</el-radio-button>
+          </el-radio-group>
+          <el-button
+            class="functionButton"
+            type="primary"
+            size="small"
+            icon="el-icon-search"
+            plain
+            @click="searchTable(true)"
+            style="margin-left: 10px"
+          >{{ $t('offLinePartCount.search') }}</el-button>
+          <el-button
+            type="info"
+            style="margin-left: 10px"
+            icon="el-icon-document"
+            size="small"
+            plain
+            @click="exportExcel()"
+          >{{ $t('offLinePartCount.export') }}</el-button>
+        </div>
+
+        <span v-show="isExporting" style="color: #16a188">{{ $t('offLinePartCount.exporting') }}</span>
+      </el-row>
+
+      <el-row>
+        <div class="chartCard">
+          <div id="offlineTrendChart" class="chartDom" />
+        </div>
+      </el-row>
+
+      <el-row>
+        <div class="tablePanel">
+          <div class="panelHeader compactHeader">
+            <div>
+              <div class="panelTitle">{{ $t('offLinePartCount.detailTitle') }}</div>
+              <div class="panelSubtitle">{{ $t('offLinePartCount.detailSubtitle') }}</div>
+            </div>
+          </div>
+          <el-table
+            v-loading="loading"
+            :data="tableData"
+            highlight-current-row
+            border
+            stripe
+            class="tableCustomization"
+            height="600px"
+            style="width: 100%"
+          >
+            <el-table-column
+              type="index"
+              align="center"
+              :label="$t('offLinePartCount.sequence')"
+              width="90px"
+            />
+            <el-table-column width="200px" :label="$t('offLinePartCount.orderNumber')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.订单号 }}
+              </template>
+            </el-table-column>
+            <el-table-column min-width="240px" :label="$t('offLinePartCount.productNumber')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.发动机号 }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('offLinePartCount.productModel')" width="200px" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.机型 }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('offLinePartCount.offlineTime')" width="250px" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.离开时间 }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="block" style="margin-top: 10px">
+            <el-pagination
+              :current-page="pageCurrent"
+              :page-sizes="[15, 30, 40]"
+              :page-size="pageSize"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handleSizeChanges"
+              @current-change="handleCurrentChanges"
+            />
+          </div>
+        </div>
+      </el-row>
+    </el-card>
+  </div>
 </template>
 
 <script>
@@ -417,4 +431,33 @@ export default {
   width: 100%;
   height: 360px;
 }
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.panelTitle {
+  color: #203247;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.panelSubtitle {
+  color: #6b7f93;
+  font-size: 12px;
+  margin-top: 3px;
+}
+
+.compactHeader {
+  padding: 0 2px;
+}
+
+.tablePanel {
+  padding-top: 4px;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.54) 0%, rgba(243,247,251,0.94) 100%);
+}
 </style>
diff --git a/src/views/QualityAssurance/StationBeat/index.vue b/src/views/QualityAssurance/StationBeat/index.vue
index 9149c68..65c0679 100644
--- a/src/views/QualityAssurance/StationBeat/index.vue
+++ b/src/views/QualityAssurance/StationBeat/index.vue
@@ -1,109 +1,115 @@
 <template>
-  <el-card class="topCard">
-    <el-row class="toolbarRow">
-      <span class="promptText">{{ $t('stationBeat.productionTimeLabel') }}</span>
-      <el-date-picker
-        v-model="dateTime"
-        :clearable="false"
-        align="center"
-        :end-placeholder="$t('stationBeat.endDate')"
-        format="yyyy-MM-dd"
-        :range-separator="$t('stationBeat.dateRangeSeparator')"
-        size="small"
-        :start-placeholder="$t('stationBeat.startDate')"
-        style="width: 240px"
-        type="daterange"
-        value-format="yyyy-MM-dd"
-      />
-      <span class="promptText">{{ $t('stationBeat.stationLabel') }}</span>
-      <el-select
-        v-model="stationValues"
-        :placeholder="$t('stationBeat.selectStation')"
-        clearable
-        filterable
-        collapse-tags
-        multiple
-        size="small"
-        style="width: 320px"
-      >
-        <el-option
-          v-for="item in stationOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-      <span style="margin-left: 10px">{{ $t('stationBeat.orderNumberLabel') }}</span>
-      <el-input
-        v-model="orderNumberValue"
-        :placeholder="$t('stationBeat.orderNumberPlaceholder')"
-        clearable
-        size="small"
-        style="width: 150px"
-      />
-      <span class="promptText">{{ $t('stationBeat.productModelLabel') }}</span>
-      <el-select
-        v-model="engineTypeValue"
-        :placeholder="$t('stationBeat.selectProductModel')"
-        filterable
-        clearable
-        size="small"
-        style="width: 150px"
-      >
-        <el-option
-          v-for="item in engineType"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-      <el-button
-        class="functionButton"
-        type="primary"
-        size="small"
-        icon="el-icon-search"
-        plain
-        @click="searchTable()"
-      >{{ $t('stationBeat.search') }}</el-button>
-      <el-button
-        type="info"
-        size="small"
-        icon="el-icon-download"
-        plain
-        @click="exportExcel()"
-      >{{ $t('stationBeat.excel') }}</el-button>
-    </el-row>
-
-    <el-row>
-      <div class="chartCard">
-        <div id="stationBeatChart" class="chartDom" />
-      </div>
-    </el-row>
-
-    <el-row>
-      <el-table
-        v-loading="loading"
-        :data="tableData"
-        border
-        stripe
-        class="tableCustomization"
-        height="650px"
-        style="width: 100%"
-      >
-        <el-table-column type="index" align="center" :label="$t('stationBeat.sequence')" width="80" />
-        <el-table-column prop="工位" :label="$t('stationBeat.station')" align="center" min-width="140" />
-        <el-table-column prop="总平均节拍" :label="$t('stationBeat.totalAverageBeat')" align="center" min-width="140" />
-        <el-table-column
-          v-for="item in dynamicDateColumns"
-          :key="item.prop"
-          :prop="item.prop"
-          :label="item.label"
+  <div class="app-container mes-admin-page">
+    <el-card class="topCard">
+      <el-row class="toolbarRow">
+        <span class="promptText">{{ $t('stationBeat.productionTimeLabel') }}</span>
+        <el-date-picker
+          v-model="dateTime"
+          :clearable="false"
           align="center"
-          min-width="130"
+          :end-placeholder="$t('stationBeat.endDate')"
+          format="yyyy-MM-dd"
+          :range-separator="$t('stationBeat.dateRangeSeparator')"
+          size="small"
+          :start-placeholder="$t('stationBeat.startDate')"
+          style="width: 240px"
+          type="daterange"
+          value-format="yyyy-MM-dd"
         />
-      </el-table>
-    </el-row>
-  </el-card>
+        <span class="promptText" style="margin-left: 10px">{{ $t('stationBeat.stationLabel') }}</span>
+        <el-select
+          v-model="stationValues"
+          :placeholder="$t('stationBeat.selectStation')"
+          clearable
+          filterable
+          collapse-tags
+          multiple
+          size="small"
+          style="width: 270px"
+        >
+          <el-option
+            v-for="item in stationOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <span style="margin-left: 10px">{{ $t('stationBeat.orderNumberLabel') }}</span>
+        <el-input
+          v-model="orderNumberValue"
+          :placeholder="$t('stationBeat.orderNumberPlaceholder')"
+          clearable
+          size="small"
+          style="width: 150px"
+        />
+        <span class="promptText" style="margin-left: 10px">{{ $t('stationBeat.productModelLabel') }}</span>
+        <el-select
+          v-model="engineTypeValue"
+          :placeholder="$t('stationBeat.selectProductModel')"
+          filterable
+          clearable
+          size="small"
+          style="width: 150px"
+        >
+          <el-option
+            v-for="item in engineType"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-button
+          class="functionButton"
+          type="primary"
+          size="small"
+          icon="el-icon-search"
+          plain
+          @click="searchTable()"
+          style="margin-left: 10px"
+        >{{ $t('stationBeat.search') }}</el-button>
+        <el-button
+          type="info"
+          size="small"
+          icon="el-icon-download"
+          plain
+          @click="exportExcel()"
+        >{{ $t('stationBeat.excel') }}</el-button>
+      </el-row>
+
+      <el-row>
+        <div class="chartCard">
+          <div id="stationBeatChart" class="chartDom" />
+        </div>
+      </el-row>
+
+      <el-row>
+        <div class="tablePanel">
+
+          <el-table
+            v-loading="loading"
+            :data="tableData"
+            border
+            stripe
+            class="tableCustomization"
+            height="650px"
+            style="width: 100%"
+          >
+            <el-table-column type="index" align="center" :label="$t('stationBeat.sequence')" width="80" />
+            <el-table-column prop="工位" :label="$t('stationBeat.station')" align="center" min-width="140" />
+            <el-table-column prop="总平均节拍" :label="$t('stationBeat.totalAverageBeat')" align="center" min-width="140" />
+            <el-table-column
+              v-for="item in dynamicDateColumns"
+              :key="item.prop"
+              :prop="item.prop"
+              :label="item.label"
+              align="center"
+              min-width="130"
+            />
+          </el-table>
+        </div>
+      </el-row>
+    </el-card>
+  </div>
 </template>
 
 <script>
@@ -375,4 +381,38 @@ export default {
   width: 100%;
   height: 360px;
 }
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.panelTitle {
+  color: #203247;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.panelSubtitle {
+  color: #6b7f93;
+  font-size: 12px;
+  margin-top: 3px;
+}
+
+.compactHeader {
+  padding: 0 2px;
+}
+
+.tablePanel {
+  width: 100%;
+  padding-top: 4px;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.54) 0%, rgba(243,247,251,0.94) 100%);
+}
+
+::v-deep .toolbarRow .el-button {
+  margin-bottom: 2px;
+}
 </style>
diff --git a/src/views/QualityAssurance/StationJPH/index.vue b/src/views/QualityAssurance/StationJPH/index.vue
index 003d4dc..9785f72 100644
--- a/src/views/QualityAssurance/StationJPH/index.vue
+++ b/src/views/QualityAssurance/StationJPH/index.vue
@@ -1,106 +1,57 @@
 <template>
-  <el-card class="topCard">
-    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
-      <el-tab-pane :label="$t('stationJph.realtimeTab')" name="realtime">
-        <div class="chartCard">
-          <div id="stationJphRealtimeChart" class="chartDom" />
-        </div>
-      </el-tab-pane>
-
-      <el-tab-pane :label="$t('stationJph.historyTab')" name="history">
-        <el-row class="toolbarRow">
-          <span class="promptText">{{ $t('stationJph.productionTimeLabel') }}</span>
-          <el-date-picker
-            v-model="dateTime"
-            :clearable="false"
-            align="center"
-            :end-placeholder="$t('stationJph.endDate')"
-            format="yyyy-MM-dd"
-            :range-separator="$t('stationJph.dateRangeSeparator')"
-            size="small"
-            :start-placeholder="$t('stationJph.startDate')"
-            style="width: 240px"
-            type="daterange"
-            value-format="yyyy-MM-dd"
-          />
-          <span class="promptText">{{ $t('stationJph.stationLabel') }}</span>
-          <el-select
-            v-model="stationValues"
-            :placeholder="$t('stationJph.selectStation')"
-            clearable
-            filterable
-            collapse-tags
-            multiple
-            size="small"
-            style="width: 320px"
-          >
-            <el-option
-              v-for="item in stationOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+  <div class="app-container mes-admin-page">
+    <el-card class="topCard">
+      <el-tabs v-model="activeTab" @tab-click="handleTabChange">
+        <el-tab-pane :label="$t('stationJph.realtimeTab')" name="realtime">
+          <div class="chartCard realtimeChartCard">
+            <div id="stationJphRealtimeChart" class="chartDom" />
+          </div>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('stationJph.historyTab')" name="history">
+          <el-row class="toolbarRow">
+            <span class="promptText">{{ $t('stationJph.productionTimeLabel') }}</span>
+            <el-date-picker
+              v-model="dateTime"
+              :clearable="false"
+              align="center"
+              :end-placeholder="$t('stationJph.endDate')"
+              format="yyyy-MM-dd"
+              :range-separator="$t('stationJph.dateRangeSeparator')"
+              size="small"
+              :start-placeholder="$t('stationJph.startDate')"
+              style="width: 240px"
+              type="daterange"
+              value-format="yyyy-MM-dd"
             />
-          </el-select>
-          <span style="margin-left: 10px">{{ $t('stationJph.orderNumberLabel') }}</span>
-          <el-input
-            v-model="orderNumberValue"
-            :placeholder="$t('stationJph.orderNumberPlaceholder')"
-            clearable
-            size="small"
-            style="width: 150px"
-          />
-          <span class="promptText">{{ $t('stationJph.productModelLabel') }}</span>
-          <el-select
-            v-model="engineTypeValue"
-            :placeholder="$t('stationJph.selectProductModel')"
-            filterable
-            clearable
-            size="small"
-            style="width: 150px"
-          >
-            <el-option
-              v-for="item in engineType"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-          <el-button
-            class="functionButton"
-            type="primary"
-            size="small"
-            icon="el-icon-search"
-            plain
-            @click="handleSearch()"
-          >{{ $t('stationJph.search') }}</el-button>
-          <el-button
-            type="info"
-            size="small"
-            icon="el-icon-download"
-            plain
-            @click="exportExcel()"
-          >{{ $t('stationJph.export') }}</el-button>
-        </el-row>
+            <span class="promptText" style="margin-left: 10px;">{{ $t('stationJph.stationLabel') }}</span>
 
-        <div class="chartCard">
-          <div id="stationJphHistoryChart" class="chartDom" />
-        </div>
-        <el-table
-          v-loading="historyLoading"
-          :data="historyTableData"
-          border
-          stripe
-          height="560px"
-          style="width: 100%"
-        >
-          <el-table-column type="index" align="center" :label="$t('stationJph.sequence')" width="80" />
-          <el-table-column prop="日期" :label="$t('stationJph.date')" align="center" min-width="120" />
-          <el-table-column prop="小时段" :label="$t('stationJph.hourSlot')" align="center" min-width="120" />
-          <el-table-column prop="产量" :label="$t('stationJph.outputQty')" align="center" min-width="100" />
-        </el-table>
-      </el-tab-pane>
-    </el-tabs>
-  </el-card>
+            <el-select v-model="stationValues" :placeholder="$t('stationJph.selectStation')" clearable filterable collapse-tags multiple size="small" style="width: 320px">
+              <el-option v-for="item in stationOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <span class="promptText" style="margin-left: 10px;">{{ $t('stationJph.orderNumberLabel') }}</span>
+
+            <el-input v-model="orderNumberValue" :placeholder="$t('stationJph.orderNumberPlaceholder')" clearable size="small" style="width: 150px" />
+            <span class="promptText" style="margin-left: 10px;">{{ $t('stationJph.productModelLabel') }}</span>
+
+            <el-select v-model="engineTypeValue" :placeholder="$t('stationJph.selectProductModel')" filterable clearable size="small" style="width: 150px">
+              <el-option v-for="item in engineType" :key="item.value" :label="item.label" :value="item.value" /></el-select>
+            <el-button class="functionButton" type="primary" size="small" icon="el-icon-search" plain @click="handleSearch()">{{ $t('stationJph.search') }}</el-button>
+            <el-button type="info" size="small" icon="el-icon-download" plain @click="exportExcel()">{{ $t('stationJph.export') }}</el-button>
+          </el-row>
+          <div class="chartCard historyChartCard">
+            <div id="stationJphHistoryChart" class="chartDom" /></div>
+          <div class="tablePanel">
+            <el-table v-loading="historyLoading" :data="historyTableData" border stripe height="560px" style="width: 100%">
+              <el-table-column type="index" align="center" :label="$t('stationJph.sequence')" width="80" />
+              <el-table-column prop="日期" :label="$t('stationJph.date')" align="center" min-width="120" />
+              <el-table-column prop="小时段" :label="$t('stationJph.hourSlot')" align="center" min-width="120" />
+              <el-table-column prop="产量" :label="$t('stationJph.outputQty')" align="center" min-width="100" />
+            </el-table>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
 </template>
 
 <script>
@@ -126,6 +77,12 @@ export default {
       realtimeTimer: null
     }
   },
+  watch: {
+    '$i18n.locale'() {
+      this.renderRealtimeChart()
+      this.renderHistoryChart()
+    }
+  },
   created() {
     this.dateTime = [getNowShotTime(), getNowShotTime()]
     this.getStationOptions()
@@ -155,12 +112,6 @@ export default {
       this.historyChart = null
     }
   },
-  watch: {
-    '$i18n.locale'() {
-      this.renderRealtimeChart()
-      this.renderHistoryChart()
-    }
-  },
   methods: {
     getStationOptions() {
       const param = []
@@ -465,6 +416,7 @@ export default {
   flex-wrap: wrap;
   gap: 8px 0;
   margin-bottom: 12px;
+  margin-top: 10px;
 }
 
 .chartCard {
@@ -480,4 +432,43 @@ export default {
   width: 100%;
   height: 360px;
 }
+
+.tablePanel {
+  padding-top: 4px;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.54) 0%, rgba(243,247,251,0.94) 100%);
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.panelTitle {
+  color: #203247;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.panelSubtitle {
+  color: #6b7f93;
+  font-size: 12px;
+  margin-top: 3px;
+}
+
+.compactHeader {
+  padding: 0 2px;
+}
+
+.realtimeChartCard,
+.historyChartCard {
+  position: relative;
+}
+
+::v-deep .toolbarRow .el-button {
+  margin-bottom: 2px;
+}
+
 </style>
diff --git a/src/views/RecipeManagement/RecipeManagement/index.vue b/src/views/RecipeManagement/RecipeManagement/index.vue
index 748d6ca..8f28b57 100644
--- a/src/views/RecipeManagement/RecipeManagement/index.vue
+++ b/src/views/RecipeManagement/RecipeManagement/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container mes-admin-page">
     <el-card class="topCard">
       <div class="topDiv">
         <span style="margin-left: 10px">{{ $t('recipeManagement.productModelLabel') }}</span>
diff --git a/src/views/WorkOrderManagement/ReleaseOfProductionPlan/index.vue b/src/views/WorkOrderManagement/ReleaseOfProductionPlan/index.vue
index a733ec7..b31a4f7 100644
--- a/src/views/WorkOrderManagement/ReleaseOfProductionPlan/index.vue
+++ b/src/views/WorkOrderManagement/ReleaseOfProductionPlan/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="app-container">
+  <div class="app-container mes-admin-page">
     <el-card class="topCard">
-      <div class="topDiv">
+      <div class="topDiv topToolbar">
         <span style="margin-left: 10px">{{ $t('releaseOfProductionPlan.orderNumberLabel') }}</span>
-        <el-input v-model="orderNumberValue" clearable :placeholder="$t('releaseOfProductionPlan.filterOrderNumber')" size="small"  style="width: 200px"/>
+        <el-input v-model="orderNumberValue" clearable :placeholder="$t('releaseOfProductionPlan.filterOrderNumber')" size="small" style="width: 200px"/>
         <span style="margin-left: 10px">{{ $t('releaseOfProductionPlan.productModelLabel') }}</span>
         <el-select
           v-model="engineTypeValue"
@@ -57,185 +57,189 @@
         <!--        <el-button type="info" plain size="small" icon="el-icon-upload2" @click="importOrder('form')">订单导入</el-button>-->
         <!--        <el-button type="info" plain size="small" icon="el-icon-download" @click="exportExcel()">订单导出</el-button>-->
       </div>
-      <el-table
-        ref="multipleTable"
-        v-loading="loading"
-        :data="tableData"
-        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
-        :cell-class-name="tableRowClassName"
-        :expand-row-keys="expandsDetail"
-        :row-key="getRowKeys"
-        :element-loading-text="$t('releaseOfProductionPlan.loadingData')"
-        element-loading-spinner="el-icon-loading"
-        element-loading-background="rgba(0, 0, 0, 0.2)"
-        class="main"
-        tooltip-effect="dark"
-        style="width: 100%; max-height: 700px"
-        border
-        height="800px"
-        size="mini"
-        @expand-change="selectPlan"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sort')" />
-        <el-table-column align="center" type="expand" label="" fixed width="35">
-          <template slot-scope="scope">
-            <div style="display: flex">
-              <!-- 详细数据盒子 -->
-              <div style="margin: 5px 10px; width: 1000px; z-index: 99">
-                <el-table
-                  :data="tableDataPrintDetail"
-                  :header-cell-style="{
-                    background: '#e5e7f8',
-                    color: '#606266',
-                  }"
-                  :element-loading-text="$t('releaseOfProductionPlan.loadingData')"
-                  element-loading-spinner="el-icon-loading"
-                  element-loading-background="rgba(0, 0, 0, 0.2)"
-                  class="main"
-                  tooltip-effect="dark"
-                  style="width: 100%; z-index: 99"
-                  max-height="400px"
-                  border
-                  size="mini"
-                >
-                  <el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sequence')" />
-                  <el-table-column align="center" :label="$t('releaseOfProductionPlan.crankcaseAssemblyNo')" width="250">
-                    <template slot-scope="scope">
-                      {{ scope.row.发动机号 }}
-                    </template>
-                  </el-table-column>
-                  <el-table-column align="center" :label="$t('releaseOfProductionPlan.onlineTime')" width="150">
-                    <template slot-scope="scope">
-                      {{ scope.row.上线时间 }}
-                    </template>
-                  </el-table-column>
-                  <el-table-column align="center" :label="$t('releaseOfProductionPlan.offlineTime')" width="150">
-                    <template slot-scope="scope">
-                      {{ scope.row.下线时间 }}
-                    </template>
-                  </el-table-column>
-                </el-table>
+      <div class="tablePanel">
+        <el-table
+          ref="multipleTable"
+          v-loading="loading"
+          :data="tableData"
+          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+          :cell-class-name="tableRowClassName"
+          :expand-row-keys="expandsDetail"
+          :row-key="getRowKeys"
+          :element-loading-text="$t('releaseOfProductionPlan.loadingData')"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.2)"
+          class="main"
+          tooltip-effect="dark"
+          style="width: 100%; max-height: 700px"
+          border
+          height="800px"
+          size="mini"
+          @expand-change="selectPlan"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sort')" />
+          <el-table-column align="center" type="expand" label="" fixed width="35">
+            <template>
+              <div style="display: flex">
+                <!-- 详细数据盒子 -->
+                <div style="margin: 5px 10px; width: 1000px; z-index: 99">
+                  <el-table
+                    :data="tableDataPrintDetail"
+                    :header-cell-style="{
+                      background: '#e5e7f8',
+                      color: '#606266',
+                    }"
+                    :element-loading-text="$t('releaseOfProductionPlan.loadingData')"
+                    element-loading-spinner="el-icon-loading"
+                    element-loading-background="rgba(0, 0, 0, 0.2)"
+                    class="main"
+                    tooltip-effect="dark"
+                    style="width: 100%; z-index: 99"
+                    max-height="400px"
+                    border
+                    size="mini"
+                  >
+                    <el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sequence')" />
+                    <el-table-column align="center" :label="$t('releaseOfProductionPlan.crankcaseAssemblyNo')" width="250">
+                      <template slot-scope="scope">
+                        {{ scope.row.发动机号 }}
+                      </template>
+                    </el-table-column>
+                    <el-table-column align="center" :label="$t('releaseOfProductionPlan.onlineTime')" width="150">
+                      <template slot-scope="scope">
+                        {{ scope.row.上线时间 }}
+                      </template>
+                    </el-table-column>
+                    <el-table-column align="center" :label="$t('releaseOfProductionPlan.offlineTime')" width="150">
+                      <template slot-scope="scope">
+                        {{ scope.row.下线时间 }}
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
               </div>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" :label="$t('releaseOfProductionPlan.orderNumber')">
-          <template slot-scope="scope">
-            {{ scope.row.订单号 }}
-          </template>
-        </el-table-column>
-        <el-table-column align="center" :label="$t('releaseOfProductionPlan.productModel')">
-          <template slot-scope="scope">
-            {{ scope.row.产品型号 }}
-          </template>
-        </el-table-column>
-        <!--        <el-table-column align="center" label="总成号">-->
-        <!--          <template slot-scope="scope">-->
-        <!--            {{ scope.row.零件号 }}-->
-        <!--          </template>-->
-        <!--        </el-table-column>-->
-        <el-table-column align="center" :label="$t('releaseOfProductionPlan.planQuantity')">
-          <template slot-scope="scope">
-            {{ scope.row.计划数量 }}
-          </template>
-        </el-table-column>
-        <!--        <el-table-column align="center" label="完成数量">-->
-        <!--          <template slot-scope="scope">-->
-        <!--            {{ scope.row.完成数量 }}-->
-        <!--          </template>-->
-        <!--        </el-table-column>-->
-        <!--        <el-table-column align="center" label="状态">-->
-        <!--          <template slot-scope="scope">-->
-        <!--            <el-tag v-if="parseInt(scope.row.订单状态) === 0" effect="plain" style="width: 70px" type="info">已结束</el-tag>-->
-        <!--            <el-tag v-if="parseInt(scope.row.订单状态) === 1" effect="plain" style="width: 70px" type="success">生产中</el-tag>-->
-        <!--            <el-tag v-if="parseInt(scope.row.订单状态) === 2" effect="plain" style="width: 70px" type="text">未上线</el-tag>-->
-        <!--            <el-tag v-if="parseInt(scope.row.订单状态) === 3" effect="plain" style="width: 70px" type="warning">未完成</el-tag>-->
-        <!--            <el-tag v-if="parseInt(scope.row.订单状态) === 4" effect="plain" style="width: 70px" type="danger">已超额</el-tag>-->
-        <!--          </template>-->
-        <!--        </el-table-column>-->
-        <el-table-column align="center" :label="$t('releaseOfProductionPlan.planStartDate')">
-          <template slot-scope="scope">
-            {{ scope.row.计划开始时间 }}
-          </template>
-        </el-table-column>
-        <el-table-column align="center" :label="$t('releaseOfProductionPlan.planEndDate')">
-          <template slot-scope="scope">
-            {{ scope.row.计划完成时间 }}
-          </template>
-        </el-table-column>
-        <el-table-column align="center" :label="$t('releaseOfProductionPlan.productionStatus')">
-          <template slot-scope="scope">
-            <el-tag
-              v-if="Number(scope.row.订单状态) === 1"
-              size="mini"
-              type="info"
-            >{{ $t('releaseOfProductionPlan.notStarted') }}</el-tag>
-            <el-tag
-              v-if="Number(scope.row.订单状态) === 2"
-              size="mini"
-              type="warning"
-            >{{ $t('releaseOfProductionPlan.inProduction') }}</el-tag>
-            <el-tag
-              v-if="Number(scope.row.订单状态) === 3"
-              size="mini"
-              type="success"
-            >{{ $t('releaseOfProductionPlan.completed') }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" :label="$t('releaseOfProductionPlan.operation')" min-width="150">
-          <template slot-scope="scope">
-            <el-button
-              v-if="parseInt(scope.row.订单状态) === 2"
-              size="mini"
-              type="text"
-              icon="el-icon-check"
-              @click="competeOrder(scope.row)"
-            >{{ $t('releaseOfProductionPlan.completeOrder') }}</el-button>
-            <el-button
-              v-if="parseInt(scope.row.订单状态) === 1"
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleEdit(scope.row)"
-            >{{ $t('releaseOfProductionPlan.modify') }}</el-button>
-            <el-button
-              v-if="parseInt(scope.row.订单状态) === 1"
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              style="color: red"
-              @click="deleteOrder(scope.row)"
-            >{{ $t('releaseOfProductionPlan.delete') }}</el-button>
-            <el-button
-              v-if="parseInt(scope.row.是否下发) === 0"
-              size="mini"
-              type="text"
-              icon="el-icon-download"
-              @click="ordersIssuedEditor(scope.row)"
-            >{{ $t('releaseOfProductionPlan.issue') }}</el-button>
-            <el-button
-              v-if="parseInt(scope.row.是否下发) === 1 && parseInt(scope.row.订单状态) === 1"
-              size="mini"
-              type="text"
-              icon="el-icon-upload2"
-              @click="ordersIssuedEditor1(scope.row)"
-            >{{ $t('releaseOfProductionPlan.withdraw') }}</el-button>
-            <el-button
-              v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1"
-              size="mini"
-              type="text"
-              icon="el-icon-top"
-              @click="topOrder(scope.row)">{{ $t('releaseOfProductionPlan.moveUp') }}</el-button>
-            <el-button
-              v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1"
-              size="mini"
-              type="text"
-              icon="el-icon-bottom"
-              @click="downOrder(scope.row)">{{ $t('releaseOfProductionPlan.moveDown') }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" :label="$t('releaseOfProductionPlan.orderNumber')">
+            <template slot-scope="scope">
+              {{ scope.row.订单号 }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" :label="$t('releaseOfProductionPlan.productModel')">
+            <template slot-scope="scope">
+              {{ scope.row.产品型号 }}
+            </template>
+          </el-table-column>
+          <!--        <el-table-column align="center" label="总成号">-->
+          <!--          <template slot-scope="scope">-->
+          <!--            {{ scope.row.零件号 }}-->
+          <!--          </template>-->
+          <!--        </el-table-column>-->
+          <el-table-column align="center" :label="$t('releaseOfProductionPlan.planQuantity')">
+            <template slot-scope="scope">
+              {{ scope.row.计划数量 }}
+            </template>
+          </el-table-column>
+          <!--        <el-table-column align="center" label="完成数量">-->
+          <!--          <template slot-scope="scope">-->
+          <!--            {{ scope.row.完成数量 }}-->
+          <!--          </template>-->
+          <!--        </el-table-column>-->
+          <!--        <el-table-column align="center" label="状态">-->
+          <!--          <template slot-scope="scope">-->
+          <!--            <el-tag v-if="parseInt(scope.row.订单状态) === 0" effect="plain" style="width: 70px" type="info">已结束</el-tag>-->
+          <!--            <el-tag v-if="parseInt(scope.row.订单状态) === 1" effect="plain" style="width: 70px" type="success">生产中</el-tag>-->
+          <!--            <el-tag v-if="parseInt(scope.row.订单状态) === 2" effect="plain" style="width: 70px" type="text">未上线</el-tag>-->
+          <!--            <el-tag v-if="parseInt(scope.row.订单状态) === 3" effect="plain" style="width: 70px" type="warning">未完成</el-tag>-->
+          <!--            <el-tag v-if="parseInt(scope.row.订单状态) === 4" effect="plain" style="width: 70px" type="danger">已超额</el-tag>-->
+          <!--          </template>-->
+          <!--        </el-table-column>-->
+          <el-table-column align="center" :label="$t('releaseOfProductionPlan.planStartDate')">
+            <template slot-scope="scope">
+              {{ scope.row.计划开始时间 }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" :label="$t('releaseOfProductionPlan.planEndDate')">
+            <template slot-scope="scope">
+              {{ scope.row.计划完成时间 }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" :label="$t('releaseOfProductionPlan.productionStatus')">
+            <template slot-scope="scope">
+              <el-tag
+                v-if="Number(scope.row.订单状态) === 1"
+                size="mini"
+                type="info"
+              >{{ $t('releaseOfProductionPlan.notStarted') }}</el-tag>
+              <el-tag
+                v-if="Number(scope.row.订单状态) === 2"
+                size="mini"
+                type="warning"
+              >{{ $t('releaseOfProductionPlan.inProduction') }}</el-tag>
+              <el-tag
+                v-if="Number(scope.row.订单状态) === 3"
+                size="mini"
+                type="success"
+              >{{ $t('releaseOfProductionPlan.completed') }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" :label="$t('releaseOfProductionPlan.operation')" min-width="150">
+            <template slot-scope="scope">
+              <el-button
+                v-if="parseInt(scope.row.订单状态) === 2"
+                size="mini"
+                type="text"
+                icon="el-icon-check"
+                @click="competeOrder(scope.row)"
+              >{{ $t('releaseOfProductionPlan.completeOrder') }}</el-button>
+              <el-button
+                v-if="parseInt(scope.row.订单状态) === 1"
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleEdit(scope.row)"
+              >{{ $t('releaseOfProductionPlan.modify') }}</el-button>
+              <el-button
+                v-if="parseInt(scope.row.订单状态) === 1"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                style="color: red"
+                @click="deleteOrder(scope.row)"
+              >{{ $t('releaseOfProductionPlan.delete') }}</el-button>
+              <el-button
+                v-if="parseInt(scope.row.是否下发) === 0"
+                size="mini"
+                type="text"
+                icon="el-icon-download"
+                @click="ordersIssuedEditor(scope.row)"
+              >{{ $t('releaseOfProductionPlan.issue') }}</el-button>
+              <el-button
+                v-if="parseInt(scope.row.是否下发) === 1 && parseInt(scope.row.订单状态) === 1"
+                size="mini"
+                type="text"
+                icon="el-icon-upload2"
+                @click="ordersIssuedEditor1(scope.row)"
+              >{{ $t('releaseOfProductionPlan.withdraw') }}</el-button>
+              <el-button
+                v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1"
+                size="mini"
+                type="text"
+                icon="el-icon-top"
+                @click="topOrder(scope.row)"
+              >{{ $t('releaseOfProductionPlan.moveUp') }}</el-button>
+              <el-button
+                v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1"
+                size="mini"
+                type="text"
+                icon="el-icon-bottom"
+                @click="downOrder(scope.row)"
+              >{{ $t('releaseOfProductionPlan.moveDown') }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
       <div class="block" style="margin-top: 10px">
         <el-pagination
           v-if="!loading"
@@ -395,34 +399,34 @@
             :placeholder="$t('releaseOfProductionPlan.enterPlanQuantity')"
           />
         </el-form-item>
-<!--        <el-form-item-->
-<!--          label="桥壳上线数"-->
-<!--          prop="planQuantity"-->
-<!--          style="display: inline-block"-->
-<!--        >-->
-<!--          <el-input-number-->
-<!--            v-model="form1.qiaoKeOverNumber"-->
-<!--            :min="0"-->
-<!--            :step="1"-->
-<!--            size="small"-->
-<!--            style="width: 200px"-->
-<!--            placeholder="请输入计划数量"-->
-<!--          />-->
-<!--        </el-form-item>-->
-<!--        <el-form-item-->
-<!--          label="轮毂上线数"-->
-<!--          prop="planQuantity"-->
-<!--          style="display: inline-block"-->
-<!--        >-->
-<!--          <el-input-number-->
-<!--            v-model="form1.lunGuOverNumber"-->
-<!--            :min="0"-->
-<!--            :step="1"-->
-<!--            size="small"-->
-<!--            style="width: 200px"-->
-<!--            placeholder="请输入计划数量"-->
-<!--          />-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item-->
+        <!--          label="桥壳上线数"-->
+        <!--          prop="planQuantity"-->
+        <!--          style="display: inline-block"-->
+        <!--        >-->
+        <!--          <el-input-number-->
+        <!--            v-model="form1.qiaoKeOverNumber"-->
+        <!--            :min="0"-->
+        <!--            :step="1"-->
+        <!--            size="small"-->
+        <!--            style="width: 200px"-->
+        <!--            placeholder="请输入计划数量"-->
+        <!--          />-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item-->
+        <!--          label="轮毂上线数"-->
+        <!--          prop="planQuantity"-->
+        <!--          style="display: inline-block"-->
+        <!--        >-->
+        <!--          <el-input-number-->
+        <!--            v-model="form1.lunGuOverNumber"-->
+        <!--            :min="0"-->
+        <!--            :step="1"-->
+        <!--            size="small"-->
+        <!--            style="width: 200px"-->
+        <!--            placeholder="请输入计划数量"-->
+        <!--          />-->
+        <!--        </el-form-item>-->
         <el-form-item
           :label="$t('releaseOfProductionPlan.planStartTime')"
           prop="startPlanTime"
@@ -738,6 +742,11 @@ export default {
       loading: false
     }
   },
+  watch: {
+    '$i18n.locale'() {
+      this.initValidationRules()
+    }
+  },
   created() {
     this.initValidationRules()
     this.getOrderNumber()
@@ -779,11 +788,6 @@ export default {
     //   }
     // }
   },
-  watch: {
-    '$i18n.locale'() {
-      this.initValidationRules()
-    }
-  },
   methods: {
     initValidationRules() {
       this.printRules = {
@@ -1747,6 +1751,16 @@ export default {
   margin-bottom: 10px;
 }
 
+.topToolbar {
+  align-items: center;
+}
+
+.tablePanel {
+  padding: 4px 2px 0;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(244,248,252,0.92) 100%);
+}
+
 .el-select {
   width: 200px;
 }
@@ -1777,4 +1791,12 @@ export default {
 .el-table .success-row {
   background: #f0f9eb;
 }
+
+::v-deep .topToolbar .el-button {
+  margin-bottom: 2px;
+}
+
+::v-deep .tablePanel .el-table__expanded-cell {
+  background: #f8fbfe !important;
+}
 </style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d8f22e2..d69b29d 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,37 +1,33 @@
 <template>
   <el-card style="min-height:calc(100vh - 84px);background: white;background-size:100% 100%">
     <div class="dashboard-container">
-      <div class="sudoku_row" >
+      <div class="sudoku_row">
         <svg-icon icon-class="人员" style="width: 35px;height: 35px"/>
         <div class="dashboard-text" style="color:black">/{{ name }}</div>
         <el-divider content-position="right" style="margin:24px"/>
-        <!--        <div v-for="(sudoku,index) in sudokus" :class="curSelect === sudoku.id?'opacity':''" :key="index+9999" shadow="hover" class="sudoku_item" style="background: white;border: 2px solid rgb(208,222,234)">-->
-        <!--          <router-link v-if="sudoku.router!=undefined" :to="sudoku.router" style="width: 100%">-->
-        <!--            <el-badge :value="sudoku.value" class="dashbadge" style="width: 100%;text-align:center">-->
-        <!--              <svg-icon :icon-class="sudoku.icon" :style="{color:colors[index]}" style="width: 25px;height: 25px"/>-->
-        <!--              <h2 :style="{color:colors[index]}" style="margin: 0px;height: 30px;display: inline-block;line-height: 30px">{{ sudoku.name }}</h2>-->
-        <!--            </el-badge>-->
-        <!--          </router-link>-->
-        <!--        </div>-->
 
-        <div v-for="(value1,index1) in fathers" :key="index1" style="width:100%;background: white;margin-bottom: 15px">
+        <div v-for="(father, index1) in fathers" :key="index1" style="width:100%;background: white;margin-bottom: 15px">
           <div style="width: 100%;height: 40px;line-height: 40px;background: rgb(127,172,237);color:white">
-            <svg-icon :icon-class="value1.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:20px;height:20px"/>
-            {{ translateMenuTitle(value1.title) }}
+            <svg-icon :icon-class="father.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:20px;height:20px"/>
+            {{ translateMenuTitle(father.title) }}
           </div>
-          <router-link v-for="(value2,index2) in sons" v-if="value2.pid === value1.id" :key="index2" :to="value2.path">
+
+          <!-- ✅ 使用计算属性后的 sonsMap，不再有 v-if -->
+          <router-link
+            v-for="(son, index2) in getSonsByPid(father.id)"
+            :key="index2"
+            :to="son.path"
+          >
             <el-card shadow="hover" class="sudoku_item1" style="height:130px;width:175px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4);border: 2px solid rgb(208,222,234)">
-              <svg-icon :icon-class="value2.icon" class="bgc" style="color: rgb(37,89,164);display:block;margin: auto;border: 0px solid black;width:40px;height:40px"/>
-              <h4 style="margin-top: 10px;color:rgb(37,89,164);text-align:center">{{ translateMenuTitle(value2.title) }}</h4>
+              <svg-icon :icon-class="son.icon" class="bgc" style="color: rgb(37,89,164);display:block;margin: auto;border: 0px solid black;width:40px;height:40px"/>
+              <h4 style="margin-top: 10px;color:rgb(37,89,164);text-align:center">{{ translateMenuTitle(son.title) }}</h4>
             </el-card>
           </router-link>
         </div>
       </div>
     </div>
   </el-card>
-
 </template>
-
 <script>
 import { mapGetters } from 'vuex'
 import request from '@/utils/request'
@@ -53,7 +49,19 @@ export default {
     ...mapGetters([
       'name',
       'token'
-    ])
+    ]),
+    // 预先按 pid 分组，避免每次渲染都过滤
+    sonsByPid() {
+      const map = {}
+      for (const son of this.sons) {
+        const pid = son.pid
+        if (!map[pid]) {
+          map[pid] = []
+        }
+        map[pid].push(son)
+      }
+      return map
+    }
   },
   mounted() {
     this.getFileList()
@@ -65,6 +73,9 @@ export default {
     clearInterval(this.timer)
   },
   methods: {
+    getSonsByPid(pid) {
+      return this.sonsByPid[pid] || []
+    },
     translateMenuTitle,
     async initFirstModule() {
       await request({
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
index ab3b050..501495b 100644
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -1,28 +1,29 @@
 <template>
-  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+  <div v-if="!item.hidden && item.children" class="menu-wrapper">
 
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+    <template v-if="hasOneShowingChild(visibleChildren, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
+      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path, $event)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown': !isNest}">
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon || item.meta.icon" :title="onlyOneChild.meta.title" />
         </el-menu-item>
       </a>
     </template>
 
-    <el-submenu v-else :index="item.name||item.path">
+    <el-submenu v-else :index="item.name || item.path">
       <template slot="title">
         <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
       </template>
 
-      <template v-for="child in item.children" v-if="!child.hidden">
+      <template v-for="child in visibleChildren">
         <sidebar-item
-          v-if="child.children&&child.children.length>0"
+          v-if="child.children && child.children.length > 0"
+          :key="child.path"
           :is-nest="true"
           :item="child"
-          :key="child.path"
           :base-path="resolvePath(child.path)"
-          class="nest-menu" />
-        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
+          class="nest-menu"
+        />
+        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path, $event)">
           <el-menu-item :index="resolvePath(child.path)" style="padding-left: 58px!important;">
             <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
           </el-menu-item>
@@ -32,7 +33,6 @@
 
   </div>
 </template>
-
 <script>
 import path from 'path'
 import { validateURL } from '@/utils/validate'
@@ -61,6 +61,13 @@ export default {
       onlyOneChild: null
     }
   },
+  computed: {
+    // 过滤掉 hidden 的 children
+    visibleChildren() {
+      if (!this.item.children) return []
+      return this.item.children.filter(child => !child.hidden)
+    }
+  },
   methods: {
     hasOneShowingChild(children, parent) {
       const showingChildren = children.filter(item => {
diff --git a/src/views/layout/components/Sidebar/SidebarItem2.vue b/src/views/layout/components/Sidebar/SidebarItem2.vue
index b80731b..5eeace3 100644
--- a/src/views/layout/components/Sidebar/SidebarItem2.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem2.vue
@@ -1,36 +1,50 @@
 <template>
   <div class="menu-wrapper">
-    <template v-for="item in routes" v-if="!item.hidden&&item.children">
-      <!--一级-->
-      <router-link v-if="item.children.length===1 && !item.children[0].children" :key="item.children[0].name" :to="item.path+'/'+item.children[0].path">
-        <el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
-          <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"/>
-          <span v-if="item.children[0].meta&&item.children[0].meta.title">{{ translateMenuTitle(item.children[0].meta.title) }}</span>
+    <!-- 一级菜单：过滤掉 hidden 的路由 -->
+    <template v-for="item in visibleRoutes">
+      <!-- 情况1：只有一个子菜单且没有孙子菜单 → 显示为一级菜单项 -->
+      <router-link
+        v-if="shouldShowAsMenuItem(item)"
+        :key="getMenuItemKey(item)"
+        :to="getMenuItemPath(item)"
+      >
+        <el-menu-item :index="getMenuItemPath(item)" :class="{'submenu-title-noDropdown': !isNest}">
+          <svg-icon v-if="getFirstChild(item).meta && getFirstChild(item).meta.icon" :icon-class="getFirstChild(item).meta.icon" />
+          <span v-if="getFirstChild(item).meta && getFirstChild(item).meta.title">
+            {{ translateMenuTitle(getFirstChild(item).meta.title) }}
+          </span>
         </el-menu-item>
       </router-link>
-      <!--二级-->
-      <el-submenu v-else :key="item.name" :index="item.name||item.path">
+
+      <!-- 情况2：有多个子菜单或有孙子菜单 → 显示为下拉菜单 -->
+      <el-submenu v-else :key="item.name || item.path" :index="item.name || item.path">
         <template slot="title">
-          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"/>
-          <span v-if="item.meta&&item.meta.title">{{ translateMenuTitle(item.meta.title) }}</span>
+          <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon" />
+          <span v-if="item.meta && item.meta.title">{{ translateMenuTitle(item.meta.title) }}</span>
         </template>
 
-        <template v-for="child in item.children" v-if="!child.hidden">
-          <sidebar-item v-if="child.children&&child.children.length>0" :key="child.path" :routes="[child]" :is-nest="true" class="nest-menu"/>
-          <router-link v-else :key="child.name" :to="item.path+child.path">
-            <el-menu-item :index="item.path+'/'+child.path">
-              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"/>
-              <span v-if="child.meta&&child.meta.title">{{ translateMenuTitle(child.meta.title) }}</span>
-              {{ item.path+'/'+child.path }}
+        <!-- 二级菜单：使用计算属性过滤后的 children -->
+        <template v-for="child in visibleChildren(item)">
+          <!-- 有子菜单 → 递归 -->
+          <sidebar-item
+            v-if="child.children && child.children.length > 0"
+            :key="child.path"
+            :routes="[child]"
+            :is-nest="true"
+            class="nest-menu"
+          />
+          <!-- 无子菜单 → 直接显示 -->
+          <router-link v-else :key="child.name" :to="getChildPath(item, child)">
+            <el-menu-item :index="getChildPath(item, child)">
+              <svg-icon v-if="child.meta && child.meta.icon" :icon-class="child.meta.icon" />
+              <span v-if="child.meta && child.meta.title">{{ translateMenuTitle(child.meta.title) }}</span>
             </el-menu-item>
           </router-link>
         </template>
       </el-submenu>
-
     </template>
   </div>
 </template>
-
 <script>
 import { translateMenuTitle } from '@/utils/i18n'
 
@@ -46,8 +60,59 @@ export default {
       default: false
     }
   },
+  computed: {
+    // ✅ 过滤掉 hidden 的路由，同时过滤掉没有 children 的路由
+    visibleRoutes() {
+      return this.routes.filter(route => {
+        return !route.hidden && route.children && route.children.length > 0
+      })
+    }
+  },
   methods: {
-    translateMenuTitle
+    translateMenuTitle,
+    // ✅ 获取第一个子菜单
+    getFirstChild(item) {
+      return item.children[0]
+    },
+
+    // ✅ 判断是否应该显示为单菜单项（没有孙子菜单，且只有一个子菜单）
+    shouldShowAsMenuItem(item) {
+      const firstChild = this.getFirstChild(item)
+      return item.children.length === 1 && (!firstChild.children || firstChild.children.length === 0)
+    },
+
+    // ✅ 获取菜单项的 key
+    getMenuItemKey(item) {
+      const firstChild = this.getFirstChild(item)
+      return firstChild.name
+    },
+
+    // ✅ 获取菜单项的路径（处理斜杠重复问题）
+    getMenuItemPath(item) {
+      const firstChild = this.getFirstChild(item)
+      return this.joinPath(item.path, firstChild.path)
+    },
+
+    // ✅ 获取子菜单路径
+    getChildPath(parent, child) {
+      return this.joinPath(parent.path, child.path)
+    },
+
+    // ✅ 智能拼接路径，避免双斜杠
+    joinPath(parentPath, childPath) {
+      if (!parentPath) return childPath
+      if (!childPath) return parentPath
+      // 去除首尾多余的斜杠后拼接
+      const cleanParent = parentPath.replace(/\/$/, '')
+      const cleanChild = childPath.replace(/^\//, '')
+      return `${cleanParent}/${cleanChild}`
+    },
+
+    // ✅ 过滤当前菜单的可见子菜单（用于二级菜单）
+    visibleChildren(item) {
+      if (!item.children) return []
+      return item.children.filter(child => !child.hidden)
+    }
   }
 }
 </script>
diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue
index 13dfe93..318df08 100644
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@@ -264,6 +264,7 @@ export default {
         font-size: 12px;
         margin-left: 5px;
         margin-top: 4px;
+        border-radius: 5px;
         &:first-of-type {
           margin-left: 15px;
         }
diff --git a/修改注意事项.txt b/修改注意事项.txt
index f6e6d42..99ee1bd 100644
--- a/修改注意事项.txt
+++ b/修改注意事项.txt
@@ -19,4 +19,4 @@ sidebar.scss
 Layout.vue
   @use "../../styles/mixin.scss";
   .app-wrapper {
-    @include mixin.clearfix;
\ No newline at end of file
+    @include mixin.clearfix;