LpRealName/pages/realName/workbench/dailyPlanManagement/upload.vue

<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>