+<template>
|
<div style="width: 100%; height: 100%">
|
<div class="topSelect">
|
<el-cascader
|
v-model="newMac"
|
:options="options"
|
clearable
|
placeholder="选择设备"
|
style="width: 354px"
|
/>
|
<el-cascader
|
v-model="value"
|
:options="newSensor"
|
:props="props"
|
collapse-tags
|
clearable
|
placeholder="选择因子"
|
style="margin-left: 20px"
|
/>
|
<el-date-picker
|
v-model="timevalue"
|
type="datetimerange"
|
range-separator="至"
|
value-format="yyyy-MM-dd HH"
|
start-placeholder="开始日期"
|
:picker-options="pickerOptions"
|
end-placeholder="结束日期"
|
style="margin-left: 1rem"
|
/>
|
|
<el-button
|
type="primary"
|
style="margin-left: 20px"
|
@click="toExcel()"
|
>
|
导出
|
</el-button>
|
<el-button @click="exportMon">
|
查询
|
</el-button>
|
</div>
|
<el-table
|
id="exportTab"
|
:data="dateList"
|
style="margin-top: 20px"
|
border
|
max-height="800"
|
>
|
<el-table-column
|
v-for="item in columnList"
|
:key="item"
|
:prop="item"
|
:label="item"
|
width="180px"
|
/>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
import FileSaver from 'file-saver'
|
import XLSX2 from 'xlsx-style'
|
import XLSX from 'xlsx'
|
|
export default {
|
// import 引入的组件需要注入到对象中才能使用props
|
data () {
|
// 这里存放数据
|
return {
|
props: { multiple: true },
|
options: [],
|
value: '',
|
value1: '',
|
newMac: '',
|
newMac1: [],
|
// newMac2:'',
|
newSensor: [],
|
timevalue: [],
|
columnList: [], // 表头的数组
|
dateList: [],
|
pickerOptions: {
|
disabledDate: (time) => {
|
return time.getTime() > new Date()
|
},
|
},
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {},
|
// 监控data中的数据变化
|
watch: {
|
newMac (newVal, oldval) {
|
this.newMac1 = []
|
this.newMac1.push(newVal[1][1])
|
this.getSensor()
|
},
|
value (n, o) {
|
this.value1 = []
|
for (let i = 0; i < n.length; i++) {
|
this.value1.push(n[i][0])
|
}
|
},
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created () {
|
this.getData()
|
},
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
mounted () {},
|
beforeCreate () {}, // 生命周期 - 创建之前
|
beforeMount () {}, // 生命周期 - 挂载之前
|
beforeUpdate () {}, // 生命周期 - 更新之前
|
updated () {}, // 生命周期 - 更新之后
|
beforeDestroy () {}, // 生命周期 - 销毁之前
|
destroyed () {}, // 生命周期 - 销毁完成
|
activated () {},
|
// 方法集合
|
methods: {
|
// 请求左侧设备数据
|
getData () {
|
this.$request({
|
url: '/monitorPoint/queryMonitorPoints',
|
method: 'get',
|
params: {
|
organizationId: this.$store.state.orgId,
|
},
|
})
|
.then((res) => {
|
// console.log('这是index页面左侧设备数据')
|
// console.log(res)
|
this.defaultData = res.data.monitorPoints
|
for (let i = 0; i < this.defaultData.length; i++) {
|
this.options.push({
|
value: this.defaultData[i].name,
|
label: this.defaultData[i].name,
|
})
|
this.options[i].children = []
|
if (this.defaultData[i].devices) {
|
for (let j = 0; j < this.defaultData[i].devices.length; j++) {
|
this.options[i].children.push({
|
value: [
|
this.defaultData[i].devices[j].name,
|
this.defaultData[i].devices[j].mac,
|
],
|
label: this.defaultData[i].devices[j].name,
|
})
|
}
|
}
|
}
|
})
|
.catch((error) => {
|
console.log(error)
|
})
|
},
|
// 通过mac号获得因子
|
getSensor () {
|
this.$request({
|
url: '/deviceInfo/getMacSensors',
|
method: 'post',
|
data: {
|
macs: this.newMac1,
|
},
|
})
|
.then((res) => {
|
// console.log(res)
|
this.newSensor = []
|
var sensor = res.data
|
for (var i in sensor) {
|
this.newSensor.push({ value: i, label: sensor[i] })
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
exportMon () {
|
console.log(this.timevalue)
|
if (this.newMac == '') {
|
this.$message.warning('请选择站点')
|
return
|
}
|
if (this.value == '') {
|
this.$message.warning('请选择因子')
|
return
|
}
|
|
this.dateList = []
|
this.columnList = []
|
this.$request({
|
url: 'monitorPoint/getHourlyDataExcel',
|
method: 'post',
|
data: {
|
macs: this.newMac1,
|
sensors: this.value.toString(),
|
startTime: this.timevalue[0],
|
endTime: this.timevalue[1],
|
},
|
}).then((res) => {
|
console.log(res, 11)
|
this.tableData = res.data
|
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)
|
}
|
})
|
},
|
toExcel () {
|
let wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), {
|
sheet: '分组表',
|
})
|
this.setExlStyle(wb['Sheets']['分组表'])
|
var ws = XLSX2.write(wb, {
|
type: 'buffer',
|
})
|
try {
|
FileSaver.saveAs(
|
new Blob([ws], { type: 'application/octet-stream' }),
|
`设备数据导出.xlsx`
|
)
|
} catch (e) {
|
if (typeof console !== 'undefined') console.log(e, ws)
|
}
|
return ws
|
},
|
setExlStyle (data) {
|
let borderAll = {
|
// 单元格外侧框线
|
top: {
|
style: 'thin',
|
},
|
bottom: {
|
style: 'thin',
|
},
|
left: {
|
style: 'thin',
|
},
|
right: {
|
style: 'thin',
|
},
|
}
|
data['!cols'] = []
|
for (let key in data) {
|
if (data[key] instanceof Object) {
|
data[key].s = {
|
border: borderAll,
|
alignment: {
|
horizontal: 'center', // 水平居中对齐
|
vertical: 'center',
|
},
|
font: {
|
sz: 11,
|
},
|
bold: true,
|
numFmt: 0,
|
}
|
data['!cols'].push({ wpx: 200 })
|
}
|
}
|
return data
|
},
|
},
|
}
|
</script>
|
<style scoped lang="scss">
|
.topSelect {
|
display: flex;
|
margin-bottom: 20px;
|
padding: 20px 15px 0 15px;
|
span:first-child {
|
flex: 1;
|
}
|
div:last-child {
|
width: 300px;
|
line-height: 40px;
|
padding-left: 6px;
|
}
|
}
|
.topTitle {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
padding: 0 15px;
|
}
|
.btn1 {
|
margin-left: 1%;
|
height: 40px;
|
}
|
.select11 {
|
width: 20% !important;
|
}
|
/deep/.el-date-editor .el-range-separator {
|
width: 11%;
|
}
|
</style>
|
