Newer
Older
KaiFengPC / src / views / sponeScreen / cityGK / rainfall.vue
@zhangdeliang zhangdeliang on 3 Sep 3 KB update
  1. <template>
  2. <div class="partTitleHM">
  3. 降雨特征
  4. <div class="head-right" style="">
  5. <div
  6. class="head-item"
  7. v-for="(item, index) in yearList"
  8. :key="item"
  9. :class="activedname == item.name ? 'activedright' : ''"
  10. @click="yearclick(item, index)"
  11. >
  12. {{ item.name }}
  13. </div>
  14. </div>
  15. </div>
  16.  
  17. <div class="partContHM">
  18. <div class="HeadContent" v-if="activedname == '年际降雨变化'">丰、枯年交替出现,且降雨量变化幅度大</div>
  19. <div class="HeadContent" v-else>年内降雨量分配不均匀,冬季干旱,雨雪稀少</div>
  20. <div class="box-body">
  21. <div style="height: 100%">
  22. <RainfallEcharts :data="chartData2" :refresh="chartData2.refresh" v-if="activedname == '年际降雨变化'"></RainfallEcharts>
  23. <RainfallLegend :data="chartData3" :refresh1="chartData3.refresh1" v-else></RainfallLegend>
  24. </div>
  25. </div>
  26. </div>
  27. </template>
  28.  
  29. <script setup>
  30. import RainfallEcharts from '@/views/sponeScreen/Echarts/RainfallEcharts.vue'; //年际降雨变化
  31. import RainfallLegend from '@/views/sponeScreen/Echarts/RainfallLegend.vue'; //年内降雨量
  32. import { onBeforeUnmount } from 'vue';
  33. import bus from '@/bus';
  34.  
  35. const chartData2 = ref({
  36. xAxis: [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2021],
  37. yAxis: [650, 800, 502, 630, 820, 800, 510, 805, 1203],
  38. refresh: 1,
  39. });
  40. const chartData3 = ref({
  41. XName: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  42. data1: [8, 15, 24, 36, 58, 63, 165, 125, 72, 30, 23, 10],
  43. data: [
  44. {
  45. coords: [
  46. ['1', 8],
  47. ['2', 15],
  48. ['3', 24],
  49. ['4', 36],
  50. ['5', 58],
  51. ['6', 63],
  52. ['7', 165],
  53. ['8', 125],
  54. ['9', 72],
  55. ['10', 30],
  56. ['11', 23],
  57. ['12', 10],
  58. ],
  59. },
  60. ],
  61. refresh1: 1,
  62. });
  63. const activedname = ref('年际降雨变化');
  64. const weatherTimer = ref(null);
  65. const yearList = ref([
  66. { name: '年际降雨变化', value: 1 },
  67. { name: '年内降雨量', value: 2 },
  68. ]);
  69.  
  70. function yearclick(val) {
  71. activedname.value = val.name;
  72. bus.emit('checkRainL', val.value);
  73. bus.emit('checkLandXDM', false);
  74. }
  75.  
  76. onBeforeUnmount(() => {
  77. clearInterval(weatherTimer.value);
  78. weatherTimer.value = null;
  79. });
  80. </script>
  81.  
  82. <style lang="scss" scoped>
  83. .HeadContent {
  84. width: 100%;
  85. height: 30px;
  86. background: rgba(34, 112, 255, 0.4);
  87. text-align: center;
  88. line-height: 30px;
  89. color: #ffffff;
  90. }
  91. .box-body {
  92. height: calc(100vh - 760px);
  93. padding-left: 5px;
  94. position: relative;
  95. overflow: auto;
  96. }
  97. .head-right {
  98. cursor: pointer;
  99. position: relative;
  100. font-size: 14px;
  101. left: 200px;
  102. top: -32px;
  103. color: #ffffff;
  104. display: flex;
  105. max-width: 200px;
  106. overflow: hidden;
  107. overflow-x: auto;
  108. line-height: 18px;
  109.  
  110. .head-item {
  111. margin-left: 10px;
  112. padding: 2px 3px;
  113. border: 1px solid transparent;
  114. background: #013a73;
  115. height: 23px;
  116. text-align: center;
  117. min-width: 42px;
  118. border: 1px solid #2270ff;
  119. }
  120.  
  121. .activedright {
  122. border: 1px solid #2cfce9;
  123. color: #e4f5ff;
  124. background: #166f84;
  125. }
  126. }
  127. </style>