<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-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>
|
<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-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>
|
<el-button type="primary" @click="selectExport" style="margin-right: 10px;">查询</el-button>
|
<el-button type="primary" @click="upImgBtn" style="margin-left: 0">上传</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-select v-model="cityChoose2" placeholder="请选择区域">
|
<el-option
|
v-for="item in cityOptions2"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-select v-model="equipChoose2" placeholder="请选择设备">
|
<el-option
|
v-for="item in equipOptions2"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-select v-if="equipChoose2==='car'" v-model="carInput2" 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>
|
<el-select v-else v-model="planSelect2" clearable placeholder="请选择无人机" style="width: 180px;display: inline-block">
|
<el-option
|
v-for="(item, index) in planMac"
|
:key="index"
|
:label="item.name"
|
:value="item.mac">
|
</el-option>
|
</el-select>
|
<el-input v-if="equipChoose2==='car'" v-model="areaInput3" placeholder="请输入走航区域" clearable style="width: 180px;display: inline-block"></el-input>
|
<el-input v-else v-model="planInput2" placeholder="请输入飞行区域" clearable style="width: 180px;display: inline-block"></el-input>
|
<el-button v-if="equipChoose2!=='car'" type="primary" @click="innerVisible = true">飞行监测</el-button>
|
<div class="dateTimeBox">
|
<div>
|
<el-date-picker
|
v-model="value2"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:picker-options="value2Pic"
|
@change="value2Change">
|
</el-date-picker>
|
<el-button style="padding: 6px 8px;" @click="addDate('add')" :disabled="isDidAdd">+</el-button>
|
<el-button style="padding: 6px 10px;" @click="addDate('minus')" :disabled="isDisMinus">-</el-button>
|
</div>
|
<div :style="{display:dateTime2}">
|
<el-date-picker
|
v-model="value3"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:picker-options="value3Pic"
|
@change="value3Change">
|
</el-date-picker>
|
</div>
|
<div :style="{display:dateTime3}">
|
<el-date-picker
|
v-model="value4"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:picker-options="value4Pic"
|
@change="value4Change">
|
</el-date-picker>
|
</div>
|
</div>
|
</div>
|
<div v-if="equipChoose2==='car'" 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"
|
: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
|
class="upload-demo"
|
action=""
|
ref="upload"
|
: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">请上传PM2.5走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
: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">请上传PM10走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
: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">请上传NO2走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
: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">请上传CO走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
: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">请上传SO2走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
: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">请上传O3走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
: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">请上传VOCs走航监测图片</div>
|
</el-upload>
|
<el-upload
|
class="upload-demo"
|
action=""
|
ref="upload"
|
:on-change="handleChange9"
|
:on-remove="handleRemove9"
|
:file-list="fileList9"
|
: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>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="openBox = false">取 消</el-button>
|
<el-button type="primary" @click="submitImgs" :disabled ="isDisplay">保 存</el-button>
|
</div>
|
<el-dialog
|
class="innerDialog"
|
width="60%"
|
title="内层 Dialog"
|
:visible.sync="innerVisible"
|
append-to-body>
|
<Map></Map>
|
</el-dialog>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { exportDocx } from '@/utils/exportImageFile'
|
import requestObj from '@/utils/request'
|
import Map from '@/components/PlanMap/Map'
|
export default {
|
components: { Map },
|
data() {
|
return {
|
cityChoose: 'gx', // 默认查询高新区走行车
|
cityChoose2: 'gx', // 默认上传高新区图片
|
cityOptions: [{
|
value: 'gx',
|
label: '高新区'
|
}],
|
cityOptions2: [{
|
value: 'gx',
|
label: '高新区'
|
}],
|
equipChoose1: 'car',
|
equipChoose2: 'car',
|
equipOptions1: [{
|
value: 'car',
|
label: '走航车'
|
}],
|
equipOptions2: [{
|
value: 'car',
|
label: '走航车'
|
}, {
|
value: 'plan',
|
label: '无人机'
|
}],
|
carInput2: '', // 上传时走航车唯一标识
|
carMac: [], // 走航车mac数组
|
carInput: '', // 查询时走航车唯一标识
|
areaInput3: '', // 站点名称
|
value1: [new Date(), new Date()], // 查询时时间段
|
value2: [new Date(), new Date()], // 上传时间1
|
value3: [], // 上传时间2
|
value4: [], // 上传时间3
|
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)
|
}
|
}]
|
},
|
carMacArr: [{
|
value: 'p5dnd7a0243624',
|
label: '走航车名字'
|
}, {
|
value: 'p5dnd7a0243622',
|
label: '走航车622'
|
}, {
|
value: 'p5dnd7a0243625',
|
label: '走航车625'
|
}],
|
timeOne: '',
|
timeTwo: '',
|
timeThree: '',
|
value2Pic: {
|
onPick: ({ maxDate, minDate }) => {
|
// 最大时间 最小时间
|
this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期
|
// 如何你选择了两个日期了，就把那个变量置空
|
if (maxDate) this.timeOne = ''
|
},
|
disabledDate: time => {
|
if (this.timeOne) {
|
const WEEK = 3 * 24 * 3600 * 1000 - 1 // 这里乘以3再减去1相当于 限制3天以内
|
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()
|
}
|
}
|
},
|
value3Pic: {
|
onPick: ({ maxDate, minDate }) => {
|
// 最大时间 最小时间
|
this.timeTwo = minDate.getTime() // 当选一个日期时 就是最小日期
|
// 如何你选择了两个日期了，就把那个变量置空
|
if (maxDate) this.timeTwo = ''
|
},
|
disabledDate: time => {
|
if (this.timeTwo) {
|
const WEEK = 3 * 24 * 3600 * 1000 - 1 // 这里乘以3再减去1相当于 限制3天以内
|
const minTime = this.timeTwo// 三天之前
|
const maxTime = this.timeTwo + WEEK // 三天之后
|
return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
|
} else {
|
return time.getTime() > new Date()
|
}
|
}
|
},
|
value4Pic: {
|
onPick: ({ maxDate, minDate }) => {
|
// 最大时间 最小时间
|
this.timeThree = minDate.getTime() // 当选一个日期时 就是最小日期
|
// 如何你选择了两个日期了，就把那个变量置空
|
if (maxDate) this.timeThree = ''
|
},
|
disabledDate: time => {
|
if (this.timeThree) {
|
const WEEK = 3 * 24 * 3600 * 1000 - 1 // 这里乘以3再减去1相当于 限制3天以内
|
const minTime = this.timeThree// 三天之前
|
const maxTime = this.timeThree + WEEK // 三天之后
|
return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
|
} else {
|
return time.getTime() > new Date()
|
}
|
}
|
},
|
selectTime: [],
|
upTime: [],
|
fileList1: [],
|
fileList2: [],
|
fileList3: [],
|
fileList4: [],
|
fileList5: [],
|
fileList6: [],
|
fileList7: [],
|
fileList8: [],
|
fileList9: [],
|
fileLists: [[], [], [], [], [], [], [], [], []],
|
sailingReport: {
|
fileLists: [
|
[], [], [], [], [], [], [], [], []
|
],
|
index: 0,
|
fileList: []
|
},
|
openBox: false, // 是否打开弹窗
|
// tableData: []
|
tableData: [],
|
urlList: [],
|
numList: [0, 0, 0, 0, 0, 0, 0, 0, 0],
|
isDisplay: false,
|
dateTime2: 'none',
|
dateTime3: 'none',
|
isDidAdd: false, // 是否禁用加
|
isDisMinus: true, // 是否禁用减
|
planSelect: '', // 无人机查询下拉框
|
planSelect2: '', // 无人机上传选择框
|
planMac: [], // 无人机数组
|
planInput: '', // 无人机飞行区域查询
|
planInput2: '', // 无人机飞行区域上传
|
innerVisible: false, // 内部地图是否打开
|
radioSeven: 'PM2.5'
|
}
|
},
|
watch: {
|
value1(n, o) {
|
if (n === null) {
|
this.value1 = []
|
}
|
},
|
value2(n, o) {
|
if (n === null) {
|
this.value2 = []
|
}
|
},
|
value3(n, o) {
|
if (n === null) {
|
this.value3 = []
|
}
|
},
|
value4(n, o) {
|
if (n === null) {
|
this.value4 = []
|
}
|
}
|
},
|
created() {
|
this.$request({
|
url: 'cruiser/selectCruisers',
|
method: 'get'
|
}).then(res => {
|
this.carMac = res.data
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
methods: {
|
// 查询走行车报告
|
selectExport() {
|
this.selectTime = this.newTime(this.value1)
|
if (this.cityChoose && this.equipChoose1 && this.selectTime[1]) {
|
this.$request({
|
url: '/cruiser/selectDaily',
|
method: 'get',
|
params: {
|
code: this.cityChoose,
|
type: this.equipChoose1,
|
startTime: this.selectTime[0],
|
endTime: this.selectTime[1],
|
mac: this.carInput
|
}
|
}).then(res => {
|
this.carInput2 = this.carInput
|
var info = res.data
|
if (info.length === 0) {
|
this.$message('暂无数据')
|
this.tableData = info
|
return
|
}
|
info.map(v => {
|
var time = v.time.split('-').join('')
|
v.name = `高新区走航监测报告${time}`
|
})
|
info.sort((a, b) => { return b.time.split('-').join('') - a.time.split('-').join('') })
|
this.tableData = info
|
}).catch(err => {
|
console.log(err)
|
})
|
} else {
|
this.$message('参数缺失！')
|
}
|
},
|
// 上传图片
|
submitImgs() {
|
if(this.equipChoose2 === 'car') {
|
this.tableData = []
|
this.isDisplay = true
|
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]
|
var num = 0
|
this.numList.map(v => {
|
if (v > 0) {
|
num++
|
}
|
})
|
if (this.cityOptions2 && this.value2.length === 2 && this.equipChoose2 && this.carInput2 && this.areaInput3 && this.isDisplay && (num === 0 || num === this.fileLists.length)) {
|
this.upTime = this.newTime(this.value2, 'submit')
|
const formData = new FormData()
|
formData.append(`code`, this.cityChoose2)
|
formData.append(`type`, this.equipChoose2)
|
formData.append(`mac`, this.carInput2)
|
formData.append(`area`, this.areaInput3)
|
formData.append(`time1`, this.upTime[0])
|
formData.append(`time2`, this.upTime[1])
|
var upTime2 = []
|
var upTime3 = []
|
if (this.dateTime2 === 'block' && this.value3.length) { // 第二个日期时间控件
|
upTime2 = this.newTime(this.value3, 'submit')
|
formData.append(`time3`, upTime2[0])
|
formData.append(`time4`, upTime2[1])
|
}
|
if (this.dateTime3 === 'block' && this.value4.length) { // 第三个日期时间控件
|
upTime3 = this.newTime(this.value4, 'submit')
|
formData.append(`time5`, upTime3[0])
|
formData.append(`time6`, upTime3[1])
|
}
|
this.fileLists.map(v => {
|
v.map(item => {
|
formData.append(`files`, item.raw)
|
})
|
})
|
// 弹框隐藏
|
this.openBox = false
|
this.MultipartFile(formData).then(res => {
|
this.isDisplay = false
|
if (res.code === 0) {
|
this.$message({
|
message: '提交成功！',
|
type: 'success'
|
})
|
var s = new Date(res.data.time) // 标准时间转中国标准时间
|
this.value1 = [s, s]
|
this.carInput = this.carInput2
|
var reportInfo = res.data
|
reportInfo.name = '高新区走航监测报告' + reportInfo.time.split('-').join('')
|
this.tableData = [reportInfo]
|
} else if (res.code === -47) {
|
this.$message(res.message)
|
} else {
|
this.$message.error('提交失败！')
|
}
|
}).catch(err => {
|
console.log(err)
|
this.isDisplay = false
|
})
|
} else {
|
this.isDisplay = false
|
this.$message('缺失参数！')
|
}
|
}
|
},
|
// 提交文件后台接口
|
MultipartFile(data) {
|
return this.$request({
|
url: '/cruiser/getDaily',
|
method: 'post',
|
headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上传这一句必须加
|
data
|
})
|
},
|
// 下载报告
|
expReport(obj) {
|
this.$request({
|
url: '/cruiser/loadDaily',
|
method: 'get',
|
params: {
|
id: obj.id
|
}
|
}).then(res => {
|
const baseUrl = `${requestObj.baseUrl}/static/img/`
|
var imagesObj = res.data.images
|
this.sailingReport = { ...this.sailingReport, ...res.data.code }
|
// const url1 = `http://47.99.64.149:8081//static/img/7f633687-8321-4f89-bffc-9a52f94cfb77.jpg`
|
if (imagesObj) {
|
for (let i = 0; i < imagesObj.length; i++) {
|
this.sailingReport.fileLists[i] = [{ url: baseUrl + imagesObj[i] }]
|
}
|
}
|
this.sailingReport.index = imagesObj.length
|
var data2 = obj.date.split('-')
|
this.sailingReport.date2 = data2[0] + '年' + data2[1] + '月' + data2[2] + '日'
|
var time = []
|
for (let i = 0; i < res.data.code.time.length; i++) {
|
time.push(res.data.code.time[i])
|
}
|
this.sailingReport.time0 = time[0]
|
if (time.length === 2) {
|
this.sailingReport.time1 = time[1]
|
}
|
if (time.length === 3) {
|
this.sailingReport.time1 = time[1]
|
this.sailingReport.time2 = time[2]
|
}
|
exportDocx('/sailingReport.docx', this.sailingReport, `${obj.name}.docx`)
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 上传按钮
|
upImgBtn() {
|
this.openBox = true
|
this.isDisplay = false
|
},
|
// 添加或删除一个时间控件
|
addDate(name) {
|
if (name === 'add') { // 加
|
if (this.dateTime2 === 'none') { // 调出dateTime2
|
this.dateTime2 = 'block'
|
this.value3 = [new Date(), new Date()]
|
this.isDisMinus = false
|
} else if (this.dateTime2 === 'block' && this.dateTime3 === 'none') { // 调出dateTime3
|
this.dateTime3 = 'block'
|
this.value4 = [new Date(), new Date()]
|
this.isDidAdd = true
|
} else { // dateTime2和dateTime3都已出现
|
this.isDidAdd = true
|
}
|
} else { // 减
|
if (this.dateTime3 === 'block') {
|
this.dateTime3 = 'none'
|
this.isDidAdd = false
|
this.value4 = []
|
} else if (this.dateTime3 === 'none' && this.dateTime2 === 'block') {
|
this.value3 = []
|
this.dateTime2 = 'none'
|
this.isDisMinus = true
|
} else { // dateTime2和dateTime3都已经隐藏
|
this.isDisMinus = true
|
this.isDidAdd = false
|
}
|
}
|
},
|
// value2改变判断是否有value3和value4
|
value2Change(e) {
|
var time2 = []
|
var time3 = []
|
var time4 = []
|
if (this.value2 !== null) {
|
if (this.value3.length && this.value4.length) { // value3和value4都存在
|
for (let i = 0; i < 2; i++) {
|
time2.push(e[i].getTime())
|
time3.push(this.value3[i].getTime())
|
time4.push(this.value4[i].getTime())
|
}
|
if (!(time2[0] > time4[1] || time2[1] < time4[0]) || !(time2[0] > time3[1] || time2[1] < time3[0])) { // 不合格
|
this.value2 = []
|
this.$message('请选择没有重叠的时间段')
|
}
|
} else if (this.value3.length) { // 只有value3存在
|
for (let i = 0; i < 2; i++) {
|
time3.push(this.value3[i].getTime())
|
time2.push(e[i].getTime())
|
}
|
if (!(time2[0] > time3[1] || time2[1] < time3[0])) { // 不合格
|
this.value2 = []
|
this.$message('请选择没有重叠的时间段')
|
}
|
} else if (this.value4.length) { // 只有value3存在
|
for (let i = 0; i < 2; i++) {
|
time4.push(this.value4[i].getTime())
|
time2.push(e[i].getTime())
|
}
|
if (!(time2[0] > time4[1] || time2[1] < time4[0])) { // 不合格
|
this.value2 = []
|
this.$message('请选择没有重叠的时间段')
|
}
|
}
|
}
|
},
|
// value3改变时判断是否在value2区间内,前提：value2存在
|
value3Change(e) {
|
if (this.value3 !== null) {
|
if (this.value2.length) {
|
var time2 = []
|
var time3 = []
|
for (let i = 0; i < 2; i++) {
|
time3.push(e[i].getTime())
|
time2.push(this.value2[i].getTime())
|
}
|
if (!(time3[0] > time2[1] || time3[1] < time2[0])) { // 不合格
|
this.value3 = []
|
this.$message('请选择没有重叠的时间段')
|
}
|
} else {
|
this.value3 = []
|
this.$message('请先选择第一段时间')
|
}
|
}
|
},
|
// value4改变时判断是否在value2和value3区间内
|
value4Change(e) {
|
if (this.value4 !== null) {
|
if (this.value2.length && this.value3.length) {
|
var time2 = []
|
var time3 = []
|
var time4 = []
|
for (let i = 0; i < 2; i++) {
|
time2.push(this.value2[i].getTime())
|
time3.push(this.value3[i].getTime())
|
time4.push(this.value4[i].getTime())
|
}
|
if (!(time4[0] > time2[1] || time4[1] < time2[0]) || !(time4[0] > time3[1] || time4[1] < time3[0])) { // 不合格
|
this.value4 = []
|
this.$message('请选择没有重叠的时间段')
|
}
|
} else {
|
this.value4 = []
|
this.$message('请先选择第一、二段时间')
|
}
|
}
|
},
|
// 时间处理函数（日期带0）
|
newTime(timeArr, name) {
|
var arr = []
|
if (name === 'submit') {
|
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)
|
})
|
return arr
|
} else {
|
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
|
arr.push(y + '-' + m + '-' + d)
|
})
|
return arr
|
}
|
},
|
// 图片转base64函数
|
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)
|
}
|
})
|
},
|
// 限制一天
|
handleExceed(files, fileList) {
|
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
|
},
|
// 上传文件到upload
|
handleChange1(file, fileList) {
|
// console.log(file, '123')
|
this.fileList1 = fileList
|
this.fileLists[0] = fileList
|
// this.getBase64(file.raw).then(res => {
|
// console.log(res)
|
// })
|
},
|
handleRemove1(file, fileList) {
|
this.fileList1 = fileList
|
this.fileLists[0] = fileList
|
},
|
handleChange2(file, fileList) {
|
this.fileList2 = fileList
|
this.fileLists[1] = fileList
|
},
|
handleRemove2(file, fileList) {
|
this.fileList2 = fileList
|
this.fileLists[1] = fileList
|
},
|
handleChange3(file, fileList) {
|
this.fileList3 = fileList
|
this.fileLists[2] = fileList
|
},
|
handleRemove3(file, fileList) {
|
this.fileList3 = fileList
|
this.fileLists[2] = fileList
|
},
|
handleChange4(file, fileList) {
|
this.fileList4 = fileList
|
this.fileLists[3] = fileList
|
},
|
handleRemove4(file, fileList) {
|
this.fileList4 = fileList
|
this.fileLists[3] = fileList
|
},
|
handleChange5(file, fileList) {
|
this.fileList5 = fileList
|
this.fileLists[4] = fileList
|
},
|
handleRemove5(file, fileList) {
|
this.fileList5 = fileList
|
this.fileLists[4] = fileList
|
},
|
handleChange6(file, fileList) {
|
this.fileList6 = fileList
|
this.fileLists[5] = fileList
|
},
|
handleRemove6(file, fileList) {
|
this.fileList6 = fileList
|
this.fileLists[5] = fileList
|
},
|
handleChange7(file, fileList) {
|
this.fileList7 = fileList
|
this.fileLists[6] = fileList
|
},
|
handleRemove7(file, fileList) {
|
this.fileList7 = fileList
|
this.fileLists[6] = fileList
|
},
|
handleChange8(file, fileList) {
|
this.fileList8 = fileList
|
this.fileLists[7] = fileList
|
},
|
handleRemove8(file, fileList) {
|
this.fileList8 = fileList
|
this.fileLists[7] = fileList
|
},
|
handleChange9(file, fileList) {
|
this.fileList9 = fileList
|
this.fileLists[8] = fileList
|
},
|
handleRemove9(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;
|
margin-bottom: 15px;
|
}
|
.dateTimeBox>div{
|
margin-bottom: 10px;
|
}
|
.innerDialog /deep/ .el-dialog__body{
|
height: 90%;
|
}
|
</style>
|
