From 7a787db45dd01e6948aa750b3fdd5667b8c0df04 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 29 Feb 2024 20:56:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BD=91=E5=85=83?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ne/neInfo/index.vue       | 1200 +++++++++++++++++++++++++++
 src/views/ne/neInfo/useNeOptions.ts |  161 ++++
 2 files changed, 1361 insertions(+)
 create mode 100644 src/views/ne/neInfo/index.vue
 create mode 100644 src/views/ne/neInfo/useNeOptions.ts

diff --git a/src/views/ne/neInfo/index.vue b/src/views/ne/neInfo/index.vue
new file mode 100644
index 00000000..03364c9d
--- /dev/null
+++ b/src/views/ne/neInfo/index.vue
@@ -0,0 +1,1200 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { message, Modal, Form } from 'ant-design-vue/lib';
+import {
+  getNeInfo,
+  addNeInfo,
+  updateNeInfo,
+  delNeInfo,
+  exportSet,
+  startNf,
+  restartNf,
+  stopNf,
+  importFile,
+  listServerFile,
+} from '@/api/configManage/neManage';
+
+import { listNeInfo } from '@/api/ne/neInfo';
+import { updateNeConfigReload } from '@/api/configManage/configParam';
+import useI18n from '@/hooks/useI18n';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useNeOptions from './useNeOptions';
+const { fnNeRestart, fnNeStop, fnNeLogFile } = useNeOptions();
+const { t } = useI18n();
+
+/**表格所需option */
+const neManageOption = reactive({
+  importType: [
+    { label: t('views.configManage.neManage.server'), value: 'server' },
+    { label: t('views.configManage.neManage.local'), value: 'local' },
+  ],
+  serverFileName: <any[]>[],
+});
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: '',
+  /**带状态信息 */
+  bandStatus: true,
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    neType: '',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  fnGetList();
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**详情框是否显示 */
+  visibleByView: boolean;
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**导入是否显示 */
+  visibleByImport: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**导入表单数据 */
+  importFrom: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByView: false,
+  visibleByEdit: false,
+  visibleByImport: false,
+  title: '网元',
+  from: {
+    dn: '',
+    ip: '',
+    neAddress: '',
+    neId: '',
+    neName: '',
+    neType: '',
+    port: '',
+    province: '',
+    pvFlag: '',
+    rmUid: '',
+    vendorName: '',
+    sync: true,
+  },
+  importFrom: {
+    neId: '',
+    neType: '',
+    importType: '',
+    file: undefined,
+    fileList: [],
+    fileName: '',
+  },
+  confirmLoading: false,
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    neType: [
+      {
+        required: true,
+        message:
+          t('views.configManage.neManage.neType') + t('common.unableNull'),
+      },
+    ],
+    neId: [
+      {
+        required: true,
+        message: t('views.configManage.neManage.neId') + t('common.unableNull'),
+      },
+    ],
+    rmUid: [
+      {
+        required: true,
+        message: t('views.configManage.neManage.uid') + t('common.unableNull'),
+      },
+    ],
+    ip: [
+      {
+        required: true,
+        message: t('views.configManage.neManage.ip') + t('common.unableNull'),
+      },
+    ],
+    port: [
+      {
+        required: true,
+        message: t('views.configManage.neManage.port') + t('common.unableNull'),
+      },
+    ],
+    pvFlag: [
+      {
+        required: true,
+        message:
+          t('views.configManage.neManage.pvflag') + t('common.unableNull'),
+      },
+    ],
+    neName: [
+      {
+        required: true,
+        message:
+          t('views.configManage.neManage.neName') + t('common.unableNull'),
+      },
+    ],
+  })
+);
+
+/**导入对话框内表单属性和校验规则 */
+const importStateFrom = Form.useForm(
+  modalState.importFrom,
+  reactive({
+    file: [
+      {
+        required: true,
+        message: t('views.configManage.softwareManage.updateFilePlease'),
+      },
+    ],
+    importType: [
+      {
+        required: true,
+        message: t('views.configManage.neManage.selectPlease'),
+      },
+    ],
+    fileName: [
+      {
+        required: true,
+        message: t('views.configManage.neManage.fileSelect'),
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisibleByEdit(row?: Record<string, any>) {
+  if (!row) {
+    modalStateFrom.resetFields();
+    modalState.title = t('views.configManage.neManage.addNe');
+    modalState.visibleByEdit = true;
+  } else {
+    if (modalState.confirmLoading) return;
+    const hide = message.loading(t('common.loading'), 0);
+    modalState.confirmLoading = true;
+    getNeInfo(row.id).then(res => {
+      modalState.confirmLoading = false;
+      hide();
+      if (res.code === RESULT_CODE_SUCCESS) {
+        modalState.from = Object.assign(modalState.from, res.data);
+        modalState.title = t('views.configManage.neManage.editNe');
+        modalState.visibleByEdit = true;
+      } else {
+        message.error(t('views.configManage.neManage.getInfo'), 2);
+      }
+    });
+  }
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+      const from = toRaw(modalState.from);
+      const result = from.id ? updateNeInfo(from) : addNeInfo(from);
+      const hide = message.loading(t('common.loading'), 0);
+      result
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            if (res.data?.error || res.data?.affectedRows === 0) {
+              message.error({
+                content: `${t('views.configManage.neManage.operFail')}`,
+                duration: 3,
+              });
+            } else {
+              message.success({
+                content: t('common.msgSuccess', { msg: modalState.title }),
+                duration: 3,
+              });
+              modalState.visibleByEdit = false;
+              modalStateFrom.resetFields();
+              fnGetList(1);
+            }
+          } else {
+            message.error({
+              content: `${t('views.configManage.neManage.operFail')}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+          // 刷新缓存的网元信息
+          useNeInfoStore().fnRefreshNelist();
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 导入对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnImportModalOk() {
+  const from = toRaw(modalState.importFrom);
+  let validateName = ['importType'];
+  if (from.file) {
+    validateName.push('file');
+  } else {
+    validateName.push('fileName');
+  }
+
+  importStateFrom
+    .validate(validateName)
+    .then(e => {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      importFile(from)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              duration: 3,
+            });
+            modalState.visibleByEdit = false;
+            modalStateFrom.resetFields();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+          // 获取列表数据
+          fnGetList(1);
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 导入对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnImportModalCancel() {
+  modalState.visibleByView = false;
+  modalState.visibleByImport = false;
+  importStateFrom.resetFields();
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.visibleByView = false;
+  modalStateFrom.resetFields();
+}
+
+/**
+ * 网元导出配置
+ * @param row 网元编号ID
+ */
+function fnRecordExport(row: Record<string, any>) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.configManage.neManage.exportSure', { msg: row.neName }),
+    onOk() {
+      const key = 'exportSet';
+      message.loading({ content: t('common.loading'), key });
+      exportSet(row).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('views.configManage.neManage.exportTip'),
+            key,
+            duration: 2,
+          });
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key: key,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**
+ * 记录多项选择
+ */
+function fnRecordMore(type: string | number, row: Record<string, any>) {
+  if (type === 'delete') {
+    fnRecordDelete(row);
+    return;
+  }
+
+  if (type === 'export') {
+    fnRecordExport(row);
+  }
+
+  if (type === 'import') {
+    modalState.importFrom = Object.assign(modalState.importFrom, row);
+    modalState.title = t('views.configManage.neManage.import');
+    modalState.visibleByImport = true;
+  }
+}
+
+/**查询网元远程服务器备份文件 */
+function typeChange(value: any) {
+  if (value === 'server') {
+    listServerFile(modalState.importFrom).then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        neManageOption.serverFileName = [];
+        res.data.forEach((item: any) => {
+          neManageOption.serverFileName.push({
+            label: item.fileName,
+            value: item.fileName,
+          });
+        });
+      }
+    });
+  }
+}
+
+/**上传前检查或转换压缩 */
+function fnBeforeUploadFile(file: FileType) {
+  if (modalState.confirmLoading) return false;
+  // const fileName = file.name;
+  // const suff = fileName.substring(fileName.lastIndexOf('.'));
+  return true;
+}
+
+/**上传文件 */
+function fnUploadFile(up: UploadRequestOption) {
+  // 改为完成状态
+  const file = modalState.importFrom.fileList[0];
+  file.percent = 100;
+  file.status = 'done';
+  // 预置到表单
+  modalState.importFrom.file = up.file;
+}
+
+/**信息对象信息状态类型 */
+type InfoStateType = {
+  /**显示搜索区 */
+  seached: boolean;
+  /**加载等待 */
+  loading: boolean;
+  /**数据总数 */
+  total: number;
+  data: Record<string, any>[];
+};
+
+/**信息对象信息状态 */
+const infoState: InfoStateType = reactive({
+  seached: false,
+  loading: false,
+  total: 0,
+  data: [],
+});
+
+/**查询网元列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (infoState.loading) return;
+  infoState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  // 超过总数不请求
+  const infoDataLen = infoState.data.length;
+  if (infoDataLen >= infoState.total && infoState.total !== 0) {
+    infoState.loading = false;
+    return;
+  }
+  listNeInfo(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      infoState.total = res.total;
+      // 遍历处理资源情况数值
+      const rows = res.rows.map(item => {
+        const neState = item.serverState;
+        let sysCpuUsage = 0;
+        let nfCpuUsage = 0;
+        if (neState.cpu) {
+          nfCpuUsage = neState.cpu.nfCpuUsage;
+          if (nfCpuUsage > 100) {
+            const nfCpu = +(neState.cpu.nfCpuUsage / 100);
+            if (nfCpu > 100) {
+              nfCpuUsage = 100;
+            } else {
+              nfCpuUsage = +nfCpu.toFixed(2);
+            }
+          }
+
+          sysCpuUsage = neState.cpu.sysCpuUsage;
+          if (sysCpuUsage > 100) {
+            const sysCpu = +(neState.cpu.sysCpuUsage / 100);
+            if (sysCpu > 100) {
+              sysCpuUsage = 100;
+            } else {
+              sysCpuUsage = +sysCpu.toFixed(2);
+            }
+          }
+        }
+
+        let sysMemUsage = 0;
+        if (neState.mem) {
+          let men = neState.mem.sysMemUsage;
+          if (men > 100) {
+            men = +(men / 100).toFixed(2);
+          }
+          sysMemUsage = men;
+        }
+
+        let sysDiskUsage = 0;
+        if (neState.disk && Array.isArray(neState.disk.partitionInfo)) {
+          let disks: any[] = neState.disk.partitionInfo;
+          disks = disks.sort((a, b) => +b.used - +a.used);
+          if (disks.length > 0) {
+            const { total, used } = disks[0];
+            sysDiskUsage = +((used / total) * 100).toFixed(2);
+          }
+        }
+
+        Reflect.set(item, 'resoures', {
+          sysDiskUsage,
+          sysMemUsage,
+          sysCpuUsage,
+          nfCpuUsage,
+        });
+
+        return item;
+      });
+      infoState.data = infoState.data.concat(rows);
+      // 页数+
+      if (infoDataLen < infoState.total) {
+        queryParams.pageNum += 1;
+      }
+    }
+    infoState.loading = false;
+  });
+}
+
+/**
+ * 卡片更多菜单项
+ * @param key 菜单key
+ */
+function fnMoreMenu(key: string | number) {
+  // 刷新当前
+  if (key === 'reload') {
+  }
+  // 关闭当前
+  if (key === 'current') {
+  }
+  // 关闭其他
+  if (key === 'other') {
+  }
+  // 关闭全部
+  if (key === 'all') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.tool.terminal.allTip'),
+      onOk() {
+        // hostState.show = false;
+        // tabState.panes.splice(1);
+        // tabState.activeKey = '0';
+      },
+    });
+  }
+}
+
+/**
+ * 网元删除
+ * @param row 网元编号ID
+ */
+function fnRecordDelete(row: Record<string, any>) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.configManage.neManage.delSure', { msg: row.neName }),
+    onOk() {
+      infoState.loading = true;
+      const key = 'delNotice';
+      message.loading({ content: t('common.loading'), key });
+      delNeInfo(row)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            if (res.data.data && res.data.data.affectedRows) {
+              message.success({
+                content: t('common.msgSuccess', {
+                  msg: t('common.deleteText'),
+                }),
+                key,
+                duration: 2,
+              });
+              infoState.loading = false;
+              fnGetList();
+              // 刷新缓存的网元信息
+              useNeInfoStore().fnRefreshNelist();
+            }
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              key: key,
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          infoState.loading = false;
+        });
+    },
+  });
+}
+
+onMounted(() => {
+  // 刷新缓存的网元信息
+  useNeInfoStore()
+    .fnRefreshNelist()
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="infoState.seached"
+      :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.configManage.neManage.neType')"
+              name="neType "
+            >
+              <a-auto-complete
+                v-model:value="queryParams.neType"
+                :options="[{ value: 'OMC' }]"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              />
+            </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-space :size="8" align="center">
+          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+            <template #icon><PlusOutlined /></template>
+            {{ t('common.addText') }}
+          </a-button>
+        </a-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="infoState.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-space>
+      </template>
+
+      <!-- 信息列表 -->
+      <a-list
+        :grid="{ gutter: 16, column: 3, lg: 3, md: 2, xs: 1 }"
+        :data-source="infoState.data"
+        row-key="id"
+        class="list-box"
+      >
+        <!-- 插槽-加载更多 -->
+        <template #loadMore>
+          <div style="text-align: center">
+            <a-button @click="fnGetList()" :loading="infoState.loading">
+              加载更多 {{ infoState.total - infoState.data.length }}
+            </a-button>
+          </div>
+        </template>
+        <!-- 插槽-渲染项 -->
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <a-card size="small">
+              <!-- 插槽-卡片左侧 -->
+              <template #title>
+                <a-tooltip placement="bottom">
+                  <template #title>
+                    {{ item.serverState.online ? '正常' : '异常' }}
+                  </template>
+                  <a-badge
+                    :status="item.serverState.online ? 'success' : 'error'"
+                    :text="item.neName"
+                  />
+                </a-tooltip>
+              </template>
+              <!-- 插槽-卡片右侧 -->
+              <template #extra>
+                <a-space :size="8" align="center">
+                  <a-tooltip placement="topRight">
+                    <template #title>
+                      {{ t('common.editText') }}
+                    </template>
+                    <a-button
+                      type="primary"
+                      shape="circle"
+                      size="small"
+                      @click="fnMoreMenu('new')"
+                    >
+                      <template #icon><FormOutlined /></template>
+                    </a-button>
+                  </a-tooltip>
+                  <a-tooltip placement="topRight">
+                    <template #title>
+                      {{ t('views.tool.terminal.more') }}
+                    </template>
+                    <a-dropdown
+                      :trigger="['click', 'hover']"
+                      placement="bottomRight"
+                    >
+                      <a-button type="ghost" size="small" shape="circle">
+                        <template #icon><EllipsisOutlined /></template>
+                      </a-button>
+                      <template #overlay>
+                        <a-menu @click="({ key }:any) => fnMoreMenu(key)">
+                          <a-menu-item key="export">
+                            <ExportOutlined />
+                            {{ t('views.configManage.neManage.export') }}
+                          </a-menu-item>
+                          <a-menu-item key="import">
+                            <ImportOutlined />
+                            {{ t('views.configManage.neManage.import') }}
+                          </a-menu-item>
+                          <a-menu-item key="start">
+                            <thunderbolt-outlined />
+                            {{ t('views.configManage.neManage.start') }}
+                          </a-menu-item>
+                          <a-menu-item key="restart">
+                            <UndoOutlined />
+                            {{ t('views.configManage.neManage.restart') }}
+                          </a-menu-item>
+                          <a-menu-item key="stop">
+                            <pause-outlined />
+                            {{ t('views.configManage.neManage.stop') }}
+                          </a-menu-item>
+                          <a-menu-item key="reload">
+                            <SyncOutlined />
+                            {{ t('views.configManage.neManage.reload') }}
+                          </a-menu-item>
+                          <a-menu-item key="delete">
+                            <DeleteOutlined />
+                            {{ t('common.deleteText') }}
+                          </a-menu-item>
+                        </a-menu>
+                      </template>
+                    </a-dropdown>
+                  </a-tooltip>
+                </a-space>
+              </template>
+
+              <!-- 内容信息展示 -->
+              <div :id="item.id">
+                <div>
+                  <span>网元类型：</span>
+                  <span>{{ item.neType }}</span>
+                </div>
+                <div>
+                  <span>网元标识：</span>
+                  <span>{{ item.neId }}</span>
+                </div>
+                <div>
+                  <span>网元地址：</span>
+                  <span>{{ `${item.ip}:${item.port}` }}</span>
+                </div>
+                <div>
+                  <span>唯一标识：</span>
+                  <span>{{ item.rmUid }}</span>
+                </div>
+                <!-- 资源情况 -->
+                <a-collapse class="collapse" ghost>
+                  <a-collapse-panel key="1" header="资源情况">
+                    <div>
+                      <span>网元CPU：</span>
+                      <a-progress
+                        status="normal"
+                        :stroke-color="
+                          item.resoures.nfCpuUsage < 30
+                            ? '#52c41a'
+                            : item.resoures.nfCpuUsage > 70
+                            ? '#ff4d4f'
+                            : '#1890ff'
+                        "
+                        :percent="item.resoures.nfCpuUsage"
+                      />
+                    </div>
+                    <div>
+                      <span>系统CPU：</span>
+                      <a-progress
+                        status="normal"
+                        :stroke-color="
+                          item.resoures.sysCpuUsage < 30
+                            ? '#52c41a'
+                            : item.resoures.sysCpuUsage > 70
+                            ? '#ff4d4f'
+                            : '#1890ff'
+                        "
+                        :percent="item.resoures.sysCpuUsage"
+                      />
+                    </div>
+                    <div>
+                      <span>系统内存：</span>
+                      <a-progress
+                        status="normal"
+                        :stroke-color="
+                          item.resoures.sysMemUsage < 30
+                            ? '#52c41a'
+                            : item.resoures.sysMemUsage > 70
+                            ? '#ff4d4f'
+                            : '#1890ff'
+                        "
+                        :percent="item.resoures.sysMemUsage"
+                      />
+                    </div>
+                    <div>
+                      <span>系统存储：</span>
+                      <a-progress
+                        status="normal"
+                        :stroke-color="
+                          item.resoures.sysDiskUsage < 30
+                            ? '#52c41a'
+                            : item.resoures.sysDiskUsage > 70
+                            ? '#ff4d4f'
+                            : '#1890ff'
+                        "
+                        :percent="item.resoures.sysDiskUsage"
+                      />
+                    </div>
+                  </a-collapse-panel>
+                </a-collapse>
+              </div>
+            </a-card>
+          </a-list-item>
+        </template>
+      </a-list>
+    </a-card>
+
+    <!-- 新增框或修改框 -->
+    <DraggableModal
+      width="800px"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="modalState.visibleByEdit"
+      :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 :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.neType')"
+              name="neType"
+              v-bind="modalStateFrom.validateInfos.neType"
+            >
+              <a-input
+                v-model:value="modalState.from.neType"
+                allow-clear
+                :placeholder="t('views.configManage.neManage.neTypePlease')"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>{{
+                      t('views.configManage.neManage.neTypeTip')
+                    }}</template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.pvflag')"
+              name="pvFlag"
+              v-bind="modalStateFrom.validateInfos.pvFlag"
+            >
+              <a-select
+                v-model:value="modalState.from.pvFlag"
+                default-value="PNF"
+              >
+                <a-select-opt-group
+                  :label="t('views.configManage.neManage.pnf')"
+                >
+                  <a-select-option value="PNF">PNF</a-select-option>
+                </a-select-opt-group>
+                <a-select-opt-group
+                  :label="t('views.configManage.neManage.vnf')"
+                >
+                  <a-select-option value="VNF">VNF</a-select-option>
+                </a-select-opt-group>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.neId')"
+              name="neId"
+              v-bind="modalStateFrom.validateInfos.neId"
+            >
+              <a-input
+                v-model:value="modalState.from.neId"
+                allow-clear
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.neName')"
+              name="neName"
+              v-bind="modalStateFrom.validateInfos.neName"
+            >
+              <a-input v-model:value="modalState.from.neName" allow-clear>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.ip')"
+              name="ip"
+              v-bind="modalStateFrom.validateInfos.ip"
+            >
+              <a-input v-model:value="modalState.from.ip" allow-clear></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.port')"
+              name="port"
+              v-bind="modalStateFrom.validateInfos.port"
+            >
+              <a-input v-model:value="modalState.from.port" allow-clear>
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      <div>{{ t('views.configManage.neManage.portTip') }}</div>
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.uid')"
+              name="rmUid"
+              v-bind="modalStateFrom.validateInfos.rmUid"
+            >
+              <a-input
+                v-model:value="modalState.from.rmUid"
+                allow-clear
+                :placeholder="t('views.configManage.neManage.uidTip')"
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.mac')"
+              name="neAddress"
+            >
+              <a-input v-model:value="modalState.from.neAddress" allow-clear
+                ><template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      <div>{{ t('views.configManage.neManage.macTip') }}</div>
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip> </template
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.vendorName')"
+              name="vendorName"
+            >
+              <a-input v-model:value="modalState.from.vendorName" allow-clear>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.configManage.neManage.dn')" name="dn">
+              <a-input v-model:value="modalState.from.dn" allow-clear></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.province')"
+              name="province"
+            >
+              <a-input
+                v-model:value="modalState.from.province"
+                allow-clear
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <!-- 主机连接配置 -->
+        <a-collapse class="collapse" ghost>
+          <a-collapse-panel key="ssh" header="配置SSH">
+            <a-row :gutter="16">
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  :label="t('views.configManage.neManage.province')"
+                  name="province"
+                >
+                  <a-input
+                    v-model:value="modalState.from.province"
+                    allow-clear
+                  ></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  :label="t('views.configManage.neManage.sync')"
+                  name="province"
+                >
+                  <a-switch
+                    v-model:checked="modalState.from.sync"
+                    :checked-children="t('views.configManage.neManage.open')"
+                    :un-checked-children="
+                      t('views.configManage.neManage.close')
+                    "
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-collapse-panel>
+          <a-collapse-panel key="telnet" header="配置Telnet">
+            <a-row :gutter="16">
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  :label="t('views.configManage.neManage.province')"
+                  name="province"
+                >
+                  <a-input
+                    v-model:value="modalState.from.province"
+                    allow-clear
+                  ></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="12" :md="12" :xs="24">
+                <a-form-item
+                  :label="t('views.configManage.neManage.sync')"
+                  name="province"
+                >
+                  <a-switch
+                    v-model:checked="modalState.from.sync"
+                    :checked-children="t('views.configManage.neManage.open')"
+                    :un-checked-children="
+                      t('views.configManage.neManage.close')
+                    "
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-collapse-panel>
+        </a-collapse>
+      </a-form>
+    </DraggableModal>
+
+    <!-- 导入框 -->
+    <a-modal
+      width="800px"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="modalState.visibleByImport"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnImportModalOk"
+      @cancel="fnImportModalCancel"
+    >
+      <a-form name="importStateFrom" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.neType')"
+              name="neType"
+              v-bind="importStateFrom.validateInfos.neType"
+            >
+              <a-input
+                v-model:value="modalState.importFrom.neType"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.configManage.neManage.neId')"
+              name="neId"
+              v-bind="importStateFrom.validateInfos.neId"
+            >
+              <a-input
+                v-model:value="modalState.importFrom.neId"
+                disabled
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.configManage.neManage.fileForm')"
+          name="importType"
+          v-bind="importStateFrom.validateInfos.importType"
+        >
+          <a-select
+            v-model:value="modalState.importFrom.importType"
+            default-value="server"
+            :options="neManageOption.importType"
+            @change="typeChange"
+          >
+          </a-select>
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.configManage.neManage.server')"
+          name="fileName"
+          v-bind="importStateFrom.validateInfos.fileName"
+          v-show="modalState.importFrom.importType === 'server'"
+        >
+          <a-select
+            v-model:value="modalState.importFrom.fileName"
+            :options="neManageOption.serverFileName"
+          >
+          </a-select>
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.configManage.neManage.local')"
+          name="file"
+          v-bind="importStateFrom.validateInfos.file"
+          v-show="modalState.importFrom.importType === 'local'"
+        >
+          <a-upload
+            name="file"
+            v-model:file-list="modalState.importFrom.fileList"
+            list-type="text"
+            :max-count="1"
+            :show-upload-list="true"
+            :before-upload="fnBeforeUploadFile"
+            :custom-request="fnUploadFile"
+          >
+            <a-button type="default" :loading="modalState.confirmLoading">
+              {{ t('views.configManage.neManage.fileSelect') }}
+            </a-button>
+          </a-upload>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.list-box {
+  padding: 16px;
+  height: calc(100vh - 320px);
+  overflow-x: hidden;
+}
+
+.collapse :deep(.ant-collapse-item) > .ant-collapse-header {
+  padding-left: 0;
+  padding-right: 0;
+}
+</style>
diff --git a/src/views/ne/neInfo/useNeOptions.ts b/src/views/ne/neInfo/useNeOptions.ts
new file mode 100644
index 00000000..b89468d8
--- /dev/null
+++ b/src/views/ne/neInfo/useNeOptions.ts
@@ -0,0 +1,161 @@
+import { restartNf, startNf, stopNf } from '@/api/configManage/neManage';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { Modal, message } from 'ant-design-vue/lib';
+import useI18n from '@/hooks/useI18n';
+import { useRouter } from 'vue-router';
+import { updateNeConfigReload } from '@/api/configManage/configParam';
+
+export default function useNeOptions() {
+  const router = useRouter();
+  const { t } = useI18n();
+
+  /**
+   * 网元启动
+   * @param row {neName,neType,neId}
+   */
+  function fnRecordStart(row: Record<string, any>) {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.configManage.neManage.totalSure', {
+        msg: row.neName,
+        oper: t('views.configManage.neManage.start'),
+      }),
+      onOk() {
+        const key = 'startNf';
+        message.loading({ content: t('common.loading'), key });
+        startNf(row).then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('views.configManage.neManage.start'),
+              }),
+              key,
+              duration: 2,
+            });
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              key: key,
+              duration: 2,
+            });
+          }
+        });
+      },
+    });
+  }
+
+  /**
+   * 网元重启
+   * @param row {neName,neType,neId}
+   */
+  function fnNeRestart(row: Record<string, any>) {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.configManage.neManage.totalSure', {
+        msg: row.neName,
+        oper: t('views.configManage.neManage.restart'),
+      }),
+      onOk() {
+        const key = 'restartNf';
+        message.loading({ content: t('common.loading'), key });
+        restartNf(row).then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('views.configManage.neManage.restart'),
+              }),
+              key,
+              duration: 3,
+            });
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              key: key,
+              duration: 3,
+            });
+          }
+        });
+      },
+    });
+  }
+
+  /**
+   * 网元停止
+   * @param row {neName,neType,neId}
+   */
+  function fnNeStop(row: Record<string, any>) {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.configManage.neManage.totalSure', {
+        msg: row.neName,
+        oper: t('views.configManage.neManage.stop'),
+      }),
+      onOk() {
+        const key = 'restartNf';
+        message.loading({ content: t('common.loading'), key });
+        stopNf(row).then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('views.configManage.neManage.stop'),
+              }),
+              key: key,
+              duration: 3,
+            });
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              key: key,
+              duration: 3,
+            });
+          }
+        });
+      },
+    });
+  }
+
+  /**
+   * 网元重新加载
+   * @param row {neName,neType,neId}
+   */
+  function fnNeReload(row: Record<string, any>) {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.configManage.neManage.totalSure', {
+        msg: row.neName,
+        oper: t('views.configManage.neManage.reload'),
+      }),
+      onOk() {
+        const key = 'stopNf';
+        message.loading({ content: t('common.loading'), key });
+        updateNeConfigReload(row.neType, row.neId).then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('views.configManage.neManage.reload'),
+              }),
+              key,
+              duration: 2,
+            });
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              key: key,
+              duration: 2,
+            });
+          }
+        });
+      },
+    });
+  }
+
+  /**
+   * 跳转网元日志文件页面
+   * @param row {neType,neId}
+   */
+  function fnNeLogFile(row: Record<string, any>) {
+    router.push(`/logManage/neFile?neType=${row.neType}&neId=${row.neId}`);
+  }
+
+  return { fnNeRestart, fnNeStop, fnNeLogFile };
+}