优化三维加载

src/views/vent/home/configurable/components/detail/CustomTable-fire.vue

@@ -15,138 +15,138 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, defineProps } from 'vue';
-import _ from 'lodash';
+  import { computed, defineProps } from 'vue';
+  import _ from 'lodash';
 
-let props = withDefaults(
-  defineProps<{
-    /** B | C */
-    type: string;
-    /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
-    columns: { prop: string; name: string }[];
-    data: any[];
-    defaultValue: string;
-  }>(),
-  {
-    type: 'B',
-    columns: () => [],
-    data: () => [],
-    defaultValue: '-',
-  }
-);
+  let props = withDefaults(
+    defineProps<{
+      /** B | C */
+      type: string;
+      /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
+      columns: { prop: string; name: string }[];
+      data: any[];
+      defaultValue: string;
+    }>(),
+    {
+      type: 'B',
+      columns: () => [],
+      data: () => [],
+      defaultValue: '-',
+    }
+  );
 
-const flexBasis = computed(() => {
-  return Math.fround(100 / props.columns.length) + '%';
-});
+  const flexBasis = computed(() => {
+    return Math.fround(100 / props.columns.length) + '%';
+  });
 
-function get(o, p) {
-  const d = _.get(o, p);
-  return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
-}
+  function get(o, p) {
+    const d = _.get(o, p);
+    return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
+  @import '/@/design/theme.less';
+  @import '@/design/theme.less';
 
-@{theme-deepblue} {
-  .table__content {
-    --image-content-label: url('/@/assets/images/fireNew/11-1.png');
-    --image-content-back: url('/@/assets/images/fireNew/11-2.png');
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
-}
-
-.table__content {
-  --image-content-label: url('/@/assets/images/fireNew/11-1.png');
-  --image-content-back: url('/@/assets/images/fireNew/11-2.png');
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 13px;
 
-  .table__content_label {
-    width: 400px;
-    height: 32px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .label-t {
-      text-align: center;
-      font-size: 14px;
-    }
-  }
-  .table__content_label_A {
-    background-image: var(--image-content-label);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    margin-top: 10px;
-  }
-  .table__content_label_B {
-    background-image: linear-gradient(to top, #04698c, #04698c00);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    color: #31b9ef;
-  }
-  .table__content_label_C {
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-image: var(--image-content-label);
-    margin-top: 10px;
-    .label-t {
+  @{theme-deepblue} {
+    .table__content {
+      --image-content-label: url('/@/assets/images/fireNew/11-1.png');
+      --image-content-back: url('/@/assets/images/fireNew/11-2.png');
     }
   }
 
-  .table__content_list {
-    height: calc(100% - 50px);
-    width: 380px;
+  .table__content {
+    --image-content-label: url('/@/assets/images/fireNew/11-1.png');
+    --image-content-back: url('/@/assets/images/fireNew/11-2.png');
+    height: 100%;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    padding: 5px 0;
-    box-sizing: border-box;
-    overflow-y: auto;
-    background-image: var(--image-content-back);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: center;
-    .table__content_list_row {
-      width: 100%;
+    align-items: center;
+    padding: 13px;
+
+    .table__content_label {
+      width: 400px;
+      height: 32px;
       display: flex;
       justify-content: space-around;
       align-items: center;
-      color: #fff;
-      margin-bottom: 5px;
-      span {
-        display: inline-block;
+      .label-t {
         text-align: center;
+        font-size: 14px;
       }
     }
-  }
-
-  .table__content_list_A {
-    .table__content_list_row {
-      &:nth-child(2n) {
-        background: #0b2d3d;
+    .table__content_label_A {
+      background-image: var(--image-content-label);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      margin-top: 10px;
+    }
+    .table__content_label_B {
+      background-image: linear-gradient(to top, #04698c, #04698c00);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      color: #31b9ef;
+    }
+    .table__content_label_C {
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-image: var(--image-content-label);
+      margin-top: 10px;
+      .label-t {
       }
-      &:nth-child(2n + 1) {
-        background: transparent;
+    }
+
+    .table__content_list {
+      height: calc(100% - 50px);
+      width: 380px;
+      display: flex;
+      flex-direction: column;
+      padding: 5px 0;
+      box-sizing: border-box;
+      overflow-y: auto;
+      background-image: var(--image-content-back);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+      .table__content_list_row {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        margin-bottom: 5px;
+        span {
+          display: inline-block;
+          text-align: center;
+        }
       }
     }
-  }
-  .table__content_list_C {
-    .table__content_list_row {
-      &:nth-child(2n) {
-        background: #0b2d3d;
+
+    .table__content_list_A {
+      .table__content_list_row {
+        &:nth-child(2n) {
+          background: #0b2d3d;
+        }
+        &:nth-child(2n + 1) {
+          background: transparent;
+        }
       }
-      &:nth-child(2n + 1) {
-        background: transparent;
+    }
+    .table__content_list_C {
+      .table__content_list_row {
+        &:nth-child(2n) {
+          background: #0b2d3d;
+        }
+        &:nth-child(2n + 1) {
+          background: transparent;
+        }
       }
     }
   }
-}
 </style>

src/views/vent/home/configurable/components/gasInject/moduleBottom.vue

@@ -2,11 +2,11 @@
   <Transition>
     <div v-if="visible" class="module-content">
       <div v-if="title" class="module-content__title__expand">
-       <div>
-         <span class="action-btn close-btn" @click="closeModel"></span>
-        <span @click="clickHandler">{{ title }}</span>
-       </div>
-       <span v-if="visibleDetail" class="detail-text" @click="handleClickDetail">详情</span>
+        <div>
+          <span class="action-btn close-btn" @click="closeModel"></span>
+          <span @click="clickHandler">{{ title }}</span>
+        </div>
+        <span v-if="visibleDetail" class="detail-text" @click="handleClickDetail">详情</span>
       </div>
       <div class="module-slot">
         <slot></slot>
@@ -15,8 +15,8 @@
   </Transition>
 </template>
 <script lang="ts" setup>
-  defineProps<{ title: string; visible: boolean,visibleDetail:boolean }>();
-  const emit = defineEmits(['close', 'click','handleClickDetail']);
+  defineProps<{ title: string; visible: boolean; visibleDetail: boolean }>();
+  const emit = defineEmits(['close', 'click', 'handleClickDetail']);
 
   function closeModel() {
     emit('close');
@@ -25,23 +25,23 @@
     emit('click');
   }
   //详情点击
-function handleClickDetail() {
-  emit('handleClickDetail')
-}
+  function handleClickDetail() {
+    emit('handleClickDetail');
+  }
 </script>
 <style lang="less" scoped>
   @import '/@/design/theme.less';
 
   @{theme-deepblue} {
     .module-content {
-       --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/11-1.png');
-       --image-model_original_border_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/11-2.png');
+      // --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/11-1.png');
+      // --image-model_original_border_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/11-2.png');
     }
   }
 
   .module-content {
-    --image-model_original_title_bg: url('@/assets/images/gasInjection/11-1.png');
-    --image-model_original_border_bg: url('@/assets/images/gasInjection/11-2.png');
+    // --image-model_original_title_bg: url('@/assets/images/gasInjection/11-1.png');
+    // --image-model_original_border_bg: url('@/assets/images/gasInjection/11-2.png');
     --bg-height: 40px;
     color: #fff;
     box-sizing: border-box;
@@ -54,7 +54,7 @@ function handleClickDetail() {
     display: flex;
     justify-content: space-between;
     align-items: center;
-     width: 100%;
+    width: 100%;
     height: var(--bg-height);
     background: var(--image-model_original_title_bg) no-repeat;
     background-size: 100% 100%;
@@ -69,13 +69,13 @@ function handleClickDetail() {
   .module-slot {
     height: calc(100% - 33px);
     width: calc(100% - 15px);
-    background: var( --image-model_original_border_bg) no-repeat;
+    background: var(--image-model_original_border_bg) no-repeat;
     background-size: 100% 100%;
     // backdrop-filter: blur(5px);
     // background-color: var(--vent-configurable-original-module-bg);
     // margin-left: 5px;
   }
-  .detail-text{
+  .detail-text {
     color: #2cb6ff;
     cursor: pointer;
   }

src/views/vent/home/configurable/components/gasInject/moduleLeft.vue

@@ -15,84 +15,84 @@
   </Transition>
 </template>
 <script lang="ts" setup>
-defineProps<{ title: string; visible: boolean, visibleDetail: boolean }>();
-const emit = defineEmits(['close', 'click', 'handleClickDetail']);
+  defineProps<{ title: string; visible: boolean; visibleDetail: boolean }>();
+  const emit = defineEmits(['close', 'click', 'handleClickDetail']);
 
-function closeModel() {
-  emit('close');
-}
-function clickHandler() {
-  emit('click');
-}
-//详情点击
-function handleClickDetail() {
-  emit('handleClickDetail')
-}
+  function closeModel() {
+    emit('close');
+  }
+  function clickHandler() {
+    emit('click');
+  }
+  //详情点击
+  function handleClickDetail() {
+    emit('handleClickDetail');
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@{theme-deepblue} {
-  .module-content {
-    --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-1.png');
-    --image-model_original_border_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-4.png');
+  @{theme-deepblue} {
+    .module-content {
+      --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-1.png');
+      --image-model_original_border_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-4.png');
+    }
   }
-}
 
-.module-content {
-  --image-model_original_title_bg: url('@/assets/images/gasInjection/2-1.png');
-  --image-model_original_border_bg: url('@/assets/images/gasInjection/2-4.png');
-  --bg-height: 40px;
-  color: #fff;
-  box-sizing: border-box;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
+  .module-content {
+    --image-model_original_title_bg: url('@/assets/images/gasInjection/2-1.png');
+    --image-model_original_border_bg: url('@/assets/images/gasInjection/2-4.png');
+    --bg-height: 40px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
 
-.module-content__title__expand {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: var(--bg-height);
-  background: var(--image-model_original_title_bg) no-repeat;
-  background-size: 100% 100%;
-  position: relative;
-  padding-left: 45px;
-  padding-top: 2px;
-  margin-bottom: 5px;
-  font-family: 'douyuFont';
-  line-height: var(--bg-height);
-}
+  .module-content__title__expand {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: var(--bg-height);
+    background: var(--image-model_original_title_bg) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    padding-left: 45px;
+    padding-top: 2px;
+    margin-bottom: 5px;
+    font-family: 'douyuFont';
+    line-height: var(--bg-height);
+  }
 
-.module-slot {
-  height: calc(100% - 33px);
-  width: 100%;
-  // width: calc(100% - 20px);
-  // backdrop-filter: blur(5px);
-  // #182d47
-  background: var(--image-model_original_border_bg) no-repeat;
-  background-size: 100% 100%;
-  // margin-left: 10px;
-}
+  .module-slot {
+    height: calc(100% - 33px);
+    width: 100%;
+    // width: calc(100% - 20px);
+    // backdrop-filter: blur(5px);
+    // #182d47
+    background: var(--image-model_original_border_bg) no-repeat;
+    background-size: 100% 100%;
+    // margin-left: 10px;
+  }
 
-.detail-text {
-  color: #2cb6ff;
-  cursor: pointer;
-}
+  .detail-text {
+    color: #2cb6ff;
+    cursor: pointer;
+  }
 
-// Transition动画相关
-.v-enter-active,
-.v-leave-active {
-  transition: all 0.3s ease;
-}
+  // Transition动画相关
+  .v-enter-active,
+  .v-leave-active {
+    transition: all 0.3s ease;
+  }
 
-.v-enter-from,
-.v-leave-to {
-  // opacity: 1;
-  transform: translateX(-100%);
-  // transform: scaleY(0);
-  // transform-origin: center top;
-}
+  .v-enter-from,
+  .v-leave-to {
+    // opacity: 1;
+    transform: translateX(-100%);
+    // transform: scaleY(0);
+    // transform-origin: center top;
+  }
 </style>

src/views/vent/home/configurable/gasInjection.vue

@@ -277,5 +277,6 @@
   .modal-3d {
     padding: 10px;
     width: calc(100% - 20px) !important;
+    height: calc(100% - 20px) !important;
   }
 </style>