dmc
/
test-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<template>
  <!-- :sources="[bgVideo]" -->
  <video-bg :sources="[]">
    <div class="as-layout-horizontal" style="width: 100%; height: 100%; opacity: 0.9">
      <!-- 此处先划出布局形式(按左右布局划分，左边菜单，右边内容) -->
      <!-- 菜单部分 -->
      <div class="bg-theme" style="height: 100%">
        <!-- 菜单头部部分 -->
        <div class="as-gravity-center-start" @click="barkHome" style="height: 70px;cursor: pointer;">
          <img rel="icon" src="/logo2.png" style="width: 60px; height: 60px" />
          <!-- D-UI框架模板 -->
          <div class="as-bold" style="font-size: 18px; color: #ffffff;user-select:none;"
            v-show="menuStart.menuIsExpansion">黔通智联</div>
        </div>

        <!-- 菜单主体部分 height="100%" -->
        <div class="as-border-width" style="height: 100%; background-color: #ffffff">
          <el-scrollbar max-height="90%">
            <el-menu :default-active="menuIndex.menuIndex" mode="vertical" :router="false" @select="select"
              :collapse="!menuStart.menuIsExpansion" class="el-menu-vertical-demo">
              <sidebar-item :list="list" />
            </el-menu>
          </el-scrollbar>
        </div>
      </div>

      <div class="as-weight as-layout-vertical">
        <!-- 头部选项 -->
        <div class="bg-theme" style="padding: 0px 10px 0px 10px; height: 70px">

          <Head style="height: 70px"></Head>
        </div>

        <el-scrollbar>
          <div class="as-layout-vertical">
            <!-- 头部 height: 8%;-->
            <div style="background-color: #ffffff; padding: 10px 0px 10px 0px">
              <!-- 选项卡 -->
              <tab-container> </tab-container>

              <!-- 主体内容页面 -->
              <router-view name="key"></router-view>

              <!-- 路由缓存 https://blog.csdn.net/kDevelop/article/details/122036896 -->
              <!-- <router-view name="key" v-slot="{ Component }">
              <keep-alive style="height:100vh">
                <component :is="Component" />
              </keep-alive>
            </router-view> -->
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </video-bg>
</template>

<script setup lang="ts">
// @ts-ignore 选项菜单
import SidebarItem from '@/layout/components/SidebarItem.vue'
// @ts-ignore 选项头部
import Head from '@/layout/components/Head.vue'
// @ts-ignore Tab选项
import TabContainer from '@/layout/components/TabControl.vue'
import VideoBg from '@/components/VideoBackround/VideoBackground.vue' //视频背景组件
import BgTwo from '@/assets/video/homeBg.mp4' //视频资源
import $store from '@/store/index' // 引入vuex
import $storeTab from '@/store/tabValue' //引入tab vuex
import { list } from '@/data/menuData'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const bgVideo = BgTwo
const router = useRouter()
//默认菜单为打开状态
let menuStart = ref($store.state.data)
let menuIndex = ref($storeTab.state.editableTabsValue)
//处理刷新页面重置问题
onMounted(() => {
  const newTab = sessionStorage.getItem('newTab')
  if (newTab) {
    let dataTabs = JSON.parse(newTab)
    dataTabs.name = '1'
    let value = {
      type: 1,
      data: dataTabs,
    }
    console.log(dataTabs);
    
    $storeTab.dispatch('addTab', value)
    $storeTab.dispatch('updateETV', 1 + '')
    $storeTab.dispatch('updateMI', `${dataTabs.title},${dataTabs.path}`)
  } else {
    router.replace({
      name: 'home',
    })
  }
  sessionStorage.removeItem('newTab')
})

//返回首页
const barkHome = (() => {
  //更新菜单索引
  $storeTab.dispatch('updateETV', 0 + '')
  router.replace({
    name: 'home'
  })
})

//菜单选择监听(添加选项卡成功则添加，有就进行跳转)
//data(菜单名称,菜单路径)
function select(data: unknown) {
  //这里只负责tab，不负责跳转
  let value = {
    type: 2,
    data: data,
  }
  $storeTab.dispatch('addTab', value)
}
</script>

<!-- padding-bottom: 40px; -->
<!-- min-height: 400px; -->
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 248px;
  border-width: 0px;
}

.bg-theme {
  background-color: $test-color;
}
</style>