ar-web/src/views/page/aside/cameraLeftMenu.vue

<template>
    <div class="arTagTitle">
        请输入标签内容
    </div>
    <div class="messageList">
        <div class="messageTitle">
            选择切换高点
        </div>
        <div class="search">
            <img src="@/assets/images/search.png">
            <input class="arScrean" placeholder='请输入站点名称' v-model="searchStr" type="text" id="" />
        </div>
        <div class="container clearfix">
            <a-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys" :expandAction="'click'"
                @select="selectCamera">
                <template #title="{ key: treeKey, title }">
                    <a-dropdown :trigger="['contextmenu']">
                        <span>{{ title }}</span>
                        <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="delete">删除</a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </template>
            </a-tree>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, onUnmounted, watch } from "vue";
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' },
    //             ],
    //         },
    //     ],
    // }
]);
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") {

    }

};
let searchStr = ref('');
const expandedKeys = ref<any[]>([]);

onMounted(() => {
    loadTreeData()
})
//模糊查询
watch(searchStr, (newVal, oldVal) => {
    let expandedKeyArr: any[] = []
    if (newVal.length == 0) return
    treeData.value.forEach((element: any) => {
        if (element.children.length != 0) {
            let arr = searchFn(newVal, element.children)
            if (arr.length != 0) {
                expandedKeyArr = expandedKeyArr.concat(arr)
                expandedKeyArr.push(element.key)
            }
        }
    });
    expandedKeys.value = expandedKeyArr
})
// 选中相机
function selectCamera(e: any, e2: any) {
    if (!e2.node.isGroup) {
        piniaStore.updateCurSelectKey(e2.node.cbCameraId.toString())
    }
}
//模糊查询递归
function searchFn(newVal: string, arr: any[]): any {
    let expandedKeyArr: any[] = []
    arr.forEach(element => {
        if (element.children && element.children.length) {
            let ab = searchFn(newVal, element.children);
            if (ab && ab.length) {
                ab.push(element.key)
                expandedKeyArr = expandedKeyArr.concat(ab);
            }
        }

        if (element.title.indexOf(newVal) > -1) {
            expandedKeyArr.push(element.key);
        }

    });
    return expandedKeyArr
}
function loadTreeData() {
    cameraApi.GetList().then((res: any) => {
        let list: Array<any> = res.data.data;
        piniaStore.addCameraMap(list)
    });
    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>

<style scoped lang='less'>
.container {
    padding: 0 20px;
}

:deep(.ant-tree) {
    background-color: transparent !important;

    div {
        color: #000 !important;
    }
}

.messageList {
    position: absolute;
    top: 18%;
    left: 1%;
    width: 11vw;
    height: 21vw;
    background: url(@/assets/images/loginBG.png);
    background-size: 100% 100%;
    z-index: 1;
}

.messageTitle {
    position: absolute;
    top: 6%;
    left: 50%;
    width: 75%;
    border-radius: 1vh;
    transform: translate(-50%, -50%);
    height: 3vh;
    color: #fff;
    line-height: 3vh;
    text-align: center;
    background-image: linear-gradient(to right, rgba(255, 107, 0, 0.3), rgba(80, 80, 80, 0.1), rgba(255, 107, 0, 0.3));
}

.arTagTitle {
    font-size: 1em;
    color: #333;
    padding-left: 1.2vw;
    line-height: 47px;
    position: absolute;
    top: 10%;
    left: 1%;
    width: 8.5vw;
    height: 50px;
    background: url(@/assets/images/textBG.png) no-repeat;
    background-size: 100% 100%;
}

.arTagTitle::before {
    content: '';
    background: url(@/assets/images/textAnimal.png) no-repeat;
    background-size: 100% 100%;
    height: 35px;
    width: 35px;
    position: absolute;
    top: 6px;
    left: -15px;
    animation: rounte 5s linear infinite;
}

.search {
    position: relative;
    height: 1.5em;
    width: 75%;
    margin: 6vh 0 0 50%;
    transform: translateX(-50%);
    color: #eee;

    img {
        position: absolute;
        top: 0;
        left: 0;
        height: 1.5em;
        width: 1.5em;
    }

    .arScrean {
        border: 0;
        outline: 0;
        height: 1.5em;
        position: absolute;
        top: 0;
        left: 1.9em;
        padding-left: 0.3em;
        border-left: #999 1px solid;
        color: #eee;
        background: rgba(200, 200, 255, 0);
    }
}

:deep(.ant-dropdown-menu-title-content) {
    color: #000 !important;
}
</style>