vue3中英文切换
效果图如下
在/src/main.ts文档添加如下内容
增加引入
import i18n from './locales/index'
增加.use(i18n)如下
app
.use(createPinia())
.use(router)
.use(RenRadioGroup)
.use(RenSelect)
.use(RenDeptTree)
.use(RenRegionTree)
.use(ElementPlus, { locale: zhCn, size: "default" })
.use(i18n)
.use(ustore)
.mount("#app");
第二：在src文件夹下创建locales文件夹，在locales文件夹里新建三个ts文件，分别是index.ts,en.ts,和zh-cn.ts
/src/locales/index.tsr 内容如下：
import { createI18n } from 'vue-i18n'
// element-plus 中的语言配置
import elementEnLocale from 'element-plus/es/locale/lang/en'
import elementZhLocale from 'element-plus/es/locale/lang/zh-cn'
// 自己的语言配置
import enLocale from './en'
import zhLocale from './zh-cn'
// 语言配置整合
const messages = {
en:{
...enLocale,
...elementEnLocale
},
'zh-cn':{
...zhLocale,
elementZhLocale
}
}
// 创建 i18n
const i18n = createI18n({
legacy: false,
globalInjection:true, // 全局模式，可以直接使用 $t
locale: 'zh-cn',
messages: messages
})
export default i18n
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
/src/locales/en.ts内容如下
export default {
common:{
more:'More',
logoName:"communication",//"communication management machine platform",
systemStatus: 'systemStatus',
systemInfoLabel: 'systemInfo',
systemInfoValue: 'Mainly display software version, online time and so on.',
wanNetwork: 'wanNetwork',
wanNetworkValue: 'The information displayed varies according to the Internet access mode.',
lanNetworkLabel: 'lanNetwork',
lanNetworkValue: `The basic information about the router'S LAN interface is displayed.`,
vpnvalue: 'Displays PPTP, IPSEC, L2TP, OPENVPN connection status.',
softwareVersion: 'softwareVersion',
localTime: 'localTime',
runtime: 'runtime',
onlineTime: 'onlineTime',
sendBytes: 'sendBytes',
receiveBytes: 'receiveBytes',
networkMode: 'networkMode',
switchMode: 'switchMode',
ipAddress: 'ipAddress',
subnetMask: 'subnetMask',
MAC: 'MAC',
addressPool: 'addressPool',
corporate: 'Caimore Communication Technology Co., @2009 ',
telephone: 'telephone',
Fax: 'Fax',
},
menus:{
'/':'home',
Home:'Home',
home:'home',
About:'About',
about:'about',
welcome: 'Welcome',
language: 'Language',
permission: 'permission',
workbenche: 'workbenche',
systemSettings: 'systemSettings',
network: 'network',
internetManagement: 'internetManagement',
VPN: 'VPN',
firewall: 'firewall',
application: 'application',
system: 'system',
WAN: 'WAN',
LAN: 'LAN',
WIFI: 'WIFI',
keepAlive: 'keepAlive',
networkFilter: 'networkFilter',
routerSet: 'routerSet',
securityPolicy: 'securityPolicy',
remoteManagement: 'remoteManagement',
wifiAuthentication: 'wifiAuthentication',
localService: 'localService',
userManagement: 'userManagement',
upgrade: 'upgrade',
netTool: 'netTool',
timeManagement: 'timeManagement',
timeToReboot: 'timeToReboot',
historyLog: 'historyLog',
debug: 'debug',
openwrtLog: 'openwrtLog',
dhcpList: 'dhcpList',
},
}
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
src/locales/zh-cn.ts内容如下：
export default {
common:{
more:'查看更多',
logoName:"通信管理机平台",
systemStatus: '系统状态',
systemInfoLabel: '系统信息',
systemInfoValue: '主要显示软件版本，在线时间等。',
wanNetwork: 'WAN网络',
wanNetworkValue: '不同上网模式，显示WAN口信息不相同。',
lanNetworkLabel: '局域网',
lanNetworkValue: '显示路由器LAN口基本信息。',
vpnvalue: '显示PPTP，IPSEC，L2TP,OPENVPN等连接状态',
softwareVersion: '软件版本',
localTime: '本地时间',
runtime: '运行时间',
onlineTime: '在线时间',
sendBytes: '发送字节',
receiveBytes: '接收字节',
networkMode: '网络模式',
switchMode: '交换机模式',
ipAddress: 'IP地址',
subnetMask: '子网掩码',
MAC: '物理地址',
addressPool: '地址池',
corporate: '厦门才茂通信科技有限公司',
telephone: '电话',
Fax: '传真',
},
menus:{
'/':'首页',
Home:'首页',
home:'主页',
About:'关于',
about:'关于',
welcome: '欢迎',
language: '语言',
permission: '权限管理',
workbenche: '工作台',
systemSettings: '系统设置',
network: '网络配置',
internetManagement: '上网管理',
VPN: 'VPN通道',
firewall: '防火墙',
application: '应用功能',
system: '系统管理',
WAN: 'WAN配置',
LAN: 'LAN配置',
WIFI: 'WIFI配置',
keepAlive: '在线保持',
networkFilter: '网络过滤',
routerSet: '路由配置',
securityPolicy: '安全策略',
remoteManagement: '远程管理',
wifiAuthentication: 'WIFI认证',
localService: '本地服务',
userManagement: '用户管理',
upgrade: '软件升级',
netTool: '网络诊断',
timeManagement: '时间管理',
timeToReboot: '定时重启',
historyLog: '历史日志',
debug: '系统日志',
openwrtLog: 'openwrt日志',
dhcpList: 'DHCP列表',
},
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
src/store/index.ts内容如下
import { CacheToken } from "@/constants/cacheKey";
import { IObject } from "@/types/interface";
import { getSysRouteMap } from "@/router";
import baseService from "@/service/baseService";
import { removeCache } from "@/utils/cache";
import { mergeServerRoute } from "@/utils/router";
import { defineStore } from "pinia";
export const useAppStore = defineStore("useAppStore", {
state: () => ({
state: {
appIsLogin: false, //是否登录
appIsReady: false, //app数据是否就绪
appIsRender: false, //app是否开始渲染内容
permissions: [], //权限集合
user: {
createDate: "",
deptId: "",
deptName: "",
email: "",
gender: 0,
headUrl: "",
id: "",
mobile: "",
postIdList: "",
realName: "",
roleIdList: "",
status: 0,
superAdmin: 0,
code: "",
username: ""
}, //用户信息
dicts: [], //字典
routes: [], //最终的路由集合
menus: [] , //菜单集合
routeToMeta: {}, //url对应标题meta信息
tabs: [], //tab标签页集合
activeTabName: "", //tab当前焦点页
closedTabs: [] //存储已经关闭过的tab
} as IObject
}),
actions: {
updateState(data: IObject) {
Object.keys(data).forEach((x: string) => {
this.state[x] = data[x];
});
},
initApp() {
return Promise.all([
// baseService.get("/sys/menu/nav"), //加载菜单
// baseService.get("/sys/menu/permissions"), //加载权限
// baseService.get("/sys/user/info"), //加载用户信息
// baseService.get("/sys/dict/type/all") //加载字典
]).then(() => {
//[menus, permissions, user, dicts]
let menus: any = `{
"code": 0,
"msg": "success",
"data": [
{
"id": "1728552235698116810",
"pid": "0",
"children": [
{
"id": "1728552700555951042",
"pid": "1728552235698116810",
"children": [],
"name": "WAN配置",
"url": "iot/wanconfigure",
"menuType": 0,
"icon": "icon-user",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728552749673250984",
"pid": "1728552235698116810",
"children": [],
"name": "LAN配置",
"url": "iot/lanconfigure",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728552821345245556",
"pid": "1728552235698116810",
"children": [],
"name": "WIFI配置",
"url": "iot/wificonfigure",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728552874444113992",
"pid": "1728552235698116810",
"children": [],
"name": "在线保持",
"url": "iot/keepalive",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
}
],
"name": "网络配置",
"url": null,
"menuType": 0,
"icon": "icon-safetycertificate",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728552971720334598",
"pid": "0",
"children": [
{
"id": "1728553019691686260",
"pid": "1728552971720334598",
"children": [],
"name": "网络过滤",
"url": "iot/networkfilter",
"menuType": 0,
"icon": "icon-unorderedlist",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
}
],
"name": "上网管理",
"url": null,
"menuType": 0,
"icon": "icon-setting",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728553165344203805",
"pid": "0",
"children": [
{
"id": "1728553215997110862",
"pid": "1728553165344203805",
"children": [],
"name": "PPTP",
"url": "iot/pptp",
"menuType": 0,
"icon": "icon-user",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728553450052368837",
"pid": "1728553165344203805",
"children": [],
"name": "IPSEC",
"url": "iot/ipsec",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1734501924026209585",
"pid": "1728553165344203805",
"children": [],
"name": "L2TP",
"url": "iot/l2tp",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728553633467822150",
"pid": "1728553165344203805",
"children": [],
"name": "OPENVPN",
"url": "iot/openvpn",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728553675135523401",
"pid": "1728553165344203805",
"children": [],
"name": "GRE",
"url": "iot/gre",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728553712184734015",
"pid": "1728553165344203805",
"children": [],
"name": "VXLAN",
"url": "iot/vxlan",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
}
],
"name": "VPN通道",
"url": null,
"menuType": 0,
"icon": "icon-safetycertificate",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728554281741718227",
"pid": "0",
"children": [
{
"id": "1728554398063451250",
"pid": "1728554281741718227",
"children": [],
"name": "路由配置",
"url": "iot/routerinfo",
"menuType": 0,
"icon": "icon-user",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728556122756836074",
"pid": "1728554281741718227",
"children": [],
"name": "NAT",
"url": "iot/nat",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1734692546426845009",
"pid": "1728554281741718227",
"children": [],
"name": "DMZ",
"url": "iot/dmz",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728556199613867003",
"pid": "1728554281741718227",
"children": [],
"name": "安全策略",
"url": "iot/securitypolicy",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728556289513164640",
"pid": "1728554281741718227",
"children": [],
"name": "OSPF",
"url": "iot/ospf",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
}
],
"name": "防火墙",
"url": null,
"menuType": 0,
"icon": "icon-safetycertificate",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728556484530391897",
"pid": "0",
"children": [
{
"id": "1732674486799345215",
"pid": "1728556484530391897",
"children": [],
"name": "下行通道配置",
"url": "iot/downchannelconfig",
"menuType": 0,
"icon": "icon-user",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1732674949801480987",
"pid": "1728556484530391897",
"children": [],
"name": "转发表配置",
"url": "iot/forwardingtableconfig",
"menuType": 0,
"icon": "icon-user",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1732675121434331862",
"pid": "1728556484530391897",
"children": [],
"name": "上行通道配置",
"url": "iot/upchannelconfig",
"menuType": 0,
"icon": "icon-user",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
}
],
"name": "应用功能",
"url": null,
"menuType": 0,
"icon": "icon-safetycertificate",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728556887096287226",
"pid": "0",
"children": [
{
"id": "1732267360983751307",
"pid": "1728556887096287226",
"children": [],
"name": "系统状态",
"url": "home",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728557186293855237",
"pid": "1728556887096287226",
"children": [],
"name": "用户管理",
"url": "iot/usermanagement",
"menuType": 0,
"icon": "icon-user",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1735011112715780614",
"pid": "1728556887096287226",
"children": [],
"name": "页面端口",
"url": "iot/pageport",
"menuType": 0,
"icon": "icon-user",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1735011112715780614",
"pid": "1728556887096287226",
"children": [],
"name": "设备唯一性",
"url": "iot/deviceuniqueness",
"menuType": 0,
"icon": "icon-user",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728557208665184441",
"pid": "1728556887096287226",
"children": [],
"name": "软件升级",
"url": "iot/softwareupgrade",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728557387532462541",
"pid": "1728556887096287226",
"children": [],
"name": "网络诊断",
"url": "iot/networkdiagnosis",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728557434119292569",
"pid": "1728556887096287226",
"children": [],
"name": "时间管理",
"url": "iot/timemanagement",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728557531699428292",
"pid": "1728556887096287226",
"children": [],
"name": "定时重启",
"url": "iot/timedrestart",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728557613314500512",
"pid": "1728556887096287226",
"children": [],
"name": "历史日志",
"url": "iot/historylog",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728557659188977369",
"pid": "1728556887096287226",
"children": [],
"name": "系统日志",
"url": "iot/systemlog",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728557698037707331",
"pid": "1728556887096287226",
"children": [],
"name": "OpenWrt日志",
"url": "iot/openwrtlog",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
},
{
"id": "1728557736431123513",
"pid": "1728556887096287226",
"children": [],
"name": "DHCP列表",
"url": "iot/dhcplist",
"menuType": 0,
"icon": "icon-apartment",
"permissions": null,
"sort": 1,
"createDate": "2024-06-04 10:59:53",
"parentName": null
}
],
"name": "系统管理",
"url": null,
"menuType": 0,
"icon": "icon-safetycertificate",
"permissions": null,
"sort": 0,
"createDate": "2024-06-04 10:59:53",
"parentName": null
}
]
}`;
let user: any = `{
"code": 0,
"msg": "success",
"data": {
"id": "1067246875800000001",
"username": "admin",
"realName": "管理员",
"headUrl": null,
"gender": 0,
"email": "root@renren.io",
"mobile": "13612345678",
"deptId": null,
"status": 1,
"createDate": null,
"superAdmin": 1,
"roleIdList": null,
"deptName": null
}
}`;
let permissions: any = `{
"code": 0,
"msg": "success",
"data": [
"iot:deviceinfo:heart",
"sys:dept:update",
"sys:params:update",
"iot:deviceinfo:synchronState",
"iot:projectinfo:delete",
"iot:electricityalarm:info",
"sys:dept:info",
"iot:projectnode:export",
"sys:role:page",
"sys:user:export",
"sys:dept:delete",
"sys:params:delete",
"iot:projectinfo:update",
"sys:params:page",
"sys:dept:list",
"sys:user:page",
"iot:deviceinfo:getDeviceInfoListByProjectNodeCode",
"sys:role:list",
"sys:menu:select",
"sys:schedule:update",
"sys:schedule:save",
"sys:params:save",
"iot:deviceinfo:info",
"iot:projectinfo:info",
"sys:params:info",
"sys:schedule:page",
"sys:dict:info",
"iot:deviceinfo:setBreakerParameter",
"sys:role:save",
"iot:electricityalarm:page",
"sys:schedule:log",
"iot:projectnode:page",
"iot:deviceinfo:save",
"sys:role:update",
"iot:circuitinfo:page",
"iot:deviceinfo:page",
"sys:log:login",
"iot:deviceinfo:getBreakerParameter",
"iot:deviceinfo:delete",
"iot:electricityconsumptionday:page",
"iot:circuitinfo:delete",
"iot:projectinfo:page",
"sys:user:save",
"iot:projectnode:save",
"sys:oss:all",
"iot:circuitinfo:save",
"sys:schedule:info",
"sys:params:export",
"iot:projectnode:delete",
"sys:menu:update",
"sys:menu:delete",
"iot:electricityconsumptionday:getElectricityConsumptionDayListByCircuitCode",
"sys:dict:delete",
"sys:dict:data:list",
"iot:deviceinfo:closeSwitch",
"iot:deviceinfo:restart",
"sys:menu:list",
"iot:deviceinfo:update",
"iot:projectinfo:save",
"sys:dict:page",
"iot:circuitinfo:export",
"sys:schedule:resume",
"iot:electricityconsumptionday:info",
"iot:electricityconsumptionday:export",
"iot:circuitinfo:info",
"sys:user:delete",
"iot:deviceinfo:openSwitch",
"iot:projectnode:info",
"iot:deviceinfo:getwayParameter",
"sys:user:update",
"sys:menu:info",
"iot:projectnode:update",
"iot:projectinfo:export",
"sys:menu:save",
"sys:log:operation",
"iot:electricityalarm:update",
"sys:role:info",
"sys:schedule:delete",
"iot:deviceinfo:softReset",
"sys:log:error",
"sys:user:info",
"iot:deviceinfo:setGatewayParameter",
"sys:schedule:run",
"sys:role:delete",
"iot:deviceinfo:deviceCode",
"iot:deviceinfo:export",
"sys:dept:save",
"sys:schedule:pause",
"sys:dict:update",
"iot:circuitinfo:update",
"sys:dict:save",
"iot:deviceinfo:remoteSettings"
]
}`;
let dicts: any = `{
"code": 0,
"msg": "success",
"data": [
{
"dictType": "air_conditioning_controller",
"dataList": []
},
{
"dictType": "arc_extinguisher",
"dataList": []
},
{
"dictType": "backup_power_monitoring",
"dataList": []
},
{
"dictType": "door_magnet",
"dataList": []
},
{
"dictType": "gender",
"dataList": [
{
"dictLabel": "男",
"dictValue": "0"
},
{
"dictLabel": "女",
"dictValue": "1"
},
{
"dictLabel": "保密",
"dictValue": "2"
}
]
},
{
"dictType": "infrared_human_body_sensor",
"dataList": []
},
{
"dictType": "multi_channel_dc_metering_control_unit",
"dataList": []
},
{
"dictType": "notice_type",
"dataList": [
{
"dictLabel": "公告",
"dictValue": "0"
},
{
"dictLabel": "会议",
"dictValue": "1"
},
{
"dictLabel": "其他",
"dictValue": "2"
}
]
},
{
"dictType": "online_monitoring_device",
"dataList": []
},
{
"dictType": "smoke_detection",
"dataList": []
},
{
"dictType": "temperature_humidity_transmitter",
"dataList": []
},
{
"dictType": "video_monitoring",
"dataList": []
}
]
}`;
menus = JSON.parse(menus);
// console.log("menus--->",menus);
permissions = JSON.parse(permissions);
// console.log("permissions--->",permissions);
user = JSON.parse(user);
// console.log("user--->",user);
dicts = JSON.parse(dicts);
// console.log("dicts--->",dicts);
if (user.code !== 0) {
console.error("初始化用户数据错误", user.msg);
}
const [routes, routeToMeta] = mergeServerRoute(menus.data || [], getSysRouteMap());
this.updateState({
permissions: permissions.data || [],
user: user.data || {},
dicts: dicts.data || [],
routeToMeta: routeToMeta || {},
menus: []
});
return routes;
});
},
//退出
logout() {
removeCache(CacheToken, true);
this.updateState({
appIsLogin: false,
permissions: [],
user: {},
dicts: [],
menus: [],
routes: [],
tabs: [],
activeTabName: ""
});
}
}
});
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
src/store/store.ts内容如下
// store.ts
import { createStore } from 'vuex';
export default createStore({
state() {
return {
count: 0,
logoName:"通信管理机平台",
menuHome: "主页",
menuPermission: '权限管理',
workbenche: '工作台',
systemSettings: '系统设置',
network: '网络配置',
internetManagement: '上网管理',
VPN: 'VPN通道',
firewall: '防火墙',
application: '应用功能',
system: '系统管理',
WAN: 'WAN配置',
LAN: 'LAN配置',
WIFI: 'WIFI配置',
keepAlive: '在线保持',
networkFilter: '网络过滤',
routerSet: '路由配置',
securityPolicy: '安全策略',
remoteManagement: '远程管理',
wifiAuthentication: 'WIFI认证',
localService: '本地服务',
userManagement: '用户管理',
upgrade: '软件升级',
netTool: '网络诊断',
timeManagement: '时间管理',
timeToReboot: '定时重启',
historyLog: '历史日志',
debug: '系统日志',
openwrtLog: 'openwrt日志',
dhcpList: 'DHCP列表',
systemStatus: '系统状态',
systemInfoLabel: '系统信息',
systemInfoValue: '主要显示软件版本，在线时间等。',
wanNetwork: 'WAN网络',
wanNetworkValue: '不同上网模式，显示WAN口信息不相同。',
lanNetworkLabel: '局域网',
lanNetworkValue: '显示路由器LAN口基本信息。',
vpnvalue: '显示PPTP，IPSEC，L2TP,OPENVPN等连接状态',
softwareVersion: '软件版本',
localTime: '本地时间',
runtime: '运行时间',
onlineTime: '在线时间',
sendBytes: '发送字节',
receiveBytes: '接收字节',
networkMode: '网络模式',
switchMode: '交换机模式',
ipAddress: 'IP地址',
subnetMask: '子网掩码',
MAC: '物理地址',
addressPool: '地址池',
corporate: '厦门才茂通信科技有限公司',
telephone: '电话',
Fax: '传真',
downChannelDataList: [] as any[],
upChannelDataList: [] as any[]
};
},
mutations: {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
},
},
actions: {
increment(context) {
context.commit('increment');
},
decrement(context) {
context.commit('decrement');
},
},
});
---------------------------------------------------------------------------------------------------------------------------------------------
src/layout/header/expand.vue内容如下
<script lang="ts">
import SvgIcon from "@/components/base/svg-icon";
import baseService from "@/service/baseService";
import { useFullscreen } from "@vueuse/core";
import { defineComponent, computed } from "vue";
import { useRouter } from "vue-router";
import { useAppStore } from "@/store";
import userLogo from "@/assets/images/user.png";
import "@/assets/css/header.less";
import { ElMessageBox } from "element-plus";
// ---------------------------------------------
import { reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import i18n from '@/locales/index'
// -------------------------------------------------
import { mapState, mapActions } from 'vuex';
import { useStore } from 'vuex';
// ---------------------------------------------------
interface IExpand {
userName?: string;
}
/**
* 顶部右侧扩展区域
*/
export default defineComponent({
name: "Expand",
components: { SvgIcon },
props: {
userName: String,
},
setup(props: IExpand) {
const ustore = useStore();
// console.log("expand.vue----logoName:" ,ustore.state.logoName);
// ---------------------------------------------------
const { locale } = useI18n();
const globalt = i18n.global.t;
const state = reactive({
curLanguage: 'zh-cn',
menuHome : { name: globalt('menus.home') },
commonLogoName : { name: globalt('common.logoName') },
});
// console.log("locale",locale);
const changeLanguage= () =>{
// if(state.curLanguage == "0"){
// locale.value = 'en';
// }
// else if(state.curLanguage == "1"){
// locale.value = 'zh-cn';
// }
locale.value = state.curLanguage;
state.menuHome = { name: globalt('menus.home') }
// console.log("menuHome.name----->",state.menuHome.name);
state.commonLogoName = { name: globalt('common.logoName') };
// console.log("commonLogoName.name----->",state.commonLogoName.name);
ustore.state.logoName = state.commonLogoName.name;
// console.log("ustore.state.logoName----->",ustore.state.logoName);
ustore.state.menuHome = state.menuHome.name;
// ---------------------------------------------------------------------
let workbenche = { name: globalt('menus.workbenche') };
ustore.state.workbenche = workbenche.name;
let network = { name: globalt('menus.network') };
ustore.state.network = network.name;
// console.log("ustore.state.network----->",ustore.state.network);
let internetManagement = { name: globalt('menus.internetManagement') };
ustore.state.internetManagement = internetManagement.name;
let VPN = { name: globalt('menus.VPN') };
ustore.state.VPN = VPN.name;
let firewall = { name: globalt('menus.firewall') };
ustore.state.firewall = firewall.name;
let application = { name: globalt('menus.application') };
ustore.state.application = application.name;
let system = { name: globalt('menus.system') };
ustore.state.system = system.name;
let WAN = { name: globalt('menus.WAN') };
ustore.state.WAN = WAN.name;
let LAN = { name: globalt('menus.LAN') };
ustore.state.LAN = LAN.name;
let WIFI = { name: globalt('menus.WIFI') };
ustore.state.WIFI = WIFI.name;
let keepAlive = { name: globalt('menus.keepAlive') };
ustore.state.keepAlive = keepAlive.name;
let networkFilter = { name: globalt('menus.networkFilter') };
ustore.state.networkFilter = networkFilter.name;
let routerSet = { name: globalt('menus.routerSet') };
ustore.state.routerSet = routerSet.name;
let securityPolicy = { name: globalt('menus.securityPolicy') };
ustore.state.securityPolicy = securityPolicy.name;
let remoteManagement = { name: globalt('menus.remoteManagement') };
ustore.state.remoteManagement = remoteManagement.name;
let wifiAuthentication = { name: globalt('menus.wifiAuthentication') };
ustore.state.wifiAuthentication = wifiAuthentication.name;
let localService = { name: globalt('menus.localService') };
ustore.state.localService = localService.name;
let userManagement = { name: globalt('menus.userManagement') };
ustore.state.userManagement = userManagement.name;
let upgrade = { name: globalt('menus.upgrade') };
ustore.state.upgrade = upgrade.name;
let netTool = { name: globalt('menus.netTool') };
ustore.state.netTool = netTool.name;
let timeManagement = { name: globalt('menus.timeManagement') };
ustore.state.timeManagement = timeManagement.name;
let timeToReboot = { name: globalt('menus.timeToReboot') };
ustore.state.timeToReboot = timeToReboot.name;
let historyLog = { name: globalt('menus.historyLog') };
ustore.state.historyLog = historyLog.name;
let debug = { name: globalt('menus.debug') };
ustore.state.debug = debug.name;
let openwrtLog = { name: globalt('menus.openwrtLog') };
ustore.state.openwrtLog = openwrtLog.name;
let dhcpList = { name: globalt('menus.dhcpList') };
ustore.state.dhcpList = dhcpList.name;
// ----------------------------------------------------------------------------
let systemStatus = { name: globalt('common.systemStatus') };
ustore.state.systemStatus = systemStatus.name;
let systemInfoLabel = { name: globalt('common.systemInfoLabel') };
ustore.state.systemInfoLabel = systemInfoLabel.name;
let systemInfoValue = { name: globalt('common.systemInfoValue') };
ustore.state.systemInfoValue = systemInfoValue.name;
let wanNetwork = { name: globalt('common.wanNetwork') };
ustore.state.wanNetwork = wanNetwork.name;
let wanNetworkValue = { name: globalt('common.wanNetworkValue') };
ustore.state.wanNetworkValue = wanNetworkValue.name;
let lanNetworkLabel = { name: globalt('common.lanNetworkLabel') };
ustore.state.lanNetworkLabel = lanNetworkLabel.name;
let lanNetworkValue = { name: globalt('common.lanNetworkValue') };
ustore.state.lanNetworkValue = lanNetworkValue.name;
let vpnvalue = { name: globalt('common.vpnvalue') };
ustore.state.vpnvalue = vpnvalue.name;
let softwareVersion = { name: globalt('common.softwareVersion') };
ustore.state.softwareVersion = softwareVersion.name;
let localTime = { name: globalt('common.localTime') };
ustore.state.localTime = localTime.name;
let runtime = { name: globalt('common.runtime') };
ustore.state.runtime = runtime.name;
let onlineTime = { name: globalt('common.onlineTime') };
ustore.state.onlineTime = onlineTime.name;
let sendBytes = { name: globalt('common.sendBytes') };
ustore.state.sendBytes = sendBytes.name;
let receiveBytes = { name: globalt('common.receiveBytes') };
ustore.state.receiveBytes = receiveBytes.name;
let networkMode = { name: globalt('common.networkMode') };
ustore.state.networkMode = networkMode.name;
let switchMode = { name: globalt('common.switchMode') };
ustore.state.switchMode = switchMode.name;
let ipAddress = { name: globalt('common.ipAddress') };
ustore.state.ipAddress = ipAddress.name;
let subnetMask = { name: globalt('common.subnetMask') };
ustore.state.subnetMask = subnetMask.name;
let MAC = { name: globalt('common.MAC') };
ustore.state.MAC = MAC.name;
let addressPool = { name: globalt('common.addressPool') };
ustore.state.addressPool = addressPool.name;
let corporate = { name: globalt('common.corporate') };
ustore.state.corporate = corporate.name;
let telephone = { name: globalt('common.telephone') };
ustore.state.telephone = telephone.name;
let Fax = { name: globalt('common.Fax') };
ustore.state.Fax = Fax.name;
console.log("------------>localTime---",ustore.state.localTime);
};
// -----------------------------------------------------------------
// ----------------------------------------------------------------------------
const router = useRouter();
const store = useAppStore();
const { isFullscreen, toggle } = useFullscreen();
const onClickUserMenus = (path: string) => {
if (path === "/login") {
ElMessageBox.confirm("确定进行[退出]操作?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
baseService.post("/logout").finally(() => {
router.push(path);
});
})
.catch(() => {
//
});
} else {
router.push(path);
}
};
// const changeLanguage = () => {
// state.curLanguage = state.curLanguage === 'zh-cn' ? 'en' : 'zh-cn'
// locale.value = state.curLanguage
// };
return {
props,
store,
isFullscreen,
userLogo,
onClickUserMenus,
toggle,
// menuHome,
state,
locale,
changeLanguage,
globalt,
};
// --------------------------------------------------
// -----------------------------------------------------
},
});
</script>
<template>
<div class="rr-header-right-items">
<div class="flex flex-wrap gap-4 items-center" >
<!-- <el-select
v-model="state.curLanguage"
placeholder="change Language"
@change="changeLanguage"
size="large"
style="width: 180px">
<el-option label="English" :value="0"></el-option>
<el-option label="中文" :value="1"></el-option>
</el-select> -->
<select v-model="state.curLanguage" placeholder="change Language" @change="changeLanguage">
<option value="en">English</option>
<option value="zh-cn">中文</option>
</select>
</div>
<!-- <div>{{state.menuHome.name}}</div> -->
<div>
<a href="https://www.caimore.com" target="_blank">
<svg-icon name="icon-earth"></svg-icon>
</a>
</div>
<div>
<a href="https://www.caimore.com" target="_blank">
<svg-icon name="icon-gitee"></svg-icon>
</a>
</div>
<div @click="toggle" class="hidden-xs-only">
<span>
<svg-icon :name="isFullscreen ? 'tuichuquanping' : 'fullscreen2'"></svg-icon>
</span>
</div>
<div style="display: flex; justify-content: center; align-items: center">
<img
:src="userLogo"
:alt="props.userName"
style="
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 3px;
margin-right: 5px;
"
/>
<el-dropdown @command="onClickUserMenus">
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="lock" command="/user/password">
修改密码
</el-dropdown-item>
<el-dropdown-item icon="switch-button" divided command="/login">
退出登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
<span class="el-dropdown-link" style="display: flex">
{{ props.userName }}
<el-icon class="el-icon--right" style="font-size: 14px"><arrow-down /></el-icon>
</span>
</el-dropdown>
</div>
</div>
</template>
--------------------------------------------------------------------------------------------------------------------------------------------------------------
src/layout/header/breadcrumb.vue内容如下
<script lang="ts">
import { IObject } from "@/types/interface";
import { getValueByKeys } from "@/utils/utils";
import { defineComponent, ref, watch } from "vue";
import { RouteLocationMatched, useRouter } from "vue-router";
// -------------------------------------------------
import { mapState, mapActions } from 'vuex';
import { useStore } from 'vuex';
// ---------------------------------------------------
/**
* 顶部面包屑
*/
export default defineComponent({
name: "Breadcrumb",
setup() {
const ustore = useStore();
const router = useRouter();
const breadcrumbs = ref<IObject[]>([]);
const { currentRoute } = router;
const firstRoute = (router.options.routes[0] || {}) as RouteLocationMatched;
const home: RouteLocationMatched = firstRoute.children && firstRoute.children.length > 0 ? (firstRoute.children[0] as RouteLocationMatched) : firstRoute;
watch(
() => currentRoute.value,
() => {
breadcrumbs.value = currentRoute.value.path !== home.path ? getValueByKeys(currentRoute.value, "meta.matched", []) : [];
// console.log("breadcrumb.vue----------breadcrumbs--->",breadcrumbs);
for( let i =0; i < breadcrumbs.value.length; i++){
let item1 = breadcrumbs.value[i];
// console.log("breadcrumb.vue----------item1--->",item1);
if(item1?.id === "1728558685361984802"){//工作台
item1.title = ustore.state.workbenche;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id === "1728552235698116810"){//网络配置
item1.title = ustore.state.network;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id === "1728552971720334598"){//上网管理
item1.title = ustore.state.internetManagement;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id === "1728553165344203805"){//VPN通道
item1.title = ustore.state.VPN;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id === "1728554281741718227"){//防火墙
item1.title = ustore.state.firewall;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id === "1728556484530391897"){//应用功能
item1.title = ustore.state.application;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id === "1728556887096287226"){//系统管理
item1.title = ustore.state.system;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728558602965812843"){
item1.title = ustore.state.menuHome;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728552700555951042"){//WAN配置
item1.title = ustore.state.WAN;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728552749673250984"){//LAN配置
item1.title = ustore.state.LAN;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728552821345245556"){//WIFI配置
item1.title = ustore.state.WIFI;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728552874444113992"){//在线保持
item1.title = ustore.state.keepAlive;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728553019691686260"){//网络过滤
item1.title = ustore.state.networkFilter;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728554398063451250"){//路由配置
item1.title = ustore.state.routerSet;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728556199613867003"){//安全策略
item1.title = ustore.state.securityPolicy;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728556528657490922"){//远程管理
item1.title = ustore.state.remoteManagement;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728556555003359389"){//WIFI认证
item1.title = ustore.state.wifiAuthentication;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728556793123544755"){//本地服务
item1.title = ustore.state.localService;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728557186293855237"){//用户管理
item1.title = ustore.state.userManagement;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728557208665184441"){//软件升级
item1.title = ustore.state.upgrade;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728557387532462541"){//网络诊断
item1.title = ustore.state.netTool;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728557434119292569"){//时间管理
item1.title = ustore.state.timeManagement;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728557531699428292"){//定时重启
item1.title = ustore.state.timeToReboot;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728557613314500512"){//历史日志
item1.title = ustore.state.historyLog;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728557659188977369"){//系统日志
item1.title = ustore.state.debug;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728557698037707331"){//openwrt日志
item1.title = ustore.state.openwrtLog;
breadcrumbs.value.splice(i,1,item1);
}
else if(item1?.id == "1728557736431123513"){//DHCP列表
item1.title = ustore.state.dhcpList;
breadcrumbs.value.splice(i,1,item1);
}
}
}
);
return { breadcrumbs, currentRoute, home,ustore };
}
});
</script>
<template>
<el-breadcrumb separator="/" style="padding-top: 4px">
<el-breadcrumb-item :to="{ path: home.path }"> {{ustore.state.menuHome}} </el-breadcrumb-item>
<el-breadcrumb-item v-for="x in breadcrumbs" :key="x.path">{{ currentRoute.query._mt || x.title || "" }} </el-breadcrumb-item>
</el-breadcrumb>
</template>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
src/layout/sidebar/base-sidebar.vue内容如下
<script lang="ts">
import { themeSetting } from "@/constants/config";
import { EMitt, EThemeSetting } from "@/constants/enum";
import { IObject } from "@/types/interface";
import Layout from "@/layout/layout.vue";
import emits from "@/utils/emits";
import { toValidRoutes } from "@/utils/router";
import { getThemeConfigCacheByKey } from "@/utils/theme";
import { useWindowSize } from "@vueuse/core";
import { defineComponent, onMounted, reactive, ref, watch } from "vue";
import { RouteRecordRaw, useRoute, useRouter } from "vue-router";
import { useAppStore } from "@/store";
import SidebarMenusItems from "./sidebar-menus-items.vue";
import { getValueByKeys } from "@/utils/utils";
// -------------------------------------------------
import { mapState, mapActions } from 'vuex';
import { useStore } from 'vuex';
// ---------------------------------------------------
/**
* 侧边栏导航菜单
*/
export default defineComponent({
name: "BaseSidebar",
components: { SidebarMenusItems },
props: {
mode: { type: String, default: "vertical" },
menus: Array,
currRoute: String,
router: Boolean,
onSelect: Function,
isMobile: Boolean
},
setup(props) {
const ustore = useStore();
const route = useRoute();
const router = useRouter();
const win = useWindowSize();
const store = useAppStore();
const defaultMenus = toValidRoutes((props.menus ?? store.state.routes) as RouteRecordRaw[]);
const getPopClassName = () => {
const sidebarCache = getThemeConfigCacheByKey(EThemeSetting.Sidebar);
return `rr-sidebar-menu-pop-${props.mode === "vertical" && sidebarCache === "dark" ? "dark" : "light"}`;
};
const state = reactive({
collapseSidebar: getThemeConfigCacheByKey(EThemeSetting.SidebarCollapse),
uniqueOpened: themeSetting.sidebarUniOpened,
windowWidth: win.width || 800,
hiddenIndex: -1,
rawMenus: defaultMenus,
menus: defaultMenus,
popClassName: getPopClassName(),
currRoute: props.currRoute ?? route.path
});
const elm = ref({} as IObject);
const li = ref({
widths: [] as number[]
});
const initComputeSidebarLayout = (width: number) => {
// console.log("base-sidebar.vue-----rawMenus---11111>",state.rawMenus);
if (props.mode === "horizontal") {
//存储水平布局元素信息
const el = elm.value.$el;
const lis = el.querySelectorAll("li");
li.value.widths = [];
lis.forEach((x: Element) => {
li.value.widths.push(x.getBoundingClientRect().width);
});
computeSidebarLayout(width);
}
};
//
onMounted(() => {
initComputeSidebarLayout(state.windowWidth);
});
watch(
() => {
for( let i =0; i < state.menus.length; i++){
let item1 = state.menus[i];
// console.log("base-sidebar.vue-----item1--->",i,item1);
if(item1.meta?.id === "1728558685361984802"){//工作台
item1.meta.title = ustore.state.workbenche;
state.menus.splice(i,1,item1);
}
else if(item1.meta?.id === "1728552235698116810"){//网络配置
item1.meta.title = ustore.state.network;
state.menus.splice(i,1,item1);
}
else if(item1.meta?.id === "1728552971720334598"){//上网管理
item1.meta.title = ustore.state.internetManagement;
state.menus.splice(i,1,item1);
}
else if(item1.meta?.id === "1728553165344203805"){//VPN通道
item1.meta.title = ustore.state.VPN;
state.menus.splice(i,1,item1);
}
else if(item1.meta?.id === "1728554281741718227"){//防火墙
item1.meta.title = ustore.state.firewall;
state.menus.splice(i,1,item1);
}
else if(item1.meta?.id === "1728556484530391897"){//应用功能
item1.meta.title = ustore.state.application;
state.menus.splice(i,1,item1);
}
else if(item1.meta?.id === "1728556887096287226"){//系统管理
item1.meta.title = ustore.state.system;
state.menus.splice(i,1,item1);
}
// debugger;
let itemTemp : Array<any>;
itemTemp = (Array<any>)(item1.children);
for(let j =0; j < itemTemp.length; j++){
let item2 = itemTemp[j];
for(let k =0; k < item2.length; k++){
let item3 = item2[k];
if(item3.meta?.id == "1728558602965812843"){
item3.meta.title = ustore.state.menuHome;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728552700555951042"){//WAN配置
item3.meta.title = ustore.state.WAN;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728552749673250984"){//LAN配置
item3.meta.title = ustore.state.LAN;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728552821345245556"){//WIFI配置
item3.meta.title = ustore.state.WIFI;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728552874444113992"){//在线保持
item3.meta.title = ustore.state.keepAlive;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728553019691686260"){//网络过滤
item3.meta.title = ustore.state.networkFilter;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728554398063451250"){//路由配置
item3.meta.title = ustore.state.routerSet;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728556199613867003"){//安全策略
item3.meta.title = ustore.state.securityPolicy;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728556528657490922"){//远程管理
item3.meta.title = ustore.state.remoteManagement;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728556555003359389"){//WIFI认证
item3.meta.title = ustore.state.wifiAuthentication;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728556793123544755"){//本地服务
item3.meta.title = ustore.state.localService;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728557186293855237"){//用户管理
item3.meta.title = ustore.state.userManagement;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728557208665184441"){//软件升级
item3.meta.title = ustore.state.upgrade;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728557387532462541"){//网络诊断
item3.meta.title = ustore.state.netTool;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728557434119292569"){//时间管理
item3.meta.title = ustore.state.timeManagement;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728557531699428292"){//定时重启
item3.meta.title = ustore.state.timeToReboot;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728557613314500512"){//历史日志
item3.meta.title = ustore.state.historyLog;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728557659188977369"){//系统日志
item3.meta.title = ustore.state.debug;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728557698037707331"){//openwrt日志
item3.meta.title = ustore.state.openwrtLog;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
else if(item3.meta?.id == "1728557736431123513"){//DHCP列表
item3.meta.title = ustore.state.dhcpList;
item2.splice(k,1,item3);
state.menus.splice(i,1,item1);
}
}
}
}
props.menus;
},
(vl: any) => {
const ms = toValidRoutes((vl ? vl : store.state.routes) as RouteRecordRaw[]);
state.menus = ms;
state.rawMenus = ms;
},
// { deep: true }
);
watch(
() => {
store.state.routes;
},
(vl: any) => {
const ms = toValidRoutes(vl as RouteRecordRaw[]);
state.rawMenus = ms;
state.menus = ms;
}
);
emits.on(EMitt.OnSwitchLeftSidebar, () => {
state.collapseSidebar = !state.collapseSidebar;
});
emits.on(EMitt.OnSetThemeNotUniqueOpened, (vl) => {
state.uniqueOpened = vl;
});
emits.on(EMitt.OnSetTheme, ([vl]) => {
if (vl === EThemeSetting.Sidebar) {
state.popClassName = getPopClassName();
}
});
watch(
() => route.path,
(vl) => {
const matchedRoute = getValueByKeys(getValueByKeys(router.currentRoute.value.meta, "matched", [])[0], "path", "");
if (!route.query.pop && matchedRoute) {
setTimeout(() => {
state.currRoute = vl;
}, 10);
}
}
);
watch(
() => state.windowWidth,
(vl) => {
computeSidebarLayout(vl);
}
);
const computeSidebarLayout = (windowWidth: number) => {
if (props.mode === "horizontal" && windowWidth > 768 && elm.value.$el) {
//菜单水平方向菜单过长，采用折叠效果
const width = elm.value.$el.parentNode.getBoundingClientRect().width;
let liWidth = 0;
let index = -1;
for (let i = 0; i < li.value.widths.length; i++) {
liWidth += li.value.widths[i];
if (liWidth > width) {
index = i - 1;
break;
}
}
state.hiddenIndex = index;
state.menus =
index > -1
? state.rawMenus.slice(0, index).concat({
path: "/__more",
component: Layout,
meta: { title: "更多菜单", icon: false, isMore: true },
children: state.rawMenus.slice(index)
})
: state.rawMenus;
}
};
return { elm, props, state };
}
});
</script>
<template>
<el-menu
ref="elm"
:default-active="props.currRoute ?? state.currRoute"
:mode="props.mode"
:collapse="props.isMobile ? false : props.mode === 'vertical' && state.collapseSidebar"
:router="props.router"
:unique-opened="state.uniqueOpened"
:onSelect="props.onSelect"
:collapse-transition="false"
class="rr-sidebar-menu"
>
<sidebar-menus-items :className="state.popClassName" :menus="state.menus" :hiddenIndex="state.hiddenIndex"></sidebar-menus-items>
</el-menu>
</template>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
src/views/home.vue内容如下
<template>
<div class="divContainer">
<el-row class="tac" :gutter="24" >
<el-col :span="19">
<div class="divMiddle">
<el-scrollbar height="800px">
<span class="middle-top-title">{{state.systemStatus}}</span>
<!-- <hr /> -->
<div class=" box1">
<div class="box1title">
{{ state.systemInfoLabel }}
</div>
<div class="box1context">
<span class="contextlabel">{{state.softwareVersion}}</span>
<span class="contextvalue">{{state.softwareVersionValue}}</span>
</div>
<div class="box1context">
<span class="contextlabel">{{state.localTime}}</span>
<span class="contextvalue">{{ state.localTimeValue }}</span>
</div>
<div class="box1context">
<span class="contextlabel">{{state.runtime}}</span>
<span class="contextvalue">{{state.runtimeValue}}</span>
</div>
<div class="box1context">
<span class="contextlabel">{{state.onlineTime}}</span>
<span class="contextvalue">{{state.onlineTimeValue}}</span>
</div>
<div class="box1context">
<span class="contextlabel">{{state.sendBytes}}</span>
<span class="contextvalue">{{state.sendBytesValue}}</span>
</div>
<div class="box1context">
<span class="contextlabel">{{state.receiveBytes}}</span>
<span class="contextvalue">{{state.receiveBytesValue}}</span>
</div>
</div>
<div class=" box2">
<div class="box1title">
{{ state.wanNetwork }}
</div>
<div class="box1context">
<span class="contextlabel">{{state.networkMode}}</span>
<span class="contextvalue">{{state.switchMode}}</span>
</div>
<div class="box1context">
<span class="contextlabel">连接状态</span>
<span class="contextvalue">{{state.connectionStatus}}</span>
</div>
<div class="box1context">
<span class="contextlabel">IP地址</span>
<span class="contextvalue">{{ state.wanIPaddress }}</span>
</div>
<div class="box1context">
<span class="contextlabel">DNS</span>
<span class="contextvalue"> {{ state.wanDNS }}</span>
</div>
</div>
<div class=" box3">
<div class="box1title">
{{ state.lanNetworkLabel }}
</div>
<div class="box1context">
<span class="contextlabel">{{state.ipAddress}}</span>
<span class="contextvalue">{{state.lanipAddress}}</span>
</div>
<div class="box1context">
<span class="contextlabel">{{state.subnetMask}}</span>
<span class="contextvalue">{{state.subnetMaskValue}}</span>
</div>
<div class="box1context">
<span class="contextlabel">{{state.MAC}}</span>
<span class="contextvalue">{{state.MACvalue}}</span>
</div>
<div class="box1context">
<span class="contextlabel">{{state.addressPool}}</span>
<span class="contextvalue">{{state.addressPoolValue}}</span>
</div>
</div>
<div class=" box4">
<div class="box1title">
VPN状态
</div>
<div class="box1context">
<span class="contextlabel">VPN模式</span>
<span class="contextvalue">{{state.vpnModelValue}}</span>
</div>
<div class="box1context">
<span class="contextlabel">连接状态</span>
<span class="contextvalue">{{state.vpnConnectionStatus}}</span>
</div>
</div>
<div class="submitclass">
</div>
</el-scrollbar>
</div>
<div class="divFloor">
<innerfloor ></innerfloor>
</div>
</el-col>
<el-col :span="5">
<div class="divRight">
<el-scrollbar height="500px">
<div class="box2title">
{{state.systemStatus}}
</div>
<div class="box2context">
<span class="contextlabel">{{state.systemInfoLabel}}：</span>
<span class="contextvalue">{{state.systemInfoValue}}</span>
</div>
<div class="box2context">
<span class="contextlabel">{{state.wanNetwork}}：</span>
<span class="contextvalue">{{state.wanNetworkValue}}</span>
</div>
<div class="box2context">
<span class="contextlabel">{{state.lanNetworkLabel}}：</span>
<span class="contextvalue">{{state.lanNetworkValue}}</span>
</div>
<div class="box2context">
<span class="contextlabel">VPN：</span>
<span class="contextvalue">{{state.vpnvalue}}</span>
</div>
</el-scrollbar>
</div>
</el-col>
</el-row>
<!-- --------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
</div>
</template>
<script lang="ts" setup>
import logo from "@/assets/images/logo.png";
import { EMitt, ESidebarLayoutEnum, EThemeSetting } from "@/constants/enum";
import emits from "@/utils/emits";
import { getThemeConfigCacheByKey } from "@/utils/theme";
import { defineComponent, reactive , computed, ref, toRefs, watch,onMounted,onBeforeUnmount} from "vue";
import { useAppStore } from "@/store";
import Logo from "./logo.vue";
// import "@/assets/css/header.less";
// ---------------------------------------------
import { CacheToken } from "@/constants/cacheKey";
import baseService from "@/service/baseService";
import { getCache } from "@/utils/cache";
// -------------------------------------------------
import { mapState, mapActions } from 'vuex';
import { useStore } from 'vuex';
// ---------------------------------------------------
// ---------------------------------------------------------------------------
import Expand from "../layout/header/expand.vue";
import Innerfloor from "./iot/innerfloor.vue";
// ------------------------------------------------------------------------------
import useView from "@/hooks/useView";
import { ElMessage, ElMessageBox } from "element-plus";
// ---------------------------------------------
import app from "@/constants/app";
import axiosrequest from '@/service/axiosrequest';
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
// ------------------------------------------------------------------------------
const mytoken = ref("");
const myhostname = ref("");
defineComponent({
name: "Home",
components: { Innerfloor },
setup() {
const state = reactive({
sidebarLayout: getThemeConfigCacheByKey(EThemeSetting.NavLayout),
});
emits.on(EMitt.OnSetNavLayout, (vl) => {
state.sidebarLayout = vl;
});
const onRefresh = () => {
emits.emit(EMitt.OnReloadTabPage);
};
return { state, onRefresh, logo, ESidebarLayoutEnum};
}
});
const ustore = useStore();
// let month1 = (new Date().getMonth() + 1) >= 10 ? (new Date().getMonth() + 1) : "0" + (new Date().getMonth() + 1);
// let day1 = new Date().getDate() >= 10 ? new Date().getDate() : "0" + new Date().getDate();
// let hour = new Date().getHours() >= 10 ? new Date().getHours() : "0" + new Date().getHours();
// let minute = new Date().getMinutes() >= 10 ? new Date().getMinutes() : "0" + new Date().getMinutes();
// let second = new Date().getSeconds() >= 10 ? new Date().getSeconds() : "0" + new Date().getSeconds();
const view = reactive({
deleteIsBatch: true,
systemStatus: ustore.state.systemStatus,
systemInfoLabel: ustore.state.systemInfoLabel,
systemInfoValue: ustore.state.systemInfoValue,
wanNetwork: ustore.state.wanNetwork,
wanNetworkValue: ustore.state.wanNetworkValue,
lanNetworkLabel: ustore.state.lanNetworkLabel,
lanNetworkValue: ustore.state.lanNetworkValue,
vpnvalue: ustore.state.vpnvalue,
softwareVersion: ustore.state.softwareVersion,
localTime: ustore.state.localTime,
localTimeValue: '',
runtime: ustore.state.runtime,
runtimeValue: '',
onlineTime: ustore.state.onlineTime,
onlineTimeValue: '',
sendBytes: ustore.state.sendBytes,
sendBytesValue: '',
receiveBytes: ustore.state.receiveBytes,
receiveBytesValue: '',
networkMode: ustore.state.networkMode,
switchMode: ustore.state.switchMode,
ipAddress: ustore.state.ipAddress,
subnetMask: ustore.state.subnetMask,
MAC: ustore.state.MAC,
addressPool: ustore.state.addressPool,
currentTime : "",
softwareVersionValue: '',
connectionStatus: '',
wanIPaddress: '',
wanDNS: '',
lanipAddress: '',
subnetMaskValue: '',
MACvalue: '',
addressPoolValue: '',
vpnModelValue: '',
vpnConnectionStatus: '',
// getDataListURL: "/iot/deviceinfo/page",
// getDataListIsPage: true,
// exportURL: "/iot/deviceinfo/export",
// deleteURL: "/iot/deviceinfo",
dataForm: {
projectNodeCode: "",
onlineNum: 0,
offlineNum: 0,
closeNum: 0,
openNum: 0,
alarmNum: 0,
faultNum: 0,
state: "",
switchState: "",
faultState: "",
alarmState: "",
deviceType: ""
}
});
const state = reactive({ ...useView(view), ...toRefs(view) });
watch(
()=>{
state.systemStatus = ustore.state.systemStatus;
state.systemInfoLabel = ustore.state.systemInfoLabel;
state.systemInfoValue = ustore.state.systemInfoValue;
state.wanNetwork = ustore.state.wanNetwork;
state.wanNetworkValue = ustore.state.wanNetworkValue;
state.lanNetworkLabel = ustore.state.lanNetworkLabel;
state.lanNetworkValue = ustore.state.lanNetworkValue;
state.vpnvalue = ustore.state.vpnvalue;
state.softwareVersion = ustore.state.softwareVersion;
state.localTime = ustore.state.localTime;
state.runtime = ustore.state.runtime;
state.onlineTime = ustore.state.onlineTime;
state.sendBytes = ustore.state.sendBytes;
state.receiveBytes = ustore.state.receiveBytes;
state.networkMode = ustore.state.networkMode;
state.switchMode = ustore.state.switchMode;
state.ipAddress = ustore.state.ipAddress;
state.subnetMask = ustore.state.subnetMask;
state.MAC = ustore.state.MAC;
state.addressPool = ustore.state.addressPool;
// -----------------------------------------------------
const date = new Date();
const year = date.getFullYear().toString().padStart(2, '0');
const month = (date.getMonth()+ 1).toString().padStart(2, '0');
const day = date.getDay().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
state.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
()=>{
// console.log("1111111222333");
}
);
// function getCurrentTime() {
// const date = new Date();
// const year = date.getFullYear().toString().padStart(2, '0');
// const month = (date.getMonth()+ 1).toString().padStart(2, '0');
// const day = date.getDay().toString().padStart(2, '0');
// const hours = date.getHours().toString().padStart(2, '0');
// const minutes = date.getMinutes().toString().padStart(2, '0');
// const seconds = date.getSeconds().toString().padStart(2, '0');
// state.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
// };
const timer = ref()
// onMounted(()=>{
// mytoken.value = sessionStorage.getItem("mytoken") as string;
// console.log("mytoken.value----->",mytoken.value);
// myhostname.value = sessionStorage.getItem("myhostname") as string;
// // 更新时间
// // timer.value =setInterval(() => {
// // getCurrentTime()
// // }, 1000);
// });
//取消定时器
onBeforeUnmount(() => {
// clearInterval(timer.value) //清除定时器
clearTimeout(timer.value) //清除定时器
});
// -----------------------------------------------------------------------------------------------
onMounted(()=>{
mytoken.value = sessionStorage.getItem("mytoken") as string;
myhostname.value = sessionStorage.getItem("myhostname") as string;
console.log("mytoken.value----->",mytoken.value);
timer.value = setTimeout(initReaderRequest,100);
});
const requestReadParam = reactive({
cmd:"read",
form:"SystemStatusForm",
code: 0,
["@sys[0]-version"]:'',
localTime:'',
runTime: '',
onlineTime:'',
TxPacket: '',
RxPacket: '',
wan: {},
lan: {},
vpn: {}
});
const initReaderRequest = () => {
requestReadParam.code = parseInt(mytoken.value );
// console.log("mytoken.value----->",mytoken.value);
// console.log("------------++++++++",JSON.stringify(requestReadParam));
axios.post(myhostname.value + '/post',JSON.stringify(requestReadParam)).then(res=>{
// console.log("networkfilter,initRequest--------->",res);
if(res.status == 200 && (res.data.result == "OK")){
state.softwareVersionValue = res.data["@sys[0]-version"];
state.localTimeValue = res.data.localTime;
state.runtimeValue = res.data.runTime;
state.onlineTimeValue = res.data.onlineTime;
state.sendBytesValue = res.data.TxPacket;
state.receiveBytesValue = res.data.RxPacket;
let wan = {} as any;
wan = res.data.wan;
if(wan != undefined && wan != null){
let cur_net_mode = wan.cur_net_mode;
switch(cur_net_mode){
case "1":
{
state.switchMode = "有线上网";
break;
}
case "2":
{
state.switchMode = "SIM网络";
break;
}
case "3":
{
state.switchMode = "WIFI客户端";
break;
}
case "4":
{
state.switchMode = "主辅模式";
break;
}
case "5":
{
state.switchMode = "交换机";
break;
}
case "6":
{
state.switchMode = "双模路模式";
break;
}
default:break;
}
state.connectionStatus = wan.online_status;
state.wanIPaddress = wan.ipaddr;
state.wanDNS = wan.dns;
}
let lan = {} as any;
lan = res.data.lan;
if(lan != undefined && lan != null){
state.lanipAddress = lan.ipaddr;
state.subnetMaskValue = lan.netmask;
state.MACvalue = lan.macaddr;
state.addressPoolValue = lan.addrpool;
}
let vpn = {} as any;
vpn = res.data.vpn;
if(vpn != undefined && vpn != null){
state.vpnModelValue = vpn.enable == "checked" ? "开通": "关闭";
state.vpnConnectionStatus = vpn.vpninfo;
}
}else{
ElMessage.error("网络连接失败");
}
}).catch(err=>{
console.log('timeout')
console.log(err)
});
timer.value = null;
timer.value = setTimeout(initReaderRequest,5000);
};
// -----------------------------------------------------------------------------------------------
</script>
<style scoped lang="less">
.dvi1{
width: 100%;
height: 500px;
align-content: center;
//
}
.middle-top-title{
font-size: 19px;
font-weight: bold;
color: #0482AD;
}
.divMiddle .box1{
width: 80%;
height: 250px;
// background: gray;
display: block;
flex-direction: col;
flex-wrap: wrap;
margin-left: 80px;
align-content: flex-start;
border: 1px solid lightblue;
border-radius: 5px;
box-shadow: inset 5px 5px 5px lightblue,5px 5px 5px lightblue;
};
.divMiddle .box2{
margin-top: 25px;
width: 80%;
height: 198px;
display: block;
flex-direction: col;
flex-wrap: wrap;
margin-left: 80px;
align-content: flex-start;
border: 1px solid lightblue;
border-radius: 5px;
box-shadow: inset 5px 5px 5px lightblue,5px 5px 5px lightblue;
};
.divMiddle .box3{
width: 80%;
margin-top: 25px;
height: 216px;
// background: gray;
display: block;
flex-direction: col;
flex-wrap: wrap;
margin-left: 80px;
align-content: flex-start;
border: 1px solid lightblue;
border-radius: 5px;
box-shadow: inset 5px 5px 5px lightblue,5px 5px 5px lightblue;
}
.divMiddle .box4{
width: 80%;
margin-top: 25px;
height: 116px;
// background: gray;
display: block;
flex-direction: col;
flex-wrap: wrap;
margin-left: 80px;
align-content: flex-start;
border: 1px solid lightblue;
border-radius: 5px;
box-shadow: inset 5px 5px 5px lightblue,5px 5px 5px lightblue;
}
.divMiddle .box1title{
width: 110px;
font-size: 17px;
text-align: left;
margin-top: 20px;
//background: gray;
margin-left: 35px;
};
.divMiddle .box1context{
width: 100%;
font-size: 14px;
text-align: letf;
margin-top: 1px;
margin-left: 130px;
//background: gray;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-start;
padding: 5px 0px;
justify-content: flex-start;
};
.divMiddle .box1context .contextlabel{
width: 100%;
// display: flex;
};
.divMiddle .box1context .contextvalue{
width: 100%;
font-size: 14px;
text-align: letf;
margin-top: 0px;
// margin-left: 100px;
//background: gray;
// display: flex;
};
// ------------------------------------------------------------
.divRight{
width: 100%;
height: 100%;
// height: 1314px;
//
// background: #7CB0DC;
background: #c9e7ee;
}
.divRight .box2title{
width: 110px;
font-size: 17px;
text-align: left;
margin-top: 20px;
//background: gray;
margin-left: 5px;
font-weight: bold;
};
.divRight .box2context {
margin-left: 5px;
margin-top: 5px;
};
.divRight .box2context .contextlabel{
font-weight: bold;
};
/* --------------------------------------------------- */
.submitclass{
margin-top: 15px;
margin-left: 25%;
padding: 35px;
}
.submitclass .submitconfirm{
margin-left: 100px;
}
/* ------------------------------------------------- */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------- */
</style>
posted on 2024-12-26 11:27 yebinghuai-qq-com 阅读(104) 评论(0) 收藏 举报
浙公网安备 33010602011771号