<template>
|
<div class="analyseAir">
|
<!-- 头部-->
|
<div class="exTop">
|
<div class="cascader-demo">
|
<el-select v-model="value" clearable placeholder="请选择地区">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<el-date-picker
|
v-if="value==='gx'"
|
v-model="value3"
|
style="margin-right: 5%"
|
align="right"
|
type="date"
|
placeholder="选择日期">
|
</el-date-picker>
|
<el-upload
|
v-if="value==='gx'"
|
class="upload-demo"
|
ref="upload1"
|
action=""
|
accept="xlsx"
|
:on-change="handleChange"
|
:on-remove="handleRemove"
|
:file-list="fileList"
|
:limit="1"
|
:on-exceed="handleExceed"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取文件</el-button>
|
<div slot="tip" class="el-upload__tip">上传四国控及市区均值</div>
|
</el-upload>
|
<el-upload
|
v-if="value==='gx'"
|
class="upload-demo"
|
ref="upload2"
|
action=""
|
accept="xlsx"
|
:on-change="handleChange2"
|
:on-remove="handleRemove2"
|
:file-list="fileList2"
|
:limit="1"
|
:on-exceed="handleExceed"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取文件</el-button>
|
<div slot="tip" class="el-upload__tip">上传乡镇街道日数据</div>
|
</el-upload>
|
<el-upload
|
v-if="value==='gx'"
|
class="upload-demo"
|
ref="upload3"
|
action=""
|
accept="xlsx"
|
:on-change="handleChange3"
|
:on-remove="handleRemove3"
|
:file-list="fileList3"
|
:limit="1"
|
:on-exceed="handleExceed"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取文件</el-button>
|
<div slot="tip" class="el-upload__tip">上传乡镇街道月累计</div>
|
</el-upload>
|
<el-upload
|
v-if="value==='gx'"
|
class="upload-demo"
|
ref="upload4"
|
action=""
|
accept="xlsx"
|
:on-change="handleChange4"
|
:on-remove="handleRemove4"
|
:file-list="fileList4"
|
:limit="1"
|
:on-exceed="handleExceed"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取文件</el-button>
|
<div slot="tip" class="el-upload__tip">上传乡镇街道改善数据</div>
|
</el-upload>
|
<el-upload
|
v-if="value==='gx'"
|
class="upload-demo"
|
ref="upload5"
|
action=""
|
accept="xlsx"
|
:on-change="handleChange5"
|
:on-remove="handleRemove5"
|
:file-list="fileList5"
|
:limit="1"
|
:on-exceed="handleExceed"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取文件</el-button>
|
<div slot="tip" class="el-upload__tip">上传国控改善数据</div>
|
</el-upload>
|
<el-upload
|
v-if="value==='gx'"
|
class="upload-demo"
|
ref="upload6"
|
action=""
|
accept="xlsx"
|
:on-change="handleChange6"
|
:on-remove="handleRemove6"
|
:file-list="fileList6"
|
:limit="1"
|
:on-exceed="handleExceed"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取文件</el-button>
|
<div slot="tip" class="el-upload__tip">上传餐饮油烟超标数据</div>
|
</el-upload>
|
<!-- <el-upload
|
v-if="value==='gx'"
|
class="upload-demo"
|
ref="upload7"
|
action=""
|
accept="xlsx"
|
:on-change="handleChange7"
|
:on-remove="handleRemove7"
|
:file-list="fileList7"
|
:limit="1"
|
:on-exceed="handleExceed"
|
multiple
|
:auto-upload="false">
|
<el-button slot="trigger" type="primary" size="small">选取文件</el-button>
|
<div slot="tip" class="el-upload__tip">上传数据</div>
|
</el-upload>
|
<el-upload
|
v-if="value==='gx'"
|
class="upload-demo"
|
ref="upload8"
|
action=""
|
accept="xlsx"
|
:on-change="handleChange8"
|
:on-remove="handleRemove8"
|
:file-list="fileList8"
|
:limit="1"
|
:on-exceed="handleExceed"
|
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 style="position: absolute; bottom: 2%; right: 20%" v-if="value==='gx'">
|
<el-button type="success" @click="submitUpload" size="small">提交文件</el-button>
|
<!-- <el-button type="primary" @click="exportReport" size="small">下载报告</el-button>-->
|
</div>
|
</div>
|
<div class="exDown" v-if="value==='gx'">
|
<el-card class="box-card" style="position: relative">
|
<div class="block" style="margin-bottom: 30px;">
|
<el-date-picker
|
v-model="value2"
|
type="daterange"
|
align="right"
|
unlink-panels
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:picker-options="pickerOptions">
|
</el-date-picker>
|
<el-select v-model="valueSelect" clearable placeholder="请选择地区">
|
<el-option
|
v-for="item in optionsSelect"
|
:key="item.valueSelect"
|
:label="item.label"
|
:value="item.valueSelect">
|
</el-option>
|
</el-select>
|
<el-button type="primary" @click="selectReport" size="small" class="selectBtn">查询</el-button>
|
<!-- <el-button type="primary" @click="selectReport" size="small" class="selectBtn">下载多个</el-button>-->
|
</div>
|
<el-table
|
:data="tableData"
|
style="width: 100%">
|
<!-- <el-table-column
|
width="100"
|
align="center">
|
<template slot="header">
|
<el-checkbox
|
:indeterminate="isIndeterminate"
|
v-model="checkAll"
|
@change="handleCheckAllChange">全选</el-checkbox>
|
</template>
|
<template slot-scope="scope">
|
<el-checkbox
|
v-model="scope.row.checked"
|
@change="handleCheckOneChange(scope.row)"></el-checkbox>
|
</template>
|
</el-table-column>-->
|
<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-pagination
|
class="paginationDemo"
|
background
|
layout="prev, pager, next"
|
:total="100">
|
</el-pagination>-->
|
</el-card>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { ExportBriefDataDocx } from '@/utils/exportBriefDataDocx'
|
export default {
|
data() {
|
return {
|
fileList: [],
|
fileList2: [],
|
fileList3: [],
|
fileList4: [],
|
fileList5: [],
|
fileList6: [],
|
fileList7: [],
|
fileList8: [],
|
file1: null,
|
file2: null,
|
file3: null,
|
file4: null,
|
file5: null,
|
file6: null,
|
file7: null,
|
file8: null,
|
pickerOptions: {
|
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])
|
}
|
}]
|
},
|
value2: [new Date(), new Date()], // 查询报告日期时间
|
value3: new Date(), // 提交文件的时间日期
|
options: [
|
{
|
value: 'sy',
|
label: '沈阳'
|
}, {
|
value: 'gx',
|
label: '高新区'
|
}
|
],
|
value: 'gx', // 地区
|
valueSelect: 'gx',
|
optionsSelect: [
|
{
|
valueSelect: 'sy',
|
label: '沈阳'
|
}, {
|
valueSelect: 'gx',
|
label: '高新区'
|
}
|
],
|
tableData: [],
|
sensorTime: [], // 提交文件的日期
|
sensorTime2: [], // 查看报告的日期
|
formData2: [],
|
isInfo: false,
|
checkAll: false,
|
isIndeterminate: true,
|
dateArr: [], // 存储多选的日期
|
airData: {},
|
reportInfo: {}
|
}
|
},
|
methods: {
|
handleChange(file, fileList) {
|
if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
|
this.$refs.upload.handleRemove(file)
|
this.$message.warning(`上传文件格式不符合`)
|
return
|
}
|
this.fileList = fileList
|
this.file1 = fileList[0]
|
},
|
handleRemove(file, fileList) {
|
this.fileList = fileList
|
this.file1 = fileList[0]
|
},
|
handleChange2(file, fileList) {
|
if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
|
this.$refs.upload2.handleRemove(file)
|
this.$message.warning(`上传文件格式不符合`)
|
return
|
}
|
this.fileList2 = fileList
|
this.file2 = fileList[0]
|
},
|
handleRemove2(file, fileList) {
|
this.fileList2 = fileList
|
this.file2 = fileList[0]
|
},
|
handleChange3(file, fileList) {
|
if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
|
this.$refs.upload3.handleRemove(file)
|
this.$message.warning(`上传文件格式不符合`)
|
return
|
}
|
this.fileList3 = fileList
|
this.file3 = fileList[0]
|
},
|
handleRemove3(file, fileList) {
|
this.fileList3 = fileList
|
this.file3 = fileList[0]
|
},
|
handleChange4(file, fileList) {
|
if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
|
this.$refs.upload4.handleRemove(file)
|
this.$message.warning(`上传文件格式不符合`)
|
return
|
}
|
this.fileList4 = fileList
|
this.file4 = fileList[0]
|
},
|
handleRemove4(file, fileList) {
|
this.fileList4 = fileList
|
this.file4 = fileList[0]
|
},
|
handleChange5(file, fileList) {
|
if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
|
this.$refs.upload5.handleRemove(file)
|
this.$message.warning(`上传文件格式不符合`)
|
return
|
}
|
this.fileList5 = fileList
|
this.file5 = fileList[0]
|
},
|
handleRemove5(file, fileList) {
|
this.fileList5 = fileList
|
this.file5 = fileList[0]
|
},
|
handleChange6(file, fileList) {
|
if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' && file.raw.type !== 'application/vnd.ms-excel') {
|
this.$refs.upload6.handleRemove(file)
|
this.$message.warning(`上传文件格式不符合`)
|
return
|
}
|
this.fileList6 = fileList
|
this.file6 = fileList[0]
|
},
|
handleRemove6(file, fileList) {
|
this.fileList6 = fileList
|
this.file6 = fileList[0]
|
},
|
/* handleChange7(file, fileList) {
|
if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
|
this.$refs.upload7.handleRemove(file)
|
this.$message.warning(`上传文件格式不符合`)
|
return
|
}
|
this.fileList7 = fileList
|
this.file7 = fileList[0]
|
},
|
handleRemove7(file, fileList) {
|
this.fileList7 = fileList
|
this.file7 = fileList[0]
|
},
|
handleChange8(file, fileList) {
|
if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
|
this.$refs.upload8.handleRemove(file)
|
this.$message.warning(`上传文件格式不符合`)
|
return
|
}
|
this.fileList8 = fileList
|
this.file8 = fileList[0]
|
},
|
handleRemove8(file, fileList) {
|
this.fileList8 = fileList
|
this.file8 = fileList[0]
|
},*/
|
handleExceed(files, fileList) {
|
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
|
},
|
submitUpload() {
|
this.formData2 = []
|
|
if (!this.value3) {
|
this.$message({
|
message: '请选择时间',
|
type: 'warning'
|
})
|
return
|
}
|
if (this.file1 && this.file2 && this.file3 && this.file4 && this.file5 && this.file6) {
|
const formData = new FormData()
|
formData.append(`code`, this.value)
|
this.sensorTime = this.newTime(this.value3, 'submit')
|
var date = new Date()
|
date = this.newTime(date, 'submit')
|
formData.append(`time`, this.sensorTime)
|
formData.append(`date`, date)
|
formData.append(`files`, this.file1.raw)
|
formData.append(`files`, this.file2.raw)
|
formData.append(`files`, this.file3.raw)
|
formData.append(`files`, this.file4.raw)
|
formData.append(`files`, this.file5.raw)
|
formData.append(`files`, this.file6.raw)
|
// formData.append(`file7`, this.file7.raw)
|
// formData.append(`file8`, this.file8.raw)
|
// 后端上传接口
|
this.MultipartFile(formData).then(res => {
|
if (res.code === 0) {
|
var reportInfo = res.data
|
this.value2 = [this.value3, this.value3]
|
reportInfo.name = '高新区空气质量分析报告' + reportInfo.time.split('-').join('')
|
this.tableData = [reportInfo]
|
}
|
}).catch(err => {
|
console.log(err)
|
})
|
} else {
|
this.$message({
|
message: '提交文件数量不符合',
|
type: 'warning'
|
})
|
}
|
},
|
// 后端上传接口
|
MultipartFile(data) {
|
return this.$request({
|
url: '/excel/excelImport',
|
method: 'post',
|
headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上传这一句必须加
|
data
|
})
|
},
|
// 时间处理函数
|
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
|
}
|
},
|
// 全选
|
handleCheckAllChange(val) {
|
// console.info('check all change is ', val)
|
this.isIndeterminate = false
|
this.tableData.forEach(item => {
|
item.checked = val
|
this.dateArr.push(item.date)
|
})
|
if (val === false) {
|
this.dateArr = []
|
} else {
|
// console.log(this.dateArr, '全选')
|
this.dateArr = Array.from(new Set(this.dateArr))
|
}
|
},
|
// 选择
|
handleCheckOneChange(obj) {
|
// console.info('check one change is ', obj)
|
if (obj.checked === false) {
|
this.dateArr = this.dateArr.filter(v => {
|
return v !== obj.date
|
})
|
} else {
|
this.dateArr.push(obj.date)
|
}
|
var totalCount = this.tableData.length
|
let someStatusCount = 0
|
this.tableData.forEach(item => {
|
if (item.checked === obj.checked) {
|
someStatusCount++
|
}
|
})
|
this.count = someStatusCount
|
this.checkAll = totalCount === someStatusCount ? obj.checked : !obj.checked
|
this.isIndeterminate = someStatusCount > 0 && someStatusCount < totalCount
|
},
|
// 下载
|
expReport(obj) {
|
this.$request({
|
url: '/excel/excelExport',
|
method: 'get',
|
params: {
|
id: obj.id
|
}
|
}).then(res => {
|
var getData = {}
|
getData = res.data
|
// 苏州市区放最后
|
getData.list1 = this.cityLast(getData.list1)
|
getData.list5 = this.cityLast(getData.list5)
|
// 高新区放最前边
|
getData.list2 = this.cityFirst(getData.list2)
|
getData.list3 = this.cityFirst(getData.list3)
|
getData.list4 = this.cityFirst(getData.list4)
|
this.airData = getData
|
this.airData.month = res.data.time.split('月')[0]
|
this.airData.day = res.data.time.split('月')[1].split('日')[0]
|
var arr = obj.time.split('-')
|
this.airData.currentTime = arr[0] + '年' + arr[1] + '月' + arr[2] + '日'
|
ExportBriefDataDocx('/airQuality.docx', this.airData, `${obj.name}.docx`)
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 苏州市区放最后
|
cityLast(list) {
|
var obj = {}
|
list.map((v, i) => {
|
if (v.place === '苏州市区') {
|
obj = v
|
list.splice(i, 1)
|
}
|
})
|
list.push(obj)
|
return list
|
},
|
// 高新区放最前边
|
cityFirst(list) {
|
var obj = {}
|
list.map((v, i) => {
|
if (v.place === '高新区') {
|
obj = v
|
list.splice(i, 1)
|
}
|
})
|
list.unshift(obj)
|
return list
|
},
|
// 导出报告
|
exportReport() {
|
// ExportBriefDataDocx('/airQuality.docx', this.airData, `空气质量报告.docx`)
|
this.$request({
|
url: '/excel/excelExport',
|
method: 'get',
|
params: {
|
id: 23
|
}
|
}).then(res => {
|
console.log(res)
|
this.airData = res.data
|
this.airData.month = res.data.time.split('月')[0]
|
this.airData.day = res.data.time.split('月')[1].split('日')[0]
|
ExportBriefDataDocx('/airQuality.docx', this.airData, `空气质量报告.docx`)
|
}).catch(err => {
|
console.log(err)
|
})
|
|
// if (this.isInfo) {
|
// // ExportBriefDataDocx('/airQ.docx', this.airData, `空气质量报告.docx`)
|
// } else {
|
// this.$message({
|
// message: '请先提交文件',
|
// type: 'warning'
|
// })
|
// }
|
},
|
// 查询报告
|
selectReport() {
|
this.sensorTime2 = this.newTime(this.value2, 'select')
|
this.$request({
|
url: '/excel/selectExcel',
|
method: 'get',
|
params: {
|
startTime: this.sensorTime2[0],
|
endTime: this.sensorTime2[1],
|
code: this.valueSelect
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
var info = res.data
|
info.map(v => {
|
v.name = '高新区空气质量分析报告' + v.time.split('-').join('')
|
})
|
info.sort((a, b) => { return b.time.split('-').join('') - a.time.split('-').join('') })
|
this.tableData = info
|
}
|
}).catch(err => {
|
console.log(err)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.analyseAir{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
padding-top: 22px;
|
}
|
.exTop{
|
width: 30%;
|
height: 95%;
|
position: relative;
|
}
|
.cascader-demo{
|
float: left;
|
padding: 0% 2%;
|
}
|
.upload-demo{
|
margin-left: 2%;
|
/*float: left;*/
|
margin-top: 4%;
|
height: 65px;
|
}
|
.upload-demo /deep/ .el-upload-list__item{
|
font-size: 15px;
|
}
|
.upload-demo /deep/ .el-upload-list__item:first-child{
|
margin-top: 2px;
|
}
|
.exDown {
|
width: 50%;
|
height: 95%;
|
margin-left: 2%;
|
font-size: 18px;
|
}
|
.exDown /deep/ .el-card{
|
width: 100%;
|
height: 100%;
|
}
|
.divPadding{
|
width: 80%;
|
margin: auto;
|
}
|
.textCenter{
|
text-align: center;
|
}
|
.fontS14{
|
font-size: 14px;
|
}
|
.upload-demo button{
|
margin-right: 10%;
|
}
|
.upload-demo /deep/ .el-upload{
|
margin-right: 10%;
|
}
|
.selectBtn{
|
margin-left: 5%;
|
}
|
.el-card /deep/ .el-card__body{
|
height: 815px;
|
}
|
.paginationDemo{
|
position: absolute;
|
left: 0;
|
bottom: 3%;
|
}
|
.el-upload__tip{
|
color: red;
|
}
|
</style>
|
