样式调整

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

@@ -106,7 +106,8 @@ export default defineComponent({
         params: {
           placement: 'right'
         }
-      }, {
+      },
+      {
         target: '[data-v-step="2"]',
         header: {
           title: '<div style="height: 0;border-top: 12px solid transparent; border-bottom: 15px solid transparent;' +
@@ -122,7 +123,8 @@ export default defineComponent({
         params: {
           placement: 'right'
         }
-      }, {
+      },
+      {
         target: '[data-v-step="3"]',
         header: {
           title: '<div style="height: 0;border-top: 12px solid transparent; border-bottom: 15px solid transparent;' +
@@ -167,6 +169,9 @@ export default defineComponent({
     const showOverlay = ref<boolean>(false);
 
     const myCallbacks = ref({
+      onStart(){
+        loadStyle();
+      },
       onPreviousStep() {
         curStepVal.value -= 1;
         loadStyle();
@@ -241,7 +246,7 @@ export default defineComponent({
           const button = $buttons[i];
           button.setAttribute("style", "border:1px solid white;margin:0 10px 0 20px;padding:0 4px 0 4px;border-radius:5px;");
         }
-      }, 1);
+      }, 10);
     }
 
     const formRef = ref<FormInstance>();
@@ -290,10 +295,14 @@ export default defineComponent({
       emit('query', queryObject);
     }
     const showHelp = () => {
-      curTour.value = getCurrentInstance()?.appContext.config.globalProperties.$tours;
-      if (curTour.value && curTour.value['queryTour'] && formState.value.showMoreQuery) {
-        (curTour.value['queryTour'] as any).start();
-        showOverlay.value = true;
+      if(!formState.value.showMoreQuery){
+        message.warn('请先展开更多查询再进行操作！');
+        return false;
+      }
+      if (curTour.value && curTour.value['queryTour'] ) {
+          (curTour.value['queryTour'] as any).start();
+          loadStyle();
+          showOverlay.value = true;
       }
     }
     return {
@@ -313,7 +322,6 @@ export default defineComponent({
         localStorage.setItem('queryTourShow', curLocalData);
       }
     }
-
   },
   beforeMount() {
     this.loadStyle();

vue/src/views/wellinfo/index.vue

@@ -92,6 +92,8 @@
                         @click="() => {resetFields();formState.ref_date=new Date(); onQuery()}"
                         style="margin-left: 10px;">重置
               </a-button>
+              <QuestionCircleOutlined title="查看帮助" @click="showHelp"
+                                      :style="{fontSize: '20px',display:'contents',cursor:'pointer'}"/>
             </a-col>
           </a-row>
           <a-row :gutter="24" class="query-index-row" v-if="showQuery">
@@ -399,7 +401,7 @@ export default defineComponent({
       {
         target:'[data-v-step="1"]',
         header:{
-          title:'<div class="leftTriangle" style="position:absolute;right:400px;top:15px;"></div>' +
+          title:'<div class="leftTriangle" style="position:absolute;right:28.5em;top:1.5em;"></div>' +
                 '<div class="tipsTitle">引导1/5:</div>'
         },
         content:'<div class="tipsContent">可以切换目录查询</div>',
@@ -409,17 +411,17 @@ export default defineComponent({
       },{
         target:'[data-v-step="2"]',
         header:{
-          title:'<div class="rightTriangle" style="position:absolute;left:349px;top:15px;"></div>' +
-                '<div class="tipsTitle" style="position:relative;left:-50px;">引导2/5:</div>',
+          title:'<div class="rightTriangle" style="position:absolute;left:23.5em;top:1em;"></div>' +
+                '<div class="tipsTitle" style="position:relative;left:-4.7em;">引导2/5:</div>',
         },
-        content:'<div class="tipsContent" style="position:relative;left:-50px;">点击"☰"按钮展开更多查询</div>',
+        content:'<div class="tipsContent" style="position:relative;left:-5em;">点击"☰"按钮展开更多查询</div>',
         params:{
           placement:'left'
         }
       },{
         target:'[data-v-step="3"]',
         header:{
-          title:'<div class="rightTriangle" style="position:absolute;left:399px;top:15px;"></div>' +
+          title:'<div class="rightTriangle" style="position:absolute;left:28.5em;top:1.5em;"></div>' +
                 '<div class="tipsTitle">引导3/5:</div>',
         },
         content:'<div class="tipsContent">切换不同视图，也可勾选需要显示的列</div>',
@@ -429,17 +431,17 @@ export default defineComponent({
       },{
         target:'[data-v-step="4"]',
         header:{
-          title:'<div class="topTriangle" style="position:absolute;top:-29px;left:180px;"></div>' +
+          title:'<div class="topTriangle" style="position:absolute;top:-2.5em;left:13em;"></div>' +
                 '<div class="tipsTitle">引导4/5:</div>'
         },
-        content:'<div class="tipsContent">可移动表格数据列的顺序</div>',
+        content:'<div class="tipsContent" >可移动表格数据列的顺序</div>',
         params:{
           placement:'bottom'
         }
       },{
         target:'[data-v-step="5"]',
         header:{
-          title:'<div class="topTriangle" style="position:absolute;top:-34px;left:180px;"></div>' +
+          title:'<div class="topTriangle" style="position:absolute;top:-2.5em;left:13em;"></div>' +
                 '<div class="tipsTitle">引导5/5:</div>'
         },
         content:'<div class="tipsContent">地图显示当前列表的井所在位置</div>',
@@ -464,6 +466,9 @@ export default defineComponent({
     const curStepVal = ref(1);
 
     const myCallbacks = ref({
+      onStart(){
+        loadStyle();
+      },
       onPreviousStep(){
         curStepVal.value -= 1;
         loadStyle();
@@ -471,7 +476,8 @@ export default defineComponent({
       onNextStep(){
         curStepVal.value += 1;
         loadStyle();
-      },onStop:async function(){
+      },
+      onStop:async function(){
         showOverlay.value = false;
         curStepVal.value = 1;
         const $input = document.getElementById('wellName');
@@ -485,11 +491,11 @@ export default defineComponent({
         for(let i=0;i < $divs.length;i++) {
           const div = $divs[i];
           if(curStepVal.value ==2){
-            div.setAttribute("style","background-color:#4c8dff;color:white;height:30px;width:100%;" +
-              "position: relative;top:-2px;left:-50px;padding-top:4px;border-radius:0 0 10px 10px;");
+            div.setAttribute("style","background-color:#4c8dff;color:white;height:3em;width:100%;" +
+              "position: relative;top:-.2em;left:-5em;padding-top:0.4em;border-radius:0 0 10px 10px;");
           }else{
-            div.setAttribute("style","background-color:#4c8dff;color:white;height:30px;width:100%;" +
-              "position: relative;top:-2px;padding-top:4px;border-radius:0 0 10px 10px;");
+            div.setAttribute("style","background-color:#4c8dff;color:white;height:3em;width:100%;" +
+              "position: relative;top:-0.2em;padding-top:0.4em;border-radius:0 0 10px 10px;");
           }
         }
         const $buttons = document.getElementsByClassName("v-step__button");
@@ -498,7 +504,7 @@ export default defineComponent({
           button.setAttribute("style","border:1px solid white;margin:0 10px 0 10px;" +
             "padding:0 4px 0 4px;border-radius:5px;");
         }
-      },1);
+      },10);
     }
 
     function changeTree(){
@@ -897,6 +903,14 @@ export default defineComponent({
 
     const labelCol = {style: {width: '100px'}};
 
+    const showHelp = () => {
+      if (curTour.value && curTour.value['wellInfoTour'] ) {
+        (curTour.value['wellInfoTour'] as any).start();
+        loadStyle();
+        showOverlay.value = true;
+      }
+    }
+
     return {
       route,
       selectedRowKeys,
@@ -952,7 +966,7 @@ export default defineComponent({
       handleResizeColumn: (w, col) => {
         col.width = w;
       },
-      curStepVal,steps,myOptions,curTour,showOverlay,myCallbacks,loadStyle,changeTree,changeQuery
+      curStepVal,steps,myOptions,curTour,showOverlay,myCallbacks,loadStyle,changeTree,changeQuery,showHelp
     };
 
   },