gpon 业务

星寂樱易李2025-03-13 18:31

光模块 的结构、性能指标、种类、命名方式

一、总体

设计GPON业务的前端页面时，需要考虑用户体验、功能完整性以及操作便捷性。以下是基于文档内容和GPON业务特点的前端页面设计建议，包括页面布局、功能模块和交互设计。

1. 页面布局

前端页面可以分为以下几个主要部分：

  1. 导航栏：提供快速导航到不同功能模块的入口。
  2. 侧边栏：用于展示主要功能模块和子模块。
  3. 主内容区：显示当前选中的功能模块的具体内容。
  4. 底部信息栏：显示版权信息、技术支持等。

2. 功能模块

根据GPON业务的特点，前端页面可以设计以下功能模块：

2.1 设备管理
  • OLT设备管理 ：
    • 显示OLT设备的基本信息（如设备型号、IP地址、状态等）。
    • 提供OLT设备的添加、删除、编辑功能。
  • ONU设备管理 ：
    • 显示ONU设备的列表，包括设备SN、状态、连接的OLT端口等。
    • 提供ONU设备的注册、注销、重启功能。
    • 显示ONU设备的详细信息，如EQD、RTD、老化计数器等。
2.2 链路配置
  • 下行链路配置 ：
    • 配置下行PLOAM消息缓存使能、帧头错误告警、FEC使能等。
    • 显示下行链路的状态和性能指标。
  • 上行链路配置 ：
    • 配置上行PLOAM消息缓存使能、RSSI功能、突发控制参数等。
    • 显示上行链路的状态和性能指标。
2.3 GEM PORT管理
  • GEM PORT配置 ：
    • 配置GEM PORT的转发和提取策略。
    • 显示GEM PORT的列表，包括GEM ID、所属ONUID、ALLOCID、老化计数器等。
  • GEM PORT监控 ：
    • 监控GEM PORT的性能指标，如报文计数、错误计数等。
    • 提供GEM PORT的老化管理功能。
2.4 监控与告警
  • 实时监控 ：
    • 显示OLT和ONU设备的实时状态，包括链路状态、性能指标等。
    • 提供实时告警信息，如帧头错误、CRC校验错误等。
  • 历史告警 ：
    • 显示历史告警记录，支持按时间、设备、告警类型等条件过滤。
    • 提供告警的详细信息和处理状态。
2.5 系统设置
  • 用户管理 ：
    • 提供用户账号的添加、删除、编辑功能。
    • 配置用户权限，如管理员、普通用户等。
  • 参数配置 ：
    • 配置系统的全局参数，如老化计数器、默认转发策略等。
    • 提供系统日志的查看和导出功能。

3. 交互设计

  • 表单设计 ：
    • 使用表单输入框、下拉菜单、开关按钮等控件，方便用户输入和选择配置参数。
    • 提供表单验证功能，确保用户输入的参数符合要求。
  • 表格展示 ：
    • 使用表格展示设备列表、GEM PORT列表、告警记录等信息。
    • 提供表格的排序、筛选、分页功能，方便用户查找和管理数据。
  • 操作提示 ：
    • 在用户进行关键操作时，提供确认提示，如删除设备、重启设备等。
    • 提供操作成功的提示信息，如"配置已保存"、"设备已重启"等。
  • 动态更新 ：
    • 使用WebSocket或轮询机制，实时更新设备状态和告警信息。
    • 提供自动刷新功能，用户可以设置刷新频率。

4. 页面示例

以下是一个简单的页面示例，展示如何设计GPON业务的前端页面：

4.1 设备管理页面
html 复制代码 
<template>
  <div>
    <h2>OLT设备管理</h2>
    <el-table :data="oltDevices" style="width: 100%">
      <el-table-column prop="id" label="设备ID" width="100" />
      <el-table-column prop="ip" label="IP地址" width="150" />
      <el-table-column prop="status" label="状态" width="100" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button type="text" @click="editOltDevice(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteOltDevice(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addOltDevice">添加OLT设备</el-button>
  </div>
</template>
4.2 链路配置页面
html 复制代码 
<template>
  <div>
    <h2>下行链路配置</h2>
    <el-form :model="downlinkConfig" label-width="150px">
      <el-form-item label="PLOAM消息缓存使能">
        <el-switch v-model="downlinkConfig.ploamBufEn" />
      </el-form-item>
      <el-form-item label="帧头错误告警">
        <el-switch v-model="downlinkConfig.psyncErr" />
      </el-form-item>
      <el-button type="primary" @click="saveDownlinkConfig">保存配置</el-button>
    </el-form>
  </div>
</template>
4.3 GEM PORT管理页面
html 复制代码 
<template>
  <div>
    <h2>GEM PORT配置</h2>
    <el-table :data="gemPorts" style="width: 100%">
      <el-table-column prop="id" label="GEM ID" width="100" />
      <el-table-column prop="onuid" label="ONUID" width="100" />
      <el-table-column prop="allocid" label="ALLOCID" width="100" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button type="text" @click="editGemPort(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteGemPort(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addGemPort">添加GEM PORT</el-button>
  </div>
</template>

5. 技术栈建议

  • 前端框架：Vue.js 或 React.js，结合 Element UI 或 Ant Design 提供丰富的组件库。
  • 状态管理：Vuex 或 Redux，用于管理应用状态。
  • 后端通信：Axios 或 Fetch API，用于与后端API通信。
  • 实时通信：WebSocket，用于实时更新设备状态和告警信息。

通过以上设计，可以实现一个功能完整、操作便捷的GPON业务前端页面。

##################################

二、详细

根据PON链路信息和配置需求，设计GPON业务的前端页面时，可以将页面分为以下几个主要部分：链路信息展示 、链路配置 和 实时监控。以下是具体的设计建议和页面布局：

1. 页面布局

前端页面可以采用以下布局：

  • 顶部导航栏：提供快速导航到不同功能模块的入口。
  • 侧边栏：用于展示主要功能模块和子模块。
  • 主内容区：显示当前选中的功能模块的具体内容。
  • 底部信息栏：显示版权信息、技术支持等。

2. 功能模块

根据需求，前端页面可以设计以下功能模块：

2.1 链路信息展示

展示GPON和XGPON光模块的相关信息，包括光功率、ONU设备的详细信息等。

2.1.1 光模块信息
  • GPON ONU光模块光功率
  • XGPON ONU光模块光功率
  • XGPON COMBO OLT光模块相关信息
2.1.2 ONU设备信息
  • GPON下所有ONU的相关信息（包括LOID、PPPOE账号等）
  • XGPON下所有ONU的相关信息（包括LOID、PPPOE账号等）
2.2 链路配置

提供对GPON链路的配置功能，包括镜像、阻断、报文下插等。

2.2.1 流量镜像与阻断
  • 可选镜像或阻断GPON所有下行流量
  • 可选镜像或阻断GPON指定ONU的下行流量
  • 可选镜像或阻断GPON所有上行流量
  • 可选镜像或阻断GPON指定ONU的上行流量
2.2.2 报文下插
  • GPON下行报文下插
  • GPON上行报文下插
2.3 实时监控

实时显示PON链路的状态，包括光功率、告警信息、流量统计等。

3. 交互设计

  • 表单设计：使用表单输入框、下拉菜单、开关按钮等控件，方便用户输入和选择配置参数。
  • 表格展示：使用表格展示设备列表、光模块信息、告警记录等。
  • 操作提示：在用户进行关键操作时，提供确认提示，如删除设备、重启设备等。
  • 动态更新：使用WebSocket或轮询机制，实时更新设备状态和告警信息。

4. 页面示例

以下是一个具体的页面设计示例，展示如何实现上述功能模块：

4.1 链路信息展示页面
html 复制代码 
<template>
  <div>
    <h2>PON链路信息</h2>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="GPON ONU光模块信息" name="gpon">
        <el-table :data="gponOnuModules" style="width: 100%">
          <el-table-column prop="onuid" label="ONUID" width="100" />
          <el-table-column prop="loid" label="LOID" width="150" />
          <el-table-column prop="pppoeAccount" label="PPPOE账号" width="150" />
          <el-table-column prop="opticalPower" label="光功率 (dBm)" width="120" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="XGPON ONU光模块信息" name="xgpon">
        <el-table :data="xgponOnuModules" style="width: 100%">
          <el-table-column prop="onuid" label="ONUID" width="100" />
          <el-table-column prop="loid" label="LOID" width="150" />
          <el-table-column prop="pppoeAccount" label="PPPOE账号" width="150" />
          <el-table-column prop="opticalPower" label="光功率 (dBm)" width="120" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="XGPON COMBO OLT光模块信息" name="xgponCombo">
        <el-table :data="xgponComboModules" style="width: 100%">
          <el-table-column prop="onuid" label="ONUID" width="100" />
          <el-table-column prop="loid" label="LOID" width="150" />
          <el-table-column prop="pppoeAccount" label="PPPOE账号" width="150" />
          <el-table-column prop="opticalPower" label="光功率 (dBm)" width="120" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
4.2 链路配置页面
html 复制代码 
<template>
  <div>
    <h2>PON链路配置</h2>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="流量镜像与阻断" name="traffic">
        <el-form :model="trafficConfig" label-width="150px">
          <el-form-item label="镜像或阻断所有下行流量">
            <el-switch v-model="trafficConfig.mirrorDownlinkAll" />
          </el-form-item>
          <el-form-item label="镜像或阻断指定ONU下行流量">
            <el-select v-model="trafficConfig.mirrorDownlinkOnu" placeholder="选择ONU">
              <el-option v-for="onu in onuList" :key="onu.onuid" :label="onu.onuid" :value="onu.onuid" />
            </el-select>
          </el-form-item>
          <el-form-item label="镜像或阻断所有上行流量">
            <el-switch v-model="trafficConfig.mirrorUplinkAll" />
          </el-form-item>
          <el-form-item label="镜像或阻断指定ONU上行流量">
            <el-select v-model="trafficConfig.mirrorUplinkOnu" placeholder="选择ONU">
              <el-option v-for="onu in onuList" :key="onu.onuid" :label="onu.onuid" :value="onu.onuid" />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="saveTrafficConfig">保存配置</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="报文下插" name="insertion">
        <el-form :model="insertionConfig" label-width="150px">
          <el-form-item label="GPON下行报文下插">
            <el-switch v-model="insertionConfig.insertDownlink" />
          </el-form-item>
          <el-form-item label="GPON上行报文下插">
            <el-switch v-model="insertionConfig.insertUplink" />
          </el-form-item>
          <el-button type="primary" @click="saveInsertionConfig">保存配置</el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
4.3 实时监控页面
html 复制代码 
<template>
  <div>
    <h2>实时监控</h2>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="设备状态" name="deviceStatus">
        <el-table :data="deviceStatus" style="width: 100%">
          <el-table-column prop="deviceType" label="设备类型" width="100" />
          <el-table-column prop="deviceId" label="设备ID" width="100" />
          <el-table-column prop="status" label="状态" width="100" />
          <el-table-column prop="opticalPower" label="光功率 (dBm)" width="120" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="告警信息" name="alarms">
        <el-table :data="alarms" style="width: 100%">
          <el-table-column prop="timestamp" label="时间" width="150" />
          <el-table-column prop="deviceType" label="设备类型" width="100" />
          <el-table-column prop="deviceId" label="设备ID" width="100" />
          <el-table-column prop="alarmType" label="告警类型" width="150" />
          <el-table-column prop="alarmMessage" label="告警信息" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

5. 技术栈建议

  • 前端框架：Vue.js 或 React.js，结合 Element UI 或 Ant Design 提供丰富的组件库。
  • 状态管理：Vuex 或 Redux，用于管理应用状态。
  • 后端通信：Axios 或 Fetch API，用于与后端API通信。
  • 实时通信：WebSocket，用于实时更新设备状态和告警信息。

通过以上设计，可以实现一个功能完整、操作便捷的GPON业务前端页面，满足用户对链路信息展示、配置和实时监控的需求。

三、例子

设计一个链路配置页面（包括下行链路和上行链路配置）需要考虑以下几个关键点：

  1. 用户界面的清晰性：将下行链路和上行链路的配置分开展示，避免混淆。
  2. 配置功能的完整性：提供所有必要的配置选项，如 PLOAM 消息缓存、帧头错误告警、FEC 使能等。
  3. 状态和性能指标的展示：实时显示链路的状态和性能指标，方便用户监控。
  4. 操作的便捷性：提供保存、取消、重置等操作按钮，方便用户管理配置。
  5. 数据交互：通过后端 API 实现配置的保存和状态的获取。

以下是一个基于 Vue.js 和 Element Plus 的链路配置页面设计示例：

页面设计示例

1. 页面结构
  • 头部：显示页面标题。
  • 下行链路配置 ：
    • 配置选项（如 PLOAM 消息缓存、帧头错误告警、FEC 使能等）。
    • 状态和性能指标展示。
  • 上行链路配置 ：
    • 配置选项（如 PLOAM 消息缓存、RSSI 功能、突发控制参数等）。
    • 状态和性能指标展示。
  • 操作按钮：保存、取消、重置等。
2. 代码实现
vue 复制代码 
<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>链路配置</span>
      </div>
    </template>

    <!-- 下行链路配置 -->
    <div class="link-config-section">
      <h3>下行链路配置</h3>
      <el-form label-width="200px">
        <el-form-item label="PLOAM 消息缓存使能">
          <el-switch v-model="downstreamConfig.ploamCacheEnabled" />
        </el-form-item>
        <el-form-item label="帧头错误告警">
          <el-switch v-model="downstreamConfig.frameHeaderErrorAlarm" />
        </el-form-item>
        <el-form-item label="FEC 使能">
          <el-switch v-model="downstreamConfig.fecEnabled" />
        </el-form-item>
      </el-form>

      <h3>下行链路状态和性能指标</h3>
      <el-descriptions :column="2" size="default" border>
        <el-descriptions-item label="链路状态">{{ downstreamStatus.linkStatus }}</el-descriptions-item>
        <el-descriptions-item label="误码率">{{ downstreamStatus.ber }}</el-descriptions-item>
        <el-descriptions-item label="光功率">{{ downstreamStatus.opticalPower }} dBm</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 上行链路配置 -->
    <div class="link-config-section">
      <h3>上行链路配置</h3>
      <el-form label-width="200px">
        <el-form-item label="PLOAM 消息缓存使能">
          <el-switch v-model="upstreamConfig.ploamCacheEnabled" />
        </el-form-item>
        <el-form-item label="RSSI 功能">
          <el-switch v-model="upstreamConfig.rssiEnabled" />
        </el-form-item>
        <el-form-item label="突发控制参数">
          <el-input v-model="upstreamConfig.burstControlParams" placeholder="请输入参数" />
        </el-form-item>
      </el-form>

      <h3>上行链路状态和性能指标</h3>
      <el-descriptions :column="2" size="default" border>
        <el-descriptions-item label="链路状态">{{ upstreamStatus.linkStatus }}</el-descriptions-item>
        <el-descriptions-item label="RSSI 值">{{ upstreamStatus.rssiValue }} dBm</el-descriptions-item>
        <el-descriptions-item label="突发控制状态">{{ upstreamStatus.burstControlStatus }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 操作按钮 -->
    <div class="operation-section">
      <el-button type="primary" @click="saveConfig">保存配置</el-button>
      <el-button @click="resetConfig">重置配置</el-button>
      <el-button @click="cancelConfig">取消</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";

// 下行链路配置
const downstreamConfig = ref({
  ploamCacheEnabled: false,
  frameHeaderErrorAlarm: false,
  fecEnabled: false,
});

// 下行链路状态和性能指标
const downstreamStatus = ref({
  linkStatus: "正常",
  ber: "0.01%",
  opticalPower: "-3.5",
});

// 上行链路配置
const upstreamConfig = ref({
  ploamCacheEnabled: false,
  rssiEnabled: false,
  burstControlParams: "",
});

// 上行链路状态和性能指标
const upstreamStatus = ref({
  linkStatus: "正常",
  rssiValue: "-80",
  burstControlStatus: "启用",
});

// 保存配置
const saveConfig = async () => {
  try {
    const response = await axios.post("/api/link/config/save", {
      downstreamConfig: downstreamConfig.value,
      upstreamConfig: upstreamConfig.value,
    });

    if (response.data.success) {
      ElMessage.success("配置保存成功");
    } else {
      ElMessage.error("配置保存失败：" + response.data.message);
    }
  } catch (error) {
    ElMessage.error("配置保存失败，请稍后重试");
  }
};

// 重置配置
const resetConfig = () => {
  downstreamConfig.value = {
    ploamCacheEnabled: false,
    frameHeaderErrorAlarm: false,
    fecEnabled: false,
  };

  upstreamConfig.value = {
    ploamCacheEnabled: false,
    rssiEnabled: false,
    burstControlParams: "",
  };

  ElMessage.info("配置已重置");
};

// 取消配置
const cancelConfig = () => {
  ElMessage.info("取消配置");
};
</script>

<style scoped>
.card-header {
  font-size: 18px;
  font-weight: bold;
}

.link-config-section {
  margin-bottom: 20px;
}

.operation-section {
  text-align: right;
}
</style>

功能说明

  1. 下行链路配置：

    • 提供 PLOAM 消息缓存、帧头错误告警、FEC 使能等配置选项。
    • 展示下行链路的状态和性能指标（如链路状态、误码率、光功率）。

  2. 上行链路配置：

    • 提供 PLOAM 消息缓存、RSSI 功能、突发控制参数等配置选项。
    • 展示上行链路的状态和性能指标（如链路状态、RSSI 值、突发控制状态）。

  3. 操作按钮：

    • 保存配置：将当前配置发送到后端保存。
    • 重置配置：将配置恢复到默认值。
    • 取消：取消当前操作。

后端接口示例

后端需要提供一个接口来保存链路配置，例如 /api/link/config/save。

示例代码（Node.js + Express）
javascript 复制代码 
const express = require("express");
const app = express();
const port = 3000;

app.use(express.json());

// 模拟保存链路配置接口
app.post("/api/link/config/save", (req, res) => {
  const { downstreamConfig, upstreamConfig } = req.body;

  // 模拟保存逻辑
  console.log("保存下行链路配置:", downstreamConfig);
  console.log("保存上行链路配置:", upstreamConfig);

  res.json({ success: true, message: "配置保存成功" });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

注意事项

  1. 数据验证：在前端和后端对配置数据进行验证，确保数据的正确性。
  2. 实时更新：可以通过 WebSocket 或定时轮询的方式实时更新链路状态和性能指标。
  3. 安全性：确保配置接口的安全性，避免未授权访问。

通过上述设计， 可以实现一个功能完整的链路配置页面，方便用户管理和监控链路配置。

相关推荐
小小坤1 小时前
前端基于AI生成H5 vue3 UI组件
前端·javascript·vue.js
YUELEI1181 小时前
Vue使用ScreenFull插件实现全屏切换
前端·javascript·vue.js
betterangela2 小时前
react基础语法视图层&类组件
前端·javascript·vue.js
刺客_Andy3 小时前
vue3第三十节（vue3 vite中使用sass）
前端·vue.js
monkeyhlj4 小时前
前：vue 后：django 部署：supervisor+nginx 流程及部分问题简记
vue.js·nginx·django
夜寒花碎5 小时前
如何把项目里的webpack换成vite？
前端·vue.js·vite
巴巴博一6 小时前
vue3实现虚拟滚动Vue-Virtual-Scroller
javascript·vue.js·ecmascript
begei6 小时前
Spring Boot+Vue项目从零入手
vue.js·spring boot·后端
极简之美6 小时前
Vscode工具开发Vue+ts项目时vue文件ts语法报错-红波浪线等
ide·vue.js·vscode
热门推荐
01如何在WPS和Word/Excel中直接使用DeepSeek功能02DeepSeek各版本说明与优缺点分析03本地部署DeepSeek教程（Mac版本）04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05如何本地部署AI智能体平台，带你手搓一个AI Agent06本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程07DeepSeek RAGFlow构建本地知识库系统08苍穹外卖面试总结09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10Windows 11 安装 Dify 完整指南 非docker环境