From a658852772d8e209561ae989d6daf89fdce889e3 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 23 Oct 2025 14:15:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9F=BA=E7=AB=99=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E8=A1=A5=E5=85=85randId=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/locales/en-US.ts                     |   1 +
 src/i18n/locales/zh-CN.ts                     |   1 +
 .../base-station/components/history.vue       |  85 +++----
 src/views/neData/base-station/list.vue        | 230 ++++++------------
 src/views/neData/base-station/topology.vue    |  22 +-
 5 files changed, 122 insertions(+), 217 deletions(-)

diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 8b737b2c..3c9dac70 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -875,6 +875,7 @@ export default {
         list: "List",
         topology: "Topology",
         nbName: "RAN Node Name",
+        nbId: "RAN Node ID",
         ueNum: "UE Number",
         topologyTitle: "Radio State Graph",
         name: "Name",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 62735333..8540c7ba 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -875,6 +875,7 @@ export default {
         list: "列表",
         topology: "拓扑图",
         nbName: "设备名称",
+        nbId: "设备ID",
         ueNum: "在线用户数",
         topologyTitle: "基站状态关系图",
         name: "基站名称",
diff --git a/src/views/neData/base-station/components/history.vue b/src/views/neData/base-station/components/history.vue
index 5f0ffeeb..8589462c 100644
--- a/src/views/neData/base-station/components/history.vue
+++ b/src/views/neData/base-station/components/history.vue
@@ -150,6 +150,15 @@ let tableColumns = ref<ColumnsType>([
     minWidth: 100,
     maxWidth: 200,
   },
+  {
+    title: t('views.neData.baseStation.nbId'),
+    dataIndex: 'nbId',
+    align: 'left',
+    resizable: true,
+    width: 100,
+    minWidth: 100,
+    maxWidth: 200,
+  },
   {
     title: t('views.neData.baseStation.state'),
     dataIndex: 'state',
@@ -247,7 +256,7 @@ function fnGetList(pageNum?: number) {
   }
 
   listNBState(toRaw(queryParams)).then(res => {
-     if (res.code === RESULT_CODE_SUCCESS) {
+    if (res.code === RESULT_CODE_SUCCESS) {
       // 取消勾选
       if (tableState.selectedRowKeys.length > 0) {
         tableState.selectedRowKeys = [];
@@ -258,7 +267,7 @@ function fnGetList(pageNum?: number) {
       tableState.data = rows;
       if (
         tablePagination.total <=
-          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        (queryParams.pageNum - 1) * tablePagination.pageSize &&
         queryParams.pageNum !== 1
       ) {
         tableState.loading = false;
@@ -290,62 +299,43 @@ watch(
 </script>
 
 <template>
-  <ProModal
-    :drag="true"
-    :destroyOnClose="true"
-    :width="1200"
-    :title="props.title"
-    :open="props.open"
-    :keyboard="false"
-    :mask-closable="false"
-    @cancel="fnModalCancel"
-    :footer="null"
-  >
+  <ProModal :drag="true" :destroyOnClose="true" :width="1200" :title="props.title" :open="props.open" :keyboard="false"
+    :mask-closable="false" @cancel="fnModalCancel" :footer="null">
     <!-- 表格搜索栏 -->
     <a-form :model="queryParams" name="queryParams" layout="horizontal">
       <a-row :gutter="16" style="margin-left: 0; margin-right: 0">
         <a-col :lg="6" :md="12" :xs="24">
-          <a-form-item
-            :label="t('views.neData.baseStation.state')"
-            name="status"
-          >
-            <a-select
-              v-model:value="queryParams.status"
-              allow-clear
-              :placeholder="t('common.selectPlease')"
-              :options="nbStateOptions"
-            >
+          <a-form-item :label="t('views.neData.baseStation.state')" name="status">
+            <a-select v-model:value="queryParams.status" allow-clear :placeholder="t('common.selectPlease')"
+              :options="nbStateOptions">
             </a-select>
           </a-form-item>
         </a-col>
         <a-col :lg="16" :md="12" :xs="24">
-          <a-form-item
-            :label="t('views.neData.baseStation.time')"
-            name="queryRangePicker"
-          >
-            <a-range-picker
-              v-model:value="queryRangePicker"
-              :bordered="true"
-              :allow-clear="true"
-              style="width: 100%"
-              :show-time="{ format: 'HH:mm:ss' }"
-              format="YYYY-MM-DD HH:mm:ss"
-            ></a-range-picker>
+          <a-form-item :label="t('views.neData.baseStation.time')" name="queryRangePicker">
+            <a-range-picker v-model:value="queryRangePicker" :bordered="true" :allow-clear="true" style="width: 100%"
+              :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
           </a-form-item>
         </a-col>
         <a-col :lg="24" :md="24" :xs="24">
           <a-form-item>
             <a-space :size="8">
               <a-button type="primary" @click.prevent="fnGetList(1)">
-                <template #icon><SearchOutlined /></template>
+                <template #icon>
+                  <SearchOutlined />
+                </template>
                 {{ t('common.search') }}
               </a-button>
               <a-button type="default" @click.prevent="fnQueryReset">
-                <template #icon><ClearOutlined /></template>
+                <template #icon>
+                  <ClearOutlined />
+                </template>
                 {{ t('common.reset') }}
               </a-button>
               <a-button type="dashed" @click.prevent="fnExportList()">
-                <template #icon><ExportOutlined /></template>
+                <template #icon>
+                  <ExportOutlined />
+                </template>
                 {{ t('common.export') }}
               </a-button>
             </a-space>
@@ -355,24 +345,13 @@ watch(
     </a-form>
 
     <!-- 表格列表 -->
-    <a-table
-      class="table"
-      row-key="id"
-      :columns="tableColumns"
-      :loading="tableState.loading"
-      :data-source="tableState.data"
-      :size="tableState.size"
-      :pagination="tablePagination"
+    <a-table class="table" row-key="id" :columns="tableColumns" :loading="tableState.loading"
+      :data-source="tableState.data" :size="tableState.size" :pagination="tablePagination"
       :scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
-      @resizeColumn="(w:number, col:any) => (col.width = w)"
-    >
+      @resizeColumn="(w: number, col: any) => (col.width = w)">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'state'">
-          <DictTag
-            :options="nbStateOptions"
-            :value="record.state"
-            value-default="OFF"
-          />
+          <DictTag :options="nbStateOptions" :value="record.state" value-default="OFF" />
         </template>
       </template>
     </a-table>
diff --git a/src/views/neData/base-station/list.vue b/src/views/neData/base-station/list.vue
index abd347fd..d18293cd 100644
--- a/src/views/neData/base-station/list.vue
+++ b/src/views/neData/base-station/list.vue
@@ -140,6 +140,12 @@ let tableColumns = ref<ColumnsType>([
     minWidth: 100,
     maxWidth: 200,
   },
+  {
+    title: t('views.neData.baseStation.nbId'),
+    dataIndex: 'ranId',
+    align: 'left',
+    width: 120,
+  },
   {
     title: t('views.neData.baseStation.ueNum'),
     dataIndex: 'ueNum',
@@ -641,13 +647,12 @@ function fnModalImportUpload(file: File) {
 /**对话框表格信息导入模板 */
 async function fnModalImportTemplate() {
   const baseUrl = import.meta.env.VITE_HISTORY_BASE_URL;
-  const xlsxUrl = `${
-    baseUrl.length === 1 && baseUrl.indexOf('/') === 0
+  const xlsxUrl = `${baseUrl.length === 1 && baseUrl.indexOf('/') === 0
       ? ''
       : baseUrl.indexOf('/') === -1
-      ? '/' + baseUrl
-      : baseUrl
-  }/nbStateImput`;
+        ? '/' + baseUrl
+        : baseUrl
+    }/nbStateImput`;
   const lang = currentLocale.value.split('_')[0];
   saveAs(
     `${xlsxUrl}/${lang}.xlsx`,
@@ -669,7 +674,7 @@ onMounted(() => {
     });
     return;
   }
-  
+
   // 无查询参数neType时 默认选择AMF
   const queryNeType = (route.query.neType as string) || 'AMF';
   const item = neCascaderOptions.value.find(s => s.value === queryNeType);
@@ -688,46 +693,35 @@ onMounted(() => {
 
 <template>
   <div>
-    <a-card
-      :bordered="false"
-      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
-    >
+    <a-card :bordered="false" :body-style="{ marginBottom: '24px', paddingBottom: 0 }">
       <!-- 表格搜索栏 -->
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item :label="t('views.ne.common.neType')" name="neType ">
-              <a-cascader
-                v-model:value="neTypeAndId"
-                :options="neCascaderOptions"
-                :allow-clear="false"
-                :placeholder="t('common.selectPlease')"
-                @change="fnGetList"
-              />
+              <a-cascader v-model:value="neTypeAndId" :options="neCascaderOptions" :allow-clear="false"
+                :placeholder="t('common.selectPlease')" @change="fnGetList" />
             </a-form-item>
           </a-col>
           <a-col :lg="4" :md="6" :xs="24">
-            <a-form-item
-              :label="t('views.neData.baseStation.state')"
-              name="state"
-            >
-              <a-select
-                v-model:value="queryParams.state"
-                :options="nbState"
-                :placeholder="t('common.selectPlease')"
-                @change="fnGetList"
-              />
+            <a-form-item :label="t('views.neData.baseStation.state')" name="state">
+              <a-select v-model:value="queryParams.state" :options="nbState" :placeholder="t('common.selectPlease')"
+                @change="fnGetList" />
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item>
               <a-space :size="8">
                 <a-button type="primary" @click.prevent="fnGetList()">
-                  <template #icon><SearchOutlined /></template>
+                  <template #icon>
+                    <SearchOutlined />
+                  </template>
                   {{ t('common.search') }}
                 </a-button>
                 <a-button type="default" @click.prevent="fnQueryReset">
-                  <template #icon><ClearOutlined /></template>
+                  <template #icon>
+                    <ClearOutlined />
+                  </template>
                   {{ t('common.reset') }}
                 </a-button>
               </a-space>
@@ -747,35 +741,36 @@ onMounted(() => {
             </template>
             {{ t('common.addText') }}
           </a-button>
-          <a-button
-            type="default"
-            :disabled="tableState.selectedRowKeys.length != 1"
-            :loading="modalState.confirmLoading"
-            @click.prevent="fnModalVisibleByEdit('0')"
-          >
-            <template #icon><FormOutlined /></template>
+          <a-button type="default" :disabled="tableState.selectedRowKeys.length != 1"
+            :loading="modalState.confirmLoading" @click.prevent="fnModalVisibleByEdit('0')">
+            <template #icon>
+              <FormOutlined />
+            </template>
             {{ t('common.editText') }}
           </a-button>
-          <a-button
-            type="default"
-            danger
-            :disabled="tableState.selectedRowKeys.length <= 0"
-            :loading="modalState.confirmLoading"
-            @click.prevent="fnRecordDelete('0')"
-          >
-            <template #icon><DeleteOutlined /></template>
+          <a-button type="default" danger :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading" @click.prevent="fnRecordDelete('0')">
+            <template #icon>
+              <DeleteOutlined />
+            </template>
             {{ t('common.deleteText') }}
           </a-button>
           <a-button type="dashed" @click.prevent="fnModalImportOpen()">
-            <template #icon><ImportOutlined /></template>
+            <template #icon>
+              <ImportOutlined />
+            </template>
             {{ t('common.import') }}
           </a-button>
           <a-button type="dashed" @click.prevent="fnExportList()">
-            <template #icon><ExportOutlined /></template>
+            <template #icon>
+              <ExportOutlined />
+            </template>
             {{ t('common.export') }}
           </a-button>
           <a-button type="default" @click.prevent="fnHistoryView()">
-            <template #icon><ContainerOutlined /></template>
+            <template #icon>
+              <ContainerOutlined />
+            </template>
             {{ t('views.neData.baseStation.history') }}
           </a-button>
         </a-space>
@@ -785,19 +780,15 @@ onMounted(() => {
       <template #extra>
         <a-space :size="8" align="center">
           <div>
-            <template
-              v-if="
-                queryParams.state === undefined || queryParams.state === 'ON'
-              "
-            >
+            <template v-if="
+              queryParams.state === undefined || queryParams.state === 'ON'
+            ">
               {{ t('views.neData.baseStation.online') }}:
               <strong style="color: green">{{ stateNum[0] }} </strong>
             </template>
-            <template
-              v-if="
-                queryParams.state === undefined || queryParams.state === 'OFF'
-              "
-            >
+            <template v-if="
+              queryParams.state === undefined || queryParams.state === 'OFF'
+            ">
               &nbsp;
               {{ t('views.neData.baseStation.offline') }}:
               <strong style="color: red">
@@ -808,139 +799,72 @@ onMounted(() => {
           <a-tooltip>
             <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList()">
-              <template #icon><ReloadOutlined /></template>
+              <template #icon>
+                <ReloadOutlined />
+              </template>
             </a-button>
           </a-tooltip>
         </a-space>
       </template>
 
       <!-- 表格列表 -->
-      <a-table
-        class="table"
-        row-key="index"
-        :columns="tableColumns"
-        :loading="tableState.loading"
-        :data-source="tableState.data"
-        :size="tableState.size"
-        :pagination="tablePagination"
-        :row-selection="{
+      <a-table class="table" row-key="index" :columns="tableColumns" :loading="tableState.loading"
+        :data-source="tableState.data" :size="tableState.size" :pagination="tablePagination" :row-selection="{
           type: 'checkbox',
           selectedRowKeys: tableState.selectedRowKeys,
           onChange: fnTableSelectedRowKeys,
-        }"
-        :scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
-        @resizeColumn="(w:number, col:any) => (col.width = w)"
-      >
+        }" :scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
+        @resizeColumn="(w: number, col: any) => (col.width = w)">
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'state'">
-            <DictTag
-              :options="nbState"
-              :value="record.state"
-              value-default="OFF"
-            />
+            <DictTag :options="nbState" :value="record.state" value-default="OFF" />
           </template>
         </template>
       </a-table>
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <ProModal
-      :drag="true"
-      :width="500"
-      :destroyOnClose="true"
-      :keyboard="false"
-      :mask-closable="false"
-      :open="modalState.openByEdit"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form
-        name="modalStateFrom"
-        layout="horizontal"
-        :label-col="{ span: 6 }"
-        :labelWrap="true"
-      >
-        <a-form-item
-          :label="t('views.neData.baseStation.name')"
-          name="name"
-          v-bind="modalStateFrom.validateInfos.name"
-        >
-          <a-input
-            v-model:value="modalState.from.name"
-            allow-clear
-            :maxlength="64"
-          >
+    <ProModal :drag="true" :width="500" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
+      :open="modalState.openByEdit" :title="modalState.title" :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk" @cancel="fnModalCancel">
+      <a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }" :labelWrap="true">
+        <a-form-item :label="t('views.neData.baseStation.name')" name="name" v-bind="modalStateFrom.validateInfos.name">
+          <a-input v-model:value="modalState.from.name" allow-clear :maxlength="64">
           </a-input>
         </a-form-item>
-        <a-form-item
-          :label="t('views.neData.baseStation.position')"
-          name="position"
-          v-bind="modalStateFrom.validateInfos.position"
-        >
-          <a-input
-            v-model:value="modalState.from.position"
-            allow-clear
-            :maxlength="64"
-          >
+        <a-form-item :label="t('views.neData.baseStation.position')" name="position"
+          v-bind="modalStateFrom.validateInfos.position">
+          <a-input v-model:value="modalState.from.position" allow-clear :maxlength="64">
           </a-input>
         </a-form-item>
-        <a-form-item
-          v-if="!modalState.from.state"
-          :label="t('views.neData.baseStation.address')"
-          name="address"
-          v-bind="modalStateFrom.validateInfos.address"
-        >
-          <a-input
-            v-model:value="modalState.from.address"
-            allow-clear
-            :maxlength="64"
-          >
+        <a-form-item v-if="!modalState.from.state" :label="t('views.neData.baseStation.address')" name="address"
+          v-bind="modalStateFrom.validateInfos.address">
+          <a-input v-model:value="modalState.from.address" allow-clear :maxlength="64">
           </a-input>
         </a-form-item>
       </a-form>
     </ProModal>
 
     <!-- 状态历史框 -->
-    <HistoryModal
-      v-if="neTypeAndId.length > 1"
-      v-model:open="modalState.openByHistory"
-      :title="t('views.neData.baseStation.history')"
-      :ne-type="neTypeAndId[0]"
-      :ne-id="neTypeAndId[1]"
-      @cancel="fnModalCancel"
-    ></HistoryModal>
+    <HistoryModal v-if="neTypeAndId.length > 1" v-model:open="modalState.openByHistory"
+      :title="t('views.neData.baseStation.history')" :ne-type="neTypeAndId[0]" :ne-id="neTypeAndId[1]"
+      @cancel="fnModalCancel"></HistoryModal>
 
     <!-- 上传导入表格数据文件框 -->
-    <UploadModal
-      :title="t('common.import')"
-      @upload="fnModalImportUpload"
-      @close="fnModalImportClose"
-      v-model:open="modalState.openByImport"
-      :ext="['.xls', '.xlsx']"
-      :size="10"
-    >
+    <UploadModal :title="t('common.import')" @upload="fnModalImportUpload" @close="fnModalImportClose"
+      v-model:open="modalState.openByImport" :ext="['.xls', '.xlsx']" :size="10">
       <template #default>
         <a-row justify="space-between" align="middle">
           <a-col :span="12"> </a-col>
           <a-col :span="6">
-            <a-button
-              type="link"
-              :title="t('views.system.user.downloadObj')"
-              @click.prevent="fnModalImportTemplate"
-            >
+            <a-button type="link" :title="t('views.system.user.downloadObj')" @click.prevent="fnModalImportTemplate">
               {{ t('views.system.user.downloadObj') }}
             </a-button>
           </a-col>
         </a-row>
-        <a-textarea
-          :disabled="true"
-          :hidden="modalState.importMsgArr.length <= 0"
-          :value="modalState.importMsgArr.join('\r\n')"
-          :auto-size="{ minRows: 2, maxRows: 8 }"
-          style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
-        />
+        <a-textarea :disabled="true" :hidden="modalState.importMsgArr.length <= 0"
+          :value="modalState.importMsgArr.join('\r\n')" :auto-size="{ minRows: 2, maxRows: 8 }"
+          style="background-color: transparent; color: rgba(0, 0, 0, 0.85)" />
       </template>
     </UploadModal>
   </div>
diff --git a/src/views/neData/base-station/topology.vue b/src/views/neData/base-station/topology.vue
index ac492657..753e6c0c 100644
--- a/src/views/neData/base-station/topology.vue
+++ b/src/views/neData/base-station/topology.vue
@@ -132,10 +132,9 @@ const graphNodeTooltip = new Tooltip({
         "
         >
         <div><strong>${t('views.neData.baseStation.state')}：</strong><span>
-        ${
-          nInfo.state === 'ON'
-            ? t('views.neData.baseStation.online')
-            : t('views.neData.baseStation.offline')
+        ${nInfo.state === 'ON'
+          ? t('views.neData.baseStation.online')
+          : t('views.neData.baseStation.offline')
         }
         </span></div>
         <div><strong>${t('views.neData.baseStation.time')}：</strong><span>
@@ -147,6 +146,8 @@ const graphNodeTooltip = new Tooltip({
         ${nInfo.address ?? '--'}</span></div>
         <div><strong>${t('views.neData.baseStation.nbName')}：</strong><span>
         ${nInfo.nbName ?? '--'}</span></div>
+        <div><strong>${t('views.neData.baseStation.nbId')}：</strong><span>
+        ${nInfo.ranId ?? '--'}</span></div>
         <div><strong>${t('views.neData.baseStation.ueNum')}：</strong><span>
         ${nInfo.ueNum ?? '--'}</span></div>
         <div><strong>${t('views.neData.baseStation.name')}：</strong><span>
@@ -169,11 +170,10 @@ const graphNodeTooltip = new Tooltip({
         "
         >
         <div><strong>${t('views.monitor.topology.state')}：</strong><span>
-        ${
-          nInfo.online
-            ? t('views.monitor.topology.normalcy')
-            : t('views.monitor.topology.exceptions')
-        }
+        ${nInfo.online
+        ? t('views.monitor.topology.normalcy')
+        : t('views.monitor.topology.exceptions')
+      }
         </span></div>
         <div><strong>${t('views.monitor.topology.refreshTime')}：</strong><span>
         ${nInfo.refreshTime ?? '--'}
@@ -359,7 +359,7 @@ function handleRanderGraph(container: HTMLElement | null, data: GraphData) {
 /**
  * 获取图组数据渲染到画布
  */
-async function fnGraphDataLoad() { 
+async function fnGraphDataLoad() {
   const dataNe = await fnGraphDataBase();
   Object.assign(graphData, dataNe);
   graphG6.value = handleRanderGraph(graphG6Dom.value, dataNe);
@@ -417,7 +417,7 @@ async function fnGraphDataBase() {
           target: id,
         });
       }
-      item.children.forEach((v: any) => {});
+      item.children.forEach((v: any) => { });
       continue;
     }
   }