daikins/.svn/pristine/00/00e2c913a00957d808b642693be8c02a064f6844.svn-base

<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" 
const { push } = useRouter()
const store = useUserStore()
const database = databaseld()
const { toggle } = inject<any>('fullscreen')
const activeMenuKey = ref()
let idx = ref(0)

const titles = ref()
function menuHandler(menu: any, index: number) {
  console.log(menu)
  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()
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
      // }
    }
  
}
onMounted(() => {
    getTree()
})

const onClic = ref(false)
</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" >
              <span  class="text-18px flex child  font-900 truncate" :class="activeItem === item.id ? 'text-#002fa7' : ''">{{ item.name }}</span>


              <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">
                  <span  class="text-18px flex childs  font-900 truncate" :class="activeItem === ite.id ? 'text-#002fa7' : ''">{{ ite.name }}</span>
                  
                  <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">
                      <span  class="text-18px flex childs  font-900 truncate" :class="activeItem === it.id ? 'text-#002fa7' : ''">{{ it.name }}</span>                     
                    </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>