256 lines
7.5 KiB
Vue
256 lines
7.5 KiB
Vue
<script setup lang="ts">
|
|
import { RouterView } from 'vue-router'
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
import { treeDbList,download } from '@/api/daikin/base'
|
|
import {databaseld} from "@/stores/modules/database"
|
|
import { NPopover } from 'naive-ui'
|
|
|
|
const { push } = useRouter()
|
|
const store = useUserStore()
|
|
const database = databaseld()
|
|
const { toggle } = inject<any>('fullscreen')
|
|
const activeMenuKey = ref()
|
|
let idx = ref(0)
|
|
const onClic = ref(false)
|
|
const titles = ref()
|
|
function menuHandler(menu: any, index: number) {
|
|
console.log(menu,index)
|
|
activeMenuKey.value = menu.id
|
|
titles.value = menu.name
|
|
idx.value = index;
|
|
activeItem.value = menu.id
|
|
if (menu.childList&&menu.childList.length>0){
|
|
activeItem.value = menu.childList[0].id
|
|
}
|
|
database.database.id =activeItem.value
|
|
}
|
|
function goChild(menu: any) {
|
|
activeItem.value = menu.id
|
|
console.log(menu.id)
|
|
database.database.id =menu.id
|
|
}
|
|
var activeItem = ref<any>()
|
|
const tableData = ref()
|
|
async function getTree() {
|
|
const { data = [] } = await treeDbList({})
|
|
tableData.value = data
|
|
|
|
if(data&&data[0]){
|
|
// console.log(data[0])
|
|
titles.value = data[0].name
|
|
activeMenuKey.value = data[0].id
|
|
database.database.id = data[0].id
|
|
// if(data[0].childList&&data[0].childList.length>0){
|
|
// activeItem.value = data[0].childList[0].id
|
|
// activeMenuKey.value = data[0].childList[0].id
|
|
// }
|
|
}
|
|
if(activeItem.value){
|
|
const { topLevelItem, targetItem } = findItemById(data,activeItem.value)
|
|
if(topLevelItem && targetItem){
|
|
const index = data.findIndex((i:any) => i.id === topLevelItem.id)
|
|
nextTick(()=>{
|
|
onClic.value = true
|
|
menuHandler(topLevelItem,index === -1 ? 0 : index)
|
|
goChild(targetItem)
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
getTree()
|
|
|
|
|
|
|
|
function findItemById(items:any, targetId:any, topLevelItem:any = null):any {
|
|
for (let i = 0; i < items.length; i++) {
|
|
const item = items[i];
|
|
if (item.id === targetId) {
|
|
return { topLevelItem: topLevelItem || item, targetItem: item };
|
|
} else if (item.childList?.length > 0) {
|
|
const result = findItemById(item.childList, targetId, topLevelItem || item);
|
|
if (result) {
|
|
return result;
|
|
}
|
|
}
|
|
}
|
|
return {topLevelItem: null, targetItem: null};
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page w-1920px h-1080px flex">
|
|
<div class="w350px -mr-1px flex flex-col shrink-0 overflow-auto">
|
|
<div class="p30px bg-#000 ">
|
|
<!-- @dblclick="toggle" -->
|
|
<img src="@/assets/images/logo@2x.png" class="w197px h44px mt14px" />
|
|
</div>
|
|
|
|
|
|
<div class="pt30px pb24px flex-1 pl20px bg-#fff">
|
|
|
|
<div class="nav px36px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#000 cursor-pointer"
|
|
v-for="(m, index) in tableData" :key="m.id" :class="activeMenuKey === m.id ? (m.childList ? 'actives' : 'active') : ''"
|
|
@click="() => menuHandler(m, index)">
|
|
<div :class="activeMenuKey === m.id && 'onActive'" class="flex" @click="onClic=!onClic">
|
|
<!-- <img v-if="activeMenuKey === m.id" :src="m.icon1" class="w22px h22px mr16px mt--5px" />
|
|
<img v-else :src="m.icon" class="w22px h22px mr16px mt--5px" /> -->
|
|
<!-- lujinli -->
|
|
<!-- <span class="text-17px font-900 relative min-w195px block"> -->
|
|
<span class="text-18px font-900 relative min-w195px block">
|
|
<span class="truncate"> {{ m.name }} </span>
|
|
<span class="text-#000000 absolute right--30px top--5px"><el-icon size="26">
|
|
<CaretTop v-if="activeMenuKey === m.id&&onClic" class="text-#4977FC" />
|
|
<CaretBottom v-else />
|
|
</el-icon></span>
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="m.childList && idx == index" class="pl40px" v-show="idx === index&&onClic?true:false">
|
|
<div class="my30px pl10px text-#000 activeChildren" v-for="(item, ind) in m.childList" :key="item.id"
|
|
@click.stop="goChild(item)" @click="activeItem = item.id" >
|
|
<!-- <el-tooltip :content="item.name" placement="top-start" effect="light"> -->
|
|
<n-popover trigger="hover" placement="top-start">
|
|
<template #trigger>
|
|
<span class="text-18px flex child font-900 truncate" :class="activeItem === item.id ? 'text-#002fa7' : ''">{{ item.name }}</span>
|
|
</template>
|
|
<div class="text-18px leading-40px">
|
|
{{ item.name }}
|
|
</div>
|
|
</n-popover>
|
|
<!-- </el-tooltip> -->
|
|
|
|
|
|
<div v-if="item.childList && idx == index" class="pl10px">
|
|
<div class="my30px pl10px text-#000 " v-for="(ite, ind) in item.childList" :key="item.id"
|
|
@click.stop="goChild(ite)" @click="activeItem = ite.id">
|
|
<n-popover trigger="hover" placement="top-start">
|
|
<template #trigger>
|
|
<span class="text-18px flex childs font-900 truncate" :class="activeItem === ite.id ? 'text-#002fa7' : ''">{{ ite.name }}</span>
|
|
</template>
|
|
<div class="text-18px leading-40px">
|
|
{{ ite.name }}
|
|
</div>
|
|
</n-popover>
|
|
|
|
<div v-if="ite.childList && idx == index" class="pl10px">
|
|
<div class="my30px pl10px text-#000 " v-for="(it, ind) in ite.childList" :key="item.id"
|
|
@click.stop="goChild(it)" @click="activeItem = it.id">
|
|
<n-popover trigger="hover" placement="top-start">
|
|
<template #trigger>
|
|
<span class="text-18px flex childs font-900 truncate" :class="activeItem === it.id ? 'text-#002fa7' : ''">{{ it.name }}</span>
|
|
</template>
|
|
<div class="text-18px leading-40px">
|
|
{{ it.name }}
|
|
</div>
|
|
</n-popover>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main flex-1 pb15px pt0px relative ">
|
|
<!-- <Home /> -->
|
|
<RouterView :cateId="activeItem" :title="titles"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.truncate {
|
|
display: block;
|
|
max-width: 226px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.page {
|
|
font-family: 'PingFang SC';
|
|
user-select: none;
|
|
background-image:none;
|
|
background-color: #cacaca;
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
// color: #3b3b3b;
|
|
color: #000;
|
|
|
|
line-height: 1;
|
|
}
|
|
|
|
.nav {
|
|
|
|
|
|
&::before {
|
|
top: -48px;
|
|
}
|
|
.child:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.childs:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&::after {
|
|
bottom: -49px;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
&.active {
|
|
color: #002fa7;
|
|
background-color: #E6ECFF;
|
|
|
|
a {
|
|
color: #002fa7;
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.actives {
|
|
padding: 0px !important;
|
|
color: #4977FC;
|
|
background-color: #F5F8FF;
|
|
|
|
a {
|
|
color: #002fa7;
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.onActive {
|
|
background-color: #E6ECFF;
|
|
border-radius: 32px 0 0 32px;
|
|
|
|
padding: 24px 36px 24px 36px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
|
|
width: 100%;
|
|
height: 95%;
|
|
background-color: #4877FB;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
scrollbar-width: none
|
|
}</style>
|