引导添加遮罩层

vue/src/components/basic/es-result/query-criteria.vue

@@ -1,13 +1,15 @@
 <template>
-  <div style="margin: auto;width: 600px;" data-v-step="1">
-    <a-space >
-      <QueryHistoryComplete v-model:value="formState.defaultKeyString" style="width: 500px"></QueryHistoryComplete>
-      <a-button type="primary" html-type="submit" @click="getQuery">查询</a-button>
-      <a-button @click="() => {formRef.resetFields();}" >重置</a-button>
-    </a-space>
-  </div>
-  <v-tour name="myTour" style="z-index: 100;"  :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
-  <a-divider orientation="center" @click="formState.showMoreQuery=!formState.showMoreQuery;" >
+  <div v-if="showOverlay" style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);z-index: 999;  "></div>
+  <div class="query-index">
+    <div style="margin:auto;width: 600px;" data-v-step="1">
+      <a-space >
+        <QueryHistoryComplete id="keyName" v-model:value="formState.defaultKeyString" style="width: 500px"></QueryHistoryComplete>
+        <a-button type="primary" html-type="submit" @click="getQuery">查询</a-button>
+        <a-button @click="() => {formRef.resetFields();}" >重置</a-button>
+      </a-space>
+    </div>
+    <v-tour name="myTour" style="z-index: 10000;"  :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
+    <a-divider orientation="center" @click="formState.showMoreQuery=!formState.showMoreQuery;" >
       <template v-if="!formState.showMoreQuery" >
         更多查询
         <DoubleRightOutlined rotate="90" />
@@ -17,7 +19,7 @@
         <DoubleLeftOutlined rotate="90"/>
       </template>
     </a-divider>
-  <div style="margin: auto;width: 500px;" v-show="formState.showMoreQuery">
+    <div style="margin:auto;width: 500px;min-height:700px;" v-show="formState.showMoreQuery">
       <a-divider orientation="left" data-v-step="2"><b style="color:#4E61D0">1.输入检索控制条件</b></a-divider>
       <a-row :gutter="24">
         <a-col :span="24">
@@ -50,16 +52,19 @@
         </a-col>
       </a-row>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
 import {defineComponent, ref,reactive, watch,getCurrentInstance} from 'vue';
 import type {FormInstance, SelectProps} from "ant-design-vue";
 import QueryHistoryComplete from '@/components/basic/querylog/history-complete.vue';
+import {show} from "dom7";
 
 
 export default defineComponent({
   name: 'query-criteria',
+  methods: {show},
   components: {QueryHistoryComplete},
   props: {
     queryObject: Object,
@@ -144,21 +149,23 @@ export default defineComponent({
         buttonStop:' 明白了 '
       }
     });
-    const showOverlay = ref(true);
+    const showOverlay = ref<boolean>(true);
 
     const myCallbacks = ref({
       onPreviousStep(){
-        showOverlay.value = true;
         loadStyle();
       },
       onNextStep(){
-        showOverlay.value = true;
         loadStyle();
       },onStop:async function(){
         showOverlay.value = false;
+        const $input = document.getElementById('keyName');
+        $input?.focus();
       }
     });
 
+
+
     const limiters = ref([{
       fields: '',
       value: '',
@@ -190,7 +197,6 @@ export default defineComponent({
             defaultKeyString: '',
             operation: 'AND'
           }, props.queryObject.formState);
-
           limiters.value = props.queryObject.limiters.length > 0 ? props.queryObject.limiters : [{
             field: '',
             keyString: '',
@@ -275,6 +281,15 @@ export default defineComponent({
 
 <style lang="less" scoped>
 
+.query-index {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: white;
+  overflow: hidden;
+  position: relative;
+}
+
 .leftTriangle{
   height: 0;
   border-top: 12px solid transparent;

vue/src/views/wellinfo/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="query-index">
+  <div v-if="showOverlay" style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);z-index: 999;  "></div>
+  <div class="query-index" >
     <div class="query-index-tree" v-if="showTree" data-v-step="1">
       <div class="query-index-tree-search">
         <a-tabs v-model:activeKey="activeTab" @change="tabChange" style="width:97%;">
@@ -44,7 +45,7 @@
     <div class="query-index-close" v-else>
       <DoubleRightOutlined @click="showTree=true;colspan=8;"/>
     </div>
-    <v-tour name="testTour" style="z-index: 100;" :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
+    <v-tour name="testTour" style="z-index: 1000;" :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
 
     <div class="query-index-content" >
       <div class="query-index-form" >
@@ -221,26 +222,27 @@
                       <th>井型：</th>
                       <td>{{ item.well_type }}</td>
                       <th>状态：</th>
-                      <td>{{ item.current_state_name }}</td>
+                      <td name="current_state_name">{{ item.current_state_name }}</td>
                     </tr>
                     <tr>
                       <th>开钻日期：</th>
-                      <td>{{ item.spud_date }}</td>
+                      <td name="spud_date">{{ item.spud_date }}</td>
                       <th>含水率：</th>
-                      <td><span style="padding:2px 10px;" :class="getTdColor( item.water_cut)">{{
+                      <td name="water_cut">
+                        <span style="padding:2px 10px;" :class="getTdColor(item.water_cut)">{{
                           item.water_cut
                         }}</span>
                       </td>
                     </tr>
                     <tr>
                       <th>开始采油日期：</th>
-                      <td>{{ item.oil_prod_begin_date }}</td>
+                      <td name="oil_prod_begin_date">{{ item.oil_prod_begin_date }}</td>
                       <th>最近采油日期：</th>
-                      <td>{{ item.oil_prod_recent_date }}</td>
+                      <td name="oil_prod_recent_date">{{ item.oil_prod_recent_date }}</td>
                     </tr>
                     <tr v-if="showColumnType.includes('oil')">
                       <th>最近月产油量：</th>
-                      <td>
+                      <td name="oil_prod_mon">
                         {{ item.oil_prod_mon == null ? "" : (numberToCurrencyNo(item.oil_prod_mon) + "t") }}
                       </td>
                       <td colspan="2" rowspan="2">
@@ -252,13 +254,13 @@
                     </tr>
                     <tr v-if="showColumnType.includes('oil')">
                       <th>累产油量：</th>
-                      <td>
+                      <td name="oil_prod_year">
                         {{ item.oil_prod_year == null ? "" : (numberToCurrencyNo(item.oil_prod_year) + "t") }}
                       </td>
                     </tr>
                     <tr v-if="showColumnType.includes('gas')">
                       <th>最近月产气量：</th>
-                      <td>
+                      <td name="gas_prod_mon">
                         {{ item.gas_prod_mon == null ? "" : (numberToCurrencyNo(item.gas_prod_mon) + "m³") }}
                       </td>
                       <td colspan="2" rowspan="2">
@@ -269,13 +271,13 @@
                     </tr>
                     <tr v-if="showColumnType.includes('gas')">
                       <th>累产气量：</th>
-                      <td>
+                      <td name="gas_prod_year">
                         {{ item.gas_prod_year == null ? "" : (numberToCurrencyNo(item.gas_prod_year) + "m³") }}
                       </td>
                     </tr>
                     <tr v-if="showColumnType.includes('water')">
                       <th>最近注水量：</th>
-                      <td>
+                      <td name="water_prod_mon">
                         {{ item.water_prod_mon == null ? "" : (numberToCurrencyNo(item.water_prod_mon) + "t") }}
                       </td>
                       <td colspan="2" rowspan="2">
@@ -286,7 +288,7 @@
                     </tr>
                     <tr v-if="showColumnType.includes('water')">
                       <th>累注水量：</th>
-                      <td>
+                      <td name="water_prod_year">
                         {{ item.water_prod_year == null ? "" : (numberToCurrencyNo(item.water_prod_year) + "10kt") }}
                       </td>
                     </tr>
@@ -296,9 +298,9 @@
             </a-row>
           </div>
           <a-pagination :page-size-options="pagination.pageSizeOptions" show-size-changer
-                        v-model:current="pagination.current" :total="pagination.total"
-                        style="float: right;margin-top: 10px;"
-                        :pageSize="pagination.pageSize" :show-total="total => `共 ${total} 条`"
+                        :total="pagination.total" style="float: right;margin-top: 10px;"
+                        :current="pagination.current"  :pageSize="pagination.pageSize"
+                        :show-total="total => `共 ${total} 条`"
                         @change="(current)=>handleTableChange({ current: current,pageSize: pagination.pageSize })"
                         @showSizeChange="(current,pageSize)=>handleTableChange({ current: current,pageSize: pageSize })"/>
         </a-spin>
@@ -367,11 +369,10 @@ import {download} from "@/utils/downloadFile";
 import {columns, filterColumns, formState, getTdColor} from './table';
 import filePreview from '@/components/basic/file-preview/index.vue';
 import {numberToCurrencyNo} from "@/utils/common";
-import {LeftCircleOutlined,RightCircleOutlined} from '@ant-design/icons-vue';
 
 export default defineComponent({
   name: 'wellinfoindex',
-  components: {ChartCell, ChartMap, filePreview,LeftCircleOutlined,RightCircleOutlined},
+  components: {ChartCell, ChartMap, filePreview},
   setup() {
 
     const curTour = ref(null);