From 143f272da82d6a16f2b7eb476d31a9e966d14dd6 Mon Sep 17 00:00:00 2001
From: zhaotiantian <18710962446@163.com>
Date: Fri, 24 Nov 2023 16:11:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/terminal.png       | Bin 0 -> 314 bytes
 src/components/body-d-right/oneR.vue | 195 ++++++++++-----------------
 src/components/dialog/Dialog.vue     |  13 ++
 3 files changed, 83 insertions(+), 125 deletions(-)
 create mode 100644 src/assets/images/terminal.png
 create mode 100644 src/components/dialog/Dialog.vue

diff --git a/src/assets/images/terminal.png b/src/assets/images/terminal.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1482304f6e515211d21db3a48defaff754843a1
GIT binary patch
literal 314
zcmV-A0mc4_P)<h;3K|Lk000e1NJLTq000dD000dL1^@s6a_i)L00001b5ch_0Itp)
z=>Px#^hrcPR47xGl0QoVU=W9&pAa}i5Pg7Xi3ULtoTaIymWGDrCc#mVwm@9k{0Po2
zEiKW|2gpeYT5Aib!9j31IpLM#MJ3<qxcfc#?>!NonVkUVz$vf~Oo0#JRnm8oDj8;W
z30%b_nf)y3$$d-6%r1cIEkFtlB)!PY4uCGO7ocC@5oiI2!9NEc99mapBI(}DJlRp!
z!N8$Apq2%;LGKPVfl>x-YR_dOhi-xTKbDXrZw{4##txNw4i$hla2&uHFa)YVG5EhE
zb<#iihVu319WUpUG>I4C;0;h&Gv65KOZr<~M0S4;pM~4|l=Krd3%Ko6t{u@^>;M1&
M07*qoM6N<$f<{MxWdHyG

literal 0
HcmV?d00001

diff --git a/src/components/body-d-right/oneR.vue b/src/components/body-d-right/oneR.vue
index 1f5d01e..c1e77b9 100644
--- a/src/components/body-d-right/oneR.vue
+++ b/src/components/body-d-right/oneR.vue
@@ -2,142 +2,87 @@
   <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>
+      <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>
-      </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([
-  {
-    name: '陈天宇',
-    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',
-  },
-  {
-    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)
-      }
+  import { ref } from 'vue';
+  import PublicTitle from "../publicTitle.vue";
+  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+  const policeLists = ref([
+    {
+      name: '陈天宇',
+      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',
+    },
+    {
+      name: '陈天宇',
+      abnormal: '压力异常(82)',
+      time: '2023-8-25',
+    },
+    {
+      name: '陈天宇',
+      abnormal: '压力异常(82)',
+      time: '2023-8-25',
     }
-  }
+  ])
+
 </script>
 <style scoped lang="less">
 .inner {
   height: calc(100% - 40px);
-  .main_container {
-    width: 100%;
-    height: 100%;
-    padding: 20px;
-    .scroll_container {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      .scroll_item {
-        background-color: #1818b6;
-        margin: 16px 0;
-        padding: 12px 0;
-        span{
-          color: #FFFFFF;
-        }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .scroll {
+    width: 90%;
+    height: 88%;
+    overflow: hidden;
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 18px 0;
+      span{
+        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%;
       }
     }
   }
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
new file mode 100644
index 0000000..06c9485
--- /dev/null
+++ b/src/components/dialog/Dialog.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Dialog"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file