<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:100px" type="primary" @click="getData">查询</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 label="月份" prop="month" />
|
<el-table-column label="AQI达标天数">
|
<el-table-column label="天数" prop="aqiComplianceDays" />
|
<el-table-column label="同期" prop="comAqiComplianceDays" />
|
</el-table-column>
|
<el-table-column label="AQI达标率">
|
<el-table-column label="达标率" prop="aqiCompliancePer" />
|
<el-table-column label="同期" prop="comAqiCompliancePer" />
|
</el-table-column>
|
<el-table-column label="污染物超标天数">
|
<el-table-column label="PM2.5" prop="PM2_5Days" />
|
<el-table-column label="PM10" prop="PM10Days" />
|
<el-table-column label="SO2" prop="SO2Days" />
|
<el-table-column label="NO2" prop="NO2Days" />
|
<el-table-column label="CO" prop="CODays" />
|
<el-table-column label="03" prop="O3Days" />
|
</el-table-column>
|
<el-table-column label="首要污染物天数">
|
<el-table-column label="PM2.5" prop="PM2_5FirstDays" />
|
<el-table-column label="PM10" prop="PM10FirstDays" />
|
<el-table-column label="SO2" prop="SO2FirstDays" />
|
<el-table-column label="NO2" prop="NO2FirstDays" />
|
<el-table-column label="CO" prop="COFirstDays" />
|
<el-table-column label="03" prop="O3FirstDays" />
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import MouthPicker from '@/components/Form/MouthPicker1'
|
import RegionCityCX from '@/components/Cascader/regionCityCX'
|
|
export default {
|
components: {
|
MouthPicker,
|
RegionCityCX
|
},
|
data() {
|
return {
|
regionDefault: this.$store.state.regionCode,
|
currentDate: '',
|
tableData: []
|
}
|
},
|
|
created() {
|
this.currentYear()
|
},
|
methods: {
|
// table列头背景色，居中
|
headerColumnStyle({ row, column, rowIndex, columnIndex }) {
|
return 'background:#EAEAEA;text-align:center;border-color: #D3D3D3'
|
},
|
|
// 列居中
|
columnStyle({ row, column, rowIndex, columnIndex }) {
|
let str = ''
|
let style = ''
|
for (const key in row) {
|
if (key === column.property) {
|
const code = column.property
|
if (
|
code !== 'month' &&
|
code !== 'aqiComplianceDays' &&
|
code !== 'comAqiComplianceDays' &&
|
code !== 'aqiCompliancePer' &&
|
code !== 'comAqiCompliancePer'
|
) {
|
const str = row[key].replace('天', '')
|
if (str !== null) {
|
if (str >= 0 && str <= 4) {
|
style = 'background:#65dd77;color:#007400'
|
} else if (str > 4 && str < 10) {
|
style = 'background:#fcdf56;color:#868600'
|
} else if (str >= 10 && str <= 14) {
|
style = 'background:#fd7c43;color:#844100'
|
} else if (str > 15 && str <= 19) {
|
style = 'background:#fc5656;color:#790000'
|
} else if (str > 19 && str <= 24) {
|
style = 'background:#fc5689;color:#14000a'
|
} else if (str > 24 && str <= 31) {
|
style = 'background:#cd3a3a;'
|
}
|
}
|
}
|
}
|
}
|
|
// aqi达标天数
|
if (columnIndex === 1 && row.aqiComplianceDays !== null) {
|
// 如果等于1， 赋值，判断，填充颜色，
|
|
str = row.aqiComplianceDays.replace('天', '')
|
style = this.getAqiDaysBackground(str)
|
}
|
if (columnIndex === 2 && row.comAqiComplianceDays !== null) {
|
str = row.comAqiComplianceDays.replace('天', '')
|
style = this.getAqiDaysBackground(str)
|
}
|
// aqi达标率
|
if (columnIndex === 3 && row.aqiCompliancePer !== null) {
|
str = row.aqiCompliancePer.replace('%', '')
|
style = this.getAqiRateBackground(str)
|
}
|
if (columnIndex === 4 && row.comAqiCompliancePer !== null) {
|
str = row.comAqiCompliancePer.replace('%', '')
|
style = this.getAqiRateBackground(str)
|
}
|
if (columnIndex > 4) {
|
}
|
return style + 'font-family:微软雅黑;text-align:center;'
|
},
|
|
// 获取aqi达标天数table背景色判定 从红到绿
|
getAqiDaysBackground(str) {
|
let style = ''
|
if (str >= 0 && str <= 4) {
|
style = 'background:#cd3a3a;'
|
} else if (str >= 5 && str <= 9) {
|
style = 'background:#fc5689;color:#14000a'
|
} else if (str >= 10 && str <= 14) {
|
style = 'background:#fc5656;color:#790000'
|
} else if (str >= 15 && str <= 19) {
|
style = 'background:#fd7c43;color:#844100'
|
} else if (str >= 20 && str <= 24) {
|
style = 'background:#fcdf56;color:#868600'
|
} else if (str >= 25 && str <= 31) {
|
style = 'background:#65dd77;color:#007400'
|
}
|
return style + 'font-weight:bold;'
|
},
|
// 获取aqi达标率table背景颜色判定 从绿到红
|
getAqiRateBackground(str) {
|
let style = ''
|
if (str >= 80 && str <= 100) {
|
style = 'background:#65dd77;color:#007400'
|
} else if (str >= 60 && str < 80) {
|
style = 'background:#fcdf56;color:#868600'
|
} else if (str >= 50 && str < 60) {
|
style = 'background:#fd7c43;color:#844100'
|
} else if (str >= 20 && str < 50) {
|
style = 'background:#fc5656;color:#790000'
|
} else if (str >= 10 && str < 20) {
|
style = 'background:#fc5689;color:#14000a'
|
} else if (str >= 0 && str < 10) {
|
style = 'background:#cd3a3a;'
|
}
|
return style + 'font-weight:bold;'
|
},
|
|
// 获得子组件时间选择器传递的数据
|
showPickerChild(data) {
|
if (typeof data === Array) {
|
this.currentTimeD = data
|
} else {
|
this.currentYearD = data
|
}
|
this.currentDate = data
|
},
|
|
// 查询数据
|
getData() {
|
this.$request({
|
url: 'aqi/queryComplianceDaysAnalysis',
|
methods: 'get',
|
params: {
|
year: this.currentDate,
|
cityCode: this.regionDefault
|
}
|
}).then(res => {
|
// 每次请求，清空表格数据
|
this.tableData = []
|
this.tableData = res.data
|
})
|
},
|
|
// 获得地区级联选择器的返回值
|
regionData(data) {
|
this.regionDefault = data[0]
|
},
|
|
// 当前年份默认值
|
currentYear() {
|
var aData = new Date()
|
var currentDate = aData.getFullYear()
|
this.currentDate = currentDate.toString()
|
}
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
