|  |  |  | 
|---|
|  |  |  | <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> | 
|---|