菜单优化

main
刘妍 1 month ago
parent a989857c26
commit 1f7852f372

@ -133,32 +133,26 @@ export const usePermissionStore = defineStore({
const normalizeMenu = (data) => { const normalizeMenu = (data) => {
let path = ''; let path = '';
if (data.item.url.indexOf('@') > 0) { if (data.url.indexOf('@') > 0) {
path = data.item.url.replace('@', '/'); path = data.url.replace('@', '/');
} else { } else {
path = path =
data.item.url || data.url || '/formCallPage?id=' + data.id + '&name=' + data.name + '&code=' + data.code;
'/formCallPage?id=' +
data.item.id +
'&name=' +
data.item.name +
'&code=' +
data.item.code;
} }
const newPath = { const newPath = {
orderNo: data.item.sortNo, orderNo: data.sortNo,
icon: data.item.iconName, icon: data.iconName,
title: data.item.name, title: data.name,
meta: { meta: {
orderNo: data.item.sortNo, orderNo: data.sortNo,
icon: data.item.iconName, icon: data.iconName,
title: data.item.name, title: data.name,
elements: (data.item && data.item.elements) || '', elements: (data && data.elements) || '',
}, },
name: data.item.name, name: data.name,
hideMenu: data.item.status == 1 ? false : true, hideMenu: data.status == 1 ? false : true,
path: path, path: path,
id: data.item.id || '', id: data.id || '',
children: [], children: [],
}; };
if (data.children && data.children.length > 0) { if (data.children && data.children.length > 0) {
@ -172,56 +166,56 @@ export const usePermissionStore = defineStore({
const modules = import.meta.glob('../../views/**/**/**/index.vue'); const modules = import.meta.glob('../../views/**/**/**/index.vue');
childData.forEach((element) => { childData.forEach((element) => {
// 菜单里配置带参数,但没有单独的主路由,先注册主路由 // 菜单里配置带参数,但没有单独的主路由,先注册主路由
if (element.item.status == 1 && element.item.url.indexOf('@') > 0) { if (element.status == 1 && element.url.indexOf('@') > 0) {
if (router.hasRoute(element.item.code)) { if (router.hasRoute(element.code)) {
const path = element.item.url.substring(0, element.item.url.indexOf('@')); const path = element.url.substring(0, element.url.indexOf('@'));
router.addRoute(element.item.code, { router.addRoute(element.code, {
path: path + '/:id', path: path + '/:id',
name: element.item.url.replaceAll('/', ''), name: element.url.replaceAll('/', ''),
meta: { meta: {
title: element.item.name, title: element.name,
icon: element.item.iconName, icon: element.iconName,
elements: element.item.elements, elements: element.elements,
}, },
component: modules['../../views/demo' + path + '/index.vue'], component: modules['../../views/demo' + path + '/index.vue'],
}); });
} else { } else {
const path = element.item.url.substring(0, element.item.url.indexOf('@')); const path = element.url.substring(0, element.url.indexOf('@'));
router.addRoute('Root', { router.addRoute('Root', {
path: path, path: path,
name: element.item.code, name: element.code,
meta: { meta: {
title: element.item.name, title: element.name,
icon: element.item.iconName, icon: element.iconName,
hideChildrenInMenu: true, hideChildrenInMenu: true,
elements: element.item.elements, elements: element.elements,
}, },
component: LAYOUT, component: LAYOUT,
children: [ children: [
{ {
path: path + '/:id', path: path + '/:id',
name: element.item.url.replaceAll('/', ''), name: element.url.replaceAll('/', ''),
meta: { meta: {
title: element.item.name, title: element.name,
icon: element.item.iconName, icon: element.iconName,
elements: element.item.elements, elements: element.elements,
}, },
component: modules['../../views/demo' + path + '/index.vue'], component: modules['../../views/demo' + path + '/index.vue'],
}, },
], ],
}); });
} }
} else if (element.item.code && element.item.status == 1) { } else if (element.code && element.status == 1) {
router.addRoute(element.item.code, { router.addRoute(element.code, {
path: element.item.url, path: element.url,
name: element.item.url.replaceAll('/', ''), name: element.url.replaceAll('/', ''),
meta: { meta: {
title: element.item.name, title: element.name,
icon: element.item.iconName, icon: element.iconName,
elements: element.item.elements, elements: element.elements,
}, },
// component: () => import('../../views/demo' + element.item.url + '/index.vue') // component: () => import('../../views/demo' + element.url + '/index.vue')
component: modules['../../views/demo' + element.item.url + '/index.vue'], component: modules['../../views/demo' + element.url + '/index.vue'],
}); });
} }
if (element.children && element.children.length > 0) { if (element.children && element.children.length > 0) {
@ -232,43 +226,43 @@ export const usePermissionStore = defineStore({
// 注册路由 // 注册路由
const registeredRoute = (data) => { const registeredRoute = (data) => {
const modules = import.meta.glob('../../views/**/**/**/index.vue'); const modules = import.meta.glob('../../views/**/**/**/index.vue');
if (data.item.url.split('/')[1] == 'map') { if (data.url.split('/')[1] == 'map') {
// 大屏的情况下不继承layout // 大屏的情况下不继承layout
router.addRoute('Root', { router.addRoute('Root', {
path: data.item.url, path: data.url,
name: data.item.code, name: data.code,
meta: { meta: {
title: data.item.name, title: data.name,
icon: data.item.iconName, icon: data.iconName,
elements: data.item.elements, elements: data.elements,
}, },
component: modules['../../views' + data.item.url + '/index.vue'], component: modules['../../views' + data.url + '/index.vue'],
}); });
} else { } else {
// 正常菜单 // 正常菜单
if (data.children.length == 0 && data.item.status == 1) { if (data.children.length == 0 && data.status == 1) {
// 没有子菜单 // 没有子菜单
if (data.item.url.indexOf('@') > 0) { if (data.url.indexOf('@') > 0) {
//给带参数的路由先注册主路由 //给带参数的路由先注册主路由
const path = data.item.url.substring(0, data.item.url.indexOf('@')); const path = data.url.substring(0, data.url.indexOf('@'));
router.addRoute('Root', { router.addRoute('Root', {
path: path, path: path,
name: data.item.code, name: data.code,
meta: { meta: {
title: data.item.name, title: data.name,
icon: data.item.iconName, icon: data.iconName,
hideChildrenInMenu: true, hideChildrenInMenu: true,
elements: data.item.elements, elements: data.elements,
}, },
component: LAYOUT, component: LAYOUT,
children: [ children: [
{ {
path: path + '/:id', path: path + '/:id',
name: data.item.url.replaceAll('/', ''), name: data.url.replaceAll('/', ''),
meta: { meta: {
title: data.item.name, title: data.name,
icon: data.item.iconName, icon: data.iconName,
elements: data.item.elements, elements: data.elements,
}, },
component: modules['../../views/demo' + path + '/index.vue'], component: modules['../../views/demo' + path + '/index.vue'],
}, },
@ -276,46 +270,44 @@ export const usePermissionStore = defineStore({
}); });
} else { } else {
router.addRoute('Root', { router.addRoute('Root', {
path: data.item.url, path: data.url,
name: data.item.code, name: data.code,
meta: { meta: {
title: data.item.name, title: data.name,
icon: data.item.iconName, icon: data.iconName,
hideChildrenInMenu: true, hideChildrenInMenu: true,
elements: data.item.elements, elements: data.elements,
}, },
component: LAYOUT, component: LAYOUT,
children: [ children: [
{ {
path: data.item.url, path: data.url,
name: data.item.url.replaceAll('/', ''), name: data.url.replaceAll('/', ''),
meta: { meta: {
title: data.item.name, title: data.name,
icon: data.item.iconName, icon: data.iconName,
elements: data.item.elements, elements: data.elements,
}, },
component: modules['../../views/demo' + data.item.url + '/index.vue'], component: modules['../../views/demo' + data.url + '/index.vue'],
}, },
], ],
}); });
} }
} else { } else {
// 有子菜单 // 有子菜单
if (data.item.status == 0) { if (data.status == 0) {
return; return;
} }
router.addRoute('Root', { router.addRoute('Root', {
path: data.item.url, path: data.url,
name: data.item.code, name: data.code,
meta: { meta: {
title: data.item.name, title: data.name,
icon: data.item.iconName, icon: data.iconName,
elements: data.item.elements, elements: data.elements,
}, },
component: component:
data.item.parentId == 0 data.parentId == 0 ? LAYOUT : modules['../../views/demo' + data.url + '/index.vue'],
? LAYOUT
: modules['../../views/demo' + data.item.url + '/index.vue'],
}); });
if (data.children && data.children.length > 0) { if (data.children && data.children.length > 0) {
childRoute(data.children); childRoute(data.children);

@ -65,19 +65,19 @@
} }
function treeIterator(tree) { function treeIterator(tree) {
tree.forEach((node) => { tree.forEach((node) => {
node.name = node.item.name; node.name = node.name;
node.id = node.item.id; node.id = node.id;
node.elements = node.item.elements; node.elements = node.elements;
node.children && treeIterator(node.children); node.children && treeIterator(node.children);
}); });
} }
function btnIterator(moduleId, tree) { function btnIterator(moduleId, tree) {
tree.forEach((node) => { tree.forEach((node) => {
if (moduleId == node.item.id) { if (moduleId == node.id) {
btnData.value.push({ btnData.value.push({
name: node.item.name, name: node.name,
id: node.item.id, id: node.id,
elements: node.item.elements, elements: node.elements,
disabled: true, disabled: true,
}); });
} }

@ -14,16 +14,12 @@
{{ time }} {{ time }}
<!-- <span>临近或已接近夜晚</span> --> <!-- <span>临近或已接近夜晚</span> -->
</div> </div>
<div class="content-item"> <!-- <div class="content-item">
<div class="item-div" title="飞行器上 Dongle 数量"> <div class="item-div" title="飞行器上 Dongle 数量">
<img src="@/assets/images/flightoperation/project.png" alt="" /> <img src="@/assets/images/flightoperation/project.png" alt="" />
{{ uavInformation.wireless_link ? uavInformation.wireless_link.dongle_number : 0 }} {{ uavInformation.wireless_link ? uavInformation.wireless_link.dongle_number : 0 }}
</div> </div>
<a-divider type="vertical" style="border-color: #4e5778" /> <a-divider type="vertical" style="border-color: #4e5778" />
<!-- <div class="item-div">
<img src="@/assets/images/flightoperation/arrow.png" alt="" />
0%
</div> -->
<div class="item-div" title="电量百分比"> <div class="item-div" title="电量百分比">
<img src="@/assets/images/flightoperation/electricity.png" alt="" /> <img src="@/assets/images/flightoperation/electricity.png" alt="" />
{{ {{
@ -32,16 +28,17 @@
: 0 : 0
}} }}
</div> </div>
</div> </div> -->
<div class="content-item"> <div class="content-item">
<div class="item-div" title="SDR 链路连接状态"> <div class="item-div" title="SDR 链路连接状态">
<img src="@/assets/images/flightoperation/sdr.png" alt="" /> <img src="@/assets/images/flightoperation/sdr.png" alt="" />
<!-- sdr_link_state --> <!-- sdr_link_state -->
<template <template
v-if="uavInformation.wireless_link && uavInformation.wireless_link.sdr_link_state == 1" v-if="uavInformation.wireless_link && uavInformation.wireless_link.sdr_link_state == 1"
>连接</template
> >
<template v-else></template> 连接</template
>
<template v-else> </template>
</div> </div>
<a-divider type="vertical" style="border-color: #4e5778" /> <a-divider type="vertical" style="border-color: #4e5778" />
<div class="item-div" title="4G 链路连接状态"> <div class="item-div" title="4G 链路连接状态">
@ -50,9 +47,10 @@
v-if=" v-if="
uavInformation.wireless_link && uavInformation.wireless_link['4g_link_state'] == 1 uavInformation.wireless_link && uavInformation.wireless_link['4g_link_state'] == 1
" "
>连接</template
> >
<template v-else></template> 连接</template
>
<template v-else> </template>
</div> </div>
</div> </div>
<!-- sdr_freq_band sdr_quality 4g_freq_band 4g_quality --> <!-- sdr_freq_band sdr_quality 4g_freq_band 4g_quality -->

Loading…
Cancel
Save