终端报警

package.json

@@ -12,6 +12,7 @@
     "dayjs": "^1.11.10",
     "path": "^0.12.7",
     "vue": "^3.3.4",
+    "vue-seamless-scroll": "^1.1.23",
     "vue3-seamless-scroll": "^2.0.1"
   },
   "devDependencies": {

src/components/body-d-left/twoL.vue

@@ -40,7 +40,7 @@ function initChart(xData,ydata){
       top: '10%',
       left:'8%',
       right:'8%',
-      bottom: '14%'
+      bottom: '20%'
     },
     xAxis: {
       type: 'category',
@@ -82,6 +82,9 @@ function initChart(xData,ydata){
     ]
   }
   myChart.setOption(options)
+  window.addEventListener('resize', () => {
+    myChart.resize();
+  });
 }
 </script>
 <style scoped lang="less">

src/components/body-d-right/oneR.vue

@@ -2,25 +2,20 @@
   <div>
     <public-title title="健康终端报警"/>
     <div class="inner">
-<!--      <vue3SeamlessScroll-->
+      <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="main_container">
-<!--          :list="policeLists"-->
+        <div ref="scrollContainer" class="scroll_container">
-<!--          class="scroll"-->
+          <div v-for="item in policeLists" :key="item.id" class="scroll_item">
-<!--          :step="0.5"-->
+            <span>{{ item.name }}</span>
-<!--          hover="true"-->
+          </div>
-<!--      >-->
+        </div>
-<!--        <div class="item" v-for="(item, index) in policeLists" :key="index">-->
+      </div>
-<!--          <span>{{ item.title }}</span>-->
-<!--          <span>{{ item.date }}</span>-->
-<!--        </div>-->
-<!--      </vue3SeamlessScroll>-->
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import {ref} from 'vue';
+import { ref, onMounted, onBeforeUnmount, onUnmounted, nextTick} from 'vue';
 import PublicTitle from "../publicTitle.vue";
 
-
 const policeLists = ref([
   {
     name: '陈天宇',
@@ -37,29 +32,114 @@ const policeLists = ref([
     abnormal: '压力异常(82)',
     time: '2023-8-25',
   },
+  {
+    name: '陈天宇',
+    abnormal: '压力异常(82)',
+    time: '2023-8-25',
+  },
+  {
+    name: '陈天宇',
+    abnormal: '压力异常(82)',
+    time: '2023-8-25',
+  },
   {
     name: '陈天宇',
     abnormal: '压力异常(82)',
     time: '2023-8-25',
   }
 ])
+  let timer = ref(null)
+  let scrollContainer = ref(null)
+  start()
+  // 注：示例中的 listData 写的是静态数据，可以直接调用 start()
+  // 如果是接口获取 listData 列表时，需要在 nextTick 中调用 start()
+  // 否则，进入页面不会滚动。必须鼠标移入移出才会滚动
+  // 用 nextTick 的原因是需要等 dom 元素加载完毕后再执行方法
+
+  // let chartData = reactive({
+  //     data: []
+  // })
+  // function getSensorData() {
+  //     GetSensorData().then(res=> {
+  //         chartData.data = res.data.data
+  //         nextTick(()=>{
+  //             start()
+  //         })
+  //     })
+  // }
+
+  // onMounted(()=> {
+  //     getSensorData()
+  // })
+
+  onBeforeUnmount(() => {
+    clearTimeout(timer.value)
+  })
+  onUnmounted(() => {
+    clearTimeout(timer.value)
+  })
+
+  function handleMouseEnter() {
+    clearTimeout(timer.value)
+  }
+
+  function handleMouseLeave() {
+    start()
+  }
+
+  // 开启定时器
+  function start() {
+    clearTimeout(timer.value)
+    // 定时器触发周期
+    let speed = ref(30)
+    timer.value = setInterval(ListScroll, speed.value)
+  }
+
+  function ListScroll() {
+    let scrollDom = scrollContainer.value
+    // 判读组件是否渲染完成
+    if (scrollDom.offsetHeight == 0) {
+      scrollDom = scrollContainer.value
+    } else {
+      // 如果列表数量过少不进行滚动
+      if (scrollDom.children.length < 8) {
+        clearTimeout(timer.value)
+        return
+      }
+      // 组件进行滚动
+      scrollDom.scrollTop += 1
+      // 判断是否滚动到底部
+      if (scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
+        // 获取组件第一个节点
+        let first = scrollDom.children[0]
+        // 删除节点
+        scrollDom.removeChild(first)
+        // 将该节点拼接到组件最后
+        scrollDom.append(first)
+      }
+    }
+  }
 </script>
 <style scoped lang="less">
 .inner {
   height: calc(100% - 40px);
-
+  .main_container {
-  .scroll {
+    width: 100%;
-    height: 200px;
+    height: 100%;
-    width: 500px;
+    padding: 20px;
-    margin: 100px auto;
+    .scroll_container {
+      width: 100%;
+      height: 100%;
       overflow: hidden;
+      .scroll_item {
+        background-color: #1818b6;
+        margin: 16px 0;
+        padding: 12px 0;
+        span{
+          color: #FFFFFF;
+        }
+      }
     }
-
-  .scroll .item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 3px 0;
   }
 }
 </style>

src/components/body-d-right/twoR.vue

@@ -69,6 +69,9 @@ function initChart(xData,ydata){
     ]
   }
   myChart.setOption(options)
+  window.addEventListener('resize', () => {
+    myChart.resize();
+  });
 }
 </script>
 <style scoped lang="less">