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

<template>
  <div class="scene-box">
    <template v-if="isShow && routerParam !== 'timesolution' && routerParam !== 'home' && routerParam !== 'model3D' && routerParam !== 'none'">
      <!-- <Emergency ref="NetworkRef" v-if="deviceKind === 'emergency'" :pageResult="pageResult" @changePageType="changePageType" />
      <DeviceVue ref="DeviceRef" v-else :pageData="pageData" /> -->
      <DeviceVue ref="DeviceRef" :pageData="pageData" />
    </template>
    <Network ref="NetworkRef" v-if="routerParam === 'timesolution'" :pageResult="pageResult" @changePageType="changePageType" />
    <VentModal style="width: 100%; height: 100%; position: absolute" />
  </div>
</template>

<script setup lang="ts" name="device-monitor">
  import { ref, onMounted, watch, onUnmounted, onBeforeUnmount } from 'vue';
  import DeviceVue from './components/device/index.vue';
  import Network from './components/network/index.vue';
  import Emergency from './components/emergency/index.vue';
  import { unmountMicroApps } from '/@/qiankun';
  import { getActions } from '/@/qiankun/state';
  import { useRoute } from 'vue-router';
  import VentModal from '/@/components/vent/micro/ventModal.vue';

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

  const DeviceRef = ref(null);
  const NetworkRef = ref(null);
  const isShow = ref(true);
  const routerParam = ref('home');
  const deviceKind = ref('');
  const pageData = ref({});
  const pageResult = ref({});

  const changePageType = (pageType) => {
    routerParam.value = pageType;
    // actions.setGlobalState({ pageObj: { pageType: pageType } });
  };

  watch(
    () => route.fullPath,
    () => {
      const { type, deviceType, deviceid } = route.query;
      if (type === 'tunMonitor') {
        pageResult.value = {};
        setTimeout(
          () => {
            routerParam.value = 'tunMonitor';
            pageData.value = { deviceType: deviceType, deviceid };
          },
          routerParam.value == 'home' ? 2000 : 0
        );
      } else if (type === 'timesolution') {
        routerParam.value = 'timesolution';
        pageData.value = {};
      } else if (!type) {
        routerParam.value = 'home';
        pageData.value = {};
      } else {
        setTimeout(() => {
          routerParam.value = 'none';
          pageData.value = {};
        }, 3000);
      }
    }
  );

  onMounted(() => {
    const { type, deviceType, topage, deviceid } = route.query;
    deviceKind.value = deviceType as string;
    if (!topage) {
      isShow.value = true;
      if (type === 'timesolution') {
        routerParam.value = 'timesolution';
      } else if (type === 'tunMonitor') {
        routerParam.value = 'tunMonitor';
        if (deviceType) {
          pageData.value = { pageType: deviceType, deviceid };
        }
      } else {
        routerParam.value = 'home';
      }
    } else {
      isShow.value = false;
    }
    actions.onGlobalStateChange((newState) => {
      const pageObj = newState['pageObj'];
      if (pageObj && pageObj.pageType) {
        if (pageObj.timesolution) {
          pageResult.value = pageObj.timesolution;
        }
      }
    });
  });
  onBeforeUnmount(() => {
    unmountMicroApps(['/micro-vent-3dModal']);
  });
  onUnmounted(() => {
    isShow.value = false;
  });
</script>

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

  .scene-box {
    --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
    --image-tree-icon-bg: url('/@/assets/images/vent/home/tree-icon-bg.png');
    --image-tree-icon-hover-bg: url('/@/assets/images/vent/home/tree-icon-hover-bg.png');
    --image-tree-bg: url('/@/assets/images/vent/home/tree-bg.png');
    --image-tree-expansion-bg: url('/@/assets/images/vent/home/tree-expansion-bg.png');
    --image-tree-expansion-hover-bg: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png');
    --image-location-bg: url('/@/assets/images/vent/home/location-bg.png');
    --image-location-hover-bg: url('/@/assets/images/vent/home/location-hover-bg.png');
    --image-turn-location-top-bg: url('/@/assets/images/vent/home/turn-location-top-bg.png');
    --image-tree-icon-cover-bg: url('/@/assets/images/vent/home/tree-icon-cover-bg.png');
    --image-tree-icon-cover-hover-bg: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png');
    --image-tosmall: url('/@/assets/images/vent/home/tosmall.png');
  }

  .device-header {
    position: fixed;
    width: 100%;
    height: 56px;
    background: var(--image-modal-top);
    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: var(--image-tree-icon-bg) no-repeat;
    background-size: contain;
    position: absolute;
    left: 190px;
    top: 25px;

    &:hover {
      background: var(--image-tree-icon-hover-bg) no-repeat;
      background-size: contain;
    }
  }

  .device-select {
    width: 250px;
    height: 500px;
    background: var(--image-tree-bg) 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) 0.5s;
  }

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

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

    &:hover {
      background: var(--image-tree-expansion-hover-bg) 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) 0.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;
    background: var(--image-location-bg) no-repeat;
    background-size: contain;
    writing-mode: vertical-lr;
    line-height: 46px;
    color: #fff;
    padding-top: 10px;
    pointer-events: auto;
    cursor: pointer;

    &:hover {
      background: var(--image-location-hover-bg) no-repeat;
    }

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

  .location-select {
    position: fixed;
    top: 60px;
    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: var(--image-tree-bg) no-repeat;
        background-size: contain;
        transform: rotateY(180deg);
        z-index: -1;
      }

      .location-top-title {
        color: #fff;
        position: absolute;
        width: 225px;
        height: 68px;
        background: var(--image-turn-location-top-bg) 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: var(--image-tree-icon-cover-bg) no-repeat;
        background-size: contain;
        position: relative;
        left: 10px;
        top: -15px;
        padding: 5px;

        &:hover {
          background: var(--image-tree-icon-cover-hover-bg) 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) 0.5s;
  }

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

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

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

  .bottom-tabs-box {
    position: relative;

    .to-small {
      width: 60px;
      height: 60px;
      background: var(--image-tosmall) 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) {
    height: 100%;
  }

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