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="1">打开</a-menu-item>
                                <a-menu-item key="2">删除</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}`);
};
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) {
    if (e.length && !isNaN(parseInt(e[0]))) {
        piniaStore.updateCurSelectKey(e[0].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;
        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
    });
}
</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%;
}

.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>