yjfl.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <div>
  3. <div class="action-bar">
  4. <div class="query mg-b-16">
  5. <div class="query-items">
  6. <div class="query-item">
  7. <div class="lable">风场:</div>
  8. <div class="search-input">
  9. <el-select v-model="wpvalue" clearable placeholder="请选择" popper-class="select">
  10. <el-option v-for="item in ChangZhan" :key="item.id" :label="item.name" :value="item.id">
  11. </el-option>
  12. </el-select>
  13. </div>
  14. </div>
  15. <div class="query-item">
  16. <div class="lable">日期:</div>
  17. <div class="search-input">
  18. <el-date-picker v-model="myDate" type="date" placeholder="开始日期" popper-class="date-select"
  19. value-format="YYYY-MM-DD"></el-date-picker>
  20. </div>
  21. </div>
  22. </div>
  23. <div class="query-actions">
  24. <button class="btn green" @click="searchData">搜索</button>
  25. </div>
  26. </div>
  27. </div>
  28. <el-row>
  29. <el-col :span="14">
  30. <panel :title="'日雷达图'" class="radar-panel" :icon="'svg-wind-site'">
  31. <div class="wind-info">
  32. <radar-chart :width="'100%'" :height="'729px'" :value="rzdfsData" />
  33. </div>
  34. </panel>
  35. </el-col>
  36. <el-col :span="10">
  37. <el-row>
  38. <el-col :span="24">
  39. <panel :title="'月雷达图'" class="radar-panel" :icon="'svg-wind-site'">
  40. <div class="wind-info">
  41. <radar-chart :width="'100%'" :height="'350px'" :value="yzdfsData" />
  42. </div>
  43. </panel>
  44. </el-col>
  45. </el-row>
  46. <el-row>
  47. <el-col :span="24">
  48. <panel :title="'年雷达图'" class="radar-panel" :icon="'svg-wind-site'">
  49. <div class="wind-info">
  50. <radar-chart :width="'100%'" :height="'350px'" :value="nzdfsData" />
  51. </div>
  52. </panel>
  53. </el-col>
  54. </el-row>
  55. </el-col>
  56. </el-row>
  57. </div>
  58. </template>
  59. <script>
  60. import panel from "@/components/coms/panel/panel.vue";
  61. import RadarChart from "@/components/chart/radar/radar-chart.vue";
  62. export default {
  63. components: {
  64. panel,
  65. RadarChart
  66. },
  67. data() {
  68. return {
  69. rzdfsData: {
  70. indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
  71. data: [{value: [44200, 14200, 20000, 35000, 50000, 38000],name: "",}, ],
  72. },
  73. yzdfsData: {
  74. indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
  75. data: [{value: [44200, 14200, 20000, 35000, 50000, 38000],name: "",}, ],
  76. },
  77. nzdfsData: {
  78. indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
  79. data: [{value: [44200, 14200, 20000, 35000, 50000, 38000],name: "",}, ],
  80. },
  81. ChangZhan: [],
  82. wpvalue: '',
  83. myDate: ""
  84. }
  85. },
  86. created() {
  87. var that = this;
  88. that.API.requestData({
  89. method: "GET",
  90. baseURL: "http://10.155.32.4:9001/",
  91. subUrl: "benchmarking/wplist",
  92. success(res) {
  93. that.ChangZhan = res.data;
  94. that.wpvalue = res.data[0].id;
  95. let end = new Date();
  96. that.myDate = end.formatDate("yyyy-MM-dd");
  97. that.searchData();
  98. },
  99. });
  100. },
  101. methods: {
  102. searchData(){
  103. var that = this;
  104. that.API.requestData({
  105. method: "GET",
  106. subUrl: "radar/yjfx",
  107. data:{
  108. stationid:that.wpvalue,
  109. date:that.myDate
  110. },
  111. success(res) {
  112. that.rzdfsData = {
  113. indicator:Object.keys(res.data[0].year),
  114. data:[{value:Object.values(res.data[0].year)}]
  115. }
  116. that.yzdfsData = {
  117. indicator:Object.keys(res.data[1].month),
  118. data:[{value:Object.values(res.data[1].month)}]
  119. }
  120. that.nzdfsData = {
  121. indicator:Object.keys(res.data[2].day),
  122. data:[{value:Object.values(res.data[2].day)}]
  123. }
  124. },
  125. });
  126. }
  127. },
  128. };
  129. </script>
  130. <style>
  131. </style>