Przeglądaj źródła

style: 优化日报汇总页紧凑布局

- 压缩瑞恒、瑞鹰、瑞都日报汇总页筛选区高度和表单间距
- 收紧统计卡片高度、间距、图标和数字字号
- 减少下方表格/看板容器头部占用,提升内容展示空间
Zimo 3 dni temu
rodzic
commit
8ce5ab89f3

+ 9 - 8
src/views/pms/iotrddailyreport/components/DailyStatistics.vue

@@ -447,28 +447,29 @@ const { ZmTable, ZmTableColumn } = useTableComponents()
 </script>
 
 <template>
-  <div class="grid grid-rows-[128px_1fr] gap-4 h-full min-h-0">
-    <div class="grid grid-cols-9 gap-8" v-loading="totalLoading">
+  <div class="grid grid-rows-[96px_1fr] gap-2 h-full min-h-0">
+    <div class="grid grid-cols-9 gap-4" v-loading="totalLoading">
       <div
         v-for="info in totalWorkKeys"
         :key="info[0]"
-        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-1 flex flex-col items-center justify-center gap-1">
-        <div class="size-7.5" :class="info[3]"></div>
+        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-1 py-2 flex flex-col items-center justify-center gap-0.5 min-w-0">
+        <div class="size-6.5" :class="info[3]"></div>
         <count-to
-          class="text-2xl font-medium"
+          class="text-xl font-medium leading-6"
           :start-val="0"
           :end-val="totalWork[info[0]]"
           :decimals="info[4]">
           <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
         </count-to>
-        <div class="text-sm font-medium text-[var(--el-text-color-regular)] whitespace-nowrap">
+        <div
+          class="text-xs font-medium leading-5 text-[var(--el-text-color-regular)] whitespace-nowrap">
           {{ info[1] ? info[2] + '(' + info[1] + ')' : info[2] }}
         </div>
       </div>
     </div>
 
-    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-4 gap-2 min-h-0">
-      <div class="flex h-12 items-center justify-between">
+    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-3 gap-2 min-h-0">
+      <div class="flex h-10 items-center justify-between">
         <el-button-group>
           <el-button
             size="default"

+ 32 - 10
src/views/pms/iotrddailyreport/summary.vue

@@ -57,7 +57,7 @@ const resetQuery = () => {
 
 <template>
   <div
-    class="grid grid-cols-[auto_1fr] grid-rows-[62px_48px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
+    class="grid grid-cols-[auto_1fr] grid-rows-[48px_44px_1fr] gap-3 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
     <DeptTreeSelect
       :deptId="id"
       :top-id="163"
@@ -65,16 +65,16 @@ const resetQuery = () => {
       @node-click="handleDeptNodeClick"
       class="row-span-3" />
     <el-form
-      size="default"
-      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between">
-      <div class="flex items-center gap-8">
+      size="small"
+      class="summary-query-form bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-5 flex items-center justify-between">
+      <div class="flex items-center gap-5 min-w-0">
         <el-form-item label="项目">
           <el-input
             v-model="query.contractName"
             placeholder="请输入项目"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px" />
+            class="!w-220px" />
         </el-form-item>
         <el-form-item label="任务">
           <el-input
@@ -82,7 +82,7 @@ const resetQuery = () => {
             placeholder="请输入任务"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px" />
+            class="!w-220px" />
         </el-form-item>
         <el-form-item label="创建时间">
           <el-date-picker
@@ -93,14 +93,16 @@ const resetQuery = () => {
             end-placeholder="结束日期"
             :shortcuts="rangeShortcuts"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-220px" />
+            class="!w-260px" />
         </el-form-item>
       </div>
-      <el-form-item>
-        <el-button type="primary" @click="handleQuery()">
+      <el-form-item class="summary-query-actions">
+        <el-button size="small" 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-button size="small" @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" /> 重置
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -136,4 +138,24 @@ const resetQuery = () => {
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
+
+.summary-query-form {
+  min-height: 48px;
+
+  :deep(.el-form-item__label) {
+    height: 28px;
+    line-height: 28px;
+  }
+}
+
+.summary-query-actions {
+  :deep(.el-form-item__content) {
+    flex-wrap: nowrap;
+    gap: 8px;
+  }
+
+  :deep(.el-button + .el-button) {
+    margin-left: 0;
+  }
+}
 </style>

+ 9 - 8
src/views/pms/iotrhdailyreport/components/DailyStatistics.vue

@@ -769,8 +769,8 @@ const { ZmTable, ZmTableColumn } = useTableComponents()
 </script>
 
 <template>
-  <div class="grid grid-rows-[128px_1fr] gap-4 h-full min-h-0">
-    <div class="grid grid-cols-8 gap-8">
+  <div class="grid grid-rows-[96px_1fr] gap-2 h-full min-h-0">
+    <div class="grid grid-cols-8 gap-4">
       <template v-for="info in totalWorkKeys" :key="info[0]">
         <el-tooltip :disabled="info[0] !== 'totalGasInjection'" placement="top">
           <template #content>
@@ -788,11 +788,11 @@ const { ZmTable, ZmTableColumn } = useTableComponents()
             </div>
           </template>
           <div
-            class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-1 flex flex-col items-center justify-center gap-1">
-            <div class="size-7.5" :class="info[3]"></div>
+            class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-1 py-2 flex flex-col items-center justify-center gap-0.5 min-w-0">
+            <div class="size-6.5" :class="info[3]"></div>
 
             <count-to
-              class="text-2xl font-medium"
+              class="text-xl font-medium leading-6"
               :class="{ 'cursor-help': info[0] === 'totalGasInjection' }"
               :start-val="0"
               :end-val="totalWork[info[0]]"
@@ -801,7 +801,8 @@ const { ZmTable, ZmTableColumn } = useTableComponents()
               <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
             </count-to>
 
-            <div class="text-sm font-medium text-[var(--el-text-color-regular)] whitespace-nowrap">
+            <div
+              class="text-xs font-medium leading-5 text-[var(--el-text-color-regular)] whitespace-nowrap">
               {{ info[1] ? info[2] + '(' + info[1] + ')' : info[2] }}
             </div>
           </div>
@@ -809,8 +810,8 @@ const { ZmTable, ZmTableColumn } = useTableComponents()
       </template>
     </div>
 
-    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-4 gap-2 min-h-0">
-      <div class="flex h-12 items-center justify-between">
+    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-3 gap-2 min-h-0">
+      <div class="flex h-10 items-center justify-between">
         <el-button-group>
           <el-button
             size="default"

+ 32 - 10
src/views/pms/iotrhdailyreport/summary.vue

@@ -106,7 +106,7 @@ watch(
 
 <template>
   <div
-    class="grid grid-cols-[auto_1fr] grid-rows-[62px_48px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
+    class="grid grid-cols-[auto_1fr] grid-rows-[48px_44px_1fr] gap-3 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
     <DeptTreeSelect
       :deptId="id"
       :top-id="157"
@@ -114,16 +114,16 @@ watch(
       @node-click="handleDeptNodeClick"
       class="row-span-3" />
     <el-form
-      size="default"
-      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between">
-      <div class="flex items-center gap-8">
+      size="small"
+      class="summary-query-form bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-5 flex items-center justify-between">
+      <div class="flex items-center gap-5 min-w-0">
         <el-form-item label="项目">
           <el-input
             v-model="query.contractName"
             placeholder="请输入项目"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px" />
+            class="!w-220px" />
         </el-form-item>
         <el-form-item label="任务">
           <el-input
@@ -131,7 +131,7 @@ watch(
             placeholder="请输入任务"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px" />
+            class="!w-220px" />
         </el-form-item>
         <el-form-item label="创建时间">
           <el-date-picker
@@ -142,14 +142,16 @@ watch(
             end-placeholder="结束日期"
             :shortcuts="rangeShortcuts"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-220px" />
+            class="!w-260px" />
         </el-form-item>
       </div>
-      <el-form-item>
-        <el-button type="primary" @click="handleQuery()">
+      <el-form-item class="summary-query-actions">
+        <el-button size="small" 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-button size="small" @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" /> 重置
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -186,4 +188,24 @@ watch(
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
+
+.summary-query-form {
+  min-height: 48px;
+
+  :deep(.el-form-item__label) {
+    height: 28px;
+    line-height: 28px;
+  }
+}
+
+.summary-query-actions {
+  :deep(.el-form-item__content) {
+    flex-wrap: nowrap;
+    gap: 8px;
+  }
+
+  :deep(.el-button + .el-button) {
+    margin-left: 0;
+  }
+}
 </style>

+ 17 - 25
src/views/pms/iotrydailyreport/components/DailyStatistics.vue

@@ -551,31 +551,30 @@ const tolist = (id: number, non: boolean = false) => {
 </script>
 
 <template>
-  <div class="grid grid-rows-[128px_1fr] gap-4 h-full min-h-0">
-    <div class="grid grid-cols-8 gap-8">
+  <div class="grid grid-rows-[96px_1fr] gap-2 h-full min-h-0">
+    <div class="grid grid-cols-8 gap-4">
       <div
         v-for="info in totalWorkKeys"
         :key="info[0]"
-        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4 flex flex-col items-center justify-center gap-2"
-      >
-        <div class="size-7.5" :class="info[3]"></div>
+        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-1 py-2 flex flex-col items-center justify-center gap-0.5 min-w-0">
+        <div class="size-6.5" :class="info[3]"></div>
         <count-to
-          class="text-2xl font-medium"
+          class="text-xl font-medium leading-6"
           :start-val="0"
           :end-val="totalWork[info[0]]"
           :decimals="info[4]"
-          @click="info[2] === '未填报' ? openUnfilledDialog() : ''"
-        >
+          @click="info[2] === '未填报' ? openUnfilledDialog() : ''">
           <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
         </count-to>
-        <div class="text-sm font-medium text-[var(--el-text-color-regular)] whitespace-nowrap">
+        <div
+          class="text-xs font-medium leading-5 text-[var(--el-text-color-regular)] whitespace-nowrap">
           {{ info[1] ? info[2] + '(' + info[1] + ')' : info[2] }}
         </div>
       </div>
     </div>
 
-    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-4 gap-2 min-h-0">
-      <div class="flex h-12 items-center justify-between">
+    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-3 gap-2 min-h-0">
+      <div class="flex h-10 items-center justify-between">
         <el-button-group>
           <el-button
             size="default"
@@ -600,8 +599,7 @@ const tolist = (id: number, non: boolean = false) => {
               as="div"
               :style="{ position: 'relative', overflow: 'hidden' }"
               :animate="{ height: `${height}px`, width: `100%` }"
-              :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
-            >
+              :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }">
               <AnimatePresence :initial="false" mode="sync">
                 <Motion
                   :key="currentTab"
@@ -610,29 +608,25 @@ const tolist = (id: number, non: boolean = false) => {
                   :animate="{ x: '0%', opacity: 1 }"
                   :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
                   :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
-                  :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
-                >
+                  :style="{ position: 'absolute', left: 0, right: 0, top: 0 }">
                   <div :style="{ width: `100%`, height: `${height}px` }">
                     <zm-table
                       v-if="currentTab === '表格'"
                       :loading="listLoading"
                       :data="list"
                       :height="height"
-                      show-border
-                    >
+                      show-border>
                       <template v-for="item in columns(type)" :key="item.prop">
                         <zm-table-column
                           v-if="item.prop !== 'name' && item.prop !== 'nonProductiveTime'"
                           :label="item.label"
                           :prop="item.prop"
                           :formatter="formatter"
-                          :action="item.action"
-                        />
+                          :action="item.action" />
                         <zm-table-column
                           v-else-if="item.prop === 'name'"
                           :label="item.label"
-                          :prop="item.prop"
-                        >
+                          :prop="item.prop">
                           <template #default="{ row }">
                             <el-button text type="primary" @click.prevent="tolist(row.id)">{{
                               row.name
@@ -645,8 +639,7 @@ const tolist = (id: number, non: boolean = false) => {
                               v-if="row.nonProductiveTime > 0"
                               text
                               type="primary"
-                              @click.prevent="tolist(row.id, true)"
-                            >
+                              @click.prevent="tolist(row.id, true)">
                               {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
                             </el-button>
                             <span v-else>
@@ -661,8 +654,7 @@ const tolist = (id: number, non: boolean = false) => {
                       v-loading="chartLoading"
                       :key="dayjs().valueOf()"
                       v-else
-                      :style="{ width: `100%`, height: `${height}px` }"
-                    >
+                      :style="{ width: `100%`, height: `${height}px` }">
                     </div>
                   </div>
                 </Motion>

+ 17 - 25
src/views/pms/iotrydailyreport/components/XjDailyStatistics.vue

@@ -549,31 +549,30 @@ const tolist = (id: number) => {
 </script>
 
 <template>
-  <div class="grid grid-rows-[128px_1fr] gap-4 h-full min-h-0">
-    <div class="grid grid-cols-9 gap-8">
+  <div class="grid grid-rows-[96px_1fr] gap-2 h-full min-h-0">
+    <div class="grid grid-cols-9 gap-4">
       <div
         v-for="info in totalWorkKeys"
         :key="info[0]"
-        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow p-4 flex flex-col items-center justify-center gap-2"
-      >
-        <div class="size-7.5" :class="info[3]"></div>
+        class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-1 py-2 flex flex-col items-center justify-center gap-0.5 min-w-0">
+        <div class="size-6.5" :class="info[3]"></div>
         <count-to
-          class="text-2xl font-medium"
+          class="text-xl font-medium leading-6"
           :start-val="0"
           :end-val="totalWork[info[0]]"
           :decimals="info[4]"
-          @click="info[2] === '未填报' ? openUnfilledDialog() : ''"
-        >
+          @click="info[2] === '未填报' ? openUnfilledDialog() : ''">
           <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
         </count-to>
-        <div class="text-sm font-medium text-[var(--el-text-color-regular)] whitespace-nowrap">
+        <div
+          class="text-xs font-medium leading-5 text-[var(--el-text-color-regular)] whitespace-nowrap">
           {{ info[1] ? info[2] + '(' + info[1] + ')' : info[2] }}
         </div>
       </div>
     </div>
 
-    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-4 gap-2 min-h-0">
-      <div class="flex h-12 items-center justify-between">
+    <div class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow flex flex-col p-3 gap-2 min-h-0">
+      <div class="flex h-10 items-center justify-between">
         <el-button-group>
           <el-button
             size="default"
@@ -598,8 +597,7 @@ const tolist = (id: number) => {
               as="div"
               :style="{ position: 'relative', overflow: 'hidden' }"
               :animate="{ height: `${height}px`, width: `100%` }"
-              :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
-            >
+              :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }">
               <AnimatePresence :initial="false" mode="sync">
                 <Motion
                   :key="currentTab"
@@ -608,29 +606,25 @@ const tolist = (id: number) => {
                   :animate="{ x: '0%', opacity: 1 }"
                   :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
                   :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
-                  :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
-                >
+                  :style="{ position: 'absolute', left: 0, right: 0, top: 0 }">
                   <div :style="{ width: `100%`, height: `${height}px` }">
                     <zm-table
                       v-if="currentTab === '表格'"
                       :loading="listLoading"
                       :data="list"
                       :height="height"
-                      show-border
-                    >
+                      show-border>
                       <template v-for="item in columns(type)" :key="item.prop">
                         <zm-table-column
                           v-if="item.prop !== 'name' && item.prop !== 'nonProductiveTime'"
                           :label="item.label"
                           :prop="item.prop"
                           :formatter="formatter"
-                          :action="item.action"
-                        />
+                          :action="item.action" />
                         <zm-table-column
                           v-else-if="item.prop === 'name'"
                           :label="item.label"
-                          :prop="item.prop"
-                        >
+                          :prop="item.prop">
                           <template #default="{ row }">
                             <el-button text type="primary" @click.prevent="tolist(row.id)">{{
                               row.name
@@ -643,8 +637,7 @@ const tolist = (id: number) => {
                               v-if="row.nonProductiveTime > 0"
                               text
                               type="primary"
-                              @click.prevent="tolist(row.id)"
-                            >
+                              @click.prevent="tolist(row.id)">
                               {{ (Number(row.nonProductiveTime ?? 0) * 100).toFixed(2) + '%' }}
                             </el-button>
                             <span v-else>
@@ -659,8 +652,7 @@ const tolist = (id: number) => {
                       v-loading="chartLoading"
                       :key="dayjs().valueOf()"
                       v-else
-                      :style="{ width: `100%`, height: `${height}px` }"
-                    >
+                      :style="{ width: `100%`, height: `${height}px` }">
                     </div>
                   </div>
                 </Motion>

+ 32 - 10
src/views/pms/iotrydailyreport/summary.vue

@@ -59,7 +59,7 @@ const resetQuery = () => {
 
 <template>
   <div
-    class="grid grid-cols-[auto_1fr] grid-rows-[62px_48px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
+    class="grid grid-cols-[auto_1fr] grid-rows-[48px_44px_1fr] gap-3 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
     <DeptTreeSelect
       :deptId="id"
       :top-id="158"
@@ -67,16 +67,16 @@ const resetQuery = () => {
       @node-click="handleDeptNodeClick"
       class="row-span-3" />
     <el-form
-      size="default"
-      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between">
-      <div class="flex items-center gap-8">
+      size="small"
+      class="summary-query-form bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-5 flex items-center justify-between">
+      <div class="flex items-center gap-5 min-w-0">
         <el-form-item label="项目">
           <el-input
             v-model="query.contractName"
             placeholder="请输入项目"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px" />
+            class="!w-220px" />
         </el-form-item>
         <el-form-item label="任务">
           <el-input
@@ -84,7 +84,7 @@ const resetQuery = () => {
             placeholder="请输入任务"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px" />
+            class="!w-220px" />
         </el-form-item>
         <el-form-item label="创建时间">
           <el-date-picker
@@ -95,14 +95,16 @@ const resetQuery = () => {
             end-placeholder="结束日期"
             :shortcuts="rangeShortcuts"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-220px" />
+            class="!w-260px" />
         </el-form-item>
       </div>
-      <el-form-item>
-        <el-button type="primary" @click="handleQuery()">
+      <el-form-item class="summary-query-actions">
+        <el-button size="small" 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-button size="small" @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" /> 重置
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -138,4 +140,24 @@ const resetQuery = () => {
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
+
+.summary-query-form {
+  min-height: 48px;
+
+  :deep(.el-form-item__label) {
+    height: 28px;
+    line-height: 28px;
+  }
+}
+
+.summary-query-actions {
+  :deep(.el-form-item__content) {
+    flex-wrap: nowrap;
+    gap: 8px;
+  }
+
+  :deep(.el-button + .el-button) {
+    margin-left: 0;
+  }
+}
 </style>

+ 32 - 10
src/views/pms/iotrydailyreport/xsummary.vue

@@ -59,7 +59,7 @@ const resetQuery = () => {
 
 <template>
   <div
-    class="grid grid-cols-[auto_1fr] grid-rows-[62px_48px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
+    class="grid grid-cols-[auto_1fr] grid-rows-[48px_44px_1fr] gap-3 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
     <DeptTreeSelect
       :deptId="id"
       :top-id="158"
@@ -67,16 +67,16 @@ const resetQuery = () => {
       @node-click="handleDeptNodeClick"
       class="row-span-3" />
     <el-form
-      size="default"
-      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between">
-      <div class="flex items-center gap-8">
+      size="small"
+      class="summary-query-form bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-5 flex items-center justify-between">
+      <div class="flex items-center gap-5 min-w-0">
         <el-form-item label="项目">
           <el-input
             v-model="query.contractName"
             placeholder="请输入项目"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px" />
+            class="!w-220px" />
         </el-form-item>
         <el-form-item label="任务">
           <el-input
@@ -84,7 +84,7 @@ const resetQuery = () => {
             placeholder="请输入任务"
             clearable
             @keyup.enter="handleQuery()"
-            class="!w-240px" />
+            class="!w-220px" />
         </el-form-item>
         <el-form-item label="创建时间">
           <el-date-picker
@@ -95,14 +95,16 @@ const resetQuery = () => {
             end-placeholder="结束日期"
             :shortcuts="rangeShortcuts"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-220px" />
+            class="!w-260px" />
         </el-form-item>
       </div>
-      <el-form-item>
-        <el-button type="primary" @click="handleQuery()">
+      <el-form-item class="summary-query-actions">
+        <el-button size="small" 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-button size="small" @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" /> 重置
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -138,4 +140,24 @@ const resetQuery = () => {
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
+
+.summary-query-form {
+  min-height: 48px;
+
+  :deep(.el-form-item__label) {
+    height: 28px;
+    line-height: 28px;
+  }
+}
+
+.summary-query-actions {
+  :deep(.el-form-item__content) {
+    flex-wrap: nowrap;
+    gap: 8px;
+  }
+
+  :deep(.el-button + .el-button) {
+    margin-left: 0;
+  }
+}
 </style>