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>
                  <Scan />
                </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>
      </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">
        <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>
      </n-modal>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { Filter, Settings } from '@vicons/tabler';
import { Scan } from '@vicons/ionicons5';
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 screenClick(){
  if (screenfull.isEnabled) {
      // 控制是否全屏的按钮
      screenfull.toggle(screenRef.value)
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>