修改从督课出来后左侧滚动偶尔出现滚动条问题

public/config.js

@@ -15,6 +15,6 @@ window.g = {
     // BASE_API: "http://192.168.4.219:12397/ioc-server",
     // UE_IP: "http://192.168.4.159"
     // UE_IP: "http://127.0.0.1:80"
-    // UE_IP: "ws://192.168.4.152:81"
+    // UE_IP: "ws://192.168.4.148:88"
     UE_IP: "http://192.168.4.101:81/"
 };

src/assets/css/left.scss

@@ -411,13 +411,18 @@
                     line-height: 22px;
 
                     .item-content-left {
-                        flex: 6;
-
+                        flex: 1;
+                        .position {
+                           width: 150px;
+                           white-space: nowrap;
+                           text-overflow: ellipsis;
+                           overflow: hidden;
+                        }
                     }
 
                     .item-content-right {
                         margin-left: 10px;
-                        flex: 7;
+                        flex: 1;
 
                         // margin-left: 20px;s
                         .person-rate-container {

src/components/home.vue

@@ -1,9 +1,10 @@
 <template>
   <!-- <div class="container" > -->
+
   <Header />
   <img class="bg-shadow" :src="bgShadow" alt="" srcset="">
   <div v-show="isShowLeft">
-    <Left ref="childRef" @childMethod="childMethod"></Left>
+    <Left ref="childRef" @childMethod="childMethod" :isShow='isShowLeft'></Left>
   </div>
 
   <right v-if="isShowRight"></right>

src/components/left.vue

@@ -8,15 +8,15 @@
         <div id="myChart"></div>
         <div class="list">
           <div class="item" v-for="(item, index) in classRoomCount" :key="index" :style="{
-            borderRight:
-              index == 0
-                ? '2px solid #0BF'
-                : index == 1
-                  ? '2px solid #00EB7D'
-                  : index == 2
-                    ? '2px solid #FB0'
-                    : '',
-          }">
+        borderRight:
+          index == 0
+            ? '2px solid #0BF'
+            : index == 1
+              ? '2px solid #00EB7D'
+              : index == 2
+                ? '2px solid #FB0'
+                : '',
+      }">
             <!-- <i :style="{ backgroundColor: item.color }"></i> -->
             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"
               v-if="index === 0">
@@ -99,7 +99,7 @@
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item :command="item.gis_building_code" v-for="(item, index) in buildings" :key="index">{{
-                    item.building_name }}</el-dropdown-item>
+        item.building_name }}</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -113,7 +113,7 @@
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item :command="item.category" v-for="(item, index) in categoryType" :key="index">{{
-                    item.category }}</el-dropdown-item>
+        item.category }}</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -127,7 +127,7 @@
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item :command="item.leaf" v-for="(item, index) in leafs" :key="index">{{ item.leaf_name
-                  }}</el-dropdown-item>
+                    }}</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -141,7 +141,7 @@
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item :command="item.status_code" v-for="(item, index) in statuses" :key="index">{{
-                    item.status_name }}</el-dropdown-item>
+        item.status_name }}</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -154,12 +154,11 @@
           <!-- <div v-if="classRoomList.length > 0" style="width: 100%; height: 100%"> -->
           <div class="scroll-container" ref="scrollContainerRef">
             <div :style="{
-              height: scrollContainerHeight + 'px',
-              overflow: 'hidden',
-              paddingTop: '10px',
-            }" v-if="classRoomList.length > 0 && isShhow">
-              <vue-auto-scroll :data="classRoomList" :steep="0.5" scrollDirection="top" :isRoller="true"
-                :rollerScrollDistance="50">
+        height: scrollContainerHeight + 'px',
+        overflow: 'hidden',
+        paddingTop: '10px',
+      }" v-if="classRoomList.length > 0 && isShhow">
+              <vue-auto-scroll :steep="0.5" scrollDirection="top" :isRoller="true" :rollerScrollDistance="50">
                 <div class="li" v-for="(item, index) in classRoomList" :key="index">
                   <div class="list-item">
                     <div class="class-status-btn-container">
@@ -176,7 +175,7 @@
 
                     <div class="item-content">
                       <div class="item-content-left">
-                        <div class="position">位置：{{ item.location }}</div>
+                        <div class="position" :title="item.location">位置：{{ item.location }}</div>
                         <div class="course" v-if="item.course_name">
                           课程：{{ item.course_name }}
                         </div>
@@ -189,9 +188,9 @@
                           </div>
                           <div style="margin-left: 8px" v-if="item.actual != null">
                             到课率：{{
-                              (item.actual / item.expected).toFixed(2) * 100 ||
-                              0
-                            }}%
+        (item.actual / item.expected).toFixed(2) * 100 ||
+        0
+      }}%
                           </div>
                         </div>
                       </div>
@@ -228,8 +227,8 @@
     <div class="model-detail">
       <span><span class="title">教室状态: </span>
         <span :class="classInfo.online ? 'green' : 'red'">{{
-          classInfo && classInfo.status
-        }}</span>
+        classInfo && classInfo.status
+      }}</span>
       </span>
 
       <span><span class="title">班级: </span>
@@ -265,6 +264,7 @@ import {
   nextTick,
   getCurrentInstance,
   computed,
+  watch,
 } from "vue";
 import {
   ElScrollbar,
@@ -305,7 +305,25 @@ export default {
     Scroll,
     ArrowDown,
   },
-  setup(_, { emit }) {
+  props: {
+    isShow: {
+      type: Boolean,
+      default: true,
+    },
+
+  },
+  setup(props, { emit }) {
+    watch(
+      () => props.isShow,
+      (newValue) => {
+        if (newValue) {
+          clearTimeoutTimer(); // 清除定时器
+          startTimeInterval();// 重新开始定时器
+        } else {
+          clearTimeoutTimer(); // 清除定时器
+        }
+      }
+    )
     // 教室分类统计
     const classRoomCount = ref([]);
 
@@ -598,16 +616,16 @@ export default {
     let testMain = ref(null);
     let scrollContainerRef = ref(null);
     let scrollContainerHeight = ref(null);
-    onMounted(() => {
-      getClassData();
-      //start();
-      // 获取教师下拉选择数据
-      getClassSelections();
-      //获取教室列表数据
-      getClassRoomList();
-      scrollContainerHeight.value = scrollContainerRef.value.clientHeight;
+    let setTimeoutTimerId = ref(null);
 
-      setInterval(() => {
+    const clearTimeoutTimer = () => {
+      if (setTimeoutTimerId.value) {
+        clearTimeout(setTimeoutTimerId.value);
+        setTimeoutTimerId.value = null; // 重置定时器 ID
+      }
+    };
+    const startTimeInterval = () => {
+      setTimeoutTimerId.value = setInterval(() => {
         getClassData();
         //start();
         // 获取教师下拉选择数据
@@ -615,6 +633,20 @@ export default {
         //获取教室列表数据
         getClassRoomList();
       }, 30000);
+    };
+    onMounted(() => {
+      getClassData();
+      // 获取教师下拉选择数据
+      getClassSelections();
+      //获取教室列表数据
+      getClassRoomList();
+      scrollContainerHeight.value = scrollContainerRef.value.clientHeight;
+
+      clearTimeoutTimer();//清除定时器
+      startTimeInterval();//开启定时器
+
+
+
     });
 
     onBeforeUnmount(() => {
@@ -627,19 +659,6 @@ export default {
     function testMove() {
       clearTimeout(timer.value);
     }
-
-    function testMend() {
-      start();
-    }
-    //开启定时器方法
-    function start() {
-      //清除定时器
-      clearTimeout(timer.value);
-      //定时器触发周期
-      let speed = ref(75);
-      timer.value = setInterval(MarqueeTest, speed.value);
-      starttimeInterval()
-    }
     function MarqueeTest() {
       return;
       let test1 = testMain.value;
@@ -787,7 +806,6 @@ export default {
       classRoom,
       interDevice,
       handleRoom,
-      testMend,
       testMove,
       testMain,
       popoverRef,