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

<template>
  <div ref="screenRef" class="screen">
    <section ref="titleRef" class="header">
      <Header
        :titleData="titleData"
        :settingShow="true"
        :warningShow="true"
        @showModalClick="showModalClick"
        @returnClick="returnClick"
      />
      <!-- <div class="title">
        <h3>{{ titleData }}</h3>
      </div>
      <div class="weather">
        <div class="time">
          {{ currentTime }} {{ lunarDay.ncWeek }}
        </div>
        <div class="line"></div>
        <div class="forecast">
          <span>天气：多云</span>
          <img src="../../../assets/images/weather/duoyun.png" />
        </div>
      </div>
      <div class="seeting">
        <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> -->
    </section>
    <section class="layout">
      <div ref="sidebar" class="sidebar animate__animated animate__fadeIn" :class="menuShow ? '' : 'sidebarHide'">
        <Menu menuType="1" @tableMenuData="tableMenuData" />
      </div>
      <div class="main" :style="`width: ${mainWidth}%`">
        <Main :tapsShow="tapsShow" :sidebarHeight="sidebarHeight" @tableHeaderData="tableHeaderData" />
        <InfoPanel class="animate__animated animate__fadeInUp" v-if="panelShow" />
      </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 class="menuShow" @click="menuIsShow">
      <i class="iconfont icon-angle-double" :class="menuShow ? 'left' : 'right'"></i>
    </div>
    <div class="panelBtn" :class="menuShow ? 'left' : 'right'" @click="panelClick">
      <i class="iconfont icon-up" :class="!panelShow ? 'up' : 'down'"></i>
      <div class="copyright">
        Copyright © {{ $t('copyright.year') }} {{ $t('copyright.abbr') }} {{ $t('copyright.document') }}
      </div>
      <!-- <n-button type="info" size="tiny" ghost @click="panelClick">按钮</n-button> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
// import { useDateFormat, useNow } from '@vueuse/core';
// import { Filter, Maximize, Settings, Power } from '@vicons/tabler';
import Header from '../components/header.vue';
import Menu from '../components/menu.vue';
import Main from './components/main.vue';
import InfoPanel from './components/infoPanel.vue';
import ShowTree from './components/showTree.vue';
import useStorage from '@/utils/useStorage';
import socket from '@/utils/socket';
const sessionStorageIns = useStorage('sessionStorage');

const route = useRoute();
const router = useRouter();
// import calendar from '@/utils/lunar';
// const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
// const lunarDay: any = calendar.solarToLunar(
//   useNow().value.getUTCFullYear(),
//   useNow().value.getUTCMonth() + 1,
//   useNow().value.getUTCDate()
// );
// 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 mainWidth = ref(87);
const titleData = ref('');
const menuShow = ref(true);
const panelShow = ref(false);
const panelHeight = ref(0);

onMounted(() => {
  // titleRef.value?.clientHeight; //获取头部标题高度
  const offsetHeight = sidebar.value?.offsetHeight; //获取侧边栏菜单高度
  sidebarHeight.value = offsetHeight === undefined ? 0 : offsetHeight - panelHeight.value;
  // menuShow.value=localStorage.getItem('menuShow')===undefined?true:JSON.parse(localStorage.getItem('menuShow'));
  // console.log("sidebar:", sidebar.value?.offsetHeight)
});

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

// onBeforeRouteLeave((to, from) => {
//   //监听离开页面
//   console.log('onBeforeRouteLeave--', to.path, from.path);
//   if (to.path != from.path) {
//     console.log('离开页面');
//     socket.close(false);
//   }
// });

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

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

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

function returnClick(val: string) {
  //返回首页
  router.replace('/dashboard');
}

function menuIsShow() {
  //点击左侧菜单是否隐藏
  menuShow.value = !menuShow.value;
  mainWidth.value = menuShow.value ? 87 : 100;
  sessionStorageIns.setUseStorage('menuShow', menuShow.value);
}

function panelClick() {
  //底部信息面板按钮
  panelShow.value = !panelShow.value;
  panelHeight.value = panelShow.value ? 300 : 0;
  const offsetHeight = sidebar.value?.offsetHeight; //获取侧边栏菜单高度
  sidebarHeight.value = offsetHeight === undefined ? 0 : offsetHeight - panelHeight.value;
  sessionStorageIns.setUseStorage('panelShow', panelShow.value);
}

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