feat:自定义指标漫游引导

src/i18n/locales/en-US.ts

@@ -1057,6 +1057,14 @@ export default {
         realTimeData: "Real Time Data",
       },
       customTarget:{
+        TourTitle1:'Calculate element selection',
+        TourDes1:'Select the metric corresponding to the selected NE type for the calculation formula',
+        TourTitle2:'Calculate symbol selection',
+        TourDes2:'Select a calculation symbol',
+        TourTitle3:'Calculation formula',
+        TourDes3:'The calculation formula is automatically composed from the calculation elements and calculation symbols selected earlier',
+        TourTitle4:'Result unit',
+        TourDes4:'Units are optional. PS: Formula automatically × 100% when the % sign',
         kpiId:' Custom Indicator',
         kpiIdTip:'This Ne has no custom indicators',
         period:' Granularity',

src/i18n/locales/zh-CN.ts

@@ -1057,6 +1057,14 @@ export default {
         realTimeData: "实时数据",
       },
       customTarget:{
+        TourTitle1:'计算元素选择',
+        TourDes1:'选择已经勾选网元类型对应的指标用于计算公式',
+        TourTitle2:'计算符号选择',
+        TourDes2:'选择计算符号',
+        TourTitle3:'计算公式',
+        TourDes3:'由前面选择的计算元素和计算符号自动组成计算公式',
+        TourTitle4:'结果单位',
+        TourDes4:'单位可选可填。PS：%符号时公式自动×100%',
         kpiId:'自定义指标项',
         kpiIdTip:'该网元没有自定义指标',
         period:'颗粒度',

src/views/perfManage/customTarget/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted, ref, toRaw } from 'vue';
+import { reactive, onMounted, ref, toRaw, nextTick } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { ProModal } from 'antdv-pro-modal';
 import { Form, message, Modal } from 'ant-design-vue/es';
@@ -9,6 +9,7 @@ import { ColumnsType } from 'ant-design-vue/es/table';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
 import useNeInfoStore from '@/store/modules/neinfo';
+import type { TourProps } from 'ant-design-vue';
 import {
   addCustom,
   delCustom,
@@ -19,6 +20,40 @@ import { getKPITitle } from '@/api/perfManage/goldTarget';
 import useDictStore from '@/store/modules/dict';
 const { t, currentLocale } = useI18n();
 const { getDict } = useDictStore();
+const open = ref<boolean>(false);
+
+/**漫游引导**/
+const current = ref(0);
+const handleOpen = (val: boolean): void => {
+  open.value = val;
+};
+const ref1:any = ref(null);
+const ref2:any = ref(null);
+const ref3:any = ref(null);
+const ref4:any = ref(null);
+
+const steps: TourProps['steps'] = [
+  {
+    title:t('views.perfManage.customTarget.TourTitle1'),
+    description:t('views.perfManage.customTarget.TourDes1'),
+    target:()=>ref1.value && ref1.value.$el,
+  },
+  {
+    title:t('views.perfManage.customTarget.TourTitle2'),
+    description:t('views.perfManage.customTarget.TourDes2'),
+    target:()=>ref2.value && ref2.value.$el,
+  },
+  {
+    title:t('views.perfManage.customTarget.TourTitle3'),
+    description:t('views.perfManage.customTarget.TourDes3'),
+    target:()=>ref3.value && ref3.value.$el,
+  },
+  {
+    title:t('views.perfManage.customTarget.TourTitle4'),
+    description:t('views.perfManage.customTarget.TourDes4'),
+    target:()=>ref4.value && ref4.value.$el,
+  },
+  ];
 
 /**字典数据 */
 let dict: {
@@ -342,6 +377,10 @@ function fnModalVisibleByEdit(row?: any, id?: any) {
     modalState.title = t('views.perfManage.customTarget.addCustom');
     modalState.openByEdit = true;
     fnSelectPerformanceInit(modalState.from.neType);
+    setTimeout(() => {
+      handleOpen(true);
+    }, 600); // 延时300毫秒
+
   } else {
     fnSelectPerformanceInit(row.neType);
     modalState.from = Object.assign(modalState.from, row);
@@ -723,6 +762,7 @@ onMounted(() => {
           v-bind="modalStateFrom.validateInfos.expression"
         >
           <a-input
+            ref="ref3"
             v-model:value="modalState.from.expression"
             :maxlength="1024"
             autocomplete="off"
@@ -734,6 +774,7 @@ onMounted(() => {
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
+              ref="ref1"
               name="elemSelect"
               :label="t('views.perfManage.customTarget.element')"
             >
@@ -751,6 +792,7 @@ onMounted(() => {
               :label="t('views.perfManage.customTarget.symbol')"
             >
               <a-select
+                ref="ref2"
                 placeholder="Please select"
                 :options="modalStateFromOption.symbolJson"
                 @select="fnSelectSymbol"
@@ -766,6 +808,7 @@ onMounted(() => {
               v-bind="modalStateFrom.validateInfos.unit"
             >
               <a-auto-complete
+                ref="ref4"
                 v-model:value="modalState.from.unit"
                 @change="fnChangeUnit"
                 :options="[
@@ -799,6 +842,11 @@ onMounted(() => {
       </a-form>
     </ProModal>
   </PageContainer>
+  <a-tour :open="open" :steps="steps" @close="handleOpen(false)">
+    <template #indicatorsRender="{ current, total }">
+      <span>{{ current + 1 }} / {{ total }}</span>
+    </template>
+  </a-tour>
 </template>
 
 <style lang="less" scoped>