feat: 基站状态补充randId列

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",

src/i18n/locales/zh-CN.ts

@@ -875,6 +875,7 @@ export default {
         list: "列表",
         topology: "拓扑图",
         nbName: "设备名称",
+        nbId: "设备ID",
         ueNum: "在线用户数",
         topologyTitle: "基站状态关系图",
         name: "基站名称",

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',
@@ -290,62 +299,43 @@ watch(
 </script>
 
 <template>
-  <ProModal
+  <ProModal :drag="true" :destroyOnClose="true" :width="1200" :title="props.title" :open="props.open" :keyboard="false"
-    :drag="true"
+    :mask-closable="false" @cancel="fnModalCancel" :footer="null">
-    :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
+          <a-form-item :label="t('views.neData.baseStation.state')" name="status">
-            :label="t('views.neData.baseStation.state')"
+            <a-select v-model:value="queryParams.status" allow-clear :placeholder="t('common.selectPlease')"
-            name="status"
+              :options="nbStateOptions">
-          >
-            <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
+          <a-form-item :label="t('views.neData.baseStation.time')" name="queryRangePicker">
-            :label="t('views.neData.baseStation.time')"
+            <a-range-picker v-model:value="queryRangePicker" :bordered="true" :allow-clear="true" style="width: 100%"
-            name="queryRangePicker"
+              :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
-          >
-            <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
+    <a-table class="table" row-key="id" :columns="tableColumns" :loading="tableState.loading"
-      class="table"
+      :data-source="tableState.data" :size="tableState.size" :pagination="tablePagination"
-      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
+          <DictTag :options="nbStateOptions" :value="record.state" value-default="OFF" />
-            :options="nbStateOptions"
-            :value="record.state"
-            value-default="OFF"
-          />
         </template>
       </template>
     </a-table>

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,8 +647,7 @@ function fnModalImportUpload(file: File) {
 /**对话框表格信息导入模板 */
 async function fnModalImportTemplate() {
   const baseUrl = import.meta.env.VITE_HISTORY_BASE_URL;
-  const xlsxUrl = `${
+  const xlsxUrl = `${baseUrl.length === 1 && baseUrl.indexOf('/') === 0
-    baseUrl.length === 1 && baseUrl.indexOf('/') === 0
       ? ''
       : baseUrl.indexOf('/') === -1
         ? '/' + baseUrl
@@ -688,46 +693,35 @@ onMounted(() => {
 
 <template>
   <div>
-    <a-card
+    <a-card :bordered="false" :body-style="{ marginBottom: '24px', paddingBottom: 0 }">
-      :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
+              <a-cascader v-model:value="neTypeAndId" :options="neCascaderOptions" :allow-clear="false"
-                v-model:value="neTypeAndId"
+                :placeholder="t('common.selectPlease')" @change="fnGetList" />
-                :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
+            <a-form-item :label="t('views.neData.baseStation.state')" name="state">
-              :label="t('views.neData.baseStation.state')"
+              <a-select v-model:value="queryParams.state" :options="nbState" :placeholder="t('common.selectPlease')"
-              name="state"
+                @change="fnGetList" />
-            >
-              <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
+          <a-button type="default" :disabled="tableState.selectedRowKeys.length != 1"
-            type="default"
+            :loading="modalState.confirmLoading" @click.prevent="fnModalVisibleByEdit('0')">
-            :disabled="tableState.selectedRowKeys.length != 1"
+            <template #icon>
-            :loading="modalState.confirmLoading"
+              <FormOutlined />
-            @click.prevent="fnModalVisibleByEdit('0')"
+            </template>
-          >
-            <template #icon><FormOutlined /></template>
             {{ t('common.editText') }}
           </a-button>
-          <a-button
+          <a-button type="default" danger :disabled="tableState.selectedRowKeys.length <= 0"
-            type="default"
+            :loading="modalState.confirmLoading" @click.prevent="fnRecordDelete('0')">
-            danger
+            <template #icon>
-            :disabled="tableState.selectedRowKeys.length <= 0"
+              <DeleteOutlined />
-            :loading="modalState.confirmLoading"
+            </template>
-            @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
+            <template v-if="
-              v-if="
               queryParams.state === undefined || queryParams.state === 'ON'
-              "
+            ">
-            >
               {{ t('views.neData.baseStation.online') }}:
               <strong style="color: green">{{ stateNum[0] }} </strong>
             </template>
-            <template
+            <template v-if="
-              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
+      <a-table class="table" row-key="index" :columns="tableColumns" :loading="tableState.loading"
-        class="table"
+        :data-source="tableState.data" :size="tableState.size" :pagination="tablePagination" :row-selection="{
-        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)' }"
-        :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
+            <DictTag :options="nbState" :value="record.state" value-default="OFF" />
-              :options="nbState"
-              :value="record.state"
-              value-default="OFF"
-            />
           </template>
         </template>
       </a-table>
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <ProModal
+    <ProModal :drag="true" :width="500" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
-      :drag="true"
+      :open="modalState.openByEdit" :title="modalState.title" :confirm-loading="modalState.confirmLoading"
-      :width="500"
+      @ok="fnModalOk" @cancel="fnModalCancel">
-      :destroyOnClose="true"
+      <a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }" :labelWrap="true">
-      :keyboard="false"
+        <a-form-item :label="t('views.neData.baseStation.name')" name="name" v-bind="modalStateFrom.validateInfos.name">
-      :mask-closable="false"
+          <a-input v-model:value="modalState.from.name" allow-clear :maxlength="64">
-      :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
+        <a-form-item :label="t('views.neData.baseStation.position')" name="position"
-          :label="t('views.neData.baseStation.position')"
+          v-bind="modalStateFrom.validateInfos.position">
-          name="position"
+          <a-input v-model:value="modalState.from.position" allow-clear :maxlength="64">
-          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
+        <a-form-item v-if="!modalState.from.state" :label="t('views.neData.baseStation.address')" name="address"
-          v-if="!modalState.from.state"
+          v-bind="modalStateFrom.validateInfos.address">
-          :label="t('views.neData.baseStation.address')"
+          <a-input v-model:value="modalState.from.address" allow-clear :maxlength="64">
-          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
+    <HistoryModal v-if="neTypeAndId.length > 1" v-model:open="modalState.openByHistory"
-      v-if="neTypeAndId.length > 1"
+      :title="t('views.neData.baseStation.history')" :ne-type="neTypeAndId[0]" :ne-id="neTypeAndId[1]"
-      v-model:open="modalState.openByHistory"
+      @cancel="fnModalCancel"></HistoryModal>
-      :title="t('views.neData.baseStation.history')"
-      :ne-type="neTypeAndId[0]"
-      :ne-id="neTypeAndId[1]"
-      @cancel="fnModalCancel"
-    ></HistoryModal>
 
     <!-- 上传导入表格数据文件框 -->
-    <UploadModal
+    <UploadModal :title="t('common.import')" @upload="fnModalImportUpload" @close="fnModalImportClose"
-      :title="t('common.import')"
+      v-model:open="modalState.openByImport" :ext="['.xls', '.xlsx']" :size="10">
-      @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
+            <a-button type="link" :title="t('views.system.user.downloadObj')" @click.prevent="fnModalImportTemplate">
-              type="link"
-              :title="t('views.system.user.downloadObj')"
-              @click.prevent="fnModalImportTemplate"
-            >
               {{ t('views.system.user.downloadObj') }}
             </a-button>
           </a-col>
         </a-row>
-        <a-textarea
+        <a-textarea :disabled="true" :hidden="modalState.importMsgArr.length <= 0"
-          :disabled="true"
+          :value="modalState.importMsgArr.join('\r\n')" :auto-size="{ minRows: 2, maxRows: 8 }"
-          :hidden="modalState.importMsgArr.length <= 0"
+          style="background-color: transparent; color: rgba(0, 0, 0, 0.85)" />
-          :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>

src/views/neData/base-station/topology.vue

@@ -132,8 +132,7 @@ const graphNodeTooltip = new Tooltip({
         "
         >
         <div><strong>${t('views.neData.baseStation.state')}：</strong><span>
-        ${
+        ${nInfo.state === 'ON'
-          nInfo.state === 'ON'
           ? t('views.neData.baseStation.online')
           : t('views.neData.baseStation.offline')
         }
@@ -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,8 +170,7 @@ const graphNodeTooltip = new Tooltip({
         "
         >
         <div><strong>${t('views.monitor.topology.state')}：</strong><span>
-        ${
+        ${nInfo.online
-          nInfo.online
         ? t('views.monitor.topology.normalcy')
         : t('views.monitor.topology.exceptions')
       }