gas-injection/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, provide, onUnmounted } 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 upcomingList()
      //获取左侧菜单数据
      await getMenuList()
      if (timer) {
        timer = null;
      }
      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() {
  let res = await upcoming({})
  console.log(res, '定时30秒')
  if (res.length) {
    visibleTs30.value = true
  } else {
    visibleTs30.value = false
  }
}

onMounted(() => {
  getMenuList()
  getMonitor(true)
})
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }

});
provide('visibleTs30', visibleTs30)
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .air-door {
    --image-left-bd: url('@/assets/images/themify/deepblue/home-container/configurable/wind-door/left-bd.png');
    --image-right-bd: url(/@/assets/images/themify/deepblue/home-container/configurable/wind-door/right-bd.png);

  }
}

.air-door {
  --image-left-bd: url('@/assets/images/home-container/configurable/wind-door/left-bd.png');
  --image-right-bd: url(/@/assets/images/home-container/configurable/wind-door/right-bd.png);
  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: 320px;
    height: 100%;
    padding: 20px 10px;
    margin-right: 10px;
    // border: 1px solid #99e8ff66;
    // background: #27546e1a;
    background-image: var(--image-left-bd);
    background-size: 100% 100%;
    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% - 335px);
    height: 100%;
    background-image: var(--image-right-bd);
    background-size: 100% 100%;
    padding: 20px 10px;
    box-sizing: border-box;
  }
}
</style>