<template>
|
<div class="topChangeAnalysis">
|
<div style="display:flex;height:60px;padding: 20px 15px 0px 15px;">
|
<MouthPicker
|
:value1="currentDate"
|
style="padding-left:0;margin-left:10px;width:160px"
|
@sendPickerChild="showPickerChild"
|
/>
|
<RegionCityCX style="margin-left:10px" @regionCode="regionData" />
|
|
<el-button style="margin-left:200px" type="primary" @click="getData">查询</el-button>
|
<el-button style="margin-left:20px" type="primary" @click="exportData">导出</el-button>
|
</div>
|
<div class="content" style="margin:30px 15px 20px 20px ">
|
<!-- 在vue中操作dom元素，必须使用ref属性进行注册 -->
|
<el-table
|
:id="'mytable'"
|
:data="tableData"
|
border
|
:cell-style="columnStyle"
|
:header-cell-style="headerColumnStyle"
|
>
|
<el-table-column
|
v-for="(item,index) in tableColumnHeader"
|
:key="index"
|
:label="item.headerColumn"
|
:prop="item.title"
|
/>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import MouthPicker from '@/components/Form/MouthPicker1'
|
|
import RegionCityCX from '@/components/Cascader/regionCityCX'
|
import XLSX2 from 'xlsx'
|
import XLSX from 'xlsx-style'
|
export default {
|
components: {
|
MouthPicker,
|
RegionCityCX
|
},
|
data() {
|
return {
|
regionDefault: this.$store.state.regionCode,
|
currentDate: '',
|
tableData: [],
|
tableColumnHeader: [],
|
cityName: ''
|
}
|
},
|
|
created() {
|
this.currentYear()
|
// this.getData()
|
},
|
methods: {
|
// table列头背景色，居中
|
headerColumnStyle({ row, column, rowIndex, columnIndex }) {
|
return 'background:#EAEAEA;text-align:center'
|
},
|
// 列居中
|
columnStyle({ row, column, rowIndex, columnIndex }) {
|
let str = ''
|
let style = ''
|
|
if (columnIndex === 2) {
|
if (row.percent !== null) {
|
// substr(0,1) 截取字符串，从0开始，截取1位
|
if ((str = row.percent.substr(0, 1))) {
|
switch (str) {
|
case '+':
|
style = 'color:red;font-weight:bold;'
|
break
|
case '-':
|
style = 'color:green;font-weight:bold;'
|
break
|
}
|
}
|
// 优良天数，是+值，显示绿色,跟其他因子相反 ，从后往前截取，判断是 天。
|
if ((str = row.percent.substr(-1, 1) === '天')) {
|
style = 'color:green;font-weight:bold;'
|
}
|
}
|
}
|
|
return style + 'font-family:微软雅黑;text-align:center;'
|
},
|
|
// 获取表格列头
|
getTableColumnHeader() {
|
this.tableColumnHeader = [
|
{
|
headerColumn: '项目',
|
title: 'title'
|
},
|
{
|
headerColumn: this.cityName,
|
title: 'concentration'
|
},
|
{
|
headerColumn: '同比',
|
title: 'percent'
|
},
|
{
|
headerColumn: '全省排名',
|
title: 'provinceRange'
|
},
|
{
|
headerColumn: '2+26城市排名',
|
title: 'twentyEightCitiesRange'
|
},
|
{
|
headerColumn: '省内通道城市排名',
|
title: 'provinceChannelRange'
|
}
|
]
|
},
|
|
// 获得子组件时间选择器传递的数据
|
showPickerChild(data) {
|
if (typeof data === Array) {
|
this.currentTimeD = data
|
} else {
|
this.currentYearD = data
|
}
|
this.currentDate = data
|
},
|
|
// 查询数据
|
getData() {
|
// console.log(this.currentDate);
|
this.$request({
|
url: 'aqi/queryPollutionLevelAnalysis',
|
methods: 'get',
|
params: {
|
year: this.currentDate,
|
cityCode: this.regionDefault
|
}
|
}).then(res => {
|
// 每次请求，清空表格数据
|
this.tableData = []
|
// console.log(Object.keys(res.data)) //获取数组的键
|
const tableDataAdd = Object.keys(res.data).map(item => {
|
const obj = res.data[item]
|
if (item === 'fineDays') {
|
obj.title = '优良天数'
|
} else if (item === 'compositeIndex') {
|
obj.title = '综合指数'
|
} else if (item === 'PM2_5') {
|
obj.title = 'PM2.5'
|
} else {
|
obj.title = item
|
}
|
return obj
|
})
|
tableDataAdd.sort(function(a, b) {
|
const sortarr = [
|
'优良天数',
|
'PM2.5',
|
'PM10',
|
'NO2',
|
'SO2',
|
'CO',
|
'O3',
|
'综合指数'
|
] // 按照指定顺序排序
|
return sortarr.indexOf(a['title']) - sortarr.indexOf(b['title'])
|
})
|
this.tableData = tableDataAdd
|
})
|
},
|
|
// 导出数据
|
exportData() {
|
var wb = XLSX2.utils.table_to_sheet(document.querySelector('#mytable'))
|
|
// 设置excel列宽
|
const sum = 6 // 共6列
|
for (var i = 0; i < sum; i++) {
|
wb['!cols'][i] = {
|
wpx: 130 // 设置列宽
|
}
|
}
|
const list = [] // 存入列头，对应位置，
|
// 表格导出样式
|
|
for (const key in wb) {
|
let fontColor = {
|
sz: 13,
|
bold: false,
|
color: {
|
rgb: '000000' // 十六进制，不带#
|
}
|
}
|
// 判断是C1 是同比，不用改颜色，C2是+ 绿色，-红色，0天，无
|
// 其他 是C的列，-是绿色，+ 是红色。 0是无
|
// 判断是否存在！，不存在返回-1 ，增加样式。
|
if (key.indexOf('!') === -1) {
|
if (key.indexOf('C') !== -1) {
|
if (key === 'C2') {
|
if (wb[key].v.toString().substr(0, 1) === '+') {
|
fontColor = {
|
sz: 13,
|
bold: false,
|
color: {
|
rgb: '65dd77' // 十六进制，不带#
|
}
|
}
|
} else if (wb[key].v.toString().substr(0, 1) === '-') {
|
fontColor = {
|
sz: 13,
|
bold: false,
|
color: {
|
rgb: 'CD3A3A' // 十六进制，不带#
|
}
|
}
|
}
|
} else {
|
if (wb[key].v.toString().substr(0, 1) === '+') {
|
fontColor = {
|
sz: 13,
|
bold: false,
|
color: {
|
rgb: 'CD3A3A' // 十六进制，不带#
|
}
|
}
|
} else if (wb[key].v.toString().substr(0, 1) === '-') {
|
fontColor = {
|
sz: 13,
|
bold: false,
|
color: {
|
rgb: '65dd77' // 十六进制，不带#
|
}
|
}
|
}
|
}
|
}
|
|
wb[key].s = {
|
font: fontColor,
|
border: {
|
// 边框设置
|
top: { style: 'thin' },
|
bottom: { style: 'thin' },
|
left: { style: 'thin' },
|
right: { style: 'thin' }
|
},
|
alignment: {
|
// 文字居中
|
horizontal: 'center',
|
vertical: 'center',
|
wrap_text: true
|
}
|
}
|
}
|
|
// 正则 /ig 全文查找，忽略大小写, [^0-9] 匹配任何不在0-9内的字符串
|
var num = key.replace(/[^0-9]/gi, '') // 拿到所有是1的列头
|
// console.log(num);
|
if (num === '1') {
|
const map = {} // 拿到列头对象
|
for (let i = 0; i < this.tableColumnHeader.length; i++) {
|
if (this.tableColumnHeader[i].headerColumn === wb[key].v) {
|
var b = key.replace(/[^a-z]+/gi, '')
|
map.key = b // 代表excel中的列A\B\C\D\E
|
map.code = this.tableColumnHeader[i].headerColumn // 列头名
|
break
|
}
|
}
|
// 列头对象存入数组
|
if (map.key) {
|
list.push(map)
|
}
|
}
|
}
|
// console.log(wb)
|
const excelTitle =
|
this.currentDate + this.cityName + '优良天变化率分析数据导出.xlsx'
|
var filedata = this.sheet2blob(wb)
|
this.openDownloadDialog(filedata, excelTitle)
|
},
|
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'
|
})
|
|
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) {
|
// 判断url是否属于blob，返回true或false
|
if (typeof url === 'object' && url instanceof Blob) {
|
url = URL.createObjectURL(url) // 创建blob地址
|
}
|
var aLink = document.createElement('a')
|
aLink.href = url
|
aLink.download = saveName || '' // html5新增的属性，制定保存文件名
|
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)
|
},
|
|
// 获得地区级联选择器的返回值
|
regionData(data) {
|
this.regionDefault = data[0]
|
this.cityName = data[1]
|
|
// 每次查询清空table列头
|
this.tableColumnHeader = []
|
this.getTableColumnHeader()
|
},
|
|
// 当前年份默认值
|
currentYear() {
|
var aData = new Date()
|
var currentDate = aData.getFullYear()
|
this.currentDate = currentDate.toString()
|
}
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
