持续集成分支
This commit is contained in:
aixianling
208
library/apps/AppPropagandaStatistics/calendarInfo.vue
Normal file
208
library/apps/AppPropagandaStatistics/calendarInfo.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div class="calendarInfo">
|
||||
<div class="calendar">
|
||||
<uni-calendar :insert="true" :selected="selected" :lunar="false" @bindDateChange="setDate" @change="change" @monthSwitch="changeMonth"/>
|
||||
</div>
|
||||
|
||||
<div class="dailyMatters">
|
||||
<div v-if="list.length">
|
||||
<div>
|
||||
<div v-for="(item, index) in list.slice(0,3)" :key="index" :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}" class="daily_item">
|
||||
<div>{{ item.createTime.substring(10, 16) }}</div>
|
||||
<div>{{ item.taskTitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="show">
|
||||
<div v-for="(item, index) in list.slice(3, list.length)" :key="index"
|
||||
:class="{'color1': index % 4 == 3,'color2': index % 4 == 0,'color3': index % 4 == 1,'color4': index % 4 == 2 }" class="daily_item">
|
||||
<div>{{ item.createTime.substring(10, 16) }}</div>
|
||||
<div>{{ item.taskTitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="readMore" v-show="!show && list.length > 3" @click="show = true">查看更多</div>
|
||||
</div>
|
||||
<AiEmpty description="暂无宣发" v-if="!list.length" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniCalendar from "./uni-calendar/uni-calendar.vue"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: '',
|
||||
selected: [{date: ''}],
|
||||
list: [],
|
||||
show: false,
|
||||
calendarList: {},
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
yyyyMM: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
uniCalendar
|
||||
},
|
||||
created() {
|
||||
this.getNowDay()
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
// 切换月
|
||||
changeMonth(e) {
|
||||
if(e.month<=9) {
|
||||
this.yyyyMM = e.year + '0' + e.month
|
||||
|
||||
} else if(e.month > 9) {
|
||||
this.yyyyMM = e.year + e.month
|
||||
}
|
||||
this.month = e.month
|
||||
this.getData()
|
||||
},
|
||||
// 切换日
|
||||
change(val) {
|
||||
this.date = val.fulldate
|
||||
this.day = val.date
|
||||
this.getData()
|
||||
},
|
||||
|
||||
setDate(v) {
|
||||
this.yyyyMM = v.detail.value.replace('-', '')
|
||||
this.getData()
|
||||
},
|
||||
|
||||
getNowDay() {
|
||||
const date = new Date()
|
||||
this.year = date.getFullYear()
|
||||
this.month = date.getMonth() + 1
|
||||
this.day = date.getDate()
|
||||
},
|
||||
|
||||
toGroup() {
|
||||
uni.navigateTo({url: './groupSendResident'})
|
||||
},
|
||||
getData() {
|
||||
this.$http.post(`/app/appmasssendingtask/statisticsCalendar`, null, {
|
||||
params: {
|
||||
yyyyMM: this.yyyyMM,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.calendarList = res.data;
|
||||
let arr = Object.keys(res.data).map(key => (res.data[key]))
|
||||
this.list = arr[this.day - 1]?.taskList
|
||||
let calList = arr.filter(item=> (item.taskList && item.taskList.length > 0))
|
||||
this.selected = calList.map(item=> {
|
||||
if(item.day>=1 && item.day<=9) {
|
||||
if(this.month>=1 && this.month <=9) {
|
||||
return {
|
||||
date: this.year + '-' + '0' + this.month + '-' + '0' + item.day
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
date: this.year + '-' + this.month + '-' + '0' + item.day
|
||||
}
|
||||
}
|
||||
} else if(item.day> 9) {
|
||||
if(this.month > 9) {
|
||||
return {
|
||||
date: this.year + '-' + this.month + '-' + item.day
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
date: this.year + '-' + '0' + this.month + '-' + item.day
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
document.title = '宣发日历'
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.calendarInfo {
|
||||
::v-deep .uni-calendar-item__weeks-box-circle {
|
||||
top: 77%;
|
||||
right: 45%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
::v-deep .uni-calendar__header {
|
||||
height: 76px;
|
||||
justify-content: space-around;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
::v-deep .uni-calendar__weeks-day {
|
||||
border-bottom-style: none;
|
||||
}
|
||||
::v-deep .uni-calendar__weeks-day-text,
|
||||
::v-deep .uni-calendar__header-text,
|
||||
::v-deep .uni-calendar-item__weeks-box-text {
|
||||
font-size: 28px;
|
||||
}
|
||||
::v-deep .uni-calendar__header-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-left-color: #5297FF;
|
||||
border-top-color: #5297FF;
|
||||
}
|
||||
::v-deep .uni-calendar__backtoday {
|
||||
display: none
|
||||
}
|
||||
|
||||
::v-deep .calendarInfo .calendar {
|
||||
height: 750px !important;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 750px;
|
||||
}
|
||||
|
||||
.dailyMatters {
|
||||
padding: 750px 30px 30px 30px;
|
||||
box-sizing: border-box;
|
||||
.daily_item {
|
||||
background: #FFF;
|
||||
padding: 30px 20px 30px 50px;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 0px 16px 16px 0px;
|
||||
|
||||
div:first-child {
|
||||
color: #999999;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.color1 {
|
||||
border-left: 6px solid #3AA0FF;
|
||||
}
|
||||
.color2 {
|
||||
border-left: 6px solid #50CB74;
|
||||
}
|
||||
.color3 {
|
||||
border-left: 6px solid #9D73D9;
|
||||
}
|
||||
.color4 {
|
||||
border-left: 6px solid #435289;
|
||||
}
|
||||
|
||||
.readMore {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
color: #3F8DF5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user