Decision2.vue 31 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195
  1. <template>
  2. <div class="decision-page-2">
  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
  9. v-model="value1"
  10. @change="ChangZhanChange(value1)"
  11. multiple
  12. placeholder="请选择"
  13. popper-class="select"
  14. >
  15. <el-option
  16. v-for="item in ChangZhan"
  17. :key="item.id"
  18. :value="item.id"
  19. :label="item.name"
  20. >
  21. </el-option>
  22. </el-select>
  23. </div>
  24. </div>
  25. <div class="query-item">
  26. <div class="lable">项目:</div>
  27. <div class="search-input">
  28. <el-select
  29. v-model="value2"
  30. @change="XiangMuChange(value2)"
  31. multiple
  32. placeholder="请选择"
  33. popper-class="select"
  34. >
  35. <el-option
  36. v-for="item in XiangMu"
  37. :key="item.id"
  38. :value="item.id"
  39. :label="item.name"
  40. >
  41. </el-option>
  42. </el-select>
  43. </div>
  44. </div>
  45. <div class="query-item">
  46. <div class="lable">线路:</div>
  47. <div class="search-input">
  48. <el-select
  49. v-model="value3"
  50. @change="XianLuChange(value3)"
  51. multiple
  52. placeholder="请选择"
  53. popper-class="select"
  54. >
  55. <el-option
  56. v-for="item in XianLu"
  57. :key="item.id"
  58. :label="item.name"
  59. :value="item.id"
  60. >
  61. </el-option>
  62. </el-select>
  63. </div>
  64. </div>
  65. <div class="query-item">
  66. <div class="lable">开始日期:</div>
  67. <div class="search-input">
  68. <el-date-picker
  69. v-model="value4"
  70. @change="BeginChange(value4)"
  71. type="date"
  72. value-format="YYYY-MM-DD"
  73. placeholder="选择日期"
  74. popper-class="date-select"
  75. >
  76. </el-date-picker>
  77. </div>
  78. </div>
  79. <div class="query-item">
  80. <div class="lable">结束日期:</div>
  81. <div class="search-input">
  82. <el-date-picker
  83. v-model="value5"
  84. @change="EndChange(value5)"
  85. type="date"
  86. value-format="YYYY-MM-DD"
  87. placeholder="选择日期"
  88. popper-class="date-select"
  89. >
  90. </el-date-picker>
  91. <div class="unit svg-icon svg-icon-gray">
  92. <svg-icon :svgid="''" />
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="query-actions">
  98. <button class="btn green">搜索</button>
  99. <button class="btn" @click="dbfx">对标分析</button>
  100. <button class="btn">导出</button>
  101. <button class="btn" v-show="detailShow == 2" @click="back">返回</button>
  102. </div>
  103. </div>
  104. <div v-show="detailShow == 1">
  105. <toolbar-panel title="风机绩效榜" :showLine="false"></toolbar-panel>
  106. <div class="mg-b-16">
  107. <div class="project-table">
  108. <Table
  109. :data="tableData"
  110. :canScroll="false"
  111. ref="curRef"
  112. @onSort="onSort"
  113. ></Table>
  114. </div>
  115. </div>
  116. <el-row class="mg-b-16">
  117. <el-col :span="8">
  118. <panel title="发电量占比">
  119. <dual-pie-chart
  120. height="21.296vh"
  121. :innerData="innerFdl"
  122. :outerData="outerFdl"
  123. />
  124. </panel>
  125. </el-col>
  126. <el-col :span="8">
  127. <panel title="各场站损失电量占比">
  128. <dual-pie-chart
  129. height="21.296vh"
  130. :innerData="innerCz"
  131. :outerData="outerCz"
  132. />
  133. </panel>
  134. </el-col>
  135. <el-col :span="8">
  136. <panel title="理论发电量占比">
  137. <dual-pie-chart
  138. height="21.296vh"
  139. :innerData="innerLl"
  140. :outerData="outerLl"
  141. />
  142. </panel>
  143. </el-col>
  144. </el-row>
  145. <div>
  146. <panel title="损失电量分析">
  147. <multiple-bar-chart
  148. :height="'calc(100vh - 21.5vh - 500px)'"
  149. :list="analyis"
  150. :customerTooltip="true"
  151. @tooltip="tooltip"
  152. :units="['(万KWh)']"
  153. />
  154. </panel>
  155. </div>
  156. </div>
  157. <el-row :type="'flex'" class="content" v-show="detailShow == 2">
  158. <el-col :span="24" class="pd-l-8">
  159. <panel :title="'风机对标列表明细'" :showLine="false">
  160. <div class="project-table">
  161. <Table
  162. :data="tableDataDetail"
  163. ref="curRef"
  164. @onSort="onSort"
  165. ></Table>
  166. </div>
  167. </panel>
  168. </el-col>
  169. </el-row>
  170. <el-dialog
  171. title="对标排名分析"
  172. v-model="dialogVisible"
  173. width="70%"
  174. top="10vh"
  175. custom-class="modal"
  176. :close-on-click-modal="false"
  177. >
  178. <dayinfo
  179. :radarValue="radarValue"
  180. :title="[windNum,windNum2]"
  181. :windNum="windNum"
  182. :windNum2="windNum2"
  183. :tabs="tabs"
  184. :analyisDialog="analyisDialog"
  185. />
  186. </el-dialog>
  187. </div>
  188. </template>
  189. <script>
  190. import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
  191. import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
  192. import SvgIcon from "../../components/coms/icon/svg-icon.vue";
  193. import Panel from "../../components/coms/panel/panel.vue";
  194. import Table from "./table.vue";
  195. import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
  196. import Dayinfo from "./dayinfo.vue";
  197. export default {
  198. components: {
  199. Panel,
  200. Table,
  201. SvgIcon,
  202. DualPieChart,
  203. MultipleBarChart,
  204. Dayinfo,
  205. ToolbarPanel,
  206. },
  207. data() {
  208. let that = this;
  209. return {
  210. tableIdArr: [], //放checkbox的id数组
  211. tableId: [],
  212. checkLength: 0, //对标分析只能选择2个
  213. tableData: {
  214. column: [
  215. {
  216. name: "",
  217. field: "index",
  218. is_num: false,
  219. is_light: false,
  220. },
  221. {
  222. name: "",
  223. field: "check",
  224. is_num: false,
  225. is_light: false,
  226. template: () => {
  227. return "<input class='check curCheckBox' type='CheckBox' />";
  228. },
  229. click: function(event, data) {
  230. var dataId = that.tableIdArr[data.index - 1];
  231. if (event.target.checked == false && that.checkLength <= 2) {
  232. that.tableId.forEach((item, i) => {
  233. if (item == dataId) {
  234. that.tableId.splice(i, 1);
  235. that.dbData.splice(i, 1);
  236. }
  237. });
  238. that.checkLength--;
  239. } else if (event.target.checked && that.checkLength < 2) {
  240. that.tableId.push(dataId);
  241. that.dbData.push(data);
  242. that.checkLength++;
  243. } else if (that.checkLength == 2) {
  244. event.target.checked = false;
  245. }
  246. },
  247. },
  248. {
  249. name: "名称",
  250. field: "name",
  251. is_num: false,
  252. is_light: false,
  253. },
  254. {
  255. name: "综合排名",
  256. field: "zhpm",
  257. is_num: false,
  258. is_light: false,
  259. sortable: true,
  260. },
  261. {
  262. name: "发电量排名",
  263. field: "fdlpm",
  264. is_num: false,
  265. is_light: false,
  266. sortable: true,
  267. },
  268. {
  269. name: "发电量",
  270. field: "fdl",
  271. is_num: false,
  272. is_light: false,
  273. sortable: true,
  274. },
  275. {
  276. name: "故障损失排名",
  277. field: "gzssdlpm",
  278. is_num: false,
  279. is_light: false,
  280. sortable: true,
  281. },
  282. {
  283. name: "故障损失",
  284. field: "gzssdl",
  285. is_num: false,
  286. is_light: false,
  287. sortable: true,
  288. },
  289. {
  290. name: "检修损失排名",
  291. field: "jxssdlpm",
  292. is_num: false,
  293. is_light: false,
  294. sortable: true,
  295. },
  296. {
  297. name: "检修损失",
  298. field: "jxssdl",
  299. is_num: false,
  300. is_light: false,
  301. sortable: true,
  302. },
  303. {
  304. name: "性能损失排名",
  305. field: "xnssdlpm",
  306. is_num: false,
  307. is_light: false,
  308. sortable: true,
  309. },
  310. {
  311. name: "性能损失",
  312. field: "xnssdl",
  313. is_num: false,
  314. is_light: false,
  315. sortable: true,
  316. },
  317. {
  318. name: "限电损失排名",
  319. field: "xdssdlpm",
  320. is_num: false,
  321. is_light: false,
  322. sortable: true,
  323. },
  324. {
  325. name: "限电损失",
  326. field: "xdssdl",
  327. is_num: false,
  328. is_light: false,
  329. sortable: true,
  330. },
  331. {
  332. name: "受累损失排名",
  333. field: "slssdlpm",
  334. is_num: false,
  335. is_light: false,
  336. sortable: true,
  337. },
  338. {
  339. name: "受累损失",
  340. field: "slssdl",
  341. is_num: false,
  342. is_light: false,
  343. sortable: true,
  344. },
  345. {
  346. name: "风能利用率排名",
  347. field: "fnlylpm",
  348. is_num: false,
  349. is_light: false,
  350. sortable: true,
  351. },
  352. {
  353. name: "风能利用率(%)",
  354. field: "fnlyl",
  355. is_num: false,
  356. is_light: false,
  357. sortable: true,
  358. },
  359. {
  360. name: "故障损失率排名",
  361. field: "gzsslpm",
  362. is_num: false,
  363. is_light: false,
  364. sortable: true,
  365. },
  366. {
  367. name: "故障损失率(%)",
  368. field: "gzssl",
  369. is_num: false,
  370. is_light: false,
  371. sortable: true,
  372. },
  373. {
  374. name: "检修损失率排名",
  375. field: "jxsslpm",
  376. is_num: false,
  377. is_light: false,
  378. sortable: true,
  379. },
  380. {
  381. name: "检修损失率(%)",
  382. field: "jxssl",
  383. is_num: false,
  384. is_light: false,
  385. sortable: true,
  386. },
  387. {
  388. name: "弃风率排名",
  389. field: "qflpm",
  390. is_num: false,
  391. is_light: false,
  392. sortable: true,
  393. },
  394. {
  395. name: "弃风率(%)",
  396. field: "qfl",
  397. is_num: false,
  398. is_light: false,
  399. sortable: true,
  400. },
  401. {
  402. name: "性能损失率排名",
  403. field: "xnsslpm",
  404. is_num: false,
  405. is_light: false,
  406. sortable: true,
  407. },
  408. {
  409. name: "性能损失率(%)",
  410. field: "xnssl",
  411. is_num: false,
  412. is_light: false,
  413. sortable: true,
  414. },
  415. {
  416. name: "受累损失率排名",
  417. field: "slsslpm",
  418. is_num: false,
  419. is_light: false,
  420. sortable: true,
  421. },
  422. {
  423. name: "受累损失率(%)",
  424. field: "slssl",
  425. is_num: false,
  426. is_light: false,
  427. sortable: true,
  428. },
  429. {
  430. name: "操作",
  431. field: "cz",
  432. is_num: false,
  433. is_light: false,
  434. template: function() {
  435. return "<a class='action'>详情</a>";
  436. },
  437. click: function(event, data) {
  438. var dataId = that.tableIdArr[data.index - 1];
  439. that.clearDb();
  440. that.detailShow = 2;
  441. // var that = this;
  442. that.API.requestData({
  443. method: "GET",
  444. baseURL: "http://10.155.32.4:9001/",
  445. subUrl: "benchmarking/details",
  446. data: {
  447. id: dataId,
  448. beginDate: that.value4,
  449. endDate: that.value5,
  450. target: "",
  451. sort: "",
  452. },
  453. success(res) {
  454. var dataTab = [];
  455. res.data.forEach((item, index) => {
  456. that.tableIdArr.push(item.id);
  457. dataTab.push({
  458. //表格
  459. index: index + 1,
  460. fdl: item.fdl,
  461. name: item.name,
  462. zhpm: item.zhpm,
  463. gzssdl: item.gzssdl,
  464. jxssdlpm: item.jxssdlpm,
  465. jxssdl: item.jxssdl,
  466. xnssdlpm: item.xnssdlpm,
  467. xnssdl: item.xnssdl,
  468. xdssdlpm: item.xdssdlpm,
  469. xdssdl: item.xdssdl,
  470. slssdlpm: item.slssdlpm,
  471. slssdl: item.slssdl,
  472. fnlylpm: item.fnlylpm,
  473. fnlyl: item.fnlyl,
  474. gzsslpm: item.gzsslpm,
  475. gzssl: item.gzssl,
  476. jxsslpm: item.jxsslpm,
  477. jxssl: item.jxssl,
  478. qflpm: item.qflpm,
  479. qfl: item.qfl,
  480. xnsslpm: item.xnsslpm,
  481. xnssl: item.xnssl,
  482. slsslpm: item.slsslpm,
  483. slssl: item.slssl,
  484. is_light: false,
  485. });
  486. });
  487. that.tableDataDetail.data = dataTab;
  488. },
  489. });
  490. },
  491. },
  492. ],
  493. data: [],
  494. },
  495. tableDataDetail: {
  496. column: [
  497. {
  498. name: "",
  499. field: "index",
  500. is_num: false,
  501. is_light: false,
  502. },
  503. {
  504. // name: "",
  505. name: "发电量",
  506. field: "fdl",
  507. is_num: false,
  508. is_light: false,
  509. display: "none",
  510. },
  511. {
  512. name: "",
  513. field: "check",
  514. is_num: false,
  515. is_light: false,
  516. template: function() {
  517. return "<input class='check curCheckBox checkItem' type='CheckBox'/>";
  518. },
  519. click: function(event, data) {
  520. var dataId = that.tableIdArr[data.index - 1];
  521. if (event.target.checked == false && that.checkLength <= 2) {
  522. that.tableId.forEach((item, i) => {
  523. if (item == dataId) {
  524. that.tableId.splice(i, 1);
  525. that.dbData.splice(i, 1);
  526. }
  527. });
  528. that.checkLength--;
  529. } else if (event.target.checked && that.checkLength < 2) {
  530. that.tableId.push(dataId);
  531. that.dbData.push(data);
  532. that.checkLength++;
  533. } else if (that.checkLength == 2) {
  534. event.target.checked = false;
  535. }
  536. },
  537. },
  538. {
  539. name: "风机名称",
  540. field: "name",
  541. is_num: false,
  542. is_light: false,
  543. },
  544. {
  545. name: "综合排名",
  546. field: "zhpm",
  547. is_num: false,
  548. is_light: false,
  549. sortable: true,
  550. },
  551. {
  552. name: "故障损失",
  553. field: "gzssdl",
  554. is_num: false,
  555. is_light: false,
  556. sortable: true,
  557. },
  558. {
  559. name: "检修损失排名",
  560. field: "jxssdlpm",
  561. is_num: false,
  562. is_light: false,
  563. sortable: true,
  564. },
  565. {
  566. name: "检修损失",
  567. field: "jxssdl",
  568. is_num: false,
  569. is_light: false,
  570. sortable: true,
  571. },
  572. {
  573. name: "性能损失排名",
  574. field: "xnssdlpm",
  575. is_num: false,
  576. is_light: false,
  577. sortable: true,
  578. },
  579. {
  580. name: "性能损失",
  581. field: "xnssdl",
  582. is_num: false,
  583. is_light: false,
  584. sortable: true,
  585. },
  586. {
  587. name: "限电损失排名",
  588. field: "xdssdlpm",
  589. is_num: false,
  590. is_light: false,
  591. sortable: true,
  592. },
  593. {
  594. name: "限电损失",
  595. field: "xdssdl",
  596. is_num: false,
  597. is_light: false,
  598. sortable: true,
  599. },
  600. {
  601. name: "受累损失排名",
  602. field: "slssdlpm",
  603. is_num: false,
  604. is_light: false,
  605. sortable: true,
  606. },
  607. {
  608. name: "受累损失",
  609. field: "slssdl",
  610. is_num: false,
  611. is_light: false,
  612. sortable: true,
  613. },
  614. {
  615. name: "故障损失率排名",
  616. field: "gzsslpm",
  617. is_num: false,
  618. is_light: false,
  619. sortable: true,
  620. },
  621. {
  622. name: "故障损失率(%)",
  623. field: "gzssl",
  624. is_num: false,
  625. is_light: false,
  626. sortable: true,
  627. },
  628. {
  629. name: "检修损失率排名",
  630. field: "jxsslpm",
  631. is_num: false,
  632. is_light: false,
  633. sortable: true,
  634. },
  635. {
  636. name: "检修损失率(%)",
  637. field: "jxssl",
  638. is_num: false,
  639. is_light: false,
  640. sortable: true,
  641. },
  642. {
  643. name: "弃风率排名",
  644. field: "qflpm",
  645. is_num: false,
  646. is_light: false,
  647. sortable: true,
  648. },
  649. {
  650. name: "弃风率(%)",
  651. field: "qfl",
  652. is_num: false,
  653. is_light: false,
  654. sortable: true,
  655. },
  656. {
  657. name: "性能损失率排名",
  658. field: "xnsslpm",
  659. is_num: false,
  660. is_light: false,
  661. sortable: true,
  662. },
  663. {
  664. name: "性能损失率(%)",
  665. field: "xnssl",
  666. is_num: false,
  667. is_light: false,
  668. sortable: true,
  669. },
  670. {
  671. name: "受累损失率排名",
  672. field: "slsslpm",
  673. is_num: false,
  674. is_light: false,
  675. sortable: true,
  676. },
  677. {
  678. name: "受累损失率(%)",
  679. field: "slssl",
  680. is_num: false,
  681. is_light: false,
  682. sortable: true,
  683. },
  684. ],
  685. data: [],
  686. },
  687. options: [],
  688. ChangZhan: [], //场站
  689. XiangMu: [], //项目
  690. XianLu: [], //线路
  691. value1: [],
  692. value2: [],
  693. value3: [],
  694. value4: "",
  695. value5: "",
  696. innerFdl: [], //发电量占比
  697. outerFdl: [],
  698. innerCz: [], //各场站损失电量占比
  699. outerCz: [],
  700. innerLl: [], //理论发电量占比
  701. outerLl: [],
  702. analyis: [], //损失电量分析
  703. dialogVisible: false,
  704. radarValue: [],
  705. windNum: "dd",
  706. windNum2: "dd",
  707. tabs: [],
  708. analyisDialog: [],
  709. detailShow: 1,
  710. ajaxData: [],
  711. dbData: [],
  712. };
  713. },
  714. created() {
  715. this.ChangZhanVal();
  716. // this.XiangMuVal()
  717. this.value4 = this.getTime(1);
  718. this.value5 = this.getTime(2);
  719. this.AjaxCommon();
  720. },
  721. methods: {
  722. ChangZhanVal() {
  723. var that = this;
  724. that.API.requestData({
  725. method: "GET",
  726. baseURL: "http://10.155.32.4:9001/",
  727. subUrl: "benchmarking/wplist",
  728. success(res) {
  729. // that.value2.push(res.data[0].id);
  730. that.ChangZhan = res.data;
  731. // that.AjaxCommon();
  732. that.XiangMuVal(that.value2);
  733. console.log("resCHANzhan:", res.data);
  734. console.log("value2:", that.value2);
  735. },
  736. });
  737. },
  738. ChangZhanChange(val) {
  739. this.value1 = val;
  740. this.value2 = [];
  741. // this.value2 = val;
  742. this.value3 = [];
  743. this.AjaxCommon();
  744. this.XiangMuVal(val);
  745. this.clearDb();
  746. },
  747. XiangMuVal(val) {
  748. var that = this;
  749. that.API.requestData({
  750. method: "GET",
  751. baseURL: "http://10.155.32.4:9001/",
  752. subUrl: "benchmarking/projectList",
  753. data: {
  754. wpids: val,
  755. },
  756. success(res) {
  757. that.XiangMu = res.data;
  758. console.log("Xiangmu:", res.data);
  759. },
  760. });
  761. },
  762. XiangMuChange(val) {
  763. this.value2 = val;
  764. this.value3 = [];
  765. this.AjaxCommon();
  766. // this.XiangMuVal(val);
  767. this.XianLuVal(val);
  768. this.clearDb();
  769. },
  770. XianLuVal(val) {
  771. var that = this;
  772. that.API.requestData({
  773. method: "GET",
  774. baseURL: "http://10.155.32.4:9001/",
  775. subUrl: "benchmarking/lineList",
  776. data: {
  777. projects: val,
  778. },
  779. success(res) {
  780. that.XianLu = res.data;
  781. },
  782. });
  783. },
  784. XianLuChange(val) {
  785. this.value3 = val;
  786. this.AjaxCommon();
  787. this.clearDb();
  788. },
  789. BeginChange(val) {
  790. this.value4 = val;
  791. this.AjaxCommon();
  792. this.clearDb();
  793. },
  794. EndChange(val) {
  795. this.value5 = val;
  796. this.AjaxCommon();
  797. this.clearDb();
  798. },
  799. getTime(val) {
  800. //时间戳处理,val=1是默认开始时间(当前月第一天),val=2是默认结束时间(今天)
  801. var date = new Date();
  802. var year = date.getFullYear(),
  803. month = date.getMonth() + 1,
  804. day = date.getDate();
  805. month >= 1 && month <= 9 ? (month = "0" + month) : "";
  806. day >= 0 && day <= 9 ? (day = "0" + day) : "";
  807. var begin = year + "-" + month + "-01";
  808. var end = year + "-" + month + "-" + day;
  809. if (val == 1) {
  810. return begin;
  811. } else if (val == 2) {
  812. return end;
  813. }
  814. },
  815. AjaxCommon() {
  816. var that = this;
  817. that.API.requestData({
  818. //五项损失率
  819. method: "GET",
  820. baseURL: "http://10.155.32.4:9001/",
  821. subUrl: "benchmarking/wxssl",
  822. data: {
  823. wpids: that.value1,
  824. projectids: that.value2,
  825. lineids: that.value3,
  826. beginDate: that.value4,
  827. endDate: that.value5,
  828. target: "",
  829. sort: "",
  830. },
  831. success(res) {
  832. that.ajaxData = res.data;
  833. console.log("resData:", res);
  834. var dataTab = [], //表格
  835. fdl = [],
  836. cz = [],
  837. ll = [],
  838. analyis = [],
  839. gzssdl = [],
  840. jxssdl = [],
  841. xnssdl = [],
  842. xdssdl = [],
  843. slssdl = [];
  844. res.data.forEach((item, index) => {
  845. that.tableIdArr.push(item.id);
  846. dataTab.push({
  847. //表格
  848. index: index + 1,
  849. name: item.name,
  850. zhpm: item.zhpm,
  851. fdlpm: item.fdlpm,
  852. fdl: item.fdl,
  853. gzssdlpm: item.gzssdlpm,
  854. gzssdl: item.gzssdl,
  855. jxssdlpm: item.jxssdlpm,
  856. jxssdl: item.jxssdl,
  857. xnssdlpm: item.xnssdlpm,
  858. xnssdl: item.xnssdl,
  859. xdssdlpm: item.xdssdlpm,
  860. xdssdl: item.xdssdl,
  861. slssdlpm: item.slssdlpm,
  862. slssdl: item.slssdl,
  863. fnlylpm: item.fnlylpm,
  864. fnlyl: item.fnlyl,
  865. gzsslpm: item.gzsslpm,
  866. gzssl: item.gzssl,
  867. jxsslpm: item.jxsslpm,
  868. jxssl: item.jxssl,
  869. qflpm: item.qflpm,
  870. qfl: item.qfl,
  871. xnsslpm: item.xnsslpm,
  872. xnssl: item.xnssl,
  873. slsslpm: item.slsslpm,
  874. slssl: item.slssl,
  875. is_light: false,
  876. });
  877. fdl.push({
  878. value: item.fdl,
  879. name: item.name,
  880. });
  881. cz.push({
  882. value: (
  883. item.gzssdl +
  884. item.jxssdl +
  885. item.xnssdl +
  886. item.xdssdl +
  887. item.slssdl
  888. ).toFixed(2),
  889. name: item.name,
  890. });
  891. ll.push({
  892. value: item.llfdl,
  893. name: item.name,
  894. });
  895. gzssdl.push({
  896. text: item.name,
  897. value: item.gzssdl,
  898. });
  899. jxssdl.push({
  900. text: item.name,
  901. value: item.jxssdl,
  902. });
  903. xnssdl.push({
  904. text: item.name,
  905. value: item.xnssdl,
  906. });
  907. xdssdl.push({
  908. text: item.name,
  909. value: item.xdssdl,
  910. });
  911. slssdl.push({
  912. text: item.name,
  913. value: item.slssdl,
  914. });
  915. });
  916. analyis.push(
  917. {
  918. title: "故障损失电量",
  919. yAxisIndex: 0,
  920. value: gzssdl,
  921. },
  922. {
  923. title: "检修损失电量",
  924. yAxisIndex: 0,
  925. value: jxssdl,
  926. },
  927. {
  928. title: "性能损失电量",
  929. yAxisIndex: 0,
  930. value: xnssdl,
  931. },
  932. {
  933. title: "限电损失电量",
  934. yAxisIndex: 0,
  935. value: xdssdl,
  936. },
  937. {
  938. title: "受累损失电量",
  939. yAxisIndex: 0,
  940. value: slssdl,
  941. }
  942. );
  943. that.tableData.data = dataTab;
  944. that.innerFdl = fdl;
  945. that.outerFdl = fdl;
  946. that.innerCz = cz;
  947. that.outerCz = cz;
  948. that.innerLl = ll;
  949. that.outerLl = ll;
  950. that.analyis = analyis;
  951. },
  952. });
  953. },
  954. AjaxDbfx() {
  955. var that = this;
  956. var data = that.dbData;
  957. that.windNum = data[0].name;
  958. that.windNum2 = data[1].name;
  959. that.tabs = [
  960. {
  961. name: "发电量",
  962. windData1: data[0].fdl,
  963. windData2: data[1].fdl,
  964. },
  965. {
  966. name: "故障损失电量",
  967. windData1: data[0].gzssdl,
  968. windData2: data[1].gzssdl,
  969. },
  970. {
  971. name: "检修损失电量",
  972. windData1: data[0].jxssdl,
  973. windData2: data[1].jxssdl,
  974. },
  975. {
  976. name: "性能未达标损失电量",
  977. windData1: data[0].xnssdl,
  978. windData2: data[1].xnssdl,
  979. },
  980. {
  981. name: "受累损失电量",
  982. windData1: data[0].slssdl,
  983. windData2: data[1].slssdl,
  984. },
  985. {
  986. name: "风能利用率",
  987. windData1: data[0].fnlyl,
  988. windData2: data[1].fnlyl,
  989. },
  990. {
  991. name: "故障损失率",
  992. windData1: data[0].gzssl,
  993. windData2: data[1].gzssl,
  994. },
  995. {
  996. name: "检修损失率",
  997. windData1: data[0].jxssl,
  998. windData2: data[1].jxssl,
  999. },
  1000. {
  1001. name: "弃风率",
  1002. windData1: data[0].qfl,
  1003. windData2: data[1].qfl,
  1004. },
  1005. {
  1006. name: "性能损失率",
  1007. windData1: data[0].xnssl,
  1008. windData2: data[1].xnssl,
  1009. },
  1010. {
  1011. name: "受累损失率",
  1012. windData1: data[0].slssl,
  1013. windData2: data[1].slssl,
  1014. },
  1015. ];
  1016. that.radarValue = [
  1017. {
  1018. indicator: [
  1019. "风能利用率",
  1020. "故障损失率",
  1021. "检修损失率",
  1022. "弃风率",
  1023. "性能损失率",
  1024. "受累损失率",
  1025. ],
  1026. data: [
  1027. {
  1028. value: [
  1029. data[0].fnlylpm,
  1030. data[0].gzsslpm,
  1031. data[0].jxsslpm,
  1032. data[0].qflpm,
  1033. data[0].xnsslpm,
  1034. data[0].slsslpm,
  1035. ],
  1036. },
  1037. {
  1038. value: [
  1039. data[1].fnlylpm,
  1040. data[1].gzsslpm,
  1041. data[1].jxsslpm,
  1042. data[1].qflpm,
  1043. data[1].xnsslpm,
  1044. data[1].slsslpm,
  1045. ],
  1046. },
  1047. ],
  1048. },
  1049. ];
  1050. var analyis = [],
  1051. gzssdl = [],
  1052. jxssdl = [],
  1053. xnssdl = [],
  1054. xdssdl = [],
  1055. slssdl = [];
  1056. data.forEach((item, index) => {
  1057. gzssdl.push({
  1058. text: item.name,
  1059. value: item.gzssdl,
  1060. });
  1061. jxssdl.push({
  1062. text: item.name,
  1063. value: item.jxssdl,
  1064. });
  1065. xnssdl.push({
  1066. text: item.name,
  1067. value: item.xnssdl,
  1068. });
  1069. xdssdl.push({
  1070. text: item.name,
  1071. value: item.xdssdl,
  1072. });
  1073. slssdl.push({
  1074. text: item.name,
  1075. value: item.slssdl,
  1076. });
  1077. });
  1078. analyis.push(
  1079. {
  1080. title: "故障损失电量",
  1081. yAxisIndex: 0,
  1082. value: gzssdl,
  1083. },
  1084. {
  1085. title: "检修损失电量",
  1086. yAxisIndex: 0,
  1087. value: jxssdl,
  1088. },
  1089. {
  1090. title: "性能损失电量",
  1091. yAxisIndex: 0,
  1092. value: xnssdl,
  1093. },
  1094. {
  1095. title: "限电损失电量",
  1096. yAxisIndex: 0,
  1097. value: xdssdl,
  1098. },
  1099. {
  1100. title: "受累损失电量",
  1101. yAxisIndex: 0,
  1102. value: slssdl,
  1103. }
  1104. );
  1105. that.analyisDialog = analyis;
  1106. },
  1107. tooltip(param, callback) {
  1108. var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
  1109. var result = param[0].axisValue;
  1110. param.forEach((value, index) => {
  1111. result +=
  1112. "<br />" +
  1113. `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
  1114. value.seriesName +
  1115. ":" +
  1116. value.value;
  1117. });
  1118. callback(result);
  1119. return true;
  1120. },
  1121. dbfx() {
  1122. var that = this;
  1123. if (that.tableId.length == 2) {
  1124. that.dialogVisible = true;
  1125. this.AjaxDbfx();
  1126. this.clearDb();
  1127. }
  1128. },
  1129. clearDb() {
  1130. //清空对标状态
  1131. this.$refs.curRef.clearCheckBox();
  1132. this.tableId = [];
  1133. this.dbData = [];
  1134. this.checkLength = 0;
  1135. },
  1136. back() {
  1137. this.detailShow = 1;
  1138. this.clearDb();
  1139. },
  1140. onSort() {
  1141. this.clearDb();
  1142. },
  1143. },
  1144. };
  1145. </script>
  1146. <style lang="less">
  1147. .decision-page-2 {
  1148. .content .project-table {
  1149. tbody {
  1150. height: calc(100vh - 24.5vh);
  1151. }
  1152. }
  1153. .project-table {
  1154. overflow: auto;
  1155. tbody {
  1156. height: 145px;
  1157. }
  1158. th,
  1159. td {
  1160. color: #b2bdc0;
  1161. &:nth-child(1) {
  1162. width: 50px;
  1163. }
  1164. &:nth-child(2) {
  1165. width: 50px;
  1166. }
  1167. }
  1168. }
  1169. .action {
  1170. text-decoration: underline;
  1171. color: @green;
  1172. cursor: pointer;
  1173. }
  1174. }
  1175. </style>