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

src/axios/cameraBase/cameraApi.ts

@@ -1,5 +1,5 @@
-import {axios} from '@/utils/axios';
-import {apiUrl} from "@/axios";
+import { axios } from '@/utils/axios';
+import { apiUrl } from "@/axios";
 import qs from "qs";
 
 enum Api {
@@ -9,6 +9,7 @@ enum Api {
     Get = '/cbCamera/get',
     GetList = '/cbCamera/getList',
     GetPageList = '/cbCamera/getPageList',
+    GetTreeList = '/cbCameraNode/getTree'
 }
 
 const CisApiUrl = apiUrl.CisApiUrl;
@@ -19,8 +20,10 @@ export const Update = (params?: any) => axios.post(CisApiUrl + Api.Update, qs.st
 
 export const Delete = (params?: any) => axios.post(CisApiUrl + Api.Delete, qs.stringify(params))
 
-export const Get = (params?: any) => axios.get(CisApiUrl + Api.Get, {params: params})
+export const Get = (params?: any) => axios.get(CisApiUrl + Api.Get, { params: params })
 
-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 })

src/views/page/aside/cameraLeftMenu.vue

@@ -19,7 +19,7 @@
                         <template #overlay>
                             <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
                                 <a-menu-item key="open">打开</a-menu-item>
-                                <a-menu-item key="close" >关闭</a-menu-item>
+                                <a-menu-item key="close">关闭</a-menu-item>
                                 <a-menu-item key="delete">删除</a-menu-item>
                             </a-menu>
                         </template>
@@ -36,37 +36,37 @@ import { useStore } from '@/store/index';
 import * as cameraApi from '@/axios/cameraBase/cameraApi';
 let piniaStore = useStore();
 const treeData = ref<any>([
-    {
-        title: '视频监控',
-        key: '视频监控',
-        children: [
-            {
-                title: '横琴',
-                key: '横琴',
-                children: [
-                    // { title: '0-0-1-0', key: '0-0-1-0' },
-                    // { title: '0-0-1-1', key: '0-0-1-1' },
-                    // { title: '0-0-1-2', key: '0-0-1-2' },
-                ],
-            },
-        ],
-    }
+    // {
+    //     title: '视频监控',
+    //     key: '视频监控',
+    //     children: [
+    //         {
+    //             title: '横琴',
+    //             key: '横琴',
+    //             children: [
+    //                 // { title: '0-0-1-0', key: '0-0-1-0' },
+    //                 // { title: '0-0-1-1', key: '0-0-1-1' },
+    //                 // { title: '0-0-1-2', key: '0-0-1-2' },
+    //             ],
+    //         },
+    //     ],
+    // }
 ]);
 const onContextMenuClick = (treeKey: string, menuKey: string) => {
     console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
     //防止添加多个key值，再次点击不能关闭。数组去重
-   if(menuKey=="open"){
-    let arr=[...expandedKeys.value]
-    arr.push(treeKey)
-    arr=[...new Set(arr)]
-    expandedKeys.value=arr
-   }else if(menuKey=="close"){
-    expandedKeys.value=expandedKeys.value.filter((item:any)=>{
-        return item != treeKey
-    })
-   }else if(menuKey=="delete"){
+    if (menuKey == "open") {
+        let arr = [...expandedKeys.value]
+        arr.push(treeKey)
+        arr = [...new Set(arr)]
+        expandedKeys.value = arr
+    } else if (menuKey == "close") {
+        expandedKeys.value = expandedKeys.value.filter((item: any) => {
+            return item != treeKey
+        })
+    } else if (menuKey == "delete") {
 
-   }
+    }
 
 };
 let searchStr = ref('');
@@ -82,7 +82,7 @@ watch(searchStr, (newVal, oldVal) => {
     treeData.value.forEach((element: any) => {
         if (element.children.length != 0) {
             let arr = searchFn(newVal, element.children)
-            if(arr.length!=0){
+            if (arr.length != 0) {
                 expandedKeyArr = expandedKeyArr.concat(arr)
                 expandedKeyArr.push(element.key)
             }
@@ -91,9 +91,9 @@ watch(searchStr, (newVal, oldVal) => {
     expandedKeys.value = expandedKeyArr
 })
 // 选中相机
-function selectCamera(e: any) {
-    if (e.length && !isNaN(parseInt(e[0]))) {
-        piniaStore.updateCurSelectKey(e[0].toString())
+function selectCamera(e: any, e2: any) {
+    if (!e2.node.isGroup) {
+        piniaStore.updateCurSelectKey(e2.node.cbCameraId.toString())
     }
 }
 //模糊查询递归
@@ -118,16 +118,31 @@ function searchFn(newVal: string, arr: any[]): any {
 function loadTreeData() {
     cameraApi.GetList().then((res: any) => {
         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)
-
-        // 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>