mky-vent-base/src/views/vent/monitorManager/airDoor/index.vue

<template>
  <div class="air-door">
    <customHeader>风门集中同控</customHeader>
    <div class="main-container">
      <div class="container-left">
        <doorMenuL :menuData="menuData" />
      </div>
      <div class="container-right">
        <doorContentR :infoData="menuData" :visibleTs30="visibleTs30" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import customHeader from '/@/components/vent/customHeader.vue';
  import doorMenuL from './components/door-menu-l.vue';
  import doorContentR from './components/door-content-r.vue';
  import { getDevice, upcoming } from './airdoor.api';

  let menuData = ref<any[]>([]);
  //控制定时设置提示弹窗显示/隐藏
  let visibleTs30 = ref(false);

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag?) {
    timer = setTimeout(
      async () => {
        //获取左侧菜单数据
        await getMenuList();
        await upcomingList();
        getMonitor(false);
      },
      flag ? 0 : 5000
    );
  }
  //左侧数据
  async function getMenuList() {
    let res = await getDevice({ devicetype: 'gate', pagetype: 'normal' });
    console.log(res, 'menuList');
    menuData.value = res.msgTxt[0].datalist || [];
  }
  async function upcomingList() {
    visibleTs30.value = true;
    // let res = await upcoming({})
    // console.log(res, '定时30秒')
    // if (res.length) {
    //   visibleTs30.value = true
    // } else {
    //   visibleTs30.value = false
    // }
  }

  onMounted(() => {
    getMenuList();
    getMonitor();
  });
</script>

<style lang="less" scoped>
  .air-door {
    position: relative;
    width: 100%;
    height: 100%;

    .main-container {
      display: flex;
      width: 100%;
      margin-top: 70px;
      height: calc(100% - 70px);
      padding: 10px;
      box-sizing: border-box;
    }

    .container-left {
      width: 260px;
      height: 100%;
      padding: 10px 15px;
      margin-right: 10px;
      border: 1px solid #99e8ff66;
      background: #27546e1a;
      overflow-y: auto;
      box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
      -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
      -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
    }

    .container-right {
      width: calc(100% - 275px);
      height: 100%;
      // padding: 10px;
      // box-sizing: border-box;
    }
  }
</style>