feat: 实现图标tooltip展示

src/components/VTipTooltip/index.ts

@@ -0,0 +1 @@
+export { default } from './src/VTipTooltip.vue'

src/components/VTipTooltip/src/VTipTooltip.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    content?: string
+    placement?: 'top' | 'bottom' | 'left' | 'right'
+    img?: string
+  }>(),
+  {
+    content: '',
+    placement: 'bottom'
+  }
+)
+
+const visible = ref(false)
+</script>
+
+<template>
+  <div style="display: inline-block">
+    <el-tooltip v-model="visible" :placement="props.placement">
+      <span class="font_family icon-icon_info_b"></span>
+      <template #content>
+        <div class="label">KPI Report：Day difference between actual and estimate.</div>
+        <img :src="props.img" alt="" />
+      </template>
+    </el-tooltip>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/styles/driver.scss

@@ -24,6 +24,12 @@ div.driver-popover-arrow-side-bottom {
   border-bottom-color: var(--color-tour-popover-bg);
 }
 
+// 遮罩
+.driver-overlay.driver-overlay-animated {
+  path {
+    fill: var(--color-tour-mask-bg) !important;
+  }
+}
 // 关闭图标
 button.driver-popover-close-btn {
   top: 9px;

src/styles/theme.scss

@@ -257,6 +257,7 @@
   --color-tour-next-btn-hover-bg: #2b2f36;
   --color-tour-next-btn-color: #fff;
   --color-tour-step-color: #b5b9bf;
+  --color-tour-mask-bg: rgba(43, 47, 54, 0.7);
 }
 
 :root.dark {
@@ -401,4 +402,5 @@
   --color-tour-next-btn-hover-bg: #e3e5e8;
   --color-tour-next-btn-color: #ed6d00;
   --color-tour-step-color: rgba(240, 241, 243, 0.7);
+  --color-tour-mask-bg: rgba(0, 0, 0, 0.7);
 }

src/views/Dashboard/src/DashboardView.vue

@@ -886,7 +886,10 @@ const ClickParams = (val: any) => {
             <VBox_Dashboard @changeCancel="changeCancel(item.id)">
               <template #header>
                 <div class="Title_flex">
-                  {{ item.title }}
+                  <span>
+                    {{ item.title }}
+                    <!-- <VTipTooltip></VTipTooltip> -->
+                  </span>
                   <DashFilters
                     :defaultData="KPIDefaulteData"
                     @FilterSearch="GetKpiData"
@@ -938,6 +941,7 @@ const ClickParams = (val: any) => {
                   <DashFilters
                     :defaultData="PendingDefaulteData"
                     :radioisDisabled="true"
+                    :img="'./image/kpi-chart-tip.png'"
                     @FilterSearch="GetPendingEcharts"
                   ></DashFilters>
                 </div>

src/views/Tracking/src/TrackingView.vue

@@ -645,7 +645,7 @@ const SearchInput = () => {
 <template>
   <div class="Title">
     <span>Tracking</span>
-    <VDriverGuide @click="handleGuide"></VDriverGuide>
+    <!-- <VDriverGuide @click="handleGuide"></VDriverGuide> -->
   </div>
 
   <div class="display" ref="filterRef">

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -20,7 +20,7 @@ import { useDriver } from '@/utils/driverGuide'
 
 // import { driver } from 'driver.js'
 
-const steps: any = [
+const oceanSteps: any = [
   {
     element: '#driver-step-tracking-detail-1',
     popover: {
@@ -87,8 +87,76 @@ const steps: any = [
     }
   }
 ]
-const { start } = useDriver(steps)
+const airSteps: any = [
+  {
+    element: '#driver-step-tracking-detail-1',
+    popover: {
+      title: '',
+      description: 'Main operation button area',
+      side: 'bottom',
+      align: 'start'
+    }
+  },
+  {
+    element: '#driver-step-tracking-detail-2',
+    popover: {
+      description: 'Key shipment status',
+      side: 'bottom',
+      align: 'start'
+    }
+  },
+  {
+    element: '#tracking-map',
+    popover: {
+      description: `
+        <ol style="margin-left: 16px; list-style: disc">
+          <li>Actual Line(Actual Trajectory)</li>
+          <li>Virtual Line(Planned Trajectory)</li>
+          <li>Arrow (Current Real-time Position)</li>
+        </ol>
+      `,
+      side: 'bottom',
+      align: 'start'
+    }
+  },
+  {
+    element: '#driver-step-tracking-detail-5',
+    popover: {
+      description: `
+      <ol style="margin-left: 16px; list-style: disc">
+        <li>Upload Files</li>
+        <li>Clickable download icons to download files</li>
+      </ol>
+      `,
+      side: 'bottom',
+      align: 'start'
+    }
+  },
+  {
+    element: '#driver-step-tracking-detail-6',
+    popover: {
+      description: `
+        <p>Send email to site staff</p>
+        <p>Enter contents you want to communicate with, click “Send 
+         Email” button to send out.
+        </p>
+      `,
+      side: 'bottom',
+      align: 'start'
+    }
+  }
+]
 const handleGuide = () => {
+  let steps = []
+  if (allData.value?.transportInfo?.mode === 'Ocean Freight') {
+    steps = oceanSteps
+  } else if (allData.value?.transportInfo?.mode === 'Air Freight') {
+    steps = airSteps
+  } else {
+    return
+  }
+  const { start } = useDriver(steps)
+  console.log(allData.value?.transportInfo?.mode, 'value')
   start() // 开始引导
 }