You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
2.5 KiB
122 lines
2.5 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-08 10:43:52
|
|
@ 备注: 自定义应用时间轴视图
|
|
-->
|
|
<script lang='ts' setup>
|
|
|
|
const props = defineProps({
|
|
data:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
viewLayout:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
columnsFilter:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
const loadTimePage = ref(false)
|
|
const noMore = ref(false)
|
|
const timeDisabled = computed(() => noMore.value || loadTimePage.value)
|
|
let chuDiNumber = 0
|
|
const loadTimeLog = () =>{
|
|
noMore.value = true
|
|
chuDiNumber ++
|
|
console.log("触底次数",chuDiNumber)
|
|
}
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-08 13:11:43
|
|
@ 功能: 时间轴数据搜索
|
|
*/
|
|
const searchTimeList = (val:any) =>{
|
|
console.log("时间轴数据搜索",val)
|
|
console.log("时间轴数据搜索--->",props.columnsFilter)
|
|
val.viewClass = {
|
|
class:"time",
|
|
sortWord:"creater_time",
|
|
sort:1,
|
|
startTime:"",
|
|
endTime:"",
|
|
dayType:"",
|
|
mapWord:""
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
searchTimeList
|
|
})
|
|
</script>
|
|
<template>
|
|
<ul v-infinite-scroll="loadTimeLog" class="infinite-list" :infinite-scroll-disabled="timeDisabled">
|
|
{{viewLayout}}
|
|
<el-timeline :reverse="true" class="timeLineStyle">
|
|
<el-timeline-item center v-for="(item,index) in props.data" :key="index" :hollow="index%3==0" :type="index%3==0?'primary':''" :icon="index%3==0?'':'MoreFilled'" :size="index%3==0?'large':''">
|
|
<div class="timeLeft" v-if="index%3==0">
|
|
<table>
|
|
<tr>
|
|
<td rowspan="2">
|
|
<el-text class="leftDay">88</el-text>
|
|
</td>
|
|
<td >
|
|
<el-text>星期三</el-text>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td >
|
|
<el-text>8888/88</el-text>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="leftCont" v-if="index%3==0">
|
|
|
|
</div>
|
|
<el-card v-if="index%3!=0">
|
|
<h4>Update Github template</h4>
|
|
<p v-for="item in props.columnsFilter">{{item.fieldClass}}</p>
|
|
</el-card>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
<p v-if="loadTimePage">Loading...</p>
|
|
<p v-if="noMore">数据已全部展示！</p>
|
|
</ul>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.infinite-list {
|
|
height: calc(100vh - 345px);
|
|
// height:100px;
|
|
padding: 10px 0 0 0;
|
|
margin: 20px 0 0 0;
|
|
list-style: none;
|
|
overflow: auto
|
|
}
|
|
.timeLineStyle{
|
|
margin: 0 0 0 120px;
|
|
}
|
|
.timeLeft{
|
|
position: absolute;
|
|
left: -120px;
|
|
}
|
|
.leftCont{
|
|
height:40px;
|
|
}
|
|
.leftDay{
|
|
font-size:30px;
|
|
padding: 0 5px 0 0;
|
|
vertical-align: middle; /* 垂直居中 */
|
|
}
|
|
</style>
|
|
|