引导添加高亮显示

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

@@ -1,14 +1,14 @@
 <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 style="margin:auto;width: 600px;" data-v-step="1">
+    <div data-v-step="1" :style="showOverlay && curStepVal==1?'margin:auto;width:660px;padding:10px;  z-index:1000;display:inline-block;height:50px;background:white;':'margin:auto;width: 600px;padding:10px;'" >
       <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>
+    <v-tour name="myTour" 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" >
         更多查询
@@ -19,45 +19,49 @@
         <DoubleLeftOutlined rotate="90"/>
       </template>
     </a-divider>
-    <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">
-          <div class="col-title">组织单位:</div>
-          <a-input v-model:value="formState.org_name_a1" style="width: 400px"></a-input>
-        </a-col>
-        <a-col :span="24">
-          <div class="col-title">作业区/项目部:</div>
-          <a-input v-model:value="formState.bz_dwmc" style="width: 400px"></a-input>
-        </a-col>
-        <a-col :span="24">
-          <div class="col-title">井名:</div>
-          <a-input v-model:value="formState.well_common_name" style="width: 400px"></a-input>
-        </a-col>
-        <a-col :span="24">
-          <div class="col-title">地层名称:</div>
-          <a-input v-model:value="formState.formation_name" style="width: 400px"></a-input>
-        </a-col>
-      </a-row>
-      <a-divider orientation="left" data-v-step="3"><b style="color:#4E61D0">2.输入检索内容条件</b></a-divider>
+    <div data-v-step="2" v-show="formState.showMoreQuery"
+         :style="showOverlay && curStepVal==2?'margin:auto;width:500px;padding:10px 10px 10px 50px;  z-index:1000;display:inline-block;height:390px;background:white;':'margin:auto;width: 500px;padding:10px 10px 10px 50px;'" >
+        <a-divider orientation="left" ><b style="color:#4E61D0">1.输入检索控制条件</b></a-divider>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <div class="col-title">组织单位:</div>
+            <a-input v-model:value="formState.org_name_a1" style="width: 400px"></a-input>
+          </a-col>
+          <a-col :span="24">
+            <div class="col-title">作业区/项目部:</div>
+            <a-input v-model:value="formState.bz_dwmc" style="width: 400px"></a-input>
+          </a-col>
+          <a-col :span="24">
+            <div class="col-title">井名:</div>
+            <a-input v-model:value="formState.well_common_name" style="width: 400px"></a-input>
+          </a-col>
+          <a-col :span="24">
+            <div class="col-title">地层名称:</div>
+            <a-input v-model:value="formState.formation_name" style="width: 400px"></a-input>
+          </a-col>
+        </a-row>
+    </div>
+    <div data-v-step="3" v-show="formState.showMoreQuery"
+         :style="showOverlay && curStepVal==3?'margin:auto;width:500px;padding:10px;  z-index:1000;display:inline-block;min-height:200px;background:white;':'margin:auto;width: 500px;padding:10px;'" >
+      <a-divider orientation="left"><b style="color:#4E61D0">2.输入检索内容条件</b></a-divider>
       <a-row :gutter="24">
-        <a-col :span="24" class="query-row" v-for="(it,index) in limiters">
-          <div class="col-title">
-            <a-select v-model:value="it.relation" :options="operTexts" class="operTexts"></a-select>
-          </div>
-          <a-select v-model:value="it.fields" :options="fieldList" class="operTexts"></a-select>
-          <a-input v-model:value="it.value" style="width: 285px"></a-input>
-          <img src="~@/assets/images/add.png" @click="addQuery" v-if="index==0"/>
-          <img src="~@/assets/images/sub.png" @click="onDelete(index)" v-if="index>0"/>
-        </a-col>
-      </a-row>
+      <a-col :span="24" class="query-row" v-for="(it,index) in limiters">
+        <div class="col-title">
+          <a-select v-model:value="it.relation" :options="operTexts" class="operTexts"></a-select>
+        </div>
+        <a-select v-model:value="it.fields" :options="fieldList" class="operTexts"></a-select>
+        <a-input v-model:value="it.value" style="width: 285px"></a-input>
+        <img src="~@/assets/images/add.png" @click="addQuery" v-if="index==0"/>
+        <img src="~@/assets/images/sub.png" @click="onDelete(index)" v-if="index>0"/>
+      </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 {type FormInstance, message, type SelectProps} from "ant-design-vue";
 import QueryHistoryComplete from '@/components/basic/querylog/history-complete.vue';
 import {show} from "dom7";
 
@@ -115,13 +119,14 @@ 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:450px;top:11px;"></div>' +
+                '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;">' +
+                'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;' +
+                'position:relative;bottom:200px;">' +
                 '| 多个检索项组合查询<span style="padding-left: 250px;">3/3</span></div>',
         },
         content:'<div style="color: white;background: #4c8dff;display: inline;width:450px;font-size: 14px;' +
-                'border-radius:0 0 10px 10px;position: absolute;top:48px;padding:5px 15px 0px 15px;">' +
+                'border-radius:0 0 10px 10px;position: absolute;bottom:-89px;padding:5px 15px 0px 15px;">' +
                 '1.首先须在下拉框中选择“井号"或“井名"的类别，输入想搜索的井<br/>' +
                 '2.再从下拉框中选择其他检索项如“产油量"等，输入该检索项具体<br/>' +
                 '要查询的值。例如想查看并号为001的产油量等于100的查询结果。<br/>' +
@@ -149,15 +154,20 @@ export default defineComponent({
         buttonStop:' 明白了 '
       }
     });
-    const showOverlay = ref<boolean>(true);
+
+    const curStepVal = ref(1);
+    const showOverlay = ref<boolean>(false);
 
     const myCallbacks = ref({
       onPreviousStep(){
+        curStepVal.value -=1;
         loadStyle();
       },
       onNextStep(){
+        curStepVal.value +=1;
         loadStyle();
       },onStop:async function(){
+        curStepVal.value =1;
         showOverlay.value = false;
         const $input = document.getElementById('keyName');
         $input?.focus();
@@ -211,8 +221,13 @@ export default defineComponent({
         const $divs = document.getElementsByClassName("v-step__buttons");
         for(let i=0;i < $divs.length;i++) {
           const div = $divs[i];
-          div.setAttribute("style","background-color:#4c8dff;color:white;height:30px;width:100%;" +
-            "position: relative;top:-2px;padding-top:4px;");
+          if(curStepVal.value==3){
+            div.setAttribute("style","background-color:#4c8dff;color:white;height:30px;width:100%;" +
+              "position: relative;top:-202px;padding-top:4px;");
+          }else{
+            div.setAttribute("style","background-color:#4c8dff;color:white;height:30px;width:100%;" +
+              "position: relative;top:-2px;padding-top:4px;");
+          }
         }
         const $buttons = document.getElementsByClassName("v-step__button");
         for(let i=0;i < $buttons.length;i++) {
@@ -245,6 +260,13 @@ export default defineComponent({
     }
 
     function getQuery() {
+
+      if(showOverlay.value){
+        message.warn('请退出引导状态再进行操作！');
+        return false;
+      }
+      showOverlay.value = false;
+
       //组装查询条件
       let queryObject = {
         queryList: [] as any,
@@ -263,14 +285,21 @@ export default defineComponent({
 
     return {
       formState, limiters, operTexts, fieldList, addQuery, onDelete, getQuery, formRef,
-      steps,myOptions,curTour,showOverlay,loadStyle,myCallbacks
+      steps,myOptions,curTour,curStepVal,showOverlay,loadStyle,myCallbacks
     };
   },
   mounted(){
     const internalInstance = getCurrentInstance();
     this.curTour = internalInstance?.appContext.config.globalProperties.$tours;
     if(this.curTour && this.curTour['myTour'] && this.formState.showMoreQuery){
-      (this.curTour['myTour'] as any).start();
+      const localData = localStorage.getItem('myTourShow');
+      const curTour = localData?JSON.parse(localData):null;
+      if(curTour==null||!curTour.ifShowed){
+        (this.curTour['myTour'] as any).start();
+        this.showOverlay = true;
+        const curLocalData = JSON.stringify({ifShowed:true});
+        localStorage.setItem('myTourShow',curLocalData);
+      }
     }
 
   },beforeMount() {

vue/src/views/wellinfo/index.vue

@@ -1,7 +1,8 @@
 <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 class="query-index-tree" v-if="showTree" data-v-step="1">
+    <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">
         <a-tabs v-model:activeKey="activeTab" @change="tabChange" style="width:97%;">
           <a-tab-pane key="1" tab="组织架构目录" >
@@ -9,7 +10,7 @@
           <a-tab-pane key="2" tab="地质单元目录" forceRender="true">
           </a-tab-pane>
         </a-tabs>
-        <DoubleLeftOutlined @click="showTree=false;colspan=6;"/>
+        <DoubleLeftOutlined @click="changeTree()"/>
       </div>
       <div style="margin-top: -15px">
         <a-input-search
@@ -53,7 +54,7 @@
                 class="ant-advanced-search-form"
                 :label-col="labelCol"
                 :model="formState">
-          <a-row :gutter="24" class="query-index-row">
+          <a-row :gutter="24" class="query-index-row" >
             <a-col :span="6">
               <a-form-item name="well_common_name" label="井名:">
                 <a-input id="wellName" v-model:value="formState.well_common_name"/>
@@ -83,15 +84,14 @@
                 </a-tree-select>
               </a-form-item>
             </a-col>
-            <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>
-              <a-button html-type="submit"
-                        @click="() => {resetFields();formState.ref_date=new Date(); onQuery()}"
-                        style="margin-left: 10px;">
-                重置
-              </a-button>
+            <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>
             </a-col>
           </a-row>
           <a-row :gutter="24" class="query-index-row" v-if="showQuery">
@@ -146,8 +146,8 @@
               </a-form-item>
             </a-col>
           </a-row>
-          <a-row class="edit-operation" style="width:500px;float:right;"  data-v-step="3">
-            <a-col :span="24" style="text-align: right;" >
+          <a-row class="edit-operation" style="width:450px;float:right;"  data-v-step="3">
+            <a-col :span="24"  :style="showOverlay && curStepVal==3?'text-align: right;z-index:1000;background:white;':'text-align: right;'">
               <a-checkbox-group v-model:value="showColumnType" @change="onCheckboxChange">
                 <a-row>
                   <a-col :span="8">
@@ -175,7 +175,7 @@
           </a-row>
         </a-form>
       </div>
-      <div style="flex-grow: 1;overflow: auto;height: 500px;">
+      <div  :style="showOverlay&&curStepVal==4?'flex-grow: 1;overflow: auto;height:auto;z-index:999;background:white;':'flex-grow: 1;overflow: auto;height:auto;'">
         <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%' }"
@@ -230,8 +230,8 @@
                       <th>含水率：</th>
                       <td name="water_cut">
                         <span style="padding:2px 10px;" :class="getTdColor(item.water_cut)">{{
-                          item.water_cut
-                        }}</span>
+                            item.water_cut
+                          }}</span>
                       </td>
                     </tr>
                     <tr>
@@ -304,9 +304,9 @@
                         @change="(current)=>handleTableChange({ current: current,pageSize: pagination.pageSize })"
                         @showSizeChange="(current,pageSize)=>handleTableChange({ current: current,pageSize: pageSize })"/>
         </a-spin>
-        <div style="width:100%;height: 500px;margin-top:15px" >
-          <ChartMap :datas="data" :isSearch="(true)" data-v-step="5"></ChartMap>
-        </div>
+      </div>
+      <div :style="showOverlay&&curStepVal==5?'flex-grow: 1;overflow: auto;z-index:999;background:white;':'flex-grow: 1;overflow: auto;'" style="width:100%;height: 500px;" >
+        <ChartMap :datas="data" :isSearch="(true)" data-v-step="5"></ChartMap>
       </div>
     </div>
     <a-modal v-model:visible="isShowDoc" title="相关文档" width="800px" :footer="null" @onCancel="isShowDoc=false">
@@ -434,12 +434,12 @@ export default defineComponent({
         },
         content:'<div class="tipsContent">可移动表格数据列的顺序</div>',
         params:{
-          placement:'top'
+          placement:'bottom'
         }
       },{
         target:'[data-v-step="5"]',
         header:{
-          title:'<div class="topTriangle" style="position:absolute;top:-29px;left:180px;"></div>' +
+          title:'<div class="topTriangle" style="position:absolute;top:-34px;left:180px;"></div>' +
                 '<div class="tipsTitle">引导5/5:</div>'
         },
         content:'<div class="tipsContent">地图显示当前列表的井所在位置</div>',
@@ -459,22 +459,21 @@ export default defineComponent({
         buttonStop:' 明白了 '
       }
     });
-    const showOverlay = ref(true);
+    const showOverlay = ref(false);
 
-    const curStep = ref(1);
+    const curStepVal = ref(1);
 
     const myCallbacks = ref({
       onPreviousStep(){
-        showOverlay.value = true;
-        curStep.value -= 1;
+        curStepVal.value -= 1;
         loadStyle();
       },
       onNextStep(){
-        showOverlay.value = true;
-        curStep.value += 1;
+        curStepVal.value += 1;
         loadStyle();
       },onStop:async function(){
         showOverlay.value = false;
+        curStepVal.value =1;
         const $input = document.getElementById('wellName');
         $input?.focus();
       }
@@ -485,7 +484,7 @@ export default defineComponent({
         const $divs = document.getElementsByClassName("v-step__buttons");
         for(let i=0;i < $divs.length;i++) {
           const div = $divs[i];
-          if(curStep.value ==2){
+          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;");
           }else{
@@ -502,6 +501,23 @@ export default defineComponent({
       },1);
     }
 
+    function changeTree(){
+      if(showOverlay.value){
+        message.warn('请退出引导状态再进行操作！');
+        return false;
+      }
+      showTree.value = false;
+      colspan.value = 6;
+    }
+
+    function changeQuery(curVal:boolean){
+      if(showOverlay.value){
+        message.warn('请退出引导状态再进行操作！');
+        return false;
+      }
+      showQuery.value = curVal;
+    }
+
     const replaceFields = {
       children: 'children',
       title: 'label',
@@ -936,7 +952,7 @@ export default defineComponent({
       handleResizeColumn: (w, col) => {
         col.width = w;
       },
-      steps,myOptions,curTour,showOverlay,loadStyle,myCallbacks
+      curStepVal,steps,myOptions,curTour,showOverlay,myCallbacks,loadStyle,changeTree,changeQuery
     };
 
   },beforeMount() {
@@ -946,7 +962,14 @@ export default defineComponent({
     const internalInstance = getCurrentInstance();
     this.curTour = internalInstance?.appContext.config.globalProperties.$tours;
     if(this.curTour && this.curTour['testTour']){
-      (this.curTour['testTour'] as any).start();
+      const localData = localStorage.getItem('testTourShow');
+      const curTour = localData?JSON.parse(localData):null;
+      if(curTour==null||!curTour.ifShowed){
+        this.showOverlay = true;
+        (this.curTour['testTour'] as any).start();
+        const curLocalData = JSON.stringify({ifShowed:true});
+        localStorage.setItem('testTourShow',curLocalData);
+      }
     }
 
   },