弹窗
This commit is contained in:
zhaotiantian
Binary file not shown.
|
After Width: | Height: | Size: 314 B |
@@ -2,142 +2,87 @@
|
|||||||
<div>
|
<div>
|
||||||
<public-title title="健康终端报警"/>
|
<public-title title="健康终端报警"/>
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="main_container">
|
<vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
|
||||||
<div ref="scrollContainer" class="scroll_container">
|
<div class="item" v-for="(item, index) in policeLists" :key="index">
|
||||||
<div v-for="item in policeLists" :key="item.id" class="scroll_item">
|
<span>{{item.name}}</span>
|
||||||
<span>{{ item.name }}</span>
|
<span>{{item.abnormal}}</span>
|
||||||
|
<div class="time-icon">
|
||||||
|
<span>{{item.time}}</span>
|
||||||
|
<span class="terminal-icon"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</vue3-seamless-scroll>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onBeforeUnmount, onUnmounted, nextTick} from 'vue';
|
import { ref } from 'vue';
|
||||||
import PublicTitle from "../publicTitle.vue";
|
import PublicTitle from "../publicTitle.vue";
|
||||||
|
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||||
const policeLists = ref([
|
const policeLists = ref([
|
||||||
{
|
{
|
||||||
name: '陈天宇',
|
name: '陈天宇',
|
||||||
abnormal: '压力异常(82)',
|
abnormal: '压力异常(82)',
|
||||||
time: '2023-8-25',
|
time: '2023-8-25',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '陈天宇',
|
name: '陈天宇',
|
||||||
abnormal: '压力异常(82)',
|
abnormal: '压力异常(82)',
|
||||||
time: '2023-8-25',
|
time: '2023-8-25',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '陈天宇',
|
name: '陈天宇',
|
||||||
abnormal: '压力异常(82)',
|
abnormal: '压力异常(82)',
|
||||||
time: '2023-8-25',
|
time: '2023-8-25',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '陈天宇',
|
name: '陈天宇',
|
||||||
abnormal: '压力异常(82)',
|
abnormal: '压力异常(82)',
|
||||||
time: '2023-8-25',
|
time: '2023-8-25',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '陈天宇',
|
name: '陈天宇',
|
||||||
abnormal: '压力异常(82)',
|
abnormal: '压力异常(82)',
|
||||||
time: '2023-8-25',
|
time: '2023-8-25',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '陈天宇',
|
name: '陈天宇',
|
||||||
abnormal: '压力异常(82)',
|
abnormal: '压力异常(82)',
|
||||||
time: '2023-8-25',
|
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>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.inner {
|
.inner {
|
||||||
height: calc(100% - 40px);
|
height: calc(100% - 40px);
|
||||||
.main_container {
|
display: flex;
|
||||||
width: 100%;
|
align-items: center;
|
||||||
height: 100%;
|
justify-content: center;
|
||||||
padding: 20px;
|
.scroll {
|
||||||
.scroll_container {
|
width: 90%;
|
||||||
width: 100%;
|
height: 88%;
|
||||||
height: 100%;
|
overflow: hidden;
|
||||||
overflow: hidden;
|
.item {
|
||||||
.scroll_item {
|
display: flex;
|
||||||
background-color: #1818b6;
|
align-items: center;
|
||||||
margin: 16px 0;
|
justify-content: space-between;
|
||||||
padding: 12px 0;
|
padding: 18px 0;
|
||||||
span{
|
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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Dialog"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user