yardBenchmark.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  1. import * as echarts from "echarts";
  2. export default {
  3. data() {
  4. return {
  5. FClist: {
  6. name: "",
  7. id: "",
  8. },
  9. fdcName1: "",
  10. fdcName2: "",
  11. date1: "2021-01-01",
  12. date2: "2020-01-03",
  13. wp_n_1: {},
  14. wp_n_2: {},
  15. selectrowdate: {},
  16. histogram: {
  17. date: [],
  18. xdss: [],
  19. gzss: [],
  20. jxss: [],
  21. xnss: [],
  22. slss: [],
  23. },
  24. wpId: [],
  25. wpName: [],
  26. lineDataOption: [],
  27. beginDate: "2021-01-01",
  28. endDate: "2021-01-03",
  29. fc: "",
  30. tableData: [],
  31. dialogTableVisible: false,
  32. getChartDataValue: [],
  33. getChartDataValue2: [],
  34. getTableData: [],
  35. };
  36. },
  37. methods: {
  38. /**
  39. * 控制弹出
  40. */
  41. dialog() {
  42. this.dialogTableVisible = true;
  43. this.check_wpid();
  44. this.$nextTick(function () {
  45. this.ECZM.leida_tc("leidatu" , this.getChartDataValue,this.BASE.getBzDate(new Date(this.wp_n_1.recordDate),0),this.getChartDataValue2,this.BASE.getBzDate(new Date(this.wp_n_2.recordDate),0));
  46. this.ECZM.bar_tc("histogram_n" , this.wp_n_1 , this.wp_n_2);
  47. });
  48. },
  49. headStyle() {
  50. return "text-align:left";
  51. },
  52. /**
  53. *
  54. * 风场检查
  55. */
  56. check_wpid() {
  57. this.wp_n_1 = "";
  58. this.wp_n_2 = "";
  59. this.fdcName1 = "";
  60. this.fdcName2 = "";
  61. this.getChartDataValue = [];
  62. this.getChartDataValue2 = [];
  63. this.getTableData = [];
  64. if (Object.keys(this.selectrowdate).length != 2) {
  65. this.alert_jg();
  66. return;
  67. } else {
  68. this.wp_n_1 = this.selectrowdate[0];
  69. this.wp_n_2 = this.selectrowdate[1];
  70. this.fdcName1 = this.wp_n_1.wpId;
  71. this.fdcName2 = this.wp_n_2.wpId;
  72. this.getChartDataValue.push(
  73. this.wp_n_1.fnlyl,
  74. this.wp_n_1.gzssl,
  75. this.wp_n_1.jxssl,
  76. this.wp_n_1.qfl,
  77. this.wp_n_1.xnssl,
  78. this.wp_n_1.slssl,
  79. this.wp_n_1.fwjsl,
  80. this.wp_n_1.ztzhl,
  81. this.wp_n_1.xqjsl
  82. );
  83. this.getChartDataValue2.push(
  84. this.wp_n_2.fnlyl,
  85. this.wp_n_2.gzssl,
  86. this.wp_n_2.jxssl,
  87. this.wp_n_2.qfl,
  88. this.wp_n_2.xnssl,
  89. this.wp_n_2.slssl,
  90. this.wp_n_2.fwjsl,
  91. this.wp_n_2.ztzhl,
  92. this.wp_n_2.xqjsl
  93. );
  94. this.getTableData.push({
  95. index: "发电量",
  96. data1: this.wp_n_1.scadafdl,
  97. data2: this.wp_n_2.scadafdl,
  98. });
  99. this.getTableData.push({
  100. index: "故障损失电量",
  101. data1: this.wp_n_1.gzss,
  102. data2: this.wp_n_2.gzss,
  103. });
  104. this.getTableData.push({
  105. index: "检修损失电量",
  106. data1: this.wp_n_1.jxssl,
  107. data2: this.wp_n_2.jxssl,
  108. });
  109. this.getTableData.push({
  110. index: "性能未达标损失电量",
  111. data1: this.wp_n_1.xnsslfraction,
  112. data2: this.wp_n_2.xnsslfraction,
  113. });
  114. this.getTableData.push({
  115. index: "受累损失电量",
  116. data1: this.wp_n_1.slss,
  117. data2: this.wp_n_2.slss,
  118. });
  119. this.getTableData.push({
  120. index: "风能利用率",
  121. data1: this.wp_n_1.fnlyl,
  122. data2: this.wp_n_2.fnlyl,
  123. });
  124. this.getTableData.push({
  125. index: "故障损失率",
  126. data1: this.wp_n_1.gzssl,
  127. data2: this.wp_n_2.gzssl,
  128. });
  129. this.getTableData.push({
  130. index: "检修损失率",
  131. data1: this.wp_n_1.jxssl,
  132. data2: this.wp_n_2.jxssl,
  133. });
  134. this.getTableData.push({
  135. index: "弃风率",
  136. data1: this.wp_n_1.qfl,
  137. data2: this.wp_n_2.qfl,
  138. });
  139. this.getTableData.push({
  140. index: "性能损失率",
  141. data1: this.wp_n_1.xnssl,
  142. data2: this.wp_n_2.xnssl,
  143. });
  144. this.getTableData.push({
  145. index: "受累损失率",
  146. data1: this.wp_n_1.slssl,
  147. data2: this.wp_n_2.slssl,
  148. });
  149. this.getTableData.push({
  150. index: "复位及时率",
  151. data1: this.wp_n_1.fwjsl,
  152. data2: this.wp_n_2.fwjsl,
  153. });
  154. this.getTableData.push({
  155. index: "消缺及时率",
  156. data1: this.wp_n_1.xqjsl,
  157. data2: this.wp_n_2.xqjsl,
  158. });
  159. this.getTableData.push({
  160. index: "状态转换率",
  161. data1: this.wp_n_1.ztzhjsl,
  162. data2: this.wp_n_2.ztzhjsl,
  163. });
  164. }
  165. },
  166. /**
  167. * 获取表格行值
  168. *
  169. */
  170. changeFun(val) {
  171. this.selectrowdate = val;
  172. },
  173. /**
  174. * 获取风场列表
  175. */
  176. query_fc() {
  177. let that = this ;
  178. var newData = new Date();
  179. this.beginDate = this.BASE.getBzDate(newData,-1);
  180. this.endDate = this.BASE.getBzDate(newData,0);
  181. this.API.get("powercompare/windfarmAjax?").then((res) => {
  182. that.FClist = res.data;
  183. }).catch(error =>{
  184. this.$message.error('获取数据失败');
  185. });
  186. },
  187. /**
  188. *
  189. * 弹出提示信息
  190. */
  191. alert_jg() {
  192. this.$message({
  193. message: "只能选择两条数据",
  194. type: "warning",
  195. });
  196. return;
  197. },
  198. /**
  199. *
  200. * 跳转详情页面
  201. */
  202. handleEdit(a, b) {
  203. this.wpId = [];
  204. this.lineDataOption = [];
  205. if (this.selectrowdate.length == 2) {
  206. for (let i = 0; i < this.selectrowdate.length; i++) {
  207. this.wpId.push(this.selectrowdate[i].wpId);
  208. this.wpName.push(this.selectrowdate[i].wpName);
  209. this.lineDataOption.push({
  210. id: this.selectrowdate[i].wpId,
  211. name: this.selectrowdate[i].wpName,
  212. });
  213. }
  214. this.$router.push({
  215. path: "/yardBenchmarkParticulars",
  216. query: {
  217. wpId: this.wpId,
  218. beginDate: this.beginDate,
  219. endDate: this.endDate,
  220. wpName: this.wpName,
  221. select: this.lineDataOption,
  222. },
  223. });
  224. } else {
  225. this.lineDataOption.push({ id: b.wpId, name: b.wpName });
  226. this.$router.push({
  227. path: "/yardBenchmarkParticulars",
  228. query: {
  229. wpId: b.wpId,
  230. beginDate: this.beginDate,
  231. endDate: this.endDate,
  232. wpName: b.wpName,
  233. select: this.lineDataOption,
  234. },
  235. });
  236. }
  237. },
  238. /**
  239. * 查询场内对标列表信息
  240. */
  241. query_benchmarkWpList() {
  242. Object.assign(this.$data.histogram, this.$options.data().histogram);
  243. let that = this;
  244. var page = new URLSearchParams();
  245. page.append("wpId", this.fc);
  246. page.append("beginDate", this.beginDate);
  247. page.append("endDate", this.endDate);
  248. this.API.post("/contrast/benchmarkWpList", page).then((res) => {
  249. this.tableData = res.data;
  250. let len = this.tableData.length;
  251. for (let i = 0; i < len; i++) {
  252. that.histogram.date[i] = this.BASE.getBzDate(
  253. new Date(res.data[i].recordDate),0
  254. );
  255. that.histogram.xdss[i] = res.data[i].xdss;
  256. that.histogram.gzss[i] = res.data[i].gzss;
  257. that.histogram.jxss[i] = res.data[i].whss;
  258. that.histogram.xnss[i] = res.data[i].qfss;
  259. that.histogram.slss[i] = res.data[i].slss;
  260. }
  261. //this.drawhistoram();
  262. this.ECZM.getBar_fdd("histogram",[
  263. {
  264. name: "限电损失电量(单位:万kwh)",
  265. type: "bar",
  266. data: this.histogram.xdss,
  267. },
  268. {
  269. name: "故障损失电量(单位:万kwh)",
  270. type: "bar",
  271. data: this.histogram.gzss,
  272. },
  273. ,
  274. {
  275. name: "检修损失电量(单位:万kwh)",
  276. type: "bar",
  277. data: this.histogram.jxss,
  278. },
  279. {
  280. name: "性能损失电量(单位:万kwh)",
  281. type: "bar",
  282. data: this.histogram.xnss,
  283. },
  284. {
  285. name: "受累损失电量(单位:万kwh)",
  286. type: "bar",
  287. data: this.histogram.slss,
  288. },
  289. ],this.histogram.date);
  290. }).catch(error =>{
  291. this.$message.error('获取数据失败');
  292. });
  293. },
  294. /**
  295. *
  296. * 日期类型转换
  297. */
  298. filter_date(cellValue) {
  299. let date = new Date(cellValue.recordDate);
  300. return this.BASE.getBzDate(date,0);
  301. },
  302. drawleidatu() {
  303. var chartDom = document.getElementById("leidatu");
  304. var myChart = echarts.init(chartDom);
  305. var option;
  306. option = {
  307. title: {
  308. text: "对标排名分析",
  309. left: 400,
  310. top: -5,
  311. textStyle: {
  312. fontSize: 13,
  313. },
  314. },
  315. grid: {
  316. top: "10%",
  317. left: "10%",
  318. right: "10%",
  319. bottom: "0",
  320. },
  321. tooltip: {},
  322. legend: {
  323. orient: "vertical",
  324. x: "left", //可设定图例在左、右、居中
  325. y: "0", //可设定图例在上、下、居中
  326. padding: [0, 50, 0, 0],
  327. },
  328. radar: {
  329. // shape: 'circle',
  330. name: {
  331. textStyle: {
  332. color: "#fff",
  333. backgroundColor: "#999",
  334. borderRadius: 3,
  335. padding: [3, 5],
  336. },
  337. },
  338. indicator: [
  339. { name: "风能利用率", max: 100 },
  340. { name: "故障损失率", max: 100 },
  341. { name: "检修损失率", max: 100 },
  342. { name: "弃风率", max: 100 },
  343. { name: "性能损失率", max: 100 },
  344. { name: "受累损失率", max: 100 },
  345. { name: "复位及时率", max: 100 },
  346. { name: "状态转换率", max: 100 },
  347. { name: "消缺及时率", max: 100 },
  348. ],
  349. },
  350. series: [
  351. {
  352. name: "预算 vs 开销(Budget vs spending)",
  353. type: "radar",
  354. // areaStyle: {normal: {}},
  355. data: [
  356. {
  357. value: this.getChartDataValue,
  358. name: this.BASE.getBzDate(new Date(this.wp_n_1.recordDate),0),
  359. },
  360. {
  361. value: this.getChartDataValue2,
  362. name: this.BASE.getBzDate(new Date(this.wp_n_2.recordDate),0),
  363. },
  364. ],
  365. },
  366. ],
  367. };
  368. option && myChart.setOption(option);
  369. },
  370. drawhistogram_n() {
  371. var chartDom = document.getElementById("histogram_n");
  372. var myChart = echarts.init(chartDom);
  373. var option;
  374. option = {
  375. tooltip: {
  376. trigger: "axis",
  377. axisPointer: {
  378. type: "cross",
  379. crossStyle: {
  380. color: "#999",
  381. },
  382. },
  383. },
  384. title: {
  385. text: "损失电量分析",
  386. left: 100,
  387. top: 8,
  388. textStyle: {
  389. fontSize: 13,
  390. },
  391. },
  392. grid: {
  393. top: "90",
  394. left: "10%",
  395. right: "10%",
  396. bottom: "30",
  397. },
  398. legend: {
  399. orient: "vertical",
  400. x: "right", //可设定图例在左、右、居中
  401. y: 0, //可设定图例在上、下、居中
  402. padding: [0, 50, 200, 0],
  403. data: [
  404. "限电损失电量(单位:万kwh)",
  405. "故障损失电量(单位:万kwh)",
  406. "检修损失电量(单位:万kwh)",
  407. "性能损失电量(单位:万kwh)",
  408. "受累损失电量(单位:万kwh)",
  409. ],
  410. },
  411. xAxis: [
  412. {
  413. type: "category",
  414. data: [
  415. this.BASE.getBzDate(new Date(this.wp_n_1.recordDate),0),
  416. this.BASE.getBzDate(new Date(this.wp_n_2.recordDate),0),
  417. ],
  418. axisPointer: {
  419. type: "shadow",
  420. },
  421. },
  422. ],
  423. yAxis: [
  424. {
  425. type: "value",
  426. name: "电量",
  427. interval: 50,
  428. axisLabel: {
  429. formatter: "{value} 万kw",
  430. },
  431. },
  432. ],
  433. series: [
  434. {
  435. name: "限电损失电量(单位:万kwh)",
  436. type: "bar",
  437. yAxisIndex: 0,
  438. data: [this.wp_n_1.xdss, this.wp_n_2.xdss],
  439. },
  440. {
  441. name: "故障损失电量(单位:万kwh)",
  442. type: "bar",
  443. yAxisIndex: 0,
  444. data: [this.wp_n_1.zzss, this.wp_n_2.gzss],
  445. },
  446. {
  447. name: "检修损失电量(单位:万kwh)",
  448. type: "bar",
  449. yAxisIndex: 0,
  450. data: [this.wp_n_1.jxss, this.wp_n_2.jxss],
  451. },
  452. {
  453. name: "性能损失电量(单位:万kwh)",
  454. type: "bar",
  455. yAxisIndex: 0,
  456. data: [this.wp_n_1.xnss, this.wp_n_2.xnss],
  457. },
  458. {
  459. name: "受累损失电量(单位:万kwh)",
  460. type: "bar",
  461. yAxisIndex: 0,
  462. data: [this.wp_n_1.slss, this.wp_n_2.slss],
  463. },
  464. ],
  465. };
  466. option && myChart.setOption(option);
  467. },
  468. drawhistogram() {
  469. var app = {};
  470. var chartDom = document.getElementById("histogram");
  471. var myChart = echarts.init(chartDom);
  472. var option;
  473. option = {
  474. title: {
  475. text: "损失电量分析",
  476. },
  477. tooltip: {
  478. trigger: "axis",
  479. axisPointer: {
  480. type: "shadow",
  481. },
  482. },
  483. legend: {
  484. data: [
  485. "限电损失电量(单位:万kwh)",
  486. "故障损失电量(单位:万kwh)",
  487. "检修损失电量(单位:万kwh)",
  488. "性能损失电量(单位:万kwh)",
  489. "受累损失电量(单位:万kwh)",
  490. ],
  491. },
  492. grid: {
  493. left: "3%",
  494. right: "4%",
  495. bottom: "3%",
  496. containLabel: true,
  497. },
  498. yAxis: {
  499. type: "value",
  500. boundaryGap: [0, 0.01],
  501. },
  502. xAxis: {
  503. type: "category",
  504. data: this.histogram.date,
  505. },
  506. series: [
  507. {
  508. name: "限电损失电量(单位:万kwh)",
  509. type: "bar",
  510. data: this.histogram.xdss,
  511. },
  512. {
  513. name: "故障损失电量(单位:万kwh)",
  514. type: "bar",
  515. data: this.histogram.gzss,
  516. },
  517. ,
  518. {
  519. name: "检修损失电量(单位:万kwh)",
  520. type: "bar",
  521. data: this.histogram.jxss,
  522. },
  523. {
  524. name: "性能损失电量(单位:万kwh)",
  525. type: "bar",
  526. data: this.histogram.xnss,
  527. },
  528. {
  529. name: "受累损失电量(单位:万kwh)",
  530. type: "bar",
  531. data: this.histogram.slss,
  532. },
  533. ],
  534. };
  535. option && myChart.setOption(option);
  536. },
  537. },
  538. mounted() {
  539. this.query_fc();
  540. this.query_benchmarkWpList();
  541. },
  542. };