Browse Source

将左侧菜单改成从数据库获取

master
chendingwei 2 years ago
parent
commit
ffaa64e2ce
  1. 3
      src/axios/cameraBase/cameraApi.ts
  2. 67
      src/views/page/aside/cameraLeftMenu.vue

3
src/axios/cameraBase/cameraApi.ts

@ -9,6 +9,7 @@ enum Api {
Get = '/cbCamera/get', Get = '/cbCamera/get',
GetList = '/cbCamera/getList', GetList = '/cbCamera/getList',
GetPageList = '/cbCamera/getPageList', GetPageList = '/cbCamera/getPageList',
GetTreeList = '/cbCameraNode/getTree'
} }
const CisApiUrl = apiUrl.CisApiUrl; const CisApiUrl = apiUrl.CisApiUrl;
@ -24,3 +25,5 @@ export const Get = (params?: any) => axios.get(CisApiUrl + Api.Get, {params: par
export const GetList = (params?: any) => axios.get(CisApiUrl + Api.GetList, { params: params }) export const GetList = (params?: any) => axios.get(CisApiUrl + Api.GetList, { params: params })
export const GetPageList = (params?: any) => axios.get(CisApiUrl + Api.GetPageList, { params: params }) export const GetPageList = (params?: any) => axios.get(CisApiUrl + Api.GetPageList, { params: params })
export const GetTreeList = (params?: any) => axios.get(CisApiUrl + Api.GetTreeList, { params: params })

67
src/views/page/aside/cameraLeftMenu.vue

@ -36,21 +36,21 @@ import { useStore } from '@/store/index';
import * as cameraApi from '@/axios/cameraBase/cameraApi'; import * as cameraApi from '@/axios/cameraBase/cameraApi';
let piniaStore = useStore(); let piniaStore = useStore();
const treeData = ref<any>([ const treeData = ref<any>([
{ // {
title: '视频监控', // title: '',
key: '视频监控', // key: '',
children: [ // children: [
{ // {
title: '横琴', // title: '',
key: '横琴', // key: '',
children: [ // children: [
// { title: '0-0-1-0', key: '0-0-1-0' }, // // { title: '0-0-1-0', key: '0-0-1-0' },
// { title: '0-0-1-1', key: '0-0-1-1' }, // // { title: '0-0-1-1', key: '0-0-1-1' },
// { title: '0-0-1-2', key: '0-0-1-2' }, // // { title: '0-0-1-2', key: '0-0-1-2' },
], // ],
}, // },
], // ],
} // }
]); ]);
const onContextMenuClick = (treeKey: string, menuKey: string) => { const onContextMenuClick = (treeKey: string, menuKey: string) => {
console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`); console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
@ -91,9 +91,9 @@ watch(searchStr, (newVal, oldVal) => {
expandedKeys.value = expandedKeyArr expandedKeys.value = expandedKeyArr
}) })
// //
function selectCamera(e: any) { function selectCamera(e: any, e2: any) {
if (e.length && !isNaN(parseInt(e[0]))) { if (!e2.node.isGroup) {
piniaStore.updateCurSelectKey(e[0].toString()) piniaStore.updateCurSelectKey(e2.node.cbCameraId.toString())
} }
} }
// //
@ -118,16 +118,31 @@ function searchFn(newVal: string, arr: any[]): any {
function loadTreeData() { function loadTreeData() {
cameraApi.GetList().then((res: any) => { cameraApi.GetList().then((res: any) => {
let list: Array<any> = res.data.data; let list: Array<any> = res.data.data;
treeData.value[0].children[0].children = list.map((item: any) => {
item.title = item.name
item.key = item.id.toString()
return item
})
piniaStore.addCameraMap(list) piniaStore.addCameraMap(list)
// switchCamera(list[0].id.toString())
// treeData.value=piniaStore.treeData
}); });
cameraApi.GetTreeList().then((res: any) => {
console.log(res);
if (res.data.code == 200) {
treeData.value = againTreeData(res.data.data)
console.log(treeData.value[0] );
}
})
}
//
function againTreeData(arr: any) {
let expandedArr: any = []
arr.forEach((item: any, index: number) => {
expandedArr[index]={}
if (item.isGroup) {
expandedArr[index].children = againTreeData(item.child)
}
expandedArr[index].key = item.id
expandedArr[index].title = item.name
expandedArr[index].isGroup = item.isGroup
expandedArr[index].cbCameraId = item.cbCameraId.toString()
})
return expandedArr
} }
</script> </script>

Loading…
Cancel
Save