自定义指标优化

src/i18n/locales/en-US.ts

@@ -1079,6 +1079,9 @@ export default {
         element:'Element',
         granularity:'Granularity',
         unit:'Unit',
+        expressionModal:'Expression Modal',
+        expressionErrorTip:'Please check the expression, the wrong indicator is {kpiId}',
+        expressionNoIdTip:'Please check the expression, no valid indicator is found',
       },
       kpiKeyTarget:{
         "fullWidthLayout":"Full Width",

src/i18n/locales/zh-CN.ts

@@ -1079,6 +1079,9 @@ export default {
         element:'元素',
         granularity:'颗粒度',
         unit:'单位',
+        expressionModal:'表达式模块',
+        expressionErrorTip:'请检查表达式,错误的指标为{kpiId}',
+        expressionNoIdTip:'请检查表达式,没有找到任何有效的指标',
       },
       kpiKeyTarget:{
         "fullWidthLayout":"全宽布局",

src/views/perfManage/customTarget/index.vue

@@ -218,6 +218,8 @@ type ModalStateType = {
   neTypPerformance: Record<string, any>[];
   /**已选择性能测量项 */
   selectedPre: string[];
+  /** 元素选择*/
+  elemSelect: any;
   /**表单数据 */
   from: Record<string, any>;
   /**确定按钮 loading */
@@ -232,10 +234,10 @@ let modalState: ModalStateType = reactive({
   neType: [],
   neTypPerformance: [],
   selectedPre: [],
+  elemSelect: '',
   from: {
     id: undefined,
     neType: 'UDM',
-    kpiId: '',
     title: '',
     expression: '',
     status: 'Active',
@@ -275,13 +277,6 @@ const modalStateFrom = Form.useForm(
           t('common.unableNull'),
       },
     ],
-    kpiId: [
-      {
-        required: true,
-        message:
-          t('views.perfManage.customTarget.kpiId') + t('common.unableNull'),
-      },
-    ],
     title: [
       {
         required: true,
@@ -302,6 +297,7 @@ const modalStateFrom = Form.useForm(
 /**性能测量数据集选择初始  value:neType*/
 function fnSelectPerformanceInit(value: any) {
   modalState.from.expression = '';
+  modalState.elemSelect = '';
   modalState.neTypPerformance = [
     {
       value: 'granularity',
@@ -356,7 +352,33 @@ function fnModalVisibleByEdit(row?: any, id?: any) {
 function fnModalOk() {
   modalStateFrom
     .validate()
-    .then(e => {
+    .then((e: any) => {
+      const matches = modalState.from.expression.match(/'([^']+)'/g); // 提取单引号内容
+      // 替换为对应的 value
+      let result = modalState.from.expression;
+
+      if (matches) {
+        matches.forEach((match: any) => {
+          const valueToReplace = match.slice(1, -1); // 去掉单引号
+          const found = modalState.neTypPerformance.find(
+            (item: any) => item.label === valueToReplace
+          );
+          if (found) {
+            result = result.replace(match, `'${found.value}'`); // 替换为对应的 value
+          } else {
+            message.error(
+              t('views.perfManage.customTarget.expressionErrorTip', {
+                kpiId: valueToReplace,
+              }),
+              3
+            );
+            return false;
+          }
+        });
+      } else {
+        message.error(t('views.perfManage.customTarget.expressionNoIdTip'), 3);
+      }
+
       const from = toRaw(modalState.from);
       //return false;
       modalState.confirmLoading = true;
@@ -405,12 +427,20 @@ function fnModalCancel() {
  * 选择性能指标,填充进当前计算公式的值
  */
 function fnSelectPer(s: any, option: any) {
-  modalState.from.expression += `'${s}'`;
+  console.log(option);
+  modalState.from.expression += `'${option.label}'`;
 }
 
 function fnSelectSymbol(s: any) {
   modalState.from.expression += s;
 }
+
+function fnChangeUnit(value: any) {
+  if (value === '%' && modalState.from.expression) {
+    modalState.from.expression = `(${modalState.from.expression})*100`;
+  }
+}
+
 /**网元参数 */
 let neCascaderOptions = ref<Record<string, any>[]>([]);
 onMounted(() => {
@@ -634,102 +664,6 @@ onMounted(() => {
               </a-select>
             </a-form-item>
           </a-col>
-        </a-row>
-
-        <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.perfManage.customTarget.title')"
-              name="title"
-              v-bind="modalStateFrom.validateInfos.title"
-            >
-              <a-input
-                v-model:value="modalState.from.title"
-                :maxlength="255"
-                allow-clear
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.perfManage.customTarget.kpiId')"
-              name="kpiId"
-              v-bind="modalStateFrom.validateInfos.kpiId"
-            >
-              <a-input
-                v-model:value="modalState.from.kpiId"
-                :maxlength="16"
-                allow-clear
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-form-item
-          :label="t('views.perfManage.customTarget.expression')"
-          name="expression"
-          :label-col="{ span: 3 }"
-          v-bind="modalStateFrom.validateInfos.expression"
-        >
-          <a-input
-            v-model:value="modalState.from.expression"
-            :maxlength="1024"
-            allow-clear
-          >
-          </a-input>
-        </a-form-item>
-
-        <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              name="perSelect"
-              :label="t('views.perfManage.customTarget.symbol')"
-            >
-              <a-select
-                placeholder="Please select"
-                :options="modalStateFromOption.symbolJson"
-                @select="fnSelectSymbol"
-              ></a-select>
-            </a-form-item>
-          </a-col>
-
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              name="perSelect"
-              :label="t('views.perfManage.customTarget.element')"
-            >
-              <a-select
-                placeholder="Please select"
-                :options="modalState.neTypPerformance"
-                @select="fnSelectPer"
-              ></a-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.perfManage.customTarget.unit')"
-              name="expression"
-              v-bind="modalStateFrom.validateInfos.unit"
-            >
-              <a-auto-complete
-                v-model:value="modalState.from.unit"
-                :options="[
-                  {
-                    label: 'Mbps',
-                    value: 'Mbps',
-                  },
-                  {
-                    label: '%',
-                    value: '%',
-                  },
-                ]"
-              ></a-auto-complete>
-            </a-form-item>
-          </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.perfManage.customTarget.status')"
@@ -755,6 +689,93 @@ onMounted(() => {
           </a-col>
         </a-row>
 
+        <a-row>
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item
+              :label="t('views.perfManage.customTarget.title')"
+              name="title"
+              :label-col="{ span: 3 }"
+              v-bind="modalStateFrom.validateInfos.title"
+            >
+              <a-input
+                v-model:value="modalState.from.title"
+                :maxlength="255"
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-divider orientation="left">{{
+          t('views.perfManage.customTarget.expressionModal')
+        }}</a-divider>
+        <a-form-item
+          :label="t('views.perfManage.customTarget.expression')"
+          name="expression"
+          :label-col="{ span: 3 }"
+          v-bind="modalStateFrom.validateInfos.expression"
+        >
+          <a-input
+            v-model:value="modalState.from.expression"
+            :maxlength="1024"
+            allow-clear
+          >
+          </a-input>
+        </a-form-item>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              name="elemSelect"
+              :label="t('views.perfManage.customTarget.element')"
+            >
+              <a-select
+                v-model:value="modalState.elemSelect"
+                placeholder="Please select"
+                :options="modalState.neTypPerformance"
+                @select="fnSelectPer"
+              ></a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              name="symbol"
+              :label="t('views.perfManage.customTarget.symbol')"
+            >
+              <a-select
+                placeholder="Please select"
+                :options="modalStateFromOption.symbolJson"
+                @select="fnSelectSymbol"
+              ></a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.perfManage.customTarget.unit')"
+              name="expression"
+              v-bind="modalStateFrom.validateInfos.unit"
+            >
+              <a-auto-complete
+                v-model:value="modalState.from.unit"
+                @change="fnChangeUnit"
+                :options="[
+                  {
+                    label: 'Mbps',
+                    value: 'Mbps',
+                  },
+                  {
+                    label: '%',
+                    value: '%',
+                  },
+                ]"
+              ></a-auto-complete>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-divider></a-divider>
+
         <a-form-item
           :label="t('views.perfManage.customTarget.description')"
           name="description"