Front‐End Development Guide - ganweisoft/WebPlugins GitHub Wiki
Download link：https://github.com/coreybutler/nvm-windows/releases
nvm v // View version
nvm root // View nvm installation directory
nvm list available // Display node version list
nvm install 14.21.3 // Install node
nvm unstall <version> // Uninstall the specified version of nodejs
nvm ls // View the list of currently installed node versions
nvm use version // Version is the version number, switch to using node version
:::danger pay attention to Node requires installation of two versions：14.21.3、23.1.0
If node has already been installed before installing nvm, it must be completely uninstalled. Otherwise, when executing npm, the corresponding instruction will not be found (in this case, you can also use CMD to switch to the corresponding version of NVM and execute it in the NGE directory)
details
├─packages // All applications
└─IoTCenterWebBase // Base
└─configuration // Login Module
└─packages // Integrate into the base version sub plugin
└─ganwei-iotcenter-eq-linkage // Equipment linkage
└─ganwei-iotcenter-index // Base
└─ganwei-iotcenter-login // login
└─IoTCenterWebPlugin // Base
└─build // Webpack Components
└─config // Global Configuration
└─pages // Integrate into the base version sub plugin
└─ganwei-iotcenter-equip-lists // devices
└─ganwei-iotcenter-equip-manage // equipment management
└─ganwei-iotcenter-event-querys // Event Query
└─ganwei-iotcenter-login // ogin
└─ganwei-iotcenter-log-previews // Log Preview
└─ganwei-iotcenter-system-snapshot // Real time snapshot
└─ganwei-iotcenter-time-tasks // Scheduled tasks
└─public // Public package
└─static // Static resource file
├─.gitignore // git Submit ignore file configuration
Open packagejson to view the execution instructions
IoTCenterWebBase：
pnpm dev // Local launch project
pnpm build // pack
IoTCenterWebPlugin：
npm run dev-all // Local launch project
npm run build-all // Baozi plugin
details
├─build
├─enteryJson.js //Entry file configuration
├─vite-addInfo-html.ts //Add version information script
├─vite-plugin-stats-html.js //Vite packaged product analysis plugin
├─public
│ └─static // Public static files
│ ├─css // Public CSS Styles (Element Style Package)
│ ├─fonts // Font Library
│ ├─http // Global HTTP Request
│ ├─images // Picture files
│ ├─js // Public JS
│ └─themes // topic file
└─src // Project Source Code
├─components // component
├─language // chinese and english
├─request // interface definition
└─views // page
├─APP.vue // root component
├─hostMap.ts // Port mapping file
├─main.ts // Entry file
├─router.ts // routing file
......
Open packagejson to view the execution instructions
dev // Local launch project
build // pack
💡Please refer to the server deployment document for the default username and password of the system
details
Update the IoTCenter WebBase/packages/ganwei iotcenter index/src/views/menu.js file based on the newly added or modified name。
[{
"resourceId": 4,
"parentRedId": 0,
"name": "System operation and maintenance",
"menuName": null,
"resourceOrder": 2,
"route": "",
"className": "CF73895C912BF2690E774CAF29ADF5F8",
"icon": "icon-gw-icon-yijimenu-xitongyunwei",
"path": null,
"nodeType": 1,
"level": 0,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": [
{
"resourceId": 18,
"parentRedId": 1,
"name": "devices",
"menuName": null,
"resourceOrder": 1,
"route": "/Index/jumpIframe/ganwei-iotcenter-equip-lists/equipListsIot",
"className": "Ganweisoft.IoTCenter.Module.EquipList",
"icon": "icon-gw-icon-device-list",
"path": null,
"nodeType": 2,
"level": 1,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.EquipList",
"backgroundColor": "#6763EF"
},
{
"resourceId": 16,
"parentRedId": 1,
"name": "equipment management",
"menuName": null,
"resourceOrder": 2,
"route": "",
"className": "Ganweisoft.IoTCenter.Module.EquipConfig",
"icon": "icon-gw-icon-device-management",
"path": null,
"nodeType": 1,
"level": 1,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": [{
"resourceId": 70,
"parentRedId": 16,
"name": "equipment management",
"menuName": null,
"resourceOrder": 1,
"route": "/Index/jumpIframe/ganwei-iotcenter-equip-manage/equipInfo",
"className": "EquipMangement",
"icon": "icon-gw-icon-device-management",
"path": null,
"nodeType": 2,
"level": 2,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.EquipConfig",
"backgroundColor": "#6763EF"
},
{
"resourceId": 71,
"parentRedId": 16,
"name": "product management",
"menuName": null,
"resourceOrder": 2,
"route": "/Index/jumpIframe/ganwei-iotcenter-equip-manage/templateManage",
"className": "ProductMangement",
"icon": "icon-gw-icon-product-management",
"path": null,
"nodeType": 2,
"level": 2,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.EquipConfig",
"backgroundColor": "#2FA9E6"
}
],
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.EquipConfig",
"backgroundColor": "#2FA9E6"
},
{
"resourceId": 17,
"parentRedId": 1,
"name": "Real time snapshot",
"menuName": null,
"resourceOrder": 2,
"route": "/Index/jumpIframe/ganwei-iotcenter-system-snapshot/systemSnapshot",
"className": "Ganweisoft.IoTCenter.Module.RealTime",
"icon": "icon-gw-icon-real-time-snapshot",
"path": null,
"nodeType": 2,
"level": 1,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.RealTime",
"backgroundColor": "#B945CE"
},
{
"resourceId": 42,
"parentRedId": 4,
"name": "Equipment linkage",
"menuName": null,
"resourceOrder": 1,
"route": "",
"className": "Ganweisoft.IoTCenter.Module.EquipLink",
"icon": "icon-gw-icon-device-linkage",
"path": null,
"nodeType": 1,
"level": 1,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": [
{
"resourceId": 129,
"parentRedId": 42,
"name": "Linkage configuration",
"menuName": null,
"resourceOrder": 1,
"route": "/Index/jumpIframe/ganwei-iotcenter-eq-linkage/linkSetting",
"className": "Linkage Configuration",
"icon": "icon-gw-icon-linkage-config",
"path": null,
"nodeType": 2,
"level": 2,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.EquipLink",
"backgroundColor": "#6763EF"
},
{
"resourceId": 130,
"parentRedId": 42,
"name": "Scene configuration",
"menuName": null,
"resourceOrder": 2,
"route": "/Index/jumpIframe/ganwei-iotcenter-eq-linkage/sceneSetting",
"className": "Scenario Configuration",
"icon": "icon-gw-icon-scene-configuration",
"path": null,
"nodeType": 2,
"level": 2,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.EquipLink",
"backgroundColor": "#2FA9E6"
}
],
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.EquipLink",
"backgroundColor": "#6763EF"
},
{
"resourceId": 29,
"parentRedId": 4,
"name": "Scheduled tasks",
"menuName": null,
"resourceOrder": 2,
"route": "",
"className": "Ganweisoft.IoTCenter.Module.TimeTask",
"icon": "icon-gw-icon-scheduled-tasks",
"path": null,
"nodeType": 1,
"level": 1,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": [
{
"resourceId": 87,
"parentRedId": 29,
"name": "task library",
"menuName": null,
"resourceOrder": 1,
"route": "/Index/jumpIframe/ganwei-iotcenter-time-tasks/taskRepository",
"className": "TaskLibrary",
"icon": "icon-gw-icon-task-library",
"path": null,
"nodeType": 2,
"level": 2,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.TimeTask",
"backgroundColor": "#6763EF"
},
{
"resourceId": 86,
"parentRedId": 29,
"name": "Special date arrangement",
"menuName": null,
"resourceOrder": 2,
"route": "/Index/jumpIframe/ganwei-iotcenter-time-tasks/specialTask",
"className": "SpecialDateArrangement",
"icon": "icon-gw-icon-special-date-schedule",
"path": null,
"nodeType": 2,
"level": 2,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.TimeTask",
"backgroundColor": "#2FA9E6"
},
{
"resourceId": 85,
"parentRedId": 29,
"name": "Weekly schedule",
"menuName": null,
"resourceOrder": 3,
"route": "/Index/jumpIframe/ganwei-iotcenter-time-tasks/weekTaskNew",
"className": "WeeklyArrangement",
"icon": "icon-gw-icon-weekly-schedule",
"path": null,
"nodeType": 2,
"level": 2,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.TimeTask",
"backgroundColor": "#B945CE"
}
],
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.TimeTask",
"backgroundColor": "#2FA9E6"
},
{
"resourceId": 32,
"parentRedId": 4,
"name": "Event Query",
"menuName": null,
"resourceOrder": 4,
"route": "",
"className": "EventQueries",
"icon": "icon-gw-icon-event-query",
"path": null,
"nodeType": 1,
"level": 1,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": [
{
"resourceId": 106,
"parentRedId": 32,
"name": "Equipment events",
"menuName": null,
"resourceOrder": 1,
"route": "/Index/jumpIframe/ganwei-iotcenter-event-querys/eqEvent",
"className": "Equipments",
"icon": "icon-gw-icon-device-events",
"path": null,
"nodeType": 2,
"level": 2,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.Event",
"backgroundColor": "#6763EF"
},
{
"resourceId": 107,
"parentRedId": 32,
"name": "system event",
"menuName": null,
"resourceOrder": 2,
"route": "/Index/jumpIframe/ganwei-iotcenter-event-querys/sysEvent",
"className": "System",
"icon": "icon-gw-icon-system-events",
"path": null,
"nodeType": 2,
"level": 2,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.Event",
"backgroundColor": "#2FA9E6"
}
],
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.Event",
"backgroundColor": "#27AE79"
},
{
"resourceId": 34,
"parentRedId": 4,
"name": "Log Preview",
"menuName": null,
"resourceOrder": 42,
"route": "/Index/jumpIframe/ganwei-iotcenter-log-previews/logPreview",
"className": "Ganweisoft.IoTCenter.Module.LogManage",
"icon": "icon-caidan_xitongrizhi1",
"path": null,
"nodeType": 2,
"level": 1,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "Ganweisoft.IoTCenter.Module.LogManage",
"backgroundColor": "#F68309"
}
],
"menuGroup": null,
"packageId": "CF73895C912BF2690E774CAF29ADF5F8",
"backgroundColor": "#2FA9E6"
},
{
"resourceId": 13,
"parentRedId": 0,
"name": "ganwei cloud",
"menuName": null,
"resourceOrder": 5,
"route": "https://www.ganweicloud.com?outerLink=true&target=_blank",
"className": "381fd2406b96498c8197c068f9a8726e",
"icon": "icon-gw-icon-yijimenu-ganweiyun",
"path": null,
"nodeType": 2,
"level": 0,
"menuOwner": 1,
"enabled": true,
"menuLang": "zh-CN",
"description": null,
"thumbnail": null,
"isAppBottomMenu": false,
"children": null,
"menuGroup": null,
"packageId": "381fd2406b96498c8197c068f9a8726e",
"backgroundColor": "#F68309"
}
]
The effect is as follows
Find the device linkage plugin in the packages directory, open the src/views directory, and create the template. vue template as an example
details
Execute script:
pnpm install
pnpm dev
effect：
💡Related to scaffolding connection services, the specific password of the target service account shall prevail。
details
Variable Definition（IoTCenterWebBase/packages/ganwei-iotcenter-index/public/static/themes/dark-6-1.css）
You can click here to switch themes
pnpm build
After packaging the sub application, assets, static, and index.html are generated