19 changed files with 2125 additions and 128 deletions
@ -0,0 +1,221 @@ |
|||
<script lang="ts" setup> |
|||
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>, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
time: { |
|||
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); |
|||
} |
|||
|
|||
const emit = defineEmits(['changeTargetDate']); |
|||
const changeTargetDate = (time: dateBase) => { |
|||
emit('changeTargetDate', time); |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-16 10:32:41 |
|||
@ 功能: 搜索数据 |
|||
*/ |
|||
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 |
|||
class="calendar-item-container" |
|||
:class="[ |
|||
{ |
|||
'is-current': col.isCurrent, |
|||
'is-holidays': col.isHolidays, |
|||
'is-week': col.isWeek, |
|||
'is-selected': col.date === props.time, |
|||
'is-current-month': isCurrentMonth(col.date), |
|||
}, |
|||
]" |
|||
@click="changeTargetDate(col)" |
|||
> |
|||
|
|||
<div class="dayStyle"> |
|||
<span >{{ col.title }}</span> |
|||
<div v-if="col.isHolidays">休</div> |
|||
<span >{{ col.lunarsChina }}</span> |
|||
</div> |
|||
<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> |
|||
|
|||
|
|||
|
|||
<style scoped lang="less"> |
|||
.calendar-item-container { |
|||
|
|||
|
|||
width: 100%; |
|||
height: 100%; |
|||
flex-direction: column; |
|||
box-sizing: border-box; |
|||
border-radius: 6px; |
|||
border: 2px solid #ffffff; |
|||
|
|||
.dayList{ |
|||
height: calc(100% - 20px); |
|||
overflow-y: auto; |
|||
} |
|||
.dayLogCont{ |
|||
white-space: nowrap; /* 确保文本在一行内显示 */ |
|||
overflow: hidden; /* 隐藏溢出的内容 */ |
|||
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */ |
|||
font-size: 0.95rem; |
|||
border: 1px solid #bcbcbc; |
|||
border-radius: 5px; |
|||
margin-bottom:5px; |
|||
padding: 0 5px; |
|||
} |
|||
.dayStyle{ |
|||
display: flex; |
|||
// align-items: top; |
|||
justify-content: space-between; |
|||
font-size: 12px; |
|||
color: #999999; |
|||
|
|||
} |
|||
.calendar-title { |
|||
font-size: 1.2rem; |
|||
color: #999999; |
|||
} |
|||
.calendar-lunar { |
|||
margin-top: 6px; |
|||
|
|||
font-size: 0.85rem; |
|||
color: #bcbcbc; |
|||
} |
|||
transition: all 0.2s; |
|||
} |
|||
.calendar-item-container:hover { |
|||
cursor: pointer; |
|||
border: 2px solid #409eff; |
|||
} |
|||
.is-holidays { |
|||
.holidays-text { |
|||
position: absolute; |
|||
top: 6px; |
|||
left: 14px; |
|||
font-size: 0.85rem; |
|||
color: #ffa2a2; |
|||
} |
|||
.calendar-title { |
|||
color: #ffa2a2; |
|||
} |
|||
.dayStyle{ |
|||
color: #ffa2a2; |
|||
} |
|||
background-color: #feeeef; |
|||
} |
|||
.is-selected { |
|||
border: 2px solid #409eff; |
|||
} |
|||
.is-holidays.is-selected { |
|||
border: 2px solid #ffa2a2; |
|||
} |
|||
.is-selected.is-current-month { |
|||
border: 2px solid #409eff; |
|||
} |
|||
.is-holidays.is-selected.is-current-month { |
|||
border: 2px solid #f62b2b; |
|||
} |
|||
.is-week { |
|||
.calendar-title { |
|||
color: #ffa2a2; |
|||
} |
|||
.dayStyle{ |
|||
color: #ffa2a2; |
|||
} |
|||
} |
|||
.calendar-item-container.is-current { |
|||
.calendar-title { |
|||
color: #333333; |
|||
} |
|||
.dayStyle{ |
|||
color: #333333; |
|||
} |
|||
.calendar-lunar { |
|||
color: #666666; |
|||
} |
|||
} |
|||
.calendar-item-container.is-current.is-holidays { |
|||
.holidays-text { |
|||
position: absolute; |
|||
top: 6px; |
|||
left: 14px; |
|||
font-size: 0.85rem; |
|||
color: #f62b2b; |
|||
} |
|||
background-color: #fbe3e4; |
|||
} |
|||
.calendar-item-container.is-current.is-holidays, |
|||
.calendar-item-container.is-current.is-week { |
|||
.calendar-title { |
|||
color: #f62b2b; |
|||
} |
|||
.dayStyle{ |
|||
color: #f62b2b; |
|||
} |
|||
} |
|||
.calendar-item-container.is-current.is-holidays { |
|||
.holidays-text { |
|||
position: absolute; |
|||
top: 6px; |
|||
left: 14px; |
|||
font-size: 0.85rem; |
|||
color: #fb4949; |
|||
} |
|||
.calendar-title { |
|||
color: #fb6e6e; |
|||
} |
|||
.dayStyle{ |
|||
color: #fb6e6e; |
|||
} |
|||
background-color: #ffe4e7; |
|||
} |
|||
.calendar-item-container.is-holidays:hover { |
|||
border: 2px solid #f62b2b; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,166 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-13 09:34:47 |
|||
@ 备注: 日日历 |
|||
--> |
|||
<script lang='ts' setup> |
|||
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:{ |
|||
type:Array, |
|||
default() { |
|||
return [2024,7,13]; |
|||
}, |
|||
}, |
|||
searchSend:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:0 |
|||
} |
|||
}); |
|||
|
|||
//画板高度 |
|||
const drawingBoardHeight = computed(()=>{ |
|||
return props.bodyHight + 50 |
|||
}) |
|||
|
|||
const curttWeek = computed(()=>{ |
|||
console.log("画板高度---------->",props.taDay[0]) |
|||
return DateClass.getWeek(DateClass.solarWeek(props.taDay[0],props.taDay[1],props.taDay[2])) |
|||
}) |
|||
|
|||
|
|||
const dayInfo = ref<any>(); |
|||
|
|||
onMounted(()=>{ |
|||
dayInfo.value = Calendar.gainOneDay(props.taDay[0],props.taDay[1],props.taDay[2]) |
|||
console.log("初次加载",dayInfo.value,props.searchSend) |
|||
searchatDayList(props.searchSend) |
|||
nextTick(()=>{ |
|||
|
|||
let ddTime = DateClass.getCurrent() |
|||
selectedTime.value = ddTime[0] + "-" + clockFactory(ddTime[1]) + "-" + clockFactory(ddTime[2]) |
|||
}) |
|||
}) |
|||
|
|||
watch(()=>props.taDay,(val:any)=>{ |
|||
dayInfo.value = Calendar.gainOneDay(val[0],val[1],val[2]) |
|||
console.log("监听变化",dayInfo.value) |
|||
searchatDayList(props.searchSend) |
|||
},{ |
|||
deep: true, |
|||
}) |
|||
|
|||
const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2])) |
|||
const emit = defineEmits(['getDate']); |
|||
const changeDate = (time: dateBase) => { |
|||
selectedTime.value = time.date; |
|||
emit('getDate', time); |
|||
} |
|||
const loadDay = ref(false) |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-16 11:53:35 |
|||
@ 功能: 获取数据 |
|||
*/ |
|||
const searchatDayList = (val:any) => { |
|||
val.viewClass = { |
|||
class:"date", |
|||
sortWord:"creater_time", |
|||
sort:1, |
|||
startTime:"", |
|||
endTime:"", |
|||
dayType:"", |
|||
mapWord:"" |
|||
} |
|||
console.log("获取每天数据",val) |
|||
let sendInfo = { |
|||
search:val, |
|||
timeAry:[dayInfo.value] |
|||
} |
|||
console.log("获取每天数据条件",sendInfo) |
|||
gainCalendarList(sendInfo) |
|||
.then(({data})=>{ |
|||
console.log("获取数据",data) |
|||
dayInfo.value = data |
|||
}) |
|||
.finally(()=>{ loadDay.value = false }) |
|||
} |
|||
defineExpose({ |
|||
searchatDayList |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'"> |
|||
<ul class="t-calendar-header"> |
|||
<li> |
|||
{{ curttWeek }} |
|||
</li> |
|||
</ul> |
|||
<div class="t-calendar-day" v-loading="loadDay"> |
|||
<template v-if="dayInfo"> |
|||
<div |
|||
class="t-calendar-row" |
|||
> |
|||
<CalendarItem |
|||
:col="dayInfo" |
|||
:time="selectedTime" |
|||
:drawer-with="props.drawerWith" |
|||
@changeTargetDate="changeDate" |
|||
></CalendarItem> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<div class="no-date">抱歉,暂无数据</div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.monthCalendarBox{ |
|||
width: 100%; |
|||
margin-top: 10px; |
|||
.t-calendar-header { |
|||
display: flex; |
|||
width: 100%; |
|||
height: 42px; |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
li { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex: 1; |
|||
font-size: 0.95rem; |
|||
} |
|||
} |
|||
.t-calendar-day { |
|||
display: flex; |
|||
width: 100%; |
|||
height: calc(100% - 42px); |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
border-right: 1px solid #ebeef5; |
|||
.t-calendar-row { |
|||
width: 100%; |
|||
|
|||
font-size: 0.95rem; |
|||
border-bottom: 1px solid #ebeef5; |
|||
border-top: 1px solid #ebeef5; |
|||
border-left: 1px solid #ebeef5; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,188 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-13 09:34:05 |
|||
@ 备注: 月日历 |
|||
--> |
|||
<script lang='ts' setup> |
|||
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:{ |
|||
type:Array, |
|||
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']); |
|||
const changeDate = (time: dateBase) => { |
|||
selectedTime.value = time.date; |
|||
emit('getDate', time); |
|||
} |
|||
//画板高度 |
|||
const drawingBoardHeight = computed(()=>{ |
|||
return props.bodyHight + 50 |
|||
}) |
|||
//周期 |
|||
const THeader = Calendar.title(); |
|||
//日期 |
|||
// 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)'"> |
|||
<ul class="t-calendar-header"> |
|||
<li v-for="(item, index) in THeader" :key="index"> |
|||
{{ item }} |
|||
</li> |
|||
</ul> |
|||
<div v-loading="loadMonth" class="t-calendar-day"> |
|||
<template v-if="TBody.length"> |
|||
<div |
|||
class="t-calendar-row" |
|||
v-for="(item, index) in TBody" |
|||
:key="index" |
|||
> |
|||
<div |
|||
class="t-calendar-col" |
|||
v-for="(col, colIdx) in item" |
|||
:key="colIdx" |
|||
> |
|||
<CalendarItem |
|||
:col="col" |
|||
:time="selectedTime" |
|||
:drawer-with="props.drawerWith" |
|||
@changeTargetDate="changeDate" |
|||
></CalendarItem> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<div class="no-date">抱歉,暂无数据</div> |
|||
</template> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.monthCalendarBox{ |
|||
width: 100%; |
|||
margin-top: 10px; |
|||
.t-calendar-header { |
|||
display: flex; |
|||
width: 100%; |
|||
height: 42px; |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
li { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex: 1; |
|||
font-size: 0.95rem; |
|||
} |
|||
} |
|||
.t-calendar-day { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: calc(100% - 42px); |
|||
.t-calendar-row { |
|||
width: 100%; |
|||
height: 60px; |
|||
display: flex; |
|||
flex: 1; |
|||
border-bottom: 1px solid #ebeef5; |
|||
.t-calendar-col{ |
|||
box-sizing: border-box; |
|||
flex: 1; |
|||
border-left: 1px solid #ebeef5; |
|||
padding: 2px; |
|||
font-size: 16px; |
|||
transition: all 0.2s; |
|||
width: calc(100%/7); |
|||
} |
|||
.t-calendar-col:last-child { |
|||
border-right: 1px solid #ebeef5; |
|||
} |
|||
} |
|||
.t-calendar-row:first-child { |
|||
border-top: 1px solid #ebeef5; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,169 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-13 09:34:24 |
|||
@ 备注: 周 |
|||
--> |
|||
<script lang='ts' setup> |
|||
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:{ |
|||
type:Array, |
|||
default() { |
|||
return [2024,7,13]; |
|||
}, |
|||
}, |
|||
searchSend:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:0 |
|||
} |
|||
}); |
|||
|
|||
//画板高度 |
|||
const drawingBoardHeight = computed(()=>{ |
|||
return props.bodyHight + 50 |
|||
}) |
|||
//周期 |
|||
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 = 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]) |
|||
}) |
|||
}) |
|||
const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2])) |
|||
const emit = defineEmits(['getDate']); |
|||
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)'"> |
|||
<ul class="t-calendar-header"> |
|||
<li v-for="(item, index) in THeader" :key="index"> |
|||
{{ item }} |
|||
</li> |
|||
</ul> |
|||
<div class="t-calendar-day" v-loading="loadWeek"> |
|||
<template v-if="WeekBody.length"> |
|||
<div |
|||
class="t-calendar-row" |
|||
v-for="(item, index) in WeekBody" |
|||
:key="index" |
|||
> |
|||
<CalendarItem |
|||
:col="item" |
|||
:time="selectedTime" |
|||
:drawer-with="props.drawerWith" |
|||
@changeTargetDate="changeDate" |
|||
></CalendarItem> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<div class="no-date">抱歉,暂无数据</div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.monthCalendarBox{ |
|||
width: 100%; |
|||
margin-top: 10px; |
|||
.t-calendar-header { |
|||
display: flex; |
|||
width: 100%; |
|||
height: 42px; |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
li { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex: 1; |
|||
font-size: 0.95rem; |
|||
} |
|||
} |
|||
.t-calendar-day { |
|||
display: flex; |
|||
width: 100%; |
|||
height: calc(100% - 42px); |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
border-right: 1px solid #ebeef5; |
|||
.t-calendar-row { |
|||
width: calc(100%/7); |
|||
|
|||
font-size: 0.95rem; |
|||
border-bottom: 1px solid #ebeef5; |
|||
border-top: 1px solid #ebeef5; |
|||
border-left: 1px solid #ebeef5; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,296 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-17 15:35:39 |
|||
@ 备注: 卡片视图 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import type { ComponentSize } from 'element-plus' |
|||
import { gainFormPageListCont } from '@/api/DesignForm/requestapi' |
|||
import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue' |
|||
|
|||
const props = defineProps({ |
|||
searchSend:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
viewSetup:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
columnsFilter:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:0 |
|||
} |
|||
}); |
|||
const size = ref<ComponentSize>('default') |
|||
const lineRanks = ref(1) |
|||
const imgBox = computed(() => { |
|||
let cssStyle:any = {} |
|||
if(props.viewSetup.form.imgWidth != 0){ |
|||
cssStyle['width'] = props.viewSetup.form.imgWidth + "px"; |
|||
}else{ |
|||
cssStyle['width'] = "50px"; |
|||
} |
|||
if(props.viewSetup.form.imgHeight != 0){ |
|||
cssStyle['height'] = props.viewSetup.form.imgHeight + "px"; |
|||
}else{ |
|||
cssStyle['height'] = "50px"; |
|||
} |
|||
|
|||
return cssStyle |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-18 14:26:46 |
|||
@ 功能: 图像设定Css |
|||
*/ |
|||
const imgStyle = computed(() => { |
|||
let cssStyle:any = {} |
|||
cssStyle['border'] = "1px solid #ccc"; |
|||
cssStyle['border-radius'] = props.viewSetup.form.imgBorderRadius + "px"; |
|||
cssStyle['padding'] = props.viewSetup.form.imgPadding + "px"; |
|||
if(props.viewSetup.form.imgWidth != 0){ |
|||
cssStyle['width'] = props.viewSetup.form.imgWidth + "px"; |
|||
}else{ |
|||
cssStyle['width'] = "50px"; |
|||
} |
|||
if(props.viewSetup.form.imgHeight != 0){ |
|||
cssStyle['height'] = props.viewSetup.form.imgHeight + "px"; |
|||
}else{ |
|||
cssStyle['height'] = "50px"; |
|||
} |
|||
console.log("自定义样式",cssStyle) |
|||
return cssStyle |
|||
}) |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-18 14:26:57 |
|||
@ 功能: 内容设定css |
|||
*/ |
|||
const cardInfoBox = computed(() => { |
|||
let cssStyle:any = {} |
|||
|
|||
cssStyle['width'] = (Math.round(24/props.viewSetup.form.ranks) - props.viewSetup.form.imgWidth) + "px"; |
|||
return cssStyle |
|||
}) |
|||
onMounted(()=>{ |
|||
lineRanks.value = Math.round(24/props.viewSetup.form.ranks) |
|||
nextTick(()=>{ |
|||
getCardList(props.searchSend) |
|||
}) |
|||
}) |
|||
// const url = ref() |
|||
// const srcList = ref([]) |
|||
const handleSizeChange = (val: number) => { |
|||
// console.log(`${val} items per page`)\ |
|||
props.searchSend.page = 1 |
|||
props.searchSend.pagesize = val |
|||
// console.log(props.searchSend.pagesize) |
|||
getCardList(props.searchSend) |
|||
} |
|||
const handleCurrentChange = (val: number) => { |
|||
// console.log(`current page: ${val}`) |
|||
props.searchSend.page = val |
|||
getCardList(props.searchSend) |
|||
} |
|||
|
|||
const url = |
|||
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg' |
|||
const srcList = (url:string) =>{ |
|||
return [url] |
|||
return [ |
|||
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', |
|||
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', |
|||
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', |
|||
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', |
|||
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', |
|||
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', |
|||
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', |
|||
] |
|||
} |
|||
const cardDataList = ref([]) // 表格行数据 |
|||
const totalNum = ref(0) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-19 09:32:11 |
|||
@ 功能: 获取数据 |
|||
*/ |
|||
const getCardList = (val:any) => { |
|||
val.viewClass = { |
|||
class:"card" |
|||
} |
|||
gainFormPageListCont(val) |
|||
.then(({data})=>{ |
|||
totalNum.value = data.total |
|||
console.log("卡片获取数据--》",data) |
|||
cardDataList.value = data.list |
|||
}) |
|||
} |
|||
defineExpose({ |
|||
getCardList |
|||
}) |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-19 10:03:53 |
|||
@ 功能: 获取图片显示 |
|||
*/ |
|||
const imgSrcPath = (val:any) => { |
|||
console.log("获取图片显示", val[props.viewSetup.form.imgWork]) |
|||
if(val[props.viewSetup.form.imgWork]){ |
|||
return val[props.viewSetup.form.imgWork] |
|||
} |
|||
return "" |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-19 10:03:53 |
|||
@ 功能: 获取图片数组显示 |
|||
*/ |
|||
const imgSrcAry = (val:any) => { |
|||
if(val[props.viewSetup.form.imgWork]){ |
|||
if (val[props.viewSetup.form.imgWork] != ""){ |
|||
return [val[props.viewSetup.form.imgWork]] |
|||
}else{ |
|||
return [] |
|||
} |
|||
|
|||
} |
|||
return [] |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-19 10:24:33 |
|||
@ 功能: 获取内容 |
|||
*/ |
|||
const cardInfo = (val:any,cla:string) => { |
|||
if(cla=="title"){ |
|||
if(val[props.viewSetup.form.titleWork]){ |
|||
return val[props.viewSetup.form.titleWork] |
|||
} |
|||
}else if(cla=="content"){ |
|||
if(val[props.viewSetup.form.describe]){ |
|||
return val[props.viewSetup.form.describe] |
|||
} |
|||
} |
|||
return "" |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 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> |
|||
<el-row :gutter="20"> |
|||
|
|||
<el-col v-for="item in cardDataList" :key="item.id" :span="lineRanks" class="cardBox"> |
|||
|
|||
<el-card @click="lookPageInfo(item)"> |
|||
<div class="cardContBox"> |
|||
<el-image |
|||
:style="imgStyle" |
|||
:src="imgSrcPath(item)" |
|||
:zoom-rate="1.2" |
|||
:max-scale="7" |
|||
:min-scale="0.2" |
|||
:preview-src-list="imgSrcAry(item)" |
|||
:initial-index="4" |
|||
fit="cover" |
|||
/> |
|||
<div class="cardInfo" :style="'width: calc(100% - '+props.viewSetup.form.imgWidth+'px); height:'+props.viewSetup.form.imgHeight+'px; overflow: hidden;' "> |
|||
<div class="title">{{ cardInfo(item,"title") }}</div> |
|||
<div class="content">{{ cardInfo(item,"content") }}</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
|
|||
</el-col> |
|||
|
|||
|
|||
|
|||
</el-row> |
|||
<div class="pageBox"> |
|||
<el-pagination |
|||
v-model:current-page="props.searchSend.page" |
|||
v-model:page-size="props.searchSend.pagesize" |
|||
:page-sizes="[3, 9, 12, 30, 50, 100]" |
|||
:size="size" |
|||
:background="true" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="totalNum" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
class="page" |
|||
/> |
|||
</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> |
|||
<style lang='scss' scoped> |
|||
.demo-image__error .image-slot { |
|||
font-size: 30px; |
|||
} |
|||
.demo-image__error .image-slot .el-icon { |
|||
font-size: 30px; |
|||
} |
|||
.demo-image__error .el-image { |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
.cardBox{ |
|||
padding: 10px 0 5px 0; |
|||
:deep .el-card__body{ |
|||
padding:10px; |
|||
} |
|||
.title{ |
|||
font-size:14px; |
|||
font-weight:bold; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.content{ |
|||
color: #909399; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
.cardContBox{ |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: flex-start; |
|||
} |
|||
.cardInfo{ |
|||
padding-left: 5px; |
|||
} |
|||
|
|||
} |
|||
.pageBox{ |
|||
display:flex; |
|||
justify-content: center; |
|||
width: 100%; |
|||
text-align: center; |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -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> |
|||
@ -0,0 +1,113 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 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 |
|||
} |
|||
}); |
|||
let mapId = "pickMapView"+ Math.ceil(Math.random()); |
|||
const longitude= ref<number>(117.14272945140574) |
|||
const latitude= ref<number>(35.91808471435389) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-19 14:55:24 |
|||
@ 功能: 引入外部js |
|||
*/ |
|||
const loadJScript = () => { |
|||
const script = document.createElement('script'); |
|||
script.type = 'text/javascript'; |
|||
script.src = 'https://api.map.baidu.com/getscript?v=3.0&ak=ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF'; |
|||
script.onload = () => { |
|||
mapInit() |
|||
} |
|||
document.body.appendChild(script); |
|||
} |
|||
//初始化地图 |
|||
const mapInit = () => { |
|||
const map = new window.BMap.Map("pickMapView"); // 创建Map实例 |
|||
var opts = {type: BMAP_NAVIGATION_CONTROL_LARGE} |
|||
map.addControl(new BMap.NavigationControl(opts)); //添加控件 |
|||
map.addControl(new BMap.ScaleControl()); |
|||
map.addControl(new BMap.MapTypeControl()); |
|||
map.enableScrollWheelZoom(); // 启用滚轮放大缩小 |
|||
|
|||
mapHandle(map) |
|||
|
|||
// const point = new BMap.Point(longitude.value,latitude.value); // 创建点坐标 |
|||
// map.centerAndZoom(point, 16); |
|||
// var label = new BMap.Label("山东恒信高科", { // 创建文本标注 |
|||
// position: point, // 设置标注的地理位置 |
|||
// offset: new BMap.Size(10, 20) // 设置标注的偏移量 |
|||
// }).addEventListener("click", function(){ |
|||
// alert("您点击了标注"); |
|||
// }); |
|||
|
|||
// // var marker = new BMap.Marker(point); |
|||
// map.addOverlay(label); |
|||
// const points = new BMap.Point(117.14372945240574,35.92808471455389); // 创建点坐标 |
|||
// map.centerAndZoom(points, 16); |
|||
// var markerd = new BMap.Marker(points); |
|||
// map.addOverlay(markerd); |
|||
|
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-19 15:31:05 |
|||
@ 功能: 处理地图时间 |
|||
*/ |
|||
const mapHandle = (map:any) => { |
|||
let blz = [] |
|||
for(var i = 1; i < 5;){ |
|||
const points = new BMap.Point(117.14372945240574,35.92808471455389+i); // 创建点坐标 |
|||
map.centerAndZoom(points, 16); |
|||
// var markerd = new BMap.Marker(points); |
|||
// map.addOverlay(markerd); |
|||
// let blz = "label"+i |
|||
blz[i] = new BMap.Label("山东恒信高科"+i, { // 创建文本标注 |
|||
position: points, // 设置标注的地理位置 |
|||
offset: new BMap.Size(10, 20) // 设置标注的偏移量 |
|||
}) |
|||
blz[i].addEventListener("click", function(){ |
|||
alert(i); |
|||
}); |
|||
map.addOverlay(blz[i]); |
|||
i++ |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
onMounted(() =>{ |
|||
loadJScript() |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<div id="pickMapView" :ref="mapId" class="openMapView"></div> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.openMapView{ |
|||
width:100%; |
|||
margin: 10px 0 0 0; |
|||
height: calc(100vh - 320px); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue