租户首页添加区分多个UPF情况

src/views/index/tenantIndex.vue

@@ -14,15 +14,8 @@ onMounted(() => {});
     <div style="background-color: #f7f8fc; padding: 20px">
       <MODULE />
     </div>
-    <div style="background-color: #f7f8fc; padding: 20px">
-      <a-card
-        :bordered="false"
-        class="cardClass"
-        v-show="upfFlowData.lineXTime.length"
-      >
-        <UPFTEST
-      /></a-card>
-    </div>
+
+    <UPFTEST />
   </PageContainer>
 </template>
 

src/views/index/tenantUPF.vue

@@ -49,6 +49,15 @@ const upfFlow = ref<HTMLElement | undefined>(undefined);
 /**图实例对象 */
 const upfFlowChart = ref<any>(null);
 
+// 使用Map去重
+const uniqueItems = new Map<string, string>();
+
+//UPF下拉框
+const dropdownOptions: any = ref([]);
+
+//UPF下拉框选中值
+const selectRmUid = ref<string>('');
+
 function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
   if (!container) {
     return;
@@ -71,6 +80,7 @@ function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
 
 //渲染速率图
 function handleRanderChart() {
+  console.log(upfFlowData.value);
   const { lineXTime, lineYUp, lineYDown } = upfFlowData.value;
   var yAxisSeries: any = [
     {
@@ -206,6 +216,13 @@ function fnGetInitData() {
   const nowDate: Date = new Date();
   const tenMinutesAgo = new Date(nowDate.getTime() - 5 * 60 * 1000);
 
+  upfFlowData.value = {
+    lineXTime: [],
+    lineYUp: [],
+    lineYDown: [],
+    cap: 0,
+  };
+
   listKPIData({
     neType: 'UPF',
     neId: '',
@@ -219,19 +236,32 @@ function fnGetInitData() {
   })
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        if (res.data.length > 0) {
-          reSendUPF(res.data[0].rmUID);
-        }
+        //先分类再分析每条数据
         for (const item of res.data) {
-          upfFlowParse(item);
+          if (item.neName && item.rmUID) {
+            uniqueItems.set(item.neName, item.rmUID);
+          }
+        }
+        // 将 Map 转换为数组
+        dropdownOptions.value = Array.from(uniqueItems, ([label, value]) => ({
+          label,
+          value,
+        }));
+
+        //填写初始值
+        if (dropdownOptions.value.length > 0) {
+          if (!selectRmUid.value) {
+            selectRmUid.value = dropdownOptions.value[0].value;
+          }
+          reSendUPF(selectRmUid.value);
+        }
+
+        for (const item of res.data) {
+          if (item.rmUID === selectRmUid.value) {
+            console.log(item);
+            upfFlowParse(item);
+          }
         }
-      } else if (res.code === 0) {
-        upfFlowData.value = {
-          lineXTime: [],
-          lineYUp: [],
-          lineYDown: [],
-          cap: 0,
-        };
       }
     })
     .finally(() => {
@@ -264,27 +294,6 @@ watch(
 
 onMounted(() => {
   fnGetInitData();
-  // setInterval(() => {
-  //   upfFlowData.value.lineXTime.push(parseDateToStr(new Date()));
-  //   const upN3 = parseSizeFromKbs(+145452, 5);
-  //   upfFlowData.value.lineYUp.push(upN3[0]);
-  //   const downN6 = parseSizeFromKbs(+232343, 5);
-  //   upfFlowData.value.lineYDown.push(downN6[0]);
-
-  //   upfFlowChart.value.setOption({
-  //     xAxis: {
-  //       data: upfFlowData.value.lineXTime,
-  //     },
-  //     series: [
-  //       {
-  //         data: upfFlowData.value.lineYUp,
-  //       },
-  //       {
-  //         data: upfFlowData.value.lineYDown,
-  //       },
-  //     ],
-  //   });
-  // }, 5000);
 });
 
 onUnmounted(() => {
@@ -296,10 +305,29 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
-    ref="upfFlow"
-    class="chart-container"
-  ></div>
+  <div style="background-color: #f7f8fc; padding: 20px">
+    <a-card
+      :bordered="false"
+      class="cardClass"
+      v-show="upfFlowData.lineXTime.length"
+    >
+      <template #title
+        ><a href="#"
+          >{{ t('views.dashboard.overview.upfFlow.title') }}
+        </a></template
+      >
+      <template #extra>
+        <a-select
+          v-model:value="selectRmUid"
+          style="width: 120px"
+          @change="fnGetInitData"
+          :options="dropdownOptions"
+        />
+      </template>
+
+      <div ref="upfFlow" style="padding: 24px" class="chart-container"></div>
+    </a-card>
+  </div>
 </template>
 
 <style lang="less" scoped>