mky-vent-5/src/views/vent/home/clique/index.vue

<template>
  <div style="position: relative; width: 100%; height: 100%;">
    <div class="home-container" v-if="pageType == 'home'">
      <div class="header">
        <div class="head-time">
          <span>2022/03/28</span>
          <span>星期一</span>
          <span>13:46:37</span>
        </div>
        <div class="main-title">通防智能管控系统</div>
      </div>
      <div class="home-contents">
        <div class="left-content">
          <!-- 局部通风机 -->
          <div class="monitor-box">
            <fanMonitor @goDetail="goDetail" :fandata="fanLocalList" />
          </div>
          <!-- 主通风机 -->
          <div class="monitor-box monitor-box1">
            <mainMonitor @goDetail="goDetail"/>
          </div>
          <!-- 通风设备远程控制 -->
          <div class="monitor-box">
            <windDevice @goDetail="goDetail"/>
          </div>
        </div>
        <div class="center-content">
          <!-- 三维模型 -->
          <div class="three-box">
            <div class="three-nav">
              <div class="nav-item" v-for="(item, index) in navList" :key="index">
                <div class="item-label">{{ item.name }}</div>
                <div class="item-value">
                  <div v-if="item.isShow" class="bg-box" v-for="(ite, ind) in item.valList" :key="ind">
                    <div class="box-line"></div>
                    <div class="value-text">{{ ite.val }}</div>
                  </div>
                  <div v-else class="value-text1">{{ item.val }}</div>
                </div>
              </div>
            </div>
            <div class="three-modal" id="modalBox">
              <!-- <iframe id="iframe" ref="iframe" src="http://10.10.150.72:8091/user/autologin" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe> -->
            
            </div>
          </div>
          <!-- 风量监测 -->
          <div class="wind-box">
            <windMonitor @goDetail="goDetail"/>
          </div>
        </div>
        <div class="right-content">
          <!-- 关键通风路线 -->
          <div class="monitor-box">
            <windLine @goDetail="goDetail"/>
          </div>
          <!-- 工作面智能管控 -->
          <div class="monitor-box monitor-box1">
            <workMonitor @goDetail="goDetail"/>
          </div>
          <!-- 设备预警 -->
          <div class="monitor-box">
            <deviceWarn @goDetail="goDetail"/>
          </div>
        </div>
      </div>
    </div>
    <DeviceMonitor v-else-if="pageType" :pageType="pageType" @goHome="goHome"/>
    <div id="content" style="width: 100%; height: 100%; position: fixed;"></div>
  </div>
  
</template>
<script lang="ts" setup>
  import { reactive, onMounted, ref, nextTick } from 'vue';
  import fanMonitor from './components/fan-monitor.vue';
  import mainMonitor from './components/main-monitor.vue';
  import windDevice from './components/wind-device.vue';
  import windMonitor from './components/wind-monitor.vue';
  import windLine from './components/wind-line.vue';
  import workMonitor from './components/work-monitor.vue';
  import deviceWarn from './components/device-warn.vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { list } from './clique.api';
  import DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue'
  
  let timer: NodeJS.Timeout | null = null;
  let fanLocalList = reactive<any[]>([]); //局部风机数据
  let navList = reactive([
    { name: '总风量(m³/min)', isShow: true, valList: [{ val: '2' }, { val: '1' }, { val: '3' }, { val: '3' }, { val: '0' }] },
    { name: '总阻力(Pa)', isShow: true, valList: [{ val: '0' }, { val: '2' }, { val: '4' }, { val: '6' }, { val: '3' }] },
    { name: '等积孔(m²)', isShow: true, valList: [{ val: '1' }, { val: '0' }, { val: '.' }, { val: '5' }, { val: '4' }] },
    { name: '外部漏风率', isShow: false, val: '6%' },
    { name: '有效风量率', isShow: false, val: '91.5%' },
  ]);
  const loading = ref(false);
  const globSetting = useGlobSetting();
  const openQianKun = globSetting.openQianKun;
  let actions;
  const pageType = ref('home')

function goDetail(deviceType) {
  pageType.value = deviceType
  changeModalBox()
}
function goHome() {
  pageType.value = 'home'
  nextTick(() => {
    changeModalBox()
  })
}
function changeModalBox() {
  if (pageType.value === 'home') {
    const dom = document.getElementById('modalBox') as HTMLElement
    if (dom && dom.parentElement) {
      const contentDom = document.getElementById('content') as HTMLElement
      contentDom?.setAttribute('style', `top: ${dom.parentElement.offsetTop + 20}px; left: ${dom.parentElement.offsetLeft + 20}px; width: ${dom.offsetWidth - 40}px; height: ${dom.offsetHeight - 40}px; position: fixed;`)
    }
  } else {
    const dom = document.getElementById('modalBox') as HTMLElement
    if (dom && dom.parentElement) {
      const contentDom = document.getElementById('content') as HTMLElement
      contentDom?.setAttribute('style', `top:0px; left: 0px; width: 100%; height: 100%; position: fixed;`)
    }
  }
}
function getList() {
  list({}).then((res) => {
    console.log(res, 'res-----------');
    fanLocalList.length = 0
    fanLocalList.push(res.fanlocal)
    console.log(fanLocalList, '---------');
  });
}
  onMounted(() => {
    changeModalBox()
    const renderModal = () => {
      const element = document.getElementById('__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__')
      if(element){
        element?.setAttribute('style', 'width: 100%; height: 100%');
      }else{
        setTimeout(() => {
          renderModal()
        }, 2000)
      }
    }
    renderModal()
    timer = Number(
      setInterval(() => {
        getList();
      }, 3000)
    );
  })
</script>

<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }
  @font-face {
    font-family: 'yjsz';
    src: url('../../../../assets/font/yjsz.TTF');
  }
  .home-container {
    width: 100%;
    height: 100%;
    position: relative;
    .header {
      width: 100%;
      height: 76px;
      position: relative;
      background: url('../../../../assets//images//home-container/header-nav.png') no-repeat;
      .head-time {
        position: absolute;
        top: 14px;
        left: 15px;
        color: #b5c9e9;
        font-size: 14px;
        span {
          margin-right: 20px;
          letter-spacing: 2px;
        }
      }
      .main-title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 24px;
        font-family: 'douyuFont';
      }
    }
    .home-contents {
      display: flex;
      justify-content: space-between;
      height: calc(100% - 76px);
      padding: 10px;
      box-sizing: border-box;
      .left-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: space-between;
        height: 100%;
        .monitor-box {
          display: flex;
          flex: 1;
          width: 100%;
          background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
          background-size: 100% 100%;
        }
        .monitor-box1 {
          margin: 15px 0px;
        }
      }
      .center-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 2;
        height: 100%;
        margin: 0px 10px;
        .three-box {
          position: relative;
          display: flex;
          background-color: #fff;
          flex: 2;
          width: 100%;
          margin-bottom: 15px;
          background: url('../../../../assets/images/home-container/three-dialog.png') no-repeat;
          background-size: 100% 100%;
          .three-nav {
            position: absolute;
            left: 50%;
            top: 38px;
            transform: translate(-50%, 0);
            width: 812px;
            height: 89px;
            padding: 0px 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: url('../../../../assets/images/home-container/three-nav.png') no-repeat;
            .nav-item {
              display: flex;
              flex: 1;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;
              height: 80%;
              .item-label {
                color: #98f5ff;
              }
              .item-value {
                position: relative;
                width: 125px;
                height: 37px;
                padding: 0px 5px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: url('../../../../assets/images/home-container/item-value.png') no-repeat;
                .bg-box {
                  position: relative;
                  width: 20px;
                  height: 26px;
                  border-bottom: 2px solid #063493;
                  background: linear-gradient(to right, rgba(1, 194, 249), rgba(0, 125, 252));
                  .box-line {
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translate(0, -50%);
                    height: 1px;
                    width: 100%;
                    background-color: rgba(6, 52, 147, 0.6);
                  }
                  .value-text {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: #fff;
                    font-size: 22px;
                    font-family: 'yjsz';
                    font-weight: 500;
                  }
                }
                .value-text1 {
                  width: 100%;
                  text-align: center;
                  color: #fff;
                  font-size: 22px;
                  font-family: 'yjsz';
                  font-weight: 500;
                }
              }
            }
          }
          .three-modal {
            width: 100%;
            height: 100%;
            padding: 20px 17px 20px 15px;
            box-sizing: border-box;
          }
        }
        .wind-box {
          display: flex;
          flex: 1;
          width: 100%;
          background: url('../../../../assets/images/home-container/dialog1.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      .right-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: 100%;
        .monitor-box {
          display: flex;
          flex: 1;
          width: 100%;
          background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
          background-size: 100% 100%;
        }
        .monitor-box1 {
          margin: 15px 0px;
        }
      }
    }
    
  }
  
  // #__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__{
  //   width: 100% !important;
  //   height: 100% !important;
  // }
</style>