From 6b2682b3d3a25e5668ac37b03d622500f788448b Mon Sep 17 00:00:00 2001
From: lai <10633968+laiyujun1@user.noreply.gitee.com>
Date: Fri, 1 Aug 2025 15:49:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Ecbc=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/cbc/cbe.ts          |   75 ++
 src/i18n/locales/en-US.ts   |   48 +
 src/i18n/locales/zh-CN.ts   |   48 +
 src/views/cbc/cbe/index.vue | 1711 +++++++++++++++++++++++++++++++++++
 4 files changed, 1882 insertions(+)
 create mode 100644 src/api/cbc/cbe.ts
 create mode 100644 src/views/cbc/cbe/index.vue

diff --git a/src/api/cbc/cbe.ts b/src/api/cbc/cbe.ts
new file mode 100644
index 00000000..07df3200
--- /dev/null
+++ b/src/api/cbc/cbe.ts
@@ -0,0 +1,75 @@
+import { request } from '@/plugins/http-fetch';
+
+
+
+/**
+ * CBC列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listCBC(query: Record<string, any>) {
+  return request({
+    url: `/neData/cbc/message/list`,
+    method: 'GET',
+    params: query,
+    timeout: 30_000,
+  });
+}
+
+
+
+/**
+ * CBC签约用户新增
+ * @param data 签约对象
+ * @returns object
+ */
+export function addCBC(data: Record<string, any>) {
+  return request({
+    url: `/neData/cbc/message?neId=${data.neId}`,
+    method: 'POST',
+    data: data,
+    timeout: 180_000,
+  });
+}
+
+
+
+
+export function updateCBCStatus(data:any) {
+  return request({
+    url: `/neData/cbc/message/${data.id}/${data.status}?neId=${data.neId}`,
+    method: 'PUT',
+    timeout: 180_000,
+  });
+}
+
+
+export function updateCBC(data:any) {
+  return request({
+    url: `/neData/cbc/message/${data.id}?neId=${data.neId}`,
+    method: 'PUT',
+    data,
+    timeout: 180_000,
+  });
+}
+
+
+
+/**
+ * CBC删除
+ * @param data 签约对象
+ * @returns object
+ */
+export function delCBC(neId: string, id: string) {
+  return request({
+    url: `/neData/cbc/message/${id}?neId=${neId}`,
+    method: 'DELETE',
+    timeout: 180_000,
+  });
+}
+
+
+
+
+
+
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 9a238246..cba4fafa 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -357,6 +357,54 @@ export default {
         description: "No data yet, try refreshing",
       },
     },
+    cbc:{
+      cbe:{
+        neType:'CBC Object',
+        title: ' CBC Event',
+        delTip: 'Confirm deletion of the event data item numbered [{num}]?',
+        eventName: 'Event Name',
+        startTime: 'Start Time',
+        endTime: 'End Time',
+        repetitionPeriod: 'Repetition Period',
+        numOfBcast: 'Number of Broadcasts',
+        msgPWSType: 'Message Type',
+        messageId: 'Message ID',
+        displayMode: 'Display Mode',
+        geoScope:' Geographic Scope',
+        emergencyUserAlert: 'Emergency User Alert',
+        activatePopup: 'Activate Popup',
+        warningType: 'Warning Type',
+        language:' Language',
+        warningMessageText:' Broadcast Content',
+        status: 'Status',
+        warningAreaType: 'Warning Area Type',
+        taiListTip:'TAI List cannot be empty',
+        taiSonTip:'TAI List each item MCC, MNC, TAC cannot be empty',
+        eutraListTip:'EUTRA CellId List cannot be empty',
+        eutraSonTip:'EUTRA CellId List each item MCC, MNC, CellId cannot be empty',
+        nrTip:'NR CellId List cannot be empty',
+        nrSonTip:'NR CellId List each item MCC, MNC, CellId cannot be empty',
+        areaTip:'Area ID List cannot be empty',
+        areaSonTip:'Area ID List each item AreaID cannot be empty',
+        messageIdProfile:'Message ID Profile',
+        serialNumProfile:'Serial Num Profile',
+        warningTypeProfile:'Warning Type Profile',
+        warningMessageProfile:'Warning Message Profile',
+        etws:'Earthquake and Tsunami Warning System',
+        cmas:'Commercial Mobile Alert System',
+        createdAt:'Create Time',
+        eventNameHelp:'If it is CMAS, the recommended prefix is cmas_xxx. If it is ETWS, the recommended prefix is etws_xxx',
+        repetitionPeriodHelp:'Unit is seconds',
+        numOfBcastHelp:'Unit is seconds',
+        cellListTip:'CellId List cannot be empty',
+        cellListSonTip:'MCC、MNC、 Cannot be empty, and at least one EUTRA CellId/NR CellId must be filled in',
+        letupSure:'Do you confirm the status of the broadcast event with the modification number 【{id}】?',
+        tacHelp:'The TAC value is a decimal string, separated by ";" for multiple TAC values.',
+        cellIdHelp:'The CellId value is a hexadecimal string, separated by ";" for multiple CellId values.',
+        areaId:'The areaId value is a hexadecimal string.',
+        detail:'Detail',
+      }
+    },    
     dashboard: {
       overview:{
         title: "Core Network Dashboard",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 1cd2327a..0eddc645 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -357,6 +357,54 @@ export default {
         description: "暂无数据，尝试刷新看看",
       },
     },
+    cbc:{
+      cbe:{
+        neType:'CBC网元对象',
+        title: '广播事件',
+        delTip: '确认删除编号为【{num}】的CBC事件吗？',
+        eventName: '事件名称',
+        startTime: '开始时间',
+        endTime: '结束时间',
+        repetitionPeriod: '广播周期',
+        numOfBcast: '广播次数',
+        msgPWSType: '消息类型',
+        messageId: '消息编号',
+        displayMode: '显示模式',
+        geoScope:'广播覆盖范围',
+        emergencyUserAlert: '紧急用户提示',
+        activatePopup: '弹窗提示',
+        warningType: '预警类型标识',
+        language:'语言',
+        warningMessageText:'广播内容',
+        status: '状态',
+        warningAreaType: '预警区域类型',
+        taiListTip:'TAI List 不能为空',
+        taiSonTip:'TAI List 每项的 MCC、MNC、TAC 都不能为空',
+        eutraListTip:'EUTRA CellId List 不能为空',
+        eutraSonTip:'EUTRA CellId List 每项的 MCC、MNC、CellId 都不能为空',
+        nrTip:'NR CellId List 不能为空',
+        nrSonTip:'NR CellId List 每项的 MCC、MNC、CellId 都不能为空',
+        areaTip:'Area ID List 不能为空',
+        areaSonTip:'Area ID List 每项的 AreaID 都不能为空',
+        messageIdProfile:'消息标识配置',
+        serialNumProfile:'序列号配置',
+        warningTypeProfile:'预警类型配置',
+        warningMessageProfile:'预警消息配置',
+        etws:'地震海啸预警',
+        cmas:'公共预警广播',
+        createdAt:'创建时间',
+        eventNameHelp:'如果为CMAS,推荐前缀为cmas_xxx,如果为ETWS,推荐前缀为etws_xxx',
+        repetitionPeriodHelp:'单位是秒',
+        numOfBcastHelp:'单位是秒',
+        cellListTip:'CellId List不能为空',
+        cellListSonTip:'MCC、MNC、不能为空以及EUTRA CellId/NR CellId至少填写一个',
+        letupSure:'确认修改编号为 【{id}】 的广播事件的状态嘛?',
+        tacHelp:'TAC值是十进制字符串,通过";"分隔多个TAC值',
+        cellIdHelp:'CellId值是十六进制字符串,通过";"分隔多个CellId值',
+        areaId:'areaId值是十六进制字符串',
+        detail:'详情',
+      }
+    },    
     dashboard: {
       overview:{
         title: "核心网系统看板",
diff --git a/src/views/cbc/cbe/index.vue b/src/views/cbc/cbe/index.vue
new file mode 100644
index 00000000..0b59d8ad
--- /dev/null
+++ b/src/views/cbc/cbe/index.vue
@@ -0,0 +1,1711 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form, notification } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
+import useNeListStore from '@/store/modules/ne_list';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import {
+  addCBC,
+  delCBC,
+  listCBC,
+  updateCBCStatus,
+  updateCBC,
+} from '@/api/cbc/cbe';
+import { parseDateToStr, parseDuration } from '@/utils/date-utils';
+
+const { t } = useI18n();
+
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**记录开始结束时间 */
+let queryRangePicker = ref<[string, string]>(['', '']);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元ID */
+  neId: undefined,
+  status: undefined,
+  eventName:'',
+  /**记录开始时间 */
+  startTime: '',
+  /**记录结束时间 */
+  endTime: '',
+  /**排序字段 */
+  sortField: 'id',
+  /**排序方式 */
+  sortOrder: 'asc',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    eventName:'',
+    status: '',
+    sortField: 'id',
+    sortOrder: 'asc',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  queryRangePicker.value = ['', ''];
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.cbc.cbe.eventName'),
+    dataIndex: 'messageJson',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const messageJson = opt.value;
+      return messageJson.eventName;
+    },
+  },
+  {
+    title: t('views.cbc.cbe.repetitionPeriod'),
+    dataIndex: 'messageJson',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const messageJson = opt.value;
+      return messageJson.repetitionPeriod;
+    },
+  },
+  {
+    title: t('views.cbc.cbe.numOfBcast'),
+    dataIndex: 'messageJson',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const messageJson = opt.value;
+      return messageJson.numOfBcast;
+    },
+  },
+  {
+    title: t('views.cbc.cbe.startTime'),
+    dataIndex: 'messageJson',
+    align: 'left',
+    width: 250,
+    customRender(opt) {
+      const messageJson = opt.value;
+      return messageJson.startTime;
+    },
+  },
+  {
+    title: t('views.cbc.cbe.status'),
+    dataIndex: 'status',
+    key: 'status',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.cbc.cbe.detail'),
+    dataIndex: 'detail',
+    align: 'center',
+    width: 250,
+  },
+
+  {
+    title: t('views.cbc.cbe.createdAt'),
+    dataIndex: 'createdAt',
+    align: 'center',
+    width: 250,
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value / 1000);
+    },
+  },
+  {
+    title: t('common.operate'),
+    key: 'cbeId',
+    align: 'left',
+  },
+];
+
+/**表格字段列排序 */
+let tableColumnsDnd = ref<ColumnsType>([]);
+
+/**表格分页器参数 */
+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 }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
+function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+  const { field, order } = sorter;
+  if (order) {
+    queryParams.sortField = field;
+    queryParams.sortOrder = order.replace('end', '');
+  } else {
+    queryParams.sortOrder = 'asc';
+  }
+  fnGetList(1);
+}
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
+const modalStateFromOption = reactive({
+  etwsJson: [
+    { label: '4352(Earthquake Warning Message)', value: 4352 },
+    {
+      label: '4353(Tsunami Warning Message)',
+      value: 4353,
+    },
+    {
+      label: '4354(Earthquake and Tsunami combined Warning Message)',
+      value: 4354,
+    },
+    {
+      label: '4355( Test Message (UE may or may not discard this) )',
+      value: 4355,
+    },
+    { label: '4356(Messages related to other emergency types)', value: 4356 },
+    { label: '4357(Future Extension)', value: 4357 },
+    { label: '4358(Future Extension)', value: 4358 },
+    { label: '4359(Future Extension)', value: 4359 },
+  ],
+  cmasJson: [
+    { label: '4370(Presidential Level Alerts)', value: 4370 },
+    {
+      label:
+        '4371(Extreme Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Observed)',
+      value: 4371,
+    },
+    {
+      label:
+        '4372(Extreme Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Likely)',
+      value: 4372,
+    },
+    {
+      label:
+        '4373(Severe Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Observed)',
+      value: 4373,
+    },
+    {
+      label:
+        '4374(Severe Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Likely)',
+      value: 4374,
+    },
+    {
+      label:
+        '4375(Severe Alerts with Severity of Severe, Urgency of Immediate and Certainty of Observed)',
+      value: 4375,
+    },
+    {
+      label:
+        '4376(Severe Alerts with Severity of Severe, Urgency of Immediate and Certainty of Likely)',
+      value: 4376,
+    },
+    {
+      label:
+        '4377(Severe Alerts with Severity of Severe, Urgency of Expected and Certainty of Observed)',
+      value: 4377,
+    },
+    {
+      label:
+        '4378(Severe Alerts with Severity of Severe, Urgency of Expected and Certainty of Likely)',
+      value: 4378,
+    },
+    { label: '4379(Child Abduction Emergency (or Amber Alert) )', value: 4379 },
+    { label: '4380(Required Monthly Test)', value: 4380 },
+    { label: '4381(CMAS Exercise)', value: 4381 },
+    { label: '4382(Operator defined use)', value: 4382 },
+    { label: '4383(Future Extension)', value: 4383 },
+    { label: '4384(Future Extension)', value: 4384 },
+    { label: '4385(Future Extension)', value: 4385 },
+    { label: '4386(Future Extension)', value: 4386 },
+    { label: '4387(Future Extension)', value: 4387 },
+    { label: '4388(Future Extension)', value: 4388 },
+    { label: '4389(Future Extension)', value: 4389 },
+    { label: '4390(Future Extension)', value: 4390 },
+    { label: '4391(Future Extension)', value: 4391 },
+    { label: '4392(Future Extension)', value: 4392 },
+    { label: '4393(Future Extension)', value: 4393 },
+    { label: '4394(Future Extension)', value: 4394 },
+    { label: '4395(Future Extension)', value: 4395 },
+    { label: '4396(Future Extension)', value: 4396 },
+    { label: '4397(Future Extension)', value: 4397 },
+    { label: '4398(Future Extension)', value: 4398 },
+    { label: '4399(Future Extension)', value: 4399 },
+  ],
+});
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**详情框是否显示 */
+  openByView: boolean;
+  /**新增框或修改框是否显示 */
+  openByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**更新加载数据按钮 loading */
+  loadDataLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByView: false,
+  openByEdit: false,
+  title: 'CBC CBE',
+  from: {
+    id: undefined,
+    eventName: 'cmas_',
+    startTime: '',
+    repetitionPeriod: '',
+    neId: '',
+
+    // amDat
+    numOfBcast: '',
+    //messageIdProfile
+    messageIdProfile: {
+      msgPWSType: 'CMAS', //
+      messageId: 4370,
+    },
+
+    //serialNumProfile
+    serialNumProfile: {
+      displayMode: 'normal',
+      geoScope: 'PLMNwide',
+    },
+
+    //warningTypeProfile
+    warningTypeProfile: {
+      warningType: '',
+      emergencyUserAlert: false,
+      activatePopup: true,
+    },
+    warningMessageProfile: {
+      language: 'English',
+      warningMessageText: '',
+    },
+    warningAreaType: 'tai', // 'tai' | 'eutra' | 'nr' |areaID
+    warningAreaList: {
+      taiList: [
+        {
+          plmnId: { mcc: '', mnc: '' },
+          tac: '',
+        },
+      ],
+      cellIdList: [
+        { plmnId: { mcc: '', mnc: '' }, eutraCellId: '', nrCellId: '' },
+      ],
+      eutraCellIdList: [],
+      nrCellIdList: [],
+      emergencyAreaIDList: [
+        {
+          areaId: '',
+        },
+      ],
+    },
+  },
+  confirmLoading: false,
+  loadDataLoading: false,
+});
+
+// TAI
+function addTai() {
+  modalState.from.warningAreaList.taiList.push({
+    plmnId: { mcc: '', mnc: '' },
+    tac: '',
+  });
+}
+function delTai(idx: number) {
+  modalState.from.warningAreaList.taiList.splice(idx, 1);
+}
+
+// EUTRA
+function addEutra() {
+  modalState.from.warningAreaList.eutraCellIdList.push({
+    plmnId: { mcc: '', mnc: '' },
+    cellId: '',
+  });
+}
+function delEutra(idx: number) {
+  modalState.from.warningAreaList.eutraCellIdList.splice(idx, 1);
+}
+
+// NR
+function addNr() {
+  modalState.from.warningAreaList.nrCellIdList.push({
+    plmnId: { mcc: '', mnc: '' },
+    cellId: '',
+  });
+}
+function delNr(idx: number) {
+  modalState.from.warningAreaList.nrCellIdList.splice(idx, 1);
+}
+
+function addCellId() {
+  modalState.from.warningAreaList.cellIdList.push({
+    plmnId: { mcc: '', mnc: '' },
+    eutraCellId: '',
+    nrCellId: '',
+  });
+}
+function delCellId(idx: number) {
+  modalState.from.warningAreaList.cellIdList.splice(idx, 1);
+}
+
+function addArea() {
+  modalState.from.warningAreaList.emergencyAreaIDList.push({
+    areaId: '',
+  });
+}
+function delArea(idx: number) {
+  modalState.from.warningAreaList.emergencyAreaIDList.splice(idx, 1);
+}
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisibleByEdit(record?: any) {
+  if (!record) {
+    modalStateFrom.resetFields();
+    modalState.title = t('common.addText') + t('views.cbc.cbe.title');
+    modalState.openByEdit = true;
+  } else {
+    modalStateFrom.resetFields();
+    modalState.title = t('common.editText') + t('views.cbc.cbe.title');
+    modalState.openByEdit = true;
+    modalState.from = Object.assign(modalState.from, record.messageJson, {
+      id: record.id,
+      status: record.status,
+      neId: record.neId,
+    });
+  }
+}
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    eventName: [
+      {
+        required: true,
+        message: t('views.cbc.cbe.eventName') + t('common.unableNull'),
+      },
+    ],
+    repetitionPeriod: [
+      {
+        required: true,
+        message: t('views.cbc.cbe.repetitionPeriod') + t('common.unableNull'),
+      },
+    ],
+    numOfBcast: [
+      {
+        required: true,
+        message: t('views.cbc.cbe.numOfBcast') + t('common.unableNull'),
+      },
+    ],
+    msgPWSType: [
+      {
+        required: true,
+        message: t('views.cbc.cbe.msgPWSType') + t('common.unableNull'),
+      },
+    ],
+    messageId: [
+      {
+        required: true,
+        message: t('views.cbc.cbe.messageId') + t('common.unableNull'),
+      },
+    ],
+    emergencyUserAlert: [
+      {
+        required: true,
+        message: t('views.cbc.cbe.emergencyUserAlert') + t('common.unableNull'),
+      },
+    ],
+    activatePopup: [
+      {
+        required: true,
+        message: t('views.cbc.cbe.activatePopup') + t('common.unableNull'),
+      },
+    ],
+    // ['warningAreaList.taiList']: [
+    //   {
+    //     type: 'array',
+    //     required: true,
+    //     message: 'TAI列表不能为空',
+    //   },
+    //   {
+    //     validator: (rule:any, value:any) => {
+    //       if (!value || value.some((item:any) => !item.tac)) {
+    //         return Promise.reject('TAC不能为空');
+    //       }
+    //       return Promise.resolve();
+    //     },
+    //   },
+    // ],
+  })
+);
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  // 区域列表必填校验
+  const areaType = modalState.from.warningAreaType;
+  const areaList = modalState.from.warningAreaList;
+  let valid = true;
+  let errMsg = '';
+  if (areaType === 'tai') {
+    if (!areaList.taiList || areaList.taiList.length === 0) {
+      valid = false;
+      errMsg = t('views.cbc.cbe.taiListTip');
+    } else {
+      for (const item of areaList.taiList) {
+        if (!item.plmnId.mcc || !item.plmnId.mnc || !item.tac) {
+          valid = false;
+          errMsg = t('views.cbc.cbe.taiSonTip');
+          break;
+        }
+      }
+    }
+  } else if (areaType === 'cell') {
+    if (!areaList.cellIdList || areaList.cellIdList.length === 0) {
+      valid = false;
+      errMsg = t('views.cbc.cbe.cellListTip');
+    } else {
+      for (const item of areaList.cellIdList) {
+        if (
+          !item.plmnId.mcc ||
+          !item.plmnId.mnc ||
+          (!item.eutraCellId && !item.nrCellId)
+        ) {
+          valid = false;
+          errMsg = t('views.cbc.cbe.cellListSonTip');
+          break;
+        }
+      }
+    }
+  }
+  // else if (areaType === 'eutra') {
+  //   if (!areaList.eutraCellIdList || areaList.eutraCellIdList.length === 0) {
+  //     valid = false;
+  //     errMsg = t('views.cbc.cbe.eutraListTip');
+  //   } else {
+  //     for (const item of areaList.eutraCellIdList) {
+  //       if (!item.plmnId.mcc || !item.plmnId.mnc || !item.cellId) {
+  //         valid = false;
+  //         errMsg = t('views.cbc.cbe.eutraSonTip');
+  //         break;
+  //       }
+  //     }
+  //   }
+  // } else if (areaType === 'nr') {
+  //   if (!areaList.nrCellIdList || areaList.nrCellIdList.length === 0) {
+  //     valid = false;
+  //     errMsg = t('views.cbc.cbe.nrTip');
+  //   } else {
+  //     for (const item of areaList.nrCellIdList) {
+  //       if (!item.plmnId.mcc || !item.plmnId.mnc || !item.cellId) {
+  //         valid = false;
+  //         errMsg = t('views.cbc.cbe.nrSonTip');
+  //         break;
+  //       }
+  //     }
+  //   }
+  // }
+  else if (areaType === 'area') {
+    if (
+      !areaList.emergencyAreaIDList ||
+      areaList.emergencyAreaIDList.length === 0
+    ) {
+      valid = false;
+      errMsg = t('views.cbc.cbe.areaTip');
+    } else {
+      for (const item of areaList.emergencyAreaIDList) {
+        if (!item.areaId) {
+          valid = false;
+          errMsg = t('views.cbc.cbe.areaSonTip');
+          break;
+        }
+      }
+    }
+  }
+  if (!valid) {
+    message.error(errMsg, 3);
+    return;
+  }
+
+  if (modalState.from.warningAreaType === 'cell') {
+    // 清空原有
+    modalState.from.warningAreaList.eutraCellIdList = [];
+    modalState.from.warningAreaList.nrCellIdList = [];
+    for (const item of modalState.from.warningAreaList.cellIdList) {
+      if (item.eutraCellId) {
+        modalState.from.warningAreaList.eutraCellIdList.push({
+          plmnId: { ...item.plmnId },
+          cellId: item.eutraCellId,
+        });
+      }
+      if (item.nrCellId) {
+        modalState.from.warningAreaList.nrCellIdList.push({
+          plmnId: { ...item.plmnId },
+          cellId: item.nrCellId,
+        });
+      }
+    }
+  }
+
+  const from = Object.assign({}, toRaw(modalState.from));
+  from.neId = queryParams.neId;
+
+  //return;
+
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+
+      const result = from.id ? updateCBC(from) : addCBC(from);
+
+      const hide = message.loading(t('common.loading'), 0);
+      result
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              duration: 3,
+            });
+            fnGetList(1);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          fnModalCancel();
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  //modalState.openByView = false;
+  modalStateFrom.resetFields();
+}
+
+function fnRecordSend(record: any) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.cbc.cbe.letupSure', { id: record.id }),
+    onOk() {
+      const key = 'cbcSend';
+      message.loading({ content: t('common.loading'), key });
+      updateCBCStatus(record).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: 'Send',
+            key,
+            duration: 2,
+          });
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key: key,
+            duration: 2,
+          });
+        }
+          fnGetList();
+      });
+    },
+    onCancel() {
+      record.status = record.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE';
+    },
+  });
+}
+
+function fnRecordDelete(id: string) {
+  const neId = queryParams.neId;
+
+  if (!neId) return;
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.cbc.cbe.delTip', { num: id }),
+    onOk() {
+      modalState.loadDataLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delCBC(neId, id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            const msgContent = t('common.msgSuccess', {
+              msg: t('common.deleteText'),
+            });
+            message.success({
+              content: `${msgContent} : ID:${id}`,
+              duration: 3,
+            });
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          fnGetList();
+          modalState.loadDataLoading = false;
+        });
+    },
+  });
+}
+
+/**查询网元列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+    tablePagination.current = pageNum;
+  }
+
+  if (!queryRangePicker.value) {
+    queryRangePicker.value = ['', ''];
+  }
+
+  queryParams.startTime = queryRangePicker.value[0];
+  queryParams.endTime = queryRangePicker.value[1];
+
+  listCBC(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+
+      tablePagination.total = res.total;
+      tableState.data = res.data;
+
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+function fnModalChange(event: any) {
+  modalState.from.warningAreaList = {
+    taiList: [
+      {
+        plmnId: { mcc: '', mnc: '' },
+        tac: '',
+      },
+    ],
+    // eutraCellIdList: [
+    //   {
+    //     plmnId: { mcc: '', mnc: '' },
+    //     cellId: '',
+    //   },
+    // ],
+    // nrCellIdList: [
+    //   {
+    //     plmnId: { mcc: '', mnc: '' },
+    //     cellId: '',
+    //   },
+    // ],
+    cellIdList: [
+      {
+        plmnId: { mcc: '', mnc: '' },
+        eutraCellId: '',
+        nrCellId: '',
+      },
+    ],
+    emergencyAreaIDList: [
+      {
+        areaId: '',
+      },
+    ],
+  };
+}
+
+function pwsTypeChange(value: any) {
+  if (value === 'ETWS') {
+    modalState.from.warningTypeProfile.warningType = 'TEST';
+    modalState.from.serialNumProfile.displayMode = 'immediate';
+    modalState.from.warningTypeProfile.emergencyUserAlert = true;
+    modalState.from.warningTypeProfile.activatePopup = true;
+  } else if (value === 'CMAS') {
+    modalState.from.warningTypeProfile.warningType = '';
+    modalState.from.serialNumProfile.displayMode = 'normal';
+    modalState.from.warningTypeProfile.emergencyUserAlert = false;
+    modalState.from.warningTypeProfile.activatePopup = false;
+  }
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  useNeListStore()
+    .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 === 'CBC') {
+              arr.push({ value: i.neId, label: i.neName });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            queryParams.neId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item :label="t('views.cbc.cbe.neType')" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+                @change="fnGetList(1)"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item :label="t('views.cbc.cbe.eventName')" name="eventName">
+              <a-input v-model:value="queryParams.eventName" />
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item :label="t('views.cbc.cbe.status')" name="status">
+              <a-select
+                v-model:value="queryParams.status"
+                :options="[
+                  { label: 'ACTIVE', value: 'ACTIVE' },
+                  { label: 'INACTIVE', value: 'INACTIVE' },
+                ]"
+                :placeholder="t('common.selectPlease')"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.cbc.cbe.createdAt')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                allow-clear
+                bordered
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                style="width: 100%"
+              ></a-range-picker>
+            </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(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-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-flex wrap="wrap" gap="small">
+          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+            <template #icon>
+              <PlusOutlined />
+            </template>
+            {{ t('common.addText') }}
+          </a-button>
+        </a-flex>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon>
+                <ReloadOutlined />
+              </template>
+            </a-button>
+          </a-tooltip>
+
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon>
+                  <ColumnHeightOutlined />
+                </template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ y: 'calc(100vh - 480px)' }"
+        @change="fnTableChange"
+        @resizeColumn="(w: number, col: any) => (col.width = w)"
+        :row-selection="{
+          type: 'checkbox',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'cbeId'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.editText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByEdit(record)"
+                >
+                  <template #icon>
+                    <FormOutlined />
+                  </template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip>
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button
+                  type="link"
+                  danger
+                  :disabled="record.status === 'ACTIVE'"
+                  @click.prevent="fnRecordDelete(record.id)"
+                >
+                  <template #icon>
+                    <DeleteOutlined />
+                  </template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+
+          <template v-if="column.key === 'status'">
+            <a-switch
+              v-model:checked="record.status"
+              checked-value="ACTIVE"
+              checked-children="ACTIVE"
+              un-checked-value="INACTIVE"
+              un-checked-children="INACTIVE"
+              size="small"
+              @change="fnRecordSend(record)"
+            />
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
+      style="top: 0px"
+      :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
+      :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-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.cbc.cbe.eventName')"
+              name="eventName"
+              v-bind="modalStateFrom.validateInfos.eventName"
+              :help="t('views.cbc.cbe.eventNameHelp')"
+            >
+              <a-input
+                :disabled="modalState.from.id"
+                v-model:value="modalState.from.eventName"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.cbc.cbe.startTime')" name="startTime">
+              <a-date-picker
+                v-model:value="modalState.from.startTime"
+                show-time
+                type="date"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                style="width: 100%"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.cbc.cbe.endTime')" name="endTime">
+              <a-date-picker
+                v-model:value="modalState.from.endTime"
+                show-time
+                type="date"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                style="width: 100%"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.cbc.cbe.repetitionPeriod')"
+              name="repetitionPeriod"
+              v-bind="modalStateFrom.validateInfos.repetitionPeriod"
+              :help="t('views.cbc.cbe.repetitionPeriodHelp')"
+            >
+              <a-input-number
+                :min="0"
+                v-model:value="modalState.from.repetitionPeriod"
+                style="width: 100%"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.cbc.cbe.numOfBcast')"
+              name="numOfBcast"
+              v-bind="modalStateFrom.validateInfos.numOfBcast"
+              :help="t('views.cbc.cbe.numOfBcastHelp')"
+            >
+              <a-input-number
+                :min="0"
+                v-model:value="modalState.from.numOfBcast"
+                style="width: 100%"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row> </a-row>
+
+        <a-divider orientation="left">
+          {{ t('views.cbc.cbe.messageIdProfile') }}
+        </a-divider>
+
+        <a-row>
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item
+              :label="t('views.cbc.cbe.msgPWSType')"
+              name="msgPWSType"
+              :label-col="{ span: 6 }"
+              v-bind="modalStateFrom.validateInfos.msgPWSType"
+            >
+              <a-select
+                v-model:value="modalState.from.messageIdProfile.msgPWSType"
+                :disabled="modalState.from.id"
+                @change="pwsTypeChange"
+              >
+                <a-select-option value="CMAS"
+                  >CMAS({{ t('views.cbc.cbe.cmas') }})</a-select-option
+                >
+                <a-select-option value="ETWS"
+                  >ETWS({{ t('views.cbc.cbe.etws') }})</a-select-option
+                >
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item
+              :label="t('views.cbc.cbe.messageId')"
+              name="messageId"
+              v-bind="modalStateFrom.validateInfos.messageId"
+            >
+              <a-select
+                v-model:value="modalState.from.messageIdProfile.messageId"
+                style="width: 100%"
+                :disabled="modalState.from.id"
+                placeholder="Please select"
+                :options="
+                  modalState.from.msgPWSType === 'ETWS'
+                    ? modalStateFromOption.etwsJson
+                    : modalStateFromOption.cmasJson
+                "
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-divider orientation="left">
+          {{ t('views.cbc.cbe.serialNumProfile') }}
+        </a-divider>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.cbc.cbe.displayMode')"
+              name="displayMode"
+            >
+              <a-select
+                v-model:value="modalState.from.serialNumProfile.displayMode"
+              >
+                <a-select-option value="normal">normal</a-select-option>
+                <a-select-option value="immediate">immediate</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.cbc.cbe.geoScope')" name="geoScope">
+              <a-select
+                v-model:value="modalState.from.serialNumProfile.geoScope"
+              >
+                <a-select-option value="Cellwide">Cellwide</a-select-option>
+                <a-select-option value="PLMNwide">PLMNwide</a-select-option>
+                <a-select-option value="Area">Area</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-divider orientation="left">
+          {{ t('views.cbc.cbe.warningTypeProfile') }}
+        </a-divider>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.cbc.cbe.warningType')"
+              name="warningType"
+            >
+              <a-select
+                v-model:value="modalState.from.warningTypeProfile.warningType"
+              >
+                <a-select-option value="Earthquake">Earthquake</a-select-option>
+                <a-select-option value="Tsunami">Tsunami</a-select-option>
+                <a-select-option value="EarthquakeAndTsunami"
+                  >EarthquakeAndTsunami</a-select-option
+                >
+                <a-select-option value="Test">Test</a-select-option>
+                <a-select-option value="Other">Other</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.cbc.cbe.emergencyUserAlert')"
+              name="emergencyUserAlert"
+              v-bind="modalStateFrom.validateInfos.emergencyUserAlert"
+            >
+              <a-select
+                v-model:value="
+                  modalState.from.warningTypeProfile.emergencyUserAlert
+                "
+              >
+                <a-select-option :value="true">true</a-select-option>
+                <a-select-option :value="false">false</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.cbc.cbe.activatePopup')"
+              name="activatePopup"
+              v-bind="modalStateFrom.validateInfos.activatePopup"
+            >
+              <a-select
+                v-model:value="modalState.from.warningTypeProfile.activatePopup"
+              >
+                <a-select-option :value="true">true</a-select-option>
+                <a-select-option :value="false">false</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-divider orientation="left">
+          {{ t('views.cbc.cbe.warningMessageProfile') }}
+        </a-divider>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.cbc.cbe.language')"
+              name="language"
+              :label-col="{ span: 6 }"
+            >
+              <a-select
+                v-model:value="modalState.from.warningMessageProfile.language"
+              >
+                <a-select-option value="English">English</a-select-option>
+                <a-select-option value="French">French</a-select-option>
+                <a-select-option value="Spanish">Spanish</a-select-option>
+                <a-select-option value="Chinese">Chinese</a-select-option>
+                <a-select-option value="Japanese">Japanese</a-select-option>
+                <a-select-option value="Korean">Korean</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.cbc.cbe.warningMessageText')"
+          :label-col="{ span: 3 }"
+          name="warningMessageText"
+        >
+          <!-- <a-input
+
+                v-model:value="
+                  modalState.from.warningMessageProfile.warningMessageText
+                "
+              ></a-input> -->
+          <a-textarea
+            v-model:value="
+              modalState.from.warningMessageProfile.warningMessageText
+            "
+            :auto-size="{ minRows: 1, maxRows: 6 }"
+            :show-count="true"
+            :placeholder="t('common.inputPlease')"
+          />
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.cbc.cbe.warningAreaType')"
+          name="warningAreaType"
+        >
+          <a-radio-group
+            v-model:value="modalState.from.warningAreaType"
+            @change="fnModalChange"
+          >
+            <a-radio value="tai">TAI List</a-radio>
+            <!-- <a-radio value="eutra">EUTRA CellId List</a-radio>
+            <a-radio value="nr">NR CellId List</a-radio> -->
+            <a-radio value="cell">CellId List</a-radio>
+            <a-radio value="area">Area ID List</a-radio>
+          </a-radio-group>
+
+          <!-- <a-select
+                v-model:value="modalState.from.warningAreaType"
+                    @change="fnModalChange"
+              >
+                <a-select-option value="tai">TAI List</a-select-option>
+                <a-select-option value="eutra">EUTRA CellId List</a-select-option>
+                <a-select-option value="nr">NR CellId List</a-select-option>
+                <a-select-option value="area">Area ID List</a-select-option>
+              </a-select> -->
+        </a-form-item>
+
+        <!-- TAI List -->
+        <div v-if="modalState.from.warningAreaType === 'tai'">
+          <a-divider orientation="left">
+            TAI
+            <a-tooltip title="Add TAI">
+              <a-button
+                shape="circle"
+                @click="addTai"
+                style="margin-left: 10px"
+              >
+                <template #icon><plus-outlined /></template>
+              </a-button> </a-tooltip
+          ></a-divider>
+
+          <!-- <a-space>
+            <a-button type="dashed" @click="addTai" size="small">添加TAI</a-button>
+          </a-space> -->
+
+          <div
+            v-for="(item, idx) in modalState.from.warningAreaList.taiList"
+            :key="'tai' + idx"
+            style="margin-bottom: 8px"
+          >
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MCC"
+                  name="mcc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MNC"
+                  name="mnc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="TAC"
+                  name="tac"
+                  :validateTrigger="[]"
+                  :required="true"
+                  :help="t('views.cbc.cbe.tacHelp')"
+                >
+                  <a-input v-model:value="item.tac" placeholder="TAC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :span="4">
+                <a-tooltip title="Delete Tai" v-if="idx !== 0">
+                  <a-button
+                    danger
+                    shape="circle"
+                    v-if="idx !== 0"
+                    @click="delTai(idx)"
+                    style="margin-left: 10px"
+                  >
+                    <template #icon><minus-outlined /></template
+                  ></a-button>
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+
+        <!-- EUTRA CellId List -->
+        <div v-if="modalState.from.warningAreaType === 'eutra'">
+          <a-divider orientation="left">
+            EUTRA CellId List
+            <a-tooltip title="Add EUTRA">
+              <a-button
+                shape="circle"
+                @click="addEutra"
+                style="margin-left: 10px"
+              >
+                <template #icon><plus-outlined /></template>
+              </a-button> </a-tooltip
+          ></a-divider>
+
+          <div
+            v-for="(item, idx) in modalState.from.warningAreaList
+              .eutraCellIdList"
+            :key="'eutra' + idx"
+            style="margin-bottom: 8px"
+          >
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MCC"
+                  name="mcc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MNC"
+                  name="mnc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="CellId"
+                  name="cellId"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.cellId" placeholder="CellId" />
+                </a-form-item>
+              </a-col>
+
+              <!-- 123 -->
+
+              <a-col :span="4">
+                <a-tooltip title="Delete EUTRA" v-if="idx !== 0">
+                  <a-button
+                    danger
+                    shape="circle"
+                    v-if="idx !== 0"
+                    @click="delEutra(idx)"
+                    style="margin-left: 10px"
+                  >
+                    <template #icon><minus-outlined /></template
+                  ></a-button>
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+
+        <!-- NR CellId List -->
+
+        <div v-if="modalState.from.warningAreaType === 'nr'">
+          <a-divider orientation="left">
+            NR CellId List
+            <a-tooltip title="Add NR">
+              <a-button shape="circle" @click="addNr" style="margin-left: 10px">
+                <template #icon><plus-outlined /></template>
+              </a-button> </a-tooltip
+          ></a-divider>
+
+          <div
+            v-for="(item, idx) in modalState.from.warningAreaList.nrCellIdList"
+            :key="'nr' + idx"
+            style="margin-bottom: 8px"
+          >
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MCC"
+                  name="mcc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="MNC"
+                  name="mnc"
+                  :validateTrigger="[]"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item label="CellId" name="cellId" :validateTrigger="[]">
+                  <a-input v-model:value="item.cellId" placeholder="CellId" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :span="4">
+                <a-tooltip title="Delete NR" v-if="idx !== 0">
+                  <a-button
+                    danger
+                    shape="circle"
+                    v-if="idx !== 0"
+                    @click="delNr(idx)"
+                    style="margin-left: 10px"
+                  >
+                    <template #icon><minus-outlined /></template
+                  ></a-button>
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+
+        <div v-if="modalState.from.warningAreaType === 'cell'">
+          <a-divider orientation="left">
+            CellId List
+            <a-tooltip title="Add CellId">
+              <a-button
+                shape="circle"
+                @click="addCellId"
+                style="margin-left: 10px"
+              >
+                <template #icon><plus-outlined /></template>
+              </a-button>
+            </a-tooltip>
+          </a-divider>
+          <div
+            v-for="(item, idx) in modalState.from.warningAreaList.cellIdList"
+            :key="'cell' + idx"
+            style="margin-bottom: 8px"
+          >
+            <a-row>
+              <a-col :lg="10" :md="10" :xs="24">
+                <a-form-item label="MCC" :required="true">
+                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="10" :md="10" :xs="24">
+                <a-form-item label="MNC" :required="true">
+                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="10" :md="10" :xs="24">
+                <a-form-item
+                  label="EUTRA CellId"
+                  :help="t('views.cbc.cbe.cellIdHelp')"
+                >
+                  <a-input
+                    v-model:value="item.eutraCellId"
+                    placeholder="EUTRA CellId"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="10" :md="10" :xs="24">
+                <a-form-item
+                  label="NR CellId"
+                  :help="t('views.cbc.cbe.cellIdHelp')"
+                >
+                  <a-input
+                    v-model:value="item.nrCellId"
+                    placeholder="NR CellId"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="4">
+                <a-tooltip title="Delete CellId" v-if="idx !== 0">
+                  <a-button
+                    danger
+                    shape="circle"
+                    @click="delCellId(idx)"
+                    style="margin-left: 10px"
+                  >
+                    <template #icon><minus-outlined /></template>
+                  </a-button>
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+
+        <!-- area ID  List -->
+
+        <div v-if="modalState.from.warningAreaType === 'area'">
+          <a-divider orientation="left">
+            Area ID List
+            <a-tooltip title="Add Area">
+              <a-button
+                shape="circle"
+                @click="addArea"
+                style="margin-left: 10px"
+              >
+                <template #icon><plus-outlined /></template>
+              </a-button> </a-tooltip
+          ></a-divider>
+
+          <div
+            v-for="(item, idx) in modalState.from.warningAreaList
+              .emergencyAreaIDList"
+            :key="'area' + idx"
+            style="margin-bottom: 8px"
+          >
+            <a-row>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  label="AreaID"
+                  name="areaId"
+                  :validateTrigger="[]"
+                  :help="t('views.cbc.cbe.tacHelp')"
+                  :required="true"
+                >
+                  <a-input v-model:value="item.areaId" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="4">
+                <a-tooltip title="Delete Area" v-if="idx !== 0">
+                  <a-button
+                    danger
+                    shape="circle"
+                    v-if="idx !== 0"
+                    @click="delArea(idx)"
+                    style="margin-left: 10px"
+                  >
+                    <template #icon><minus-outlined /></template>
+                  </a-button>
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+      </a-form>
+    </ProModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>