iot-ui-plus/src/views/monitoring/screen/index.vue

<template>
  <div ref="screenRef" class="screen">
    <secton ref="titleRef" class="title">
      <h3>{{ titleData }}</h3>
      <div class="seeting">
        <!-- <n-tooltip trigger="hover">
          <template #trigger>
            <n-button class="tooltips" circle quaternary @click="filterClick">
              <template #icon>
                <n-icon>
                  <Filter />
                </n-icon>
              </template>
            </n-button>
          </template>
          {{ tapsShow === true ? '隐藏' : '显示' }}
        </n-tooltip> -->
        <!-- <el-button @click="screenClick">全屏</el-button> -->
        <!-- <n-tooltip trigger="hover">
          <template #trigger>
            <n-button class="tooltips" circle quaternary @click="screenClick">
              <template #icon>
                <n-icon>
                  <Maximize />
                </n-icon>
              </template>
            </n-button>
          </template>
          全屏
        </n-tooltip> -->
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-button class="tooltips" circle quaternary @click="showClick">
              <template #icon>
                <n-icon>
                  <Settings />
                </n-icon>
              </template>
            </n-button>
          </template>
          显示项
        </n-tooltip>
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-button class="tooltips" circle quaternary @click="returnBack">
              <template #icon>
                <n-icon>
                  <Power />
                </n-icon>
              </template>
            </n-button>
          </template>
          返回首页
        </n-tooltip>
      </div>
    </secton>
    <section class="layout">
      <div ref="sidebar" class="sidebar">
        <Menu @tableMenuData="tableMenuData" />
      </div>
      <div class="main">
        <Main :tapsShow="tapsShow" :sidebarHeight="sidebarHeight" @tableHeaderData="tableHeaderData" />
      </div>
    </section>
    <section>
      <!-- <n-modal v-model:show="showModal"> -->
      <el-dialog v-model="showModal" title="显示项" width="600">
        <!-- <n-card class="cardClass" style="width: 600px" title="显示项" :bordered="false" size="huge" role="dialog"
          aria-modal="true"> -->
        <ShowTree :headerData="headerData" @cancelClick="cancelClick" />
        <!-- <template #header-extra>
            *
          </template> -->
        <!-- <template #footer>
            <n-button>取消</n-button>
            <n-button type="info"> 确定 </n-button>
          </template> -->
        <!-- </n-card> -->
      </el-dialog>
      <!-- </n-modal> -->
    </section>
  </div>
</template>
<script lang="ts" setup>
import router from '@/router';
import { Filter, Maximize, Settings, Power } from '@vicons/tabler';
import Menu from './components/menu.vue';
import Main from './components/main.vue';
import ShowTree from './components/showTree.vue';
// import screenfull from 'screenfull'
const tapsShow = ref(false);
const showModal = ref(false);
const screenRef = ref<HTMLElement>();
const titleRef = ref<HTMLElement>();
const sidebar = ref<HTMLElement>();
const sidebarHeight = ref()
const headerData = ref([]);
const titleData = ref('')

onMounted(() => {
  // titleRef.value?.clientHeight; //获取头部标题高度
  console.log(sidebar.value)
  sidebarHeight.value = sidebar.value?.offsetHeight; //获取侧边栏菜单高度
  console.log("sidebar:", sidebar.value?.offsetHeight)
});

window.addEventListener('resize', () => {
  // 监听窗口改变，改变后重新获取
  sidebarHeight.value = sidebar.value?.offsetHeight; //获取侧边栏菜单高度
  console.log("监听sidebar:", sidebar.value?.offsetHeight)
});

function tableMenuData(data: any) {
  //获取菜单数据
  titleData.value = data[0].deptName
}

function tableHeaderData(data: any) {
  //获取表格header数据
  headerData.value = data;
}

function filterClick() {
  //显示/隐藏热源信息栏
  tapsShow.value = !tapsShow.value;
}
function showClick() {
  //显示/隐藏表格配置栏
  showModal.value = true;
}
function cancelClick() {
  //表格配置栏取消
  showModal.value = false;
}

function returnBack() {
  //返回首页
  router.replace("/dashboard")
}

// function screenClick(){
//   if (screenfull.isEnabled) {
//       // 控制是否全屏的按钮
//       screenfull.toggle(screenRef.value)
//   }
// }
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>