183 lines
3.7 KiB
Vue
183 lines
3.7 KiB
Vue
<!--首要污染物变化趋势-->
|
|
<template>
|
|
<div class="pollutant-trends">
|
|
<secondary-title :title="title"/>
|
|
<div class="pollutant-type-list">
|
|
<div class="pollutant-type" v-for="item of pollutantTypeList" :class="activeTab === item.value? 'active-tab':''"
|
|
@click="tabChange(item.value)">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
<div class="trend-charts">
|
|
<pollutant-trend-charts :data-source="pollutantTrendsDataSource"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PollutantTrendCharts from "@/components/charts/PollutantTrendCharts";
|
|
|
|
export default {
|
|
name: "PollutantTrends",
|
|
components: {PollutantTrendCharts},
|
|
data() {
|
|
return {
|
|
title: '首要污染物变化趋势',
|
|
pollutantTypeList: [
|
|
{
|
|
name: '一氧化碳',
|
|
value: '1'
|
|
},
|
|
{
|
|
name: '二氧化碳',
|
|
value: '2'
|
|
},
|
|
{
|
|
name: '氮氧化物',
|
|
value: '3'
|
|
},
|
|
{
|
|
name: '臭氧',
|
|
value: '4'
|
|
},
|
|
{
|
|
name: 'PM10',
|
|
value: '5'
|
|
},
|
|
{
|
|
name: 'PM2.5',
|
|
value: '6'
|
|
}
|
|
],
|
|
activeTab: '1',
|
|
pollutantTrendsDataSource: [
|
|
{
|
|
name: '1',
|
|
value: 3,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '2',
|
|
value: 4,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '3',
|
|
value: 1,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '4',
|
|
value: 4,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '5',
|
|
value: 6,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '6',
|
|
value: 1,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '7',
|
|
value: 8,
|
|
attr: '2021'
|
|
},
|
|
{
|
|
name: '1',
|
|
value: 1,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '2',
|
|
value: 4,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '3',
|
|
value: 7,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '4',
|
|
value: 8,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '5',
|
|
value: 2,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '6',
|
|
value: 7,
|
|
attr: '2022'
|
|
},
|
|
{
|
|
name: '7',
|
|
value: 1,
|
|
attr: '2022'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
tabChange(val) {
|
|
this.activeTab = val
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "assets/styles/mixin";
|
|
|
|
.pollutant-trends {
|
|
width: 100%;
|
|
height: 601px;
|
|
background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
|
|
/* border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
|
|
border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); !* 使用线性渐变作为边框图片 *!
|
|
border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
|
|
.flex-column;
|
|
|
|
.pollutant-type-list {
|
|
padding: 0 50px;
|
|
height: 100px;
|
|
.flex-row;
|
|
justify-content: space-between;
|
|
|
|
.pollutant-type {
|
|
width: 144px;
|
|
height: 59px;
|
|
.bg("~/assets/peakCoalImages/left/pollutant-type-default-bg.png");
|
|
font-family: MicrosoftYaHei;
|
|
font-size: 29.97px;
|
|
color: rgba(216, 240, 255, 0.50);
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
line-height: 59px;
|
|
text-shadow: 0 0 11px #0091FF;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active-tab {
|
|
.bg("~/assets/peakCoalImages/left/pollutant-type-active-bg.png");
|
|
color: #D8F0FF;
|
|
text-shadow: 0 0 33px #0091FF;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.trend-charts {
|
|
flex: 1;
|
|
height: 0;
|
|
|
|
}
|
|
}
|
|
</style>
|