引导添加三角符号

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

@@ -1,13 +1,13 @@
 <template>
-  <div style="margin: auto;width: 500px;">
-    <a-space data-v-step="1">
+  <div style="margin: auto;width: 600px;" data-v-step="1">
+    <a-space >
       <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-button @click="() => {formRef.resetFields();}" >重置</a-button>
     </a-space>
   </div>
-  <v-tour name="myTour" :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>
-  <a-divider orientation="center" @click="formState.showMoreQuery=!formState.showMoreQuery;">
+  <v-tour name="myTour" style="z-index: 100;"  :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" />
@@ -74,12 +74,15 @@ export default defineComponent({
       {
         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>'
+          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;' +
+                '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>'
         },
-        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;">' +
+        content:'<div style="display:inline-block;width:450px;font-size:14px;color: white;background: #4c8dff;' +
+                'border-radius:0 0 10px 10px;padding:5px 15px 0px 15px;position: absolute;top:55px;">' +
                 '综合搜索栏，将检索功能浓缩至"一框"中。可直接输入多种类型的' +
                 '关键词如井号、井名、生产作业名词到检索框中进行搜索;同时支持输入运算符“大于""等于""少于”“不等于”进行检索词的组合运算<br/>' +
                 '<br/>点击“更多查询"可查看更多检索条件</div>',
@@ -89,37 +92,43 @@ export default defineComponent({
       },{
         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>',
+          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;' +
+                'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
+                '| 检索控制条件<span style="padding-left: 295px;">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>',
+        content:'<div style="display:inline-block;width:450px;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:{
           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>',
+          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>' +
+                '<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;">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>',
+        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;">' +
+                '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'
         }
@@ -197,7 +206,7 @@ export default defineComponent({
         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;");
+            "position: relative;top:-2px;padding-top:4px;");
         }
         const $buttons = document.getElementsByClassName("v-step__button");
         for(let i=0;i < $buttons.length;i++) {
@@ -265,13 +274,22 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-#mask{
-  width:100%;
-  height:100%;
-  position: fixed;
-  background: gray;
-  opacity: 0.2;
-  z-index: 100;
+
+.leftTriangle{
+  height: 0;
+  border-top: 12px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-left: 15px solid transparent;
+  border-right: 12px solid #4c8dff;
+}
+
+.tips{
+  color: white;
+  background: #4c8dff;
+  display: inline-block;
+  font-size: 14px;
+  border-radius:0 0 10px 10px;
+  padding:5px 15px 0px 15px;
 }
 
 .ant-row {

vue/src/views/wellinfo/index.vue

@@ -146,7 +146,7 @@
             </a-col>
           </a-row>
           <a-row class="edit-operation" style="width:500px;float:right;"  data-v-step="3">
-            <a-col :span="24" >
+            <a-col :span="24" style="text-align: right;" >
               <a-checkbox-group v-model:value="showColumnType" @change="onCheckboxChange">
                 <a-row>
                   <a-col :span="8">
@@ -302,8 +302,8 @@
                         @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" data-v-step="5">
-          <ChartMap :datas="data" :isSearch="(true)"></ChartMap>
+        <div style="width:100%;height: 500px;margin-top:15px" >
+          <ChartMap :datas="data" :isSearch="(true)" data-v-step="5"></ChartMap>
         </div>
       </div>
     </div>
@@ -367,10 +367,11 @@ import {download} from "@/utils/downloadFile";
 import {columns, filterColumns, formState, getTdColor} from './table';
 import filePreview from '@/components/basic/file-preview/index.vue';
 import {numberToCurrencyNo} from "@/utils/common";
+import {LeftCircleOutlined,RightCircleOutlined} from '@ant-design/icons-vue';
 
 export default defineComponent({
   name: 'wellinfoindex',
-  components: {ChartCell, ChartMap, filePreview},
+  components: {ChartCell, ChartMap, filePreview,LeftCircleOutlined,RightCircleOutlined},
   setup() {
 
     const curTour = ref(null);
@@ -397,55 +398,50 @@ export default defineComponent({
       {
         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;">' +
-            '引导1/5:  <span style="padding-left: 20px;">可以切换目录查询 ← </span></div>'
+          title:'<div class="leftTriangle" style="position:absolute;right:400px;top:15px;"></div>' +
+                '<div class="tipsTitle">引导1/5:</div>'
         },
-        content:'<div></div>',
+        content:'<div class="tipsContent">可以切换目录查询</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;">' +
-            '引导2/5:  <span style="padding-left: 20px;">点击"☰"按钮展开更多查询 →</span></div>',
+          title:'<div class="rightTriangle" style="position:absolute;left:349px;top:15px;"></div>' +
+                '<div class="tipsTitle" style="position:relative;left:-50px;">引导2/5:</div>',
         },
-        content:'<div></div>',
+        content:'<div class="tipsContent" style="position:relative;left:-50px;">点击"☰"按钮展开更多查询</div>',
         params:{
           placement:'left'
         }
       },{
         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;">' +
-            '引导3/5: <span style="padding-left: 20px;">切换不同视图，也可勾选需要显示的列 →</span></div>',
+          title:'<div class="rightTriangle" style="position:absolute;left:399px;top:15px;"></div>' +
+                '<div class="tipsTitle">引导3/5:</div>',
         },
-        content:'<div></div>',
+        content:'<div class="tipsContent">切换不同视图，也可勾选需要显示的列</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;">' +
-            '引导4/5: <span style="padding-left: 20px;">可移动表格数据列的顺序 ↑</span></div>'
+          title:'<div class="topTriangle" style="position:absolute;top:-29px;left:180px;"></div>' +
+                '<div class="tipsTitle">引导4/5:</div>'
         },
-        content:'<div></div>',
+        content:'<div class="tipsContent">可移动表格数据列的顺序</div>',
         params:{
           placement:'top'
         }
       },{
         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;">' +
-            '引导5/5:<span style="padding-left: 20px;">地图显示当前列表的井所在位置 ↑</span></div>'
+          title:'<div class="topTriangle" style="position:absolute;top:-29px;left:180px;"></div>' +
+                '<div class="tipsTitle">引导5/5:</div>'
         },
-        content:'<div></div>',
+        content:'<div class="tipsContent">地图显示当前列表的井所在位置</div>',
         params:{
           placement:'bottom'
         }
@@ -464,13 +460,17 @@ export default defineComponent({
     });
     const showOverlay = ref(true);
 
+    const curStep = ref(1);
+
     const myCallbacks = ref({
       onPreviousStep(){
         showOverlay.value = true;
+        curStep.value -= 1;
         loadStyle();
       },
       onNextStep(){
         showOverlay.value = true;
+        curStep.value += 1;
         loadStyle();
       },onStop:async function(){
         showOverlay.value = false;
@@ -484,8 +484,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;border-radius:0 0 10px 10px;");
+          if(curStep.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{
+            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++) {
@@ -954,6 +959,55 @@ export default defineComponent({
 });
 </script>
 <style lang="less">
+.tipsTitle{
+  color: white;
+  background: #4c8dff;
+  font-size: 15px;
+  border-radius:10px 10px 0 0;
+  padding:5px 20px 0 10px;
+  font-weight:bolder;
+  display: inline-block;
+  width:400px;
+}
+.tipsContent{
+  color: white;
+  background: #4c8dff;
+  font-size: 14px;
+  padding-left: 20px;
+}
+
+.leftTriangle{
+  height: 0;
+  border-top: 12px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-left: 15px solid transparent;
+  border-right: 12px solid #4c8dff;
+}
+
+.rightTriangle{
+  height: 0;
+  border-top: 12px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-left: 15px solid #4c8dff;
+  border-right: 12px solid transparent;
+}
+
+.topTriangle{
+  height: 0;
+  border-top: 18px solid transparent;
+  border-bottom: 18px solid #4c8dff;
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+}
+
+
+.bottomTriangle{
+  height: 0;
+  border-top: 18px solid #4c8dff;
+  border-bottom: 18px solid transparent;
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+}
 
 .query-index {
   display: flex;