<template>
|
<div style="width:100%">
|
<div class="topSelect">
|
<el-date-picker
|
v-model="dateValue"
|
:picker-options="pickerOptions"
|
type="date"
|
placeholder="选择日期"
|
value-format="yyyy-MM-dd"
|
/>
|
<el-select v-model="value" multiple collapse-tags placeholder="请选择国控站点">
|
<el-option
|
v-for="item in options"
|
:key="item.id"
|
:label="item.name"
|
:value="item.guid"
|
/>
|
</el-select>
|
<el-button type="primary" style="position: relative;left: 80px" @click="queryHourData()">查询</el-button>
|
<el-button type="primary" style="float: right" @click="setExport2Excel()">报表导出</el-button>
|
</div>
|
<div class="topTitle">
|
<!-- <button @click="setExport2Excel">导出</button>-->
|
<el-table
|
:id="'mytable'"
|
:data="tableData"
|
:row-style="{padding: '1px'}"
|
:header-cell-style="{padding: '6px'}"
|
:cell-style="{padding: '0.5px'}"
|
:cell-class-name="tableCellClassName"
|
>
|
<el-table-column v-if="govMtC.length > 0" :label="this.title" align="center" height="30" style="height: 30px">
|
<el-table-column label="" align="center" style="height: 30px">
|
<el-table-column
|
prop="time"
|
label="时间"
|
width="60%"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column v-for="(item1, key1) in govMtC" :key="key1" :label="item1.name" align="center">
|
<el-table-column
|
v-for="(item , key,index) in sensorArr"
|
:key="index"
|
align="center"
|
:prop="item.code+'_'+item1.id"
|
:label="item.name"
|
width="60"
|
height="30"
|
/>
|
</el-table-column>
|
<el-table-column
|
v-if="govMtC.length > 0"
|
prop="aqi"
|
label="AQI"
|
width="60%"
|
align="center"
|
/>
|
<el-table-column
|
v-if="govMtC.length > 0"
|
prop="pollutant"
|
label="首要污染物"
|
width="100%"
|
align="center"
|
/>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getToken } from '@/utils/auth'
|
import XLSX2 from 'xlsx'
|
import XLSX from 'xlsx-style'
|
export default {
|
data() {
|
return {
|
tableData: [],
|
govMt: [],
|
value: [], // 绑定多选下拉框数据
|
dateValue: '', // 绑定日期数据
|
pickerOptions: {
|
disabledDate(time) {
|
return time.getTime() > Date.now()
|
}
|
},
|
options: [],
|
sensorArr: [
|
{ code: 'a34004', name: 'PM2.5' },
|
{ code: 'a34002', name: 'PM10' },
|
{ code: 'a21026', name: 'SO2' },
|
{ code: 'a21004', name: 'NO2' },
|
{ code: 'a21005', name: 'CO' },
|
{ code: 'a05024', name: 'O3_1h' },
|
{ code: 'O3_8h', name: 'O3_8h' }
|
],
|
aqi: { code: 'aqi', name: 'AQI' },
|
// 因子报警区间
|
levelSensor: {
|
'a34004': [35, 75, 115, 150, 250],
|
'a34002': [50, 150, 250, 350, 420],
|
'a21026': [150, 500, 650, 800, 1600],
|
'a21004': [100, 200, 700, 1200, 2340],
|
'a21005': [5, 10, 35, 60, 90],
|
'a05024': [160, 200, 300, 400, 800],
|
'O3': [100, 160, 215, 265, 800],
|
'aqi': [50, 100, 150, 200, 300]
|
},
|
// 标题
|
title: ''
|
}
|
},
|
computed: {
|
govMtC() {
|
let name = 'c'
|
const newResults = []
|
this.govMt.forEach(data => {
|
let showData = false
|
if (name !== data.name) {
|
showData = true
|
} else {
|
}
|
let map = {}
|
map = { id: data.id, name: data.name, showData: showData }
|
newResults.push(map)
|
name = data.name
|
})
|
return newResults
|
}
|
},
|
created() {
|
this.getGovData()
|
},
|
methods: {
|
// 判断因子报警区间
|
judgeSensorArr(code) {
|
if (code === 'a34004') {
|
this.levelSensor = [35, 75, 115, 150, 250]
|
} else if (code === 'a34002') {
|
this.levelSensor = [50, 150, 250, 350, 420]
|
} else if (code === 'a21026') {
|
this.levelSensor = [150, 500, 650, 800, 1600]
|
} else if (code === 'a21004') {
|
this.levelSensor = [100, 200, 700, 1200, 2340]
|
} else if (code === 'a21005') {
|
this.levelSensor = [5, 10, 35, 60, 90]
|
} else if (code === 'a05024') {
|
this.levelSensor = [160, 200, 300, 400, 800]
|
} else if (code === 'O3') {
|
this.levelSensor = [100, 160, 215, 265, 800]
|
} else if (code === 'aqi') {
|
this.levelSensor = [50, 100, 150, 200, 300]
|
}
|
},
|
// 单元格样式
|
tableCellClassName({ row, column, rowIndex, columnIndex }) {
|
for (const key in row) {
|
if (key.indexOf('_') !== -1) {
|
if (key === column.property) {
|
const code = column.property.split('_')[0]
|
// this.judgeSensorArr(code)
|
if (row[key] === 0 || row[key] === '' || row[key] === null) {
|
return ''
|
} else if (row[key] <= this.levelSensor[code][0]) {
|
return 'green'
|
} else if (row[key] <= this.levelSensor[code][1]) {
|
return 'yellow'
|
} else if (row[key] <= this.levelSensor[code][2]) {
|
return 'orange'
|
} else if (row[key] <= this.levelSensor[code][3]) {
|
return 'red'
|
} else if (row[key] <= this.levelSensor[code][4]) {
|
return 'oRed'
|
} else {
|
return 'violet'
|
}
|
}
|
} else if (key === 'aqi') {
|
if (key === column.property) {
|
if (row[key] === 0 || row[key] === '' || row[key] === null) {
|
return ''
|
} else if (row[key] <= 50) {
|
return 'green'
|
} else if (row[key] <= 100) {
|
return 'yellow'
|
} else if (row[key] <= 150) {
|
return 'orange'
|
} else if (row[key] <= 200) {
|
return 'red'
|
} else if (row[key] <= 300) {
|
return 'oRed'
|
} else {
|
return 'violet'
|
}
|
}
|
}
|
}
|
return ''
|
},
|
|
// 获取小时数据
|
queryHourData() {
|
let guids = ''
|
for (let i = 0; i < this.value.length; i++) {
|
if (i !== this.value.length - 1) {
|
guids = guids + '' + this.value[i] + ','
|
} else {
|
guids = guids + '' + this.value[i]
|
}
|
}
|
if (this.dateValue === '') {
|
this.$message.warning('请选择时间')
|
return
|
}
|
if (guids === '') {
|
this.$message.warning('请选择国控站点')
|
return
|
}
|
this.$axios.get('govMonitorPoint/queryGovMonitorPointHourlyDataByGuidsAndOrgid', {
|
headers: { 'token': getToken() },
|
params: {
|
organization_id: this.$store.state.orgId,
|
guids: guids,
|
date: this.dateValue
|
}
|
}).then(res => {
|
if (res.data.code === 0) {
|
if (res.data.data.govMonitorPoint.length > 0) {
|
this.govMt = res.data.data.govMonitorPoint
|
let title = ''
|
if (this.govMt.length > 1) {
|
for (let i = 0; i < this.govMt.length - 1; i++) {
|
if (i !== this.govMt.length - 2) {
|
title = title + '' + this.govMt[i].name + '、'
|
} else {
|
title = title + '' + this.govMt[i].name
|
}
|
}
|
}
|
this.title = this.dateValue + '日 ' + title + ' 六因子浓度小时播报'
|
this.tableData = res.data.data.data
|
} else {
|
this.$message.warning('所选站点改时间无数据！')
|
}
|
}
|
})
|
},
|
// 获取组织下国控省控县控站点数据
|
getGovData() {
|
this.$axios.get('govMonitorPoint/getGovMonitorPointsByOrgId', {
|
headers: { 'token': getToken() },
|
params: {
|
organization_id: this.$store.state.orgId
|
}
|
})
|
.then((response) => {
|
if (response.data.code === 0) {
|
this.options = response.data.data
|
}
|
})
|
},
|
// 报表导出
|
setExport2Excel() {
|
/* generate workbook object from table */
|
var wb = XLSX2.utils.table_to_sheet(document.querySelector('#mytable'))// mytable为表格的id名
|
if (!wb['!merges']) {
|
this.$message.warning('无法导出：报表无数据')
|
return
|
}
|
const sum = 1 + this.govMt.length * 7 + 2 // 列的数量
|
for (var i = 0; i < sum; i++) {
|
if (i === sum - 1) {
|
wb['!cols'][i] = { wpx: 120 } // 设置列宽
|
} else {
|
wb['!cols'][i] = { wpx: 60 }
|
}
|
}
|
// 样式的文档地址
|
// https://www.npmjs.com/package/xlsx-style
|
const list = []
|
for (const key in wb) {
|
if (key.indexOf('!') === -1) {
|
wb[key].s = {
|
font: {// 字体设置
|
sz: 13,
|
bold: false,
|
color: {
|
rgb: '000000'// 十六进制，不带#
|
}
|
},
|
border: { // 设置边框
|
top: { style: 'thin' },
|
bottom: { style: 'thin' },
|
left: { style: 'thin' },
|
right: { style: 'thin' }
|
},
|
alignment: {// 文字居中
|
horizontal: 'center',
|
vertical: 'center',
|
wrap_text: true
|
}
|
}
|
var num = key.replace(/[^0-9]/ig, '')
|
if (num === '3') {
|
const map = {}
|
for (let i = 0; i < this.sensorArr.length; i++) {
|
if (this.sensorArr[i].name === wb[key].v) {
|
var b = key.replace(/[^a-z]+/ig, '')
|
map.key = b
|
map.code = this.sensorArr[i].code
|
break
|
}
|
}
|
if (map.key) {
|
list.push(map)
|
}
|
} else if (num === '1') {
|
// if (wb[key].v === '首要污染物') {
|
//
|
// }
|
const map = {}
|
if (this.aqi.name === wb[key].v) {
|
var b = key.replace(/[^a-z]+/ig, '')
|
map.key = b
|
map.code = this.aqi.code
|
}
|
if (map.key) {
|
list.push(map)
|
}
|
}
|
}
|
}
|
|
for (const key in wb) {
|
var b = key.replace(/[^a-z]+/ig, '')
|
for (let i = 0; i < list.length; i++) {
|
if (b === list[i].key) {
|
if (typeof wb[key].v === 'number') {
|
if (wb[key].v <= this.levelSensor['aqi'][0]) {
|
wb[key].s.fill = {
|
fgColor: { rgb: '65dd77' }
|
}
|
} else if (wb[key].v <= this.levelSensor['aqi'][1]) {
|
wb[key].s.fill = {
|
fgColor: { rgb: 'fcdf56' }
|
}
|
} else if (wb[key].v <= this.levelSensor['aqi'][2]) {
|
wb[key].s.fill = {
|
fgColor: { rgb: 'fd7c43' }
|
}
|
} else if (wb[key].v <= this.levelSensor['aqi'][3]) {
|
wb[key].s.fill = {
|
fgColor: { rgb: 'fc5656' }
|
}
|
} else if (wb[key].v <= this.levelSensor['aqi'][4]) {
|
wb[key].s.fill = {
|
fgColor: { rgb: 'fc5689' }
|
}
|
} else {
|
wb[key].s.fill = {
|
fgColor: { rgb: 'cd3a3a' }
|
}
|
}
|
}
|
}
|
}
|
}
|
var data = this.addRangeBorder(wb['!merges'], wb) // 合并项添加边框
|
var filedata = this.sheet2blob(data)
|
this.openDownloadDialog(filedata, this.title + '-数据报表.xlsx')
|
},
|
// 为合并项添加边框
|
addRangeBorder(range, ws) {
|
const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
|
|
range.forEach(item => {
|
const startColNumber = Number(item.s.r); const endColNumber = Number(item.e.r)
|
const startRowNumber = Number(item.s.c); const endRowNumber = Number(item.e.c)
|
const test = ws[arr[startRowNumber] + (startColNumber + 1)]
|
for (let col = startColNumber; col <= endColNumber; col++) {
|
for (let row = startRowNumber; row <= endRowNumber; row++) {
|
ws[arr[row] + (col + 1)] = test
|
}
|
}
|
})
|
return ws
|
},
|
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
|
sheet2blob(sheet, sheetName) {
|
sheetName = sheetName || 'sheet1'
|
var workbook = {
|
SheetNames: [sheetName],
|
Sheets: {}
|
}
|
workbook.Sheets[sheetName] = sheet // 生成excel的配置项
|
|
var wopts = {
|
bookType: 'xlsx', // 要生成的文件类型
|
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
|
type: 'binary'
|
}
|
var wbout = XLSX.write(workbook, wopts)
|
var blob = new Blob([s2ab(wbout)], {
|
type: 'application/octet-stream'
|
}) // 字符串转ArrayBuffer
|
function s2ab(s) {
|
var buf = new ArrayBuffer(s.length)
|
var view = new Uint8Array(buf)
|
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
|
return buf
|
}
|
return blob
|
},
|
openDownloadDialog(url, saveName) {
|
if (typeof url === 'object' && url instanceof Blob) {
|
url = URL.createObjectURL(url) // 创建blob地址
|
}
|
var aLink = document.createElement('a')
|
aLink.href = url
|
aLink.download = saveName || '' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
|
var event
|
if (window.MouseEvent) event = new MouseEvent('click')
|
else {
|
event = document.createEvent('MouseEvents')
|
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
|
}
|
aLink.dispatchEvent(event)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.topSelect{
|
margin-bottom: 20px;
|
padding: 20px 15px 0 15px;
|
|
// div:last-child{
|
// width: 300px;
|
// line-height: 40px;
|
// padding-left: 6px;
|
// }
|
}
|
.el-date-editor{
|
float: left;
|
}
|
.el-select{
|
float: left;
|
left: 40px;
|
}
|
|
.topTitle{
|
width: 100%;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
padding: 10px 15px;
|
}
|
.timeClass {
|
float: left;
|
width: 4%;
|
border-collapse: collapse;/*关键代码*/
|
text-align: center;
|
color: black;
|
font-weight: 700;
|
}
|
///deep/.el-table .cell {
|
// white-space: nowrap;
|
// width: fit-content;
|
//}
|
|
/deep/.el-table th>.cell {
|
font-size: 14px;
|
padding: 0;
|
}
|
/deep/.gutter {
|
display: none;
|
}
|
|
/deep/.green{
|
background: #65dd77!important;
|
}
|
/deep/.yellow{
|
background-color: #fcdf56!important;
|
}
|
/deep/.orange{
|
background-color: #fd7c43!important;
|
}
|
/deep/.red{
|
background-color: #fc5656!important;
|
color: #620000;
|
}
|
/deep/.oRed{
|
background-color: #fc5689!important;
|
}
|
/deep/.violet{
|
background-color: #cd3a3a!important;
|
}
|
|
</style>
|
