|
|
@@ -19,36 +19,136 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bodyBox">
|
|
|
- <div class="inputStopDate" v-if="planDateList.length > 0">
|
|
|
+ <div class="inputStopDate" v-if="planDateList.length">
|
|
|
<template v-for="(item, index) in planDateList">
|
|
|
<div :key="'inputStopDate_' + index" class="dateTimeDiv">
|
|
|
- <div class="itemTitle">施工计划开始时间</div>
|
|
|
+ <div class="itemTitle" @click="changeTab(item)">施工计划开始时间</div>
|
|
|
<el-date-picker v-model="item.value" type="date" placeholder="请选择时间"></el-date-picker>
|
|
|
<div class="removeDiv" @click="removePlanDate(index)">
|
|
|
- <i class="removeDate el-icon-remove-outline" style="color:#78B6E7;"></i>
|
|
|
+ <i class="removeDate el-icon-remove-outline" style="color: #78b6e7"></i>
|
|
|
</div>
|
|
|
- <div class="addFileDiv" @click="addFile">
|
|
|
- <i class="addFile el-icon-download" style="color:#78B6E7;"></i>
|
|
|
+ <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: []
|
|
|
+ planDateList: [],
|
|
|
+ tableData: [
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ window.l = this.planDateList
|
|
|
+ },
|
|
|
|
|
|
methods: {
|
|
|
+ handleFileChange(event, item, index) {
|
|
|
+ console.log(event, item)
|
|
|
+ this.resetState()
|
|
|
+ const file = event.target.files[0]
|
|
|
+ if (!file) return
|
|
|
+ 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
|
|
|
+ },
|
|
|
+
|
|
|
/**
|
|
|
*添加时间段
|
|
|
*/
|
|
|
@@ -59,7 +159,16 @@ export default {
|
|
|
this.planDateList.push(item)
|
|
|
},
|
|
|
|
|
|
- addFile() {}
|
|
|
+ /**
|
|
|
+ *删除时间段
|
|
|
+ */
|
|
|
+ removePlanDate(index) {
|
|
|
+ if (index == -1) {
|
|
|
+ this.planDateList = []
|
|
|
+ } else {
|
|
|
+ this.planDateList.splice(index, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -80,10 +189,25 @@ export default {
|
|
|
.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{
|
|
|
- cursor: pointer;
|
|
|
+.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 {
|
|
|
@@ -110,6 +234,7 @@ export default {
|
|
|
font-size: 14px;
|
|
|
letter-spacing: -1px;
|
|
|
color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.dateTimeDiv {
|
|
|
display: flex;
|
|
|
@@ -145,6 +270,7 @@ export default {
|
|
|
height: calc(100% - 1.57292rem - 105px);
|
|
|
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 */;
|
sujunling