Home Explore Help
Register Sign In
hrx
/
mky-vent-5
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

添加热点、设备详情

hrx 2 years ago
parent
4d5141cd6f
commit
d6893bdabf
35 changed files with 1131 additions and 413 deletions
Split View Show Diff Stats
  1. 2 1
      build/config/themeConfig.ts
  2. 158 5
      index.html
  3. BIN
      src/assets/images/hot-point.png
  4. BIN
      src/assets/images/link.png
  5. BIN
      src/assets/images/vent/bg1.png
  6. BIN
      src/assets/images/vent/device-detail-card.png
  7. BIN
      src/assets/images/vent/device-left-bg.png
  8. BIN
      src/assets/images/vent/header-bg.png
  9. BIN
      src/assets/images/vent/header-bg1.png
  10. BIN
      src/assets/images/vent/loading-bg.png
  11. 5 1
      src/components/Container/src/Adaptive.vue
  12. 3 2
      src/design/vent/antCss.less
  13. 3 0
      src/design/vent/color.less
  14. 91 16
      src/design/vent/index.less
  15. 172 20
      src/design/vent/modal.less
  16. 36 8
      src/hooks/core/threejs/useThree.ts
  17. 9 3
      src/layouts/default/content/index.vue
  18. 19 0
      src/store/modules/app.ts
  19. 44 85
      src/utils/threejs/util.ts
  20. 27 22
      src/views/vent/deviceManager/comment/NormalTable.vue
  21. 3 2
      src/views/vent/monitorManager/comment/DeviceEcharts.vue
  22. 70 54
      src/views/vent/monitorManager/comment/GroupMonitorTable.vue
  23. 2 23
      src/views/vent/monitorManager/comment/HistoryTable.vue
  24. 9 4
      src/views/vent/monitorManager/comment/MonitorTable.vue
  25. 45 2
      src/views/vent/monitorManager/fanLocalMonitor/fanLocal.three.ts
  26. 4 2
      src/views/vent/monitorManager/fanLocalMonitor/index.vue
  27. 4 1
      src/views/vent/monitorManager/gateMonitor/gate.api.ts
  28. 109 39
      src/views/vent/monitorManager/gateMonitor/gate.threejs.ts
  29. 42 20
      src/views/vent/monitorManager/gateMonitor/index.vue
  30. 174 84
      src/views/vent/monitorManager/mainFanMonitor/index.vue
  31. 75 1
      src/views/vent/monitorManager/mainFanMonitor/main.threejs.ts
  32. 20 14
      src/views/vent/monitorManager/mainFanMonitor/mainWind.threejs.ts
  33. 3 2
      src/views/vent/monitorManager/sensorMonitor/index.vue
  34. 1 1
      src/views/vent/monitorManager/windowMonitor/index.vue
  35. 1 1
      src/views/vent/monitorManager/windrectMonitor/index.vue

+ 2 - 1
build/config/themeConfig.ts
View File 

@@ -1,6 +1,7 @@
 
 import { generate } from '@ant-design/colors';
 
 
-export const primaryColor = '#1890FF';
 
+// export const primaryColor = '#1890FF'; // 335189
 
+export const primaryColor = '#1580cc'; // 335189
 
 
 // export const darkMode = 'light';
 
 export const darkMode = 'vent1';

+ 158 - 5
index.html
View File 

@@ -13,7 +13,7 @@
 
     </script>
 
     <script src="/js/liveplayer-lib.min.js"></script>
 
   </head>
 
-  <body>
 
+  <body style="background-color: #00144b">
 
     <script>
 
       (() => {
 
         var htmlRoot = document.getElementById('htmlRoot');
 
@@ -40,7 +40,11 @@
 
           justify-content: center;
 
           align-items: center;
 
           flex-direction: column;
 
-          background-color: #f4f7f9;
 
+          /* background-color: #f4f7f9; */
 
+          background-image: url('./src/assets/images/vent/loading-bg.png');
 
+          background-size: cover;
 
+          background-repeat: no-repeat;
 
+          background-color: #00144b;
 
         }
 
 
         .app-loading .app-loading-wrap {
 
@@ -66,7 +70,7 @@
 
           display: flex;
 
           margin-top: 30px;
 
           font-size: 30px;
 
-          color: rgba(0, 0, 0, 0.85);
 
+          color: rgba(255, 255, 255, 0.85);
 
           justify-content: center;
 
           align-items: center;
 
         }
 
@@ -150,12 +154,161 @@
 
             opacity: 1;
 
           }
 
         }
 
+
 
+        #cssLoader1.main-wrap .child-common {
 
+          width: 8px;
 
+          height: 50px;
 
+          margin-right: 5px;
 
+          /* margin-right: 3px; */
 
+          background-color: #3df7ff;
 
+          -webkit-animation: animate1 1s infinite;
 
+          animation: animate1 1s infinite;
 
+          float: left;
 
+        }
 
+
 
+        #cssLoader1.main-wrap .child1 {
 
+          margin-right: 5px;
 
+        }
 
+
 
+        #cssLoader1.main-wrap .child10 {
 
+          -webkit-animation-delay: 0.9s;
 
+          animation-delay: 0.9s;
 
+        }
 
+
 
+        #cssLoader1.main-wrap .child9 {
 
+          -webkit-animation-delay: 0.8s;
 
+          animation-delay: 0.8s;
 
+        }
 
+
 
+        #cssLoader1.main-wrap .child8 {
 
+          -webkit-animation-delay: 0.7s;
 
+          animation-delay: 0.7s;
 
+        }
 
+
 
+        #cssLoader1.main-wrap .child7 {
 
+          -webkit-animation-delay: 0.6s;
 
+          animation-delay: 0.6s;
 
+        }
 
+
 
+        #cssLoader1.main-wrap .child6 {
 
+          -webkit-animation-delay: 0.5s;
 
+          animation-delay: 0.5s;
 
+        }
 
+
 
+        #cssLoader1.main-wrap .child5 {
 
+          -webkit-animation-delay: 0.4s;
 
+          animation-delay: 0.4s;
 
+        }
 
+
 
+        #cssLoader1.main-wrap .child4 {
 
+          -webkit-animation-delay: 0.3s;
 
+          animation-delay: 0.3s;
 
+        }
 
+
 
+        #cssLoader1.main-wrap .child3 {
 
+          -webkit-animation-delay: 0.2s;
 
+          animation-delay: 0.2s;
 
+        }
 
+
 
+        #cssLoader1.main-wrap .child2 {
 
+          -webkit-animation-delay: 0.1s;
 
+          animation-delay: 0.1s;
 
+        }
 
+
 
+        @-webkit-keyframes animate1 {
 
+          50% {
 
+            -ms-transform: scaleY(0);
 
+            -webkit-transform: scaleY(0);
 
+            transform: scaleY(0);
 
+          }
 
+        }
 
+
 
+        @keyframes animate1 {
 
+          50% {
 
+            -ms-transform: scaleY(0);
 
+            -webkit-transform: scaleY(0);
 
+            transform: scaleY(0);
 
+          }
 
+        }
 
+        /*loader1 css ends*/
 
+
 
+        cssLoader17 {
 
+          position: relative;
 
+          width: 2.5em;
 
+          height: 2.5em;
 
+          transform: rotate(165deg);
 
+        }
 
+        .cssLoader17:before,
 
+        .cssLoader17:after {
 
+          content: '';
 
+          position: absolute;
 
+          top: 50%;
 
+          left: 50%;
 
+          display: block;
 
+          width: 0.5em;
 
+          height: 0.5em;
 
+          border-radius: 0.25em;
 
+          transform: translate(-50%, -50%);
 
+        }
 
+        .cssLoader17:before {
 
+          animation: before 2s infinite;
 
+        }
 
+        .cssLoader17:after {
 
+          animation: after 2s infinite;
 
+        }
 
+
 
+        @keyframes before {
 
+          0% {
 
+            width: 0.5em;
 
+            box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 
+          }
 
+          35% {
 
+            width: 2.5em;
 
+            box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
 
+          }
 
+          70% {
 
+            width: 0.5em;
 
+            box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
 
+          }
 
+          100% {
 
+            box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 
+          }
 
+        }
 
+        @keyframes after {
 
+          0% {
 
+            height: 0.5em;
 
+            box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 
+          }
 
+          35% {
 
+            height: 2.5em;
 
+            box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
 
+          }
 
+          70% {
 
+            height: 0.5em;
 
+            box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
 
+          }
 
+          100% {
 
+            box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 
+          }
 
+        }
 
       </style>
 
       <div class="app-loading">
 
         <div class="app-loading-wrap">
 
-          <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
 
-          <div class="app-loading-dots">
 
+          <!-- <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" /> -->
 
+          <!-- <div class="app-loading-dots">
 
             <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
 
+          </div> -->
 
+          <div id="cssLoader1" class="main-wrap">
 
+            <div class="child-common child1"></div>
 
+            <div class="child-common child2"></div>
 
+            <div class="child-common child3"></div>
 
+            <div class="child-common child4"></div>
 
+            <div class="child-common child5"></div>
 
+            <div class="child-common child6"></div>
 
+            <div class="child-common child7"></div>
 
+            <div class="child-common child8"></div>
 
+            <div class="child-common child9"></div>
 
+            <div class="child-common child10"></div>
 
           </div>
 
           <div class="app-loading-title"><%= title %></div>
 
         </div>

BIN
src/assets/images/hot-point.png
View File


BIN
src/assets/images/link.png
View File


BIN
src/assets/images/vent/bg1.png
View File


BIN
src/assets/images/vent/device-detail-card.png
View File


BIN
src/assets/images/vent/device-left-bg.png
View File


BIN
src/assets/images/vent/header-bg.png
View File


BIN
src/assets/images/vent/header-bg1.png
View File


BIN
src/assets/images/vent/loading-bg.png
View File


+ 5 - 1
src/components/Container/src/Adaptive.vue
View File 

@@ -9,13 +9,15 @@
 
 <script>
 
   import { ref, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
 
   import { debounce, setRem } from '/@/utils/index';
 
-
 
+  import { useAppStore } from '/@/store/modules/app';
 
   export default defineComponent({
 
     name: 'AdaptiveContainer',
 
     props: {
 
       options: Object,
 
     },
 
     setup(ctx) {
 
+      const appStore = useAppStore();
 
+
 
       const refName = 'AdaptiveContainer'; //AdaptiveContainer
 
       // 屏幕宽度
 
       const width = ref(0);
 
@@ -82,6 +84,8 @@
 
         // 缩放比例  = 分辨率宽高 / 传入宽高(可视宽高)
 
         const widthScale = currentWidth / realWidth;
 
         const heightScale = currentHeight / realHeight;
 
+        appStore.setWidthScale(widthScale);
 
+        appStore.setHeightScale(heightScale);
 
         //如果dom存在,就按照比例缩放
 
         dom && (dom.style.transform = `scale(${widthScale}, ${heightScale})`);
 
       };

+ 3 - 2
src/design/vent/antCss.less
View File 

@@ -95,8 +95,9 @@
 
   background: @vent-table-hover !important;
 
 }
 
 .ant-table-tbody > tr > td {
 
-  border-color: @vent-table-hover !important;
 
-  background: @vent-transparent !important;
 
+  // border-color: @vent-table-hover !important;
 
+  border-color: #39e8ff33 !important;
 
+  background: @vent-table-no-hover !important;
 
   transition: background 1s;
 
 }
 
 .ant-table-thead > tr > th:hover {

+ 3 - 0
src/design/vent/color.less
View File 

@@ -1,3 +1,6 @@
 
 @vent-transparent: #ffffff00;
 
 @vent-font-color: #ffffff;
 
 @vent-table-hover: #ffffff22;
 
+@vent-table-hover: #0dc3ff22;
 
+@vent-table-no-hover: #00bfff10;
 
+@vent-form-item-boder: #3ad8ff77;

+ 91 - 16
src/design/vent/index.less
View File 

@@ -7,6 +7,29 @@
 
   background-color: #03114c !important;
 
   // background-color: #031d4c !important; //031d4c
 
 }
 
+/* 按钮 */
 
+.ant-btn-primary {
 
+  border-color: #91e9fe !important;
 
+  background: #275088 !important;
 
+  &:hover,
 
+  &:focus {
 
+    background: #27508899 !important;
 
+    border-color: #91e9fe99 !important;
 
+  }
 
+}
 
+
 
+.ant-btn-link {
 
+  color: #00e7ff !important;
 
+  &:hover,
 
+  &:focus {
 
+    background: none !important;
 
+    border: none !important;
 
+  }
 
+  .anticon {
 
+    color: #fff !important;
 
+  }
 
+}
 
+
 
 /* 表单 */
 
 .vent-form {
 
   .ant-form {
 
@@ -28,14 +51,14 @@
 
       .ant-input-number-handler-wrap {
 
         color: #fff;
 
         // background-color: #ffffff17 !important;
 
-        border: 1px solid #b7b7b74f !important;
 
+        border: 1px solid @vent-form-item-boder !important;
 
       }
 
       .ant-picker,
 
       .ant-select-selector {
 
         width: 100%;
 
         color: #fff !important;
 
         // background: #ffffff17 !important;
 
-        border: 1px solid #b7b7b74f !important;
 
+        border: 1px solid @vent-form-item-boder !important;
 
       }
 
     }
 
     .ant-select-multiple {
 
@@ -61,7 +84,7 @@
 
     .ant-input-number {
 
       width: 100%;
 
       .ant-input-number-input-wrap {
 
-        border: 1px solid #b7b7b74f !important;
 
+        border: 1px solid @vent-form-item-boder !important;
 
       }
 
     }
 
 
@@ -105,6 +128,11 @@
 
         color: #fff !important;
 
       }
 
     }
 
+    .ant-btn-link {
 
+      .anticon {
 
+        color: #fff !important;
 
+      }
 
+    }
 
   }
 
 }
 
 .vent-modal {
 
@@ -112,6 +140,7 @@
 
     background-color: #03114c !important;
 
   }
 
 }
 
+
 
 // .jeecg-basic-table-form-container .ant-form {
 
 //   background-color: @vent-transparent !important;
 
 //   color: @vent-font-color !important;
 
@@ -124,13 +153,13 @@
 
 //   .ant-input-number-handler-wrap {
 
 //     color: #fff;
 
 //     background-color: #ffffff17 !important;
 
-//     border: 1px solid #b7b7b74f !important;
 
+//     border: 1px solid @vent-form-item-boder !important;
 
 //   }
 
 //   .ant-picker,
 
 //   .ant-select-selector {
 
 //     color: #fff !important;
 
 //     background: #ffffff17 !important;
 
-//     border: 1px solid #b7b7b74f !important;
 
+//     border: 1px solid @vent-form-item-boder !important;
 
 //   }
 
 //   .anticon,
 
 //   input,
 
@@ -299,21 +328,67 @@
 
   background-color: #ffffff11;
 
   // background-color: #00b3ff12;
 
   .ant-table-thead > tr > th {
 
-    color: #8ee3fa !important;
 
+    color: #fff !important;
 
     font-weight: 600;
 
   }
 
 }
 
 
-.ant-btn-primary {
 
-  border-color: #91e9fe !important;
 
-  background: #275088 !important;
 
+/** 表格样式*/
 
+.ant-table-tbody {
 
+  tr.ant-table-row-selected {
 
+    td {
 
+      background: @vent-table-no-hover !important;
 
+    }
 
+  }
 
+  tr > td {
 
+    background-color: @vent-table-no-hover !important;
 
+  }
 
+  & > tr:hover.ant-table-row > td {
 
+    background-color: @vent-table-hover !important;
 
+  }
 
+  .ant-table-cell-row-hover {
 
+    background: @vent-table-hover !important;
 
+  }
 
 }
 
-
 
-.ant-btn:hover,
 
-.ant-btn:focus {
 
-  background: #27508899 !important;
 
-  border-color: #91e9fe99 !important;
 
+.jeecg-basic-table-row__striped {
 
+  td {
 
+    background-color: @vent-table-no-hover !important;
 
+  }
 
 }
 
-.ant-btn-link {
 
-  color: #00e7ff !important;
 
+.ant-table-thead {
 
+  // background: linear-gradient(#003f77 0%, #004a86aa 10%) !important; //#003f77, #0a134c
 
+  background-color: #3d9dd45d !important;
 
+  & > tr > th,
 
+  .ant-table-column-title {
 
+    // color: #70f9fc !important;
 
+    color: #fff !important;
 
+    border-color: #91e9fe !important;
 
+    border-left: none !important;
 
+    // border-right: none !important;
 
+    &:last-child {
 
+      border-right: none !important;
 
+    }
 
+  }
 
+}
 
+
 
+.modal-container {
 
+  min-height: 100px;
 
+  padding: 20px;
 
+  .label {
 
+    margin-right: 15px;
 
+    font-size: 15px;
 
+    font-weight: 600;
 
+    color: #70e0f7;
 
+  }
 
+  .warning-text {
 
+    margin-left: 10px;
 
+    font-size: 16px;
 
+  }
 
+  .input-box {
 
+    margin-top: 20px;
 
+  }
 
+  .startSmoke-select {
 
+    display: flex;
 
+    margin: 15px 12px;
 
+  }
 
 }

+ 172 - 20
src/design/vent/modal.less
View File 

@@ -1,7 +1,8 @@
 
+@import './color.less';
 
 .bg {
 
   width: 100%;
 
   height: 100%;
 
-  background: url('/@/assets/images/vent/bg4.png') no-repeat;
 
+  background: url('/@/assets/images/vent/bg1.png') no-repeat;
 
   background-size: cover;
 
   //background-repeat: no-repeat;
 
   position: relative;
 
@@ -16,6 +17,7 @@
 
     background: #03114ccc;
 
   }
 
   .threejs-Object-CSS {
 
+    pointer-events: none;
 
     .elementContent {
 
       // background-color: rgb(20 143 221 / 40%);
 
       // box-shadow: 0px 0px 12px rgb(0 128 255 / 75%);
 
@@ -91,7 +93,103 @@
 
       }
 
     }
 
   }
 
+  .hot-point {
 
+    .status {
 
+      width: 30px;
 
+      height: 30px;
 
+      position: relative;
 
+      .animate1,
 
+      .animate2 {
 
+        background: #fff;
 
+        width: 30px;
 
+        height: 30px;
 
+        border-radius: 100%;
 
+        position: absolute;
 
+        left: 0;
 
+        top: 0;
 
+        z-index: 1;
 
+      }
 
+      .animate1 {
 
+        -webkit-animation: circle 2s 0s ease-out infinite running;
 
+        animation: circle 2s 0s ease-out infinite running;
 
+      }
 
+      .animate2 {
 
+        -webkit-animation: circle 2s 1s ease-out infinite running;
 
+        animation: circle 2s 1s ease-out infinite running;
 
+      }
 
+    }
 
+    @keyframes circle {
 
+      0% {
 
+        -webkit-transform: scale(1);
 
+        transform: scale(1);
 
+        opacity: 1;
 
+      }
 
+
 
+      100% {
 
+        -webkit-transform: scale(1.8);
 
+        transform: scale(1.8);
 
+        opacity: 0.1;
 
+      }
 
+    }
 
+    .solid {
 
+      width: 100%;
 
+      height: 100%;
 
+      position: absolute;
 
+      z-index: 999;
 
+      left: 0;
 
+      top: 0;
 
+      background: #fff;
 
+      border-radius: 100%;
 
+    }
 
+  }
 
+  .device-detail {
 
+    width: 100%;
 
+    height: 100%;
 
+    position: absolute;
 
+    overflow: hidden;
 
+    // pointer-events: none !important;
 
+    .device-card {
 
+      width: 329px;
 
+      height: 247px;
 
+      background: url('/@/assets/images/vent/device-detail-card.png') no-repeat;
 
+      background-size: 100%;
 
+      z-index: 99;
 
+      position: relative;
 
+      pointer-events: none;
 
+      .title {
 
+        color: #fff;
 
+        font-family: 'douyuFont';
 
+        text-align: center;
 
+        font-size: 12px;
 
+        padding-top: 15px;
 
+      }
 
+      .detail-box {
 
+        display: flex;
 
+        flex-direction: row;
 
+        .left-box {
 
+          width: 164px;
 
+          height: 152px;
 
+          background: url('/@/assets/images/vent/device-left-bg.png') no-repeat;
 
+          background-size: contain;
 
+          position: relative;
 
+          margin-top: 10px;
 
+        }
 
+        .right-box {
 
+          width: 165px;
 
+          height: 160px;
 
+          color: #ffffff99;
 
+          padding: 10px 10px 10px 0;
 
+          overflow-y: auto;
 
+          pointer-events: auto;
 
+          .detail-title {
 
+            color: #ffd80a;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
 }
 
+
 
 .scene-box {
 
   width: 100%;
 
   height: 100%;
 
@@ -167,7 +265,7 @@
 
         // color: rgb(0, 255, 242);// 64D5FF
 
       }
 
     }
 
-    .button-box {
 
+    :deep(.button-box) {
 
       position: relative;
 
       padding: 5px;
 
       // border: 1px transparent solid;
 
@@ -217,7 +315,7 @@
 
         z-index: 999;
 
       }
 
     }
 
-    .button-disable {
 
+    :deep(.button-disable) {
 
       border: 1px solid #66989e !important;
 
 
       &:hover {
 
@@ -226,9 +324,6 @@
 
       &::before {
 
         background: linear-gradient(#1fa6cbcc, #127cb5cc) !important;
 
       }
 
-      // &::after{
 
-      //   background: linear-gradient( #75c8ff55, #45d1fc55);
 
-      // }
 
     }
 
   }
 
   .title-text {
 
@@ -303,7 +398,7 @@
 
         margin-right: 10px;
 
       }
 
     }
 
-    .tabs-box {
 
+    :deep(.tabs-box) {
 
       position: absolute;
 
       width: calc(100% - 46px);
 
       bottom: 0;
 
@@ -345,18 +440,18 @@
 
       .ant-tabs-nav {
 
         margin-bottom: 0px !important;
 
       }
 
-    }
 
-    .ant-tabs-nav-wrap {
 
-      padding-left: 10px !important;
 
-    }
 
-    .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
 
-      color: #28f3f3 !important;
 
-    }
 
-    .ant-tabs-ink-bar {
 
-      background: #28f3f3;
 
-    }
 
-    .ant-tabs-top > .ant-tabs-nav::before {
 
-      border-color: #f0f0f022 !important;
 
+      .ant-tabs-nav-wrap {
 
+        padding-left: 10px !important;
 
+      }
 
+      .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
 
+        color: #28f3f3 !important;
 
+      }
 
+      .ant-tabs-ink-bar {
 
+        background: #28f3f3;
 
+      }
 
+      .ant-tabs-top > .ant-tabs-nav::before {
 
+        border-color: #f0f0f022 !important;
 
+      }
 
     }
 
   }
 
 }
 
@@ -444,7 +539,7 @@
 
   }
 
 }
 
 /* 模态框样式 */
 
-.modal-container {
 
+:deep(.modal-container) {
 
   min-height: 100px;
 
   padding: 20px;
 
   .label {
 
@@ -465,3 +560,60 @@
 
     margin: 15px 12px;
 
   }
 
 }
 
+
 
+:deep(.ant-table-thead) {
 
+  // background: linear-gradient(#003f77 0%, #004a86aa 10%); //#003f77, #0a134c
 
+  background-color: #3d9dd433 !important;
 
+  & > tr > th,
 
+  .ant-table-column-title {
 
+    // color: #70f9fc !important;
 
+    color: #39f2ff !important;
 
+    border-color: #91e9fe55 !important;
 
+    border-left: none !important;
 
+    // border-right: none !important;
 
+    &:last-child {
 
+      border-right: none !important;
 
+    }
 
+  }
 
+}
 
+:deep(.ant-table-tbody) {
 
+  tr.ant-table-row-selected {
 
+    td {
 
+      background: #007cc422 !important;
 
+    }
 
+  }
 
+  tr > td {
 
+    background: #007cc405 !important;
 
+  }
 
+}
 
+// .jeecg-basic-table-row__striped {
 
+//   // background: #97efff11 !important;
 
+//   td {
 
+//     background-color: #97efff00 !important;
 
+//     // background-color: @vent-table-hover !important;
 
+//   }
 
+// }
 
+
 
+:deep(.ant-form) {
 
+  padding: 0 !important;
 
+  border: none !important;
 
+  margin-bottom: 0 !important;
 
+}
 
+:deep(.ant-picker),
 
+:deep(.ant-select-selector) {
 
+  // width: 100% !important;
 
+  background: #00000017 !important;
 
+  border: 1px solid @vent-form-item-boder !important;
 
+  input,
 
+  .ant-select-selection-item,
 
+  .ant-picker-suffix {
 
+    color: #fff !important;
 
+  }
 
+  .ant-select-selection-placeholder {
 
+    color: #b7b7b7 !important;
 
+  }
 
+}
 
+:deep(.ant-select-arrow),
 
+:deep(.ant-picker-separator) {
 
+  color: #fff !important;
 
+}

+ 36 - 8
src/hooks/core/threejs/useThree.ts
View File 

@@ -3,6 +3,7 @@ import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
 
 // 导入轨道控制器
 
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
 import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 
+import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
 // import gsap from 'gsap';
 
 import ResourceTracker from '/@/utils/threejs/ResourceTracker.js';
 
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
@@ -13,6 +14,7 @@ import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 
 import { setModalCenter } from '/@/utils/threejs/util';
 
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 
 import { useModelStore } from '/@/store/modules/threejs';
 
+import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js';
 
 // import * as dat from 'dat.gui';
 
 // const gui = new dat.GUI();
 
 // gui.domElement.style = 'position:absolute;top:10px;left:10px;z-index:99999999999999';
 
@@ -26,6 +28,7 @@ class UseThree {
 
   renderer: THREE.WebGLRenderer | null = null;
 
   renderEnabled = true;
 
   css3dRender: CSS3DRenderer | null = null;
 
+  css2dRender: CSS2DRenderer | null = null;
 
   orbitControls: OrbitControls | null = null;
 
   animationAction: THREE.AnimationAction | null = null;
 
   clock: THREE.Clock | null = new THREE.Clock(); // 计时器
 
@@ -43,11 +46,11 @@ class UseThree {
 
   composer; //后期
 
   timeOut: NodeJS.Timeout | null = null; //
 
 
-  constructor(canvasSelector, cssCanvas?) {
 
+  constructor(canvasSelector, css3Canvas?, css2Canvas?) {
 
     this.animationId = 0;
 
     this.canvasContainer = document.querySelector(canvasSelector);
 
     //初始化
 
-    this.init(cssCanvas);
 
+    this.init(css3Canvas, css2Canvas);
 
     // this.animate();
 
     window.addEventListener('resize', this.resizeRenderer.bind(this));
 
     // 添加滚动事件，鼠标滚动模型执行动画
 
@@ -55,7 +58,7 @@ class UseThree {
 
 
     // this.canvasContainer?.appendChild(gui.domElement);
 
   }
 
-  init(cssCanvas?) {
 
+  init(css3Canvas?, css2Canvas?) {
 
     // 初始化场景
 
     this.initScene();
 
     // 初始化环境光
 
@@ -66,8 +69,11 @@ class UseThree {
 
     this.initRenderer();
 
     // 初始化控制器
 
     this.initControles();
 
-    if (cssCanvas) {
 
-      this.initCSSRenderer(cssCanvas);
 
+    if (css3Canvas) {
 
+      this.initCSS3Renderer(css3Canvas);
 
+    }
 
+    if (css2Canvas) {
 
+      this.initCSS2Renderer(css2Canvas);
 
     }
 
     // this.setTestPlane();
 
     this.rayCaster = new THREE.Raycaster();
 
@@ -100,6 +106,7 @@ class UseThree {
 
 
   initCamera() {
 
     this.camera = new THREE.PerspectiveCamera(50, this.canvasContainer.clientWidth / this.canvasContainer.clientHeight, 0.0000001, 1000);
 
+    this.camera.layers.enableAll();
 
     //
 
     // const helper = new THREE.CameraHelper(this.camera);
 
     // this.scene?.add(helper);
 
@@ -133,20 +140,36 @@ class UseThree {
 
     this.canvasContainer?.appendChild(this.renderer.domElement);
 
   }
 
 
-  initCSSRenderer(cssCanvas) {
 
+  initCSS3Renderer(cssCanvas) {
 
     this.CSSCanvasContainer = document.querySelector(cssCanvas);
 
     if (this.CSSCanvasContainer) {
 
       this.css3dRender = new CSS3DRenderer() as CSS3DRenderer;
 
       this.css3dRender.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);
 
       this.CSSCanvasContainer?.appendChild(this.css3dRender.domElement);
 
       this.css3dRender.render(this.scene as THREE.Scene, this.camera as THREE.PerspectiveCamera);
 
-      this.orbitControls = new OrbitControls(this.camera as THREE.Camera, this.css3dRender?.domElement) as OrbitControls;
 
-      this.orbitControls.update();
 
+      // this.css3dRender.domElement.style.pointerEvents = 'none';
 
+      // this.orbitControls = new OrbitControls(this.camera as THREE.Camera, this.css3dRender?.domElement) as OrbitControls;
 
+      // this.orbitControls.update();
 
+    }
 
+  }
 
+
 
+  initCSS2Renderer(cssCanvas) {
 
+    this.CSSCanvasContainer = document.querySelector(cssCanvas);
 
+    if (this.CSSCanvasContainer) {
 
+      this.css2dRender = new CSS2DRenderer();
 
+      this.css2dRender.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);
 
+      this.CSSCanvasContainer?.appendChild(this.css2dRender.domElement);
 
+      this.css2dRender.render(this.scene as THREE.Scene, this.camera as THREE.PerspectiveCamera);
 
+
 
+      // this.orbitControls = new OrbitControls(this.camera as THREE.Camera, this.css2dRender?.domElement) as OrbitControls;
 
+      // this.orbitControls.update();
 
+      // this.css2dRender.domElement.style.pointerEvents = 'none';
 
     }
 
   }
 
 
   initControles() {
 
     this.orbitControls = new OrbitControls(this.camera as THREE.Camera, this.renderer?.domElement) as OrbitControls;
 
+    this.orbitControls.update();
 
     // this.orbitControls.enableDamping = true;
 
   }
 
 
@@ -250,6 +273,7 @@ class UseThree {
 
     this.camera?.updateMatrixWorld();
 
     // this.composer?.render();
 
     this.css3dRender?.render(this.scene as THREE.Scene, this.camera as THREE.PerspectiveCamera);
 
+    this.css2dRender?.render(this.scene as THREE.Scene, this.camera as THREE.PerspectiveCamera);
 
     this.renderer?.render(this.scene as THREE.Object3D, this.camera as THREE.Camera);
 
   }
 
 
@@ -286,6 +310,7 @@ class UseThree {
 
       //   this.timeS = 0;
 
       // }
 
       this.stats?.update();
 
+      TWEEN.update();
 
       // this.renderAnimationScene();
 
       if (this.renderEnabled) {
 
         this.render();
 
@@ -301,6 +326,7 @@ class UseThree {
 
     // 设置场景尺寸
 
     this.renderer?.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);
 
     this.css3dRender?.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);
 
+    this.css2dRender?.setSize(this.canvasContainer.clientWidth, this.canvasContainer.clientHeight);
 
   }
 
 
   wheelRenderer(e: WheelEvent) {
 
@@ -409,6 +435,7 @@ class UseThree {
 
     if (this.renderer) this.renderer.domElement = null;
 
 
     if (this.css3dRender) this.css3dRender.domElement = null;
 
+    if (this.css2dRender) this.css2dRender.domElement = null;
 
 
     if (this.canvasContainer) this.canvasContainer.innerHTML = '';
 
     if (this.CSSCanvasContainer) this.CSSCanvasContainer.innerHTML = '';
 
@@ -420,6 +447,7 @@ class UseThree {
 
     this.stats = null;
 
     this.scene = null;
 
     this.css3dRender = null;
 
+    this.css2dRender = null;
 
 
     this.renderer = null;
 
     THREE.Cache.clear();

+ 9 - 3
src/layouts/default/content/index.vue
View File 

@@ -60,8 +60,10 @@
 
 
       const getShowFullHeader = computed(() => {
 
         const route = unref(currentRoute);
 
-        if (!route.path.startsWith('/micro-')) {
 
-          document.body.removeAttribute('class', 'style-styleTwo');
 
+        if (!route.path.startsWith('/micro-vent-3dModal')) {
 
+          if (document.body.getAttribute('class')?.includes('style-styleTwo')) document.body.removeAttribute('class', 'style-styleTwo');
 
+        } else {
 
+          document.body.setAttribute('class', 'style-styleTwo');
 
         }
 
         return getShowFullHeaderRef && !route.path.startsWith('/micro-');
 
       });
 
@@ -119,7 +121,11 @@
 
     justify-content: center;
 
     align-items: center;
 
     flex-direction: column;
 
-    background-color: #f4f7f900;
 
+    // background-color: #f4f7f900;
 
+    background-image: url('/@/assets/images/vent/loading-bg.png');
 
+    background-size: cover;
 
+    background-repeat: no-repeat;
 
+    background-color: #00144b;
 
   }
 
 
   .app-loading .app-loading-wrap {

+ 19 - 0
src/store/modules/app.ts
View File 

@@ -21,6 +21,9 @@ interface AppState {
 
   beforeMiniInfo: BeforeMiniState;
 
   // 页面跳转临时参数存储
 
   messageHrefParams: any;
 
+
 
+  widthScale: number;
 
+  heightScale: number;
 
 }
 
 let timeId: TimeoutHandle;
 
 export const useAppStore = defineStore({
 
@@ -31,6 +34,8 @@ export const useAppStore = defineStore({
 
     projectConfig: Persistent.getLocal(PROJ_CFG_KEY),
 
     beforeMiniInfo: {},
 
     messageHrefParams: {},
 
+    widthScale: 1,
 
+    heightScale: 1,
 
   }),
 
   getters: {
 
     getPageLoading(): boolean {
 
@@ -63,6 +68,13 @@ export const useAppStore = defineStore({
 
     getMessageHrefParams(): any {
 
       return this.messageHrefParams;
 
     },
 
+
 
+    getWidthScale(): number {
 
+      return this.widthScale;
 
+    },
 
+    getHeightScale(): number {
 
+      return this.heightScale;
 
+    },
 
   },
 
   actions: {
 
     setPageLoading(loading: boolean): void {
 
@@ -102,6 +114,13 @@ export const useAppStore = defineStore({
 
     setMessageHrefParams(params: any): void {
 
       this.messageHrefParams = params;
 
     },
 
+
 
+    setWidthScale(scale: number) {
 
+      this.widthScale = scale;
 
+    },
 
+    setHeightScale(scale: number) {
 
+      this.heightScale = scale;
 
+    },
 
   },
 
 });

+ 44 - 85
src/utils/threejs/util.ts
View File 

@@ -1,95 +1,13 @@
 
 import * as THREE from 'three';
 
-import { TransformControls } from 'three/examples/jsm/controls/TransformControls'; // 引入模块
 
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
 
 import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
 
 import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
 
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 
+import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js';
 
 import gsap from 'gsap';
 
-import { onUpdated } from 'vue';
 
 // import * as dat from "dat.gui";
 
 
-let cubeList: THREE.Mesh[] = [],
 
-  curve,
 
-  line;
 
-
 
-// //创建gui对象
 
-// const gui = new dat.GUI();
 
-// gui.domElement.style.top = '300'
 
-// gui.domElement.style.clientTop = 300
 
-// gui.domElement.style.zIndex = 9999
 
-
 
-// 画点
 
-const addCube = (initialPoints, scene) => {
 
-  return initialPoints.map((pos) => {
 
-    const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
 
-    const material = new THREE.MeshBasicMaterial({
 
-      color: 0xffffff,
 
-      side: THREE.DoubleSide,
 
-    });
 
-    const cube = new THREE.Mesh(geometry, material);
 
-    cube.position.copy(pos);
 
-    scene.add(cube);
 
-    cubeList.push(cube);
 
-    // gui.add(cube.position, 'x', -1000, 1000)
 
-    // gui.add(cube.position, 'y', -1000, 1000)
 
-    // gui.add(cube.position, 'z', -1000, 1000)
 
-  });
 
-};
 
-
 
-// 获取点击位置
 
-const addChangeEvent = (modal, cubeList) => {
 
-  const control = new TransformControls(modal.camera, modal.renderer.domElement);
 
-  // 获取点击位置
 
-  window.addEventListener(
 
-    'mousedown',
 
-    (event) => {
 
-      modal.mouse.x = ((event.clientX - modal.canvasContainer.getBoundingClientRect().left) / modal.canvasContainer.clientWidth) * 2 - 1;
 
-      modal.mouse.y = -((event.clientY - modal.canvasContainer.getBoundingClientRect().top) / modal.canvasContainer.clientHeight) * 2 + 1;
 
-      (modal.rayCaster as THREE.Raycaster).setFromCamera(modal.mouse, modal.camera as THREE.Camera);
 
-      // 计算物体和射线的焦点
 
-      const intersects = modal.rayCaster?.intersectObjects(cubeList) as THREE.Intersection[];
 
-      // rayCaster.setFromCamera(mouse, modal.camera);
 
-      if (intersects.length) {
 
-        modal.orbitControls.enabled = false;
 
-        const target = intersects[0].object;
 
-        control.attach(target); // 绑定controls和方块
 
-        modal.scene.add(control);
 
-      } else {
 
-        modal.orbitControls.enabled = true;
 
-      }
 
-    },
 
-    false
 
-  );
 
-
 
-  // 修改曲线后同步修改实体线条
 
-  control.addEventListener('dragging-changed', (event) => {
 
-    if (!event.value) {
 
-      console.log(event.value);
 
-
 
-      const points = curve.getPoints(50);
 
-      line.geometry.setFromPoints(points);
 
-    }
 
-  });
 
-};
 
-
 
-// 画线
 
-export const drawLine = (initialPoints, modal, group) => {
 
-  addCube(initialPoints, group);
 
-  curve = new THREE.CatmullRomCurve3(
 
-    cubeList.map((cube) => cube.position) // 直接绑定方块的position以便后续用方块调整曲线
 
-  );
 
-  curve.curveType = 'chordal';
 
-  curve.closed = false;
 
-
 
-  const points = curve.getPoints(10); // 50等分获取曲线点数组
 
-  line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(points), new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 10 })); // 绘制实体线条，仅用于示意曲线，后面的向量线条同理，相关代码就省略了
 
-  line.name = 'runPath';
 
-  group.add(line);
 
-
 
-  addChangeEvent(modal, cubeList);
 
-};
 
-
 
 /* 设置模型居中 */
 
 export const setModalCenter = (group) => {
 
   const box3 = new THREE.Box3();
 
@@ -346,8 +264,6 @@ export const setOutline = (model, group) => {
 
   return { outlinePass, composer };
 
 };
 
 
-// 视频
 
-
 
 /* 渲染视频 */
 
 export const renderVideo = (group, player, playerMeshName) => {
 
   //加载视频贴图;
 
@@ -436,3 +352,46 @@ export const animateCamera = (oldP, oldT, newP, newT, model, duration = 0.5) =>
 
     );
 
   });
 
 };
 
+
 
+export const transScreenCoord = (vector, camera) => {
 
+  // const screenCoord = { x: 0, y: 0 };
 
+  // vector.project(camera);
 
+  // screenCoord.x = (0.5 + vector.x / 2) * window.innerWidth;
 
+  // screenCoord.y = (0.5 - vector.y / 2) * window.innerHeight;
 
+  // return screenCoord;
 
+  const stdVector = vector.project(camera);
 
+  const a = window.innerWidth / 2;
 
+  const b = window.innerHeight / 2;
 
+  const x = Math.round(stdVector.x * a + a);
 
+  const y = Math.round(-stdVector.y * b + b);
 
+  return { x, y };
 
+};
 
+
 
+export const drawHot = (scale: number) => {
 
+  const hotMap = new THREE.TextureLoader().load('/src/assets/images/hot-point.png');
 
+  const material = new THREE.SpriteMaterial({
 
+    map: hotMap,
 
+  });
 
+  const hotPoint = new THREE.Sprite(material);
 
+  const spriteTween = new TWEEN.Tween({
 
+    scale: 1 * scale,
 
+  })
 
+    .to(
 
+      {
 
+        scale: 0.65 * scale,
 
+      },
 
+      1000
 
+    )
 
+    .easing(TWEEN.Easing.Quadratic.Out);
 
+  spriteTween.onUpdate(function (that) {
 
+    hotPoint.scale.set(that.scale, that.scale, that.scale);
 
+  });
 
+  spriteTween.yoyo(true);
 
+  spriteTween.repeat(Infinity);
 
+  spriteTween.start();
 
+  return hotPoint;
 
+};
 
+
 
+export const deviceDetailCard = () => {
 
+  //
 
+};

+ 27 - 22
src/views/vent/deviceManager/comment/NormalTable.vue
View File 

@@ -259,6 +259,7 @@
 
 </script>
 
 
 <style scoped lang="less">
 
+  @vent-table-no-hover: #00bfff10;
 
   // :deep(.ant-table-header){
 
   //   background-color:transparent;
 
   //   height: 0;
 
@@ -293,33 +294,37 @@
 
   :deep(.ant-table-row-selected) {
 
     background: #268bc522 !important;
 
   }
 
-  :deep(.ant-table-tbody) {
 
-    tr.ant-table-row-selected {
 
-      td {
 
-        background: #268bc500 !important;
 
-      }
 
-    }
 
+  // :deep(.ant-table-tbody) {
 
+  //   tr.ant-table-row-selected {
 
+  //     td {
 
+  //       background: #007cc415 !important;
 
+  //     }
 
+  //   }
 
+  // }
 
+
 
+  :deep(.ant-table-tbody > tr > td) {
 
+    background-color: #0dc3ff05;
 
   }
 
   :deep(.jeecg-basic-table-row__striped) {
 
     // background: #97efff11 !important;
 
     td {
 
       // background-color: #97efff11 !important;
 
-      background-color: #268bc522 !important;
 
-    }
 
-  }
 
-  :deep(.ant-table-thead) {
 
-    // background: linear-gradient(#003f77 0%, #004a86aa 10%) !important; //#003f77, #0a134c
 
-    background-color: #3d9dd45d !important;
 
-    & > tr > th,
 
-    .ant-table-column-title {
 
-      // color: #70f9fc !important;
 
-      color: #fff !important;
 
-      border-color: #91e9fe !important;
 
-      border-left: none !important;
 
-      // border-right: none !important;
 
-      &:last-child {
 
-        border-right: none !important;
 
-      }
 
+      background-color: @vent-table-no-hover !important;
 
     }
 
   }
 
+  // :deep(.ant-table-thead) {
 
+  //   // background: linear-gradient(#003f77 0%, #004a86aa 10%) !important; //#003f77, #0a134c
 
+  //   background-color: #3d9dd45d !important;
 
+  //   & > tr > th,
 
+  //   .ant-table-column-title {
 
+  //     // color: #70f9fc !important;
 
+  //     color: #fff !important;
 
+  //     border-color: #91e9fe !important;
 
+  //     border-left: none !important;
 
+  //     // border-right: none !important;
 
+  //     &:last-child {
 
+  //       border-right: none !important;
 
+  //     }
 
+  //   }
 
+  // }
 
 </style>

+ 3 - 2
src/views/vent/monitorManager/comment/DeviceEcharts.vue
View File 

@@ -225,7 +225,8 @@
 
     },
 
   });
 
 </script>
 
-<style lang="less">
 
+<style lang="less" scoped>
 
+  @import '/@/design/vent/color.less';
 
   .charts-container {
 
     position: relative;
 
     height: 100%;
 
@@ -235,7 +236,7 @@
 
     .ant-picker,
 
     .ant-select-selector {
 
       background: #00000017 !important;
 
-      border: 1px solid #b7b7b74f !important;
 
+      border: 1px solid @vent-form-item-boder !important;
 
       input,
 
       .ant-select-selection-item,
 
       .ant-picker-suffix {

+ 70 - 54
src/views/vent/monitorManager/comment/GroupMonitorTable.vue
View File 

@@ -49,60 +49,6 @@
 
   // 默认初始是第一行
 
   const selectRowIndex = ref(0);
 
 
-  watch(
 
-    () => {
 
-      return props.dataSource;
 
-    },
 
-    (newVal, oldVal) => {
 
-      const list: unknown[] = [];
 
-      newVal.forEach((item) => {
 
-        const data: any = toRaw(item);
 
-        const emptyData = new Object();
 
-        for (const key in data) {
 
-          if (
 
-            Object.prototype.hasOwnProperty.call(data, key) &&
 
-            key !== 'deviceID' &&
 
-            key !== 'fanStart1' &&
 
-            key !== 'fanStart2' &&
 
-            key !== 'strinstallpos' &&
 
-            key !== 'readTime'
 
-          ) {
 
-            emptyData[key] = '-';
 
-          } else {
 
-            emptyData[key] = data[key];
 
-          }
 
-        }
 
-        if (data.fanStart1 == 1) {
 
-          // 主风机启动
 
-          data['runDevice'] = '主机';
 
-          emptyData['runDevice'] = '备机';
 
-          list.push(data, emptyData);
 
-        } else if (data.fanStart2 == 1) {
 
-          // 备风机启动
 
-          data['runDevice'] = '备机';
 
-          emptyData['runDevice'] = '主机';
 
-          list.push(emptyData, data);
 
-        } else {
 
-          list.push({ ...emptyData, runDevice: '主机' }, { ...emptyData, runDevice: '备机' });
 
-        }
 
-      });
 
-
 
-      if (oldVal.length < 1) {
 
-        // 第一次
 
-        if (list[0] && list[0]['fanStart1'] == 1) {
 
-          setSelectedRowKeys(list[0]['deviceID']);
 
-        } else if (list[1] && list[1]['fanStart2'] == 1) {
 
-          setSelectedRowKeys(list[1]['deviceID']);
 
-        } else if (list[0]) {
 
-          setSelectedRowKeys(list[0]['deviceID']);
 
-        }
 
-      }
 
-
 
-      dataTableSource.value = list;
 
-      loading.value = false;
 
-    }
 
-  );
 
-
 
   const setSelectedRowKeys = (target) => {
 
     console.log(target, Object.prototype.toString.call(target));
 
 
@@ -156,6 +102,76 @@
 
   }
 
   const columns = setColumns();
 
   console.log('[ columns ] >', columns);
 
+
 
+  watch(
 
+    () => {
 
+      return props.dataSource;
 
+    },
 
+    (newVal, oldVal) => {
 
+      const list: unknown[] = [];
 
+      newVal.forEach((item) => {
 
+        const data: any = toRaw(item);
 
+        const resultData1 = {};
 
+        const resultData2 = {};
 
+        // 将主风机、备风机的数据进行拆分
 
+        columns.forEach((column) => {
 
+          const columnKey = column.dataIndex;
 
+          // data.f
 
+          if (columnKey.startsWith('Fan')) {
 
+            const key1 = columnKey.replace('Fan', 'Fan1');
 
+            const key2 = columnKey.replace('Fan', 'Fan2');
 
+            resultData1[columnKey] = data[key1];
 
+            resultData2[columnKey] = data[key2];
 
+          } else {
 
+            resultData1[columnKey] = resultData2[columnKey] = data[columnKey];
 
+          }
 
+        });
 
+        resultData1['deviceID'] = resultData2['deviceID'] = data['deviceID'];
 
+        resultData1['runDevice'] = '主机';
 
+        resultData2['runDevice'] = '备机';
 
+
 
+        list.push(resultData1, resultData2);
 
+
 
+        // const emptyData = new Object();
 
+        // for (const key in data) {
 
+        //   if (
 
+        //     Object.prototype.hasOwnProperty.call(data, key) &&
 
+        //     key !== 'deviceID' &&
 
+        //     key !== 'Fan1StartStatus' &&
 
+        //     key !== 'Fan2StartStatus' &&
 
+        //     key !== 'strinstallpos' &&
 
+        //     key !== 'readTime'
 
+        //   ) {
 
+        //     emptyData[key] = '-';
 
+        //   } else {
 
+        //     emptyData[key] = data[key];
 
+        //   }
 
+        // }
 
+        // if (data.Fan1StartStatus == 1) {
 
+        //   // 主风机启动
 
+        //   data['runDevice'] = '主机';
 
+        //   emptyData['runDevice'] = '备机';
 
+        //   list.push(data, emptyData);
 
+        // } else if (data.Fan2StartStatus == 1) {
 
+        //   // 备风机启动
 
+        //   data['runDevice'] = '备机';
 
+        //   emptyData['runDevice'] = '主机';
 
+        //   list.push(emptyData, data);
 
+        // } else {
 
+        //   list.push({ ...emptyData, runDevice: '主机' }, { ...emptyData, runDevice: '备机' });
 
+        // }
 
+      });
 
+
 
+      if (oldVal.length < 1) {
 
+        // 第一次
 
+        setSelectedRowKeys(list[0]['deviceID']);
 
+      }
 
+
 
+      dataTableSource.value = list;
 
+      loading.value = false;
 
+    }
 
+  );
 
+
 
   onMounted(() => {
 
     // 如果是https
 
     // 反之是websocket

+ 2 - 23
src/views/vent/monitorManager/comment/HistoryTable.vue
View File 

@@ -153,35 +153,14 @@
 
 </script>
 
 
 <style scoped lang="less">
 
+  @import '/@/design/vent/color.less';
 
+
 
   :deep(.ant-table-body) {
 
     height: auto !important;
 
   }
 
   .history-table {
 
     width: 100%;
 
     :deep(.jeecg-basic-table-form-container) {
 
-      .ant-form {
 
-        padding: 0 !important;
 
-        border: none !important;
 
-        margin-bottom: 0 !important;
 
-        .ant-picker,
 
-        .ant-select-selector {
 
-          width: 100% !important;
 
-          background: #00000017;
 
-          border: 1px solid #b7b7b74f !important;
 
-          input,
 
-          .ant-select-selection-item,
 
-          .ant-picker-suffix {
 
-            color: #fff;
 
-          }
 
-          .ant-select-selection-placeholder {
 
-            color: #b7b7b7;
 
-          }
 
-        }
 
-        .ant-select-arrow,
 
-        .ant-picker-separator {
 
-          color: #fff !important;
 
-        }
 
-      }
 
       .ant-table-title {
 
         min-height: 0 !important;
 
       }

+ 9 - 4
src/views/vent/monitorManager/comment/MonitorTable.vue
View File 

@@ -115,7 +115,7 @@
 
       const index = findIndex(dataTableSource.value, (data: any) => {
 
         return data.deviceID == selectedRowKeys.value[0];
 
       });
 
-      emits('selectRow', selectedRows.value[0], index);
 
+      if (index >= 0) emits('selectRow', dataTableSource.value[index], index);
 
     },
 
     { immediate: false }
 
   );
 
@@ -136,11 +136,16 @@
 
 <style scoped lang="less">
 
   :deep(.ant-table-body) {
 
     height: auto !important;
 
+    tr > td {
 
+      background: #ffffff00 !important;
 
+    }
 
+    tr.ant-table-row-selected {
 
+      td {
 
+        background: #007cc415 !important;
 
+      }
 
+    }
 
   }
 
   :deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title) {
 
     min-height: 0;
 
   }
 
-  .jeecg-basic-table-row__striped {
 
-    background: #97efff11 !important;
 
-  }
 
 </style>

+ 45 - 2
src/views/vent/monitorManager/fanLocalMonitor/fanLocal.three.ts
View File 

@@ -9,7 +9,16 @@ import gsap from 'gsap';
 
 
 const modelName = 'jbfj_hd';
 
 // 模型对象、 文字对象
 
-let model, group, fcFanObj, fmFanObj, player1, fanType, topSmoke, downSmoke;
 
+let model,
 
+  group,
 
+  fcFanObj,
 
+  fmFanObj,
 
+  player1,
 
+  fanType,
 
+  topSmoke,
 
+  downSmoke,
 
+  playerStartClickTime1 = new Date().getTime(),
 
+  playerStartClickTime2 = new Date().getTime();
 
 
 // 打灯光
 
 const addLight = (scene) => {
 
@@ -440,7 +449,40 @@ const clearFly = () => {
 
   if (topSmoke) topSmoke.clearSmoke();
 
   if (downSmoke) downSmoke.clearSmoke();
 
 };
 
-
 
+// 初始化事件
 
+const startAnimation = () => {
 
+  // 定义鼠标点击事件
 
+  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
 
+  model.canvasContainer?.addEventListener('pointerup', (event) => {
 
+    event.stopPropagation();
 
+  });
 
+};
 
+// 鼠标点击、松开事件
 
+const mouseEvent = (event) => {
 
+  event.stopPropagation();
 
+  // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
 
+  model.mouse.x = ((event.clientX - model.canvasContainer.getBoundingClientRect().left) / model.canvasContainer.clientWidth) * 2 - 1;
 
+  model.mouse.y = -((event.clientY - model.canvasContainer.getBoundingClientRect().top) / model.canvasContainer.clientHeight) * 2 + 1;
 
+  (model.rayCaster as THREE.Raycaster).setFromCamera(model.mouse, model.camera as THREE.Camera);
 
+  if (group) {
 
+    const intersects = model.rayCaster?.intersectObjects(group.children, false) as THREE.Intersection[];
 
+    if (intersects.length > 0) {
 
+      intersects.find((intersect) => {
 
+        const mesh = intersect.object;
 
+        if (mesh.name === 'player1') {
 
+          if (new Date().getTime() - playerStartClickTime1 < 400) {
 
+            // 双击，视频放大
 
+            if (player1) {
 
+              player1.requestFullscreen();
 
+            }
 
+          }
 
+          playerStartClickTime1 = new Date().getTime();
 
+          return true;
 
+        }
 
+      });
 
+    }
 
+  }
 
+};
 
 export const mountedThree = (playerVal1) => {
 
   player1 = playerVal1;
 
   return new Promise((resolve) => {
 
@@ -481,6 +523,7 @@ export const mountedThree = (playerVal1) => {
 
         mesh.rotation.y = -Math.PI / 2;
 
         group.add(mesh);
 
       }
 
+      startAnimation();
 
       resolve(model);
 
     });
 
   });

+ 4 - 2
src/views/vent/monitorManager/fanLocalMonitor/index.vue
View File 

@@ -1,6 +1,7 @@
 
 <template>
 
   <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
 
     <a-spin :spinning="loading" />
 
+
 
     <div id="fanLocal3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
 
     <div id="fanLocal3DCSS" class="threejs-Object-CSS" style="width: 100%; height: 100%; position: absolute; overflow: hidden">
 
       <div style="z-index: -1; position: relative">
 
@@ -37,6 +38,7 @@
 
       </div>
 
     </div>
 
   </div>
 
+
 
   <div class="scene-box">
 
     <div class="top-box">
 
       <div class="top-center row">
 
@@ -192,7 +194,6 @@
 
 </template>
 
 
 <script setup lang="ts">
 
-  import '/@/design/vent/modal.less';
 
   import { ExclamationCircleFilled } from '@ant-design/icons-vue';
 
   import { onBeforeMount, ref, onMounted, nextTick, toRaw, reactive, onUnmounted } from 'vue';
 
   import BarSingle from '../../../../components/chart/BarSingle.vue';
 
@@ -497,7 +498,7 @@
 
   });
 
   onMounted(() => {
 
     // loading.value = true;
 
-    mountedThree(player1).then(() => {
 
+    mountedThree(player1.value).then(() => {
 
       nextTick(() => {
 
         getMonitor();
 
         addCssText();
 
@@ -517,6 +518,7 @@
 
   });
 
 </script>
 
 <style scoped lang="less">
 
+  @import '/@/design/vent/modal.less';
 
   :deep(.ant-tabs-tabpane-active) {
 
     overflow: auto;
 
   }

+ 4 - 1
src/views/vent/monitorManager/gateMonitor/gate.api.ts
View File 

@@ -9,6 +9,7 @@ enum Api {
 
   deleteBatch = '/sys/user/deleteBatch',
 
   importExcel = '/sys/user/importExcel',
 
   exportXls = '/sys/user/exportXls',
 
+  baseList = '/ventanaly-device/safety/ventanalyGate/list',
 
 }
 
 /**
 
  * 导出api
 
@@ -23,7 +24,7 @@ export const getImportUrl = Api.importExcel;
 
  * 列表接口
 
  * @param params
 
  */
 
-export const list = (params) => defHttp.get({ url: Api.list, params });
 
+export const list = (params) => defHttp.post({ url: Api.list, params });
 
 
 /**
 
  * 删除用户
 
@@ -58,3 +59,5 @@ export const saveOrUpdate = (params, isUpdate) => {
 
   const url = isUpdate ? Api.edit : Api.save;
 
   return defHttp.put({ url: url, params });
 
 };
 
+
 
+export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });

+ 109 - 39
src/views/vent/monitorManager/gateMonitor/gate.threejs.ts
View File 

@@ -1,12 +1,16 @@
 
 import * as THREE from 'three';
 
 
 import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 
-import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
 
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
+import { getTextCanvas, renderVideo, transScreenCoord } from '/@/utils/threejs/util';
 
 import UseThree from '../../../../hooks/core/threejs/useThree';
 
 import { animateCamera } from '/@/utils/threejs/util';
 
 import { flyLine } from '/@/views/vent/comment/threejs/FlyLine';
 
 import { createComposer } from '/@/views/vent/comment/threejs/bloomPass';
 
 import * as dat from 'dat.gui';
 
+import { drawHot } from '/@/utils/threejs/util';
 
+import { useAppStore } from '/@/store/modules/app';
 
+
 
 // const gui = new dat.GUI();
 
 // gui.domElement.style = 'position:absolute;top:10px;right:10px;z-index:99999999999999';
 
 
@@ -21,9 +25,12 @@ let model, //
 
   renderBloomPass,
 
   player1,
 
   player2,
 
+  deviceDetailCSS3D,
 
   playerStartClickTime1 = new Date().getTime(),
 
   playerStartClickTime2 = new Date().getTime();
 
 
+const appStore = useAppStore();
 
+
 
 const clipActionArr = {
 
   frontDoor: null as unknown as THREE.AnimationAction,
 
   backDoor: null as unknown as THREE.AnimationAction,
 
@@ -235,6 +242,22 @@ export const addFmText = (selectData) => {
 
     }
 
   });
 
 };
 
+/** 添加热点 */
 
+const drawHots = () => {
 
+  const hotPositions = [
 
+    { x: -0.37, y: 0.26, z: -0.32 },
 
+    { x: 0.28, y: -0.2, z: -0.43 },
 
+    { x: 0.55, y: -0.22, z: -0.38 },
 
+  ];
 
+  for (let i = 0; i < 3; i++) {
 
+    const hotPoint = drawHot(0.1);
 
+    const position = hotPositions[i];
 
+    // hotPoint.scale.set(0.3, 0.3, 0.3);
 
+    hotPoint.position.set(position.x, position.y, position.z);
 
+    hotPoint.name = 'hotPoint' + i;
 
+    group.add(hotPoint);
 
+  }
 
+};
 
 
 /* 漫游路线 */
 
 const createLine = () => {
 
@@ -316,10 +339,15 @@ const render = () => {
 
 
 // 鼠标点击、松开事件
 
 const mouseEvent = (event) => {
 
+  const widthScale = appStore.getWidthScale;
 
+  const heightScale = appStore.getHeightScale;
 
+  // debugger;
 
   event.stopPropagation();
 
   // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
 
-  model.mouse.x = ((event.clientX - model.canvasContainer.getBoundingClientRect().left) / model.canvasContainer.clientWidth) * 2 - 1;
 
-  model.mouse.y = -((event.clientY - model.canvasContainer.getBoundingClientRect().top) / model.canvasContainer.clientHeight) * 2 + 1;
 
+  model.mouse.x =
 
+    ((-model.canvasContainer.getBoundingClientRect().left * widthScale + event.clientX) / (model.canvasContainer.clientWidth * widthScale)) * 2 - 1;
 
+  model.mouse.y =
 
+    -((-model.canvasContainer.getBoundingClientRect().top + event.clientY) / (model.canvasContainer.clientHeight * heightScale)) * 2 + 1;
 
   (model.rayCaster as THREE.Raycaster).setFromCamera(model.mouse, model.camera as THREE.Camera);
 
   // 计算物体和射线的焦点
 
   const intersects = model.rayCaster?.intersectObjects(group.children) as THREE.Intersection[];
 
@@ -329,10 +357,11 @@ const mouseEvent = (event) => {
 
       clearTimeout(animationtimer);
 
       animationtimer = null;
 
     }
 
-
 
+    if (model.camera.layers.mask == -1) model.camera.layers.toggle(1);
 
     // 判断是否点击到视频
 
     intersects.find((intersect) => {
 
       const mesh = intersect.object;
 
+      // deviceDetailCSS3D?.layers.set(1);
 
       if (mesh.name === 'player1') {
 
         if (new Date().getTime() - playerStartClickTime1 < 400) {
 
           // model.orbitControls?.dispatchEvent.call(model.orbitControls, { type: 'end' })
 
@@ -353,7 +382,33 @@ const mouseEvent = (event) => {
 
         }
 
         playerStartClickTime2 = new Date().getTime();
 
         return true;
 
+      } else if (mesh.name.startsWith('hotPoint')) {
 
+        if (deviceDetailCSS3D) {
 
+          // document.getElementById('deviceCard') as HTMLElement;
 
+          deviceDetailCSS3D.position.set(intersect.point.x, intersect.point.y + 18, intersect.point.z);
 
+          console.log('[ deviceDetailCSS3D.position ] >', deviceDetailCSS3D.position);
 
+          // deviceDetailCSS3D?.layers.set(0);
 
+          model.camera.layers.enableAll();
 
+          return true;
 
+        }
 
+
 
+        // let position = new THREE.Vector3(mesh.position.x, mesh.position.y, 0.5);
 
+        // position = position.applyMatrix4(group.matrixWorld);
 
+        // model.scene.updateMatrixWorld(true);
 
+        // // let worldPosition = new THREE.Vector3();
 
+        // // let worldScale = new THREE.Vector3();
 
+        // // worldPosition = mesh.getWorldPosition(worldPosition);
 
+        // // worldScale = mesh.getWorldScale(worldScale);
 
+        // const devicePosition = transScreenCoord(intersect.point, model.camera);
 
+        // element.style.left = devicePosition.x + 'px';
 
+        // element.style.top = devicePosition.y + 'px';
 
+        // console.log('[ point 坐标位置 ] >', devicePosition, mesh.position);
 
+      } else {
 
+        // deviceDetailCSS3D?.layers.set(1);
 
+
 
+        console.log('[ 点击事件 ] >');
 
       }
 
+
 
       return false;
 
     });
 
   }
 
@@ -364,7 +419,7 @@ const startAnimation = () => {
 
   // 开启动画
 
   model.startAnimation = render.bind(null);
 
   // 定义鼠标点击事件x
 
-  model.canvasContainer?.addEventListener('pointerdown', mouseEvent.bind(null));
 
+  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
 
   model.canvasContainer?.addEventListener('pointerup', (event) => {
 
     event.stopPropagation();
 
     // 10s后开始摆动
 
@@ -401,6 +456,18 @@ const initAnimation = () => {
 
   });
 
 };
 
 
+export const deviceDetailCard = (position = { x: 0, y: 0, z: 0 }) => {
 
+  const element = document.getElementById('deviceCard') as HTMLElement;
 
+  deviceDetailCSS3D = new CSS2DObject(element);
 
+  deviceDetailCSS3D.name = 'deviceCard';
 
+  // deviceDetailCSS3D.scale.set(0.1, 0.1, 0.1);
 
+  // deviceDetailCSS3D.scale.set(0.004, 0.004, 0.004);
 
+  // deviceDetailCSS3D.rotation.y = -Math.PI / 2;
 
+  deviceDetailCSS3D.position.set(position.x, position.y, position.z);
 
+  deviceDetailCSS3D?.layers.set(1);
 
+  // group.add(deviceDetailCSS3D);
 
+  model.scene.add(deviceDetailCSS3D);
 
+};
 
 // 播放动画
 
 export const play = (handlerState) => {
 
   let handler = () => {};
 
@@ -501,52 +568,53 @@ export const initOpenState = (selectData) => {
 
   if (!group) return;
 
   model.camera.position.set(-1000, 100, 500);
 
   group.rotation.y = 0;
 
-  return new Promise((resolve) => {
 
+  return new Promise(async (resolve) => {
 
     setTimeout(async () => {
 
       const oldCameraPosition = { x: -1000, y: 100, z: 500 };
 
       await animateCamera(oldCameraPosition, oldCameraPosition, { x: 46.257, y: 57.539, z: 94.313 }, { x: -50, y: 0, z: 0 }, model, 0.8);
 
       resolve(null);
 
-    }, 500);
 
-    if (!selectData) {
 
-      return;
 
-    }
 
-    if (selectData.frontGateOpen == 1) {
 
-      clipActionArr.frontDoor.reset();
 
-      clipActionArr.frontDoor.time = 0.5;
 
-      clipActionArr.frontDoor.clampWhenFinished = true;
 
-      clipActionArr.frontDoor.timeScale = 1;
 
-      clipActionArr.frontDoor.play();
 
-    } else {
 
-      clipActionArr.frontDoor.reset();
 
-      clipActionArr.frontDoor.time = 4;
 
-      clipActionArr.frontDoor.timeScale = -1;
 
-      clipActionArr.frontDoor.clampWhenFinished = true;
 
-      clipActionArr.frontDoor.play();
 
-    }
 
-    if (selectData.rearGateOpen == 1) {
 
-      clipActionArr.backDoor.reset();
 
-      clipActionArr.backDoor.time = 0.5;
 
-      clipActionArr.backDoor.timeScale = 1;
 
-      clipActionArr.backDoor.clampWhenFinished = true;
 
-      clipActionArr.backDoor.play();
 
-    } else {
 
-      clipActionArr.backDoor.reset();
 
-      clipActionArr.backDoor.time = 4;
 
-      clipActionArr.backDoor.timeScale = -1;
 
-      clipActionArr.backDoor.clampWhenFinished = true;
 
-      clipActionArr.backDoor.play();
 
-    }
 
-    model.clock.start();
 
+      if (!selectData) {
 
+        return;
 
+      }
 
+      if (selectData.frontGateOpen == 1) {
 
+        clipActionArr.frontDoor.reset();
 
+        clipActionArr.frontDoor.time = 0.5;
 
+        clipActionArr.frontDoor.clampWhenFinished = true;
 
+        clipActionArr.frontDoor.timeScale = 1;
 
+        clipActionArr.frontDoor.play();
 
+      } else {
 
+        clipActionArr.frontDoor.reset();
 
+        clipActionArr.frontDoor.time = 4;
 
+        clipActionArr.frontDoor.timeScale = -1;
 
+        clipActionArr.frontDoor.clampWhenFinished = true;
 
+        clipActionArr.frontDoor.play();
 
+      }
 
+      if (selectData.rearGateOpen == 1) {
 
+        clipActionArr.backDoor.reset();
 
+        clipActionArr.backDoor.time = 0.5;
 
+        clipActionArr.backDoor.timeScale = 1;
 
+        clipActionArr.backDoor.clampWhenFinished = true;
 
+        clipActionArr.backDoor.play();
 
+      } else {
 
+        clipActionArr.backDoor.reset();
 
+        clipActionArr.backDoor.time = 4;
 
+        clipActionArr.backDoor.timeScale = -1;
 
+        clipActionArr.backDoor.clampWhenFinished = true;
 
+        clipActionArr.backDoor.play();
 
+      }
 
+      model.clock.start();
 
+    }, 800);
 
   });
 
 };
 
 
 export const mountedThree = (playerVal1, playerVal2) => {
 
   return new Promise((resolve) => {
 
-    model = new UseThree('#damper3D');
 
+    model = new UseThree('#damper3D', '', '#deviceDetail');
 
     model.setEnvMap('test1');
 
     model.renderer.toneMappingExposure = 0.8;
 
     model.setModel(modelName).then((gltf) => {
 
       group = gltf.scene;
 
+      group.layers.enableAll();
 
       if (gltf.animations && gltf.animations.length > 0) {
 
         model.mixers = [];
 
         model.animations = [];
 
@@ -566,7 +634,9 @@ export const mountedThree = (playerVal1, playerVal2) => {
 
       // startAnimation();
 
       initAnimation();
 
       model.animate();
 
-
 
+      drawHots();
 
+      deviceDetailCard();
 
+      if (model.camera.layers.mask == -1) model.camera.layers.toggle(1);
 
       // renderBloomPass = createComposer(model).renderBloomPass;
 
 
       // const flyLineMesh = flyLine(

+ 42 - 20
src/views/vent/monitorManager/gateMonitor/index.vue
View File 

@@ -1,19 +1,24 @@
 
 <template>
 
   <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
 
     <a-spin :spinning="loading" />
 
-    <div id="damper3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
 
-    <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
 
-      <div>
 
-        <div ref="elementContent" class="elementContent">
 
-          <p><span class="data-title">压力(Pa)：</span>{{selectData.frontRearDP}}</p>
 
-          <p><span class="data-title">动力源压力(MPa)：</span>{{selectData.sourcePressure}}</p>
 
-          <p><span class="data-title">故障诊断：</span>
 
-            <i
 
-              :class="{'state-icon': true, 'open': selectData.messageBoxStatus, 'close': !selectData.messageBoxStatus}"
 
-            ></i>{{selectData.fault}}</p>
 
+    <div id="deviceDetail" class="device-detail">
 
+      <div id="deviceCard" class="device-card" style="z-index: -1; position: absolute">
 
+        <div class="title">KJ-890-F矿用本安型监控分站</div>
 
+        <div class="detail-box">
 
+          <div class="left-box"></div>
 
+          <div class="right-box">
 
+            <div><span class="detail-title">规格型号：</span> <span>KJ-890-F</span></div>
 
+            <div
 
+              ><span class="detail-title">技术参数：</span>
 
+              <span
 
+                >380V，电机功率22kW,50Hz，B级绝缘，额定电流42.2A，效率90.5%，能效等级3，接法角型，2940r/min，轴承6311/CM 6211/CM，功率因数0.89</span
 
+              ></div
 
+            >
 
+          </div>
 
         </div>
 
       </div>
 
-    </div> -->
 
+    </div>
 
+    <div id="damper3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
 
   </div>
 
   <div class="scene-box">
 
     <div class="top-box">
 
@@ -91,7 +96,7 @@
 
               :dataSource="dataSource"
 
               height="100%"
 
               :chartsColumns="chartsColumns"
 
-              :device-list-api="baseList"
 
+              :device-list-api="list"
 
               device-type="gate"
 
             />
 
           </div>
 
@@ -130,7 +135,6 @@
 
 </template>
 
 
 <script setup lang="ts">
 
-  import '/@/design/vent/modal.less';
 
   import LivePlayer from '@liveqing/liveplayer-v3';
 
   import { onBeforeMount, onBeforeUnmount, onUnmounted, onMounted, ref, reactive, toRaw, nextTick } from 'vue';
 
   import DeviceEcharts from '../comment/DeviceEcharts.vue';
 
@@ -140,11 +144,10 @@
 
   import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
 
   import HandleModal from './modal.vue';
 
   import { initWebSocket, getRecordList } from '/@/hooks/web/useVentWebSocket';
 
-  import { mountedThree, addFmText, play, destroy, initOpenState } from './gate.threejs';
 
+  import { mountedThree, addFmText, play, destroy, initOpenState, deviceDetailCard } from './gate.threejs';
 
   import { deviceControlApi } from '/@/api/vent/index';
 
   import { message } from 'ant-design-vue';
 
-  import { list } from '/@/views/vent/monitorManager/windowMonitor/window.api';
 
-  import { list as baseList } from '../../deviceManager/damperTabel/damper.api';
 
+  import { list, getTableList } from './gate.api';
 
   import { chartsColumns } from './gate.data';
 
   import lodash from 'lodash';
 
 
@@ -163,6 +166,8 @@
 
 
   const selectRowIndex = ref(0);
 
   const dataSource = ref([]);
 
+
 
+  const deviceBaseList = ref([]);
 
   //  webSocket 请求 实时监测数据
 
   // const dataSource:any = computed(() => {
 
   //   const data = [...getRecordList()] || []
 
@@ -195,6 +200,13 @@
 
   // 监测数据
 
   const selectData = reactive(lodash.cloneDeep(initData));
 
 
+  // 获取设备基本信息列表
 
+  const getDeviceBaseList = () => {
 
+    getTableList({ pageSize: 1000 }).then((res) => {
 
+      deviceBaseList.value = res.records;
 
+    });
 
+  };
 
+
 
   // https获取监测数据
 
   let timer: null | NodeJS.Timeout = null;
 
   const getMonitor = () => {
 
@@ -224,12 +236,17 @@
 
 
   // 切换检测数据
 
   const getSelectRow = async (selectRow, index) => {
 
+    if (!selectRow) return;
 
     loading.value = true;
 
     selectRowIndex.value = index;
 
+    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
 
+    Object.assign(selectData, initData, selectRow, baseData);
 
+    // selectData = selectRow;
 
     frontDoorIsOpen.value = selectData.frontGateOpen === '1';
 
     backDoorIsOpen.value = selectData.rearGateOpen === '1';
 
-    await initOpenState(selectData);
 
-    loading.value = false;
 
+    initOpenState(selectData)?.then(() => {
 
+      loading.value = false;
 
+    });
 
   };
 
 
   // 播放动画
 
@@ -362,6 +379,7 @@
 
         });
 
     }
 
   };
 
+
 
   const handleCancel = () => {
 
     modalIsShow.value = false;
 
     modalTitle.value = '';
 
@@ -410,16 +428,19 @@
 
 
   onMounted(() => {
 
     loading.value = true;
 
-    getMonitor();
 
     mountedThree(player1.value, player2.value).then(() => {
 
       nextTick(() => {
 
+        getMonitor();
 
         addFmText(selectData);
 
+        deviceDetailCard();
 
       });
 
       loading.value = false;
 
     });
 
     document.body.addEventListener('mousedown', addPlayVideo, false);
 
   });
 
-  onBeforeUnmount(() => {});
 
+  onBeforeUnmount(() => {
 
+    getDeviceBaseList();
 
+  });
 
   onUnmounted(() => {
 
     if (timer) {
 
       clearTimeout(timer);
 
@@ -430,6 +451,7 @@
 
 </script>
 
 
 <style lang="less" scoped>
 
+  @import '/@/design/vent/modal.less';
 
   .button-box {
 
     border: none !important;
 
     height: 34px !important;

+ 174 - 84
src/views/vent/monitorManager/mainFanMonitor/index.vue
View File 

@@ -1,32 +1,33 @@
 
 <template>
 
   <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
 
     <a-spin :spinning="loading" />
 
-    <div id="main3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
 
-    <FanEchrats id="fan-echarts" :chartData="selectData" style="position: absolute; z-index: -1" />
 
-  </div>
 
-  <div
 
-    id="main3DCSS"
 
-    class="threejs-Object-CSS"
 
-    v-show="!loading"
 
-    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
 
-  >
 
-    <div style="position: relative">
 
-      <div class="elementTag" id="inputBox">
 
-        <div class="elementContent elementContent-r" v-if="selectData.dqPa && backMonitorIsShow">
 
-          <p><span class="data-title">风机全压(Pa)：</span>{{ selectData.dqPa ? selectData.dqPa : '-' }}</p>
 
-          <p><span class="data-title">风机静压(Pa)：</span>{{ selectData.yc2 ? selectData.yc2 : '-' }}</p>
 
-          <p><span class="data-title">风机流量(m³/s)：</span>{{ selectData.fanM3 ? selectData.fanM3 : '-' }}</p>
 
+    <div
 
+      id="main3DCSS"
 
+      class="threejs-Object-CSS"
 
+      v-show="!loading"
 
+      style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
 
+    >
 
+      <div style="position: relative">
 
+        <div class="elementTag" id="inputBox">
 
+          <div class="elementContent elementContent-r" v-if="selectData.DataPa && backMonitorIsShow">
 
+            <p><span class="data-title">风机气压(Pa)：</span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</p>
 
+            <p><span class="data-title">风机负压(Pa)：</span>{{ selectData.Fan2Negative ? selectData.Fan2Negative : '-' }}</p>
 
+            <p><span class="data-title">风机风量(m³/s)：</span>{{ selectData.Fan2m3 ? selectData.Fan2m3 : '-' }}</p>
 
+          </div>
 
         </div>
 
-      </div>
 
-      <div class="elementTag" id="inputBox1">
 
-        <div class="elementContent elementContent-r" v-if="selectData.dqPa && frontMonitorIsShow">
 
-          <p><span class="data-title">风机全压(Pa)：</span>{{ selectData.dqPa ? selectData.dqPa : '-' }}</p>
 
-          <p><span class="data-title">风机静压(Pa)：</span>{{ selectData.yc2 ? selectData.yc2 : '-' }}</p>
 
-          <p><span class="data-title">风机流量(m³/s)：</span>{{ selectData.fanM3 ? selectData.fanM3 : '-' }}</p>
 
+        <div class="elementTag" id="inputBox1">
 
+          <div class="elementContent elementContent-r" v-if="selectData.DataPa && frontMonitorIsShow">
 
+            <p><span class="data-title">风机全压(Pa)：</span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</p>
 
+            <p><span class="data-title">风机负压(Pa)：</span>{{ selectData.Fan1Negative ? selectData.Fan1Negative : '-' }}</p>
 
+            <p><span class="data-title">风机风量(m³/s)：</span>{{ selectData.Fan1m3 ? selectData.Fan1m3 : '-' }}</p>
 
+          </div>
 
         </div>
 
       </div>
 
     </div>
 
+    <div id="main3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
 
+    <FanEchrats id="fan-echarts" :chartData="selectData" style="position: absolute; z-index: -1" />
 
   </div>
 
+
 
   <div class="scene-box" style="z-index: 999">
 
     <div class="title-text" style="position: absolute; z-index: 9999; width: 100%; text-align: center">{{ selectData.strname }}</div>
 
     <div class="top-box control-group">
 
@@ -45,14 +46,25 @@
 
             >
 
           </div>
 
           <div class="container-group container-group-l">
 
-            <div class="container-item" v-for="(data, index) in dataColumns()" :key="index">
 
-              <div class="item-icon">
 
-                <SvgIcon class="icon-style" size="18" name="temperature" />
 
+            <template v-if="deviceType">
 
+              <div class="container-item" v-for="(data, index) in getTableHeaderColumns(deviceType + '_monitor_left')" :key="index">
 
+                <div class="item-icon">
 
+                  <SvgIcon class="icon-style" size="18" name="temperature" />
 
+                </div>
 
+                <div class="item-name">{{ data.title }}</div>
 
+                <div v-if="data.dataIndex.startsWith('Fan')">
 
+                  <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
 
+                    selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
 
+                  }}</div>
 
+                  <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
 
+                    selectData[data.dataIndex.replace('Fan', 'Fan2')] ? selectData[data.dataIndex.replace('Fan', 'Fan2')] : '-'
 
+                  }}</div>
 
+                </div>
 
+                <div v-else>
 
+                  <div class="item-value">{{ selectData[data.dataIndex] ? selectData[data.dataIndex] : '-' }}</div>
 
+                </div>
 
               </div>
 
-              <div class="item-name">{{ data.name }}</div>
 
-
 
-              <div class="item-value" v-if="dataSource[dataMonitorRowIndex]">{{ dataSource[dataMonitorRowIndex][data.id] }}</div>
 
-            </div>
 
+            </template>
 
           </div>
 
         </div>
 
       </div>
 
@@ -79,27 +91,62 @@
 
               </div>
 
             </div>
 
             <div class="warning-group">
 
-              <div class="warning-item" v-for="(state, index) in stateColumns()" :key="index">
 
-                <div class="item-name"><div class="icon"></div> {{ state.name }}</div>
 
-                <div class="signal-item" v-if="dataSource[warningMonitorRowIndex]">
 
-                  <div
 
-                    class="signal-round"
 
-                    :class="{
 
-                      'signal-round-run': dataSource[warningMonitorRowIndex][state.id],
 
-                      'signal-round-warning':
 
-                        dataSource[warningMonitorRowIndex][state.id] !== undefined && !dataSource[warningMonitorRowIndex][state.id],
 
-                      'signal-round-gry': dataSource[warningMonitorRowIndex][state.id] === undefined,
 
-                    }"
 
-                  ></div>
 
-                  <div>{{
 
-                    dataSource[warningMonitorRowIndex][state.id] === undefined
 
-                      ? '无状态'
 
-                      : dataSource[warningMonitorRowIndex][state.id]
 
-                      ? '正常'
 
-                      : '异常'
 
-                  }}</div>
 
+              <template v-if="deviceType">
 
+                <div class="warning-item" v-for="(state, index) in getTableHeaderColumns(deviceType + '_monitor_right')" :key="index">
 
+                  <div class="item-name"><div class="icon"></div> {{ state.title }}</div>
 
+                  <div v-if="state.dataIndex.startsWith('Fan')">
 
+                    <div class="signal-item" v-if="warningMonitorRowIndex == 0">
 
+                      <div
 
+                        class="signal-round"
 
+                        :class="{
 
+                          'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan1')],
 
+                          'signal-round-warning':
 
+                            selectData[state.dataIndex.replace('Fan', 'Fan1')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan1')],
 
+                          'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined,
 
+                        }"
 
+                      ></div>
 
+                      <div>{{
 
+                        selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined
 
+                          ? '无状态'
 
+                          : selectData[state.dataIndex.replace('Fan', 'Fan1')]
 
+                          ? '正常'
 
+                          : '异常'
 
+                      }}</div>
 
+                    </div>
 
+                    <div class="signal-item" v-if="warningMonitorRowIndex == 1">
 
+                      <div
 
+                        class="signal-round"
 
+                        :class="{
 
+                          'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan2')],
 
+                          'signal-round-warning':
 
+                            selectData[state.dataIndex.replace('Fan', 'Fan2')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan2')],
 
+                          'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined,
 
+                        }"
 
+                      ></div>
 
+                      <div>{{
 
+                        selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined
 
+                          ? '无状态'
 
+                          : selectData[state.dataIndex.replace('Fan', 'Fan2')]
 
+                          ? '正常'
 
+                          : '异常'
 
+                      }}</div>
 
+                    </div>
 
+                  </div>
 
+                  <div v-else>
 
+                    <div class="signal-item" v-if="warningMonitorRowIndex == 0">
 
+                      <div
 
+                        class="signal-round"
 
+                        :class="{
 
+                          'signal-round-run': selectData[state.dataIndex],
 
+                          'signal-round-warning': selectData[state.dataIndex] !== undefined && !selectData[state.dataIndex],
 
+                          'signal-round-gry': selectData[state.dataIndex] === undefined,
 
+                        }"
 
+                      ></div>
 
+                      <div>{{ selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] ? '正常' : '异常' }}</div>
 
+                    </div>
 
+                  </div>
 
                 </div>
 
-              </div>
 
+              </template>
 
             </div>
 
           </div>
 
         </div>
 
@@ -174,7 +221,6 @@
 
 </template>
 
 
 <script setup lang="ts">
 
-  import '/@/design/vent/modal.less';
 
   import { ExclamationCircleFilled } from '@ant-design/icons-vue';
 
   import FanEchrats from '/@/views/vent/monitorManager/mainFanMonitor/fanEchrats.vue';
 
   import { onBeforeMount, computed, ComputedRef, ref, onMounted, nextTick, onUnmounted, reactive, toRaw, toRef, toRefs } from 'vue';
 
@@ -184,13 +230,16 @@
 
   import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
 
   import { dataColumns, stateColumns, getData, getMonitorData } from './main.data';
 
   import { deviceControlApi } from '/@/api/vent/index';
 
-  import { mountedThree, destroy, addText, play, setModelType, resetEcharts } from './main.threejs';
 
+  import { mountedThree, destroy, addText, play, setModelType, playAnimate, resetEcharts } from './main.threejs';
 
   import LivePlayer from '@liveqing/liveplayer-v3';
 
   import { SvgIcon } from '/@/components/Icon';
 
   import { list, pathList, deviceList, testWind } from './main.api';
 
   import { list as baseList } from '../../deviceManager/fanTabel/fan.api';
 
   import { getTableList } from '/@/views/vent/monitorManager/fanLocalMonitor/fanLocal.api';
 
   import { message } from 'ant-design-vue';
 
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
 
+  import { log } from 'console';
 
+
 
   const modalTypeArr = reactive({
 
     centerBtnArr: [
 
       {
 
@@ -218,9 +267,9 @@
 
   const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
 
   const modalType = ref(''); // 模态框内容显示类型，设备操作类型
 
   const frequencyVal = ref(40); //频率
 
-  const mainWindIsShow1 = ref('open'); // 1#风机默认启动
 
+  const mainWindIsShow1 = ref('stop'); // 1#风机默认启动
 
   const mainWindIsShow2 = ref('stop'); // 2#风机默认不启动
 
-  const frontMonitorIsShow = ref(true); // 存放1#风机临时状态，保存模态框取消时，还需要返回之前的值
 
+  const frontMonitorIsShow = ref(false); // 存放1#风机临时状态，保存模态框取消时，还需要返回之前的值
 
   const backMonitorIsShow = ref(false); // 存放2#风机临时状态，保存模态框取消时，还需要返回之前的值
 
   const passWord = ref('');
 
   // 默认初始是第一行 (默认n%2==0时是主机，n%2==1时是备机)
 
@@ -233,11 +282,16 @@
 
   // 监测数据
 
   const selectData = reactive({
 
     deviceID: '',
 
-    yc2: '-', // 静压
 
-    dqPa: '-', //全压
 
-    fanM3: '-', //电机流量
 
+    Fan1Negative: '-', // 静压
 
+    Fan2Negative: '-', // 静压
 
+    DataPa: '-', //全压
 
+    Fan1m3: '-', //电机流量
 
+    Fan2m3: '-', //电机流量
 
+    deviceType: '',
 
   });
 
 
+  const deviceType = computed(() => selectData.deviceType);
 
+
 
   const flvURL1 = () => {
 
     // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
 
     return `/video/mainWind.mp4`;
 
@@ -287,7 +341,7 @@
 
         await getDataSource();
 
         Object.assign(selectData, deviceBaseList.value, dataSource.value[selectRowIndex.value]);
 
         addText(selectData);
 
-        // playAnimation(data, selectData.maxarea);
 
+        playAnimate(selectData);
 
         if (timer) {
 
           timer = null;
 
         }
 
@@ -332,26 +386,27 @@
 
       loading.value = false;
 
     });
 
     const data = dataSource.value[baseDataIndex];
 
-    mainWindIsShow1.value = 'open';
 
+    mainWindIsShow1.value = 'stop';
 
     mainWindIsShow2.value = 'stop';
 
     if (data['fanStart1'] == 1) {
 
       mainWindIsShow1.value = 'open';
 
     } else if (data['fanStart2'] == 1) {
 
       mainWindIsShow2.value = 'open';
 
     }
 
-    play('initiatePlay', 'front', frequencyVal.value, 'open', 'tubPositivePath');
 
+    // play('initiatePlay', 'front', frequencyVal.value, 'open', 'tubPositivePath');
 
     return;
 
   };
 
 
-  const start = (flag) => {
 
+  const start = (paramcode) => {
 
     const data = {
 
       deviceid: selectData.deviceID,
 
       devicetype: selectData.deviceType,
 
-      paramcode: flag == 1 ? 'testStart' : '',
 
+      paramcode: paramcode,
 
     };
 
     deviceControlApi(data).then((res) => {
 
       if (res.success) {
 
         //
 
+        console.log('8888888888888888');
 
       }
 
     });
 
   };
 
@@ -384,61 +439,93 @@
 
     }
 
   };
 
   // 风机操作
 
-  const handleOk = (e: MouseEvent) => {
 
-    if (passWord.value !== '123456') {
 
-      message.warning('密码不正确，请重新输入');
 
-      return;
 
-    }
 
+  // const handleOk = (e: MouseEvent) => {
 
+  //   if (passWord.value !== '123456') {
 
+  //     message.warning('密码不正确，请重新输入');
 
+  //     return;
 
+  //   }
 
+  //   const frequency = frequencyVal.value;
 
+  //   if (modalType.value == 'startSmoke') {
 
+  //     if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
 
+  //       frontMonitorIsShow.value = true;
 
+  //       backMonitorIsShow.value = false;
 
+  //       play('startSmoke', 'front', frequency, 'open', 'tubPositivePath');
 
+  //       play('startSmoke', 'back', null, 'close', '');
 
+  //     } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
 
+  //       frontMonitorIsShow.value = false;
 
+  //       backMonitorIsShow.value = true;
 
+  //       play('startSmoke', 'back', frequency, 'open', 'tubPositivePath');
 
+  //       play('startSmoke', 'front', null, 'close', '');
 
+  //     } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
 
+  //       frontMonitorIsShow.value = false;
 
+  //       backMonitorIsShow.value = false;
 
+  //       play('startSmoke', 'back', null, 'stop', '');
 
+  //       play('startSmoke', 'front', null, 'close', '');
 
+  //     }
 
+  //   } else if (modalType.value == 'changeDirection') {
 
+  //     if (mainWindIsShow1.value == 'open') {
 
+  //       play('changeDirection', 'front', frequency, null, 'tubInversePath');
 
+  //     } else if (mainWindIsShow2.value == 'open') {
 
+  //       play('changeDirection', 'back', null, null, 'tubInversePath');
 
+  //     }
 
+  //   } else if (modalType.value == 'changeSmoke') {
 
+  //     // 不停风倒机的同时要切换当前监测数据
 
+  //     if (mainWindIsShow1.value == 'open') {
 
+  //       frontMonitorIsShow.value = false;
 
+  //       backMonitorIsShow.value = true;
 
+  //       // 切换到后面那台风，并需要设置后面风机的频率
 
+  //       // play('changeSmoke', 'back', dataSource.value[selectRowIndex.value + 1]['frequency'], null, 'tubInversePath');
 
+  //       play('changeSmoke', 'back', frequency, null, 'tubPositivePath');
 
+  //     } else if (mainWindIsShow2.value == 'open') {
 
+  //       frontMonitorIsShow.value = true;
 
+  //       backMonitorIsShow.value = false;
 
+  //       // 切换到前面那台风，并需要设置前面风机的频率
 
+  //       play('changeSmoke', 'front', frequency, null, 'tubPositivePath');
 
+  //     }
 
+  //   } else if (modalType.value == 'frequency') {
 
+  //     if (mainWindIsShow1.value == 'open') {
 
+  //       play('frequency', 'front', frequency);
 
+  //     } else if (mainWindIsShow2.value == 'open') {
 
+  //       play('frequency', 'back', frequency);
 
+  //     }
 
+  //   }
 
+  //   modalTitle.value = '';
 
+  //   modalIsShow.value = false;
 
+  // };
 
 
-    if (selectRowIndex.value % 2 == 0) {
 
-      selectRowIndex.value = selectRowIndex.value + 1;
 
-    } else {
 
-      selectRowIndex.value = selectRowIndex.value - 1;
 
-    }
 
-    const frequency = frequencyVal.value;
 
+  const handleOk = (e: MouseEvent) => {
 
     if (modalType.value == 'startSmoke') {
 
       if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
 
         frontMonitorIsShow.value = true;
 
         backMonitorIsShow.value = false;
 
-        play('startSmoke', 'front', frequency, 'open', 'tubPositivePath');
 
-        play('startSmoke', 'back', null, 'close', '');
 
+        start('CtrlFan1Start');
 
       } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
 
         frontMonitorIsShow.value = false;
 
         backMonitorIsShow.value = true;
 
-        play('startSmoke', 'back', frequency, 'open', 'tubPositivePath');
 
-        play('startSmoke', 'front', null, 'close', '');
 
+        start('CtrlFan2Start');
 
       } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
 
         frontMonitorIsShow.value = false;
 
         backMonitorIsShow.value = false;
 
-        play('startSmoke', 'back', null, 'stop', '');
 
-        play('startSmoke', 'front', null, 'close', '');
 
       }
 
     } else if (modalType.value == 'changeDirection') {
 
       if (mainWindIsShow1.value == 'open') {
 
-        play('changeDirection', 'front', frequency, null, 'tubInversePath');
 
       } else if (mainWindIsShow2.value == 'open') {
 
-        play('changeDirection', 'back', null, null, 'tubInversePath');
 
       }
 
     } else if (modalType.value == 'changeSmoke') {
 
-      debugger;
 
       // 不停风倒机的同时要切换当前监测数据
 
       if (mainWindIsShow1.value == 'open') {
 
         frontMonitorIsShow.value = false;
 
         backMonitorIsShow.value = true;
 
         // 切换到后面那台风，并需要设置后面风机的频率
 
         // play('changeSmoke', 'back', dataSource.value[selectRowIndex.value + 1]['frequency'], null, 'tubInversePath');
 
-        play('changeSmoke', 'back', frequency, null, 'tubPositivePath');
 
       } else if (mainWindIsShow2.value == 'open') {
 
         frontMonitorIsShow.value = true;
 
         backMonitorIsShow.value = false;
 
         // 切换到前面那台风，并需要设置前面风机的频率
 
-        play('changeSmoke', 'front', frequency, null, 'tubPositivePath');
 
       }
 
     } else if (modalType.value == 'frequency') {
 
       if (mainWindIsShow1.value == 'open') {
 
-        play('frequency', 'front', frequency);
 
       } else if (mainWindIsShow2.value == 'open') {
 
-        play('frequency', 'back', frequency);
 
       }
 
     }
 
     modalTitle.value = '';
 
@@ -483,6 +570,7 @@
 
   });
 
 </script>
 
 <style scoped lang="less">
 
+  @import '/@/design/vent/modal.less';
 
   :deep(.ant-tabs-tabpane-active) {
 
     overflow: auto;
 
   }
 
@@ -619,6 +707,8 @@
 
           padding: 10px 0;
 
           min-height: 472px;
 
           background: linear-gradient(to right, #007bff22, #2081ff05);
 
+          max-height: 480px;
 
+          overflow-y: auto;
 
         }
 
         .container-group-l {
 
           .container-item {

+ 75 - 1
src/views/vent/monitorManager/mainFanMonitor/main.threejs.ts
View File 

@@ -81,7 +81,7 @@ const setControls = () => {
 
   model.orbitControls.minPolarAngle = Math.PI / 4;
 
 };
 
 
-// 初始化左右摇摆动画
 
+// 初始化事件
 
 const startAnimation = () => {
 
   // 定义鼠标点击事件
 
   model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
 
@@ -137,6 +137,80 @@ export const play = (controlType, deviceType, frequencyVal?, state?, smokeDirect
 
   }
 
 };
 
 
+export const playAnimate = async (selectData, duration?) => {
 
+  if (modalType === 'mainWindRect') {
 
+    if (selectData) {
 
+      if (selectData.Fan1WindowOpen !== undefined) {
 
+        // 主风机水平窗开启
 
+        if (selectData.Fan1WindowOpen == 1) mainWindObj.openOrCloseWindow('front', 'openWindow');
 
+        if (selectData.Fan1WindowOpen == 0) mainWindObj.openOrCloseWindow('front', 'closeWindow');
 
+      }
 
+      if (selectData.Fan2WindowOpen !== undefined) {
 
+        // 备风机水平窗开启
 
+        if (selectData.Fan2WindowOpen == 1) mainWindObj.openOrCloseWindow('back', 'openWindow');
 
+        if (selectData.Fan2WindowOpen == 0) mainWindObj.openOrCloseWindow('back', 'closeWindow');
 
+      }
 
+      if (selectData.Fan1ButterflyOpen !== undefined) {
 
+        if (selectData.Fan1ButterflyOpen == 1) {
 
+          // 主风机蝶阀打开
 
+          mainWindObj.openOrCloseValve('front', 'open', duration);
 
+        } else {
 
+          // 主风机蝶阀关闭
 
+          mainWindObj.openOrCloseValve('front', 'close', duration);
 
+        }
 
+      }
 
+      if (selectData.Fan1FreqHz !== undefined) {
 
+        // 主风机频率设置
 
+        mainWindObj.resetSmokeParam('front', selectData.Fan1FreqHz, duration);
 
+      }
 
+      if (selectData.Fan1StartStatus) {
 
+        if (selectData.Fan1StartStatus == 1) {
 
+          // 主风机开启
 
+          mainWindObj.lookMotor('front', 'open', duration);
 
+
 
+          if (selectData.Fan1FreqForwardRun && selectData.Fan1FreqForwardRun == 1) {
 
+            // 主风机正转
 
+            await mainWindObj.setSmokeDirection('front', 'tubPositivePath');
 
+          } else if (selectData.Fan1FreqReverseRun && selectData.Fan1FreqReverseRun == 1) {
 
+            // 主风机反转
 
+            await mainWindObj.setSmokeDirection('front', 'tubInversePath');
 
+          }
 
+          if (mainWindObj.frontSmoke.frameId) mainWindObj.frontSmoke.startSmoke(duration);
 
+        } else {
 
+          mainWindObj.lookMotor('front', 'close', duration);
 
+        }
 
+      }
 
+      if (selectData.Fan2ButterflyOpen !== undefined) {
 
+        if (selectData.Fan2ButterflyOpen == 1) {
 
+          // 主风机蝶阀打开
 
+          mainWindObj.openOrCloseVal('back', 'open', duration);
 
+        } else {
 
+          // 主风机蝶阀关闭
 
+          mainWindObj.openOrCloseVal('back', 'close', duration);
 
+        }
 
+      }
 
+
 
+      if (selectData.Fan2FreqHz) {
 
+        // 备风机频率设置
 
+        mainWindObj.resetSmokeParam('back', selectData.Fan1FreqHz, duration);
 
+      }
 
+      if (selectData.Fan2StartStatus) {
 
+        if (selectData.Fan2StartStatus == 1) {
 
+          // 备风机开启
 
+          mainWindObj.lookMotor('back', 'open', duration);
 
+          if (selectData.Fan2FreqForwardRun && selectData.Fan2FreqForwardRun == 1) {
 
+            // 主风机正转
 
+          } else if (selectData.Fan2FreqReverseRun && selectData.Fan2FreqReverseRun == 1) {
 
+            // 主风机反转
 
+          }
 
+        } else {
 
+          mainWindObj.lookMotor('back', 'close', duration);
 
+        }
 
+      }
 
+    }
 
+  }
 
+};
 
+
 
 // 切换风窗类型
 
 export const setModelType = (type) => {
 
   modalType = type;

+ 20 - 14
src/views/vent/monitorManager/mainFanMonitor/mainWind.threejs.ts
View File 

@@ -600,9 +600,16 @@ class mainWindRect {
 
     this.group?.add(this.motorGroup2);
 
   }
 
 
-  openOrCloseWindow(flag) {
 
+  openOrCloseWindow(deviceType, flag) {
 
     const _this = this;
 
-    let endAngle = 0;
 
+    let endAngle = 0,
 
+      windowGroup;
 
+    if (deviceType === 'front') {
 
+      windowGroup = this.frontWindowGroup;
 
+    }
 
+    if (deviceType === 'back') {
 
+      windowGroup = this.backWindowGroup;
 
+    }
 
     if (flag == 'openWindow') {
 
       // 打开风窗
 
       endAngle = 1;
 
@@ -610,17 +617,17 @@ class mainWindRect {
 
       // 关闭风窗
 
       endAngle = 0;
 
     }
 
-
 
-    gsap.to(this, {
 
-      windowAngle: endAngle,
 
-      duration: Math.abs(endAngle - this.windowAngle) * 10,
 
-      ease: 'none',
 
-      onUpdate: function () {
 
-        _this.frontWindowGroup.children.forEach((mesh) => {
 
-          mesh.rotation.z = _this.windowAngle;
 
-        });
 
-      },
 
-    });
 
+    if (windowGroup)
 
+      gsap.to(this, {
 
+        windowAngle: endAngle,
 
+        duration: Math.abs(endAngle - this.windowAngle) * 10,
 
+        ease: 'none',
 
+        onUpdate: function () {
 
+          windowGroup.children.forEach((mesh) => {
 
+            mesh.rotation.z = _this.windowAngle;
 
+          });
 
+        },
 
+      });
 
   }
 
 
   /** 初始化风窗 */
 
@@ -666,7 +673,6 @@ class mainWindRect {
 
         await this.initMotor();
 
         resolve(null);
 
         this.initWindow();
 
-        this.openOrCloseWindow('openWindow');
 
         setTimeout(async () => {
 
           const videoPlayer1 = document.getElementById('main-player1')?.getElementsByClassName('vjs-tech')[0];
 
           if (videoPlayer1) {

+ 3 - 2
src/views/vent/monitorManager/sensorMonitor/index.vue
View File 

@@ -88,7 +88,6 @@
 
 </template>
 
 
 <script setup lang="ts">
 
-  import '/@/design/vent/modal.less';
 
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
 
   import { Select } from 'ant-design-vue';
 
   import { onBeforeMount, ref, onMounted, onUnmounted, toRaw, reactive, nextTick } from 'vue';
 
@@ -309,6 +308,8 @@
 
   });
 
 </script>
 
 <style lang="less" scoped>
 
+  @import '/@/design/vent/color.less';
 
+  @import '/@/design/vent/modal.less';
 
   .padding-0 {
 
     padding: 10px 0 !important;
 
   }
 
@@ -376,7 +377,7 @@
 
     .ant-select-selector {
 
       width: 100% !important;
 
       background: #00000017 !important;
 
-      border: 1px solid #b7b7b74f !important;
 
+      border: 1px solid @vent-form-item-boder !important;
 
       input,
 
       .ant-select-selection-item,
 
       .ant-picker-suffix {

+ 1 - 1
src/views/vent/monitorManager/windowMonitor/index.vue
View File 

@@ -110,7 +110,6 @@
 
 </template>
 
 
 <script setup lang="ts">
 
-  import '/@/design/vent/modal.less';
 
   import { message } from 'ant-design-vue';
 
   import DeviceEcharts from '../comment/DeviceEcharts.vue';
 
   import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
 
@@ -333,6 +332,7 @@
 
   });
 
 </script>
 
 <style lang="less" scoped>
 
+  @import '/@/design/vent/modal.less';
 
   :deep(.ant-tabs-tabpane-active) {
 
     overflow: auto;
 
   }

+ 1 - 1
src/views/vent/monitorManager/windrectMonitor/index.vue
View File 

@@ -135,7 +135,6 @@
 
 </template>
 
 
 <script setup lang="ts">
 
-  import '/@/design/vent/modal.less';
 
   import DeviceEcharts from '../comment/DeviceEcharts.vue';
 
   import { onBeforeMount, computed, ComputedRef, ref, onMounted, onUnmounted, reactive, toRaw, toRef, toRefs, Ref } from 'vue';
 
   import { BasicModal, useModalInner } from '/@/components/Modal';
 
@@ -338,6 +337,7 @@
 
   });
 
 </script>
 
 <style scoped lang="less">
 
+  @import '/@/design/vent/modal.less';
 
   :deep(.ant-tabs-tabpane-active) {
 
     overflow: auto;
 
   }