87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
<template>
|
|
<div class="atmospheric-module">
|
|
<peak-secondary-title :title="title"/>
|
|
<div class="_tab">
|
|
<div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
|
|
@click="tabChange(item.value)">{{ item.label }}
|
|
</div>
|
|
</div>
|
|
<div class="charts-info">
|
|
<peak-air-quality v-if="activeTab === 1"/>
|
|
<changes-pollutants v-if="activeTab === 2"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
|
import ChangesPollutants from "@/components/peak-coal-monitoring/ChangesPollutants";
|
|
import PeakAirQuality from "@/components/peak-coal-monitoring/PeakAirQuality";
|
|
|
|
export default {
|
|
name: "AtmosphericModule",
|
|
components: {PeakAirQuality, ChangesPollutants, PeakSecondaryTitle},
|
|
data() {
|
|
return {
|
|
title: '大气质量信息总览',
|
|
tabList: [
|
|
{
|
|
label: '空气质量指数',
|
|
value: 1
|
|
},
|
|
{
|
|
label: '重要污染物变化趋势',
|
|
value: 2
|
|
}
|
|
],
|
|
activeTab: 1
|
|
}
|
|
},
|
|
methods: {
|
|
tabChange(val) {
|
|
this.activeTab = val
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "../../assets/styles/mixin";
|
|
|
|
.atmospheric-module {
|
|
height: 100%;
|
|
width: 100%;
|
|
.flex-column;
|
|
|
|
._tab {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
height: 30px;
|
|
.flex-row;
|
|
|
|
.tab-item {
|
|
width: 50%;
|
|
height: 100%;
|
|
font-family: MicrosoftYaHei-Bold;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.50);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active-tab {
|
|
background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.charts-info {
|
|
flex: 1;
|
|
height: 0;
|
|
}
|
|
}
|
|
</style>
|