vent-template/src/views/vent/monitorManager/deviceMonitor/index.vue

<template>
  <div class="scene-box" >
    <DeviceVue ref="DeviceRef" v-if="routerParam !== 'home' && routerParam !== 'timesolution' && routerParam !== 'model3D'" :pageData="pageData" />
    <Network ref="NetworkRef" v-if="routerParam === 'timesolution'" :pageResult="pageResult" @changePageType="changePageType"/>
  </div>
  <div id="vent-model" style="width: 100%; height: 100%; position: absolute"></div>
</template>

<script setup lang="ts">
import { ref, onUnmounted, onMounted, nextTick, watch } from 'vue';
import DeviceVue from './components/device/index.vue';
import Network from './components/network/index.vue'
import { getActions } from '/@/qiankun/state';
import { useRoute } from 'vue-router';
import { unmountMicroApps, mountMicroApp } from '/@/qiankun'
import { onBeforeUnmount } from 'vue';
import { resetMicroContentWH } from '/@/utils/domUtils'

const route = useRoute()
const actions = getActions();

const DeviceRef = ref(null)
const NetworkRef = ref(null)

const routerParam = ref('home')
const pageData = ref({})
const pageResult = ref({})

// actions.setGlobalState({ url: { path: '/micro-vent-3dModal/dashboard/analysis', query: { type, deviceType } } });

const changePageType = (pageType) => {
  console.log('页面类型', pageType)
  routerParam.value = pageType
  actions.setGlobalState({ pageObj: { pageType: pageType } });
}

watch(() => route.fullPath, (fullPath) => {
  // const { type, deviceType } = routeVal.query
  // if (type === 'tunMonitor') {
  //   pageData.value = { pageType: deviceType }
  //   actions.setGlobalState({ pageObj: { pageType: deviceType } });
  // }
  console.log('fullPath------------------->', fullPath)
})

onMounted(() => {
  const { type, deviceType } = route.query
  mountMicroApp('/micro-vent-3dModal')

  if (type === 'network') {
    routerParam.value = 'network'
    actions.setGlobalState({ pageObj: { pageType: 'network' } });
  }else if (type === 'tunMonitor') {
    if (deviceType) {
      pageData.value = { pageType: deviceType }
      actions.setGlobalState({ pageObj: { pageType: deviceType } });
    }
  }else{
    routerParam.value = 'home'
    actions.setGlobalState({ pageObj: { pageType: 'home' } });
  }
  actions.onGlobalStateChange((newState) => {
    for (const key in newState) {
      if (key === 'pageObj') {
        const pageObj = newState[key]
        if (pageObj && pageObj.pageType) {
          routerParam.value = pageObj.pageType
          pageData.value = pageObj
          console.log('页面参数类型----------->', pageData.value, routerParam.value, pageObj)
          if (pageObj.timesolution) {
            pageResult.value = pageObj.timesolution
          }
        }
      }
    }
  })

  resetMicroContentWH('vent-model')
})

onBeforeUnmount(async() => {
  unmountMicroApps(['/micro-vent-3dModal'])
  const microDom = document.getElementById('vent-model')
  if(microDom){
    microDom.innerHTML = ''
  }
})

</script>

<style lang="less" scoped >
@import '/@/design/vent/modal.less';
@ventSpace: zxm;

.device-header {
  position: fixed;
  width: 100%;
  height: 56px;
  background: url('/@/assets/images/vent/home/modal-top.png');
  text-align: center;
  line-height: 56px;
  font-size: 28px;
  color: #ffffffdd;
  font-weight: 600;
  z-index: -1;
}

.select-node {
  position: fixed;
  top: 60px;
  left: 10px;
  color: #fff;
  display: flex;
  justify-content: center;
  font-size: 22px;

  .title {
    margin-left: 10px;
  }
}

.expansion-icon {
  background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
  background-size: contain;
  position: absolute;
  left: 190px;
  top: 25px;

  &:hover {
    background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
    background-size: contain;
  }
}

.device-select {
  width: 250px;
  height: 500px;
  background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
  position: fixed;
  top: 60px;
  left: 10px;
  background-size: contain;
  pointer-events: auto;
  padding: 20px 10px 30px 10px;

}

.is-expansion-icon {
  padding: 5px;
  pointer-events: auto;
  z-index: 999;
}

.device-select-show {
  left: 10px;
  animation-name: treeShow;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;

}

.device-select-hide {
  left: -250px;
  animation-name: treeHide;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.node-select-show {
  width: 276px;
  height: 44px;
  background: url('/@/assets/images/vent/home/tree-expansion-bg.png') no-repeat;
  left: 10px;
  animation-name: treeShow;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
  display: flex;
  align-items: center;
  margin-left: 0;
  justify-content: flex-start;
  pointer-events: auto;

  &:hover {
    background: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png') no-repeat;
  }

  .put-away-icon {
    position: relative;
    display: inline-block;
    left: 4px;
  }
}

.node-select-hide {
  left: -400px;
  animation-name: treeHide;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.device-select-box {
  width: 208px;
  height: 450px;
  overflow-y: auto;
  color: #fff;

  :deep(.zxm-tree) {
    background: transparent !important;
    color: #fff !important;

    .zxm-tree-switcher {
      background: transparent !important;
    }

    .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
      background-color: #00b1c8;
    }

    .zxm-tree-node-content-wrapper:hover {
      background-color: #00b1c855;
    }

    input {
      height: 0px !important;
    }
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed22;
    height: 100px;
  }

  &::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #4288A444;
  }
}

.location-icon {
  width: 46px;
  height: 178px;
  position: absolute;
  top: 60px;
  // right: 0;
  background: url('/@/assets/images/vent/home/location-bg.png') no-repeat;
  background-size: contain;
  writing-mode: vertical-lr;
  line-height: 46px;
  color: #fff;
  padding-top: 10px;
  pointer-events: auto;
  cursor: pointer;

  &:hover {
    background: url('/@/assets/images/vent/home/location-hover-bg.png') no-repeat;
  }

  .location-text {
    padding-top: 20px;
    letter-spacing: 3px;
    font-size: 16px;
  }
}

.location-select {
  position: fixed;
  top: 60px;
  // right: 240px;
  pointer-events: auto;

  .location-select-box {
    width: 100%;
    height: 100%;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      width: 230px;
      height: 500px;
      top: 0;
      left: 0;
      background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
      background-size: contain;
      transform: rotateY(180deg);
      z-index: -1;
      // &:hover {
      //   background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
      //   background-size: contain;
      // }
    }

    .location-top-title {
      color: #fff;
      position: absolute;
      width: 225px;
      height: 68px;
      background: url('/@/assets/images/vent/home/turn-location-top-bg.png') no-repeat;
      background-size: contain;
      top: 5px;
      left: 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;

      .title {
        font-size: 18px;
        position: relative;
        top: -14px;
        right: 15px;
      }
    }

    .location-expansion-icon {
      background: url('/@/assets/images/vent/home/tree-icon-cover-bg.png') no-repeat;
      background-size: contain;
      position: relative;
      left: 10px;
      top: -15px;
      padding: 5px;

      &:hover {
        background: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png') no-repeat;
        background-size: contain;
      }
    }
  }

  .location-container {
    width: 200px;
    height: 390px;
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 80px;
    left: 18px;
    overflow-y: auto;

    .location-item {
      color: #fff;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
      margin: 3px 0;

      .item-title {
        width: 80px;
        text-align: right;
        color: #87f1ff;
      }
    }

    .location-bottom-btn {
      width: 100%;
      color: #fff;
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;

      span {
        display: inline-block;
        width: 100%;
        background: #00709955;
        border-radius: 3px;
        border: 1px solid rgba(174, 243, 255, 0.3);
        text-align: center;
        padding: 2px 0;
        cursor: pointer;

        &:hover {
          background: #00557422;
        }
      }
    }
  }
}

.location-select-show {
  right: 240px;
  animation-name: locationShow;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.location-select-hide {
  right: -2px;
  animation-name: locationHide;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.location-btn-show {
  right: -0px;
  animation-name: locationBtnShow;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.location-btn-hide {
  right: -240px;
  animation-name: locationBtnHide;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.bottom-tabs-box {

  position: relative;

  .to-small {
    width: 60px;
    height: 60px;
    background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
    background-size: auto;
    position: absolute;
    top: -65px;
    right: 36px;
    border-radius: 10px;
    padding: 8px;
    backdrop-filter: blur(10px);
    background-color: rgba(45, 86, 137, 0.418);

    &:hover {
      background-color: rgba(79, 104, 134, 0.418);
    }
  }

  .device-button-group {
    position: absolute;
    top: -30px;
    display: flex;
    width: 100%;

    .device-button {
      height: 26px;
      padding: 0 20px;
      background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
      clip-path: polygon(10px 0,
          0 50%,
          10px 100%,
          100% 100%,
          calc(100% - 10px) 50%,
          100% 0);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFF;
      position: relative;
      cursor: pointer;

      &:nth-child(1) {
        left: calc(-6px * 1);
      }

      &:nth-child(2) {
        left: calc(-6px * 2);
      }

      &:nth-child(3) {
        left: calc(-6px * 3);
      }

      &:nth-child(4) {
        left: calc(-6px * 4);
      }

      &:nth-child(5) {
        left: calc(-6px * 5);
      }

      &:nth-child(6) {
        left: calc(-6px * 6);
      }

      &:nth-child(7) {
        left: calc(-6px * 7);
      }

      &:nth-child(8) {
        left: calc(-6px * 8);
      }

      &:nth-child(9) {
        left: calc(-6px * 9);
      }

      &:nth-child(10) {
        left: calc(-6px * 10);
      }

      &:nth-child(11) {
        left: calc(-6px * 11);
      }

      &:nth-child(12) {
        left: calc(-6px * 12);
      }

      &:nth-child(13) {
        left: calc(-6px * 13);
      }

      &:nth-child(14) {
        left: calc(-6px * 14);
      }

      &:nth-child(15) {
        left: calc(-6px * 15);
      }

      &:first-child {
        clip-path: polygon(0 0,
            10px 50%,
            0 100%,
            100% 100%,
            calc(100% - 10px) 50%,
            100% 0);
      }

    }

    .device-active {
      background: linear-gradient(45deg, #04e6fb, #0c5cab);

      &::before {
        border-color: #0efcff;
        box-shadow: 1px 1px 3px 1px #0efcff inset;
      }
    }
  }

  .enter-detail {
    color: #fff;
    cursor: pointer;
    position: absolute;
    right: 120px;
    top: -6px;
    padding: 5px;
    border-radius: 5px;
    margin-left: 8px;
    margin-right: 8px;
    width: auto;
    height: 33px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 5px 15px 5px 15px;
    cursor: pointer;

    &:hover {
      background: linear-gradient(#2cd1ff55, #1eb0ff55);
    }

    &::before {
      width: calc(100% - 6px);
      height: 27px;
      content: '';
      position: absolute;
      top: 3px;
      right: 0;
      left: 3px;
      bottom: 0;
      z-index: -1;
      border-radius: inherit;
      /*important*/
      background: linear-gradient(#1fa6cb, #127cb5);
    }
  }
}

@keyframes treeShow {
  0% {
    left: -400px;
    opacity: 0;
  }

  100% {
    left: 10px;
    opacity: 1;
  }
}

@keyframes treeHide {
  0% {
    left: 10px;
    opacity: 1;
  }

  100% {
    left: -400px;
    opacity: 0;
  }
}

@keyframes locationShow {
  0% {
    right: 0px;
    opacity: 0;
  }

  100% {
    right: 240px;
    opacity: 1;
  }
}

@keyframes locationHide {
  0% {
    right: 240px;
    opacity: 1;
  }

  100% {
    right: 0;
    opacity: 0;
  }
}

@keyframes locationBtnShow {
  0% {
    right: -240px;
    opacity: 0;
  }

  100% {
    right: -2px;
    opacity: 1;
  }
}

@keyframes locationBtnHide {
  0% {
    right: -2px;
    opacity: 1;
  }

  100% {
    right: -240px;
    opacity: 0;
  }
}

:deep(.@{ventSpace}-tabs-tabpane-active) {
  // overflow: auto;
  height: 100%;
}

:deep(.zxm-select-dropdown) {
  left: 0 !important;
  color: #000000 !important;
}</style>