页面跳转及样式调整

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

@@ -8,7 +8,7 @@
         <a-button @click="() => {formRef.resetFields();}" >重置</a-button>
       </a-space>
     </div>
-    <v-tour name="myTour" style="z-index: 1000;"  :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
+    <v-tour name="queryTour" style="z-index: 1000;"  :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
     <a-divider orientation="center" @click="formState.showMoreQuery=!formState.showMoreQuery;" >
       <template v-if="!formState.showMoreQuery" >
         更多查询
@@ -78,19 +78,19 @@ export default defineComponent({
   ],
   setup(props, {emit}) {
     console.log(props);
-    const curTour = ref(null);
+    const curTour = ref({});
     const steps = reactive([
       {
         target:'[data-v-step="1"]',
         header:{
           title:'<div style="height: 0;border-top: 12px solid transparent; border-bottom: 15px solid transparent;' +
                 'border-left: 15px solid transparent;border-right: 12px solid #4c8dff;' +
-                'position:absolute;right:449px;top:15px;"></div>' +
-                '<div style="width:450px;color: white;background: #4c8dff;display:inline-block;' +
+                'position:absolute;right:364px;top:15px;"></div>' +
+                '<div style="width:365px;color: white;background: #4c8dff;display:inline-block;' +
                 'font-size: 15px;border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
-                '| “一框式”检索<span style="padding-left: 295px;">1/3</span></div>'
+                '| “一框式”检索<span style="padding-left: 20px;">1/3</span></div>'
         },
-        content:'<div style="display:inline-block;width:450px;font-size:14px;color: white;background: #4c8dff;' +
+        content:'<div style="display:inline-block;width:365px;font-size:14px;color: white;background: #4c8dff;' +
                 'border-radius:0 0 10px 10px;padding:5px 15px 0px 15px;position: absolute;top:55px;">' +
                 '综合搜索栏，将检索功能浓缩至"一框"中。可直接输入多种类型的' +
                 '关键词如井号、井名、生产作业名词到检索框中进行搜索;同时支持输入运算符“大于""等于""少于”“不等于”进行检索词的组合运算<br/>' +
@@ -103,12 +103,12 @@ export default defineComponent({
         header:{
           title:'<div style="height: 0;border-top: 12px solid transparent; border-bottom: 15px solid transparent;' +
                 'border-left: 15px solid transparent;border-right: 12px solid #4c8dff;' +
-                'position:absolute;right:449px;top:11px;"></div>' +
-                '<div style="color: white;background: #4c8dff;display: inline;font-size: 15px;' +
+                'position:absolute;right:369px;top:11px;"></div>' +
+                '<div style="width:370px;color: white;background: #4c8dff;display: inline-block;font-size: 15px;' +
                 'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
-                '| 检索控制条件<span style="padding-left: 295px;">2/3</span></div>',
+                '| 检索控制条件<span style="padding-left: 205px;">2/3</span></div>',
         },
-        content:'<div style="display:inline-block;width:450px;height:50px;font-size:14px;color: white;background: #4c8dff;' +
+        content:'<div style="display:inline-block;width:370px;height:50px;font-size:14px;color: white;background: #4c8dff;' +
                 'border-radius:0 0 10px 10px;padding:5px 15px 0px 15px;position: absolute;top:50px;">' +
                 '可选择控件条件进行查询范围的缩窄<br/></div>',
         params:{
@@ -122,7 +122,7 @@ export default defineComponent({
                 'position:absolute;right:450px;bottom:11px;"></div>' +
                 '<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;' +
-                'position:relative;bottom:200px;">' +
+                'position:relative;bottom:198px;">' +
                 '| 多个检索项组合查询<span style="padding-left: 250px;">3/3</span></div>',
         },
         content:'<div style="color: white;background: #4c8dff;display: inline;width:450px;font-size: 14px;' +
@@ -160,14 +160,14 @@ export default defineComponent({
 
     const myCallbacks = ref({
       onPreviousStep(){
-        curStepVal.value -=1;
+        curStepVal.value -= 1;
         loadStyle();
       },
       onNextStep(){
-        curStepVal.value +=1;
+        curStepVal.value += 1;
         loadStyle();
       },onStop:async function(){
-        curStepVal.value =1;
+        curStepVal.value = 1;
         showOverlay.value = false;
         const $input = document.getElementById('keyName');
         $input?.focus();
@@ -223,10 +223,10 @@ export default defineComponent({
           const div = $divs[i];
           if(curStepVal.value==3){
             div.setAttribute("style","background-color:#4c8dff;color:white;height:30px;width:100%;" +
-              "position: relative;top:-202px;padding-top:4px;");
+              "position: relative;top:-201px;padding-top:4px;");
           }else{
             div.setAttribute("style","background-color:#4c8dff;color:white;height:30px;width:100%;" +
-              "position: relative;top:-2px;padding-top:4px;");
+              "position: relative;top:-1px;padding-top:4px;");
           }
         }
         const $buttons = document.getElementsByClassName("v-step__button");
@@ -289,20 +289,20 @@ export default defineComponent({
     };
   },
   mounted(){
-    const internalInstance = getCurrentInstance();
-    this.curTour = internalInstance?.appContext.config.globalProperties.$tours;
-    if(this.curTour && this.curTour['myTour'] && this.formState.showMoreQuery){
-      const localData = localStorage.getItem('myTourShow');
+    this.curTour = getCurrentInstance()?.appContext.config.globalProperties.$tours;
+    if(this.curTour && this.curTour['queryTour'] && this.formState.showMoreQuery){
+      const localData = localStorage.getItem('queryTourShow');
       const curTour = localData?JSON.parse(localData):null;
       if(curTour==null||!curTour.ifShowed){
-        (this.curTour['myTour'] as any).start();
+        (this.curTour['queryTour'] as any).start();
         this.showOverlay = true;
         const curLocalData = JSON.stringify({ifShowed:true});
-        localStorage.setItem('myTourShow',curLocalData);
+        localStorage.setItem('queryTourShow',curLocalData);
       }
     }
 
-  },beforeMount() {
+  },
+  beforeMount() {
     this.loadStyle();
   }
 });

vue/src/views/wellinfo/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <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 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-tree" v-if="showTree" data-v-step="1"
          :style="showOverlay&&curStepVal==1?'z-index:1000;background:white;':''">
       <div class="query-index-tree-search">
@@ -46,7 +46,7 @@
     <div class="query-index-close" v-else>
       <DoubleRightOutlined @click="showTree=true;colspan=8;"/>
     </div>
-    <v-tour name="testTour" style="z-index: 1000;" :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
+    <v-tour name="wellInfoTour" style="z-index: 1000;" :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
 
     <div class="query-index-content" >
       <div class="query-index-form" >
@@ -85,13 +85,13 @@
               </a-form-item>
             </a-col>
             <a-col :span="6" :style="showOverlay && curStepVal==2?'z-index:1000;background:white;display:inline-block;width:150px;height:32px;position:relative;':'display:inline-block;width:450px;height:32px;'">
-                <MenuOutlined @click="changeQuery(true)" v-if="!showQuery" data-v-step="2"  />
-                <LineOutlined @click="changeQuery(false)" v-else/>
-                <a-button type="primary" html-type="submit" @click="onQuery" style="margin-left: 10px;">查询</a-button>
-                <a-button html-type="submit"
-                          @click="() => {resetFields();formState.ref_date=new Date(); onQuery()}"
-                          style="margin-left: 10px;">重置
-                </a-button>
+              <MenuOutlined @click="changeQuery(true)" v-if="!showQuery" data-v-step="2"  />
+              <LineOutlined @click="changeQuery(false)" v-else/>
+              <a-button type="primary" html-type="submit" @click="onQuery" style="margin-left: 10px;">查询</a-button>
+              <a-button html-type="submit"
+                        @click="() => {resetFields();formState.ref_date=new Date(); onQuery()}"
+                        style="margin-left: 10px;">重置
+              </a-button>
             </a-col>
           </a-row>
           <a-row :gutter="24" class="query-index-row" v-if="showQuery">
@@ -375,7 +375,7 @@ export default defineComponent({
   components: {ChartCell, ChartMap, filePreview},
   setup() {
 
-    const curTour = ref(null);
+    const curTour = ref({});
     const route = useRoute();
     const expand = ref(false);
     const formRef = ref<FormInstance>();
@@ -473,7 +473,7 @@ export default defineComponent({
         loadStyle();
       },onStop:async function(){
         showOverlay.value = false;
-        curStepVal.value =1;
+        curStepVal.value = 1;
         const $input = document.getElementById('wellName');
         $input?.focus();
       }
@@ -496,7 +496,7 @@ export default defineComponent({
         for(let i=0;i < $buttons.length;i++) {
           const button = $buttons[i];
           button.setAttribute("style","border:1px solid white;margin:0 10px 0 10px;" +
-                              "padding:0 4px 0 4px;border-radius:5px;");
+            "padding:0 4px 0 4px;border-radius:5px;");
         }
       },1);
     }
@@ -955,29 +955,29 @@ export default defineComponent({
       curStepVal,steps,myOptions,curTour,showOverlay,myCallbacks,loadStyle,changeTree,changeQuery
     };
 
-  },beforeMount() {
-    this.loadStyle();
   },
   mounted(){
-    const internalInstance = getCurrentInstance();
-    this.curTour = internalInstance?.appContext.config.globalProperties.$tours;
-    if(this.curTour && this.curTour['testTour']){
-      const localData = localStorage.getItem('testTourShow');
+    this.curTour = getCurrentInstance()?.appContext.config.globalProperties.$tours;
+    console.log("tour2",this.curTour);
+    if(this.curTour && this.curTour['wellInfoTour']){
+      const localData = localStorage.getItem('wellInfoTourShow');
       const curTour = localData?JSON.parse(localData):null;
       if(curTour==null||!curTour.ifShowed){
         this.showOverlay = true;
-        (this.curTour['testTour'] as any).start();
+        (this.curTour['wellInfoTour'] as any).start();
         const curLocalData = JSON.stringify({ifShowed:true});
-        localStorage.setItem('testTourShow',curLocalData);
+        localStorage.setItem('wellInfoTourShow',curLocalData);
       }
     }
 
   },
+  beforeMount() {
+    this.loadStyle();
+  },
   created() {
     this.getSettingColumns();
     //this.loadData();
-  }
-  ,
+  },
   activated() {
   }
 });