<template>
|
<div style="width: 100%">
|
<div>
|
<div class="topSelect">
|
<el-cascader
|
v-model="newMac"
|
:options="options"
|
:props="props"
|
collapse-tags
|
clearable
|
placeholder="选择设备"
|
style="width: 21rem"
|
/>
|
<div>
|
<el-radio-group
|
v-model="select1"
|
style="margin-left: 20px"
|
>
|
<el-radio-button label="日报" />
|
<el-radio-button label="周报" />
|
<el-radio-button label="月报" />
|
<el-radio-button label="自定义" />
|
</el-radio-group>
|
</div>
|
<component
|
:is="dataType"
|
style="padding-left: 0; margin-left: 30px"
|
class="select11"
|
@sendPickerChild="showPickerChild"
|
/>
|
<el-date-picker
|
v-if="dateDisplay"
|
v-model="newData"
|
style="width: 400px; margin-left: 10px"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd HH"
|
/>
|
<el-button
|
type="primary"
|
style="margin-left: 10px"
|
@click="getReportForm()"
|
>
|
查询
|
</el-button>
|
<el-button
|
type="primary"
|
@click="exportExcel()"
|
>
|
报表导出
|
</el-button>
|
</div>
|
</div>
|
<div class="topTitle">
|
<el-table
|
id="exportTabs"
|
:data="tableData"
|
max-height="730"
|
style="width: 100%"
|
@sort-change="changeTableSort"
|
>
|
<el-table-column
|
prop="name"
|
label="站点名称"
|
align="center"
|
/>
|
<el-table-column
|
label="综合指数"
|
align="center"
|
>
|
<el-table-column
|
prop="composite"
|
label="指数"
|
align="center"
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.composite !== 0 ? scope.row.composite : '--'
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="排名"
|
align="center"
|
prop="compositeNum"
|
sortable
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.compositeNum !== 0 ? scope.row.compositeNum : '--'
|
}}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
label="PM2.5"
|
align="center"
|
>
|
<el-table-column
|
prop="pm25"
|
label="浓度"
|
align="center"
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.pm25 !== 0 ? scope.row.pm25 : '--'
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="排名"
|
align="center"
|
prop="pm25Num"
|
sortable
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.pm25Num !== 0 ? scope.row.pm25Num : '--'
|
}}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
label="PM10"
|
align="center"
|
>
|
<el-table-column
|
prop="pm10"
|
label="浓度"
|
align="center"
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.pm10 !== 0 ? scope.row.pm10 : '--'
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="排名"
|
align="center"
|
prop="pm10Num"
|
sortable
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.pm10Num !== 0 ? scope.row.pm10Num : '--'
|
}}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
label="SO2"
|
align="center"
|
>
|
<el-table-column
|
prop="so2"
|
label="浓度"
|
align="center"
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.so2 !== 0 ? scope.row.so2 : '--'
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="排名"
|
align="center"
|
prop="so2Num"
|
sortable
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.so2Num !== 0 ? scope.row.so2Num : '--'
|
}}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
label="NO2"
|
align="center"
|
>
|
<el-table-column
|
prop="no2"
|
label="浓度"
|
align="center"
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.no2 !== 0 ? scope.row.no2 : '--'
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="排名"
|
align="center"
|
prop="no2Num"
|
sortable
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.no2Num !== 0 ? scope.row.no2Num : '--'
|
}}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
label="CO"
|
align="center"
|
>
|
<el-table-column
|
prop="co"
|
label="浓度"
|
align="center"
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.co !== 0 ? scope.row.co : '--'
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="排名"
|
align="center"
|
prop="conum"
|
sortable
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.conum !== 0 ? scope.row.conum : '--'
|
}}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
label="O3"
|
align="center"
|
>
|
<el-table-column
|
prop="o3"
|
label="浓度"
|
align="center"
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.o3 !== 0 ? scope.row.o3 : '--'
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="排名"
|
align="center"
|
prop="o3Num"
|
sortable
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.o3Num !== 0 ? scope.row.o3Num : '--'
|
}}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
label="TVOC"
|
align="center"
|
>
|
<el-table-column
|
prop="tovc"
|
label="浓度"
|
align="center"
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.tovc !== 0 ? scope.row.tovc : '--'
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="排名"
|
align="center"
|
prop="tovcnum"
|
sortable
|
>
|
<template slot-scope="scope">
|
{{
|
scope.row.tovcnum !== 0 ? scope.row.tovcnum : '--'
|
}}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
import FileSaver from 'file-saver'
|
import XLSX from 'xlsx'
|
import DatePicker from '@/components/Form/DatePicker'
|
import MouthPicker from '@/components/Form/MouthPicker'
|
import HourPicker from '@/components/Form/HourPicker3'
|
import HourPicker1 from '@/components/Form/HourPicker1'
|
import CustomPicker from '@/components/Form/CustomPicker'
|
import CustomPicker1 from '@/components/Form/CustomPicker1'
|
import TimePicker1 from '@/components/Form/TimePicker1'
|
import weekPicker from '@/components/Form/weekPicker'
|
|
export default {
|
// import 引入的组件需要注入到对象中才能使用
|
components: {
|
DatePicker,
|
MouthPicker,
|
HourPicker,
|
CustomPicker,
|
CustomPicker1,
|
TimePicker1,
|
HourPicker1,
|
weekPicker,
|
},
|
props: {},
|
data () {
|
// 这里存放数据
|
return {
|
newData: [],
|
props: { multiple: true },
|
newMac: '',
|
newMac1: [],
|
options: [],
|
select1: '日报',
|
dataType: 'HourPicker',
|
unit: '1',
|
radio1: '',
|
value: '',
|
value1: '',
|
reportType: 0,
|
monitorPointId: 0,
|
tableData: [],
|
dateDisplay: false,
|
newKey: 0,
|
timearr: null,
|
// pickerOptions1: {
|
// disabledDate(time) {
|
// console.log(time)
|
// const curDate = this.value1[0] ? this.value1[0] : (new Date()).getTime()// 获取当前时间点
|
// const seven = 7 * 24 * 60 * 60 * 1000 // 设定7天日期 7天 * 24小时 * 60分钟 * 60秒 * 1000 = 7天的时间戳
|
// const sevenDays = curDate + seven// 当前时间点后的七天所处的日期
|
// return time.getTime() < Date.now() + 8.64e7 || time.getTime() > sevenDays + 8.64e7// 8.64e7 表示一天，明天之前包括明天不可选，只可选七天
|
// }
|
// }
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {},
|
// 监控data中的数据变化
|
watch: {
|
select1 (nv, ov) {
|
if (nv === '日报') {
|
this.dataType = 'HourPicker'
|
this.unit = 1
|
} else if (nv === '月报') {
|
this.dataType = 'DatePicker'
|
this.unit = 3
|
} else if (nv === '周报') {
|
this.dataType = 'weekPicker'
|
this.unit = 2
|
}
|
if (nv === '自定义') {
|
this.newData = []
|
this.dateDisplay = true
|
this.unit = 4
|
this.dataType = ''
|
} else {
|
this.dateDisplay = false
|
}
|
},
|
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 实例）
|
created () {
|
this.getData()
|
},
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
mounted () {},
|
beforeCreate () {}, // 生命周期 - 创建之前
|
beforeMount () {}, // 生命周期 - 挂载之前
|
beforeUpdate () {}, // 生命周期 - 更新之前
|
updated () {}, // 生命周期 - 更新之后
|
beforeDestroy () {}, // 生命周期 - 销毁之前
|
destroyed () {}, // 生命周期 - 销毁完成
|
activated () {},
|
// 方法集合
|
methods: {
|
showPickerChild (data) {
|
this.newData = data
|
},
|
// 重新添加rank排名(当表格的排序条件发生变化的时候会触发该事件)
|
changeTableSort () {
|
var sortTableData = this.$refs.mytable.tableData
|
// console.log(this.$refs.mytable.tableData, 111)
|
for (let i = 0; i < sortTableData.length; i++) {
|
sortTableData[i].rank = i + 1
|
}
|
},
|
|
// 导出报表
|
exportExcel () {
|
/* generate workbook object from table */
|
var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
|
var wb = XLSX.utils.table_to_book(
|
document.querySelector('#exportTabs'),
|
xlsxParam
|
)
|
|
/* get binary string as output */
|
var wbout = XLSX.write(wb, {
|
bookType: 'xlsx',
|
bookSST: true,
|
type: 'array',
|
})
|
try {
|
FileSaver.saveAs(
|
new Blob([wbout], { type: 'application/octet-stream' }),
|
'监测站数据报表.xlsx'
|
)
|
} catch (e) {
|
if (typeof console !== 'undefined') {
|
console.log(e, wbout)
|
}
|
}
|
return wbout
|
},
|
// 请求站点信息
|
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)
|
})
|
},
|
// 请求报表数据
|
getReportForm () {
|
console.log(this.newData)
|
this.$request({
|
// url: '/monitorPoint/listMonitoring',
|
url: '/monitorPoint/listMonitoring',
|
method: 'post',
|
data: {
|
mac: this.newMac1,
|
reportType: this.unit,
|
// monitorPointId: this.monitorPointId,
|
// reportType: key === 4 ? null : key,
|
startTime: this.unit === 2 ? this.newData : this.newData[0],
|
endTime: this.unit === 2 ? this.newData : this.newData[1],
|
// times: this.newData instanceof Array ? this.newData : [this.newData],
|
},
|
})
|
.then((res) => {
|
console.log(res)
|
this.tableData = res.data
|
// if (res.code !== 0) {
|
// return
|
// }
|
// var tempData = res.data
|
// for (let i = 0; i < tempData.length; i++) {
|
// tempData[i].rank = i + 1
|
// }
|
// this.tableData = tempData
|
// for (let i = 0; i < res.data.data.length; i++) {
|
// this.tableData.push({ ranking: this.defaultData[i].rank, name: this.defaultData[i].name, responsibleUnit: this.defaultData[i].responsibleUnit, time: this.defaultData[i].time, AQI: this.defaultData[i].AQI, compositeIndex: this.defaultData[i].compositeIndex, PM2_5: this.defaultData[i].PM2_5, PM10: this.defaultData[i].PM10, SO2: this.defaultData[i].SO2, NO2: this.defaultData[i].NO2, CO: this.defaultData[i].CO, O3: this.defaultData[i].O3 })
|
// }
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
}, // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped lang="scss">
|
.topSelect {
|
display: flex;
|
margin-bottom: 20px;
|
padding: 20px 15px 0 15px;
|
// display: flex;
|
// justify-content: space-between;
|
// 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;
|
}
|
.select11 {
|
width: 20% !important;
|
}
|
/deep/.el-table thead.is-group th {
|
background-color: white;
|
}
|
</style>
|
