hayu
/
LpRealName
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

作业日计划管理

This commit is contained in:
lSun 2024-12-20 19:28:44 +08:00
parent 319d66f202
commit 4cac837af5
4 changed files with 1098 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

304
pages/realName/workbench/dailyPlanManagement/details.vue Normal file
View File

@ -0,0 +1,304 @@
<template>
<view class="container">
<!-- Project Header -->
<u-navbar class="u-navbar" title="日计划详情" placeholder @leftClick="leftClick" leftIconColor="#fff"
bgColor="#00337A" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }" />
<view class="project-header">
<text class="project-title">XXXXXXXXXXXXXXXXXXXXXXXXX工程</text>
<view class="completion-rates">
<text>作业计划完成率：70%</text>
<text>月作业计划完成率：70%</text>
</view>
</view>
<!-- Total Plan Input -->
<view class="total-plan">
<text>计划作业人数：</text>
<input type="number" v-model="totalPlan" class="total-input" />
</view>
<!-- Project Table -->
<view class="table-container">
<view class="table-header">
<text class="col-index">序号</text>
<text class="col-name">项目名称</text>
<text class="col-desc">项目描述</text>
<text class="col-completion">本日计划完成量</text>
<text class="col-completion">本日实际完成量</text>
</view>
<view class="table-body">
<view v-for="(item, index) in tableData" :key="index" class="table-row">
<text class="col-index">{{ item.index }}</text>
<text class="col-name">{{ item.name }}</text>
<view class="col-desc">
<text>区域：{{ item.location }}</text>
<text>{{ item.power }}</text>
</view>
<view class="col-completion">
<text>{{ item.plannedCompletion }}</text>
</view>
<view class="col-completion">
<input type="number" v-model="item.actualCompletion" class="completion-input" />
</view>
</view>
</view>
</view>
<!-- Image Upload Section -->
<view class="image-upload-section">
<text class="upload-title">* 当天作业人员合照</text>
<view class="upload-area" @tap="chooseImage">
<image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="preview-image"></image>
<text v-else class="upload-text">点击上传图片</text>
</view>
<text v-if="uploadStatus" :class="['upload-status', uploadStatus === 'success' ? 'success' : 'error']">
{{ uploadStatusText }}
</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
totalPlan: '3345',
tableData: [
{
index: 1,
name: '放点（个）',
location: '#2场址',
power: '(29.891MWp)',
plannedCompletion: '3345',
actualCompletion: '3300'
},
{
index: 2,
name: '桩基打孔（个）',
location: '#2场址',
power: '(29.891MWp)',
plannedCompletion: '3345',
actualCompletion: '3320'
},
{
index: 3,
name: '放点（个）',
location: '#2场址',
power: '(29.891MWp)',
plannedCompletion: '3345',
actualCompletion: '3340'
},
{
index: 4,
name: '桩基打孔（个）',
location: '#2场址',
power: '(29.891MWp)',
plannedCompletion: '3345',
actualCompletion: '3330'
}
],
imageUrl: '',
uploadStatus: '',
uploadStatusText: ''
}
},
methods: {
chooseImage() {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePaths = res.tempFilePaths
this.imageUrl = tempFilePaths[0]
this.uploadImage(tempFilePaths[0])
}
})
},
uploadImage(filePath) {
this.uploadStatus = 'uploading'
this.uploadStatusText = '上传中...'
// 模拟上传过程
setTimeout(() => {
// 这里应该是实际的上传逻辑
const success = Math.random() > 0.5 // 模拟上传成功或失败
if (success) {
this.uploadStatus = 'success'
this.uploadStatusText = '上传成功'
} else {
this.uploadStatus = 'error'
this.uploadStatusText = '上传失败，请重试'
}
}, 2000)
},
// 返回
leftClick() {
console.log('返回')
uni.navigateBack({
delta: 1 // 返回
});
}
}
}
</script>
<style>
.container {
padding: 30rpx;
background-color: #fff;
}
.project-header {
margin-bottom: 30rpx;
}
.project-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.completion-rates {
display: flex;
justify-content: space-between;
color: #666;
font-size: 28rpx;
}
.total-plan {
display: flex;
align-items: center;
margin-bottom: 30rpx;
font-size: 28rpx;
}
.total-input {
width: 200rpx;
height: 60rpx;
border: 1px solid #ddd;
padding: 0 20rpx;
margin-left: 20rpx;
}
.table-container {
border: 1px solid #ddd;
margin-bottom: 30rpx;
}
.table-header, .table-row {
display: flex;
font-size: 24rpx;
padding: 15rpx 10rpx;
border-bottom: 1px solid #ddd;
align-items: center;
}
.table-header {
background-color: #f5f5f5;
font-weight: bold;
}
.table-body {
background-color: #fff;
}
.table-row:nth-child(even) {
background-color: #fafafa;
}
.table-row:last-child {
border-bottom: none;
}
.table-row > * {
display: flex;
align-items: center;
}
.col-index {
width: 60rpx;
flex-shrink: 0;
}
.col-name {
width: 140rpx;
flex-shrink: 0;
}
.col-desc {
flex: 1;
min-width: 200rpx;
flex-direction: column;
align-items: flex-start;
}
.col-completion {
width: 160rpx;
flex-shrink: 0;
box-sizing: border-box;
padding: 0 5rpx;
text-align: center;
justify-content: center;
}
.completion-input {
width: 100%;
height: 50rpx;
border: 1px solid #ddd;
padding: 0 5rpx;
box-sizing: border-box;
font-size: 24rpx;
}
input {
background-color: #fff;
}
.image-upload-section {
margin-top: 30rpx;
}
.upload-title {
font-size: 28rpx;
color: #333;
margin-bottom: 20rpx;
}
.upload-area {
width: 100%;
height: 300rpx;
border: 2rpx dashed #ddd;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.upload-text {
color: #999;
font-size: 28rpx;
}
.preview-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.upload-status {
font-size: 24rpx;
margin-top: 10rpx;
}
.upload-status.success {
color: #52c41a;
}
.upload-status.error {
color: #ff4d4f;
}
</style>

202
pages/realName/workbench/dailyPlanManagement/develop.vue Normal file
View File

@ -0,0 +1,202 @@
<template>
<view class="container">
<u-navbar class="u-navbar" title="日计划制定" placeholder @leftClick="leftClick" leftIconColor="#fff"
bgColor="#00337A" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }" />
<!-- Project Header -->
<view class="project-header">
<text class="project-title">XXXXXXXXXXXXXXXXXXXXXXXXX工程</text>
<view class="completion-rates">
<text>作业计划完成率：70%</text>
<text>月作业计划完成率：70%</text>
</view>
</view>
<!-- Total Plan Input -->
<view class="total-plan">
<text>计划作业人数：</text>
<input type="number" v-model="totalPlan" class="total-input" />
</view>
<!-- Project Table -->
<view class="table-container">
<view class="table-header">
<text class="col-index">序号</text>
<text class="col-name">项目名称</text>
<text class="col-desc">项目描述</text>
<text class="col-completion">本日计划完成量</text>
</view>
<view class="table-body">
<view v-for="(item, index) in tableData" :key="index" class="table-row">
<text class="col-index">{{ item.index }}</text>
<text class="col-name">{{ item.name }}</text>
<view class="col-desc">
<text>区域：{{ item.location }}</text>
<text>{{ item.power }}</text>
</view>
<view class="col-completion">
<input type="number" v-model="item.completion" class="completion-input" />
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
totalPlan: '3345',
tableData: [{
index: 1,
name: '放点（个）',
location: '#2场址',
power: '(29.891MWp)',
completion: '3345'
},
{
index: 2,
name: '桩基打孔（个）',
location: '#2场址',
power: '(29.891MWp)',
completion: '3345'
},
{
index: 3,
name: '放点（个）',
location: '#2场址',
power: '(29.891MWp)',
completion: '3345'
},
{
index: 4,
name: '桩基打孔（个）',
location: '#2场址',
power: '(29.891MWp)',
completion: '3345'
}
]
}
},
methods: {
// 返回
leftClick() {
console.log('返回')
uni.navigateBack({
delta: 1 // 返回
});
}
}
}
</script>
<style>
.container {
padding: 30rpx;
background-color: #fff;
}
.project-header {
margin-bottom: 30rpx;
}
.project-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.completion-rates {
display: flex;
justify-content: space-between;
color: #666;
font-size: 28rpx;
}
.total-plan {
display: flex;
align-items: center;
margin-bottom: 30rpx;
font-size: 28rpx;
}
.total-input {
width: 200rpx;
height: 60rpx;
border: 1px solid #ddd;
padding: 0 20rpx;
margin-left: 20rpx;
}
.table-container {
border: 1px solid #ddd;
}
.table-header {
display: flex;
background-color: #f5f5f5;
padding: 20rpx;
font-size: 28rpx;
font-weight: bold;
border-bottom: 1px solid #ddd;
}
.table-body {
background-color: #fff;
}
.table-row {
display: flex;
padding: 20rpx;
font-size: 28rpx;
border-bottom: 1px solid #ddd;
align-items: center;
}
/* 隔行变色 */
.table-row:nth-child(even) {
background-color: #fafafa;
}
.table-row:last-child {
border-bottom: none;
}
.col-index {
width: 80rpx;
flex-shrink: 0;
}
.col-name {
width: 200rpx;
flex-shrink: 0;
}
.col-desc {
flex: 1;
display: flex;
flex-direction: column;
}
.col-completion {
width: 200rpx;
flex-shrink: 0;
box-sizing: border-box;
padding: 0 10rpx;
}
.completion-input {
width: 100%;
height: 60rpx;
border: 1px solid #ddd;
padding: 0 10rpx;
box-sizing: border-box;
font-size: 28rpx;
}
input {
background-color: #fff;
}
</style>

288
pages/realName/workbench/dailyPlanManagement/index.vue Normal file
View File

@ -0,0 +1,288 @@
<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" fields="month" :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>XXXXXXXXXXXXXXXXXXXXXXXXX工程</text>
</view>
<view class="completion-rate">
<text>作业计划完成率：70%</text>
<text>月完成计划完成率：70%</text>
</view>
</view>
<!-- Task List -->
<view class="task-list">
<!-- Task Item 1 -->
<view class="task-item">
<view class="task-header">
<text class="timestamp">2022-09-09 17:56:55</text>
<view class="status not-started">未开始</view>
</view>
<view class="metrics-container">
<view class="metric-row">
<text class="metric-item">总计划数量：2</text>
<text class="metric-item">月计划数量：2</text>
<text class="metric-item">计划数量：2</text>
</view>
<view class="metric-row">
<text class="metric-item">累计完成作业量：3</text>
<text class="metric-item">月累计完成作业量：3</text>
<text class="metric-item">作业人数：3</text>
</view>
</view>
<view class="actions">
<button class="action-btn">详情</button>
<button class="action-btn">修改</button>
<button class="action-btn danger">提报</button>
</view>
</view>
<!-- Task Item 2 -->
<view class="task-item">
<view class="task-header">
<text class="timestamp">2022-09-09 17:56:55</text>
<view class="status in-progress">进行中</view>
</view>
<view class="metrics-container">
<view class="metric-row">
<text class="metric-item">总计划数量：2</text>
<text class="metric-item">月计划数量：2</text>
<text class="metric-item">计划数量：2</text>
</view>
<view class="metric-row">
<text class="metric-item">累计完成作业量：3</text>
<text class="metric-item">月累计完成作业量：3</text>
<text class="metric-item">作业人数：3</text>
</view>
</view>
<view class="actions">
<button class="action-btn" @click="detailsPlan">详情</button>
<button class="action-btn" @click="uploadPlan">完成电子上传</button>
</view>
</view>
<!-- Task Item 3 -->
<view class="task-item">
<view class="task-header">
<text class="timestamp">2022-09-09 17:56:55</text>
<view class="status completed">已结束</view>
</view>
<view class="metrics-container">
<view class="metric-row">
<text class="metric-item">总计划数量：2</text>
<text class="metric-item">月计划数量：2</text>
<text class="metric-item">计划数量：2</text>
</view>
<view class="metric-row">
<text class="metric-item">累计完成作业量：3</text>
<text class="metric-item">月累计完成作业量：3</text>
<text class="metric-item">作业人数：3</text>
</view>
</view>
<view class="actions">
<button class="action-btn" @click="detailsPlan">详情</button>
<button class="action-btn" @click="uploadPlan">完成电子上传</button>
</view>
</view>
</view>
</view>
</template>
<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>
<script>
export default {
data() {
return {
currentDate: '2022-09'
}
},
methods: {
onDateChange(e) {
this.currentDate = e.detail.value
},
developDailyPlan() {
uni.navigateTo({ //制定日计划
url: `/pages/realName/workbench/dailyPlanManagement/develop`
})
},
uploadPlan(){
uni.navigateTo({ //完成情况上传
url: `/pages/realName/workbench/dailyPlanManagement/upload`
})
},
detailsPlan(){
uni.navigateTo({ //日计划详情
url: `/pages/realName/workbench/dailyPlanManagement/details`
})
},
// 返回
leftClick() {
console.log('返回')
uni.navigateBack({
delta: 1 // 返回
});
}
}
}
</script>

304
pages/realName/workbench/dailyPlanManagement/upload.vue Normal file
View File

@ -0,0 +1,304 @@
<template>
<view class="container">
<u-navbar class="u-navbar" title="完成情况上传" placeholder @leftClick="leftClick" leftIconColor="#fff"
bgColor="#00337A" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }" />
<!-- Project Header -->
<view class="project-header">
<text class="project-title">XXXXXXXXXXXXXXXXXXXXXXXXX工程</text>
<view class="completion-rates">
<text>作业计划完成率：70%</text>
<text>月作业计划完成率：70%</text>
</view>
</view>
<!-- Total Plan Input -->
<view class="total-plan">
<text>计划作业人数：</text>
<input type="number" v-model="totalPlan" class="total-input" />
</view>
<!-- Project Table -->
<view class="table-container">
<view class="table-header">
<text class="col-index">序号</text>
<text class="col-name">项目名称</text>
<text class="col-desc">项目描述</text>
<text class="col-completion">本日计划完成量</text>
<text class="col-completion">本日实际完成量</text>
</view>
<view class="table-body">
<view v-for="(item, index) in tableData" :key="index" class="table-row">
<text class="col-index">{{ item.index }}</text>
<text class="col-name">{{ item.name }}</text>
<view class="col-desc">
<text>区域：{{ item.location }}</text>
<text>{{ item.power }}</text>
</view>
<view class="col-completion">
<text>{{ item.plannedCompletion }}</text>
</view>
<view class="col-completion">
<input type="number" v-model="item.actualCompletion" class="completion-input" />
</view>
</view>
</view>
</view>
<!-- Image Upload Section -->
<view class="image-upload-section">
<text class="upload-title">* 当天作业人员合照</text>
<view class="upload-area" @tap="chooseImage">
<image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="preview-image"></image>
<text v-else class="upload-text">点击上传图片</text>
</view>
<text v-if="uploadStatus" :class="['upload-status', uploadStatus === 'success' ? 'success' : 'error']">
{{ uploadStatusText }}
</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
totalPlan: '3345',
tableData: [
{
index: 1,
name: '放点（个）',
location: '#2场址',
power: '(29.891MWp)',
plannedCompletion: '3345',
actualCompletion: '3300'
},
{
index: 2,
name: '桩基打孔（个）',
location: '#2场址',
power: '(29.891MWp)',
plannedCompletion: '3345',
actualCompletion: '3320'
},
{
index: 3,
name: '放点（个）',
location: '#2场址',
power: '(29.891MWp)',
plannedCompletion: '3345',
actualCompletion: '3340'
},
{
index: 4,
name: '桩基打孔（个）',
location: '#2场址',
power: '(29.891MWp)',
plannedCompletion: '3345',
actualCompletion: '3330'
}
],
imageUrl: '',
uploadStatus: '',
uploadStatusText: ''
}
},
methods: {
chooseImage() {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePaths = res.tempFilePaths
this.imageUrl = tempFilePaths[0]
this.uploadImage(tempFilePaths[0])
}
})
},
uploadImage(filePath) {
this.uploadStatus = 'uploading'
this.uploadStatusText = '上传中...'
// 模拟上传过程
setTimeout(() => {
// 这里应该是实际的上传逻辑
const success = Math.random() > 0.5 // 模拟上传成功或失败
if (success) {
this.uploadStatus = 'success'
this.uploadStatusText = '上传成功'
} else {
this.uploadStatus = 'error'
this.uploadStatusText = '上传失败，请重试'
}
}, 2000)
},
// 返回
leftClick() {
console.log('返回')
uni.navigateBack({
delta: 1 // 返回
});
}
}
}
</script>
<style>
.container {
padding: 30rpx;
background-color: #fff;
}
.project-header {
margin-bottom: 30rpx;
}
.project-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.completion-rates {
display: flex;
justify-content: space-between;
color: #666;
font-size: 28rpx;
}
.total-plan {
display: flex;
align-items: center;
margin-bottom: 30rpx;
font-size: 28rpx;
}
.total-input {
width: 200rpx;
height: 60rpx;
border: 1px solid #ddd;
padding: 0 20rpx;
margin-left: 20rpx;
}
.table-container {
border: 1px solid #ddd;
margin-bottom: 30rpx;
}
.table-header, .table-row {
display: flex;
font-size: 24rpx;
padding: 15rpx 10rpx;
border-bottom: 1px solid #ddd;
align-items: center;
}
.table-header {
background-color: #f5f5f5;
font-weight: bold;
}
.table-body {
background-color: #fff;
}
.table-row:nth-child(even) {
background-color: #fafafa;
}
.table-row:last-child {
border-bottom: none;
}
.table-row > * {
display: flex;
align-items: center;
}
.col-index {
width: 60rpx;
flex-shrink: 0;
}
.col-name {
width: 140rpx;
flex-shrink: 0;
}
.col-desc {
flex: 1;
min-width: 200rpx;
flex-direction: column;
align-items: flex-start;
}
.col-completion {
width: 160rpx;
flex-shrink: 0;
box-sizing: border-box;
padding: 0 5rpx;
text-align: center;
justify-content: center;
}
.completion-input {
width: 100%;
height: 50rpx;
border: 1px solid #ddd;
padding: 0 5rpx;
box-sizing: border-box;
font-size: 24rpx;
}
input {
background-color: #fff;
}
.image-upload-section {
margin-top: 30rpx;
}
.upload-title {
font-size: 28rpx;
color: #333;
margin-bottom: 20rpx;
}
.upload-area {
width: 100%;
height: 300rpx;
border: 2rpx dashed #ddd;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.upload-text {
color: #999;
font-size: 28rpx;
}
.preview-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.upload-status {
font-size: 24rpx;
margin-top: 10rpx;
}
.upload-status.success {
color: #52c41a;
}
.upload-status.error {
color: #ff4d4f;
}
</style>