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