55

src/api/calendar/request.ts

@@ -0,0 +1,13 @@
+import request from '@/utils/request';
+
+
+/**
+ * 获取离职率http://localhost:9999/dev-api/api/upordown
+ */
+ export function gainCalendarList(data?: any) {
+	return request({
+	  url: "/systemapi/customer_form/gainCalendarList",
+	  method: 'post',
+	  data: data
+	});
+}

src/components/DesignForm/app/calendar/calendar1/calendarItem.vue

@@ -2,6 +2,7 @@
 import { PropType } from 'vue';
 import DateClass from '@/api/calendar/DateClass';
 import { dateBase } from '@/api/calendar/Calendar';
+import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
 const props = defineProps({
     col: {
         type: Object as PropType<dateBase>,
@@ -13,9 +14,14 @@ const props = defineProps({
         type: String,
         default: '',
     },
+	drawerWith:{
+		type:Number,
+		default:0
+	}
 });
 
 const isCurrentMonth = (time: string) => {
+	// console.log("分割时间",time)
     const months = time.split('-')[1];
     return DateClass.getCurrent()[1] === Number(months);
 }
@@ -32,6 +38,20 @@ const changeTargetDate = (time: dateBase) => {
 const searchtData = (val:any,time?:any) => {
 	return time
 }
+
+/**
+@ 作者: 秦东
+@ 时间: 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>
     <div
@@ -47,39 +67,18 @@ const searchtData = (val:any,time?:any) => {
         ]"
         @click="changeTargetDate(col)"
     >
+	
 		<div class="dayStyle">
 			<span >{{ col.title }}</span>
 			<div  v-if="col.isHolidays">休</div>
 			<span >{{ col.lunarsChina }}</span>
 		</div>
-		<div class="dayList">
-			<div class="dayLogCont">Squeezed by parent element</div>
-			<div class="dayLogCont">
-				{{ searchtData(1,col)}}
-			</div>
-			<div class="dayLogCont">
-				{{ searchtData(1,col)}}
-			</div>
-			<div class="dayLogCont">
-				{{ searchtData(1,col)}}
-			</div>
-			<div class="dayLogCont">
-				{{ searchtData(1,col)}}
-			</div>
-			<div class="dayLogCont">
-				{{ searchtData(1,col)}}
-			</div>
-			<div class="dayLogCont">
-				{{ searchtData(1,col)}}
-			</div>
-			<div class="dayLogCont">
-				{{ searchtData(1,col)}}
-			</div>
-			<div class="dayLogCont">
-				{{ searchtData(1,col)}}
+		<div  v-if="col.list&&col.list.length" class="dayList">
+			<div v-for="lt in col.list" :key="lt.id" class="dayLogCont" @click="lookPageInfo(lt)">
+				{{ lt.serialNumber1718584909710 }}
 			</div>
 		</div>
-        
+        <FormPageCont v-model:is-show="lookPageInfoIsShow" :drawer-with="props.drawerWith" :page-info="pageInfoCont" :table-page-class="tablePageClass" :oper-state="operState" @getPageData="getPageData" />
     </div>
 </template>
 

src/components/DesignForm/app/calendar/calendar1/calendarPage.vue

@@ -26,6 +26,10 @@ const props = defineProps({
 		default(){
 			return {}
 		}
+	},
+	drawerWith:{
+		type:Number,
+		default:0
 	}
 });
 const  taday = ref<any>([]);
@@ -187,9 +191,9 @@ defineExpose({
 			</div>
 		</div>
 		<div class="weekNumber">
-			<MonthPage ref="monthPageRef" v-if="curtteDayType==1" :body-hight="props.bodyHight" :ta-day="taday"  :search-send="props.searchSend" />
-			<WeekPage ref="weekPageRef" v-if="curtteDayType==2" :body-hight="props.bodyHight" :ta-day="taday"  :search-send="props.searchSend" />
-			<DayPage ref="dayPageRef" v-if="curtteDayType==3" :body-hight="props.bodyHight" :ta-day="taday"  :search-send="props.searchSend" />
+			<MonthPage ref="monthPageRef" v-if="curtteDayType==1" :body-hight="props.bodyHight" :ta-day="taday"  :search-send="props.searchSend" :drawer-with="props.drawerWith" />
+			<WeekPage ref="weekPageRef" v-if="curtteDayType==2" :body-hight="props.bodyHight" :ta-day="taday"  :search-send="props.searchSend" :drawer-with="props.drawerWith" />
+			<DayPage ref="dayPageRef" v-if="curtteDayType==3" :body-hight="props.bodyHight" :ta-day="taday"  :search-send="props.searchSend" :drawer-with="props.drawerWith" />
 		</div>
 	</div>
 </template>

src/components/DesignForm/app/calendar/calendar1/dayPage.vue

@@ -8,6 +8,8 @@ import Calendar from '@/api/calendar/Calendar';
 import DateClass from '@/api/calendar/DateClass';
 import { dateBase } from '@/api/calendar/Calendar';
 import { clockFactory } from '@/api/calendar/utils';
+import { gainCalendarList } from '@/api/calendar/request';
+
 const props = defineProps({
 	bodyHight:Number,
 	taDay:{
@@ -21,6 +23,10 @@ const props = defineProps({
 		default(){
 			return {}
 		}
+	},
+	drawerWith:{
+		type:Number,
+		default:0
 	}
 });
 
@@ -62,7 +68,7 @@ const changeDate = (time: dateBase) => {
     selectedTime.value = time.date;
     emit('getDate', time);
 }
-
+const loadDay = ref(false)
 
 /**
 @ 作者: 秦东
@@ -85,6 +91,12 @@ const searchatDayList = (val:any) => {
 		timeAry:[dayInfo.value]
 	}
 	console.log("获取每天数据条件",sendInfo)
+	gainCalendarList(sendInfo)
+		.then(({data})=>{
+			console.log("获取数据",data)
+			dayInfo.value = data
+		})
+		.finally(()=>{ loadDay.value = false })
 }
 defineExpose({
 	searchatDayList
@@ -97,7 +109,7 @@ defineExpose({
                 {{ curttWeek }}
             </li>
         </ul>
-		<div class="t-calendar-day">
+		<div class="t-calendar-day"  v-loading="loadDay">
 			<template v-if="dayInfo">
 				<div
                     class="t-calendar-row"
@@ -105,6 +117,7 @@ defineExpose({
 				<CalendarItem
                     :col="dayInfo"
                     :time="selectedTime"
+					:drawer-with="props.drawerWith"
                     @changeTargetDate="changeDate"
                 ></CalendarItem>
 				</div>

src/components/DesignForm/app/calendar/calendar1/monthPage.vue

@@ -8,9 +8,11 @@ import Calendar from '@/api/calendar/Calendar';
 import DateClass from '@/api/calendar/DateClass';
 import { dateBase } from '@/api/calendar/Calendar';
 import { clockFactory } from '@/api/calendar/utils';
+import { gainCalendarList } from '@/api/calendar/request';
 
 import CalendarItem from './calendarItem.vue';
 
+
 const props = defineProps({
 	bodyHight:Number,
 	taDay:{
@@ -18,15 +20,35 @@ const props = defineProps({
 		default() {
 			return [2024,7,13];
 		},
+	},
+	searchSend:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	drawerWith:{
+		type:Number,
+		default:0
 	}
 });
-
+const TBody = ref<any[]>([])
+const loadMonth = ref(false)
 onMounted(()=>{
+	TBody.value = Calendar.table(props.taDay)
+	searchatMonthList(props.searchSend)
 	nextTick(()=>{
 		selectedTime.value = props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2])
 	})
 })
 
+watch(()=>props.taDay,(val:any)=>{
+	TBody.value = Calendar.table(props.taDay)
+	searchatMonthList(props.searchSend)
+},{
+	deep: true,
+})
+
 
 const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2]))
 const emit = defineEmits(['getDate']);
@@ -41,9 +63,45 @@ const drawingBoardHeight = computed(()=>{
 //周期
 const THeader = Calendar.title();
 //日期
-const TBody = computed(() =>
-    Calendar.table(props.taDay)
-);
+// const TBody = computed(() =>
+//     Calendar.table(props.taDay)
+// );
+/**
+@ 作者: 秦东
+@ 时间: 2024-07-16 11:53:35
+@ 功能: 获取数据
+*/
+const searchatMonthList = (val:any) => {
+	loadMonth.value = true
+	val.viewClass = {
+		class:"date",
+        sortWord:"",
+        sort:1,
+        startTime:"",
+        endTime:"",
+        dayType:"",
+        mapWord:""
+	}
+	console.log("获取每天数据",val)
+	let sendInfo = {
+		search:val,
+		timeMonthAry:TBody.value,
+		types:1
+	}
+	console.log("获取每天数据条件",sendInfo)
+	gainCalendarList(sendInfo)
+		.then(({data})=>{
+			console.log("获取月份数据",data)
+			TBody.value = data
+		})
+		.finally(()=>{ loadMonth.value = false })
+}
+
+defineExpose({
+	gainCalendarList
+})
+
+
 </script>
 <template>
 	<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'">
@@ -52,7 +110,7 @@ const TBody = computed(() =>
                 {{ item }}
             </li>
         </ul>
-		<div class="t-calendar-day">
+		<div v-loading="loadMonth" class="t-calendar-day">
 			<template v-if="TBody.length">
 				<div
                     class="t-calendar-row"
@@ -67,6 +125,7 @@ const TBody = computed(() =>
 						<CalendarItem
                             :col="col"
                             :time="selectedTime"
+							:drawer-with="props.drawerWith"
                             @changeTargetDate="changeDate"
                         ></CalendarItem>
 					</div>
@@ -75,8 +134,8 @@ const TBody = computed(() =>
             <template v-else>
                 <div class="no-date">抱歉,暂无数据</div>
             </template>
-			 
 		</div>
+		
 	</div>
 </template>
 <style  lang='scss' scoped>

src/components/DesignForm/app/calendar/calendar1/weekPage.vue

@@ -8,6 +8,7 @@ import Calendar from '@/api/calendar/Calendar';
 import DateClass from '@/api/calendar/DateClass';
 import { dateBase } from '@/api/calendar/Calendar';
 import { clockFactory } from '@/api/calendar/utils';
+import { gainCalendarList } from '@/api/calendar/request';
 
 const props = defineProps({
 	bodyHight:Number,
@@ -16,6 +17,16 @@ const props = defineProps({
 		default() {
 			return [2024,7,13];
 		},
+	},
+	searchSend:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	drawerWith:{
+		type:Number,
+		default:0
 	}
 });
 
@@ -25,14 +36,17 @@ const drawingBoardHeight = computed(()=>{
 })
 //周期
 const THeader = Calendar.title();
-const WeekBody = computed(()=>{
-	Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
-	console.log("画板高度--->",props.taDay.start[0]);
-	return Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
+// const WeekBody = computed(()=>{
+// 	Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
+// 	console.log("画板高度--->",props.taDay.start[0]);
+// 	return Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
 
-});
+// });
+const WeekBody = ref<any>([])
 
 onMounted(()=>{
+	WeekBody.value = Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
+	searchatWeekList(props.searchSend)
 	nextTick(()=>{
 		let ddTime = DateClass.getCurrent()
 		selectedTime.value = ddTime[0] + "-" + clockFactory(ddTime[1]) + "-" + clockFactory(ddTime[2])
@@ -44,6 +58,50 @@ const changeDate = (time: dateBase) => {
     selectedTime.value = time.date;
     emit('getDate', time);
 }
+
+const loadWeek = ref(false)
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-07-16 11:53:35
+@ 功能: 获取数据
+*/
+const searchatWeekList = (val:any) => {
+	loadWeek.value = true
+	val.viewClass = {
+		class:"date",
+        sortWord:"",
+        sort:1,
+        startTime:"",
+        endTime:"",
+        dayType:"",
+        mapWord:""
+	}
+	console.log("获取每天数据",val)
+	let sendInfo = {
+		search:val,
+		timeAry:WeekBody.value
+	}
+	console.log("获取每天数据条件",sendInfo)
+	gainCalendarList(sendInfo)
+		.then(({data})=>{
+			console.log("获取数据",data)
+			WeekBody.value = data
+		})
+		.finally(()=>{ loadWeek.value = false })
+}
+
+watch(()=>props.taDay,(val:any)=>{
+	WeekBody.value = Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
+	console.log("监听变化",WeekBody.value)
+	searchatWeekList(props.searchSend)
+},{
+	deep: true,
+})
+
+defineExpose({
+	searchatWeekList
+})
 </script>
 <template>
 	<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'">
@@ -52,7 +110,7 @@ const changeDate = (time: dateBase) => {
                 {{ item }}
             </li>
         </ul>
-		<div class="t-calendar-day">
+		<div class="t-calendar-day" v-loading="loadWeek">
 			<template v-if="WeekBody.length">
 				<div
                     class="t-calendar-row"
@@ -62,6 +120,7 @@ const changeDate = (time: dateBase) => {
 					<CalendarItem
 						:col="item"
 						:time="selectedTime"
+						:drawer-with="props.drawerWith"
 						@changeTargetDate="changeDate"
 					></CalendarItem>
 				</div>

src/components/DesignForm/app/cardPage.vue

@@ -0,0 +1,63 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-07-17 15:35:39
+@ 备注: 卡片视图
+-->
+<script lang='ts' setup>
+const props = defineProps({
+	searchSend:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	viewSetup:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	drawerWith:{
+		type:Number,
+		default:0
+	}
+});
+
+const lineRanks = ref(1)
+
+onMounted(()=>{
+	lineRanks.value = Math.round(24/props.viewSetup.form.ranks)
+})
+
+</script>
+<template>
+	<div>
+	{{lineRanks}}--
+
+		<el-row :gutter="20">
+			<el-col :span="lineRanks">
+				<el-card >
+					<table>
+						<tr>
+							<td rowspan="2">1</td>
+							<td>2</td>
+						</tr>
+						<tr>
+							<td>4</td>
+						</tr>
+					</table>
+				</el-card>
+			</el-col>
+			<el-col :span="lineRanks">1</el-col>
+			<el-col :span="lineRanks">2</el-col>
+			<el-col :span="lineRanks">3</el-col>
+			<el-col :span="lineRanks">4</el-col>
+			<el-col :span="lineRanks">5</el-col>
+			<el-col :span="lineRanks">6</el-col>
+		</el-row>
+	</div>
+	
+</template>
+<style  lang='scss' scoped>
+
+</style>

src/components/DesignForm/app/gannttPage.vue

@@ -0,0 +1,33 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-07-17 15:35:39
+@ 备注: 卡片视图
+-->
+<script lang='ts' setup>
+const props = defineProps({
+	searchSend:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	viewSetup:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	drawerWith:{
+		type:Number,
+		default:0
+	}
+});
+</script>
+<template>
+	<div>
+		{{viewSetup}}
+	</div>
+</template>
+<style  lang='scss' scoped>
+
+</style>

src/components/DesignForm/app/index.vue

@@ -22,6 +22,9 @@ import { softDeletion,retractRunWorkFlow } from '@/api/taskapi/management'
 import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
 import TableFlow from '@/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue'
 import TimeAxisPage from '@/components/DesignForm/app/timeAxis.vue'
+import CardPage from '@/components/DesignForm/app/cardPage.vue'
+import GanttPageIng from '@/components/DesignForm/app/gannttPage.vue'
+import MapPage from '@/components/DesignForm/app/mapPage.vue'
 import CalendarPage from '@/components/DesignForm/app/calendar/calendar1/calendarPage.vue'
 
 
@@ -302,7 +305,8 @@ const searchSend = reactive({
 	formId:props.formId,
 	page:state.currentPage,
 	pagesize:state.pageSize,
-	searchData:json2string(props.searchData)
+	searchData:json2string(props.searchData),
+	viewClass:{}
 })
 let asfDetails = []
 /**
@@ -433,6 +437,9 @@ function getAsfDataTitlesByIds(asfQueryParams: any[]) {
 //liwenxuan 关联表单数据获取 end
 onMounted(()=>{
 	getPageData()
+	nextTick(()=>{
+		drawerWith.value = container.value?.clientWidth
+	})
 })
 /**
 @ 作者: 秦东
@@ -501,8 +508,7 @@ const lookPageInfo = (val:any) => {
 	tablePageClass.value = 4;
 	pageInfoCont.value = val
 	drawerWith.value = container.value?.clientWidth
-	lookPageInfoIsShow.value = true;
-	
+	lookPageInfoIsShow.value = true;	
 }
 /**
 @ 作者: 秦东
@@ -592,12 +598,14 @@ const tabsView = (val:any,types:number) => {
 			props.viewPage.time.isClick = false
 			props.viewPage.gantt.isClick = false
 			props.viewPage.map.isClick = false
+			props.viewPage.card.isClick = false
 			break;
 		case 3:
 			props.viewPage.list.isClick = false
 			props.viewPage.date.isClick = false
 			props.viewPage.gantt.isClick = false
 			props.viewPage.map.isClick = false
+			props.viewPage.card.isClick = false
 			getPageData()
 			break;
 		case 4:
@@ -605,15 +613,25 @@ const tabsView = (val:any,types:number) => {
 			props.viewPage.date.isClick = false
 			props.viewPage.time.isClick = false
 			props.viewPage.map.isClick = false
+			props.viewPage.card.isClick = false
 			break;
 		case 5:
+			props.viewPage.card.isClick = false
+			props.viewPage.list.isClick = false
+			props.viewPage.date.isClick = false
+			props.viewPage.time.isClick = false
+			props.viewPage.gantt.isClick = false
+			break;
+		case 6:
 			props.viewPage.list.isClick = false
 			props.viewPage.date.isClick = false
 			props.viewPage.time.isClick = false
 			props.viewPage.gantt.isClick = false
+			props.viewPage.map.isClick = false
 			break;
 		default:
 			props.viewPage.date.isClick = false
+			props.viewPage.card.isClick = false
 			props.viewPage.time.isClick = false
 			props.viewPage.gantt.isClick = false
 			props.viewPage.map.isClick = false
@@ -739,6 +757,15 @@ const tabsView = (val:any,types:number) => {
 							>
 								<el-button size="small" class="fa fa-table"  :color="viewPage.list.isClick?'#a0cfff':''" @click="tabsView(viewPage.list,1)" />
 							</el-tooltip>
+							<el-tooltip
+								v-if="viewPage.card.status"
+								class="box-item"
+								effect="dark"
+								content="卡片视图"
+								placement="top"
+							>
+								<el-button size="small" class="fa fa-id-card-o"  :color="viewPage.card.isClick?'#a0cfff':''" @click="tabsView(viewPage.card,6)" />
+							</el-tooltip>
 							<el-tooltip
 								v-if="viewPage.date.status"
 								class="box-item"
@@ -952,16 +979,19 @@ const tabsView = (val:any,types:number) => {
 				</div>
 			</el-col>
 			<el-col  v-if="viewType==2" :span="24">
-				<CalendarPage  ref="calendarPageRef"  :search-send="searchSend" :body-hight="265"  />
+				<CalendarPage  ref="calendarPageRef"  :search-send="searchSend" :body-hight="265" :drawer-with="drawerWith"  />
 			</el-col>
 			<el-col  v-if="viewType==3" :span="24">
-				<TimeAxisPage  ref="timeAxisRef" :data="tableDataList" :view-layout="viewLayout" :columns-filter="columnsFilter" :search-send="searchSend" />
+				<TimeAxisPage  ref="timeAxisRef" :data="tableDataList" :view-layout="viewLayout" :columns-filter="columnsFilter" :search-send="searchSend" :drawer-with="drawerWith" />
 			</el-col>
 			<el-col  v-if="viewType==4" :span="24">
-				甘特图
+				<GanttPageIng ref="ganttPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage.gantt" />
 			</el-col>
 			<el-col  v-if="viewType==5" :span="24">
-				地图
+				<MapPage ref="mapPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage.map" />
+			</el-col>
+			<el-col  v-if="viewType==6" :span="24">
+				<CardPage ref="cardPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage.card" />
 			</el-col>
 			<el-col :span="24" style="display:none">
 				<el-button-group>

src/components/DesignForm/app/mapPage.vue

@@ -0,0 +1,33 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-07-17 15:37:59
+@ 备注: 地图视图
+-->
+<script lang='ts' setup>
+const props = defineProps({
+	searchSend:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	viewSetup:{
+		type:Object,
+		default(){
+			return {}
+		}
+	},
+	drawerWith:{
+		type:Number,
+		default:0
+	}
+});
+</script>
+<template>
+	<div>
+		{{viewSetup}}
+	</div>
+</template>
+<style  lang='scss' scoped>
+
+</style>

src/components/DesignForm/app/timeAxis.vue

@@ -5,6 +5,7 @@
 -->
 <script lang='ts' setup>
 import { multiViewPage } from '@/api/DesignForm/requestapi'
+import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
 import {
     json2string
 } from '@/utils/DesignForm/form'
@@ -32,6 +33,10 @@ const props = defineProps({
 		default(){
 			return {}
 		}
+	},
+	drawerWith:{
+		type:Number,
+		default:0
 	}
 });
 const svg = `
@@ -149,6 +154,20 @@ const showWork = computed(() => {
 	}
 	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">
@@ -159,45 +178,45 @@ const showWork = computed(() => {
 			
 				<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">
+						<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>
+						<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>
+						<!-- <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>
 		
 
@@ -239,6 +258,7 @@ const showWork = computed(() => {
     		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>

src/components/DesignForm/tableListPage/index.vue

@@ -19,6 +19,11 @@ import { softDeletion,retractRunWorkFlow } from '@/api/taskapi/management'
 //引入组件
 import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
 import TableFlow from '@/views/sysworkflow/lowcodepage/pageFlow/tableFlow.vue'
+import TimeAxisPage from '@/components/DesignForm/app/timeAxis.vue'
+import CardPage from '@/components/DesignForm/app/cardPage.vue'
+import GanttPage from '@/components/DesignForm/app/gannttPage.vue'
+import MapPage from '@/components/DesignForm/app/mapPage.vue'
+import CalendarPage from '@/components/DesignForm/app/calendar/calendar1/calendarPage.vue'
 
 const props = withDefaults(
     defineProps<{
@@ -104,6 +109,9 @@ const state = reactive({
     columnsCheck: designStore.getColumnsCheck(route.path),
     currentNodeKey: ''
 })
+
+const viewType = ref(1)
+const viewLayout = ref<any>()
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-28 16:03:12
@@ -280,6 +288,17 @@ watch(()=>props.lookPageIsShow,(val:boolean)=>{
 		
 	}
 })
+
+const timeAxisRef = ref(null)
+const calendarPageRef = ref(null)
+const searchSend = reactive({
+	formId:props.formId,
+	page:state.currentPage,
+	pagesize:state.pageSize,
+	searchData:json2string(props.searchData),
+	viewClass:{}
+})
+
 let asfDetails = []
 
 /**
@@ -375,6 +394,9 @@ const getPageData = () => {
 }
 onMounted(()=>{
 	getPageData()
+	nextTick(()=>{
+		drawerWith.value = container.value?.clientWidth
+	})
 })
 //liwenxuan 关联表单数据获取 start
 function getAsfDataTitlesByIds(asfQueryParams: any[]) {
@@ -525,10 +547,67 @@ const editFormSendFlow = (val:any) => {
 	drawerWith.value = container.value?.clientWidth
 	lookPageInfoIsShow.value = true;
 }
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-07-08 09:39:52
+@ 功能: 切换视图展示方式
+*/
+const tabsView = (val:any,types:number) => {
+	viewType.value = types
+	val.isClick = true
+	viewLayout.value = val
+	console.log("切换视图展示方式",val)
+	switch(types){
+		case 2:
+			props.viewPage.list.isClick = false
+			props.viewPage.time.isClick = false
+			props.viewPage.gantt.isClick = false
+			props.viewPage.map.isClick = false
+			props.viewPage.card.isClick = false
+			break;
+		case 3:
+			props.viewPage.list.isClick = false
+			props.viewPage.date.isClick = false
+			props.viewPage.gantt.isClick = false
+			props.viewPage.map.isClick = false
+			props.viewPage.card.isClick = false
+			getPageData()
+			break;
+		case 4:
+			props.viewPage.list.isClick = false
+			props.viewPage.date.isClick = false
+			props.viewPage.time.isClick = false
+			props.viewPage.map.isClick = false
+			props.viewPage.card.isClick = false
+			break;
+		case 5:
+			props.viewPage.list.isClick = false
+			props.viewPage.date.isClick = false
+			props.viewPage.time.isClick = false
+			props.viewPage.gantt.isClick = false
+			props.viewPage.card.isClick = false
+			break;
+		case 6:
+			props.viewPage.list.isClick = false
+			props.viewPage.date.isClick = false
+			props.viewPage.time.isClick = false
+			props.viewPage.gantt.isClick = false
+			props.viewPage.map.isClick = false
+			break;
+		default:
+			props.viewPage.date.isClick = false
+			props.viewPage.card.isClick = false
+			props.viewPage.time.isClick = false
+			props.viewPage.gantt.isClick = false
+			props.viewPage.map.isClick = false
+			break;
+	}
+}
 </script>
 <template>
 	<div ref="container" v-loading="state.loading" class="table-list-comm">
-		
+	
 		<el-row class="rowBox">
 			<el-col :span="24">
 				<el-form  v-if="config.searchIsShow" ref="ruleSearchForm" class="seacherForm">
@@ -625,13 +704,13 @@ const editFormSendFlow = (val:any) => {
 					<div>
 						<el-button-group class="ml-4">
 							<el-tooltip
-								v-if="config.searchFormIsShow"
+								v-if="viewPage.list.status"
 								class="box-item"
 								effect="dark"
 								content="折叠查询表单"
 								placement="bottom"
 							>
-								<!-- <el-button size="small" @click="config.searchIsShow=!config.searchIsShow" class="fa fa-search" /> -->
+								<el-button size="small" @click="config.searchIsShow=!config.searchIsShow" class="fa fa-search" />
 							</el-tooltip>
 							<el-tooltip
 								v-if="viewPage.list.status"
@@ -640,7 +719,16 @@ const editFormSendFlow = (val:any) => {
 								content="列表视图"
 								placement="top"
 							>
-								<el-button size="small" class="fa fa-table"  :color="viewPage.list.isClick?'#a0cfff':''" @click="tabsView(viewPage.list)" />
+								<el-button size="small" class="fa fa-table"  :color="viewPage.list.isClick?'#a0cfff':''" @click="tabsView(viewPage.list,1)" />
+							</el-tooltip>
+							<el-tooltip
+								v-if="viewPage.card.status"
+								class="box-item"
+								effect="dark"
+								content="卡片视图"
+								placement="top"
+							>
+								<el-button size="small" class="fa fa-id-card-o"  :color="viewPage.card.isClick?'#a0cfff':''" @click="tabsView(viewPage.card,6)" />
 							</el-tooltip>
 							<el-tooltip
 								v-if="viewPage.date.status"
@@ -649,7 +737,7 @@ const editFormSendFlow = (val:any) => {
 								content="日历视图"
 								placement="top"
 							>
-								<el-button size="small" class="fa fa-calendar" />
+								<el-button size="small" class="fa fa-calendar"  :color="viewPage.date.isClick?'#a0cfff':''" @click="tabsView(viewPage.date,2)" />
 							</el-tooltip>
 							<el-tooltip
 								v-if="viewPage.time.status"
@@ -658,7 +746,7 @@ const editFormSendFlow = (val:any) => {
 								content="时间轴"
 								placement="top"
 							>
-								<el-button size="small" class="fa fa-clock-o" />
+								<el-button size="small" class="fa fa-clock-o"  :color="viewPage.time.isClick?'#a0cfff':''" @click="tabsView(viewPage.time,3)" />
 							</el-tooltip>
 							<el-tooltip
 								v-if="viewPage.gantt.status"
@@ -667,7 +755,7 @@ const editFormSendFlow = (val:any) => {
 								content="甘特图"
 								placement="top"
 							>
-								<el-button size="small" class="fa fa-bar-chart" />
+								<el-button size="small" class="fa fa-bar-chart"  :color="viewPage.gantt.isClick?'#a0cfff':''" @click="tabsView(viewPage.gantt,4)" />
 							</el-tooltip>
 							<el-tooltip
 								v-if="viewPage.map.status"
@@ -676,14 +764,14 @@ const editFormSendFlow = (val:any) => {
 								content="地图视图"
 								placement="top"
 							>
-								<el-button size="small" class="fa fa-map-signs" />
+								<el-button size="small" class="fa fa-map-signs"  :color="viewPage.map.isClick?'#a0cfff':''" @click="tabsView(viewPage.map,5)" />
 							</el-tooltip>
 							
 						</el-button-group>
 					</div>
 				</div>
 			</el-col>
-			<el-col :span="24">
+			<el-col v-if="viewType==1" :span="24">
 				<el-table
 					v-bind="data.tableProps"
 					ref="table"
@@ -840,7 +928,7 @@ const editFormSendFlow = (val:any) => {
 					</template>
 				</el-table>
 			</el-col>
-			<el-col v-if="state.total > 0" :span="24">
+			<el-col v-if="viewType==1&&state.total > 0" :span="24">
 				<div class="pageBox">
 					<el-pagination
 						v-model:currentPage="state.currentPage"
@@ -853,6 +941,21 @@ const editFormSendFlow = (val:any) => {
 					/>
 				</div>
 			</el-col>
+			<el-col  v-if="viewType==2" :span="24">
+				<CalendarPage  ref="calendarPageRef"  :search-send="searchSend" :body-hight="265" :drawer-with="drawerWith"  />
+			</el-col>
+			<el-col  v-if="viewType==3" :span="24">
+				<TimeAxisPage  ref="timeAxisRef" :data="tableDataList" :view-layout="viewLayout" :columns-filter="columnsFilter" :search-send="searchSend" :drawer-with="drawerWith" />
+			</el-col>
+			<el-col  v-if="viewType==4" :span="24">
+				<GanttPage ref="ganttPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage" />
+			</el-col>
+			<el-col  v-if="viewType==5" :span="24">
+				<MapPage ref="mapPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage" />
+			</el-col>
+			<el-col  v-if="viewType==6" :span="24">
+				<CardPage ref="cardPageRef" :search-send="searchSend" :drawer-with="drawerWith" :view-setup="viewPage" />
+			</el-col>
 			<el-col :span="24"  style="display:none">
 			
 				{{ tableDataList}}

src/types/components.d.ts

@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
     CalendarItem: typeof import('./../components/DesignForm/app/calendar/calendar1/calendarItem.vue')['default']
     CalendarPage: typeof import('./../components/DesignForm/app/calendarPage.vue')['default']
+    CardPage: typeof import('./../components/DesignForm/app/cardPage.vue')['default']
     ChildTable: typeof import('./../components/DesignForm/public/form/childTable.vue')['default']
     ConditionDrawer: typeof import('./../components/workflow/drwer/conditionDrawer.vue')['default']
     CopyerDrawer: typeof import('./../components/workflow/drwer/copyerDrawer.vue')['default']
@@ -115,6 +116,7 @@ declare module '@vue/runtime-core' {
     FormPageContApp: typeof import('./../components/DesignForm/tableListPage/formPageContApp.vue')['default']
     FormVersion: typeof import('./../components/DesignForm/formVersion.vue')['default']
     FormWord: typeof import('./../components/workflow/dialog/formWord.vue')['default']
+    GannttPage: typeof import('./../components/DesignForm/app/gannttPage.vue')['default']
     GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
     HeadTools: typeof import('./../components/DesignForm/public/headTools.vue')['default']
@@ -132,6 +134,7 @@ declare module '@vue/runtime-core' {
     LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']
     List: typeof import('./../components/DesignForm/public/form/components/list.vue')['default']
     ListTreeSide: typeof import('./../components/DesignForm/public/form/components/listTreeSide.vue')['default']
+    MapPage: typeof import('./../components/DesignForm/app/mapPage.vue')['default']
     MathFormula: typeof import('./../components/DesignForm/math/mathFormula.vue')['default']
     Matrix: typeof import('./../components/workflow/dialog/matrix.vue')['default']
     MonthPage: typeof import('./../components/DesignForm/app/calendar/calendar1/monthPage.vue')['default']

src/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue

@@ -91,7 +91,73 @@ const stateList = reactive({
 		lookApiUrl:""
 	},
     dict: {},
-    refreshTable: true
+    refreshTable: true,
+	view:{
+		list:{
+			status:true,
+			isClick:false,
+			form:{
+				sortWord:"",
+				sortClass:1
+			}
+		},
+		date:{
+			status:false,
+			isClick:false,
+			form:{
+				startTime:"",
+				endTime:"",
+				dayType:1
+			}
+		}
+		,
+		time:{
+			status:false,
+			isClick:false,
+			form:{
+				sortWord:"",
+				sort:1
+			}
+		}
+		,
+		gantt:{
+			status:false,
+			isClick:false,
+			form:{
+				startTime:"",
+				endTime:"",
+				dayType:2,
+				sortWord:"",
+				sort:1
+			}
+		}
+		,
+		map:{
+			status:false,
+			isClick:false,
+			form:{
+				mapWord:"",
+				sortWord:"",
+				sort:1
+			}
+		},
+		card:{
+			status:false,
+			isClick:false,
+			form:{
+				sort:1,
+				sortWord:"",
+				imgWork:"",
+				imgWidth:50,
+				imgHeight:50,
+				imgBorderRadius:5,
+				imgPadding:2,
+				titleWork:"",
+				describe:"",
+				ranks:3
+			}
+		}
+	}
 })
 
 const versionTitle = ref<string>("")	//表单名称
@@ -214,7 +280,10 @@ const gainAppFormPageInit = () =>{
 				stateList.formApi = stateData.formApi
 				stateList.dict = stateData.dict
 				stateList.refreshTable = stateData.refreshTable
-				stateList.view = stateData.view
+				if(stateData.view){
+					stateList.view = stateData.view
+				}
+				
 			}
 			if(data.data.page){
 				console.log("data.data.mastesform", data.data)

src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue

@@ -182,6 +182,22 @@ const state = reactive({
 				sortWord:"",
 				sort:1
 			}
+		},
+		card:{
+			status:false,
+			isClick:false,
+			form:{
+				sort:1,
+				sortWord:"",
+				imgWork:"",
+				imgWidth:50,
+				imgHeight:50,
+				imgBorderRadius:5,
+				imgPadding:2,
+				titleWork:"",
+				describe:"",
+				ranks:3
+			}
 		}
 	}
 		
@@ -276,6 +292,8 @@ const allKeyWords = ref<any[]>([])
 const timeKeyWords = ref<any[]>([])
 const mapKeyWords = ref<any[]>([])
 const isMapTrue = ref(true)
+const cardKeyWords = ref<any[]>([])
+const isCardTrue = ref(true)
 /**
 @ 作者: 秦东
 @ 时间: 2024-07-06 10:44:54
@@ -289,6 +307,9 @@ const gainFormTableKeyWord = (val:string) => {
 			timeKeyWords.value = data.data.timeKeyWords
 			mapKeyWords.value = data.data.mapKeyWords
 			isMapTrue.value = !data.data.isMap
+
+			cardKeyWords.value = data.data.cardKeyWords
+			isCardTrue.value = !data.data.isCard
 		})
 }
 /**
@@ -348,7 +369,10 @@ const getListInfo = () => {
 				state.formApi = stateData.formApi
 				state.dict = stateData.dict
 				state.refreshTable = stateData.refreshTable
-				state.view = stateData.view
+				if(stateData.view){
+					state.view = stateData.view
+				}
+				
 			}
 			
 
@@ -752,7 +776,7 @@ const tabsView = (val:any) => {
 				</div>
 				<div>
 					
-					
+				
 					
 					<el-button-group class="ml-4">
 						<el-tooltip
@@ -773,6 +797,16 @@ const tabsView = (val:any) => {
 						>
 							<el-button size="small" class="fa fa-table"  :color="state.view.list.isClick?'#a0cfff':''" @click="tabsView(state.view.list)" />
 						</el-tooltip>
+						<el-tooltip
+							v-if="state.view.card.status"
+							class="box-item"
+							effect="dark"
+							content="卡片视图"
+							placement="top"
+						>
+							<el-button size="small" class="fa fa-id-card-o" />
+						</el-tooltip>
+						
 						<el-tooltip
 							v-if="state.view.date.status"
 							class="box-item"
@@ -966,6 +1000,103 @@ const tabsView = (val:any) => {
 									</el-form-item>
 
 
+								</el-form>
+							</div>
+						</el-collapse-item>
+					
+						<el-collapse-item title="Consistency" name="card" :class="state.view.card.status?'isTrueItem':''"  :disabled="!state.view.card.status">
+							<template #title>
+								<div class="collapse-title">
+									<div>
+										<i class="fa fa-id-card-o"></i>
+										<el-text>卡片视图</el-text>
+									</div>
+									<el-switch class="openOfClose" v-model="state.view.card.status" :disabled="isCardTrue" @click.stop="showCollapse" />
+								</div>
+							</template>
+							<div>
+								<el-form
+									label-position="top"
+									label-width="auto"
+									:model="state.view.card.form"
+									style="max-width: 600px"
+								>
+									<el-form-item label="图片字段">
+										<el-select v-model="state.view.card.form.imgWork" placeholder="请选择图片字段">
+											<el-option v-for="item in cardKeyWords" :key="item.value" :label="item.label" :value="item.value" />
+										</el-select>
+									</el-form-item>
+									<el-form-item label="图片宽度与高度">
+										<el-input
+											v-model="state.view.card.form.imgWidth"
+											placeholder="请输入图片宽度"
+										>
+											<template #prepend>宽度</template>
+											<template #suffix>PX</template>
+										</el-input>
+										<el-input
+											v-model="state.view.card.form.imgHeight"
+											placeholder="请输入图片高度"
+											style="margin-top:10px;"
+										>
+											<template #prepend>高度</template>
+											<template #suffix>PX</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="图片圆角">
+										<el-input
+											v-model="state.view.card.form.imgBorderRadius"
+											placeholder="请输入图片圆角"
+											style="margin-top:10px;"
+										>
+											<template #prepend>圆角</template>
+											<template #suffix>PX</template>
+										</el-input>
+									</el-form-item>
+
+									<el-form-item label="图片边框缩进">
+										<el-input
+											v-model="state.view.card.form.imgPadding"
+											placeholder="请输入图片边框缩进"
+											style="margin-top:10px;"
+										>
+											<template #prepend>缩进</template>
+											<template #suffix>PX</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="卡片标题">
+										<el-select v-model="state.view.card.form.titleWork" placeholder="请选择时间轴段">
+											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
+										</el-select>
+									</el-form-item>
+									<el-form-item label="卡片标题描述">
+										<el-select v-model="state.view.card.form.describe" placeholder="请选择时间轴段">
+											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
+										</el-select>
+									</el-form-item>
+									<el-form-item label="每行几列">
+										<el-input
+											v-model="state.view.card.form.ranks"
+											placeholder="请输入每行几列"
+											style="margin-top:10px;"
+										>
+											<template #suffix>列</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="排序字段">
+										<el-select v-model="state.view.card.form.sortWord" placeholder="请选择时间轴段">
+											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
+										</el-select>
+									</el-form-item>
+
+									<el-form-item label="排序方式">
+										<el-radio-group v-model="state.view.card.form.sort">
+											<el-radio :label="1">降序</el-radio>
+											<el-radio :label="2">升序</el-radio>
+										</el-radio-group>
+									</el-form-item>
+
+
 								</el-form>
 							</div>
 						</el-collapse-item>

src/views/sysworkflow/lowcodepage/pageList.vue

@@ -111,6 +111,22 @@ const state = reactive({
 				sort:1
 			}
 		},
+		card:{
+			status:false,
+			isClick:false,
+			form:{
+				sort:1,
+				sortWord:"",
+				imgWork:"",
+				imgWidth:50,
+				imgHeight:50,
+				imgBorderRadius:5,
+				imgPadding:2,
+				titleWork:"",
+				describe:"",
+				ranks:3
+			}
+		},
 		date:{
 			status:false,
 			isClick:false,
@@ -243,7 +259,7 @@ onMounted(()=>{
 	nextTick(() => {
       	columnDrop()
 		getListInfo();
-		gainFormTableKeyWord(props.appPageKey.toString())
+		gainFormTableKeyWord(props.formKey)
     })
 })
 
@@ -257,6 +273,7 @@ const isMapTrue = ref(true)
 @ 功能: 获取数据表字段数据
 */
 const gainFormTableKeyWord = (val:string) => {
+	console.log("获取数据表字段数据-----------》",val)
 	gainListTableField({id:val.toString()})
 		.then((data) =>{
 			console.log("获取数据表字段数据",data)
@@ -732,7 +749,7 @@ const getListInfo = () => {
 	gainFormListCont({id:props.formKey.toString()})
 		.then((data)=>{
 			console.log("获取列表内容",data)
-			if(data.data.listjson != null && data.data.listjson != ""){
+			if(data.data.listjson != null && data.data.listjson != "" && data.data.listjson != "null"){
 				let stateData = string2json(data.data.listjson)
 				console.log("获取列表内容---->",stateData)
 				state.tableData = stateData.tableData
@@ -1056,6 +1073,102 @@ const getListInfo = () => {
 										</el-form>
 									</div>
 								</el-collapse-item>
+								<el-collapse-item title="Consistency" name="card" :class="state.view.card.status?'isTrueItem':''"  :disabled="!state.view.card.status">
+							<template #title>
+								<div class="collapse-title">
+									<div>
+										<i class="fa fa-id-card-o"></i>
+										<el-text>卡片视图</el-text>
+									</div>
+									<el-switch class="openOfClose" v-model="state.view.card.status" :disabled="isCardTrue" @click.stop="showCollapse" />
+								</div>
+							</template>
+							<div>
+								<el-form
+									label-position="top"
+									label-width="auto"
+									:model="state.view.card.form"
+									style="max-width: 600px"
+								>
+									<el-form-item label="图片字段">
+										<el-select v-model="state.view.card.form.imgWork" placeholder="请选择图片字段">
+											<el-option v-for="item in cardKeyWords" :key="item.value" :label="item.label" :value="item.value" />
+										</el-select>
+									</el-form-item>
+									<el-form-item label="图片宽度与高度">
+										<el-input
+											v-model="state.view.card.form.imgWidth"
+											placeholder="请输入图片宽度"
+										>
+											<template #prepend>宽度</template>
+											<template #suffix>PX</template>
+										</el-input>
+										<el-input
+											v-model="state.view.card.form.imgHeight"
+											placeholder="请输入图片高度"
+											style="margin-top:10px;"
+										>
+											<template #prepend>高度</template>
+											<template #suffix>PX</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="图片圆角">
+										<el-input
+											v-model="state.view.card.form.imgBorderRadius"
+											placeholder="请输入图片圆角"
+											style="margin-top:10px;"
+										>
+											<template #prepend>圆角</template>
+											<template #suffix>PX</template>
+										</el-input>
+									</el-form-item>
+
+									<el-form-item label="图片边框缩进">
+										<el-input
+											v-model="state.view.card.form.imgPadding"
+											placeholder="请输入图片边框缩进"
+											style="margin-top:10px;"
+										>
+											<template #prepend>缩进</template>
+											<template #suffix>PX</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="卡片标题">
+										<el-select v-model="state.view.card.form.titleWork" placeholder="请选择时间轴段">
+											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
+										</el-select>
+									</el-form-item>
+									<el-form-item label="卡片标题描述">
+										<el-select v-model="state.view.card.form.describe" placeholder="请选择时间轴段">
+											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
+										</el-select>
+									</el-form-item>
+									<el-form-item label="每行几列">
+										<el-input
+											v-model="state.view.card.form.ranks"
+											placeholder="请输入每行几列"
+											style="margin-top:10px;"
+										>
+											<template #suffix>列</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="排序字段">
+										<el-select v-model="state.view.card.form.sortWord" placeholder="请选择时间轴段">
+											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
+										</el-select>
+									</el-form-item>
+
+									<el-form-item label="排序方式">
+										<el-radio-group v-model="state.view.card.form.sort">
+											<el-radio :label="1">降序</el-radio>
+											<el-radio :label="2">升序</el-radio>
+										</el-radio-group>
+									</el-form-item>
+
+
+								</el-form>
+							</div>
+						</el-collapse-item>
 								<el-collapse-item title="Consistency" name="date" :class="state.view.date.status?'isTrueItem':''"  :disabled="!state.view.date.status">
 									<template #title>
 										<div class="collapse-title">

src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue

@@ -119,6 +119,22 @@ const stateList = reactive({
 				sortWord:"",
 				sort:1
 			}
+		},
+		card:{
+			status:false,
+			isClick:false,
+			form:{
+				sort:1,
+				sortWord:"",
+				imgWork:"",
+				imgWidth:50,
+				imgHeight:50,
+				imgBorderRadius:5,
+				imgPadding:2,
+				titleWork:"",
+				describe:"",
+				ranks:3
+			}
 		}
 	}
 		
@@ -217,7 +233,10 @@ const initLoadData = () => {
 				stateList.formApi = stateData.formApi
 				stateList.dict = stateData.dict
 				stateList.refreshTable = stateData.refreshTable
-				stateList.view = stateData.view
+				if(stateData.view){
+					stateList.view = stateData.view
+				}
+				
 			}
 			if(data.data.page){
 				console.log("data.data.mastesform", data.data)