开发者中心

基于脚手架开发

# 1 环境准备

使用nvm安装node服务，便于管理版本切换，nvm下载地址 (opens new window)

nvm v // 查看版本
nvm root // 查看nvm安装目录
nvm list available  // 展示node版本列表
nvm install 23.1.0  // 安装node
nvm uninstall <version> // 卸载指定版本nodejs
nvm ls // 查看当前安装过的node版本列表
nvm use version // version为版本号，切换使用node版本

注意

node版本：23.1.0+

IoTCenter 版本：java、v6.1+

安装nvm前如果已经安装了node，必须要完全卸载。否则在执行npm时，会找不到对应指令（此时也可以使用CMD切换到NVM对应版本NODE目录下执行）

  1. 控制面板卸载nodejs
  2. 删除node安装目录，可以使用npm config get prefix查看目录
  3. 手动删除C盘中遗留文件
  4. 删除C盘中遗留的文件：在C盘查找 .npmrc 与 .node_repl_history 是否存在；以下内容如果存在，请逐个删除
C:\Program Files (x86)\Nodejs
C:\Program Files\Nodejs
C:\Users\用户名\AppData\Roaming\npm
C:\Users\用户名\AppData\Roaming\npm-cache
C:\Users\用户名\AppData\Local\npm-cache
  1. 将有关node的环境变量删除
  2. 在CMD中查看卸载是否成功，最后一定要重启电脑。
npm -v
node -v

# 2 流程介绍

# 2.1 子应用开发流程

子应用开发流程

# 2.2 基座加载子应用

基座加载子应用

# 3 IOT服务部署

说明

参考安装部署教程 (opens new window)

# 4 脚手架安装

# 4.1 安装步骤

在Git Bash Here（或者VS CODE终端）中输入以下命令，更改npm指向：

npm config set registry=http://registry.npmjs.org

# 4.2 安装敢为脚手架

  1. 打开终端控制（请用管理员权限打开）
  2. 执行脚本：
npm install @ganwei-web/ganwei-pc-cli -g 

// 如果有版本更新，执行npm uninstall @ganwei-web/ganwei-pc-cli -g 进行卸载，然后再执行上述指令进行安装

说明：如果使用 npm install @ganwei-web/ganwei-pc-cli 指令安装成功，加-g却不成功，则可能原因有：

  1. 安装在C盘无权限，请正常安装D盘目录
  2. 配置了环境变量后，没有重启

# 4.3 创建项目

新建空文件夹，基于当前文件夹，打开终端控制窗口：执行脚本：

ganwei-pc create projectName

创建项目1

创建项目2

脚手架有多个版本选择，这里我们选择web-6.2.3版本进行开发（如果想在此版本运行java服务，使用pnpm dev:java切换，目前net/java版本通过环境变量控制）。

# 5 项目结构说明

├─configuration                     // 工程级脚本与配置
│  ├─clean.cjs                      // 清理脚本（递归删除目录）
│  ├─cleanNodeModule.js             // 清除所有子应用 node_modules 脚本
│  ├─gitClone.js                    // 子应用克隆脚本（克隆至 packages）
│  ├─moduleConfiguration.json       // 子应用相关配置（端口映射 addressMapping、proxyTarget、proxySocket）
│  ├─setBackendType.js              // 后端类型切换脚本（net / java，通过环境变量控制）
│  └─updateModule.cjs               // 更新内部公用模块包
├─scripts                           // 性能检测与模块保障脚本
├─packages                          // 所有应用
│  ├─ganwei-iotcenter-index         // 基座
│  ├─ganwei-iotcenter-login         // 登录模块
│  └─ganwei-iotcenter-template      // 子应用开发模板
├─.gitignore                        // git 提交忽略文件配置（npm 打包发布后为 .npmignore）
├─.npmrc                            // 设置依赖包的安装来源
├─.nvmrc                            // node 版本锁定（配合 nvm use 使用）
├─init.cjs                          // gw-base-versions-config 版本包更新
├─lighthouserc.cjs                  // Lighthouse 断言配置（配合 report:perf）
├─package.json                      // 包版本管理文件
└─pnpm-workspace.yaml               // 定义管理结构多项目

打开package.json 查看执行指令

dev              // 本地启动项目（.net）：切换后端类型 -> 校验子应用模块 -> 并行启动 packages 下全部子应用
build            // 打包（.net）
dev:java         // 本地启动项目（java）
build:java       // 打包（java）
cleanAll         // 删除所有依赖包（含子应用依赖包，依赖全局 rimraf，需先执行 npm install rimraf -g，见第 11 章）
clean            // 清理 node_modules（内置脚本，不依赖 rimraf）
report:perf      // Lighthouse 性能采集 + 断言

pnpm dev 相当于执行packages下子应用的全部dev命令

pnpm build 相当于执行packages下子应用的全部build命令

pnpm cleanAll 删除所有依赖包，包含子应用依赖包

# 6 子应用开发

# 6.1 模板文件结构

子应用模板（ganwei-iotcenter-template）的内部目录结构如下：

├─build
│  └─enteryJson.js                  // 入口文件配置（含外部标签注入）
├─public
│  └─static              // 公共静态文件
│      ├─css             // 公共css样式（element样式包）
│      ├─fonts           // 字体库
│      ├─http            // 全局http请求
│      ├─images          // 图片文件（44个svg + 17个png）
│      ├─js              // 公用js（29个js文件）
│      ├─json            // JSON配置文件
│      ├─lib             // 第三方库
│      └─themes          // 主题文件
└─src                    // 项目源代码
    ├─assets             // 静态文件
    │  └─images          // 图片
    ├─request            // 接口定义
    │  ├─api             // 接口文件夹
    │  │  └─template.ts  // 模板接口文件（TypeScript）
    │  └─api.ts          // api请求统一引用（TypeScript）
    ├─utils              // 工具类（TypeScript）
    │  ├─index.ts        // 工具统一导出
    │  ├─date.ts         // 日期处理
    │  ├─number.ts       // 数字处理
    │  ├─string.ts       // 字符串处理
    │  ├─file.ts         // 文件处理
    │  ├─dom.ts          // DOM操作
    │  ├─storage.ts      // 本地存储（含主题设置）
    │  ├─performance.ts  // 性能优化
    │  ├─env.ts          // 环境变量
    │  ├─xss-filter.ts   // XSS过滤
    │  └─signalr.ts      // SignalR实时通信工具类
    ├─views              // 多页面
    │  └─template.vue    // 页面文件
    ├─App.vue            // 根组件（Vue 3 setup语法 + TypeScript）
    ├─hostMap.ts         // 端口映射文件（TypeScript含类型定义）
    ├─main.ts            // 入口文件（TypeScript）
    ├─router.ts          // 路由文件（TypeScript含路由守卫）
  ......

打开package.json 查看执行指令

dev              // 本地启动项目
build            // 打包

# 6.2 配置菜单

# 6.2.1 菜单配置

在部署IoTCenter 6.1服务之后，在浏览器输入https://127.0.0.1:44380 进行访问，使用默认账号密码进行登录（向服务授权人员获取）。打开应用商店安装“模板应用”、“菜单管理”：如果已经安装，在运维管理中打开预览；否则在安装完成后，在应用商店已安装功能页中进行服务重启，或者自行手动重启。需要在此强调：每新增一个模块，需要重启服务。

菜单配置001

菜单配置002

重启服务，即可在系统运维模块下看到此配置菜单。

菜单配置003

如果不能从应用商店安装“模板应用”插件，则需要自行手动新增菜单，步骤如下：打开运维模块，进行菜单管理配置（如果没有该插件，请在应用商店搜索“菜单管理”进行安装）。依据子应用名称配置，这里以模板页面开发为例

首页路由

本实例配置菜单如下：

  1. 上级菜单：设备管理
  2. 菜单名称：模板开发
  3. 插件ID：Ganweisoft.IoTCenter.Module.Template
  4. 组件路径：/Index/jumpIframe/ganwei-iotcenter-template/template

参数说明：

  1. 插件ID：填写后台提供的插件包名
  2. 显示端：有PC、移动端、桌面版等选项，这里以pc端为例
  3. 组件路径：即页面路由路径，配置格式为：/Index/jumpIframe/子应用包名/页面路由名，如实时快照：/Index/jumpIframe/ganwei-iotcenter-system-snapshot/systemSnapshot

# 6.2.2 内嵌菜单配置说明（后端插件配置菜单项）

内嵌菜单配置2

属性定义（这块属于应用商店）：

属性名称：IsEmbeddedMenu

属性类型：布尔值（true / false）默认值：false

配置位置：菜单 JSON 文件 → MenuDatas 数组节点下

内嵌菜单含义：

内嵌菜单是非独立展示、非独立路由入口的菜单类型，主要用于在指定页面 / 组件内部加载使用，不对外暴露独立访问入口，具备以下核心特征：

  1. 不作为系统独立路由入口，无法通过路由地址直接访问；
  2. 通常在 iframe、页面子容器、业务组件内部加载渲染；
  3. 不显示在系统主导航、侧边栏等公共菜单区域；
  4. 依附于指定父页面 / 业务模块，作为子功能菜单使用。

配置规则：

当菜单设置为内嵌菜单时，必须同步配置启用状态，保证菜单不被外部加载显示：

  1. 开启内嵌菜单："IsEmbeddedMenu": true
  2. 强制停用菜单："Enabled": 0

Enabled：菜单启用状态，1= 启用，0= 停用

标准配置示例：

"MenuDatas": [
  {
    "MenuName": "菜单名称",
    "NodeType": 2,
    "Route": "/Index/jumpIframe/",
    "Order": 1,
    "Icon": "icon-gw-icon-device-list",
    "MenuOwner": 0,
    "Enabled": 0,
    "IsEmbeddedMenu": true
  }
]

配置约束：

  1. 内嵌菜单必须设置 Enabled: 0，禁止外部菜单加载、展示；
  2. 内嵌菜单在角色菜单权限页面可选；
  3. 非内嵌菜单保持默认配置 "IsEmbeddedMenu": false，启用状态按业务需求正常配置。

# 6.3 子应用名称修改以及服务地址配置

新增子应用步骤：

  1. 复制 packages/ganwei-iotcenter-template → packages/ganwei-iotcenter-你的名称
  2. 把该目录 package.json 的 name 改成新目录名（必须与目录名一致）
  3. 修改 src/router.ts / src/views 下页面（见 6.4）
  4. 运行 pnpm dev：脚本会自动把新包写入 configuration/moduleConfiguration.json 并分配端口
  5. 到菜单管理配置菜单，组件路径用 /Index/jumpIframe/ganwei-iotcenter-你的名称/页面路由名

以当前template为例：

  1. 命名规范：ganwei-iotcenter-*。名称必须与目录名、基座 configuration/moduleConfiguration.json 中 addressMapping 的键以及部署目录保持一致，否则 pnpm dev 启动时会报 TypeError（addressMapping 中取不到该名称）。

2.路由引用更新

名称修改006

3.更新基座ganwei-iotcenter-index/configuration/moduleConfiguration.json文件，此文件作用是对子应用本地启动服务配置以及实际连接服务的配置。proxyTarget、proxySocket配置需要手动修改。addressMapping子插件地址在pnpm dev运行时会自动分配。

端口配置

{
    "addressMapping": {
        "ganwei-iotcenter-index": "http://127.0.0.1:9160",
        "ganwei-iotcenter-login": "http://127.0.0.1:9180",
        "ganwei-iotcenter-template": "http://127.0.0.1:9540"
    },
    "applicationPath": {},
    "proxyTarget": "https://127.0.0.1:44388/",
    "proxySocket": "https://127.0.0.1:9600/",
    "proxySocketExplanation": "java版本socket连接地址"
}

addressMapping表示packages目录下子应用的启动地址。根据子应用名称进行端口配置。

proxyTarget表示要连接IoT服务的地址（根据部署IoT后访问地址写入）。

proxySocket表示Socket.IO连接地址。

注意

addressMapping 端口由脚本自动分配，一般无需手工干预；若手工填写，各子应用端口不得重复。

# 6.4 代码开发

  1. 在packages目录下面找到子应用模板，打开src/views目录，根据子应用功能，创建vue文件
  2. 在子应用 src/router.ts 中为新增页面注册路由，path 即菜单“组件路径”末段（如 path: '/myPage' 对应组件路径 /Index/jumpIframe/你的包名/myPage）
  3. 未注册路由的页面不会被基座加载

代码开发

# 6.5 启动项目

在根目录执行脚本：

pnpm dev 运行后，连接的是.net服务；pnpm dev:java 运行后，连接的是java服务；（区分在于signalr和socket.io）

pnpm install  // 如果提示不是内部指令，需自行处理环境变量配置
pnpm dev

启动项目

安装依赖报错：

  1. 检查node，至少23.1.0版本
  2. npm已指向http://registry.npmjs.org
  3. 删除所有子应用package-lock.json
  4. 删除已经安装的依赖包
  5. 重新安装依赖

# 6.6 登录

输入账号密码登录 IoT（初始化默认账号密码请联系相关人员获取）。

登录页面

注意

跟脚手架连接服务相关，具体以目标服务账号密码为准。

# 6.7 打开模板开发页面

登录之后打开模板开发页面。

注意

如果是对接自定义开发API，由于控制器不一致，需要在对应模块（ganwei-iotcenter-template）的根目录，找到vite.config.ts配置文件，对proxy字段进行相应配置，然后重新启动项目。

模板开发页面

# 6.8 模式配置

# 6.8.1 系统安全模式和非安全模式配置

翻译文件008

安全模式：只能从应用商店在线安装或升级应用，手动上传或直接放入iotcenter的应用重启后应用会被还原；非应用商店安装的协议、扩展插件不会加载执行。

非安全模式：允许从应用商店在线安装、手动上传或直接在iotcenter中替换应用。

注意

登录首页后，右上角如果显示为安全模式，需要设置为非安全模式； 登录系统，右侧头像->鼠标悬停->选择运行模式，切换为非安全模式后点击确定保存。重启服务，重新登录后即可显示为非安全模式。

# 6.9 多语言配置

# 6.9.1 多语言文件配置

功能说明：所有翻译文件都保存在后台子应用功能插件中，当访问各个页面时，前端根据当前语言，请求后台对应页面翻译文件。详细配置请看中英文开发文档

翻译文件008

后台插件模板下载 (opens new window)

将下载的后台模板插件，解压后把back-end目录下的文件拷贝到IoT部署服务publish/plugins目录下，并重启IoT服务（其他插件包也放置在此位置）。或者整个包通过应用商店上传，然后进行安装重启，则可以连接上远程环境进行开发。

翻译文件配置4

注意

  1. 翻译文件名称命名规则：子应用包名.页面路由名.json（java均为小写，net首写大写）

  2. 内部最后一个对象不能有逗号结尾，否则会出错

# 6.9.2 翻译文件内容格式

翻译文件为 JSON 格式，按语言分目录存放：Localization/<语言>/Front/子应用包名.页面路由名.json（后台菜单文案放在同级的 Back/ 目录下）。以 zh-CN 为例：

{
    "title": {
        "channelManagement": "渠道管理",
        "businessManagement": "业务管理"
    },
    "channelManagement": {
        "button": {
            "add": "新增",
            "edit": "编辑"
        }
    }
}

各语言目录下的文件键结构保持一致，只翻译值。

# 6.9.3 插件引用

在入口文件中引用翻译插件：

翻译插件引用1

翻译插件引用2

import i18n from '@ganwei-web/gw-base-utils-plus/i18n/dist/index.es.js'
app.use(i18n)

import muduleObserve from '@ganwei-web/gw-base-utils-plus/moduleObserve/dist/index.es.js'
// 在 App.vue 中通过 defineOptions 混入
defineOptions({
    mixins: [muduleObserve]
})

# 6.9.4 页面引用

页面引用6

页面引用6

用法：
模板中：{{ $t('页面路由名.键名') }}
组合式API（script setup）中：const { t } = useI18n()（来自 vue-i18n）后使用 t('页面路由名.键名')

# 6.10 主题配置

# 6.10.1 主题文件说明

主题文件放置在 public/static/themes/ 目录下。

# 6.10.2 主题文件引用

主题脚本在子应用 index.html 中直接引入：

<script src="../static/themes/default-theme-6-1.js"></script>

主题文件引用1

主题文件引用2

# 6.10.3 全局样式配置以及主题引用

在子应用 vite.config.ts 中配置全局 SCSS：

css: {
    preprocessorOptions: {
        scss: {
            additionalData: '@use "@ganwei-web/gw-base-style-plus/style.scss" as *;',
            javascriptEnabled: true
        }
    }
}

# 6.10.4 主题切换

主题切换3

主题切换4

主题切换通过基座统一管理，子应用通过 window.getParameterMap() 获取URL中的theme参数，并调用 setTheme() 方法设置主题。

# 6.11 公共样式引用

说明：统一风格

# 6.11.1 table表格

公共样式-主题5

公共样式（用法参考el-table、el-dialog弹窗）：

分页：@include pagination;
输入框：@include searchInput;
分割线：@include verticalLine;
单行超出省略：@include whiteSpace;
页面主体区域顶部：@include page-header;
页面主体区域：@include page-body;

# 6.11.2 el-dialog弹窗

公共样式1

公共样式2

同上，使用公共样式Mixin统一风格。

# 7 子应用打包

打包

根目录下执行pnpm build  // java版本是 pnpm build:java

子应用打包之后生成 assets、static、index.html，产物位于 dist/子应用包名/ 目录下（如 dist/ganwei-iotcenter-template/）。

# 8 子应用版本记录（没有仓库权限则不需要查阅本章节）

版本记录1

每个插件打包后应该知道对应的发布版本，否则会导致项目版本迭代错乱问题，因而基座中集成了自动获取gitee标签版本号作为标头；如果没有这块账号，可以打包后自行手动记录版本。

子应用开发完成之后，有版本发行，可记录版本号。

版本记录2

# 9 子应用部署

将子应用部署到IOT项目目录中 IoTCenterWeb/publish/wwwroot目录下

部署时需保证：站点根目录为 wwwroot，子应用产物放在 wwwroot/子应用包名/ 下（目录名与子应用包名一致），共享的 static 资源位于 wwwroot/static/，否则页面静态资源会 404。

部署1

部署2

# 10 pnpm指令说明（扩展）

pnpm install dayjs -w  安装到工作区根目录，npm递归式查找依赖时会向上查到根目录
pnpm add dayjs --filter ganwei-iotcenter-template  安装dayjs到子应用ganwei-iotcenter-template中，并且会在子应用dependencies添加依赖
pnpm remove dayjs --filter ganwei-iotcenter-template  跟add相反
pnpm install dayjs -r 安装到每个子应用中，并且会在子应用dependencies添加依赖
pnpm why ganwei-iotcenter-template -r  查看依赖关系
pnpm dev --filter ganwei-iotcenter-template  在根目录执行子应用指令

# 11 rimraf工具下载（扩展）

工具说明：快速删除比较大的文件夹，如node_modules

用法：在项目根目录执行

rimraf node_modules

打开cmd窗口，执行指令：

npm install rimraf -g

# 12 基座结构说明（扩展）

基座（ganwei-iotcenter-index）是整个微前端系统的核心，负责菜单管理、子应用加载、消息转发、主题管理等全局功能。

# 12.1 基座文件结构

├─build                                  // 构建脚本
│  ├─entryJson.js                        // 多页面入口文件配置
│  ├─vite-addInfo-html.ts                // 打包时向 index.html 注入版本信息
│  ├─vite-inject-preconnect.ts           // dev 预连接插件：把 addressMapping 中各子应用 origin 以 preconnect/dns-prefetch 注入 &lt;head>（仅 dev 生效，生产为同源部署）
│  └─vite-plugin-stats-html.js           // vite 打包产物分析插件
├─public
│  └─static                              // 公共静态文件
│      ├─css               // 公共css样式（11个文件，含 element-plus 主题变量 css-vars.css）
│      ├─fonts             // 字体库（14个文件）
│      ├─http              // 公共 axios 实例（createAxios.js）
│      ├─images            // 图片文件（44个svg + 17个png + 1个jpg）
│      ├─js                // 公用js（30个js + 1个gz）
│      ├─json              // JSON配置文件（config.json / RAMScope.json / snapshot.json）
│      ├─lib               // 第三方公共组件包（equip-list-vue2 / vue3 / vue3-java / vue3-net、treeV2）
│      └─themes            // 主题文件（light/dark css、6-1 变体、default-theme.js、themeConfig.json）
├─src                       // 项目源代码
│  ├─components            // 组件
│  │  ├─auth               // 权限/账号相关组件（8个vue：密码修改、安全模式、用户信息、重启对话框等）
│  │  ├─debug              // 调试组件（DebugWarning.vue、NoAccess.vue）
│  │  ├─filePreview        // 文件预览组件（通用文件预览 + CAD 图纸查看器 MlightCadViewer）
│  │  ├─layout             // 布局组件（9个vue：侧边栏、多标签页 LabelPage、右键菜单、顶部导航等）
│  │  ├─notification       // 通知组件（8个vue：未读消息、到期提醒、续费提醒、设备报警等）
│  │  ├─system             // 系统组件（8个vue + images）
│  │  └─utils              // 工具组件（contextMenu.js）
│  ├─composables           // Composition API钩子（11个ts文件）
│  │  ├─useAuth.ts         // 认证钩子
│  │  ├─useCrossTabListener.ts // 跨标签页监听
│  │  ├─useDataHandle.ts   // 数据处理
│  │  ├─useDialog.ts       // 弹窗钩子
│  │  ├─useFormatName.ts   // 名称格式化
│  │  ├─useFullscreen.ts   // 全屏钩子
│  │  ├─usePermission.ts   // 权限钩子
│  │  ├─useQuitLogin.ts    // 退出登录
│  │  ├─useSpeakTts.ts     // 语音播报
│  │  ├─useTheme.ts        // 主题钩子
│  │  └─useTranslation.ts  // 翻译钩子
│  ├─realtime              // 实时通信适配层
│  │  └─realtimeAdapter.js // 按 VITE_BACKEND_TYPE 动态 import：java→Socket.IO、net→SignalR（默认 java；动态加载，未使用的通信库不打入 bundle）
│  ├─request               // 接口定义
│  │  ├─api.ts             // API 模块入口（gw-base-api-plus 基础 API + 框架业务 API 合并导出）
│  │  └─api                // 业务接口模块（8个ts：auth / fileAccess / misc / park / process / system / types / upgrade）
│  ├─signalr               // SignalR实时通信（.NET后端，4个js）
│  │  ├─signalr.downFileNotify.js    // 文件下载通知
│  │  ├─signalr.eGroupNotify.js      // 事件组通知
│  │  ├─signalr.monitor.js           // 场景监控
│  │  └─signalr.realTimeChange.js    // 实时变更通知
│  ├─socket                // Socket.IO实时通信（Java后端，4个js）
│  │  ├─socket.downFileNotify.js      // 文件下载通知
│  │  ├─socket.eGroupNotify.js       // 事件组通知
│  │  ├─socket.monitor.js            // 场景监控
│  │  └─socket.realTimeChange.js     // 实时变更通知
│  ├─utils                 // 工具类（13个ts + 1个js：date / dom / env / file / locale / number / perf / performance / storage / string / xss-filter / sm4Encrypt 等）
│  ├─views                 // 页面
│  │  ├─index.js           // 基座主逻辑（菜单加载、消息转发、主题管理）
│  │  ├─Index.vue          // 基座主页面
│  │  └─jumpIframe/        // iframe加载子应用
│  │     ├─index.vue       // iframe容器页面
│  │     ├─preloadMethod.js // 预加载方法
│  │     └─queryParser.js  // URL参数解析
│  ├─App.vue               // 根组件
│  ├─hostMap.ts            // 子应用地址映射（dev 按 moduleConfiguration.json 端口表，production 直接返回 host 同源相对路径）
│  ├─main.ts               // 入口文件
│  ├─router.ts             // 路由文件
│  ├─store.ts              // 状态管理
│  ├─types.ts              // 类型定义
│  └─auto-import.d.ts      // 自动导入类型声明

# 12.2 基座核心逻辑

基座 src/views/index.js 是整个系统的核心，包含以下功能：

  • 菜单管理：通过 getMenus() 从服务端获取菜单数据，递归处理菜单结构
  • 消息转发：监听 window.message 事件，将子应用间的 postMessage 消息转发到所有iframe
  • 主题管理：通过 getWebConfigAndMenu() 获取配置，支持主题切换
  • 参数解析：通过 window.getParameterMap() 解析URL参数，控制界面显示隐藏

消息转发核心代码：

window.addEventListener('message', e => {
    if (e.data && typeof e.data == 'object' && 'pub' in e.data) {
        const allSpans = document.querySelectorAll('.jumpPage iframe');
        allSpans.forEach(iframe => {
            iframe.contentWindow.postMessage({ pub: e.data.pub })
        });
    }
})

# 12.3 Socket.IO 与 SignalR

基座同时支持 Socket.IO 和 SignalR 两种实时通信方式：

  • Socket.IO（生产使用）：位于 src/socket/ 目录，通过 mixin 方式集成
  • SignalR（备用/兼容）：位于 src/signalr/ 目录，同样是 mixin 格式

切换方式：在 src/views/index.js 中注释/取消注释对应的 import 和 mixins 行。

备注： socket.io内部有使用说明

# 12.4 子应用加载

基座通过 src/views/jumpIframe/ 目录下的组件加载子应用：

  • index.vue：iframe容器页面

  • queryParser.js：URL参数解析工具

  • preloadMethod.js：预加载方法

# 13 基座功能扩展（扩展）

# 13.1 通信系统

基座与子应用之间通过 postMessage 进行通信（AB页面都打开，并且在A页面操作）：

A 页面 methods：

// 发送消息
window.top.postMessage({ pub: 'eventName', data: payload })

B 页面 mounted：

// 接收消息
window.addEventListener('message', (e) => {
    if (e.data && e.data.pub) {
        // 处理消息
    }
})

注意

需要2个模块进行改造，消息经过基座传递（已写好）。基座 src/views/index.js 中已实现消息转发：

window.addEventListener('message', e => {
    if (e.data && typeof e.data == 'object' && 'pub' in e.data) {
        const allSpans = document.querySelectorAll('.jumpPage iframe');
        allSpans.forEach(iframe => {
            iframe.contentWindow.postMessage({ pub: e.data.pub })
        });
    }
})

# 13.2 隐藏块级

在地址后面新增参数，可以隐藏对应的结构板块：

参数 说明
isHideHead=true 隐藏 head，默认 false
isHideMenu=true 隐藏 menu，默认 false
content=true 隐藏 head 和 menu，默认 false
removeParams=true 左侧菜单选中，有些需要删除携带参数去比对菜单
sidebarState=collapsed 菜单收缩
sidebarState=expanded 菜单展开

示例：

https://IP:Port/index.html#/Index/jumpIframe/ganwei-iotcenter-template/template?isHideMenu=true

界面隐藏

# 13.3 页签功能

参数说明

hasPage: hasPage,
url: url,
title: title,
icon: icon,
packageId: packageId,
pluginName: pluginName,
menuName: menuName,
customParameters: customParameters

注意

子插件调用使用 window.top.xxxx，但是父级页面不能含有，以防止报错。

# 菜单中未含有的新开页签：

window.openModulePage( false,'/Index/jumpIframe/ganwei-iotcenter-template/template1', '模板管理1', 'icon-caidan_shebeiliebiao','Ganweisoft.IoTCenter.Module.Template', 'ganwei-iotcenter-template', 'template1','a=3')

# 菜单中含有的新开页签：

window.openModulePage( true,'/Index/jumpIframe/ganwei-iotcenter-template/template', '模板管理', 'icon-caidan_shebeiliebiao')

# 刷新

window.refreshModulePage()

# 关闭

window.closeModulePage()

# 13.4 WEB外部链接

菜单管理中配置示例

https://ip:port/ganwei-iotcenter-menu-manage/index.html?target=_blank

# 13.5 前端组件说明文档

基于element-plus二次封装，统一组件的引用样式

https://test.iotapp.ganweicloud.com:5443/gw/index.html#/home

# 13.6 SSO

文档地址： 单点登录配置 | 开发者中心 (opens new window)

WEB配置中需要直接跳转，则把get改成redirect

sso

最终访问地址：

https://192.168.0.192:44380/ganwei-iotcenter-login/#/ssoLogin?url=/#/Index/jumpIframe/ganwei-iotcenter-equip-lists/equipListsIot?isHideMenu=true&isHideHead=true

注意

需要把URL= 后面的内容在网页进行编码（URL编码 - 在线URL编码器 (opens new window)），不然字符截取有问题

上次更新: 2026/9/22 14:22:46

← 独立构建开发项目→

目录