添加看板显示隐藏

src/assets/css/left.scss

@@ -148,6 +148,8 @@
         overflow: hidden;
         box-sizing: border-box;
         width: 392px;
+        display: flex;
+        flex-direction: column;
         //  height: 219px;
         //  border: 2px solid #5F7BDC;
 
@@ -157,11 +159,14 @@
             padding-top: 0;
             height: 100%;
             overflow: hidden;
+            flex: 1;
         }
 
         .table {
             width: 100%;
-
+            height: 100%;
+            display: flex;
+            flex-direction: column;
             .th {
                 font-weight: 700;
                 display: flex;
@@ -330,6 +335,9 @@
                 }
 
             }
+            .scroll-container{
+                flex: 1;
+            }
 
             .vue3-seamless-scroll {
                 overflow: scroll;

src/components/home.vue

@@ -1,9 +1,9 @@
 <template>
   <!-- <div class="container" > -->
   <Header />
-  <!-- <el-container> -->
-  <Left ref="childRef" @childMethod="childMethod"></Left>
-  <right></right>
+
+  <Left v-if="isShowLeft" ref="childRef" @childMethod="childMethod"></Left>
+  <right v-if="isShowRight"></right>
   <div
     ref="linedomRef"
     style="
@@ -93,8 +93,7 @@
     width="40%"
     align="left"
     top="30vh"
-  
-    style="z-index: 2015;background: rgba(0, 0, 0, 0) ;padding:0px;"
+    style="z-index: 2015; background: rgba(0, 0, 0, 0); padding: 0px"
   >
     <el-table
       :data="deviceDetailsList"
@@ -139,7 +138,7 @@
       width="15%"
       align="left"
       top="40vh"
-      style="z-index: 2019; background: rgba(0, 0, 0, 0);padding:0px"
+      style="z-index: 2019; background: rgba(0, 0, 0, 0); padding: 0px"
       :modal="false"
     >
       <div class="details-container">
@@ -207,6 +206,8 @@ export default {
   setup() {
     const titleDialog = ref("");
     const orientation = ref("");
+    const isShowLeft = ref(true);
+    const isShowRight = ref(true);
     // 视频数据
     const videoData = reactive({
       width: "100%", //播放器高度
@@ -332,7 +333,6 @@ export default {
         name: "多媒体设备",
         status: "异常",
       },
-      
     ]);
     let deviceDetails = ref({});
 
@@ -485,6 +485,10 @@ export default {
           deviceDetailsList.value = res.data;
         });
       }
+      if (JSON.parse(data).MainServiceName == "KanBanShouQi") {
+        isShowLeft.value = JSON.parse(data).PutAwayState;
+        isShowRight.value = JSON.parse(data).PutAwayState;
+      }
     };
     const windowSize = function () {
       // console.log("监听一下窗口是不是改了--click", lineContainer);
@@ -528,7 +532,9 @@ export default {
       lookDetails,
       deviceDetailsList,
       deviceDialog,
-      deviceDetails
+      deviceDetails,
+      isShowLeft,
+      isShowRight,
     };
   },
 };
@@ -538,10 +544,10 @@ export default {
 @import "../assets/css/home.scss";
 
 :deep(.el-dialog__header) {
-    height: 49px;
-    line-height: 49px;
-    padding: 0;
-    background-color: #1b67d9;
-    margin-right: 0;
+  height: 49px;
+  line-height: 49px;
+  padding: 0;
+  background-color: #1b67d9;
+  margin-right: 0;
 }
 </style>

src/components/left.vue

@@ -206,65 +206,65 @@
             class="scroll"
           > -->
           <!-- <div v-if="classRoomList.length > 0" style="width: 100%; height: 100%"> -->
-          <div
-            style="height: 342px; overflow: hidden; padding-top: 10px"
-            v-if="classRoomList.length > 0"
-          >
-            <scroll
-             
-              :content="classRoomList"
-              class="vue3-seamless-scroll"
-              :hover="true"
-              :wheel="true"
-              direction="top"
-              ref="scrollRef"
-              :mask="false"
-            
+          <div class="scroll-container" ref="scrollContainerRef">
+            <div
+              
+              :style="{height:scrollContainerHeight+'px',overflow: 'hidden',paddingTop: '10px'}"
+              v-if="classRoomList.length > 0"
             >
-              <template #default="{item}" >
-                <div  class="list-item" >
-                  <div class="class-status-btn-container">
-                    <div class="left-class-status">
-                      <div style="margin-right: 16px">
-                        {{ item.classroom_name }}
+              <scroll
+                :content="classRoomList"
+                class="vue3-seamless-scroll"
+                :hover="true"
+                :wheel="true"
+                direction="top"
+                ref="scrollRef"
+                :mask="false"
+              >
+                <template #default="{ item }">
+                  <div class="list-item">
+                    <div class="class-status-btn-container">
+                      <div class="left-class-status">
+                        <div style="margin-right: 16px">
+                          {{ item.classroom_name }}
+                        </div>
+                        <Tag :text="item.status_code"></Tag>
                       </div>
-                      <Tag :text="item.status_code"></Tag>
-                    </div>
-                    <div class="right-btn" @click.prevent="handleRoom(item)">
-                      查看
-                    </div>
-                  </div>
-
-                  <div class="item-content">
-                    <div class="item-content-left">
-                      <div class="position">位置：{{ item.location }}</div>
-                      <div class="course" v-if="item.course_name">
-                        课程：{{ item.course_name }}
+                      <div class="right-btn" @click.prevent="handleRoom(item)">
+                        查看
                       </div>
                     </div>
-                    <div class="item-content-right">
-                      <div>类型：{{ item.category }}</div>
-                      <div class="person-rate-container">
-                        <div v-if="item.actual != null">
-                          实到/应到：{{ item.actual }}/{{ item.expected }}
+
+                    <div class="item-content">
+                      <div class="item-content-left">
+                        <div class="position">位置：{{ item.location }}</div>
+                        <div class="course" v-if="item.course_name">
+                          课程：{{ item.course_name }}
                         </div>
-                        <div
-                          style="margin-left: 8px"
-                          v-if="item.actual != null"
-                        >
-                          到课率：{{
-                            (item.actual / item.expected).toFixed(2) * 100 || 0
-                          }}%
+                      </div>
+                      <div class="item-content-right">
+                        <div>类型：{{ item.category }}</div>
+                        <div class="person-rate-container">
+                          <div v-if="item.actual != null">
+                            实到/应到：{{ item.actual }}/{{ item.expected }}
+                          </div>
+                          <div
+                            style="margin-left: 8px"
+                            v-if="item.actual != null"
+                          >
+                            到课率：{{
+                              (item.actual / item.expected).toFixed(2) * 100 ||
+                              0
+                            }}%
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              </template>
-            </scroll>
+                </template>
+              </scroll>
+            </div>
           </div>
-
-          
         </div>
         <!-- </div> -->
       </div>
@@ -373,7 +373,7 @@ export default {
     Tag,
     Vue3SeamlessScroll,
     VerticalScroll,
-    Scroll
+    Scroll,
   },
   setup(_, { emit }) {
     // 教室分类统计
@@ -658,6 +658,8 @@ export default {
 
     let timer = ref(null);
     let testMain = ref(null);
+    let scrollContainerRef =ref(null)
+    let scrollContainerHeight = ref(null)
     onMounted(() => {
       getClassData();
       start();
@@ -665,6 +667,11 @@ export default {
       getClassSelections();
       //获取教室列表数据
       getClassRoomList();
+      scrollContainerHeight.value =scrollContainerRef.value.clientHeight
+      window.addEventListener("resize", function () {
+        scrollContainerHeight.value =scrollContainerRef.value.clientHeight
+      });
+
     });
 
     onBeforeUnmount(() => {
@@ -802,7 +809,6 @@ export default {
     let scrollRef = ref(null);
     const offset = () => {
       console.log("滚动完成一次");
-      
     };
     const searchHandel = async () => {
       getClassRoomList();
@@ -874,6 +880,8 @@ export default {
       cureetStatus,
       scrollRef,
       offset,
+      scrollContainerHeight,
+      scrollContainerRef
     };
   },
 };

src/components/right.vue

@@ -44,7 +44,7 @@
           <countTo
             :startVal="0"
             :endVal="item.number"
-            :decimals="2"
+            :decimals="0"
             :duration="3000"
           ></countTo>
           <img :src="deviceImg + item.icon + '.png'" alt="" />
@@ -618,4 +618,11 @@ export default {
 .d-player-video{
   display: flex;
 }
+
+
+.el-drawer{
+  background-color: transparent !important;
+  padding: 0px !important;
+  box-shadow:none !important;
+}
 </style>