<template>
|
<div style="padding: 1.5rem" class="zong">
|
<div style="display: flex">
|
<div>
|
<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>
|
</div>
|
<div>
|
<el-select v-model="equipChoose1" placeholder="请选择设备">
|
<el-option
|
v-for="item in equipOptions1"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div>
|
<el-select
|
v-model="carInput"
|
clearable
|
placeholder="请选择走航车"
|
style="width: 180px; display: inline-block"
|
>
|
<el-option
|
v-for="(item, index) in carMac"
|
:key="index"
|
:label="item.name"
|
:value="item.mac"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="block">
|
<el-date-picker
|
v-model="value1"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:picker-options="pickerOptions"
|
value-format="yyyy-MM-dd"
|
>
|
</el-date-picker>
|
</div>
|
<div>
|
<el-button type="primary" @click="selectReport">查询</el-button>
|
</div>
|
<div>
|
<!-- <el-button type="primary" @click="exportword">导出word</el-button> -->
|
</div>
|
</div>
|
<el-dialog title="路段超标值" :visible.sync="dialogVisible" width="60%">
|
<div style="margin-top: 1rem">
|
<el-table
|
:data="
|
tableData1.slice((this.PageNum - 1) * PageSize, PageNum * PageSize)
|
"
|
style="width: 100%"
|
>
|
<el-table-column type="index" width="180" label="序号">
|
</el-table-column>
|
<el-table-column label="道路" prop="road"> </el-table-column>
|
<el-table-column label="平均尘负荷(克/平方米)" prop="value">
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="PageNum"
|
:page-size="PageSize"
|
layout="total, prev, pager, next, jumper"
|
:total="total"
|
>
|
</el-pagination>
|
<el-upload
|
class="upload-demo"
|
ref="upload"
|
action=""
|
:on-change="handleChange"
|
:on-remove="handleRemove"
|
:file-list="fileList"
|
:auto-upload="false"
|
:limit="10"
|
style="margin-top: 1rem"
|
>
|
<el-button slot="trigger" size="small" type="primary"
|
>选取文件</el-button
|
>
|
<div slot="tip" class="el-upload__tip" style="color: red">
|
上传路段图片（可选可不选,图片大小低于1MB）
|
</div>
|
</el-upload>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" :disabled="isDisplay" @click="baoC"
|
>下载</el-button
|
>
|
</div>
|
</el-dialog>
|
<el-table
|
:data="tableData"
|
style="width: 100%; overflow-y: auto; height: 82%"
|
>
|
<el-table-column prop="time" 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>
|
</div>
|
</template>
|
|
<script>
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
import { ExportBriefDataDocx } from '@/utils/exportBriefDataDocx'
|
import { exportWord, getBase64Sync } from '@/utils/Section'
|
import { exportDocx } from '@/utils/exportImageFile'
|
import { exportLUImage } from '@/utils/exportLUImage'
|
import requestObj from '@/utils/request'
|
|
export default {
|
//import 引入的组件需要注入到对象中才能使用
|
components: {},
|
props: {},
|
data() {
|
//这里存放数据
|
return {
|
date: this.dateTypeFormat('YYYY-mm-dd', new Date()),
|
time: '',
|
id: '',
|
cityChoose: 'gx', // 默认查询高新区走行车
|
equipChoose1: 'car',
|
equipOptions1: [
|
{
|
value: 'car',
|
label: '走航车',
|
},
|
],
|
cityOptions: [
|
{
|
value: 'gx',
|
label: '高新区',
|
},
|
],
|
carInput: '', // 查询时走航车唯一标识
|
carMac: [], // 走航车mac数组
|
areaInput3: '', // 站点名称
|
tableData: [],
|
tableData1: [],
|
isDisplay: false,
|
fileList: [],
|
dialogVisible: false,
|
value: '',
|
valueDate: {
|
fileLists: [[], []],
|
index: 0,
|
num: 0,
|
date: '',
|
time: '',
|
list1: [],
|
list2: [],
|
},
|
PageSize: 5,
|
PageNum: 1,
|
total: 0,
|
value1: [new Date(), new Date()],
|
pickerOptions: {
|
onPick: ({ maxDate, minDate }) => {
|
// 最大时间 最小时间
|
this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期
|
// // 如何你选择了两个日期了，就把那个变量置空
|
if (maxDate) this.timeOne = ''
|
},
|
disabledDate: (time) => {
|
if (this.timeOne) {
|
const WEEK = 7 * 24 * 3600 * 1000 - 1 // 这里乘以6相当于 限制7天以内
|
const minTime = this.timeOne // 七天之前
|
const maxTime = this.timeOne + WEEK // 七天之后
|
return (
|
time.getTime() < minTime ||
|
time.getTime() > maxTime ||
|
time.getTime() > new Date()
|
)
|
} else {
|
return time.getTime() > new Date()
|
}
|
},
|
},
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {},
|
// 监控data中的数据变化
|
watch: {
|
value1(n, o) {
|
if (n === null) {
|
this.value1 = []
|
}
|
},
|
},
|
//方法集合
|
methods: {
|
baoC() {
|
this.valueDate.fileLists=[]
|
// const baseUrl = `${requestObj.baseUrl}/static/img/`
|
// var images = [
|
// ['7f633687-8321-4f89-bffc-9a52f94cfb77.jpg'],
|
// [
|
// '7f633687-8321-4f89-bffc-9a52f94cfb77.jpg',
|
// '7f633687-8321-4f89-bffc-9a52f94cfb77.jpg',
|
// ],
|
// ]
|
// var info = 0
|
// var num = 0
|
// for (let i = 0; i < images.length; i++) {
|
// if (!this.valueDate.fileLists[i]) this.valueDate.fileLists[i] = []
|
// if (images[i].length) {
|
// num++
|
// info += images[i].length
|
// for (let j = 0; j < images[i].length; j++) {
|
// this.valueDate.fileLists[i].push(baseUrl + images[i][j])
|
// }
|
// }
|
// }
|
// this.valueDate.index = info
|
// this.valueDate.num = num
|
// this.valueDate.date = this.date
|
// this.valueDate.time = '11月7日19时-22时'
|
// // console.log(this.valueDate, 'this.valueDate')
|
// exportLUImage('/Section.docx', this.valueDate, `模拟走航车报告.docx`)
|
// var imagesObj = res.data.images
|
// this.valueDate = { ...this.valueDate, ...res.data.code }
|
// if (imagesObj) {files
|
// for (let i = 0; i < imagesObj.length; i++) {
|
// this.valueDate.fileLists[i] = [{ url: baseUrl + imagesObj[i] }]
|
// }
|
// }
|
console.log(this.fileList, '123')
|
const formData = new FormData()
|
formData.append(`id`, this.id)
|
this.fileList.map((v) => {
|
formData.append(`files`, v.raw)
|
console.log(v.raw)
|
})
|
|
this.$request({
|
url: 'cruiser/dailyDustld',
|
method: 'post',
|
headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上传这一句必须加
|
data: formData,
|
}).then((res) => {
|
console.log(res)
|
// this.valueDate=res.data
|
const baseUrl = `${requestObj.baseUrl}/static/img/`
|
if (res.data.images.file2 === ''&&res.data.images.file1 === '') {
|
res.data.images.file1=[]
|
res.data.images.file2=[]
|
var images = [res.data.images.file1, res.data.images.file2]
|
} else if (res.data.images.file2 === '') {
|
res.data.images.file2=[]
|
var images = [[res.data.images.file1], res.data.images.file2]
|
} else if (res.data.images.file1 === '') {
|
res.data.images.file1=[]
|
var images = [res.data.images.file1, res.data.images.file2.split(',')]
|
} else {
|
var images = [
|
[res.data.images.file1],
|
res.data.images.file2.split(','),
|
]
|
}
|
var info = 0
|
var num = 0
|
for (let i = 0; i < images.length; i++) {
|
// console.log(images)
|
if (!this.valueDate.fileLists[i]) this.valueDate.fileLists[i] = []
|
if (images[i].length) {
|
num++
|
info += images[i].length
|
for (let j = 0; j < images[i].length; j++) {
|
this.valueDate.fileLists[i].push(baseUrl + images[i][j])
|
console.log(baseUrl + images[i][j])
|
}
|
}
|
}
|
// images=[]
|
console.log(this.valueDate.fileLists,'images');
|
res.data.list1.map((item, index) => {
|
item.index = index + 1
|
})
|
res.data.list2.map((item, index) => {
|
item.index = index + 1
|
})
|
this.valueDate.index = info
|
this.valueDate.num = num
|
this.valueDate.date = this.date
|
this.valueDate.list1 = res.data.list1
|
this.valueDate.list2 = res.data.list2
|
this.valueDate.time = res.data.time
|
exportLUImage('/Section.docx', this.valueDate, `尘负荷走航车报告.docx`)
|
|
})
|
},
|
handleRemove(file, fileList) {
|
console.log(file, fileList)
|
},
|
handleChange(file, fileList) {
|
// console.log(file);
|
this.file = file
|
this.fileList = fileList
|
console.log(this.fileList)
|
},
|
handleSizeChange(size) {
|
this.PageNum = 1
|
this.PageSize = size
|
},
|
handleCurrentChange(num) {
|
this.PageNum = num
|
},
|
openPic() {
|
this.dialogVisible = true
|
},
|
|
selectReport() {
|
if (this.carInput == '') {
|
this.$message('请选择走航车')
|
return false
|
}
|
this.$request({
|
url: 'cruiser/selectAll',
|
method: 'get',
|
params: {
|
startTime: this.value1[0],
|
endTime: this.value1[1],
|
mac: this.carInput,
|
cityChoose: this.cityChoose,
|
},
|
})
|
.then((res) => {
|
// console.log(res)
|
this.tableData = res
|
var info = res.data
|
// console.log(info.length);
|
if (info === null) {
|
this.$message('暂无数据,查看时间和走航车是否选择正确')
|
this.tableData = info
|
return false
|
}
|
info.map((v) => {
|
console.log(v)
|
var time = v.time.substring(0, 10)
|
v.time = `道路积尘负荷走航监测报告${time}`
|
})
|
this.tableData = info
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
|
expReport(obj) {
|
console.log(obj)
|
this.dialogVisible = true
|
this.id = obj.id
|
this.$request({
|
url: 'cruiser/selectDust',
|
method: 'get',
|
params: {
|
id: obj.id,
|
},
|
}).then((res) => {
|
// console.log(res)
|
this.tableData1 = res.data.list
|
this.total = res.data.count
|
// console.log(this.pagesize)
|
})
|
},
|
getBase64(file) {
|
return new Promise(function (resolve, reject) {
|
var reader = new FileReader()
|
let imgResult = ''
|
reader.readAsDataURL(file)
|
reader.onload = function () {
|
imgResult = reader.result
|
}
|
reader.onerror = function (error) {
|
reject(error)
|
}
|
reader.onloadend = function () {
|
resolve(imgResult)
|
}
|
})
|
},
|
},
|
//生命周期 - 创建完成（可以访问当前 this 实例）
|
created() {
|
this.$request({
|
url: 'cruiser/selectCruisers',
|
method: 'get',
|
})
|
.then((res) => {
|
this.carMac = res.data
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
//生命周期 - 挂载完成（可以访问 DOM 元素）
|
mounted() {},
|
beforeCreate() {}, //生命周期 - 创建之前
|
beforeMount() {}, //生命周期 - 挂载之前
|
beforeUpdate() {}, //生命周期 - 更新之前
|
updated() {}, //生命周期 - 更新之后
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
destroyed() {}, //生命周期 - 销毁完成
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped>
|
.zong div {
|
margin-left: 1rem;
|
}
|
.el-upload__tip {
|
color: red;
|
display: flex;
|
}
|
/deep/.el-upload-list {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
}
|
/deep/.el-upload-list__item {
|
width: 30%;
|
}
|
</style>
|
