aa

src/views/pms/qhse/kanban/index.vue

@@ -54,6 +54,12 @@ let resizeRaf = 0
 let hazardChart: echarts.ECharts | null = null
 let safeDayChart: echarts.ECharts | null = null
 let socChart: echarts.ECharts | null = null
+const summaryTabs = [
+  { label: '首页', value: 'home' },
+  { label: '证书信息', value: 'report' }
+] as const
+const activeSummaryTab = ref<(typeof summaryTabs)[number]['value']>('home')
+const summaryDate = ref('2026-06-02')
 
 const pageTitle = 'QHSE管理看板'
 
@@ -722,6 +728,30 @@ onMounted(async () => {
     <div class="mx-a overflow-hidden" :style="targetWrapperStyle">
       <div id="qhse-kanban" class="bg qhse-board" :style="targetAreaStyle">
         <header class="header">{{ pageTitle }}</header>
+        <div class="summary-toolbar">
+          <div class="summary-toolbar__tabs">
+            <button
+              v-for="tab in summaryTabs"
+              :key="tab.value"
+              type="button"
+              class="summary-toolbar__tab"
+              :class="{ 'is-active': activeSummaryTab === tab.value }"
+              @click="activeSummaryTab = tab.value">
+              {{ tab.label }}
+            </button>
+          </div>
+          <div class="summary-toolbar__date">
+            <span class="summary-toolbar__date-label">日期:</span>
+            <el-date-picker
+              v-model="summaryDate"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              :clearable="false"
+              :editable="false"
+              class="summary-toolbar__picker" />
+          </div>
+        </div>
         <div class="board-body">
           <section class="panel summary-panel kb-stage-card kb-stage-card--1">
             <div class="panel-title">
@@ -913,7 +943,93 @@ onMounted(async () => {
   padding-bottom: 22px;
   padding-left: 10px;
   padding-right: 10px;
-  height: 220px;
+  height: 210px;
+}
+
+.summary-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px 4px;
+}
+
+.summary-toolbar__tabs {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.summary-toolbar__tab {
+  min-width: 112px;
+  height: 38px;
+  padding: 0 20px;
+  font-family: YouSheBiaoTiHei, sans-serif;
+  font-size: 17px;
+  line-height: 1;
+  color: #2b76e9;
+  background: linear-gradient(180deg, rgb(255 255 255 / 92%) 0%, rgb(228 239 255 / 90%) 100%);
+  border: 1px solid rgb(126 174 244 / 44%);
+  border-radius: 10px;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 96%),
+    0 8px 14px rgb(63 103 171 / 8%);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background 0.2s ease,
+    color 0.2s ease;
+
+  cursor: pointer;
+}
+
+.summary-toolbar__tab.is-active {
+  color: #fff;
+  background: linear-gradient(180deg, #59a6ff 0%, #2d78ea 100%);
+  border-color: rgb(62 122 223 / 88%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 22%),
+    0 10px 18px rgb(45 120 234 / 20%);
+}
+
+.summary-toolbar__tab:hover {
+  transform: translateY(-1px);
+}
+
+.summary-toolbar__date {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.summary-toolbar__date-label {
+  font-size: 18px;
+  font-weight: 700;
+  color: #5c7393;
+}
+
+.summary-toolbar__picker {
+  width: 190px;
+}
+
+.summary-toolbar__picker :deep(.el-input__wrapper) {
+  min-height: 38px;
+  background: rgb(255 255 255 / 80%);
+  border: 1px solid rgb(137 176 235 / 38%);
+  border-radius: 10px;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 92%),
+    0 8px 14px rgb(63 103 171 / 6%);
+}
+
+.summary-toolbar__picker :deep(.el-input__inner) {
+  font-size: 16px;
+  font-weight: 700;
+  color: #3d5679;
+}
+
+.summary-toolbar__picker :deep(.el-input__prefix),
+.summary-toolbar__picker :deep(.el-input__suffix) {
+  color: #6c86a8;
 }
 
 .summary-grid {
@@ -963,7 +1079,7 @@ onMounted(async () => {
   display: grid;
   grid-template-columns: 1.02fr 1fr 0.98fr;
   gap: 28px;
-  margin-top: 18px;
+  margin-top: 10px;
 }
 
 .left-column,
@@ -1104,14 +1220,14 @@ onMounted(async () => {
 
 .bottom-grid {
   display: grid;
-  margin-top: 26px;
+  margin-top: 10px;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 24px;
 }
 
 .bottom-card {
-  min-height: 190px;
-  padding: 28px 22px 24px;
+  min-height: 180px;
+  padding: 15px 22px 0px;
   overflow: hidden;
 }
 
@@ -1136,7 +1252,7 @@ onMounted(async () => {
 .bottom-card__content {
   position: relative;
   z-index: 2;
-  margin-top: 24px;
+  margin-top: 18px;
 }
 
 .bottom-card__content p {