<template>
|
<div style="width: 100%; height: 100%">
|
<div class="topSelect">
|
<!-- <el-cascader v-model="newMac" :options="options" clearable change-on-select :props="{ checkStrictly: true }" placeholder="选择设备" /> -->
|
<el-cascader
|
v-model="newMac"
|
:options="options"
|
:props="props"
|
collapse-tags
|
clearable
|
placeholder="选择设备"
|
style="width: 21rem"
|
/>
|
<!-- <div> -->
|
<!-- <el-select
|
v-model="value"
|
placeholder="选择因子"
|
style="margin-left: 20px"
|
>
|
<el-option
|
v-for="(item, index) in newSensor"
|
:key="index"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select> -->
|
<div style="margin-left: 1.5rem">
|
<el-cascader
|
v-model="value"
|
:options="newSensor"
|
:props="props"
|
collapse-tags
|
clearable
|
/>
|
</div>
|
<div>
|
<el-select
|
v-model="select1"
|
placeholder="请选择"
|
style="margin-left: 1.5rem; width: 15rem"
|
>
|
<el-option
|
v-for="item in options1"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
<component
|
:is="dataType"
|
style="padding-left: 0; margin-left: 20px; width: 160px"
|
class="select11"
|
@sendPickerChild="showPickerChild"
|
/>
|
|
<!-- <el-button type="primary" @click="toExcel()" style="margin-left: 20px"
|
>导出</el-button
|
> -->
|
<!-- <el-dropdown @command="handleCommand">
|
<el-button type="primary" @click="toExcel()" style="margin-left: 20px"
|
>导出<i class="el-icon-arrow-down el-icon--right"></i
|
></el-button>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="expNew">导出(新)</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown> -->
|
<el-dropdown
|
split-button
|
type="primary"
|
style="margin-left: 20px"
|
@click="toExcel()"
|
@command="handleCommand"
|
>
|
导出
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="expNew">
|
导出(新)
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<el-button
|
style="margin-left: 10px"
|
@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-column
|
v-for="item in columnList"
|
:prop="item.props"
|
:label="item.label"
|
width="180px"
|
:key="item.label"
|
>
|
</el-table-column> -->
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
import FileSaver from 'file-saver'
|
import XLSX2 from 'xlsx-style'
|
import XLSX from 'xlsx'
|
import DatePicker from '@/components/Form/DatePicker'
|
import MouthPicker from '@/components/Form/MouthPicker'
|
import HourPicker from '@/components/Form/HourPicker'
|
import HourPicker1 from '@/components/Form/HourPicker1'
|
import CustomPicker from '@/components/Form/CustomPicker'
|
import CustomPicker1 from '@/components/Form/CustomPicker1'
|
import TimePicker1 from '@/components/Form/TimePicker1'
|
export default {
|
components: {
|
DatePicker,
|
MouthPicker,
|
HourPicker,
|
CustomPicker,
|
CustomPicker1,
|
TimePicker1,
|
HourPicker1,
|
},
|
data () {
|
// 这里存放数据
|
return {
|
props: { multiple: true },
|
options: [],
|
value: '',
|
newMac: '',
|
newMac1: [],
|
newSensor: [] /* 因子数组 */,
|
columnList: [], // 表头的数组
|
dateList: [],
|
timevalue: [],
|
select1: '日报',
|
dataType: 'HourPicker',
|
unit: 'day',
|
options1: [
|
{
|
label: '小时报',
|
value: '小时报',
|
},
|
{
|
label: '日报',
|
value: '日报',
|
},
|
{
|
label: '月报',
|
value: '月报',
|
},
|
],
|
pickerOptions: {
|
disabledDate: (time) => {
|
return time.getTime() > new Date()
|
},
|
},
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {},
|
// 监控data中的数据变化
|
watch: {
|
select1 (nv, ov) {
|
if (nv === '日报') {
|
this.dataType = 'HourPicker'
|
this.unit = 'day'
|
} else if (nv === '月报') {
|
this.dataType = 'DatePicker'
|
this.unit = 'month'
|
} else if (nv === '年报') {
|
this.dataType = 'MouthPicker'
|
this.unit = 'month'
|
} else if (nv === '小时报') {
|
this.dataType = 'HourPicker1'
|
this.unit = 'hours'
|
} else {
|
this.dataType = 'CustomPicker'
|
this.unit = 'hours'
|
}
|
},
|
// 监听设备的数据更新
|
newMac (newVal, oldval) {
|
this.newMac1 = []
|
for (let i = 0; i < newVal.length; i++) {
|
// console.log(newVal[i], 111)
|
this.newMac1.push(newVal[i][1][1])
|
}
|
// 设备更新后，重新获取因子数据
|
this.getSensor()
|
},
|
// 监听dataType的数据更新
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created () {
|
this.getData()
|
},
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
// mounted() {
|
//
|
// },
|
beforeCreate () {}, // 生命周期 - 创建之前
|
beforeMount () {}, // 生命周期 - 挂载之前
|
beforeUpdate () {}, // 生命周期 - 更新之前
|
updated () {}, // 生命周期 - 更新之后
|
beforeDestroy () {}, // 生命周期 - 销毁之前
|
destroyed () {}, // 生命周期 - 销毁完成
|
activated () {},
|
// 方法集合
|
methods: {
|
handleCommand (command) {
|
if (this.newMac1 == '') {
|
this.$message.warning('请选择站点')
|
return
|
}
|
if (this.value == '') {
|
this.$message.warning('请选择因子')
|
return
|
}
|
this.dateList = []
|
this.columnList = []
|
this.$request({
|
url: 'monitorPoint/exlOut',
|
method: 'post',
|
data: {
|
macs: this.newMac1,
|
sensors: this.value.toString(),
|
// startTime: this.timevalue[0],
|
// endTime: this.timevalue[1],
|
type: this.unit,
|
times: this.newData instanceof Array ? this.newData : [this.newData],
|
},
|
responseType: 'blob',
|
}).then((res) => {
|
console.log('导出成功', res)
|
this.getOutExcel('列表数据导出.xlsx', res)
|
})
|
},
|
getOutExcel (fileName, res) {
|
let blob = new Blob([res], { type: 'application/x-xls' })
|
if (window.navigator.msSaveOrOpenBlob) {
|
// 兼容 IE & EDGE
|
navigator.msSaveBlob(blob, fileName)
|
} else {
|
var link = document.createElement('a')
|
// 兼容不同浏览器的URL对象
|
const url = window.URL || window.webkitURL || window.moxURL
|
// 创建下载链接
|
link.href = url.createObjectURL(blob)
|
// 命名下载名称
|
link.download = fileName
|
// 点击触发下载
|
link.click()
|
// 下载完成进行释放
|
url.revokeObjectURL(link.href)
|
}
|
},
|
showPickerChild (data) {
|
this.newData = data
|
},
|
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)
|
})
|
},
|
// 通过设备号获得因子数据
|
getSensor () {
|
this.newSensor = []
|
this.$request({
|
url: '/deviceInfo/getMacSensors',
|
method: 'post',
|
data: {
|
macs: this.newMac1,
|
},
|
})
|
.then((result) => {
|
// console.log(result)
|
// this.newSensor = []
|
var sensor = result.data
|
for (var i in sensor) {
|
this.newSensor.push({ value: i, label: sensor[i] })
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
exportMon () {
|
if (this.newMac1 == '') {
|
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],
|
type: this.unit,
|
times: this.newData instanceof Array ? this.newData : [this.newData],
|
},
|
}).then((res) => {
|
// console.log(res, 11)
|
this.tableData = res.data
|
for (let key in this.tableData[0]) {
|
this.columnList.push(key)
|
}
|
for (let item of this.tableData) {
|
this.dateList.push(item)
|
}
|
// this.tableData = res.data
|
// for (let key in this.tableData[0]) {
|
// let prop = key
|
// if (String(key).indexOf('.') > -1) {
|
// prop = key.replace(/\./g, '')
|
// }
|
// this.columnList.push({ label: key, props: prop })
|
// }
|
// for (let item of this.tableData) {
|
// for (let key in this.tableData[0]) {
|
// if (String(key).indexOf('.') > -1) {
|
// let newKey = key.replace(/\./g, '')
|
// item[newKey] = item[key]
|
// }
|
// }
|
// 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
|
},
|
}, // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</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>
|
