| | |
| | | <div class="dailyreport"> |
| | | <div class="dailyBox"> |
| | | <div class="dailyTop"> |
| | | <el-select v-model="cityChoose" placeholder="请选择"> |
| | | <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"> |
| | |
| | | end-placeholder="结束日期" |
| | | :picker-options="pickerOptions1"> |
| | | </el-date-picker> |
| | | <el-input v-model="carInput" placeholder="请输入走航车编号" clearable style="width: 180px;display: inline-block"></el-input> |
| | | <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="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>--> |
| | | <el-button type="primary" @click="upImgBtn" style="margin-left: 0">上传</el-button> |
| | | </div> |
| | | <div class="dailyDown" style="overflow-y: auto"> |
| | | <el-card class="boxCard"> |
| | |
| | | </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" |
| | | align="right" |
| | | type="date" |
| | | placeholder="选择日期" |
| | | :picker-options="pickerOptions"> |
| | | type="datetimerange" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | :picker-options="value2Pic" |
| | | @change="value2Change"> |
| | | </el-date-picker> |
| | | <el-input v-model="carInput2" placeholder="请输入走航车编号" clearable style="width: 180px;display: inline-block"></el-input> |
| | | <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 class="uploadDiv" style="width:90%;overflow: auto;display: flex;flex-wrap: wrap;justify-content: space-between"> |
| | | <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="" |
| | |
| | | :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> |
| | | <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>--> |
| | | </el-upload> |
| | | <el-upload |
| | | class="upload-demo" |
| | |
| | | :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> |
| | |
| | | :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> |
| | |
| | | :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> |
| | |
| | | :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> |
| | |
| | | :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> |
| | |
| | | :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> |
| | |
| | | :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> |
| | |
| | | :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> |
| | | <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> |
| | | <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/exportDocx' |
| | | 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: '高新区' |
| | | }], |
| | | carInput: '', // 查询时走航车唯一标识 |
| | | 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(), // 上传时间 |
| | | 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]); |
| | | 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]); |
| | | 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]); |
| | | const end = new Date() |
| | | const start = new Date() |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) |
| | | picker.$emit('pick', [start, end]) |
| | | } |
| | | }] |
| | | }, |
| | |
| | | } |
| | | }] |
| | | }, |
| | | 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: [], |
| | |
| | | fileLists: [[], [], [], [], [], [], [], [], []], |
| | | sailingReport: { |
| | | fileLists: [ |
| | | // fileList1: [], |
| | | // fileList2: [], |
| | | // fileList3: [], |
| | | // fileList4: [], |
| | | // fileList5: [], |
| | | // fileList6: [], |
| | | // fileList7: [], |
| | | // fileList8: [], |
| | | // fileList9: [] |
| | | [], [], [], [], [], [], [], [], [] |
| | | ], |
| | | index: 5, |
| | | index: 0, |
| | | 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 弄' |
| | | }], |
| | | tableData: [], |
| | | urlList: [], |
| | | numList: [0, 0, 0, 0, 0, 0, 0, 0, 0] |
| | | 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' |
| | | } |
| | | }, |
| | | 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 |
| | | 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 => { |
| | | console.log(res) |
| | | var info = res.data |
| | | info.map(v => { |
| | | var time = v.time.split('-').json('') |
| | | v.name = `走航车监测日报${time}` |
| | | }) |
| | | this.carMac = res.data |
| | | }).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`) |
| | | 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() { |
| | | // 弹框隐藏 |
| | | this.openBox = false |
| | | 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] |
| | | console.log(this.numList, 'this.numList') |
| | | 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.cityOptions) |
| | | formData.append(`time`, this.upTime) |
| | | 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.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) |
| | | // }) |
| | | // 弹框隐藏 |
| | | 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: '', |
| | | url: '/cruiser/getDaily', |
| | | method: 'post', |
| | | headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上传这一句必须加 |
| | | data |
| | |
| | | // 下载报告 |
| | | expReport(obj) { |
| | | this.$request({ |
| | | url: '', |
| | | url: '/cruiser/loadDaily', |
| | | method: 'get', |
| | | params: { |
| | | id: obj.id |
| | | } |
| | | }).then(res => { |
| | | console.log(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) |
| | | }) |
| | | exportDocx('/sailingReport.docx', this.sailingReport, `高新区走航监测报告.docx`) |
| | | }, |
| | | // 上传按钮 |
| | | 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) { |
| | | 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 = [] |
| | | if (name === 'submit') { |
| | | timeArr.map(v => { |
| | | var date = new Date(v) |
| | | var y = date.getFullYear() |
| | |
| | | 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 |
| | | } 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, fileList) |
| | | // console.log(file, fileList) |
| | | this.fileList1 = fileList |
| | | this.fileLists[0] = fileList |
| | | // this.getBase64(file.raw).then(res => { |
| | | // console.log(res) |
| | | // }) |
| | | }, |
| | | 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 |
| | | } |
| | |
| | | } |
| | | .openTop>div{ |
| | | margin-right: 15px; |
| | | margin-bottom: 15px; |
| | | } |
| | | .dateTimeBox>div{ |
| | | margin-bottom: 10px; |
| | | } |
| | | .innerDialog /deep/ .el-dialog__body{ |
| | | height: 90%; |
| | | } |
| | | </style> |