- <template>
- <div class="partTitleHM">
- 降雨特征
- <div class="head-right" style="">
- <div
- class="head-item"
- v-for="(item, index) in yearList"
- :key="item"
- :class="activedname == item.name ? 'activedright' : ''"
- @click="yearclick(item, index)"
- >
- {{ item.name }}
- </div>
- </div>
- </div>
-
- <div class="partContHM">
- <div class="HeadContent" v-if="activedname == '年际降雨变化'">丰、枯年交替出现,且降雨量变化幅度大</div>
- <div class="HeadContent" v-else>年内降雨量分配不均匀,冬季干旱,雨雪稀少</div>
- <div class="box-body">
- <div style="height: 100%">
- <RainfallEcharts :data="chartData2" :refresh="chartData2.refresh" v-if="activedname == '年际降雨变化'"></RainfallEcharts>
- <RainfallLegend :data="chartData3" :refresh1="chartData3.refresh1" v-else></RainfallLegend>
- </div>
- </div>
- </div>
- </template>
-
- <script setup>
- import RainfallEcharts from '@/views/sponeScreen/Echarts/RainfallEcharts.vue'; //年际降雨变化
- import RainfallLegend from '@/views/sponeScreen/Echarts/RainfallLegend.vue'; //年内降雨量
- import { onBeforeUnmount } from 'vue';
- import bus from '@/bus';
-
- const chartData2 = ref({
- xAxis: [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2021],
- yAxis: [650, 800, 502, 630, 820, 800, 510, 805, 1203],
- refresh: 1,
- });
- const chartData3 = ref({
- XName: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
- data1: [8, 15, 24, 36, 58, 63, 165, 125, 72, 30, 23, 10],
- data: [
- {
- coords: [
- ['1', 8],
- ['2', 15],
- ['3', 24],
- ['4', 36],
- ['5', 58],
- ['6', 63],
- ['7', 165],
- ['8', 125],
- ['9', 72],
- ['10', 30],
- ['11', 23],
- ['12', 10],
- ],
- },
- ],
- refresh1: 1,
- });
- const activedname = ref('年际降雨变化');
- const weatherTimer = ref(null);
- const yearList = ref([
- { name: '年际降雨变化', value: 1 },
- { name: '年内降雨量', value: 2 },
- ]);
-
- function yearclick(val) {
- activedname.value = val.name;
- bus.emit('checkRainL', val.value);
- bus.emit('checkLandXDM', false);
- }
-
- onBeforeUnmount(() => {
- clearInterval(weatherTimer.value);
- weatherTimer.value = null;
- });
- </script>
-
- <style lang="scss" scoped>
- .HeadContent {
- width: 100%;
- height: 30px;
- background: rgba(34, 112, 255, 0.4);
- text-align: center;
- line-height: 30px;
- color: #ffffff;
- }
- .box-body {
- height: calc(100vh - 760px);
- padding-left: 5px;
- position: relative;
- overflow: auto;
- }
- .head-right {
- cursor: pointer;
- position: relative;
- font-size: 14px;
- left: 200px;
- top: -32px;
- color: #ffffff;
- display: flex;
- max-width: 200px;
- overflow: hidden;
- overflow-x: auto;
- line-height: 18px;
-
- .head-item {
- margin-left: 10px;
- padding: 2px 3px;
- border: 1px solid transparent;
- background: #013a73;
- height: 23px;
- text-align: center;
- min-width: 42px;
- border: 1px solid #2270ff;
- }
-
- .activedright {
- border: 1px solid #2cfce9;
- color: #e4f5ff;
- background: #166f84;
- }
- }
- </style>