fix(iotprojectinfo): 修复低分辨率下项目信息搜索栏显示异常

src/views/pms/iotprojectinfo/index.vue

@@ -1,14 +1,12 @@
 <template>
   <div
-    class="iot-project-info-page grid grid-rows-[auto_minmax(360px,1fr)_auto] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
-  >
+    class="iot-project-info-page grid grid-rows-[auto_minmax(360px,1fr)_auto] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
     <el-form
       ref="queryFormRef"
       :model="queryParams"
       size="default"
       label-width="72px"
-      class="iot-project-info-query bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-6 py-3 min-w-0"
-    >
+      class="iot-project-info-query bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-6 py-3 min-w-0">
       <div class="query-row">
         <el-form-item label="公司" prop="companyDeptId">
           <el-select
@@ -16,14 +14,12 @@
             placeholder="请选择公司"
             clearable
             filterable
-            class="query-control"
-          >
+            class="query-control">
             <el-option
               v-for="item in companyDeptList"
               :key="item.id"
               :label="item.name"
-              :value="item.id"
-            />
+              :value="item.id" />
           </el-select>
         </el-form-item>
         <el-form-item label="项目部" prop="projectDeptId">
@@ -34,14 +30,12 @@
             :loading="projectDeptLoading"
             clearable
             filterable
-            class="query-control"
-          >
+            class="query-control">
             <el-option
               v-for="item in projectDeptOptions"
               :key="item.value"
               :label="item.label"
-              :value="item.value"
-            />
+              :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item label="合同名称" prop="contractName">
@@ -50,8 +44,7 @@
             placeholder="请输入合同名称"
             clearable
             class="query-control"
-            @keyup.enter="handleQuery"
-          />
+            @keyup.enter="handleQuery" />
         </el-form-item>
         <el-form-item label="合同编号" prop="contractCode">
           <el-input
@@ -59,8 +52,7 @@
             placeholder="请输入合同编号"
             clearable
             class="query-control"
-            @keyup.enter="handleQuery"
-          />
+            @keyup.enter="handleQuery" />
         </el-form-item>
         <el-form-item label="起止日期" prop="startTime">
           <el-date-picker
@@ -70,8 +62,7 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="query-control query-control--date"
-          />
+            class="query-control query-control--date" />
         </el-form-item>
         <el-form-item class="query-actions">
           <el-button type="primary" @click="handleQuery">
@@ -82,8 +73,7 @@
             type="primary"
             plain
             @click="openForm('create', undefined)"
-            v-hasPermi="['rq:iot-project-info:create']"
-          >
+            v-hasPermi="['rq:iot-project-info:create']">
             <Icon icon="ep:plus" class="mr-5px" />新增
           </el-button>
           <el-button type="success" plain :loading="exportLoading" @click="handleExport">
@@ -103,22 +93,19 @@
               :width="width"
               :height="height"
               :max-height="height"
-              show-border
-            >
+              show-border>
               <ZmTableColumn
                 type="index"
                 :label="t('monitor.serial')"
                 :width="70"
                 fixed="left"
-                hide-in-column-settings
-              />
+                hide-in-column-settings />
               <ZmTableColumn
                 prop="manufactureName"
                 label="客户名称"
                 min-width="180"
                 fixed="left"
-                align="left"
-              />
+                align="left" />
               <ZmTableColumn prop="contractName" label="合同名称" min-width="220" fixed="left">
                 <template #default="{ row }">
                   <el-link type="primary" :underline="false" @click="showTaskList(row)">
@@ -153,24 +140,21 @@
                     link
                     type="primary"
                     @click="openForm('update', row.id)"
-                    v-hasPermi="['rq:iot-project-info:update']"
-                  >
+                    v-hasPermi="['rq:iot-project-info:update']">
                     编辑
                   </el-button>
                   <el-button
                     link
                     type="primary"
                     @click="assignTask(row)"
-                    v-hasPermi="['rq:iot-project-task:create']"
-                  >
+                    v-hasPermi="['rq:iot-project-task:create']">
                     分配任务
                   </el-button>
                   <el-button
                     link
                     type="danger"
                     @click="handleDelete(row.id)"
-                    v-hasPermi="['rq:iot-project-info:delete']"
-                  >
+                    v-hasPermi="['rq:iot-project-info:delete']">
                     删除
                   </el-button>
                 </template>
@@ -191,16 +175,14 @@
           :total="total"
           layout="total, sizes, prev, pager, next, jumper"
           @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
+          @current-change="handleCurrentChange" />
       </div>
     </div>
 
     <div
       v-if="selectedProject"
       :style="{ height: taskListPanelHeight }"
-      class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4 min-w-0 min-h-0 task-list-panel"
-    >
+      class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4 min-w-0 min-h-0 task-list-panel">
       <div class="card-header mb-3">
         <span class="font-600">任务列表 - {{ selectedProject.contractName }}</span>
         <el-button link @click="closeTaskList" class="close-btn">
@@ -216,15 +198,13 @@
               :width="width"
               :height="height"
               :max-height="height"
-              show-border
-            >
+              show-border>
               <ZmTableColumn prop="wellName" label="井号" min-width="100" />
               <ZmTableColumn prop="status" :label="t('project.status')" min-width="120">
                 <template #default="{ row }">
                   <el-link type="primary" :underline="false" @click="openTimelineDialog(row)">
                     <template
-                      v-if="row.status !== null && row.status !== undefined && row.status !== ''"
-                    >
+                      v-if="row.status !== null && row.status !== undefined && row.status !== ''">
                       <dict-tag :type="getStatusDictType(row.deptId)" :value="row.status" />
                     </template>
                     <template v-else>未更新状态</template>
@@ -265,8 +245,7 @@
                 <template #default="{ row }">
                   <el-tooltip
                     :content="getAllResponsiblePersonNames(row.responsiblePerson)"
-                    placement="top"
-                  >
+                    placement="top">
                     <span class="responsible-names">
                       {{ getResponsiblePersonNames(row.responsiblePerson) }}
                     </span>
@@ -284,8 +263,7 @@
   <el-dialog
     v-model="timelineDialogVisible"
     :title="`任务进度 - ${currentTaskRow ? currentTaskRow.wellName : ''}`"
-    :width="dialogWidth"
-  >
+    :width="dialogWidth">
     <div class="progress-container">
       <!-- 计划进度 -->
       <!-- <div class="progress-section">
@@ -311,15 +289,13 @@
           <el-steps
             direction="horizontal"
             :active="actualStepsData.length - 1"
-            finish-status="success"
-          >
+            finish-status="success">
             <el-step
               v-for="(step, index) in actualStepsData"
               :key="index"
               :title="step.title"
               :description="step.description"
-              :status="step.status"
-            />
+              :status="step.status" />
           </el-steps>
         </div>
         <el-empty v-else description="暂无实际进度数据" :image-size="80" />
@@ -920,13 +896,74 @@ watch(
 </script>
 
 <style scoped>
+@media (width <= 1500px) {
+  .iot-project-info-query .query-row {
+    gap: 12px 18px;
+  }
+
+  .iot-project-info-query .query-control {
+    width: 210px;
+  }
+
+  .iot-project-info-query .query-control--date {
+    width: 280px;
+  }
+}
+
+@media (width <= 1200px) {
+  .iot-project-info-page {
+    grid-template-rows: auto minmax(480px, 1fr) auto;
+    height: auto;
+    min-height: calc(
+      100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
+    );
+  }
+
+  .iot-project-info-query .query-actions {
+    width: 100%;
+  }
+
+  .iot-project-info-query .query-actions :deep(.el-form-item__content) {
+    justify-content: flex-start;
+  }
+}
+
+@media (width <= 768px) {
+  .iot-project-info-query {
+    padding: 12px;
+  }
+
+  .iot-project-info-query .query-row,
+  .iot-project-info-query .query-row :deep(.el-form-item),
+  .iot-project-info-query .query-actions {
+    width: 100%;
+  }
+
+  .iot-project-info-query .query-control,
+  .iot-project-info-query .query-control--date {
+    width: 100%;
+  }
+
+  .iot-project-info-query .query-actions :deep(.el-form-item__content) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    width: 100%;
+  }
+
+  .iot-project-info-query .query-actions :deep(.el-button) {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
 .iot-project-info-query {
   display: block;
 }
 
 .query-row {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   align-items: center;
   gap: 12px 24px;
   min-width: 0;
@@ -1082,75 +1119,4 @@ watch(
   font-size: 14px;
   color: #909399;
 }
-
-@media (width <= 1800px) {
-  .query-row {
-    flex-wrap: wrap;
-  }
-
-  .query-actions {
-    margin-left: 0;
-  }
-}
-
-@media (width <= 1500px) {
-  .query-row {
-    gap: 12px 18px;
-  }
-
-  .query-control {
-    width: 210px;
-  }
-
-  .query-control--date {
-    width: 280px;
-  }
-}
-
-@media (width <= 1200px) {
-  .iot-project-info-page {
-    grid-template-rows: auto minmax(480px, 1fr) auto;
-    height: auto;
-    min-height: calc(
-      100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
-    );
-  }
-
-  .query-actions {
-    width: 100%;
-  }
-
-  .query-actions :deep(.el-form-item__content) {
-    justify-content: flex-start;
-  }
-}
-
-@media (width <= 768px) {
-  .iot-project-info-query {
-    padding: 12px;
-  }
-
-  .query-row,
-  .query-row :deep(.el-form-item),
-  .query-actions {
-    width: 100%;
-  }
-
-  .query-control,
-  .query-control--date {
-    width: 100%;
-  }
-
-  .query-actions :deep(.el-form-item__content) {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
-    width: 100%;
-  }
-
-  .query-actions :deep(.el-button) {
-    width: 100%;
-    margin-left: 0;
-  }
-}
 </style>