From 5a64afe2095c2d606fecc39b8bfb02fde623c719 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Sat, 8 Feb 2025 18:07: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=AE=B0=E5=BD=95=E4=B8=8A=E6=8A=A5=E5=92=8C=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/neData/nb-state.ts                    |  30 ++
 src/i18n/locales/en-US.ts                     |   2 +
 src/i18n/locales/zh-CN.ts                     |   2 +
 .../base-station/components/history.vue       | 389 ++++++++++++++++++
 .../ne-data/base-station/components/list.vue  | 110 ++++-
 5 files changed, 526 insertions(+), 7 deletions(-)
 create mode 100644 src/api/neData/nb-state.ts
 create mode 100644 src/views/ne-data/base-station/components/history.vue

diff --git a/src/api/neData/nb-state.ts b/src/api/neData/nb-state.ts
new file mode 100644
index 00000000..a5f9f91d
--- /dev/null
+++ b/src/api/neData/nb-state.ts
@@ -0,0 +1,30 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 历史记录列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listNBState(query: Record<string, any>) {
+  return request({
+    url: '/neData/nb-state/list',
+    method: 'get',
+    params: query,
+    timeout: 60_000,
+  });
+}
+
+/**
+ * 历史记录列表导出
+ * @param data 查询列表条件
+ * @returns object
+ */
+export function exportNBState(data: Record<string, any>) {
+  return request({
+    url: '/neData/nb-state/export',
+    method: 'post',
+    data,
+    responseType: 'blob',
+    timeout: 60_000,
+  });
+}
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 3a43b73e..11003b22 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -725,6 +725,8 @@ export default {
         time: "Change Time",
         addRadio: "Add Radio Info",
         editRadio: "Edit Radio Info",
+        history: "Status History",
+        exportTip: "Confirm exporting xlsx table files based on search criteria?",
       },
     },
     neUser: {
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 0611fd9c..4ec67b39 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -725,6 +725,8 @@ export default {
         time: "变更时间",
         addRadio: "添加基站信息",
         editRadio: "更新基站信息",
+        history: "历史记录",
+        exportTip: "确认根据搜索条件导出xlsx表格文件吗?",
       },
     },
     neUser: {
diff --git a/src/views/ne-data/base-station/components/history.vue b/src/views/ne-data/base-station/components/history.vue
new file mode 100644
index 00000000..8d75084a
--- /dev/null
+++ b/src/views/ne-data/base-station/components/history.vue
@@ -0,0 +1,389 @@
+<script setup lang="ts">
+import { reactive, ref, toRaw, watch } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { saveAs } from 'file-saver';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useI18n from '@/hooks/useI18n';
+import { exportNBState, listNBState } from '@/api/neData/nb-state';
+import { Dayjs } from 'dayjs';
+const { t } = useI18n();
+const emit = defineEmits(['cancel', 'update:open']);
+const props = defineProps({
+  title: {
+    type: String,
+    default: '标题',
+  },
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  /**网元ID */
+  neId: {
+    type: String,
+    default: false,
+  },
+  neType: {
+    type: String,
+    default: false,
+  },
+});
+
+/**开始结束时间 */
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>(undefined);
+/**状态字典 */
+const nbStateOptions = ref<DictType[]>([
+  {
+    value: 'ON',
+    label: t('views.neData.baseStation.online'),
+    tagType: 'green',
+    tagClass: '',
+  },
+  {
+    value: 'OFF',
+    label: t('views.neData.baseStation.offline'),
+    tagType: 'red',
+    tagClass: '',
+  },
+]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元 */
+  neType: '',
+  neId: '',
+  /**排序字段 */
+  sortField: 'id',
+  sortOrder: 'desc',
+  /**状态 */
+  status: undefined as undefined | string,
+  /**开始时间 */
+  startTime: undefined as undefined | number,
+  /**结束时间 */
+  endTime: undefined as undefined | number,
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    status: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    pageNum: 1,
+    pageSize: 20,
+  });
+  queryRangePicker.value = undefined;
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns = ref<ColumnsType>([
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 80,
+  },
+  {
+    title: t('views.neData.baseStation.name'),
+    dataIndex: 'name',
+    align: 'left',
+    resizable: true,
+    width: 120,
+    minWidth: 100,
+    maxWidth: 250,
+    ellipsis: true,
+  },
+  {
+    title: t('views.neData.baseStation.position'),
+    dataIndex: 'position',
+    align: 'left',
+    resizable: true,
+    width: 150,
+    minWidth: 100,
+    maxWidth: 400,
+    ellipsis: true,
+  },
+  {
+    title: t('views.neData.baseStation.address'),
+    dataIndex: 'address',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.neData.baseStation.nbName'),
+    dataIndex: 'nbName',
+    align: 'left',
+    resizable: true,
+    width: 100,
+    minWidth: 100,
+    maxWidth: 200,
+  },
+  // {
+  //   title: t('views.neData.baseStation.ueNum'),
+  //   dataIndex: 'ueNum',
+  //   align: 'left',
+  //   width: 80,
+  // },
+  {
+    title: t('views.neData.baseStation.state'),
+    dataIndex: 'state',
+    key: 'state',
+    align: 'left',
+    width: 80,
+  },
+  {
+    title: t('views.neData.baseStation.time'),
+    dataIndex: 'time',
+    align: 'left',
+    width: 150,
+  },
+]);
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) =>
+    t('common.tablePaginationTotal', { total: total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**列表导出 */
+function fnExportList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.neData.baseStation.exportTip'),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      const querys = toRaw(queryParams);
+      exportNBState(querys)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            saveAs(res.data, `nb_state_records_export_${Date.now()}.xlsx`);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+        });
+    },
+  });
+}
+
+/**查询字典数据列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+
+  // 时间范围
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.startTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.startTime = undefined;
+    queryParams.endTime = undefined;
+  }
+
+  listNBState(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+/**弹框取消按钮事件 */
+function fnModalCancel() {
+  emit('update:open', false);
+  emit('cancel');
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.open,
+  val => {
+    if (val) {
+      queryParams.neType = props.neType;
+      queryParams.neId = props.neId;
+      // 获取列表数据
+      fnGetList();
+    }
+  }
+);
+</script>
+
+<template>
+  <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-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>
+        </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>
+                {{ t('common.search') }}
+              </a-button>
+              <a-button type="default" @click.prevent="fnQueryReset">
+                <template #icon><ClearOutlined /></template>
+                {{ t('common.reset') }}
+              </a-button>
+              <a-button type="dashed" @click.prevent="fnExportList()">
+                <template #icon><ExportOutlined /></template>
+                {{ t('common.export') }}
+              </a-button>
+            </a-space>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+
+    <!-- 表格列表 -->
+    <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)"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'state'">
+          <DictTag
+            :options="nbStateOptions"
+            :value="record.state"
+            value-default="OFF"
+          />
+        </template>
+      </template>
+    </a-table>
+  </ProModal>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>
diff --git a/src/views/ne-data/base-station/components/list.vue b/src/views/ne-data/base-station/components/list.vue
index 3d62cfff..d8d563fa 100644
--- a/src/views/ne-data/base-station/components/list.vue
+++ b/src/views/ne-data/base-station/components/list.vue
@@ -1,27 +1,36 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw, computed } from 'vue';
+import {
+  reactive,
+  ref,
+  onMounted,
+  toRaw,
+  computed,
+  defineAsyncComponent,
+} from 'vue';
 import { Form, message, Modal } from 'ant-design-vue';
 import { SizeType } from 'ant-design-vue/es/config-provider';
 import { ColumnsType } from 'ant-design-vue/es/table';
 import { ProModal } from 'antdv-pro-modal';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+const { t } = useI18n();
 import {
   addAMFNbState,
   delAMFNbState,
   editAMFNbState,
   listAMFNbStatelist,
 } from '@/api/neData/amf';
-const { t } = useI18n();
-import { useRoute } from 'vue-router';
 import {
   addMMENbState,
   delMMENbState,
   editMMENbState,
   listMMENbStatelist,
 } from '@/api/neData/mme';
-const route = useRoute();
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import saveAs from 'file-saver';
+import { writeSheet } from '@/utils/execl-utils';
+// 异步加载组件
+const HistoryModal = defineAsyncComponent(() => import('./history.vue'));
 
 const nbState = ref<DictType[]>([
   {
@@ -302,6 +311,8 @@ const stateNum = computed(() => {
 type ModalStateType = {
   /**新增框或修改框是否显示 */
   openByEdit: boolean;
+  /**历史框 */
+  openByHistory: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -313,6 +324,7 @@ type ModalStateType = {
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
   openByEdit: false,
+  openByHistory: false,
   title: 'NB Config List',
   from: {
     address: '',
@@ -432,9 +444,77 @@ function fnModalOk() {
  */
 function fnModalCancel() {
   modalState.openByEdit = false;
+  modalState.openByHistory = false;
   modalStateFrom.resetFields();
 }
 
+/**跳转字典数据页面 */
+function fnHistoryView() {
+  modalState.openByHistory = true;
+}
+
+/**导出当前列表 */
+function fnExportList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.neData.baseStation.exportTip'),
+    onOk: async () => {
+      if (modalState.confirmLoading) return;
+      modalState.confirmLoading = true;
+
+      let rows: Record<string, any>[] = [];
+      // 勾选的网元数据
+      if (tableState.selectedRowKeys.length > 0) {
+        rows = tableState.data.filter(item =>
+          tableState.selectedRowKeys.includes(item.index)
+        );
+      } else {
+        rows = tableState.data;
+      }
+
+      const dataArr: Record<string, any>[] = [];
+      for (const row of rows) {
+        let data: any = {};
+        data[t('views.neData.baseStation.name')] = row.name;
+        data[t('views.neData.baseStation.position')] = row.position;
+        data[t('views.neData.baseStation.address')] = row.address;
+        data[t('views.neData.baseStation.nbName')] = row.nbName;
+        data[t('views.neData.baseStation.ueNum')] = row.ueNum;
+        nbState.value.find(item => {
+          if (item.value === row.state) {
+            data[t('views.neData.baseStation.state')] = item.label;
+          }
+        });
+        data[t('views.neData.baseStation.time')] = row.time || '-';
+        dataArr.push(data);
+      }
+
+      // 导出
+      writeSheet(dataArr, 'Sheet1', {
+        header: [
+          t('views.neData.baseStation.name'),
+          t('views.neData.baseStation.position'),
+          t('views.neData.baseStation.address'),
+          t('views.neData.baseStation.nbName'),
+          t('views.neData.baseStation.ueNum'),
+          t('views.neData.baseStation.state'),
+          t('views.neData.baseStation.time'),
+        ],
+      }).then(fileBlob =>
+        saveAs(
+          fileBlob,
+          `${t('views.neData.baseStation.state')}_${t(
+            'views.neData.baseStation.list'
+          )}_${Date.now()}.xlsx`
+        )
+      );
+
+      modalState.confirmLoading = false;
+      tableState.selectedRowKeys = [];
+    },
+  });
+}
+
 onMounted(() => {
   // 获取网元网元列表
   useNeInfoStore()
@@ -450,8 +530,7 @@ onMounted(() => {
           });
           neCascaderOptions.value = arr;
           // 无查询参数neType时 默认选择AMF
-          const queryNeType = (route.query.neType as string) || 'AMF';
-          const item = arr.find(s => s.value === queryNeType);
+          const item = arr.find(s => s.value === 'AMF');
           if (item && item.children) {
             const info = item.children[0];
             neTypeAndId.value = [info.neType, info.neId];
@@ -554,6 +633,14 @@ onMounted(() => {
             <template #icon><DeleteOutlined /></template>
             {{ t('common.deleteText') }}
           </a-button>
+          <a-button type="default" @click.prevent="fnHistoryView()">
+            <template #icon><ContainerOutlined /></template>
+            {{ t('views.neData.baseStation.history') }}
+          </a-button>
+          <a-button type="dashed" @click.prevent="fnExportList()">
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </a-button>
         </a-space>
       </template>
 
@@ -677,6 +764,15 @@ onMounted(() => {
         </a-form-item>
       </a-form>
     </ProModal>
+
+    <!-- 状态历史框 -->
+    <HistoryModal
+      v-model:open="modalState.openByHistory"
+      :title="t('views.neData.baseStation.history')"
+      :ne-type="neTypeAndId[0]"
+      :ne-id="neTypeAndId[1]"
+      @cancel="fnModalCancel"
+    ></HistoryModal>
   </div>
 </template>