<template>
|
<!-- <div class="border-r-small m-h-2 p-h-4"> -->
|
<BaseCard>
|
<el-scrollbar ref="scrollbarRef" :height="height">
|
<div ref="scrollContentRef">
|
<div v-for="item in streams" :key="item.index">
|
<el-text type="primary">[{{ item.time }}]: </el-text>
|
<el-text>用户</el-text>
|
<el-text type="warning">{{ item.user }}</el-text>
|
<el-text>在</el-text>
|
<el-text type="success">{{ item.obj }}</el-text>
|
<el-text>{{ item.event }}</el-text>
|
</div>
|
</div>
|
</el-scrollbar>
|
</BaseCard>
|
<!-- </div> -->
|
</template>
|
<script setup>
|
import { reactive, ref, onMounted, inject } from 'vue'
|
import dayjs from 'dayjs'
|
|
import { unCalc } from '@/utils/css-util'
|
|
const excludeMapHeight = inject('excludeMapHeight')
|
const height = `calc(${unCalc(excludeMapHeight)} - 36px)`
|
|
const streams = reactive([])
|
const scrollContentRef = ref()
|
const scrollbarRef = ref()
|
|
const users = ['pcheck', 'zzq', 'xzq']
|
const events = [
|
'新增一个问题',
|
'新增一项现场整改',
|
'审核了一个问题',
|
'审核了一个整改',
|
'开始巡查',
|
'结束巡查'
|
]
|
const objs = [
|
'大宁国际学校(小学部)新建工程',
|
'新建472街坊公共绿地和地下空间开发项目',
|
'黄浦江延伸段WS3单元xH130E街坊030406070911地块',
|
'徐汇区龙华街道188N-F-04地块（桩基工程）',
|
'网易上海西岸研发中心项目',
|
'徐汇区黄浦江南延伸段WS3单元xh130D街坊03、04、06、08、09、11和12地块项目桩基工程',
|
'太保家园·上海静安国际康养社区项目装修工程',
|
'彭浦西系统雨调蓄池工程',
|
'徐汇区长桥街道395街坊xh311B-07B地块新建幼儿园',
|
'彭一住宅小区旧住房拆除重建工程',
|
'阿里巴巴上海徐汇项目二期'
|
]
|
|
function scrollToBottom() {
|
const h1 = scrollContentRef.value.clientHeight + 100
|
setTimeout(() => {
|
scrollbarRef.value.setScrollTop(h1)
|
}, 100)
|
}
|
|
onMounted(() => {
|
// setInterval(() => {
|
// streams.push({
|
// time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
// user: users[parseInt(Math.random() * users.length)],
|
// obj: objs[parseInt(Math.random() * objs.length)],
|
// event: events[parseInt(Math.random() * events.length)]
|
// })
|
// scrollToBottom()
|
// }, 10000)
|
})
|
</script>
|
