| | |
| | | <template> |
| | | <div class="zong" > |
| | | <div style="display: flex;"> |
| | | <div class="zong"> |
| | | <div style="display: flex"> |
| | | <el-select |
| | | v-model="value" |
| | | placeholder="请选择检查设备" |
| | |
| | | > |
| | | <el-button @click="exportMon">查询</el-button> |
| | | </div> |
| | | |
| | | |
| | | <el-table |
| | | :data="dateList" |
| | | style="margin-top: 20px;" |
| | | style="margin-top: 20px" |
| | | id="exportTab" |
| | | border |
| | | max-height="800" |
| | | max-height="800" |
| | | > |
| | | <el-table-column |
| | | v-for="item in columnList" |
| | |
| | | startvalue: '', |
| | | endvalue: '', |
| | | options: [], |
| | | valueww: '', |
| | | columnList: [], //表头的数组 |
| | | dateList: [], |
| | | newMac1:[], |
| | | newMac1: [], |
| | | Monfactors: [], |
| | | tableData: [], |
| | | tableFields: {}, |
| | | ddlist: [ |
| | | { |
| | | 'PM2.5': '11', |
| | | PM10: 155, |
| | | 时间: '2023-6-05', |
| | | }, |
| | | { |
| | | 'PM2.5': '110', |
| | | PM10: 155, |
| | | 时间: '2023-6-05', |
| | | }, |
| | | { |
| | | 'PM2.5': '110', |
| | | PM10: 159, |
| | | 时间: '2023-6-05', |
| | | }, |
| | | ], |
| | | json_meta: [ |
| | | [ |
| | | { |
| | |
| | | //方法集合 |
| | | name: 'exporName', |
| | | methods: { |
| | | getMonitor(res){ |
| | | this.Monfactors=[] |
| | | getMonitor(res) { |
| | | this.Monfactors = [] |
| | | this.$request({ |
| | | url:'sensor/getSensorsByMonitorPointIds', |
| | | method:'get', |
| | | params:{ |
| | | monitorPointIds:res |
| | | } |
| | | }).then((res)=>{ |
| | | console.log(res); |
| | | this.Monfactors=res.data |
| | | url: 'sensor/getSensorsByMonitorPointIds', |
| | | method: 'get', |
| | | params: { |
| | | monitorPointIds: res, |
| | | }, |
| | | }).then((res) => { |
| | | console.log(res) |
| | | this.Monfactors = res.data |
| | | }) |
| | | }, |
| | | exportMon() { |
| | | if(this.value===""){ |
| | | this.$message.warning('请选择检查设备') |
| | | console.log(this.valueww, '123') |
| | | if (this.value === '') { |
| | | this.$message.warning('请选择检查设备') |
| | | return |
| | | } |
| | | if(this.value1===""){ |
| | | this.$message.warning('请选择因子') |
| | | if (this.value1 === '') { |
| | | this.$message.warning('请选择因子') |
| | | return |
| | | } |
| | | if(this.startvalue===""){ |
| | | this.$message.warning('请选择开始时间') |
| | | if (this.startvalue === '') { |
| | | this.$message.warning('请选择开始时间') |
| | | return |
| | | } |
| | | if(this.endvalue===""){ |
| | | this.$message.warning('请选择结束时间') |
| | | if (this.endvalue === '') { |
| | | this.$message.warning('请选择结束时间') |
| | | return |
| | | } |
| | | this.dateList = [] |
| | | this.columnList = [] |
| | | this.$request({ |
| | | url: '/monitorPoint/getHourlyDataByMonitorPoint', |
| | | method: 'get', |
| | | method: 'get', |
| | | params: { |
| | | monitorPointId: this.value, |
| | | sensors: this.value1.toString(), |
| | |
| | | }).then((res) => { |
| | | console.log(res, 11) |
| | | this.tableData = res.data |
| | | console.log(this.tableData, 'this.tableData') |
| | | for (let key in this.tableData[0]) { |
| | | console.log(this.tableData, 'this.tableData') |
| | | for (let key in this.tableData[0]) { |
| | | this.columnList.push(key) |
| | | } |
| | | for (let item of this.tableData) { |
| | | this.dateList.push(item) |
| | | } |
| | | }) |
| | | console.log(1); |
| | | console.log(1) |
| | | }, |
| | | getMonitorPointId() { |
| | | this.$request({ |
| | |
| | | label: res.data[i].name, |
| | | }) |
| | | } |
| | | console.log(this.options); |
| | | |
| | | console.log(this.options) |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | |
| | | }, |
| | | toExcel() { |
| | | let wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), { sheet: "分组表" }); |
| | | this.setExlStyle(wb["Sheets"]["分组表"]); |
| | | let wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), { |
| | | sheet: '分组表', |
| | | }) |
| | | this.setExlStyle(wb['Sheets']['分组表']) |
| | | var ws = XLSX2.write(wb, { |
| | | type: "buffer", |
| | | }); |
| | | type: 'buffer', |
| | | }) |
| | | try { |
| | | FileSaver.saveAs( |
| | | new Blob([ws], { type: "application/octet-stream" }), |
| | | new Blob([ws], { type: 'application/octet-stream' }), |
| | | `监测站点数据表.xlsx` |
| | | ); |
| | | ) |
| | | } catch (e) { |
| | | if (typeof console !== "undefined") console.log(e, ws); |
| | | if (typeof console !== 'undefined') console.log(e, ws) |
| | | } |
| | | return ws; |
| | | return ws |
| | | }, |
| | | setExlStyle(data) { |
| | | let borderAll = { |
| | | //单元格外侧框线 |
| | | top: { |
| | | style: "thin", |
| | | style: 'thin', |
| | | }, |
| | | bottom: { |
| | | style: "thin", |
| | | style: 'thin', |
| | | }, |
| | | left: { |
| | | style: "thin", |
| | | style: 'thin', |
| | | }, |
| | | right: { |
| | | style: "thin", |
| | | style: 'thin', |
| | | }, |
| | | }; |
| | | data["!cols"] = []; |
| | | } |
| | | data['!cols'] = [] |
| | | for (let key in data) { |
| | | if (data[key] instanceof Object) { |
| | | data[key].s = { |
| | | border: borderAll, |
| | | alignment: { |
| | | horizontal: "center", //水平居中对齐 |
| | | vertical: "center", |
| | | horizontal: 'center', //水平居中对齐 |
| | | vertical: 'center', |
| | | }, |
| | | font: { |
| | | sz: 11, |
| | | }, |
| | | bold: true, |
| | | numFmt: 0, |
| | | }; |
| | | data["!cols"].push({ wpx: 200 }); |
| | | } |
| | | data['!cols'].push({ wpx: 200 }) |
| | | } |
| | | } |
| | | return data; |
| | | return data |
| | | }, |
| | | |
| | | }, |
| | | //生命周期 - 创建完成(可以访问当前 this 实例) |
| | | created() { |
| | | this.getMonitorPointId(); |
| | | this.getMonitorPointId() |
| | | }, |
| | | //生命周期 - 挂载完成(可以访问 DOM 元素) |
| | | mounted() {}, |
| | |
| | | .zong { |
| | | padding: 20px; |
| | | } |
| | | |
| | | </style> |