增加下拉框

src/views/dashboard/overview/index.vue

@@ -26,11 +26,20 @@ import useWS from './hooks/useWS';
 import useAppStore from '@/store/modules/app';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { useRouter } from 'vue-router';
+import { message } from 'ant-design-vue/lib/components';
+import useNeInfoStore from '@/store/modules/neinfo';
+
 const router = useRouter();
 const appStore = useAppStore();
 const { t } = useI18n();
 const { wsSend, cdrEventSend, ueEventSend, upfTFSend } = useWS();
 
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**网元Id */
+let neRealId = ref<any>;
+
 /**概览状态类型 */
 type SkimStateType = {
   /**UDM签约用户数量 */
@@ -189,6 +198,30 @@ onMounted(() => {
   fnGetSkim().then(() => {
     loadData();
   });
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          let arr: Record<string, any>[] = [];
+          res.data.forEach(i => {
+            if (i.neType === 'UPF') {
+              arr.push({ value: i.neId, label: i.neName });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            neRealId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    });
 });
 
 onBeforeUnmount(() => {
@@ -354,12 +387,24 @@ onBeforeUnmount(() => {
         <div class="inner">
           <h3
             class="toRouter"
-            @click="fnToRouter('GoldTarget_2104')"
             :title="t('views.dashboard.overview.toRouter')"
+            style="display: flex; align-items: center"
           >
             <AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            {{ t('views.dashboard.overview.upfFlow.title') }}
+            <span @click="fnToRouter('GoldTarget_2104')">{{
+              t('views.dashboard.overview.upfFlow.title')
+            }}</span>
+
+            <div style="margin-left: auto">
+              <a-select
+                v-model:value="neRealId"
+                :options="neOtions"
+                class="toDeep"
+                style="width: 100px; color: #fff;"
+              />
+            </div>
           </h3>
+
           <div class="chart">
             <UPFFlow />
           </div>
@@ -475,6 +520,23 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
+
+
 <style lang="less" scoped>
 @import url('./css/index.css');
+.toDeep {
+  --editor-background-color: blue;
+}
+
+.toDeep :deep(.ant-select-selector) {
+  background-color: #101129;
+}
+
+.toDeep :deep(.ant-select-arrow){
+  color: #fff;
+}
+
+.toDeep :deep(.ant-select-selector){
+  border:0px;
+}
 </style>