3 changed files with 227 additions and 168 deletions
@ -0,0 +1,216 @@ |
|||||
|
<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 |
||||
|
console.log(expandedKeys.value); |
||||
|
|
||||
|
|
||||
|
}) |
||||
|
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; |
||||
|
console.log(list); |
||||
|
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> |
||||
Loading…
Reference in new issue