ok

vue/src/views/wellinfo/index.vue

@@ -40,15 +40,12 @@
           </template>
         </a-tree>
       </div>
-    </div >
+    </div>
     <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>
 
-
-
-
     <div class="query-index-content" >
       <div class="query-index-form" >
         <a-form ref="formRef" name="fromQuery"
@@ -58,7 +55,7 @@
           <a-row :gutter="24" class="query-index-row">
             <a-col :span="6">
               <a-form-item name="well_common_name" label="井名:">
-                <a-input v-model:value="formState.well_common_name"/>
+                <a-input id="wellName" v-model:value="formState.well_common_name"/>
               </a-form-item>
             </a-col>
             <a-col :span="6">
@@ -85,7 +82,7 @@
                 </a-tree-select>
               </a-form-item>
             </a-col>
-            <a-col :span="6" style="text-align: left" >
+            <a-col :span="6" style="text-align: left">
               <MenuOutlined @click="showQuery=true" v-if="!showQuery" data-v-step="2" />
               <LineOutlined @click="showQuery=false" v-else/>
               <a-button type="primary" html-type="submit" @click="onQuery" style="margin-left: 10px;">查询</a-button>
@@ -178,7 +175,7 @@
         </a-form>
       </div>
       <div style="flex-grow: 1;overflow: auto;height: 500px;">
-        <a-spin :spinning="loading"  >
+        <a-spin :spinning="loading">
           <div class="query-index-table" data-v-step="4" v-if="viewModel=='list'" >
             <a-table :columns="filterColumns" :data-source="data" :scroll="{ x:'100%', y: '100%' }"
                      :row-key="record=>record.tempId" :pagination="false" @resizeColumn="handleResizeColumn"
@@ -211,15 +208,15 @@
               </template>
             </a-table>
           </div>
-          <div class="query-index-table" data-v-step="4" v-else >
+          <div class="query-index-table" v-else >
             <a-row :gutter="[24,8]">
-              <a-col :span="colspan" v-for="item in data" >
+              <a-col :span="colspan" v-for="item in data">
                 <a-card :title="'井名：'+item.well_common_name" class="ant-card-index" bodyStyle="padding: 10px;">
                   <template #extra>
                     <a-button type="link" @click="detail(item.well_id)">查看详情</a-button>
                     <a-button type="link" @click="showDoc(item.well_id)">相关文档</a-button>
                   </template>
-                  <table class="well-card-table" >
+                  <table class="well-card-table">
                     <tr>
                       <th>井型：</th>
                       <td>{{ item.well_type }}</td>
@@ -402,7 +399,7 @@ export default defineComponent({
         header:{
           title:'<div style="color: white;background: #4c8dff;display: inline;font-size: 15px;' +
             'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
-            '| 可以切换目录查询<span style="padding-left: 250px;">1/5</span></div>'
+            '引导1/5:  <span style="padding-left: 20px;">可以切换目录查询 ← </span></div>'
         },
         content:'<div></div>',
         params:{
@@ -413,7 +410,7 @@ export default defineComponent({
         header:{
           title:'<div style="color: white;background: #4c8dff;display: inline;font-size: 15px;' +
             'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
-            '| 点击展开更多查询<span style="padding-left: 250px;">2/5</span></div>',
+            '引导2/5:  <span style="padding-left: 20px;">点击"☰"按钮展开更多查询 →</span></div>',
         },
         content:'<div></div>',
         params:{
@@ -424,7 +421,7 @@ export default defineComponent({
         header:{
           title:'<div style="color: white;background: #4c8dff;display: inline;font-size: 15px;' +
             'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
-            '| 切换不同视图，也可勾选需要显示的列<span style="padding-left: 170px;">3/5</span></div>',
+            '引导3/5: <span style="padding-left: 20px;">切换不同视图，也可勾选需要显示的列 →</span></div>',
         },
         content:'<div></div>',
         params:{
@@ -435,7 +432,7 @@ export default defineComponent({
         header:{
           title:'<div style="color: white;background: #4c8dff;display: inline;font-size: 15px;' +
             'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
-            '| 可移动列的顺序<span style="padding-left: 250px;">4/5</span></div>'
+            '引导4/5: <span style="padding-left: 20px;">可移动表格数据列的顺序 ↑</span></div>'
         },
         content:'<div></div>',
         params:{
@@ -446,7 +443,7 @@ export default defineComponent({
         header:{
           title:'<div style="color: white;background: #4c8dff;display: inline;font-size: 15px;' +
             'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
-            '| 地图显示当前列表的井所在位置<span style="padding-left: 250px;">5/5</span></div>'
+            '引导5/5:<span style="padding-left: 20px;">地图显示当前列表的井所在位置 ↑</span></div>'
         },
         content:'<div></div>',
         params:{
@@ -477,6 +474,8 @@ export default defineComponent({
         loadStyle();
       },onStop:async function(){
         showOverlay.value = false;
+        const $input = document.getElementById('wellName');
+        $input?.focus();
       }
     });
 
@@ -491,7 +490,7 @@ export default defineComponent({
         const $buttons = document.getElementsByClassName("v-step__button");
         for(let i=0;i < $buttons.length;i++) {
           const button = $buttons[i];
-          button.setAttribute("style","border:1px solid white;margin:0 10px 0 20px;" +
+          button.setAttribute("style","border:1px solid white;margin:0 10px 0 10px;" +
                               "padding:0 4px 0 4px;border-radius:5px;");
         }
       },1);
@@ -940,7 +939,6 @@ export default defineComponent({
   mounted(){
     const internalInstance = getCurrentInstance();
     this.curTour = internalInstance?.appContext.config.globalProperties.$tours;
-    console.log("ssf1",this.curTour);
     if(this.curTour && this.curTour['testTour']){
       (this.curTour['testTour'] as any).start();
     }
@@ -949,7 +947,8 @@ export default defineComponent({
   created() {
     this.getSettingColumns();
     //this.loadData();
-  },
+  }
+  ,
   activated() {
   }
 });