5#国日报汇总

src/views/pms/fiveDailyReportSummary/index.vue

@@ -194,7 +194,7 @@ watch(
 
 <template>
   <div
-    class="grid grid-cols-[auto_1fr] grid-rows-[104px_62px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
+    class="grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[104px_auto_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))] overflow-hidden">
     <DeptTreeSelect
       v-model="query.deptId"
       :top-id="388"
@@ -203,7 +203,7 @@ watch(
       class="row-span-3"
       @node-click="handleDeptNodeClick" />
 
-    <div class="grid grid-cols-5 gap-4" v-loading="summaryLoading">
+    <div class="summary-cards min-w-0" v-loading="summaryLoading">
       <article
         v-for="card in summaryCards"
         :key="card.key"
@@ -223,24 +223,25 @@ watch(
     </div>
 
     <el-form
-      size="default"
-      class="summary-query-form bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between">
-      <div class="flex items-center gap-8 min-w-0">
+      size="small"
+      label-width="auto"
+      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 pt-4 pb-4 flex items-center flex-wrap min-w-0">
+      <div class="flex items-center gap-2 flex-wrap">
         <el-form-item label="项目">
           <el-input
             v-model="query.projectName"
             placeholder="请输入项目名称"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px" />
+            class="!w-150px" />
         </el-form-item>
-        <el-form-item label="生产任务">
+        <el-form-item label="任务">
           <el-input
             v-model="query.wellName"
             placeholder="请输入生产任务"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px" />
+            class="!w-150px" />
         </el-form-item>
         <el-form-item label="创建时间">
           <el-date-picker
@@ -251,20 +252,21 @@ watch(
             end-placeholder="结束日期"
             :shortcuts="rangeShortcuts"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-260px" />
+            class="!w-200px" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery()">
+            <Icon icon="ep:search" class="mr-5px" /> 搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon icon="ep:refresh" class="mr-5px" /> 重置
+          </el-button>
         </el-form-item>
       </div>
-      <el-form-item class="summary-query-actions">
-        <el-button type="primary" @click="handleQuery()">
-          <Icon icon="ep:search" class="mr-5px" /> 搜索
-        </el-button>
-        <el-button @click="resetQuery">
-          <Icon icon="ep:refresh" class="mr-5px" /> 重置
-        </el-button>
-      </el-form-item>
     </el-form>
 
-    <div class="summary-content min-h-0">
+    <div class="summary-content min-h-0 min-w-0 overflow-hidden">
       <div class="summary-content__header">
         <h3 class="summary-content__title">{{ currentDeptName }}日报汇总</h3>
       </div>
@@ -290,6 +292,13 @@ watch(
   margin-bottom: 0;
 }
 
+.summary-cards {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 16px;
+}
+
 .summary-card {
   position: relative;
   display: flex;
@@ -350,6 +359,15 @@ watch(
   min-height: 62px;
 }
 
+.summary-query-fields {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px 32px;
+}
+
 .summary-query-actions :deep(.el-form-item__content) {
   flex-wrap: nowrap;
   gap: 8px;
@@ -388,4 +406,43 @@ watch(
     font-size: 24px;
   }
 }
+
+@media (max-width: 1280px) {
+  .summary-query-form {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .summary-card {
+    gap: 10px;
+    padding: 12px 14px;
+  }
+
+  .summary-card__icon {
+    width: 38px;
+    height: 38px;
+    border-radius: 12px;
+    font-size: 20px;
+  }
+
+  .summary-card__label {
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  .summary-card__value {
+    font-size: 20px;
+  }
+}
+
+.summary-query-actions {
+  :deep(.el-form-item__content) {
+    flex-wrap: nowrap;
+    gap: 8px;
+  }
+
+  :deep(.el-button + .el-button) {
+    margin-left: 0;
+  }
+}
 </style>