弹窗

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

@@ -2,21 +2,24 @@
   <div>
     <public-title title="健康终端报警"/>
     <div class="inner">
-      <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="main_container">
-        <div ref="scrollContainer" class="scroll_container">
-          <div v-for="item in policeLists" :key="item.id" class="scroll_item">
-            <span>{{ item.name }}</span>
-          </div>
+      <vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
+        <div class="item" v-for="(item, index) in policeLists" :key="index">
+          <span>{{item.name}}</span>
+          <span>{{item.abnormal}}</span>
+          <div class="time-icon">
+            <span>{{item.time}}</span>
+            <span class="terminal-icon"></span>
           </div>
         </div>
+      </vue3-seamless-scroll>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, onUnmounted, nextTick} from 'vue';
-import PublicTitle from "../publicTitle.vue";
-
-const policeLists = ref([
+  import { ref } from 'vue';
+  import PublicTitle from "../publicTitle.vue";
+  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+  const policeLists = ref([
     {
       name: '陈天宇',
       abnormal: '压力异常(82)',
@@ -47,97 +50,39 @@ const policeLists = ref([
       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 {
-    width: 100%;
-    height: 100%;
-    padding: 20px;
-    .scroll_container {
-      width: 100%;
-      height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .scroll {
+    width: 90%;
+    height: 88%;
     overflow: hidden;
-      .scroll_item {
-        background-color: #1818b6;
-        margin: 16px 0;
-        padding: 12px 0;
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 18px 0;
       span{
-          color: #FFFFFF;
+        color:#ffffff;
+        font-size: 16px;
       }
+      .time-icon {
+        display: flex;
+        align-items: center;
+      }
+      .terminal-icon {
+        margin-left: 20px;
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+        background: url("../../assets/images/terminal.png") no-repeat;
+        background-size: 100% 100%;
       }
     }
   }

src/components/dialog/Dialog.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Dialog"
+}
+</script>
+
+<style scoped>
+
+</style>