yclw/src/views/groupPage/districtPageModules/decisionSupport/constructionProgressSimulation/RightBox.vue

<!--
 * @Descripttion: 右边盒子
 * @Author: sujunling
 * @Date: 2025-05-20 10:16:56
-->
<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInRight"
    leave-active-class="animate__slideOutRight"
  >
    <div class="widget-ProjectProgress">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">施工进度控制模型参数</span>
          <div class="addDiv" @click="addPlanDate"></div>
        </div>
      </div>
      <div class="bodyBox">
        <div class="inputStopDate" v-if="planDateList.length">
          <template v-for="(item, index) in planDateList">
            <div :key="'inputStopDate_' + index" class="dateTimeDiv">
              <div class="itemTitle" v-if="index" @click="changeTab(item)">施工调整开始时间</div>
              <div class="itemTitle" v-else @click="changeTab(item)">施工计划开始时间</div>
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="item.value"
                type="date"
                placeholder="请选择时间"
              ></el-date-picker>
              <div class="removeDiv" @click="removePlanDate(index)" v-if="index">
                <i class="removeDate el-icon-remove-outline" style="color: #78b6e7"></i>
              </div>
              <div class="addFileDiv">
                <input
                  type="file"
                  id="excelFile"
                  accept=".xlsx, .xls"
                  @change="handleFileChange($event, item, index)"
                  class="file-input"
                />
                <i class="addFile el-icon-download" style="color: #78b6e7"></i>
              </div>
            </div>
          </template>
        </div>
        <div class="tableBox tableBoxRight" v-if="tableData.length">
          <el-table :data="tableData" size="mini" height="250">
            <el-table-column prop="step" label="序号"> </el-table-column>
            <el-table-column prop="area" label="标识"> </el-table-column>
            <el-table-column prop="total_volume" label="任务量"> </el-table-column>
            <el-table-column prop="machine_count" label="机械数量"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import XLSX from 'xlsx'
export default {
  data() {
    return {
      //施工计划时间段
      planDateList: [
      ],
      tableData: []
    }
  },
  mounted() {
    window.l = this.planDateList
  },

  methods: {
    updateFile(f, item, k) {
      const formData = new FormData()
      formData.append('file', f)
      formData.append('name', k ? 'construction_data_2' : 'construction_data_1')
      fetch('http://127.0.0.1:8000/upload-file', {
        method: 'POST',
        body: formData
      })
        .then((response) => response.json())
        .then((r) => {
          if (r && r.code == 1) {
            this.$message.success(k ? '施工调整表格数据上传成功！' : '施工计划表格数据上传成功！')
            item.file = r.result
          }
        })
    },

    handleFileChange(event, item, index) {
      console.log(event, item)
      this.resetState()
      const file = event.target.files[0]
      if (!file) return
      this.updateFile(file, item, index)
      this.fileName = file.name
      this.isLoading = true
      const reader = new FileReader()
      reader.onload = (e) => {
        try {
          const data = new Uint8Array(e.target.result)
          this.processExcelData(data, item, index)
        } catch (err) {
          this.error = '文件处理失败: ' + err.message
          console.error(err)
        } finally {
          this.isLoading = false
        }
      }
      reader.onerror = () => {
        this.error = '文件读取失败'
        this.isLoading = false
      }
      reader.readAsArrayBuffer(file)
    },

    processExcelData(data, item, index) {
      try {
        const workbook = XLSX.read(data, { type: 'array' })
        const firstSheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[firstSheetName]
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        if (jsonData.length === 0) {
          this.error = 'Excel文件中没有数据'
          return
        }
        this.headers = jsonData[0]
        this.data = jsonData.slice(1).filter((row) => row.length > 0)
        if (this.data.length === 0) {
          this.error = 'Excel文件中没有有效数据'
        }
        var data = {
          headers: this.headers,
          data: this.data,
          fileName: this.fileName
        }
        item.table = data
        if (!index) {
          this.tableData = this.transformData(data)
        }
        console.log('data', data)
      } catch (err) {
        this.error = 'Excel文件解析失败: ' + err.message
      }
    },

    transformData(originalData) {
      const { headers, data } = originalData
      return data.map((row) => {
        const obj = {}
        headers.forEach((header, index) => {
          obj[header] = row[index]
        })
        return obj
      })
    },

    changeTab(i) {
      if (i.table) {
        this.tableData = this.transformData(i.table)
      }
    },

    resetState() {
      this.headers = []
      this.data = []
      this.error = ''
      this.isLoading = false
    },

    /**
     *添加时间段
     */
    addPlanDate() {
      if (this.planDateList.length < 2) {
        const item = {
          value: ''
        }
        this.planDateList.push(item)
      }
    },

    /**
     *删除时间段
     */
    removePlanDate(index) {
      if (this.planDateList.length > 1) {
        if (index == -1) {
          this.planDateList = []
        } else {
          this.planDateList.splice(index, 1)
        }
      }
    },

    changeTable(r) {
      if (r.start_date) {
        this.planDateList.push({
          value: r.start_date
        })
      }
      if (r.conversion_date) {
        this.planDateList.push({
          value: r.conversion_date
        })
      }
    }
  }
}
</script>
<style>
.dateTimeDiv .el-date-editor {
  background-color: rgba(255, 255, 255, 0);
  border-radius: 2px;
  height: 30px;
  border: 1px solid #216294;
}
.dateTimeDiv .el-date-editor input.el-input__inner {
  height: 30px;
  line-height: 30px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, 0);
  color: #fff !important;
}
.dateTimeDiv input.el-range-input {
  background-color: rgba(255, 255, 255, 0);
  color: #fff;
}
.dateTimeDiv .el-date-editor .el-input__prefix .el-input__icon {
  line-height: 30px;
}
.tableBoxRight .el-table th.el-table__cell > .cell {
  background: rgba(43, 167, 255, 0.16);
  color: #2ba7ff;
}
</style>
<style lang='scss' scoped>
.removeDiv, .addFileDiv {
  width: 24px !important;
  height: 24px !important;
  cursor: pointer !important;
}
.tableBox {
  margin-top: 20px;
}
.removeDiv,
.addFileDiv {
  cursor: pointer;
}
.addFileDiv input {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 0.01;
  cursor: pointer;
}
.dateTimeDiv {
  .el-date-editor {
    input.el-input__inner {
      height: 30px;
      line-height: 30px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0);
      border: 1px solid rgba(255, 255, 255, 0);
      color: #ffffff;
    }
  }
}
.bodyBox,
.content-info {
  padding: 15px;
}
.dateTimeDiv .el-date-editor.el-input {
  width: 145px;
  border-radius: 2px;
  margin: 0 5px;
}
.dateTimeDiv .itemTitle {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -1px;
  color: #ffffff;
  cursor: pointer;
}
.dateTimeDiv {
  display: flex;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
}
.addDiv {
  color: #9bd2fa;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  background: url('~@/assets/images/jczc/add.png') no-repeat center;
  background-size: 100% 100%;
  width: 40px;
  height: 22px;
}
.animate__slideInRight,
.animate__slideOutRight {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-ProjectProgress {
  $size10: 0.052083rem /* 10/192 */;
  $size20: 0.104167rem /* 20/192 */;
  z-index: 2;
  //position
  top: 0.505208rem /* 10/192 */;
  margin-right: $size20 /* 20/192 */;
  right: 0;
  position: absolute;
  //size
  height: calc(100% - 1.57292rem - 115px);
  width: 2.083333rem /* 400/192 */;
  color: #eee;
  overflow: hidden;
  background: linear-gradient(0deg, rgba(14, 167, 255, 0.24) 0%, rgba(14, 167, 255, 0.05) 100%);
  .head {
    height: 0.166667rem /* 32/192 */;
    width: 100%;
    background: linear-gradient(-90deg, rgba(43, 167, 255, 0.2) 0%, rgba(43, 167, 255, 0.08) 100%);
    font-family: Source Han Sans CN-HEAVY;
    .title {
      width: 100%;
      height: 100%;
      display: flex;
      font-weight: 400;
      align-items: center;
      .icon {
        height: 0.166667rem /* 32/192 */;
        width: 0.34375rem /* 66/192 */;
        background: url('~@/views/groupPage/images/模块图标/项目进展.png') no-repeat center center;
        background-size: 100% 100%;
      }
      span {
        flex: 1;
        font-weight: bold;
        font-size: 0.083333rem /* 16/192 */;
        color: #ffffff;
        padding: 0.041667rem /* 8/192 */;
        background: linear-gradient(0deg, #9bd2fa 0%, #ffffff 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>