搜素样式

src/assets/less/common.css

@@ -2,9 +2,6 @@
 .ant-card-body .table-operator {
   margin-bottom: 8px;
 }
-.table-operator {
-  width: 56%;
-}
 /** Button按钮间距 */
 .table-operator .ant-btn {
   margin: 0 8px 8px 0;

src/assets/less/common.less

@@ -3,9 +3,6 @@
 .ant-card-body .table-operator {
   margin-bottom: 8px;
 }
-.table-operator {
-  width: 56%;
-}
 /** Button按钮间距 */
 .table-operator .ant-btn {
   margin: 0 8px 8px 0;

src/assets/less/interLock.css

@@ -164,9 +164,34 @@
   border-color: #1890ff !important;
   font-size: 16px;
 }
-.iotmenu-content-container .table-page-search-wrapper,
-.iotmenu-modal-box .table-page-search-wrapper {
-  height: 48px;
+.iotmenu-content-container .table-page-search-wrapper .iotmenu-search-container,
+.iotmenu-modal-box .table-page-search-wrapper .iotmenu-search-container {
+  height: 48px !important;
+  display: flex;
+  align-items: center;
+}
+.iotmenu-content-container .table-page-search-wrapper .iotmenu-search-container .item-search-btn,
+.iotmenu-modal-box .table-page-search-wrapper .iotmenu-search-container .item-search-btn {
+  margin-right: 4px;
+}
+.iotmenu-content-container .table-page-search-wrapper .iotmenu-search-container .item-search,
+.iotmenu-modal-box .table-page-search-wrapper .iotmenu-search-container .item-search {
+  flex: 1;
+  margin-right: 4px;
+  max-width: 220px;
+}
+.iotmenu-content-container .table-page-search-wrapper .iotmenu-search-container .item-search:last-of-type,
+.iotmenu-modal-box .table-page-search-wrapper .iotmenu-search-container .item-search:last-of-type {
+  margin-right: 0;
+}
+.iotmenu-content-container .table-page-search-wrapper .iotmenu-search-container .ant-select,
+.iotmenu-modal-box .table-page-search-wrapper .iotmenu-search-container .ant-select {
+  width: 100%;
+}
+.iotmenu-content-container .table-page-search-wrapper .iotmenu-search-container .ant-calendar-picker,
+.iotmenu-modal-box .table-page-search-wrapper .iotmenu-search-container .ant-calendar-picker {
+  min-width: auto !important;
+  width: 100%;
 }
 .iotmenu-content-container .table-page-search-wrapper .ant-form .ant-form-item .ant-form-item-label label,
 .iotmenu-modal-box .table-page-search-wrapper .ant-form .ant-form-item .ant-form-item-label label {

src/assets/less/interLock.less

@@ -141,7 +141,34 @@
   }
   // 搜索
   .table-page-search-wrapper{
-    height: 48px;
+    .iotmenu-search-container{
+      height: 48px !important;
+      display: flex;
+      // justify-content: space-between;
+      align-items: center;
+      // border-bottom: 1px solid #e1e1e1;
+      .item-search-btn{
+        margin-right: 4px;
+      }
+      .item-search{
+        flex: 1;
+        margin-right: 4px;
+        max-width: 220px;
+      }
+      .item-search:last-of-type{
+        margin-right: 0;
+      }
+      // .query-group-cust{
+      //   min-width: auto !important;
+      // }
+      .ant-select{
+        width: 100%;
+      }
+      .ant-calendar-picker{
+        min-width: auto !important;
+        width: 100%;
+      }
+    }
     .ant-form{
       .ant-form-item{
         .ant-form-item-label label{

src/views/module_interLock/InterlockSummary/InterlockSummaryList.vue

@@ -2,33 +2,44 @@
   <a-card :bordered="false">
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
+      <!-- <a-form layout="inline" @keyup.enter.native="searchQuery"> -->
+        <div class="iotmenu-search-container">
+          <div v-if="selectData.interlockType === '1'" class="item-search-btn">
+            <a-button v-has="'add:summary'" @click="handleAdd" type="primary" icon="plus">新增</a-button>
+          </div>
+          <div class="item-search">
+            <a-input placeholder="请输入联锁名称" v-model="queryParam.interlockname" allow-clear @change="searchQuery">
+              <a-icon slot="prefix" type="search" />
+            </a-input>
+          </div>
+          <div class="item-search">
+            <a-input placeholder="请输入联锁条件" v-model="queryParam.interlockConditionTag" allow-clear @change="searchQuery">
+              <a-icon slot="prefix" type="search" />
+            </a-input>
+          </div>
+          <div v-if="selectData.interlockType === '1'" class="item-search">
+            <a-select placeholder="请选择仪表状态" v-model="queryParam.instrumentStatus" allowClear :options="healthLevelOption" style="width: 100%;"></a-select>
+          </div>
+          <div v-if="selectData.interlockType === '1'" class="item-search">
+            <a-select placeholder="请选择控制系统状态" v-model="queryParam.controlSystemStatus" allowClear :options="healthLevelOption" style="width: 100%;"></a-select>
+          </div>
+          <div v-if="selectData.interlockType === '1'" class="item-search">
+            <a-select placeholder="请选择旁路状态" v-model="queryParam.bypass" allowClear :options="healthLevelOption" style="width: 100%;"></a-select>
+          </div>
+          <div v-if="selectData.interlockType === '1'" class="item-search">
+            <j-dict-select-tag v-model="queryParam.interlockStatus" placeholder="请选择联锁状态" dictCode="interlock_status" style="width: 100%;"/>
+          </div>
+          <div v-if="selectData.interlockType === '1'" class="item-search">
+            <a-select placeholder="请选择回路健康级别" v-model="queryParam.loopHealthLevel" allowClear :options="healthLevelOption" style="width: 100%;"></a-select>
+          </div>
+        </div>
+        <!-- <a-row :gutter="24">
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="">
-              <a-input placeholder="请输入联锁名称" v-model="queryParam.interlockname"></a-input>
-            </a-form-item>
+            
           </a-col>
+          <template v-if="toggleSearchStatus">
+          </template>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="">
-              <a-input placeholder="请输入联锁条件" v-model="queryParam.interlockConditionTag"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="">
-              <!-- <a-input placeholder="请输入联锁状态" v-model="queryParam.interlockStatus"></a-input> -->
-              <j-dict-select-tag v-model="queryParam.interlockStatus" placeholder="请输入联锁状态" dictCode="interlock_status"/>
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="">
-              <!-- <a-input placeholder="请输入回路健康级别" v-model="queryParam.loopHealthLevel"></a-input> -->
-              <a-select placeholder="请输入回路健康级别" v-model="queryParam.loopHealthLevel" allowClear :options="healthLevelOption"></a-select>
-            </a-form-item>
-          </a-col>
-          <!-- <template v-if="toggleSearchStatus">
-          </template> -->
-          <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
               <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
@@ -37,15 +48,15 @@
                 <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
               </a>
             </span>
-          </a-col> -->
-        </a-row>
-      </a-form>
+          </a-col>
+        </a-row> -->
+      <!-- </a-form> -->
     </div>
     <!-- 查询区域-END -->
 
     <!-- 操作按钮区域 -->
     <div class="table-operator">
-      <a-button v-if="selectData.interlockType == '1'" v-has="'add:summary'" @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <!-- <a-button v-if="selectData.interlockType == '1'" v-has="'add:summary'" @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
       <!-- <a-button type="primary" icon="download" @click="handleExportXls('联锁总表')">导出</a-button>
       <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
         <a-button type="primary" icon="import">导入</a-button>

src/views/module_interLock/interlockHistoryData/InterlockHistoryList.vue

@@ -2,53 +2,58 @@
   <a-card :bordered="false">
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="联锁名称">
-              <a-input placeholder="请输入联锁名称" v-model="queryParam.interlockname"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="联锁状态">
-              <!-- <a-input placeholder="请输入联锁状态" v-model="queryParam.interlockStatus"></a-input> -->
-              <j-dict-select-tag v-model="queryParam.interlockStatus" placeholder="请输入联锁状态" dictCode="interlock_status"/>
-            </a-form-item>
-          </a-col>
-          <template v-if="toggleSearchStatus">
-            <a-col :xl="6" :lg="7" :md="8" :sm="24">
-              <a-form-item label="回路健康级别">
-                <!-- <a-input placeholder="请输入回路健康级别" v-model="queryParam.loopHealthLevel"></a-input> -->
-                <a-select placeholder="请输入回路健康级别" v-model="queryParam.loopHealthLevel" allowClear :options="healthLevelOption"></a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :xl="10" :lg="11" :md="12" :sm="24">
+        <div class="iotmenu-search-container">
+          <div class="item-search">
+            <a-input placeholder="请输入联锁名称" v-model="queryParam.interlockname" allow-clear @change="searchQuery">
+              <a-icon slot="prefix" type="search" />
+            </a-input>
+          </div>
+          <div class="item-search">
+            <a-input placeholder="请输入联锁条件" v-model="queryParam.interlockConditionTag" allow-clear @change="searchQuery">
+              <a-icon slot="prefix" type="search" />
+            </a-input>
+          </div>
+          <div v-if="selectData.interlockType === '1'" class="item-search">
+            <a-select placeholder="请选择仪表状态" v-model="queryParam.instrumentStatus" allowClear :options="healthLevelOption" style="width: 100%;"></a-select>
+          </div>
+          <div v-if="selectData.interlockType === '1'" class="item-search">
+            <a-select placeholder="请选择控制系统状态" v-model="queryParam.controlSystemStatus" allowClear :options="healthLevelOption" style="width: 100%;"></a-select>
+          </div>
+          <div v-if="selectData.interlockType === '1'" class="item-search">
+            <a-select placeholder="请选择旁路状态" v-model="queryParam.bypass" allowClear :options="healthLevelOption" style="width: 100%;"></a-select>
+          </div>
+          <div v-if="selectData.interlockType === '1'" class="item-search">
+            <j-dict-select-tag v-model="queryParam.interlockStatus" placeholder="请选择联锁状态" dictCode="interlock_status" style="width: 100%;"/>
+          </div>
+          <div v-if="selectData.interlockType === '1'" class="item-search">
+            <a-select placeholder="请选择回路健康级别" v-model="queryParam.loopHealthLevel" allowClear :options="healthLevelOption" style="width: 100%;"></a-select>
+          </div>
+          <div class="item-search">
+            <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" class="query-group-cust" v-model="queryParam.beginTime"></j-date>
+            <!-- <span class="query-group-split-cust"></span> -->
+          </div>
+          <div class="item-search">
+            <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" class="query-group-cust" v-model="queryParam.endTime"></j-date>
+          </div>
+          <div class="item-search-btn">
+            <a-button type="primary" icon="download" v-has="'export:history'" @click="handleExportXls('历史数据')">导出</a-button>
+          </div>
+        </div>
+
+            <!-- <a-col :xl="10" :lg="11" :md="12" :sm="24">
               <a-form-item label="时间">
                 <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" class="query-group-cust" v-model="queryParam.beginTime"></j-date>
                 <span class="query-group-split-cust"></span>
                 <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" class="query-group-cust" v-model="queryParam.endTime"></j-date>
               </a-form-item>
-            </a-col>
-          </template>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-              <a @click="handleToggleSearch" style="margin-left: 8px">
-                {{ toggleSearchStatus ? '收起' : '展开' }}
-                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
-              </a>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
+            </a-col> -->
     </div>
     <!-- 查询区域-END -->
 
     <!-- 操作按钮区域 -->
-    <div class="table-operator">
+    <!-- <div class="table-operator"> -->
       <!-- <a-button v-if="selectData.interlockType == '1'" @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
-      <a-button type="primary" icon="download" v-has="'export:history'" @click="handleExportXls('历史数据')">导出</a-button>
+      <!-- <a-button type="primary" icon="download" v-has="'export:history'" @click="handleExportXls('历史数据')">导出</a-button> -->
       <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
         <a-button type="primary" icon="import">导入</a-button>
       </a-upload> -->
@@ -60,7 +65,7 @@
         </a-menu>
         <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
       </a-dropdown> -->
-    </div>
+    <!-- </div> -->
 
     <!-- table区域-begin -->
     <div>

src/views/module_interLock/interlockHistoryDetail/InterlockHistoryDetailList.vue

@@ -8,42 +8,11 @@
       <a-card :bordered="false" style="background-color: #FAFAFA;">
         <!-- 查询区域 -->
         <div class="table-page-search-wrapper">
-          <a-form layout="inline" @keyup.enter.native="searchQuery">
-            <a-row :gutter="24">
-              <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                <a-form-item label="联锁总表id">
-                  <a-input placeholder="请输入联锁总表id" v-model="queryParam.summaryid"></a-input>
-                </a-form-item>
-              </a-col> -->
-              <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                <a-form-item label="联锁名称">
-                  <a-input placeholder="请输入联锁名称" v-model="queryParam.interlockname"></a-input>
-                </a-form-item>
-              </a-col> -->
-              <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                  <a-form-item label="联锁条件">
-                    <a-input placeholder="请输入联锁条件" v-model="queryParam.interlockConditionTag"></a-input>
-                  </a-form-item>
-                </a-col>
-              <!-- <template v-if="toggleSearchStatus">
-                <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                  <a-form-item label="仪表状态判断方式">
-                    <j-dict-select-tag placeholder="请选择仪表状态判断方式" v-model="queryParam.instrumentStatusJuge" dictCode="instrument_status_juge"/>
-                  </a-form-item>
-                </a-col>
-              </template> -->
-              <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-                  <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
-                    {{ toggleSearchStatus ? '收起' : '展开' }}
-                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
-                  </a> -->
-                </span>
-              </a-col>
-            </a-row>
-          </a-form>
+          <div class="iotmenu-search-container">
+            <div class="item-search">
+              <a-input placeholder="请输入联锁条件" v-model="queryParam.interlockConditionTag"></a-input>
+            </div>
+          </div>
         </div>
         <!-- 查询区域-END -->
 

src/views/module_interLock/interlockSummaryDetail/InterlockSummaryDetailList.vue

@@ -8,43 +8,33 @@
       <a-card :bordered="false" style="background-color: #FAFAFA;">
         <!-- 查询区域 -->
         <div class="table-page-search-wrapper">
+          <div class="iotmenu-search-container">
+            <div class="item-search">
+              <a-input placeholder="请输入联锁条件" v-model="queryParam.interlockConditionTag"></a-input>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="table-page-search-wrapper">
           <a-form layout="inline" @keyup.enter.native="searchQuery">
             <a-row :gutter="24">
-              <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                <a-form-item label="联锁总表id">
-                  <a-input placeholder="请输入联锁总表id" v-model="queryParam.summaryid"></a-input>
-                </a-form-item>
-              </a-col> -->
-              <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                <a-form-item label="联锁名称">
-                  <a-input placeholder="请输入联锁名称" v-model="queryParam.interlockname"></a-input>
-                </a-form-item>
-              </a-col> -->
               <a-col :xl="6" :lg="7" :md="8" :sm="24">
                   <a-form-item label="联锁条件">
                     <a-input placeholder="请输入联锁条件" v-model="queryParam.interlockConditionTag"></a-input>
                   </a-form-item>
                 </a-col>
-              <!-- <template v-if="toggleSearchStatus">
-                <a-col :xl="6" :lg="7" :md="8" :sm="24">
-                  <a-form-item label="仪表状态判断方式">
-                    <j-dict-select-tag placeholder="请选择仪表状态判断方式" v-model="queryParam.instrumentStatusJuge" dictCode="instrument_status_juge"/>
-                  </a-form-item>
-                </a-col>
-              </template> -->
               <a-col :xl="6" :lg="7" :md="8" :sm="24">
                 <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                   <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                   <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-                  <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
+                  <a @click="handleToggleSearch" style="margin-left: 8px">
                     {{ toggleSearchStatus ? '收起' : '展开' }}
                     <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
-                  </a> -->
+                  </a>
                 </span>
               </a-col>
             </a-row>
           </a-form>
-        </div>
+        </div> -->
         <!-- 查询区域-END -->
     
         <!-- 操作按钮区域 -->

src/views/module_interLock/interlockTimedReport/InterlockTimedReportList.vue

@@ -2,20 +2,19 @@
   <a-card :bordered="false">
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="报表类型">
-              <j-dict-select-tag placeholder="请选择报表类型" v-model="queryParam.reportType" dictCode="report_type"/>
-            </a-form-item>
-          </a-col>
-          <a-col :xl="10" :lg="11" :md="12" :sm="24">
-            <a-form-item label="创建日期">
-              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" class="query-group-cust" v-model="queryParam.createTime_begin"></j-date>
-              <span class="query-group-split-cust"></span>
-              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" class="query-group-cust" v-model="queryParam.createTime_end"></j-date>
-            </a-form-item>
-          </a-col>
+      <div class="iotmenu-search-container">
+        <div class="item-search">
+          <j-dict-select-tag placeholder="请选择报表类型" v-model="queryParam.reportType" dictCode="report_type"/>
+        </div>
+        <div class="item-search">
+          <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" class="query-group-cust" v-model="queryParam.createTime_begin"></j-date>
+        </div>
+        <div class="item-search">
+          <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" class="query-group-cust" v-model="queryParam.createTime_end"></j-date>
+        </div>
+      </div>
+    </div>
+
           <!-- <template v-if="toggleSearchStatus">
             <a-col :xl="10" :lg="11" :md="12" :sm="24">
               <a-form-item label="更新日期">
@@ -25,19 +24,16 @@
               </a-form-item>
             </a-col>
           </template> -->
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+          <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
               <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
+              <a @click="handleToggleSearch" style="margin-left: 8px">
                 {{ toggleSearchStatus ? '收起' : '展开' }}
                 <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
-              </a> -->
+              </a>
             </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
+          </a-col> -->
     <!-- 查询区域-END -->
 
     <!-- 操作按钮区域 -->