<template>
|
<div class="dailyreport">
|
<div class="dailyBox">
|
<div class="dailyTop">
|
<el-select v-model="cityChoose" placeholder="请选择">
|
<el-option
|
v-for="item in cityOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-date-picker
|
v-model="value1"
|
type="daterange"
|
align="right"
|
unlink-panels
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:picker-options="pickerOptions1">
|
</el-date-picker>
|
<el-input v-model="carInput" placeholder="请输入走航车编号" clearable style="width: 180px;display: inline-block"></el-input>
|
<el-button type="primary" @click="selectExport" style="margin-right: 10px;">查询</el-button>
|
<el-button type="primary" @click="openBox=true" style="margin-left: 0">上传</el-button>
|
<!-- <el-input v-model="carInput" placeholder="请输入走航车编号" clearable style="width: 180px;display: inline-block"></el-input>-->
|
<!-- <el-button type="primary" @click="carExport">下载走航车日报</el-button>-->
|
</div>
|
<div class="dailyDown" style="overflow-y: auto">
|
<el-card class="boxCard">
|
<el-table
|
:data="tableData"
|
style="width: 100%;overflow-y: auto; height: 82%;">
|
<el-table-column
|
prop="name"
|
label="报告名称"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="time"
|
label="提交时间"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="date"
|
label="创建时间"
|
>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" size="medium" @click="expReport(scope.row)">下载</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
</div>
|
<el-dialog title="上传图片" :visible.sync="openBox">
|
<div class="openTop">
|
<el-date-picker
|
v-model="value2"
|
align="right"
|
type="date"
|
placeholder="选择日期"
|
:picker-options="pickerOptions">
|
</el-date-picker>
|
<el-input v-model="carInput2" placeholder="请输入走航车编号" clearable style="width: 180px;display: inline-block"></el-input>
|
</div>
|
<div class="uploadDiv" style="width:90%;overflow: auto;display: flex;flex-wrap: wrap;justify-content: space-between">
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
:on-change="handleChange1"
|
:on-remove="handleRemove1"
|
:file-list="fileList1"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取图片</el-button>
|
<div slot="tip" class="el-upload__tip">请上传走航监测概况图片</div>
|
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
:on-change="handleChange2"
|
:on-remove="handleRemove2"
|
:file-list="fileList2"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取图片</el-button>
|
<div slot="tip" class="el-upload__tip">请上传PM2.5走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
:on-change="handleChange3"
|
:on-remove="handleRemove3"
|
:file-list="fileList3"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取图片</el-button>
|
<div slot="tip" class="el-upload__tip">请上传PM10走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
:on-change="handleChange4"
|
:on-remove="handleRemove4"
|
:file-list="fileList4"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取图片</el-button>
|
<div slot="tip" class="el-upload__tip">请上传NO2走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
:on-change="handleChange5"
|
:on-remove="handleRemove5"
|
:file-list="fileList5"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取图片</el-button>
|
<div slot="tip" class="el-upload__tip">请上传CO走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
:on-change="handleChange6"
|
:on-remove="handleRemove6"
|
:file-list="fileList6"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取图片</el-button>
|
<div slot="tip" class="el-upload__tip">请上传SO2走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
:on-change="handleChange7"
|
:on-remove="handleRemove7"
|
:file-list="fileList7"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取图片</el-button>
|
<div slot="tip" class="el-upload__tip">请上传O3走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
:on-change="handleChange8"
|
:on-remove="handleRemove8"
|
:file-list="fileList8"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取图片</el-button>
|
<div slot="tip" class="el-upload__tip">请上传VOCs走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
:on-change="handleChange9"
|
:on-remove="handleRemove9"
|
:file-list="fileList9"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取图片</el-button>
|
<div slot="tip" class="el-upload__tip">请上传小结图片</div>
|
</el-upload>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="openBox = false">取 消</el-button>
|
<!-- <el-button class="btnPosition" type="primary" plain @click="submitImgs">提交</el-button>-->
|
<el-button type="primary" @click="submitImgs">上 传</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
// import { exportDocx } from '@/utils/exportDocx'
|
import { exportDocx } from '@/utils/exportImageFile'
|
import requestObj from '@/utils/request'
|
export default {
|
data() {
|
return {
|
cityChoose: 'gx', // 默认查询高新区走行车
|
cityOptions: [{
|
value: 'gx',
|
label: '高新区'
|
}],
|
carInput: '', // 查询时走航车唯一标识
|
carInput2: '', // 上传时走航车唯一标识
|
value1: [new Date(), new Date()], // 查询时时间段
|
value2: new Date(), // 上传时间
|
pickerOptions1: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近一个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近三个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
picker.$emit('pick', [start, end]);
|
}
|
}]
|
},
|
pickerOptions: { // 快捷键
|
disabledDate(time) {
|
return time.getTime() > Date.now()
|
},
|
shortcuts: [{
|
text: '今天',
|
onClick(picker) {
|
picker.$emit('pick', new Date())
|
}
|
}, {
|
text: '昨天',
|
onClick(picker) {
|
const date = new Date()
|
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
picker.$emit('pick', date)
|
}
|
}, {
|
text: '一周前',
|
onClick(picker) {
|
const date = new Date()
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', date)
|
}
|
}]
|
},
|
selectTime: [],
|
upTime: [],
|
fileList1: [],
|
fileList2: [],
|
fileList3: [],
|
fileList4: [],
|
fileList5: [],
|
fileList6: [],
|
fileList7: [],
|
fileList8: [],
|
fileList9: [],
|
fileLists: [[], [], [], [], [], [], [], [], []],
|
sailingReport: {
|
fileLists: [
|
// fileList1: [],
|
// fileList2: [],
|
// fileList3: [],
|
// fileList4: [],
|
// fileList5: [],
|
// fileList6: [],
|
// fileList7: [],
|
// fileList8: [],
|
// fileList9: []
|
[], [], [], [], [], [], [], [], []
|
],
|
index: 5,
|
fileList: []
|
},
|
openBox: false, // 是否打开弹窗
|
// tableData: []
|
tableData: [{
|
date: '2016-05-02',
|
name: '王小虎',
|
time: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-04',
|
name: '王小虎',
|
time: '上海市普陀区金沙江路 1517 弄'
|
}, {
|
date: '2016-05-01',
|
name: '王小虎',
|
time: '上海市普陀区金沙江路 1519 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
time: '上海市普陀区金沙江路 1516 弄'
|
}],
|
urlList: [],
|
numList: [0, 0, 0, 0, 0, 0, 0, 0, 0]
|
}
|
},
|
methods: {
|
// 查询走行车报告
|
selectExport() {
|
this.upTime = this.newTime(this.value1)
|
this.$request({
|
url: '',
|
method: 'get',
|
params: {
|
startTime: this.upTime[0],
|
endTime: this.upTime[1],
|
mac: this.carInput
|
}
|
}).then(res => {
|
console.log(res)
|
var info = res.data
|
info.map(v => {
|
var time = v.time.split('-').json('')
|
v.name = `走航车监测日报${time}`
|
})
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 下载走航车日报
|
carExport() {
|
const url1 = `http://47.99.64.149:8081//static/img/7f633687-8321-4f89-bffc-9a52f94cfb77.jpg`
|
const url2 = `http://47.99.64.149:8081//static/img/178d92d1-4729-4019-9b60-776a8c8653ac.jpg`
|
// console.log(url, 'url')
|
this.sailingReport.fileLists[0].push({ url: url1 })
|
this.sailingReport.fileLists[0].push({ url: url1 })
|
this.sailingReport.fileLists[1].push({ url: url2 })
|
this.sailingReport.fileLists[1].push({ url: url2 })
|
this.sailingReport.fileLists[2].push({ url: url2 })
|
this.sailingReport.city = '高新区'
|
// console.log(this.sailingReport.fileLists, 'this.sailingReport.fileLists')
|
this.sailingReport.fileList.push({ url: url1 })
|
this.sailingReport.fileList.push({ url: url2 })
|
exportDocx('/sailingReport.docx', this.sailingReport, `走航车日报.docx`)
|
},
|
// 上传图片
|
submitImgs() {
|
// 弹框隐藏
|
this.openBox = false
|
this.numList = [this.fileLists[0].length, this.fileLists[1].length, this.fileLists[2].length, this.fileLists[3].length, this.fileLists[4].length, this.fileLists[5].length, this.fileLists[6].length, this.fileLists[7].length, this.fileLists[8].length]
|
console.log(this.numList, 'this.numList')
|
this.upTime = this.newTime(this.value2, 'submit')
|
const formData = new FormData()
|
formData.append(`code`, this.cityOptions)
|
formData.append(`time`, this.upTime)
|
formData.append(`mac`, this.carInput2)
|
this.fileLists.map(v => {
|
v.map(item => {
|
formData.append(`files`, item.raw)
|
})
|
})
|
// this.MultipartFile(formData).then(res => {
|
// console.log(res)
|
// if (res.code === 0) {
|
// this.$message({
|
// message: '提交成功！',
|
// type: 'success'
|
// })
|
// var reportInfo = res.data
|
// this.value1 = [this.value2, this.value2]
|
// reportInfo.name = '高新区走航监测报告' + reportInfo.time.split('-').join('')
|
// this.tableData = [reportInfo]
|
// } else {
|
// this.$message.error('提交失败！')
|
// }
|
// }).catch(err => {
|
// console.log(err)
|
// })
|
},
|
// 提交文件后台接口
|
MultipartFile(data) {
|
return this.$request({
|
url: '',
|
method: 'post',
|
headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上传这一句必须加
|
data
|
})
|
},
|
// 下载报告
|
expReport(obj) {
|
this.$request({
|
url: '',
|
method: 'get',
|
params: {
|
id: obj.id
|
}
|
}).then(res => {
|
console.log(res)
|
}).catch(err => {
|
console.log(err)
|
})
|
exportDocx('/sailingReport.docx', this.sailingReport, `高新区走航监测报告.docx`)
|
},
|
// 时间处理函数（日期带0）
|
newTime(timeArr, name) {
|
if (name === 'submit') {
|
var date = new Date(timeArr)
|
var y = date.getFullYear()
|
var m = date.getMonth() + 1
|
m = m < 10 ? '0' + m : m
|
var d = date.getDate()
|
d = d < 10 ? '0' + d : d
|
return y + '-' + m + '-' + d
|
} else {
|
var arr = []
|
timeArr.map(v => {
|
var date = new Date(v)
|
var y = date.getFullYear()
|
var m = date.getMonth() + 1
|
m = m < 10 ? '0' + m : m
|
var d = date.getDate()
|
d = d < 10 ? '0' + d : d
|
var h = date.getHours()
|
h = h < 10 ? '0' + h : h
|
var minute = date.getMinutes()
|
minute = minute < 10 ? '0' + minute : minute
|
var s = date.getSeconds()
|
s = s < 10 ? '0' + s : s
|
arr.push(y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s)
|
// arr.push(y + '-' + m + '-' + d)
|
})
|
return arr
|
}
|
},
|
// 上传文件到upload
|
handleChange1(file, fileList) {
|
console.log(file, fileList)
|
this.fileList1 = fileList
|
this.fileLists[0] = fileList
|
},
|
handleRemove1(file, fileList) {
|
console.log(file, fileList)
|
this.fileList1 = fileList
|
this.fileLists[0] = fileList
|
},
|
handleChange2(file, fileList) {
|
console.log(file, fileList)
|
this.fileList2 = fileList
|
this.fileLists[1] = fileList
|
},
|
handleRemove2(file, fileList) {
|
console.log(file, fileList)
|
this.fileList2 = fileList
|
this.fileLists[1] = fileList
|
},
|
handleChange3(file, fileList) {
|
console.log(file, fileList)
|
this.fileList3 = fileList
|
this.fileLists[2] = fileList
|
},
|
handleRemove3(file, fileList) {
|
console.log(file, fileList)
|
this.fileList3 = fileList
|
this.fileLists[2] = fileList
|
},
|
handleChange4(file, fileList) {
|
console.log(file, fileList)
|
this.fileList4 = fileList
|
this.fileLists[3] = fileList
|
},
|
handleRemove4(file, fileList) {
|
console.log(file, fileList)
|
this.fileList4 = fileList
|
this.fileLists[3] = fileList
|
},
|
handleChange5(file, fileList) {
|
console.log(file, fileList)
|
this.fileList5 = fileList
|
this.fileLists[4] = fileList
|
},
|
handleRemove5(file, fileList) {
|
console.log(file, fileList)
|
this.fileList5 = fileList
|
this.fileLists[4] = fileList
|
},
|
handleChange6(file, fileList) {
|
console.log(file, fileList)
|
this.fileList6 = fileList
|
this.fileLists[5] = fileList
|
},
|
handleRemove6(file, fileList) {
|
console.log(file, fileList)
|
this.fileList6 = fileList
|
this.fileLists[5] = fileList
|
},
|
handleChange7(file, fileList) {
|
console.log(file, fileList)
|
this.fileList7 = fileList
|
this.fileLists[6] = fileList
|
},
|
handleRemove7(file, fileList) {
|
console.log(file, fileList)
|
this.fileList7 = fileList
|
this.fileLists[6] = fileList
|
},
|
handleChange8(file, fileList) {
|
console.log(file, fileList)
|
this.fileList8 = fileList
|
this.fileLists[7] = fileList
|
},
|
handleRemove8(file, fileList) {
|
console.log(file, fileList)
|
this.fileList8 = fileList
|
this.fileLists[7] = fileList
|
},
|
handleChange9(file, fileList) {
|
console.log(file, fileList)
|
this.fileList9 = fileList
|
this.fileLists[8] = fileList
|
},
|
handleRemove9(file, fileList) {
|
console.log(file, fileList)
|
this.fileList9 = fileList
|
this.fileLists[8] = fileList
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.dailyreport{
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
}
|
.dailyreport::-webkit-scrollbar{
|
width: 0;
|
}
|
.dailyTop{
|
width: 80%;
|
margin:auto;
|
padding: 1%;
|
margin-bottom: 3%;
|
}
|
.dailyDown{
|
width: 100%;
|
height: 74%;
|
overflow: auto;
|
display: flex;
|
/*background-color: salmon;*/
|
justify-content: center;
|
}
|
.boxCard{
|
width: 80%;
|
height: 96%;
|
overflow: auto;
|
}
|
.upload-demo{
|
/*width: 20rem;*/
|
/*height: 16rem;*/
|
width: 260px;
|
height: 155px;
|
/*float: left;*/
|
/*margin: 1% 2%;*/
|
/*overflow: auto;*/
|
}
|
.upload-demo p{
|
padding: 0.15rem 0;
|
margin: 0;
|
}
|
.dailyTop>div{
|
margin-right: 1%;
|
}
|
/*/deep/ .el-upload{*/
|
/* width: 100%;*/
|
/*}*/
|
/*/deep/ .el-upload-dragger{*/
|
/* width: 100%;*/
|
/* height: 140px;*/
|
/*}*/
|
/deep/ .el-upload-list{
|
height: 94px;
|
overflow: auto;
|
}
|
/deep/ .el-upload-list::-webkit-scrollbar{
|
width: 4px;
|
background-color: #FFFFFF;
|
}
|
/*定义滑块 样式*/
|
|
/deep/ .el-upload-list::-webkit-scrollbar-thumb {
|
border-radius: 3px;
|
background-color: #ccc;
|
}
|
.el-upload-dragger .el-icon-upload{
|
font-size: 50px;
|
margin: 10px 0;
|
line-height: 1;
|
}
|
.btnPosition{
|
position: absolute;
|
right: 12px;
|
bottom: 5px;
|
}
|
.btnPosition{
|
padding: 8px 16px;
|
}
|
.divPosition{
|
position: relative;
|
margin: 1%;
|
padding: 1%;
|
float: left;
|
border: 1px solid #dfdfdf;
|
}
|
.dailyBox{
|
width: 90%;
|
height: 100%;
|
margin: auto;
|
}
|
/deep/ .el-dialog{
|
width: 60%;
|
height: 80%;
|
overflow: auto;
|
}
|
.el-upload__tip{
|
color: red;
|
}
|
/deep/ .el-dialog__footer{
|
padding: 10px 40px 20px;
|
}
|
/deep/ .el-dialog__body{
|
padding-top: 0px;
|
}
|
.openTop{
|
padding-bottom: 15px;
|
}
|
.openTop>div{
|
margin-right: 15px;
|
}
|
</style>
|
