1

src/views/vent/monitorManager/deviceMonitor/index1.vue

@@ -0,0 +1,655 @@
+<template>
+  <div class="scene-box" >
+    <DeviceVue ref="DeviceRef" :pageData="pageData" />
+  </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 { onBeforeUnmount } from 'vue';
+
+
+const route = useRoute()
+const actions = getActions();
+
+const DeviceRef = ref(null)
+const NetworkRef = ref(null)
+
+const routerParam = ref('home')
+const pageData = ref({})
+const pageResult = ref({})
+const { type, deviceType } = route.query
+
+// 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(() => {
+
+
+  // nextTick(() => {
+    
+  //   if (type === 'network') {
+  //     routerParam.value = 'network'
+  //     actions.setGlobalState({ pageObj: { pageType: 'network' } });
+  //   } else if (type === 'home') {
+  //     actions.setGlobalState({ pageObj: { pageType: 'home' } });
+  //   }
+  //   else if (type === 'tunMonitor') {
+  //     if (deviceType) {
+  //       pageData.value = { pageType: deviceType }
+  //       actions.setGlobalState({ pageObj: { pageType: deviceType } });
+  //     }
+  //   }
+  //   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
+  //           }
+  //         }
+  //       }
+  //     }
+  //   })
+  // })
+})
+
+</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>