引导

.idea/jarRepositories.xml

@@ -14,12 +14,12 @@
     <remote-repository>
       <option name="id" value="central" />
       <option name="name" value="Central Repository" />
-      <option name="url" value="http://maven.aliyun.com/nexus/content/groups/public/" />
+      <option name="url" value="https://repo.maven.apache.org/maven2" />
     </remote-repository>
     <remote-repository>
       <option name="id" value="central" />
       <option name="name" value="Central Repository" />
-      <option name="url" value="https://repo.maven.apache.org/maven2" />
+      <option name="url" value="http://maven.aliyun.com/nexus/content/groups/public/" />
     </remote-repository>
     <remote-repository>
       <option name="id" value="central" />

vue/package.json

@@ -63,11 +63,13 @@
     "sortablejs": "~1.15.0",
     "thememirror": "^2.0.1",
     "uuid": "^9.0.1",
+    "v3-tour": "^3.1.2",
     "vue": "3.2.47",
     "vue-codemirror": "^6.1.1",
     "vue-demi": "^0.14.6",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.1.6",
+    "vue-tour": "^2.0.0",
     "vue-types": "~4.2.1",
     "xlsx": "~0.18.5"
   },

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

@@ -1,60 +1,62 @@
 <template>
   <div style="margin: auto;width: 500px;">
-    <a-space>
-      <QueryHistoryComplete v-model:value="formState.defaultKeyString" style="width: 520px"></QueryHistoryComplete>
+    <a-space data-v-step="1">
+      <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>
-  <a-divider orientation="center" @click="formState.showMoreQuery=!formState.showMoreQuery">
-    <template v-if="!formState.showMoreQuery">
-      更多查询
-      <DoubleRightOutlined rotate="90"/>
-    </template>
-    <template v-else>
-      收 起
-      <DoubleLeftOutlined rotate="90"/>
-    </template>
-  </a-divider>
+  <v-tour name="myTour" :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" />
+      </template>
+      <template v-else>
+        收 起
+        <DoubleLeftOutlined rotate="90"/>
+      </template>
+    </a-divider>
   <div style="margin: auto;width: 500px;" v-show="formState.showMoreQuery">
-    <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>
-    <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>
-  </div>
+      <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>
+      <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>
+    </div>
 </template>
 
 <script lang="ts">
-import {defineComponent, ref, watch} from 'vue';
+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 QueryHistoryComplete from '@/components/basic/querylog/history-complete.vue';
+
 
 export default defineComponent({
   name: 'query-criteria',
@@ -67,6 +69,86 @@ export default defineComponent({
   ],
   setup(props, {emit}) {
     console.log(props);
+    const curTour = ref(null);
+    const steps = reactive([
+      {
+        target:'[data-v-step="1"]',
+        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/3</span></div>'
+        },
+        content:'<div style="color: white;background: #4c8dff;display: inline;width:405px;font-size: 12px;' +
+                'border-radius:0 0 10px 10px;position: absolute;top:48px;padding:0px 15px 0px 15px;">' +
+                '综合搜索栏，将检索功能浓缩至"一框"中。可直接输入多种类型的' +
+                '关键词如井号、井名、生产作业名词到检索框中进行搜索;同时支持输入运算符“大于""等于""少于”“不等于”进行检索词的组合运算<br/>' +
+                '<br/>点击“更多查询"可查看更多检索条件</div>',
+        params:{
+          placement:'right'
+        }
+      },{
+        target:'[data-v-step="2"]',
+        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/3</span></div>',
+        },
+        content:'<div style="color: white;background: #4c8dff;display: inline;width:405px;font-size: 12px;' +
+          'border-radius:0 0 10px 10px;position: absolute;top:48px;padding:5px 15px 0px 15px;height:40px;">' +
+          '可选择控件条件进行查询范围的缩窄<br/></div>',
+        params:{
+          placement:'right'
+        }
+      },{
+        target:'[data-v-step="3"]',
+        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: 205px;">3/3</span></div>',
+        },
+        content:'<div style="color: white;background: #4c8dff;display: inline;width:405px;font-size: 12px;' +
+          'border-radius:0 0 10px 10px;position: absolute;top:48px;padding:5px 15px 0px 15px;">' +
+          '1.首先须在下拉框中选择“井号"或“井名"的类别，输入想搜索的井<br/>' +
+          '2.再从下拉框中选择其他检索项如“产油量"等，输入该检索项具体<br/>' +
+          '要查询的值。例如想查看并号为001的产油量等于100的查询结果。<br/>' +
+          '3.支持自由选择检索项间的逻辑关系:<br/>' +
+          'AND(与)、OR(或)、NOT(非)<br/><br/>' +
+          '举例:<br/>' +
+          '1) 检索井名包含12和产油量为100的结果<br/>' +
+          '<span style="padding-left: 20px;">检索式: 井名 12 AND 产油量100</span><br/>' +
+          '2) 检索井名包含12但不查地形区为益地的结果<br/>' +
+          '<span style="padding-left: 20px;">检索式: 井名 12 NOT 地形区 盆地</span><br/>' +
+          '3) 检索井名为12-12或12-44的31<br/>' +
+          '<span style="padding-left: 20px;">检索式: 井名 12-12 0R 井名 12-44</span></div>',
+        params:{
+          placement:'right'
+        }
+      }
+    ]);
+    const myOptions = reactive({
+      dialogVisible:false,
+      useKeyboardNavigation:false,
+      labels:{
+        buttonSkip:' 跳过引导 ',
+        buttonPrevious:' 上一步 ',
+        buttonNext:'下一步 ',
+        buttonStop:' 明白了 '
+      }
+    });
+    const showOverlay = ref(true);
+
+    const myCallbacks = ref({
+      onPreviousStep(){
+        showOverlay.value = true;
+        loadStyle();
+      },
+      onNextStep(){
+        showOverlay.value = true;
+        loadStyle();
+      },onStop:async function(){
+        showOverlay.value = false;
+      }
+    });
 
     const limiters = ref([{
       fields: '',
@@ -109,8 +191,23 @@ export default defineComponent({
       }, {}
     );
 
-    const formRef = ref<FormInstance>();
+    function loadStyle(){
+      setTimeout(()=>{
+        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:-5px;padding-top:4px;");
+        }
+        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;padding:0 4px 0 4px;border-radius:5px;");
+        }
+      },1);
+    }
 
+    const formRef = ref<FormInstance>();
 
     const operTexts = [
       {value: 'AND', label: 'AND'},
@@ -150,13 +247,33 @@ export default defineComponent({
     }
 
     return {
-      formState, limiters, operTexts, fieldList, addQuery, onDelete, getQuery, formRef
+      formState, limiters, operTexts, fieldList, addQuery, onDelete, getQuery, formRef,
+      steps,myOptions,curTour,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();
+    }
+
+  },beforeMount() {
+    this.loadStyle();
   }
 });
 </script>
 
 <style lang="less" scoped>
+#mask{
+  width:100%;
+  height:100%;
+  position: fixed;
+  background: gray;
+  opacity: 0.2;
+  z-index: 100;
+}
+
 .ant-row {
 
   .ant-col {

vue/src/main.ts

@@ -3,6 +3,7 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
 import { createApp } from 'vue';
+import VueTour from 'v3-tour';
 // @ts-ignore
 import App from './App.vue';
 import { setupRouter } from './router';
@@ -37,6 +38,8 @@ async function setupApp() {
   // 挂载路由
   await setupRouter(app);
 
+  require('vue-tour/dist/vue-tour.css');
+  app.use(VueTour);
   app.mount('#app');
 }
 

vue/src/views/esdomain/index.vue

@@ -35,12 +35,8 @@ export default defineComponent({
     }
 
     return {
-      router, route, formRef, onQuery,
+      router, route, formRef, onQuery
     };
-  },
-  created() {
-  },
-  activated() {
   }
 });
 </script>

vue/src/views/wellinfo/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="query-index">
-    <div class="query-index-tree" v-if="showTree">
+    <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%;">
-          <a-tab-pane key="1" tab="组织架构目录">
+          <a-tab-pane key="1" tab="组织架构目录" >
           </a-tab-pane>
           <a-tab-pane key="2" tab="地质单元目录" forceRender="true">
           </a-tab-pane>
@@ -40,11 +40,12 @@
           </template>
         </a-tree>
       </div>
-    </div>
+    </div >
     <div class="query-index-close" v-else>
       <DoubleRightOutlined @click="showTree=true;colspan=8;"/>
     </div>
-    <div class="query-index-content">
+    <v-tour name="testTour" style="z-index: 100;" :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
+    <div class="query-index-content" style="z-index: 1;">
       <div class="query-index-form">
         <a-form ref="formRef" name="fromQuery"
                 class="ant-advanced-search-form"
@@ -80,8 +81,8 @@
                 </a-tree-select>
               </a-form-item>
             </a-col>
-            <a-col :span="6" style="text-align: left">
-              <MenuOutlined @click="showQuery=true" v-if="!showQuery"/>
+            <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"
@@ -143,7 +144,7 @@
               </a-form-item>
             </a-col>
           </a-row>
-          <a-row class="edit-operation">
+          <a-row class="edit-operation" style="width: 500px;float:right;"  data-v-step="3">
             <a-col :span="24" style="text-align: right">
               <a-checkbox-group v-model:value="showColumnType" @change="onCheckboxChange">
                 <a-row>
@@ -172,9 +173,9 @@
           </a-row>
         </a-form>
       </div>
-      <div style="flex-grow: 1;overflow: auto;height: 500px;">
-        <a-spin :spinning="loading">
-          <div class="query-index-table" v-if="viewModel=='list'">
+      <div style="flex-grow: 1;overflow: auto;height: 500px;" >
+        <a-spin :spinning="loading"  data-v-step="4">
+          <div class="query-index-table" 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"
                      bordered>
@@ -206,7 +207,7 @@
               </template>
             </a-table>
           </div>
-          <div class="query-index-table" v-else>
+          <div class="query-index-table" v-else  >
             <a-row :gutter="[24,8]">
               <a-col :span="colspan" v-for="item in data">
                 <a-card :title="'井名：'+item.well_common_name" class="ant-card-index" bodyStyle="padding: 10px;">
@@ -214,7 +215,7 @@
                     <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>
@@ -300,7 +301,7 @@
                         @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">
+        <div style="width:100%;height: 500px;margin-top:15px" data-v-step="5">
           <ChartMap :datas="data" :isSearch="(true)"></ChartMap>
         </div>
       </div>
@@ -351,7 +352,7 @@
 </template>
 
 <script lang="ts">
-import {ref, defineComponent, computed, watch, reactive} from 'vue';
+import {ref, defineComponent, computed, watch, reactive, getCurrentInstance} from 'vue';
 import type {FormInstance} from 'ant-design-vue';
 import {useRoute} from 'vue-router';
 import {get, postData} from "@/api/common";
@@ -371,6 +372,7 @@ export default defineComponent({
   components: {ChartCell, ChartMap, filePreview},
   setup() {
 
+    const curTour = ref(null);
     const route = useRoute();
     const expand = ref(false);
     const formRef = ref<FormInstance>();
@@ -389,6 +391,108 @@ export default defineComponent({
     const docList = ref<any>([]);
     const wellTypeList = ref([{label: "直井", value: "直井"}, {label: "定向井", value: "定向井"}, {label: "分支井", value: "分支井"}]);
     const wellPurposeList = ref([{label: "探井", value: "探井"}, {label: "开发井", value: "开发井"}, {label: "水井", value: "水井"}]);
+
+    const steps = reactive([
+      {
+        target:'[data-v-step="1"]',
+        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>'
+        },
+        content:'<div></div>',
+        params:{
+          placement:'right'
+        }
+      },{
+        target:'[data-v-step="2"]',
+        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>',
+        },
+        content:'<div></div>',
+        params:{
+          placement:'top'
+        }
+      },{
+        target:'[data-v-step="3"]',
+        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>',
+        },
+        content:'<div></div>',
+        params:{
+          placement:'left'
+        }
+      },{
+        target:'[data-v-step="4"]',
+        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>'
+        },
+        content:'<div></div>',
+        params:{
+          placement:'bottom'
+        }
+      },{
+        target:'[data-v-step="5"]',
+        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>'
+        },
+        content:'<div></div>',
+        params:{
+          placement:'bottom'
+        }
+      }
+    ]);
+
+    const myOptions = reactive({
+      dialogVisible:false,
+      useKeyboardNavigation:false,
+      labels:{
+        buttonSkip:' 跳过引导 ',
+        buttonPrevious:' 上一步 ',
+        buttonNext:'下一步 ',
+        buttonStop:' 明白了 '
+      }
+    });
+    const showOverlay = ref(true);
+
+    const myCallbacks = ref({
+      onPreviousStep(){
+        showOverlay.value = true;
+        loadStyle();
+      },
+      onNextStep(){
+        showOverlay.value = true;
+        loadStyle();
+      },onStop:async function(){
+        showOverlay.value = false;
+      }
+    });
+
+    function loadStyle(){
+      setTimeout(()=>{
+        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;border-radius:0 0 10px 10px;");
+        }
+        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;" +
+                              "padding:0 4px 0 4px;border-radius:5px;");
+        }
+      },1);
+    }
+
     const replaceFields = {
       children: 'children',
       title: 'label',
@@ -822,14 +926,26 @@ export default defineComponent({
       onAddCart,
       handleResizeColumn: (w, col) => {
         col.width = w;
-      }
+      },
+      steps,myOptions,curTour,showOverlay,loadStyle,myCallbacks
     };
+
+  },beforeMount() {
+    this.loadStyle();
+  },
+  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();
+    }
+
   },
   created() {
     this.getSettingColumns();
     //this.loadData();
-  }
-  ,
+  },
   activated() {
   }
 });