647 lines
18 KiB
Vue
647 lines
18 KiB
Vue
<template>
|
||
<view class="calendar">
|
||
<!-- <view class="header">
|
||
<text @click="changeMonth(-1)">《</text>
|
||
<text>{{ currentYear }}年{{ currentMonth + 1 }}月</text>
|
||
<text @click="changeMonth(1)">》</text>
|
||
</view> -->
|
||
<h2>风险日历</h2>
|
||
<view class="today-work-num">
|
||
今日作业人数：
|
||
<text>{{ todayCount }}</text>
|
||
</view>
|
||
<view class="header">
|
||
<view v-show="activeType === 1">
|
||
<uni-icons type="left" size="16" @click="changeMonth(-1)"></uni-icons>
|
||
<text>{{ currentYear }}-{{ currentMonth + 1 }}</text>
|
||
<uni-icons type="right" size="16" @click="changeMonth(1)"></uni-icons>
|
||
</view>
|
||
<view v-show="activeType === 2">
|
||
<uni-icons type="left" size="16" @click="changeWeek(-1)"></uni-icons>
|
||
<text class="week-container">{{ weekStart }}~{{ weekEnd }}</text>
|
||
<uni-icons type="right" size="16" @click="changeWeek(1)"></uni-icons>
|
||
</view>
|
||
<view v-show="activeType === 3">
|
||
<uni-icons type="left" size="16" @click="changeDay(-1)"></uni-icons>
|
||
<text>{{ currentDay }}</text>
|
||
<uni-icons type="right" size="16" @click="changeDay(1)"></uni-icons>
|
||
</view>
|
||
<view>
|
||
<button :class="{ 'active-button ': activeType === 1 }" @tap="onCheckTime(1)">月</button>
|
||
<button :class="{ 'active-button ': activeType === 2 }" @tap="onCheckTime(2)">周</button>
|
||
<button :class="{ 'active-button ': activeType === 3 }" @tap="onCheckTime(3)">日</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择月的时候的日历 -->
|
||
<view v-if="activeType === 1">
|
||
<view class="weekdays">
|
||
<text v-for="(day, index) in weekdays" :key="index + day">{{ day }}</text>
|
||
</view>
|
||
<view class="days">
|
||
<view
|
||
v-for="(days, index) in days"
|
||
:key="days.date + index"
|
||
:class="{ 'current-month': days.currentMonth, 'other-month': !days.currentMonth }"
|
||
@click="selectDate(days)"
|
||
>
|
||
<text style="font-weight: bold">{{ days.day }}</text>
|
||
<view class="risk-container">
|
||
<text v-show="days.kjsfx > 0">可接受:{{ days.kjsfx }}</text>
|
||
<text v-show="days.dfx > 0">低:{{ days.dfx }}</text>
|
||
<text v-show="days.zfx > 0">中:{{ days.zfx }}</text>
|
||
<text v-show="days.gfx > 0">高:{{ days.gfx }}</text>
|
||
<text v-show="days.tgfx > 0">特高:{{ days.tgfx }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择周的时候日历 -->
|
||
<view v-if="activeType === 2">
|
||
<view class="week-th">
|
||
<view v-for="(item, index) in weekList" :key="index">
|
||
<text>{{ item.title }}</text>
|
||
<text v-if="index !== 0" style="margin-top: 6rpx">{{ weekTimeChange(index) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="week-td" v-for="(item, index) in weekCompanyList" :key="index">
|
||
<view>
|
||
<text style="font-size: 26rpx">{{ item.orgName }}</text>
|
||
</view>
|
||
|
||
<view v-for="(i, j) in item.dbs" :key="j" @tap="onViewDayData(i.day)">
|
||
<text class="style_4" v-if="i.kjsfx > 0">可接受：{{ i.kjsfx }}</text>
|
||
<text class="style_3" v-if="i.dfx > 0">低：{{ i.dfx }}</text>
|
||
<text class="style_2" v-if="i.zfx > 0">中：{{ i.zfx }}</text>
|
||
<text class="style_1" v-if="i.gfx > 0">高：{{ i.gfx }}</text>
|
||
<text class="style_1" v-if="i.tgfx > 0">特高：{{ i.tgfx }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择天的时候日历 -->
|
||
<view v-if="activeType === 3">
|
||
<view class="day-th">
|
||
<view>工程名称</view>
|
||
<view>作业人数</view>
|
||
<view>
|
||
<text>{{ currentWeekDay }}</text>
|
||
<text>{{ currentDays }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="day-td">
|
||
<view>{{ currentDayInfo.proName || '' }}</view>
|
||
<view>
|
||
<text>{{ currentDayInfo.rys || '' }}</text>
|
||
</view>
|
||
<view @tap="onViewPersonDetails(currentDayInfo.idNumber)">
|
||
<text class="style_4" v-if="currentDayInfo.kjsfx > 0">可接受:{{ currentDayInfo.kjsfx }}</text>
|
||
<text class="style_3" v-if="currentDayInfo.dfx > 0">低:{{ currentDayInfo.dfx }}</text>
|
||
<text class="style_2" v-if="currentDayInfo.zfx > 0">中:{{ currentDayInfo.zfx }}</text>
|
||
<text class="style_1" v-if="currentDayInfo.gfx > 0">高:{{ currentDayInfo.gfx }}</text>
|
||
<text class="style_1" v-if="currentDayInfo.tgfx > 0">特高:{{ currentDayInfo.tgfx }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getDayUserApi, getMonthRiskApi, getWeekDataApi, getProFxByDayApi } from '../../../../api/workPlan/homePage'
|
||
export default {
|
||
data() {
|
||
return {
|
||
activeType: 1,
|
||
currentYear: new Date().getFullYear(),
|
||
currentMonth: new Date().getMonth(),
|
||
weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||
weekList: [
|
||
{ title: '分公司', time: '' },
|
||
{ title: '周一', time: this.$moment().week(this.$moment().week()).startOf('week').format('MM-DD') },
|
||
{
|
||
title: '周二',
|
||
time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'))
|
||
.add(1, 'days')
|
||
.format('MM-DD')
|
||
},
|
||
{
|
||
title: '周三',
|
||
time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'))
|
||
.add(2, 'days')
|
||
.format('MM-DD')
|
||
},
|
||
{
|
||
title: '周四',
|
||
time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'))
|
||
.add(3, 'days')
|
||
.format('MM-DD')
|
||
},
|
||
{
|
||
title: '周五',
|
||
time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'))
|
||
.add(4, 'days')
|
||
.format('MM-DD')
|
||
},
|
||
{
|
||
title: '周六',
|
||
time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'))
|
||
.add(5, 'days')
|
||
.format('MM-DD')
|
||
},
|
||
{ title: '周日', time: this.$moment().week(this.$moment().week()).endOf('week').format('MM-DD') }
|
||
],
|
||
weekStart: this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'),
|
||
weekEnd: this.$moment().week(this.$moment().week()).endOf('week').format('YYYY-MM-DD'),
|
||
currentDay: this.$moment().format('YYYY-MM-DD'),
|
||
weekCompanyList: [],
|
||
days: [],
|
||
// currentWeekDay: this.$moment().day(),
|
||
currentDays: this.$moment().format('MM-DD'),
|
||
customDates: {
|
||
'2023-06-15': '自定义内容'
|
||
},
|
||
todayCount: 0,
|
||
currentQueryDay: this.$moment().format('YYYY-MM'),
|
||
currentPramsWeekDay: '',
|
||
currentDayInfo: {
|
||
proName: ''
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
weekTimeChange() {
|
||
return index => {
|
||
return this.$moment(this.weekStart)
|
||
.add(index - 1, 'days')
|
||
.format('MM-DD')
|
||
}
|
||
},
|
||
currentWeekDay() {
|
||
return this.onTransWeek(this.$moment(this.currentDay).day())
|
||
}
|
||
},
|
||
mounted() {
|
||
this.generateCalendar()
|
||
this.getDayUserData()
|
||
},
|
||
methods: {
|
||
generateCalendar() {
|
||
const firstDay = new Date(this.currentYear, this.currentMonth, 1)
|
||
const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0)
|
||
const daysInMonth = lastDay.getDate()
|
||
const startingDay = firstDay.getDay()
|
||
|
||
this.days = []
|
||
|
||
new Promise((resolve, reject) => {
|
||
for (let i = 0; i < startingDay; i++) {
|
||
const prevMonthLastDay = new Date(this.currentYear, this.currentMonth, 0).getDate()
|
||
this.days.push({
|
||
day: prevMonthLastDay - startingDay + i + 1,
|
||
currentMonth: false,
|
||
date: new Date(this.currentYear, this.currentMonth - 1, prevMonthLastDay - startingDay + i + 1)
|
||
})
|
||
}
|
||
|
||
for (let i = 1; i <= daysInMonth; i++) {
|
||
const date = new Date(this.currentYear, this.currentMonth, i)
|
||
const dateString = `${this.currentYear}-${String(this.currentMonth + 1).padStart(2, '0')}-${String(
|
||
i
|
||
).padStart(2, '0')}`
|
||
this.days.push({
|
||
day: i > 10 ? i : `0${i}`,
|
||
currentMonth: true,
|
||
date: date,
|
||
customContent: this.customDates[dateString]
|
||
})
|
||
}
|
||
|
||
const remainingDays = 42 - this.days.length
|
||
for (let i = 1; i <= remainingDays; i++) {
|
||
this.days.push({
|
||
day: i,
|
||
currentMonth: false,
|
||
date: new Date(this.currentYear, this.currentMonth + 1, i),
|
||
kjsfx: 0,
|
||
dfx: 0,
|
||
zfx: 0,
|
||
gfx: 0,
|
||
tgfx: 0,
|
||
currentDay: ''
|
||
})
|
||
}
|
||
|
||
resolve()
|
||
}).then(() => {
|
||
this.getMonthRiskData()
|
||
})
|
||
},
|
||
changeMonth(delta) {
|
||
this.currentMonth += delta
|
||
if (this.currentMonth > 11) {
|
||
this.currentMonth = 0
|
||
this.currentYear++
|
||
} else if (this.currentMonth < 0) {
|
||
this.currentMonth = 11
|
||
this.currentYear--
|
||
}
|
||
this.currentQueryDay = this.currentYear + '-' + (this.currentMonth + 1)
|
||
|
||
console.log('this.currentQueryDay ', this.currentQueryDay)
|
||
this.generateCalendar()
|
||
this.getMonthRiskData()
|
||
},
|
||
changeDay(delta) {
|
||
if (delta > 0) {
|
||
this.currentDay = this.$moment(this.currentDay).add(1, 'days').format('YYYY-MM-DD')
|
||
this.currentDays = this.$moment(this.currentDays).add(1, 'days').format('MM-DD')
|
||
} else {
|
||
this.currentDay = this.$moment(this.currentDay).subtract(1, 'days').format('YYYY-MM-DD')
|
||
this.currentDays = this.$moment(this.currentDays).subtract(1, 'days').format('MM-DD')
|
||
}
|
||
},
|
||
changeWeek(delta) {
|
||
if (delta > 0) {
|
||
this.weekStart = this.$moment(this.weekStart).add(7, 'days').format('YYYY-MM-DD')
|
||
this.weekEnd = this.$moment(this.weekEnd).add(7, 'days').format('YYYY-MM-DD')
|
||
} else {
|
||
this.weekStart = this.$moment(this.weekStart).subtract(7, 'days').format('YYYY-MM-DD')
|
||
this.weekEnd = this.$moment(this.weekEnd).subtract(7, 'days').format('YYYY-MM-DD')
|
||
}
|
||
this.currentPramsWeekDay = this.weekStart
|
||
this.getWeekDataFun()
|
||
},
|
||
selectDate(day) {
|
||
this.currentPramsWeekDay = day.currentDay
|
||
this.getWeekDataFun()
|
||
this.weekStart = this.$moment(day.currentDay).startOf('week').format('YYYY-MM-DD')
|
||
this.weekEnd = this.$moment(day.currentDay).endOf('week').format('YYYY-MM-DD')
|
||
this.activeType = 2
|
||
},
|
||
|
||
/* 根据周获取数据 */
|
||
async getWeekDataFun() {
|
||
console.log('this.currentPramsWeekDay', this.currentPramsWeekDay)
|
||
const res = await getWeekDataApi({ day: this.currentPramsWeekDay })
|
||
console.log('resssss', res)
|
||
this.weekCompanyList = res.data
|
||
},
|
||
onTransWeek(num) {
|
||
let weekStr = ''
|
||
switch (num) {
|
||
case 0:
|
||
weekStr = '周日'
|
||
break
|
||
case 1:
|
||
weekStr = '周一'
|
||
break
|
||
case 2:
|
||
weekStr = '周二'
|
||
break
|
||
case 3:
|
||
weekStr = '周三'
|
||
break
|
||
case 4:
|
||
weekStr = '周四'
|
||
break
|
||
case 5:
|
||
weekStr = '周五'
|
||
break
|
||
case 6:
|
||
weekStr = '周六'
|
||
break
|
||
}
|
||
|
||
return weekStr
|
||
},
|
||
onCheckTime(type) {
|
||
this.activeType = type
|
||
if (type == 1) {
|
||
/* 切换月 */
|
||
this.currentYear = new Date().getFullYear()
|
||
this.currentMonth = new Date().getMonth()
|
||
this.currentQueryDay = this.currentYear + '-' + (this.currentMonth + 1)
|
||
this.generateCalendar()
|
||
// this.getMonthRiskData()
|
||
}
|
||
if (type == 2) {
|
||
/* 切换周 */
|
||
this.weekStart = this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD')
|
||
this.weekEnd = this.$moment().week(this.$moment().week()).endOf('week').format('YYYY-MM-DD')
|
||
this.currentPramsWeekDay = this.weekStart
|
||
this.getWeekDataFun()
|
||
}
|
||
if (type == 3) {
|
||
/* 切换日 */
|
||
this.currentDay = this.$moment().format('YYYY-MM-DD')
|
||
this.getProFxByDayFun()
|
||
}
|
||
},
|
||
/* 获取今日作业人数 */
|
||
async getDayUserData() {
|
||
const res = await getDayUserApi({ day: this.$moment().format('YYYY-MM-DD') })
|
||
console.log('今日作业人数---', res)
|
||
|
||
this.todayCount = res.count
|
||
},
|
||
/* 获取当月数据 */
|
||
async getMonthRiskData() {
|
||
console.log('this.currentQueryDay', this.currentQueryDay)
|
||
const res = await getMonthRiskApi({ month: this.currentQueryDay })
|
||
|
||
if (res.code == 200) {
|
||
const monthList = res.data
|
||
for (let i = 0; i < monthList.length; i++) {
|
||
for (let j = 0; j < this.days.length; j++) {
|
||
if (monthList[i].dayNum == this.days[j].day) {
|
||
const { kjsfx, dfx, zfx, gfx, tgfx } = monthList[i]
|
||
this.days[j].kjsfx = kjsfx
|
||
this.days[j].dfx = dfx
|
||
this.days[j].zfx = zfx
|
||
this.days[j].gfx = gfx
|
||
this.days[j].tgfx = tgfx
|
||
this.days[j].currentDay = monthList[i].day
|
||
}
|
||
}
|
||
}
|
||
}
|
||
console.log('res---', res)
|
||
},
|
||
onViewDayData(day) {
|
||
this.currentDay = day
|
||
this.getProFxByDayFun()
|
||
this.activeType = 3
|
||
},
|
||
/* 获取当日数据 */
|
||
async getProFxByDayFun() {
|
||
const res = await getProFxByDayApi({ day: this.currentDay })
|
||
if (res.data.length > 0) {
|
||
this.currentDayInfo = res.data[0]
|
||
console.log('----------当日数据', res)
|
||
}
|
||
},
|
||
onViewPersonDetails(id) {
|
||
uni.navigateTo({ url: `/pages/realName/index/pages/personDetail?idNumber=${id}` })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.calendar {
|
||
width: 100%;
|
||
margin-top: 30rpx;
|
||
/* padding: 20rpx; */
|
||
|
||
h2 {
|
||
padding: 18rpx 0;
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.today-work-num {
|
||
width: 100%;
|
||
padding: 10rpx 0;
|
||
text-align: right;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
|
||
text {
|
||
padding-right: 8rpx;
|
||
font-weight: normal;
|
||
color: #4dbfa3;
|
||
}
|
||
}
|
||
}
|
||
.header {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
view {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.week-container {
|
||
font-size: 24rpx !important;
|
||
font-weight: normal !important;
|
||
}
|
||
}
|
||
|
||
.header view:last-child {
|
||
width: 45%;
|
||
margin-right: 20rpx;
|
||
background-color: #f8f8f8;
|
||
border-radius: 40rpx;
|
||
|
||
button {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
color: #000;
|
||
line-height: 80rpx;
|
||
font-weight: normal;
|
||
font-size: 36rpx;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
button:last-child {
|
||
border-radius: 40rpx;
|
||
}
|
||
button:first-child {
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.active-button {
|
||
border-radius: 40rpx;
|
||
background-color: #21a1f4;
|
||
color: #fff;
|
||
}
|
||
|
||
button::after {
|
||
border: none;
|
||
}
|
||
}
|
||
.weekdays {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin: 10rpx 0;
|
||
}
|
||
.days {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
// border-bottom: 1px solid #ccc;
|
||
|
||
.risk-container {
|
||
width: 100%;
|
||
display: flex;
|
||
height: 160rpx;
|
||
margin-bottom: 30rpx;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
|
||
text {
|
||
width: 100%;
|
||
// height: 20rpx;
|
||
display: block;
|
||
margin-bottom: 3rpx;
|
||
padding-left: 3rpx;
|
||
text-align: left;
|
||
font-size: 24rpx;
|
||
box-sizing: border-box;
|
||
// visibility: hidden;
|
||
}
|
||
}
|
||
|
||
.risk-container text:nth-child(1) {
|
||
background-color: #cff2ec;
|
||
border-left: 2px solid #1db691;
|
||
}
|
||
.risk-container text:nth-child(2) {
|
||
background-color: #d8fbff;
|
||
border-left: 2px solid #45e6ed;
|
||
}
|
||
.risk-container text:nth-child(3) {
|
||
background-color: #fde9cf;
|
||
border-left: 2px solid #fa8d0a;
|
||
}
|
||
.risk-container text:nth-child(4) {
|
||
background-color: #ffd5d6;
|
||
border-left: 2px solid #eb363b;
|
||
}
|
||
.risk-container text:nth-child(5) {
|
||
background-color: #ffd5d6;
|
||
border-left: 2px solid #eb363b;
|
||
}
|
||
}
|
||
.days view {
|
||
width: 14.28%;
|
||
/* height: 80rpx; */
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.other-month {
|
||
// color: #ccc;
|
||
color: transparent;
|
||
|
||
text {
|
||
border: none !important;
|
||
background-color: transparent !important;
|
||
}
|
||
}
|
||
.custom-content {
|
||
font-size: 20rpx;
|
||
color: #007aff;
|
||
}
|
||
|
||
.week-th,
|
||
.week-td {
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
view {
|
||
width: 12.5%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.week-td view {
|
||
height: 260rpx;
|
||
padding: 10rpx 0;
|
||
border-bottom: 1px solid #ccc;
|
||
}
|
||
|
||
.week-td view:first-child {
|
||
border-right: 1px solid #ccc;
|
||
justify-content: center !important;
|
||
}
|
||
|
||
.week-td view text {
|
||
width: 100%;
|
||
margin-bottom: 3rpx;
|
||
padding-left: 2rpx;
|
||
display: inline-block;
|
||
font-size: 22rpx;
|
||
// font-weight: bold;
|
||
}
|
||
|
||
.style_1 {
|
||
background-color: #ffd5d6;
|
||
border-left: 2px solid #f6322a;
|
||
}
|
||
.style_2 {
|
||
background-color: #fee9ca;
|
||
border-left: 2px solid #f58b07;
|
||
}
|
||
.style_3 {
|
||
background-color: #d1f1ec;
|
||
border-left: 2px solid #14bb91;
|
||
}
|
||
.style_4 {
|
||
background-color: #d8fbfc;
|
||
border-left: 2px solid #3eebf7;
|
||
}
|
||
|
||
.day-th,
|
||
.day-td {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
view {
|
||
width: 33.33%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
// align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.day-td {
|
||
// height: 180rpx;
|
||
|
||
view {
|
||
height: 100%;
|
||
padding: 30rpx 0;
|
||
}
|
||
}
|
||
|
||
.day-th view:nth-child(2) {
|
||
border-left: 1px solid #ccc;
|
||
border-right: 1px solid #ccc;
|
||
}
|
||
.day-td view:nth-child(2) {
|
||
border-left: 1px solid #ccc;
|
||
border-right: 1px solid #ccc;
|
||
}
|
||
.day-td view:last-child {
|
||
justify-content: flex-start;
|
||
padding: 8rpx 0;
|
||
}
|
||
|
||
.day-td view:last-child text {
|
||
width: 100%;
|
||
margin-left: 10rpx;
|
||
margin-bottom: 3rpx;
|
||
text-align: left;
|
||
}
|
||
</style>
|