400 lines
9.9 KiB
Vue
400 lines
9.9 KiB
Vue
<template>
|
||
<view class="container">
|
||
<u-navbar
|
||
class="u-navbar"
|
||
title="日计划管理"
|
||
placeholder
|
||
@leftClick="leftClick"
|
||
leftIconColor="#fff"
|
||
bgColor="#00337A"
|
||
:titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
|
||
/>
|
||
<!-- Header -->
|
||
<view class="header">
|
||
<view class="date-section">
|
||
<picker mode="date" :value="currentDate" @change="onDateChange">
|
||
<view class="date-picker">
|
||
<image src="@/static/realName/attendance.png" class="calendar-icon"></image>
|
||
<text>{{ currentDate }}</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="progress-section">
|
||
<text class="reminder-text">请于每日18:00点前提交明日计划</text>
|
||
<button class="primary-btn" @click="developDailyPlan">制定日计划</button>
|
||
</view>
|
||
<view class="project-title">
|
||
<text>{{ proName }}</text>
|
||
</view>
|
||
<view class="completion-rate">
|
||
<text>作业计划完成率：{{ totalComplete }}%</text>
|
||
<text>月完成计划完成率：{{ monthComplete }}%</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="task-list">
|
||
<block v-for="(task, index) in taskList" :key="index">
|
||
<view class="task-item">
|
||
<view class="task-header">
|
||
<text class="timestamp">{{ task.day }}</text>
|
||
<view :class="['status', getStatusClass(task)]">{{ getTaskStatusText(task) }}</view>
|
||
</view>
|
||
<view class="metrics-container">
|
||
<view class="metric-row">
|
||
<text class="metric-item">总计划数量：{{ task.totalNum }}</text>
|
||
<text class="metric-item">月计划数量：{{ task.completeNumMonth }}</text>
|
||
<text class="metric-item">计划数量：{{ task.planCompleteNumDay }}</text>
|
||
</view>
|
||
<view class="metric-row">
|
||
<text class="metric-item">累计完成作业量：{{ task.completeNumDay }}</text>
|
||
<text class="metric-item">月累计完成作业量：{{ task.completeNumAllMonth }}</text>
|
||
<text class="metric-item">作业人数：{{ task.planWorkNum }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="actions">
|
||
<button class="action-btn" @click="detailsPlan(task)">详情</button>
|
||
<button class="action-btn" @click="uploadPlan(task)" v-if="task.path == null || task.path === ''">
|
||
完成电子上传
|
||
</button>
|
||
<button class="action-btn" @click="editPlan(task)" v-if="task.path == null || task.path === ''">
|
||
完成情况修改
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 定义一个不依赖于Vue实例的日期格式化函数
|
||
function formatDate(date) {
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
return `${year}-${month}-${day}`
|
||
}
|
||
|
||
import config from '@/config'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentDate: formatDate(new Date()),
|
||
proId: uni.getStorageSync('realNameUser').proId,
|
||
proName: '',
|
||
taskList: [],
|
||
totalComplete: '0.00',
|
||
monthComplete: '0.00',
|
||
id: '',
|
||
dayId: ''
|
||
}
|
||
},
|
||
created() {
|
||
// 如果需要在组件创建后再次设置currentDate为最新的当前日期，可以在这里做
|
||
this.currentDate = formatDate(new Date())
|
||
this.getListData()
|
||
},
|
||
onLoad() {
|
||
// this.getListData()
|
||
},
|
||
methods: {
|
||
onDateChange(e) {
|
||
this.currentDate = e.detail.value
|
||
this.getListData()
|
||
},
|
||
|
||
developDailyPlan() {
|
||
uni.navigateTo({
|
||
//制定日计划
|
||
url: `/pages/realName/workbench/dailyPlanManagement/develop?proId=${encodeURIComponent(
|
||
this.proId
|
||
)}&proName=${encodeURIComponent(this.proName)}&id=${encodeURIComponent(this.id)}`
|
||
})
|
||
},
|
||
|
||
editPlan() {
|
||
uni.navigateTo({
|
||
//修改日计划
|
||
url: `/pages/realName/workbench/dailyPlanManagement/edit?dayId=${encodeURIComponent(
|
||
this.dayId
|
||
)}&id=${encodeURIComponent(this.id)}&proName=${encodeURIComponent(this.proName)}`
|
||
})
|
||
},
|
||
|
||
uploadPlan() {
|
||
uni.navigateTo({
|
||
//完成情况上传
|
||
url: `/pages/realName/workbench/dailyPlanManagement/upload?dayId=${encodeURIComponent(
|
||
this.dayId
|
||
)}&id=${encodeURIComponent(this.id)}&proName=${encodeURIComponent(this.proName)}`
|
||
})
|
||
},
|
||
detailsPlan() {
|
||
uni.navigateTo({
|
||
//日计划详情
|
||
url: `/pages/realName/workbench/dailyPlanManagement/details?dayId=${encodeURIComponent(
|
||
this.dayId
|
||
)}&id=${encodeURIComponent(this.id)}&proName=${encodeURIComponent(this.proName)}`
|
||
})
|
||
},
|
||
|
||
// 返回
|
||
leftClick() {
|
||
console.log('返回')
|
||
uni.navigateBack({
|
||
delta: 1 // 返回
|
||
})
|
||
},
|
||
getListData() {
|
||
let param = {
|
||
proId: this.proId,
|
||
date: this.currentDate
|
||
}
|
||
|
||
console.log('param查询参数', param)
|
||
uni.request({
|
||
url: config.realAppUrl + '/AppPlan/selectDayPlan',
|
||
method: 'post',
|
||
data: JSON.stringify(param),
|
||
header: {
|
||
'content-type': 'application/json',
|
||
Authorization: uni.getStorageSync('realNameToken')
|
||
},
|
||
success: res => {
|
||
console.log('日计划管理', res)
|
||
if (res.data.code == 200) {
|
||
this.taskList = res.data.data
|
||
const firstProName = res.data.data.length > 0 ? res.data.data[0].proName : null
|
||
this.proName = firstProName
|
||
this.totalComplete = this.overallCompletionRate()
|
||
this.monthComplete = this.monthlyCompletionRate()
|
||
this.id = res.data.data[0].id
|
||
this.dayId = res.data.data[0].dayId
|
||
} else {
|
||
uni.$u.toast(res.data.msg)
|
||
this.taskList = ''
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log(err)
|
||
}
|
||
})
|
||
},
|
||
getStatusClass(task) {
|
||
var planCompleteNumDay = task.planCompleteNumDay
|
||
var completeNumDay = task.completeNumDay
|
||
var status = ''
|
||
if (planCompleteNumDay > completeNumDay) {
|
||
status = '进行中'
|
||
} else {
|
||
status = '已结束'
|
||
}
|
||
switch (status) {
|
||
case '进行中':
|
||
return 'in-progress'
|
||
case '已结束':
|
||
return 'completed'
|
||
default:
|
||
return 'not-started'
|
||
}
|
||
},
|
||
|
||
getTaskStatusText(task) {
|
||
var planCompleteNumDay = task.planCompleteNumDay
|
||
var completeNumDay = task.completeNumDay
|
||
var status = ''
|
||
if (planCompleteNumDay > completeNumDay) {
|
||
status = '进行中'
|
||
} else {
|
||
status = '已结束'
|
||
}
|
||
|
||
switch (status) {
|
||
case '未开始':
|
||
return '未开始'
|
||
case '进行中':
|
||
return '进行中'
|
||
case '已结束':
|
||
return '已结束'
|
||
default:
|
||
return '未开始'
|
||
}
|
||
},
|
||
|
||
// 作业计划完成率 = (累计完成作业量 / 总计划数量) * 100%
|
||
overallCompletionRate() {
|
||
let totalPlan = 0
|
||
let completedWork = 0
|
||
|
||
this.taskList.forEach(task => {
|
||
if (task.completeNumDay && task.planCompleteNumDay) {
|
||
totalPlan += parseFloat(task.planCompleteNumDay)
|
||
completedWork += parseFloat(task.completeNumDay)
|
||
}
|
||
})
|
||
|
||
return totalPlan > 0 ? ((completedWork / totalPlan) * 100).toFixed(2) : '0.00'
|
||
},
|
||
|
||
// 月完成计划完成率 = (月累计完成作业量 / 总计划数量) * 100%
|
||
monthlyCompletionRate() {
|
||
let totalPlan = 0
|
||
let completedWorkInMonth = 0
|
||
|
||
this.taskList.forEach(task => {
|
||
if (task.completeNumAllMonth && task.completeNumMonth) {
|
||
totalPlan += parseFloat(task.completeNumAllMonth)
|
||
completedWorkInMonth += parseFloat(task.completeNumMonth)
|
||
}
|
||
})
|
||
return totalPlan > 0 ? ((completedWorkInMonth / totalPlan) * 100).toFixed(2) : '0.00'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.container {
|
||
padding: 20rpx;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.header {
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.date-section {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.date-picker {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.calendar-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.progress-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.reminder-text {
|
||
color: #ff4d4f;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.primary-btn {
|
||
background-color: #0099ff;
|
||
color: #fff;
|
||
padding: 0rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.project-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.completion-rate {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.task-item {
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.task-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.timestamp {
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.status {
|
||
display: inline-block;
|
||
padding: 4rpx 20rpx;
|
||
border-radius: 4rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.not-started {
|
||
background-color: #e6f7ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.in-progress {
|
||
background-color: #fff7e6;
|
||
color: #fa8c16;
|
||
}
|
||
|
||
.completed {
|
||
background-color: #f6ffed;
|
||
color: #52c41a;
|
||
}
|
||
|
||
.metrics-container {
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.metric-row {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.metric-item {
|
||
flex: 1;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.actions {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
font-size: 26rpx;
|
||
padding: 0rpx 22rpx;
|
||
border: 1px solid #ddd;
|
||
border-radius: 20rpx;
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
}
|
||
|
||
.action-btn.danger {
|
||
color: #fff;
|
||
background-color: #ff4d4f;
|
||
border-color: #ff4d4f;
|
||
}
|
||
</style>
|