ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/app/timeAxis.vue

<!--
@ 作者: 秦东
@ 时间: 2024-07-08 10:43:52
@ 备注: 自定义应用时间轴视图
-->
<script lang='ts' setup>
import { multiViewPage } from '@/api/DesignForm/requestapi'
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 {}
		}
	}
});
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) =>{
	loadTimePage.value = true
	console.log("时间轴数据搜索",val)
	console.log("时间轴数据搜索--->",props.columnsFilter)
	val.viewClass = {
		class:"time",
        sortWord:"creater_time",
        sort:1,
        startTime:"",
        endTime:"",
        dayType:"",
        mapWord:""
	}
	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
})
</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">

					<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>
	</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; /* 垂直居中 */
}
.jichuClass{
	width: 100%;
    text-align: center;
}
.sizeMove{
	color: #FF0000;
	font-size: 14px
}
</style>