tab1.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. <template>
  2. <div class="draught-fan-list">
  3. <div class="query mg-b-8">
  4. <div class="query-items">
  5. <div class="query-item">
  6. <div class="lable">场站:</div>
  7. <div class="search-input">
  8. <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select" @change="(wpId) => { getWt(wpId, true); }">
  9. <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
  10. </el-select>
  11. </div>
  12. </div>
  13. <div class="query-item">
  14. <div class="lable">风机:</div>
  15. <div class="search-input">
  16. <el-select v-model="wtId" clearable placeholder="请选择" popper-class="select">
  17. <el-option v-for="item in wtArray" :key="item.id" :value="item.id" :label="item.name" />
  18. </el-select>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="query-actions">
  23. <button class="btn green" @click="search">搜索</button>
  24. </div>
  25. </div>
  26. <div class="df-table">
  27. <ComTable height="35vh" :data="tableData"></ComTable>
  28. </div>
  29. <Mlc height="300px" :list="chartData" :units="chartUnit" :showLegend="true" />
  30. </div>
  31. </template>
  32. <script>
  33. import ComTable from "@com/coms/table/table.vue";
  34. import Mlc from "@com/chart/line/multiple-line-chart.vue";
  35. export default {
  36. // 名称
  37. name: "cutAnalyse",
  38. // 使用组件
  39. components: {
  40. ComTable,
  41. Mlc
  42. },
  43. // 数据
  44. data () {
  45. return {
  46. isAsc: "asc",
  47. wpArray: [],
  48. wtArray: [],
  49. wpId: "",
  50. wtId: "",
  51. tableData: {
  52. column: [
  53. {
  54. name: "风机",
  55. field: "windturbineid",
  56. is_num: false,
  57. is_light: false,
  58. sortable: true
  59. },
  60. {
  61. name: "风速",
  62. field: "speed",
  63. is_num: false,
  64. is_light: false,
  65. sortable: true
  66. },
  67. {
  68. name: "实际拟合功率",
  69. field: "actualpower",
  70. is_num: false,
  71. is_light: false,
  72. sortable: true
  73. },
  74. {
  75. name: "最优拟合功率",
  76. field: "optimalpower",
  77. is_num: false,
  78. is_light: false,
  79. sortable: true
  80. }
  81. ],
  82. data: [],
  83. },
  84. chartData: [{
  85. title: "",
  86. yAxisIndex: 0,
  87. value: []
  88. }],
  89. chartUnit: ["功率(MW)", "(m/s)"]
  90. };
  91. },
  92. // 函数
  93. methods: {
  94. // 获取风场
  95. getWp (reGetWp) {
  96. let that = this;
  97. that.API.requestData({
  98. method: "GET",
  99. subUrl: "powercompare/windfarmAjax",
  100. success (res) {
  101. that.wpArray = res.data;
  102. that.wpId = res.data[0].id;
  103. that.getWt(that.wpId, reGetWp);
  104. }
  105. });
  106. },
  107. // 获取风机
  108. getWt (wpid, reGetWp) {
  109. let that = this;
  110. if (that.wpId) {
  111. that.API.requestData({
  112. method: "GET",
  113. baseURL: "http://10.155.32.4:9001",
  114. subUrl: "benchmarking/wtList",
  115. data: {
  116. wpid
  117. },
  118. success (res) {
  119. that.wtArray = res.data;
  120. that.wtId = res.data[0].id;
  121. if (!reGetWp) {
  122. that.getTabData();
  123. }
  124. }
  125. });
  126. }
  127. },
  128. getTabData () {
  129. let that = this;
  130. that.API.requestData({
  131. method: "POST",
  132. subUrl: "powersaturation/powersaturationamonutlist",
  133. data: {
  134. wtId: that.wtId
  135. },
  136. success (res) {
  137. that.tableData.data = res.data.list;
  138. that.getChartData();
  139. }
  140. });
  141. },
  142. // 获取图表数据
  143. getChartData () {
  144. let that = this;
  145. that.API.requestData({
  146. method: "POST",
  147. subUrl: "powersaturation/powersaturationamonutchart",
  148. data: {
  149. wtId: that.wtId
  150. },
  151. success (res) {
  152. const keyArray = [{
  153. key: "value1",
  154. title: "风速"
  155. }, {
  156. key: "value2",
  157. title: "实际拟合功率"
  158. }, {
  159. key: "value3",
  160. title: "最优拟合功率"
  161. }, {
  162. key: "value4",
  163. title: "保证功率"
  164. }];
  165. let chartData = [{
  166. title: "风速",
  167. yAxisIndex: 1,
  168. value: []
  169. }, {
  170. title: "实际拟合功率",
  171. yAxisIndex: 0,
  172. value: []
  173. }, {
  174. title: "最优拟合功率",
  175. yAxisIndex: 0,
  176. value: []
  177. }, {
  178. title: "保证功率",
  179. yAxisIndex: 0,
  180. value: []
  181. }];
  182. keyArray.forEach((keyEle, keyIndex) => {
  183. res.data.forEach(ele => {
  184. chartData[keyIndex].value.push({
  185. text: "",
  186. value: ele[keyEle.key]
  187. });
  188. });
  189. });
  190. that.chartData = chartData;
  191. }
  192. });
  193. },
  194. search () {
  195. if (!this.wpId || !this.wtId) {
  196. this.BASE.showMsg({
  197. msg: '场站与风机为必选项'
  198. });
  199. } else {
  200. this.getTabData();
  201. }
  202. }
  203. },
  204. created () {
  205. this.getWp();
  206. },
  207. mounted () { },
  208. unmounted () { },
  209. };
  210. </script>
  211. <style lang="less" scoped>
  212. .draught-fan-list {
  213. width: 100%;
  214. height: 100%;
  215. display: flex;
  216. flex-direction: column;
  217. .btn-group-tabs {
  218. display: flex;
  219. flex-direction: row;
  220. .photovoltaic {
  221. margin-left: 1.481vh;
  222. }
  223. }
  224. .df-table {
  225. border: 0.093vh solid fade(@darkgray, 50%);
  226. position: relative;
  227. overflow: auto;
  228. flex-grow: 1;
  229. margin-top: 1.481vh;
  230. height: 30vh;
  231. &:before {
  232. content: '';
  233. width: 0.37vh;
  234. height: 0.37vh;
  235. background: @write;
  236. position: absolute;
  237. left: 0.278vh;
  238. top: 0.278vh;
  239. }
  240. tbody {
  241. height: calc(100vh - 166px);
  242. }
  243. }
  244. }
  245. </style>