首屏加载样式。默认隐藏信息展示。动画导入等

src/views/yhlywsytst/yhlywsytst/index.vue

@@ -2,7 +2,7 @@
  * @Description:
  * @Author: lisu lisu@gavelinfo.com
  * @LastEditors: lisu lisu@gavelinfo.com
- * @LastEditTime: 2024-10-22 15:15:43
+ * @LastEditTime: 2024-10-24 10:57:34
  * @FilePath: /zghywpc-vue/src/views/yhlywsytst/yhlywsytst/index.vue
 -->
 <template>
@@ -10,11 +10,11 @@
     element-loading-background="rgba(0, 0, 0, 0.8)" ref="app" class="min_full nullbp">
     <!-- 弹框组件dialig -->
     <czDialog @save='getSave' :app='this' v-if='showDialog' />
-    <div class="bigTitle">
+    <div  v-show="loading==false"  class="bigTitle  animate__animated  animate__fadeInDown ">
       一回路异物溯源态势图
     </div>
     <!-- 视角工具栏-->
-    <div class="toolButton">
+    <div  v-show="loading==false"  class="toolButton animate__animated  animate__fadeInRight"    >
       <div class="flex1 text-center">
         <div class="menu">
           <span  style="cursor: pointer;"  @click="toFullPage('jyfkgl/jyfkgl')">
@@ -39,7 +39,7 @@
         </div>
       </div>
     </div>
-    <div class="toolButton2">
+    <div  v-show="loading==false"  class="toolButton2  animate__animated  animate__fadeInLeft">
       <div class="flex1 text-center">
         <div class="menu"> <span  style="cursor: pointer;"   @click="toFullPage('sbxxgl/sbxx')">
             设备信息
@@ -67,10 +67,18 @@
         <el-checkbox v-model="xzjj">选中时近景</el-checkbox>
       </div>
     </div> -->
-    <div class="leftOpt" style="padding-top: 30px;">
-      <div class="sbxxTitle" style="position: absolute;top: 5px;font-weight: 800;">
+    <div v-show="selectedModelName"   class="leftOpt animate__animated     "  :class="{
+      'animate__fadeInLeft':selectedModelName&&showLeft,
+      'animate__fadeOutLeft':selectedModelName&&!showLeft
+    }" style="padding-top: 30px;">
+      <div class="sbxxTitle" style="position: absolute;top: 5px;font-weight: 800;width: 100%;">
         {{'设备:'+(selectedModel.name||'未选中')}}
+        <span class="hiddenButton">
+           <i  style="cursor: pointer;"   @click="hiddenLeft"  class="el-icon-switch-button"></i>
+        </span>
       </div>
+      <!-- 隐藏样式-->
+
 
       <!-- 标高信息-->
       <div class="flex1" style="height: 33%;overflow: hidden;">
@@ -274,7 +282,7 @@
       </div> -->
     </div>
     <!-- 溯源排查-->
-    <div class="sypc">
+    <div v-show="loading==false" class="sypc  animate__animated  animate__fadeInUp   ">
       <div class="full  data-box1" style="position: relative;">
         <i class="topL"></i>
         <i class="topR"></i>
@@ -570,6 +578,9 @@
       czDialog
     },
     computed: {
+      selectedModelName(){
+         return this.selectedModel.name
+      },
       byZts(){
         return this.sypcQueryParams.byZts
       },
@@ -585,6 +596,8 @@
     },
     data() {
       return {
+
+        showLeft:false,
         /* 材质辅助输入*/
         cztypeConfig: {
 
@@ -653,6 +666,13 @@
       }
     },
     watch: {
+      selectedModelName(val){
+        if(val){
+          this.showLeft=true
+        }else{
+          this.showLeft=false
+        }
+      },
       byZts(val){
         if(val){
           if(this.sypcQueryParams.kshZt){
@@ -687,6 +707,9 @@
       }
     },
     methods: {
+      hiddenLeft(){
+        this.showLeft=false
+      },
       toFullPage(hash) {
         const url = `${location.origin}/#/${hash}`
         window.open(url, '_blank'); // 第二个参数 '_blank' 表示在新窗口或标签页中打开
@@ -956,6 +979,7 @@
             }
           }).finally(() => {
             this.loading = false
+
           })
 
         } else if (this.sypcQueryParams.isrRecentImport !== '') {
@@ -1520,6 +1544,10 @@
 
         model.addEventListener("loaded", () => {
           this.loading = false
+          /* 解决共用showleft控制没有关闭效果
+          放置默认不控制，初始dom是存在的直接出现关闭特效
+          */
+
           this.viewer.scene.traverse(model => {
             if (model.isMesh) {
               if (model.name == '2RCV001EX_IN') {
@@ -1621,6 +1649,7 @@
                 return
               }
               this.selectedModel = model
+               this.showLeft=true
               // model.visible=false
 
               /* 执行并情况材料队列 */
@@ -1679,6 +1708,7 @@
               model = intersects[0].object
             }
             this.selectedModel = model
+             this.showLeft=true
 
             /* 执行并情况材料队列 */
             this.reMaterialQue.forEach(item => {
@@ -1792,7 +1822,10 @@
 </script>
 
 <style scoped lang="scss">
-
+    .hiddenButton{
+    float: right;
+    color: #68D8FE;
+    }
   .search-span {
     min-width: 60px;
     float: right;
@@ -1961,6 +1994,8 @@
   }
 
   .leftOpt {
+    // opacity: 0;
+    // transform:translate3d(-100%, 0, 0);
     position: absolute;
     margin-top: 185px;
     width: 28%;