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.
296 lines
6.8 KiB
296 lines
6.8 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-08 10:43:52
|
|
@ 备注: 自定义应用时间轴视图
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { multiViewPage } from '@/api/DesignForm/requestapi'
|
|
import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
|
|
import {
|
|
json2string
|
|
} from '@/utils/DesignForm/form'
|
|
const props = defineProps({
|
|
data:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
viewLayout:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
columnsFilter:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
searchSend:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
drawerWith:{
|
|
type:Number,
|
|
default:0
|
|
}
|
|
});
|
|
const svg = `
|
|
<path class="path" d="
|
|
M 30 15
|
|
L 28 17
|
|
M 25.61 25.61
|
|
A 15 15, 0, 0, 1, 15 30
|
|
A 15 15, 0, 1, 1, 27.99 7.5
|
|
L 15 15
|
|
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
|
`
|
|
|
|
const loadTimePage = ref(false)
|
|
const noMore = ref(false)
|
|
const timeDisabled = computed(() => noMore.value || loadTimePage.value)
|
|
let chuDiNumber = 0
|
|
const loadTimeLog = () =>{
|
|
loadTimePage.value = true
|
|
chuDiNumber ++
|
|
// console.log("触底次数",chuDiNumber,loadTimePage.value)
|
|
if(loadTimePage.value){
|
|
props.searchSend.page= chuDiNumber
|
|
searchTimeList(props.searchSend)
|
|
}
|
|
|
|
}
|
|
const total = ref<number>(0)
|
|
const count = ref<number>(0)
|
|
const timeInfoList = ref<any[]>([])
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-08 13:11:43
|
|
@ 功能: 时间轴数据搜索
|
|
*/
|
|
const searchTimeList = (val:any,clas?:number) =>{
|
|
loadTimePage.value = true
|
|
console.log("时间轴数据搜索",val)
|
|
console.log("时间轴数据搜索--->",props.columnsFilter)
|
|
val.viewClass = {
|
|
class:"time",
|
|
sortWord:"creater_time",
|
|
sort:1,
|
|
startTime:"",
|
|
endTime:"",
|
|
dayType:"",
|
|
mapWord:""
|
|
}
|
|
if(clas && clas != 1){
|
|
console.log("时间轴数据搜索-11111-->",timeInfoList.value.length)
|
|
if(timeInfoList.value.length > 0){
|
|
val.oldData = json2string(timeInfoList.value)
|
|
}else{
|
|
val.oldData = ""
|
|
}
|
|
}
|
|
|
|
|
|
multiViewPage(val)
|
|
.then((data:any) =>{
|
|
console.log("时间轴数据搜索--1->",data)
|
|
total.value = data.data.total
|
|
count.value = data.data.count
|
|
timeInfoList.value = data.data.list
|
|
if(data.data.count == val.pagesize){
|
|
|
|
noMore.value = false
|
|
}else{
|
|
noMore.value = true
|
|
}
|
|
|
|
|
|
})
|
|
.finally(()=>{
|
|
nextTick(()=>{
|
|
loadTimePage.value = false
|
|
})
|
|
})
|
|
}
|
|
|
|
defineExpose({
|
|
searchTimeList
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-09 16:21:03
|
|
@ 功能: 判断当前值
|
|
*/
|
|
const judgeGainVal = (key:string,val:any) => {
|
|
// console.log("判断当前值--1->",val)
|
|
if(val[key]){
|
|
return val[key]
|
|
}
|
|
return ""
|
|
// console.log("判断当前值--3->",val[key])
|
|
// if(val){
|
|
// val.forEach((item,index)=>{
|
|
// console.log("判断当前值--3->",item,index)
|
|
// })
|
|
// }
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-09 16:32:06
|
|
@ 功能: 要显示得字段
|
|
*/
|
|
const showWork = computed(() => {
|
|
let ary = [];
|
|
if(props.columnsFilter){
|
|
props.columnsFilter.forEach((item)=>{
|
|
if(item.fieldClass != "-" && item.fieldClass != "__control"){
|
|
ary.push(item)
|
|
}
|
|
})
|
|
}
|
|
return ary
|
|
})
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-03 13:24:06
|
|
@ 功能: 查看详细内容
|
|
*/
|
|
const tablePageClass = ref(1)
|
|
const lookPageInfoIsShow = ref(false)
|
|
const pageInfoCont = ref<any>()
|
|
const lookPageInfo = (val:any) => {
|
|
tablePageClass.value = 4;
|
|
pageInfoCont.value = val
|
|
lookPageInfoIsShow.value = true;
|
|
}
|
|
</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,sunIndex) in timeInfoList" :key="index" :hollow="item.class_type$unit==1" :type="item.class_type$unit==1?'primary':''" :icon="item.class_type$unit==1?'':'MoreFilled'" :size="item.class_type$unit==1?'large':''">
|
|
<div class="timeLeft" v-if="item.class_type$unit==1">
|
|
<table>
|
|
<tr>
|
|
<td rowspan="2">
|
|
<el-text class="leftDay">{{item.day}}</el-text>
|
|
</td>
|
|
<td >
|
|
<el-text>{{item.weekDay}}</el-text>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td >
|
|
<el-text>{{item.dateTime}}</el-text>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="leftCont" v-if="item.class_type$unit==1">
|
|
|
|
</div>
|
|
<el-card v-if="item.class_type$unit!=1" @click="lookPageInfo(item)">
|
|
|
|
<el-descriptions
|
|
class="margin-top"
|
|
title=""
|
|
:column="3"
|
|
border
|
|
>
|
|
<el-descriptions-item v-for="itemField in showWork" :label="itemField.label" >
|
|
|
|
{{judgeGainVal(itemField.field,item)}}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<!-- <div v-for="itemField in props.columnsFilter" >
|
|
<div v-if="itemField.fieldClass!='-'&&itemField.fieldClass!='__control'">
|
|
{{itemField.label}}:{{judgeGainVal(itemField.field,item)}}
|
|
</div>
|
|
</div> -->
|
|
</el-card>
|
|
</el-timeline-item>
|
|
|
|
|
|
|
|
<!-- <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">
|
|
<div v-for="item in props.columnsFilter" >
|
|
<div v-if="item.fieldClass!='-'&&item.fieldClass!='__control'">
|
|
{{item.label}}{{item.fieldClass!='-'}}
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-timeline-item> -->
|
|
</el-timeline>
|
|
<p class="jichuClass"
|
|
v-loading="loadTimePage"
|
|
element-loading-text="Loading..."
|
|
:element-loading-spinner="svg"
|
|
element-loading-svg-view-box="-10, -10, 50, 50"
|
|
></p>
|
|
<p class="jichuClass sizeMove" v-if="noMore">数据已全部展示！</p>
|
|
<FormPageCont v-model:is-show="lookPageInfoIsShow" :drawer-with="props.drawerWith" :page-info="pageInfoCont" :table-page-class="tablePageClass" :oper-state="operState" @getPageData="getPageData" />
|
|
</ul>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.infinite-list {
|
|
height: calc(100vh - 280px);
|
|
// 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; /* 垂直居中 */
|
|
}
|
|
.jichuClass{
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.sizeMove{
|
|
color: #FF0000;
|
|
font-size: 14px
|
|
}
|
|
</style>
|
|
|