Decision2Xldb.vue 31 KB

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