<template>
|
<div class="calendar">
|
<!-- 切换城市框，改成模糊查询框 -->
|
<div class="calendar_top">
|
<RegionCity :region-default-show="regionDefault" @regionCode="regionData" />
|
<el-radio-group v-model="selectSensor" size="medium" :style="{marginLeft: '20px'}" @change="turnSensor">
|
<el-radio-button v-for="(item, key, index) in sensorO" :key="index" :label="key" />
|
</el-radio-group>
|
</div>
|
<div class="calendar_year">
|
<ul class="calendar_year_ul">
|
<li v-for="(item, index) in years" :key="index" class="year_text" :class="{activeYear: index === yIndex}"><span @click="turnYear($event, index)">{{ item }}</span></li>
|
</ul>
|
</div>
|
|
<div class="calendar_main">
|
<calendar
|
v-for="item in dates"
|
ref="myCalendar"
|
:key="item"
|
style="width: 260px;height: 300px"
|
:date-month="item"
|
:data-values="dataValues['' + item ] === undefined || dataValues[item] === null ? {} : dataValues[item]"
|
:select-sensor="sensorO[selectSensor]"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Calendar from '@/components/charts/Calendar'
|
import RegionCity from '@/components/Cascader/regionCity'
|
export default {
|
components: { Calendar, RegionCity },
|
data() {
|
return {
|
regionDefault: '',
|
i: 0, // 用于判断是否为第一次点击年份
|
ulWidth: 0,
|
yIndex: 0, // 年下标
|
interval: 0, // 存放初始步长
|
preInterval: 0, // 步长
|
dates: [],
|
years: [],
|
dataValues: {},
|
selectSensor: 'AQI',
|
sensorO: {
|
AQI: 'AQI',
|
'PM2.5': 'PM2_5',
|
PM10: 'PM10',
|
CO: 'CO',
|
NO2: 'NO2',
|
SO2: 'SO2',
|
O3_8H: 'O3'
|
}
|
}
|
},
|
watch: {
|
regionDefault() {
|
this.dates = []
|
this.monthByYear(this.years[this.yIndex])
|
}
|
},
|
created() {
|
const year = new Date().getFullYear()
|
this.years.push(year)
|
if (this.years.length > 0) {
|
for (let i = 1; i < 5; i++) {
|
this.years.unshift(year - i)
|
this.years.push(year + i)
|
}
|
}
|
this.regionDefault = Number(this.$store.state.regionCode.toString().substr(0, 4) + '00')
|
this.yIndex = this.years.indexOf(year)
|
this.monthByYear(year)
|
// this.ulWidth = document.getElementsByClassName('calendar_year')[0]
|
},
|
mounted() {
|
const ulNode = document.getElementsByClassName('calendar_year_ul')[0]
|
const liNode = document.getElementsByClassName('year_text')[0]
|
this.interval = 2 - this.yIndex // 确保当前年份处于中间
|
const thisIntervalPx = liNode.offsetWidth * (this.interval)
|
ulNode.style.cssText = 'transform: translateX(' + thisIntervalPx + 'px); transition-duration:1s;'
|
},
|
methods: {
|
// 根据年份生成月
|
monthByYear(year) {
|
for (let i = 1; i <= 12; i++) {
|
this.dates.push(year + '-' + (i < 10 ? '0' + i : i))
|
}
|
this.getYearData(year)
|
},
|
// 更改年份
|
turnYear(e, index) {
|
if (this.yIndex !== index) {
|
this.selectSensor = 'AQI'
|
this.dates = []
|
this.monthByYear(this.years[index])
|
}
|
|
// 获取节点距离浏览器视口的宽度
|
const ulNode = document.getElementsByClassName('calendar_year_ul')[0]
|
const li = e.target.parentNode
|
const widthOfLi = li.offsetWidth
|
let interval = this.yIndex - index
|
if ((index <= 2 && this.yIndex <= 2) || this.yIndex === index) {
|
this.yIndex = index
|
return
|
} else if (index >= this.years.length - 3 && this.yIndex >= this.years.length - 3) {
|
this.yIndex = index
|
return
|
} else {
|
if (this.yIndex >= this.years.length - 3 && index < this.years.length - 3) {
|
if (this.yIndex === this.years.length - 1) {
|
interval = interval - 2
|
} else if (this.yIndex === this.years.length - 2) {
|
interval = interval - 1
|
}
|
}
|
if (this.yIndex < this.years.length - 3 && index >= this.years.length - 3) {
|
if (index === this.years.length - 2) {
|
interval = -1
|
}
|
}
|
if (this.yIndex <= 2 && index > 2) {
|
if (this.yIndex === 0) {
|
interval = interval + 2
|
} else if (this.yIndex === 1) {
|
interval = interval + 1
|
}
|
}
|
if (this.yIndex > 2 && index <= 2) {
|
if (index === 1) {
|
interval = 1
|
}
|
}
|
this.yIndex = index
|
if (this.i === 0) {
|
interval = interval + this.interval
|
}
|
this.i++
|
const thisIntervalPx = this.preInterval + (widthOfLi * (interval))
|
ulNode.style.cssText = 'transform: translateX(' + thisIntervalPx + 'px); transition-duration:1s;'
|
this.preInterval = thisIntervalPx
|
}
|
// const yearList = document.getElementsByClassName('year_text')
|
},
|
// 获取一年数据
|
getYearData(year) {
|
this.$request({
|
url: '/cityAqiDaily/oneYearsData',
|
method: 'get',
|
params: {
|
cityCode: this.regionDefault,
|
year: year
|
}
|
}).then((response) => {
|
if (response.code === 0) {
|
// const timeValue = Object.values(response.data)
|
// const obj = timeValue.reduce((prev, cur, index, arr) => {
|
// return Object.assign(prev, cur)
|
// }, {})
|
this.dataValues = response.data
|
}
|
})
|
},
|
// 切换因子
|
turnSensor() {
|
},
|
// 获得地区级联选择器的返回值
|
regionData(data) {
|
this.regionDefault = data
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.calendar {
|
padding: 25px 20px 0;
|
}
|
.calendar_top {
|
width: 100%;
|
display: flex;
|
}
|
.calendar_year {
|
box-sizing: border-box;
|
padding: 0;
|
width: 100%;
|
background-color: #EAF4FE;
|
margin-top: 20px;
|
height: 40px;
|
font-size: 20px;
|
font-weight: 500;
|
//display: flex;
|
color: #A9AFB5;
|
white-space:nowrap;
|
letter-spacing: -8px;
|
overflow: hidden;
|
border-radius: 20px;
|
//justify-content: space-around;
|
.calendar_year_ul {
|
padding: 0;
|
margin: 0;
|
height: 40px;
|
line-height: 40px;
|
.year_text {
|
outline: none;
|
text-align: center;
|
display: inline-block;
|
list-style-type: none;
|
letter-spacing: normal;
|
margin: 0px;
|
width: 20%;
|
padding: 0;
|
span {
|
cursor: pointer;
|
}
|
}
|
}
|
|
}
|
calendar_year::-webkit-scrollbar {
|
//display: none;
|
}
|
.calendar_main{
|
width: 100%;
|
position: absolute;
|
height: calc(100% - 200px);
|
display: flex;
|
flex-wrap: wrap;
|
justify-content:space-around;
|
margin: 20px auto;
|
padding-right: 125px;
|
overflow: hidden scroll;
|
}
|
//@media screen and (min-width: 1080px) {
|
// .calendar_main { overflow-y: scroll;}
|
//}
|
.activeYear {
|
color: #409eff;
|
}
|
</style>
|
