Decision3.vue 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511
  1. <template>
  2. <div class="decision-page-3">
  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. clearable
  32. placeholder="请选择"
  33. popper-class="select"
  34. >
  35. <el-option
  36. v-for="(item, index) in XiangMu"
  37. :key="item.id"
  38. :value="index"
  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-date-picker
  49. v-model="value4"
  50. @change="BeginChange(value4)"
  51. type="date"
  52. value-format="YYYY-MM-DD"
  53. placeholder="选择日期"
  54. popper-class="date-select"
  55. >
  56. </el-date-picker>
  57. </div>
  58. </div>
  59. <div class="query-item">
  60. <div class="lable">结束日期:</div>
  61. <div class="search-input">
  62. <el-date-picker
  63. v-model="value5"
  64. @change="EndChange(value5)"
  65. type="date"
  66. value-format="YYYY-MM-DD"
  67. placeholder="选择日期"
  68. popper-class="date-select"
  69. >
  70. </el-date-picker>
  71. <div class="unit svg-icon svg-icon-gray">
  72. <svg-icon :svgid="''" />
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="query-actions">
  78. <button class="btn green">搜索</button>
  79. <button class="btn" @click="dbfx">对标分析</button>
  80. <button class="btn" v-show="detailShow == 2" @click="back">返回</button>
  81. </div>
  82. </div>
  83. <toolbar-panel title="性能对标" :showLine="false"></toolbar-panel>
  84. <!-- 列表 -->
  85. <div v-show="detailShow == 1">
  86. <div class="project-table">
  87. <Table :data="tableData" ref="curRef"></Table>
  88. </div>
  89. <!-- 风资源列表 -->
  90. <!-- <div class="direction-info mg-b-16">
  91. <table class="com-table">
  92. <tbody>
  93. <tr>
  94. <td v-for="(col, i) of tableData.column" :key="i">
  95. <div v-if="i == 0">22</div>
  96. <div v-if="i == 1">风资源</div>
  97. <div v-if="i != 0 && i != 1">
  98. <div class="direction-title">3.123</div>
  99. <div class="direction-chart">
  100. <DirectionRadarChart :width="'70%'" :height="'232px'" :value="90" />
  101. <div class="legend mg-t-16">
  102. <span class="dot"></span>
  103. <span>静风频率为2</span>
  104. </div>
  105. </div>
  106. </div>
  107. </td>
  108. </tr>
  109. </tbody>
  110. </table>
  111. </div> -->
  112. <el-row class="mg-b-16">
  113. <el-col :span="12">
  114. <panel title="发电量占比">
  115. <dual-pie-chart
  116. height="21.296vh"
  117. :innerData="innerFdl"
  118. :outerData="outerFdl"
  119. />
  120. </panel>
  121. </el-col>
  122. <el-col :span="12">
  123. <panel
  124. :title="
  125. XiangMu[value2].name.substr(0, XiangMu[value2].name.length - 1) +
  126. '占比'
  127. "
  128. >
  129. <dual-pie-chart
  130. height="21.296vh"
  131. :innerData="innerCz"
  132. :outerData="outerCz"
  133. />
  134. </panel>
  135. </el-col>
  136. </el-row>
  137. <panel title="损失电量分析">
  138. <multiple-bar-chart
  139. :height="'calc(100vh - 21.3vh - 430px)'"
  140. :list="analyis"
  141. :customerTooltip="true"
  142. @tooltip="tooltip"
  143. :units="['(万KWh)']"
  144. />
  145. </panel>
  146. </div>
  147. <el-row :type="'flex'" class="content" v-show="detailShow == 2">
  148. <el-col :span="24" class="pd-l-8">
  149. <panel :title="'风机对标列表明细'" :showLine="false">
  150. <div class="project-table">
  151. <Table :data="tableDataDetail" ref="curRef" height="70vh"></Table>
  152. </div>
  153. </panel>
  154. </el-col>
  155. </el-row>
  156. <el-dialog
  157. title="对标排名分析"
  158. v-model="dialogVisible"
  159. width="70%"
  160. top="10vh"
  161. custom-class="modal"
  162. :close-on-click-modal="false"
  163. >
  164. <dayinfo
  165. :radarValue="radarValue"
  166. :title="[windNum,windNum2]"
  167. :windNum="windNum"
  168. :windNum2="windNum2"
  169. :tabs="tabs"
  170. :analyisDialog="analyisDialog"
  171. />
  172. </el-dialog>
  173. </div>
  174. </template>
  175. <script>
  176. import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
  177. import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
  178. import SvgIcon from "../../components/coms/icon/svg-icon.vue";
  179. import Panel from "../../components/coms/panel/panel.vue";
  180. import Table from "./table.vue";
  181. import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
  182. import Dayinfo from "./dayinfo.vue";
  183. import api from "@api/economic/index.js";
  184. export default {
  185. components: {
  186. Panel,
  187. Table,
  188. SvgIcon,
  189. DualPieChart,
  190. MultipleBarChart,
  191. Dayinfo,
  192. ToolbarPanel,
  193. },
  194. data() {
  195. let that = this;
  196. return {
  197. tableIdArr: [], //放checkbox的id数组
  198. tableId: [],
  199. checkLength: 0, //对标分析只能选择2个
  200. tableData: {
  201. column: that.column1,
  202. data: [],
  203. },
  204. tableDataDetail: {
  205. column: [
  206. {
  207. name: "",
  208. field: "index",
  209. is_num: false,
  210. is_light: false,
  211. },
  212. {
  213. name: "",
  214. field: "fdl",
  215. is_num: false,
  216. is_light: false,
  217. display: "none",
  218. },
  219. {
  220. name: "",
  221. field: "check",
  222. is_num: false,
  223. is_light: false,
  224. template: function () {
  225. return "<input class='check curCheckBox checkItem' type='CheckBox'/>";
  226. },
  227. click: function (event, data) {
  228. var dataId = that.tableIdArr[data.index - 1];
  229. if (event.target.checked == false && that.checkLength <= 2) {
  230. that.tableId.forEach((item, i) => {
  231. if (item == dataId) {
  232. that.tableId.splice(i, 1);
  233. that.dbData.splice(i, 1);
  234. }
  235. });
  236. that.checkLength--;
  237. } else if (event.target.checked && that.checkLength < 2) {
  238. that.tableId.push(dataId);
  239. that.dbData.push(data);
  240. that.checkLength++;
  241. } else if (that.checkLength == 2) {
  242. event.target.checked = false;
  243. }
  244. },
  245. },
  246. {
  247. name: "风机名称",
  248. field: "name",
  249. is_num: false,
  250. is_light: false,
  251. },
  252. {
  253. name: "综合排名",
  254. field: "zhpm",
  255. is_num: false,
  256. is_light: false,
  257. sortable: true,
  258. },
  259. {
  260. name: "故障损失",
  261. field: "gzssdl",
  262. is_num: false,
  263. is_light: false,
  264. sortable: true,
  265. },
  266. {
  267. name: "检修损失排名",
  268. field: "jxssdlpm",
  269. is_num: false,
  270. is_light: false,
  271. sortable: true,
  272. },
  273. {
  274. name: "检修损失",
  275. field: "jxssdl",
  276. is_num: false,
  277. is_light: false,
  278. sortable: true,
  279. },
  280. {
  281. name: "性能损失排名",
  282. field: "xnssdlpm",
  283. is_num: false,
  284. is_light: false,
  285. sortable: true,
  286. },
  287. {
  288. name: "性能损失",
  289. field: "xnssdl",
  290. is_num: false,
  291. is_light: false,
  292. sortable: true,
  293. },
  294. {
  295. name: "限电损失排名",
  296. field: "xdssdlpm",
  297. is_num: false,
  298. is_light: false,
  299. sortable: true,
  300. },
  301. {
  302. name: "限电损失",
  303. field: "xdssdl",
  304. is_num: false,
  305. is_light: false,
  306. sortable: true,
  307. },
  308. {
  309. name: "受累损失排名",
  310. field: "slssdlpm",
  311. is_num: false,
  312. is_light: false,
  313. sortable: true,
  314. },
  315. {
  316. name: "受累损失",
  317. field: "slssdl",
  318. is_num: false,
  319. is_light: false,
  320. sortable: true,
  321. },
  322. {
  323. name: "故障损失率排名",
  324. field: "gzsslpm",
  325. is_num: false,
  326. is_light: false,
  327. sortable: true,
  328. },
  329. {
  330. name: "故障损失率(%)",
  331. field: "gzssl",
  332. is_num: false,
  333. is_light: false,
  334. sortable: true,
  335. },
  336. {
  337. name: "检修损失率排名",
  338. field: "jxsslpm",
  339. is_num: false,
  340. is_light: false,
  341. sortable: true,
  342. },
  343. {
  344. name: "检修损失率(%)",
  345. field: "jxssl",
  346. is_num: false,
  347. is_light: false,
  348. sortable: true,
  349. },
  350. {
  351. name: "弃风率排名",
  352. field: "qflpm",
  353. is_num: false,
  354. is_light: false,
  355. sortable: true,
  356. },
  357. {
  358. name: "弃风率(%)",
  359. field: "qfl",
  360. is_num: false,
  361. is_light: false,
  362. sortable: true,
  363. },
  364. {
  365. name: "性能损失率排名",
  366. field: "xnsslpm",
  367. is_num: false,
  368. is_light: false,
  369. sortable: true,
  370. },
  371. {
  372. name: "性能损失率(%)",
  373. field: "xnssl",
  374. is_num: false,
  375. is_light: false,
  376. sortable: true,
  377. },
  378. {
  379. name: "受累损失率排名",
  380. field: "slsslpm",
  381. is_num: false,
  382. is_light: false,
  383. sortable: true,
  384. },
  385. {
  386. name: "受累损失率(%)",
  387. field: "slssl",
  388. is_num: false,
  389. is_light: false,
  390. sortable: true,
  391. },
  392. ],
  393. data: [],
  394. },
  395. ChangZhan: [], //场站
  396. XiangMu: [
  397. {
  398. //项目
  399. name: "弃风率",
  400. id: 1,
  401. },
  402. {
  403. name: "故障损失率",
  404. id: 2,
  405. },
  406. {
  407. name: "检修损失率",
  408. id: 3,
  409. },
  410. {
  411. name: "性能损失率",
  412. id: 4,
  413. },
  414. {
  415. name: "受累损失率",
  416. id: 5,
  417. },
  418. ],
  419. value1: [],
  420. value2: 0,
  421. value3: [],
  422. value4: "",
  423. value5: "",
  424. innerFdl: [], //发电量占比
  425. outerFdl: [],
  426. innerCz: [], //各场站损失电量占比
  427. outerCz: [],
  428. analyis: [], //损失电量分析
  429. dialogVisible: false,
  430. radarValue: [],
  431. windNum: "dd",
  432. windNum2: "dd",
  433. tabs: [],
  434. analyisDialog: [],
  435. detailShow: 1,
  436. ajaxData: [],
  437. column1: [
  438. {
  439. //弃风率
  440. name: "",
  441. field: "index",
  442. is_num: false,
  443. is_light: false,
  444. },
  445. {
  446. name: "",
  447. field: "check",
  448. is_num: false,
  449. is_light: false,
  450. template: () => {
  451. return "<input class='check curCheckBox checkItem' type='CheckBox' />";
  452. },
  453. click: function (event, data) {
  454. that.checkClick(event, data);
  455. },
  456. },
  457. {
  458. name: "名称",
  459. field: "name",
  460. is_num: false,
  461. is_light: false,
  462. },
  463. {
  464. name: "限电损失排名",
  465. field: "xdssdlpm",
  466. is_num: false,
  467. is_light: false,
  468. sortable: true,
  469. },
  470. {
  471. name: "限电损失",
  472. field: "xdssdl",
  473. is_num: false,
  474. is_light: false,
  475. sortable: true,
  476. },
  477. {
  478. name: "弃风率排名",
  479. field: "qflpm",
  480. is_num: false,
  481. is_light: false,
  482. sortable: true,
  483. },
  484. {
  485. name: "弃风率(%)",
  486. field: "qfl",
  487. is_num: false,
  488. is_light: false,
  489. sortable: true,
  490. },
  491. {
  492. name: "操作",
  493. field: "cz",
  494. is_num: false,
  495. is_light: false,
  496. template: function () {
  497. return "<a class='action'>详情</a>";
  498. },
  499. click: function (event, data) {
  500. that.detailClick(data);
  501. },
  502. },
  503. ],
  504. column2: [
  505. {
  506. //故障损失率
  507. name: "",
  508. field: "index",
  509. is_num: false,
  510. is_light: false,
  511. },
  512. {
  513. name: "",
  514. field: "check",
  515. is_num: false,
  516. is_light: false,
  517. template: () => {
  518. return "<input class='check curCheckBox checkItem' type='CheckBox' />";
  519. },
  520. click: function (event, data) {
  521. that.checkClick(event, data);
  522. },
  523. },
  524. {
  525. name: "名称",
  526. field: "name",
  527. is_num: false,
  528. is_light: false,
  529. },
  530. {
  531. name: "故障损失排名",
  532. field: "gzssdlpm",
  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: "gzsslpm",
  547. is_num: false,
  548. is_light: false,
  549. sortable: true,
  550. },
  551. {
  552. name: "故障损失率(%)",
  553. field: "gzssl",
  554. is_num: false,
  555. is_light: false,
  556. sortable: true,
  557. },
  558. {
  559. name: "操作",
  560. field: "cz",
  561. is_num: false,
  562. is_light: false,
  563. template: function () {
  564. return "<a class='action'>详情</a>";
  565. },
  566. click: function (event, data) {
  567. that.detailClick(data);
  568. },
  569. },
  570. ],
  571. column3: [
  572. {
  573. //检修损失率
  574. name: "",
  575. field: "index",
  576. is_num: false,
  577. is_light: false,
  578. },
  579. {
  580. name: "",
  581. field: "check",
  582. is_num: false,
  583. is_light: false,
  584. template: () => {
  585. return "<input class='check curCheckBox checkItem' type='CheckBox' />";
  586. },
  587. click: function (event, data) {
  588. that.checkClick(event, data);
  589. },
  590. },
  591. {
  592. name: "名称",
  593. field: "name",
  594. is_num: false,
  595. is_light: false,
  596. },
  597. {
  598. name: "检修损失排名",
  599. field: "jxssdlpm",
  600. is_num: false,
  601. is_light: false,
  602. sortable: true,
  603. },
  604. {
  605. name: "检修损失",
  606. field: "jxssdl",
  607. is_num: false,
  608. is_light: false,
  609. sortable: true,
  610. },
  611. {
  612. name: "检修损失率排名",
  613. field: "jxsslpm",
  614. is_num: false,
  615. is_light: false,
  616. sortable: true,
  617. },
  618. {
  619. name: "检修损失率(%)",
  620. field: "jxssl",
  621. is_num: false,
  622. is_light: false,
  623. sortable: true,
  624. },
  625. {
  626. name: "操作",
  627. field: "cz",
  628. is_num: false,
  629. is_light: false,
  630. template: function () {
  631. return "<a class='action'>详情</a>";
  632. },
  633. click: function (event, data) {
  634. that.detailClick(data);
  635. },
  636. },
  637. ],
  638. column4: [
  639. {
  640. //性能损失率
  641. name: "",
  642. field: "index",
  643. is_num: false,
  644. is_light: false,
  645. },
  646. {
  647. name: "",
  648. field: "check",
  649. is_num: false,
  650. is_light: false,
  651. template: () => {
  652. return "<input class='check curCheckBox checkItem' type='CheckBox' />";
  653. },
  654. click: function (event, data) {
  655. that.checkClick(event, data);
  656. },
  657. },
  658. {
  659. name: "名称",
  660. field: "name",
  661. is_num: false,
  662. is_light: false,
  663. },
  664. {
  665. name: "性能损失排名",
  666. field: "xnssdlpm",
  667. is_num: false,
  668. is_light: false,
  669. sortable: true,
  670. },
  671. {
  672. name: "性能损失",
  673. field: "xnssdl",
  674. is_num: false,
  675. is_light: false,
  676. sortable: true,
  677. },
  678. {
  679. name: "性能损失率排名",
  680. field: "xnsslpm",
  681. is_num: false,
  682. is_light: false,
  683. sortable: true,
  684. },
  685. {
  686. name: "性能损失率(%)",
  687. field: "xnssl",
  688. is_num: false,
  689. is_light: false,
  690. sortable: true,
  691. },
  692. {
  693. name: "操作",
  694. field: "cz",
  695. is_num: false,
  696. is_light: false,
  697. template: function () {
  698. return "<a class='action'>详情</a>";
  699. },
  700. click: function (event, data) {
  701. that.detailClick(data);
  702. },
  703. },
  704. ],
  705. column5: [
  706. {
  707. //受累损失率
  708. name: "",
  709. field: "index",
  710. is_num: false,
  711. is_light: false,
  712. },
  713. {
  714. name: "",
  715. field: "check",
  716. is_num: false,
  717. is_light: false,
  718. template: () => {
  719. return "<input class='check curCheckBox checkItem' type='CheckBox' />";
  720. },
  721. click: function (event, data) {
  722. that.checkClick(event, data);
  723. },
  724. },
  725. {
  726. name: "名称",
  727. field: "name",
  728. is_num: false,
  729. is_light: false,
  730. },
  731. {
  732. name: "受累损失排名",
  733. field: "slssdlpm",
  734. is_num: false,
  735. is_light: false,
  736. sortable: true,
  737. },
  738. {
  739. name: "受累损失",
  740. field: "slssdl",
  741. is_num: false,
  742. is_light: false,
  743. sortable: true,
  744. },
  745. {
  746. name: "受累损失率排名",
  747. field: "slsslpm",
  748. is_num: false,
  749. is_light: false,
  750. sortable: true,
  751. },
  752. {
  753. name: "受累损失率(%)",
  754. field: "slssl",
  755. is_num: false,
  756. is_light: false,
  757. sortable: true,
  758. },
  759. {
  760. name: "操作",
  761. field: "cz",
  762. is_num: false,
  763. is_light: false,
  764. template: function () {
  765. return "<a class='action'>详情</a>";
  766. },
  767. click: function (event, data) {
  768. that.detailClick(data);
  769. },
  770. },
  771. ],
  772. dbData: [],
  773. };
  774. },
  775. created() {
  776. this.ChangZhanVal();
  777. this.value4 = this.getTime(1);
  778. this.value5 = this.getTime(2);
  779. this.AjaxCommon();
  780. },
  781. methods: {
  782. ChangZhanVal() {
  783. api.benchmarkingWplist2({
  784. projects: val,
  785. }).then((res) => {
  786. this.ChangZhan = res.data;
  787. });
  788. // var that = this;
  789. // that.API.requestData({
  790. // method: "GET",
  791. // baseURL: "http://10.83.66.220:8020/",
  792. // subUrl: "benchmarking/wplist",
  793. // success(res) {
  794. // that.ChangZhan = res.data;
  795. // },
  796. // });
  797. },
  798. ChangZhanChange(val) {
  799. this.value1 = val;
  800. this.AjaxCommon();
  801. this.clearDb();
  802. },
  803. XiangMuChange(val) {
  804. this.tableType(this.value2);
  805. this.clearDb();
  806. },
  807. BeginChange(val) {
  808. this.value4 = val;
  809. this.AjaxCommon();
  810. this.clearDb();
  811. },
  812. EndChange(val) {
  813. this.value5 = val;
  814. this.AjaxCommon();
  815. this.clearDb();
  816. },
  817. getTime(val) {
  818. //时间戳处理,val=1是默认开始时间(当前月第一天),val=2是默认结束时间(今天)
  819. var date = new Date();
  820. var year = date.getFullYear(),
  821. month = date.getMonth() + 1,
  822. day = date.getDate();
  823. month >= 1 && month <= 9 ? (month = "0" + month) : "";
  824. day >= 0 && day <= 9 ? (day = "0" + day) : "";
  825. var begin = year + "-" + month + "-01";
  826. var end = year + "-" + month + "-" + day;
  827. if (val == 1) {
  828. return begin;
  829. } else if (val == 2) {
  830. return end;
  831. }
  832. },
  833. AjaxCommon() {
  834. api.benchmarkingWxssl({
  835. wpids: this.value1,
  836. projectids: [],
  837. lineids: [],
  838. beginDate: this.value4,
  839. endDate: this.value5,
  840. target: "",
  841. sort: "",
  842. }).then((res) => {
  843. this.ajaxData = res.data;
  844. var analyis = [],
  845. gzssdl = [],
  846. jxssdl = [],
  847. xnssdl = [],
  848. xdssdl = [],
  849. slssdl = [];
  850. this.ajaxData.forEach((item, index) => {
  851. this.tableIdArr.push(item.id);
  852. gzssdl.push({
  853. text: item.name,
  854. value: item.gzssdl,
  855. });
  856. jxssdl.push({
  857. text: item.name,
  858. value: item.jxssdl,
  859. });
  860. xnssdl.push({
  861. text: item.name,
  862. value: item.xnssdl,
  863. });
  864. xdssdl.push({
  865. text: item.name,
  866. value: item.xdssdl,
  867. });
  868. slssdl.push({
  869. text: item.name,
  870. value: item.slssdl,
  871. });
  872. });
  873. analyis.push(
  874. {
  875. title: "故障损失电量",
  876. yAxisIndex: 0,
  877. value: gzssdl,
  878. },
  879. {
  880. title: "检修损失电量",
  881. yAxisIndex: 0,
  882. value: jxssdl,
  883. },
  884. {
  885. title: "性能损失电量",
  886. yAxisIndex: 0,
  887. value: xnssdl,
  888. },
  889. {
  890. title: "限电损失电量",
  891. yAxisIndex: 0,
  892. value: xdssdl,
  893. },
  894. {
  895. title: "受累损失电量",
  896. yAxisIndex: 0,
  897. value: slssdl,
  898. }
  899. );
  900. this.tableType(this.value2);
  901. this.analyis = analyis;
  902. });
  903. // var that = this;
  904. // that.API.requestData({
  905. // //五项损失率
  906. // method: "GET",
  907. // baseURL: "http://10.83.66.220:8020/",
  908. // subUrl: "benchmarking/wxssl",
  909. // data: {
  910. // wpids: that.value1,
  911. // projectids: [],
  912. // lineids: [],
  913. // beginDate: that.value4,
  914. // endDate: that.value5,
  915. // target: "",
  916. // sort: "",
  917. // },
  918. // success(res) {
  919. // that.ajaxData = res.data;
  920. // var analyis = [],
  921. // gzssdl = [],
  922. // jxssdl = [],
  923. // xnssdl = [],
  924. // xdssdl = [],
  925. // slssdl = [];
  926. // that.ajaxData.forEach((item, index) => {
  927. // that.tableIdArr.push(item.id);
  928. // gzssdl.push({
  929. // text: item.name,
  930. // value: item.gzssdl,
  931. // });
  932. // jxssdl.push({
  933. // text: item.name,
  934. // value: item.jxssdl,
  935. // });
  936. // xnssdl.push({
  937. // text: item.name,
  938. // value: item.xnssdl,
  939. // });
  940. // xdssdl.push({
  941. // text: item.name,
  942. // value: item.xdssdl,
  943. // });
  944. // slssdl.push({
  945. // text: item.name,
  946. // value: item.slssdl,
  947. // });
  948. // });
  949. // analyis.push(
  950. // {
  951. // title: "故障损失电量",
  952. // yAxisIndex: 0,
  953. // value: gzssdl,
  954. // },
  955. // {
  956. // title: "检修损失电量",
  957. // yAxisIndex: 0,
  958. // value: jxssdl,
  959. // },
  960. // {
  961. // title: "性能损失电量",
  962. // yAxisIndex: 0,
  963. // value: xnssdl,
  964. // },
  965. // {
  966. // title: "限电损失电量",
  967. // yAxisIndex: 0,
  968. // value: xdssdl,
  969. // },
  970. // {
  971. // title: "受累损失电量",
  972. // yAxisIndex: 0,
  973. // value: slssdl,
  974. // }
  975. // );
  976. // that.tableType(that.value2);
  977. // that.analyis = analyis;
  978. // },
  979. // });
  980. },
  981. AjaxDbfx() {
  982. var that = this;
  983. var data = that.dbData;
  984. that.windNum = data[0].name;
  985. that.windNum2 = data[1].name;
  986. console.log(data[0], data[1]);
  987. that.tabs = [
  988. {
  989. name: "发电量",
  990. windData1: data[0].fdl,
  991. windData2: data[1].fdl,
  992. },
  993. {
  994. name: "故障损失电量",
  995. windData1: data[0].gzssdl,
  996. windData2: data[1].gzssdl,
  997. },
  998. {
  999. name: "检修损失电量",
  1000. windData1: data[0].jxssdl,
  1001. windData2: data[1].jxssdl,
  1002. },
  1003. {
  1004. name: "性能未达标损失电量",
  1005. windData1: data[0].xnssdl,
  1006. windData2: data[1].xnssdl,
  1007. },
  1008. {
  1009. name: "受累损失电量",
  1010. windData1: data[0].slssdl,
  1011. windData2: data[1].slssdl,
  1012. },
  1013. {
  1014. name: "风能利用率",
  1015. windData1: data[0].fnlyl,
  1016. windData2: data[1].fnlyl,
  1017. },
  1018. {
  1019. name: "故障损失率",
  1020. windData1: data[0].gzssl,
  1021. windData2: data[1].gzssl,
  1022. },
  1023. {
  1024. name: "检修损失率",
  1025. windData1: data[0].jxssl,
  1026. windData2: data[1].jxssl,
  1027. },
  1028. {
  1029. name: "弃风率",
  1030. windData1: data[0].qfl,
  1031. windData2: data[1].qfl,
  1032. },
  1033. {
  1034. name: "性能损失率",
  1035. windData1: data[0].xnssl,
  1036. windData2: data[1].xnssl,
  1037. },
  1038. {
  1039. name: "受累损失率",
  1040. windData1: data[0].slssl,
  1041. windData2: data[1].slssl,
  1042. },
  1043. ];
  1044. that.radarValue = [
  1045. {
  1046. indicator: [
  1047. "风能利用率",
  1048. "故障损失率",
  1049. "检修损失率",
  1050. "弃风率",
  1051. "性能损失率",
  1052. "受累损失率",
  1053. ],
  1054. data: [
  1055. {
  1056. value: [
  1057. data[0].fnlylpm,
  1058. data[0].gzsslpm,
  1059. data[0].jxsslpm,
  1060. data[0].qflpm,
  1061. data[0].xnsslpm,
  1062. data[0].slsslpm,
  1063. ],
  1064. },
  1065. {
  1066. value: [
  1067. data[1].fnlylpm,
  1068. data[1].gzsslpm,
  1069. data[1].jxsslpm,
  1070. data[1].qflpm,
  1071. data[1].xnsslpm,
  1072. data[1].slsslpm,
  1073. ],
  1074. },
  1075. ],
  1076. },
  1077. ];
  1078. var analyis = [],
  1079. gzssdl = [],
  1080. jxssdl = [],
  1081. xnssdl = [],
  1082. xdssdl = [],
  1083. slssdl = [];
  1084. data.forEach((item, index) => {
  1085. gzssdl.push({
  1086. text: item.name,
  1087. value: item.gzssdl,
  1088. });
  1089. jxssdl.push({
  1090. text: item.name,
  1091. value: item.jxssdl,
  1092. });
  1093. xnssdl.push({
  1094. text: item.name,
  1095. value: item.xnssdl,
  1096. });
  1097. xdssdl.push({
  1098. text: item.name,
  1099. value: item.xdssdl,
  1100. });
  1101. slssdl.push({
  1102. text: item.name,
  1103. value: item.slssdl,
  1104. });
  1105. });
  1106. analyis.push(
  1107. {
  1108. title: "故障损失电量",
  1109. yAxisIndex: 0,
  1110. value: gzssdl,
  1111. },
  1112. {
  1113. title: "检修损失电量",
  1114. yAxisIndex: 0,
  1115. value: jxssdl,
  1116. },
  1117. {
  1118. title: "性能损失电量",
  1119. yAxisIndex: 0,
  1120. value: xnssdl,
  1121. },
  1122. {
  1123. title: "限电损失电量",
  1124. yAxisIndex: 0,
  1125. value: xdssdl,
  1126. },
  1127. {
  1128. title: "受累损失电量",
  1129. yAxisIndex: 0,
  1130. value: slssdl,
  1131. }
  1132. );
  1133. that.analyisDialog = analyis;
  1134. },
  1135. tooltip(param, callback) {
  1136. var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
  1137. var result = param[0].axisValue;
  1138. param.forEach((value, index) => {
  1139. result +=
  1140. "<br />" +
  1141. `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
  1142. value.seriesName +
  1143. ":" +
  1144. value.value;
  1145. });
  1146. callback(result);
  1147. return true;
  1148. },
  1149. dbfx() {
  1150. var that = this;
  1151. if (that.tableId.length == 2) {
  1152. that.dialogVisible = true;
  1153. this.AjaxDbfx();
  1154. this.clearDb();
  1155. }
  1156. },
  1157. clearDb() {
  1158. //清空对标状态
  1159. this.$refs.curRef.clearCheckBox();
  1160. this.tableId = [];
  1161. this.dbData = [];
  1162. this.checkLength = 0;
  1163. },
  1164. back() {
  1165. this.detailShow = 1;
  1166. this.clearDb();
  1167. },
  1168. detailClick(data) {
  1169. var that = this;
  1170. var dataId = that.tableIdArr[data.index - 1];
  1171. that.clearDb();
  1172. that.detailShow = 2;
  1173. api.benchmarkingDetails({
  1174. id: dataId,
  1175. beginDate: this.value4,
  1176. endDate: this.value5,
  1177. target: "",
  1178. sort: "",
  1179. }).then((res) => {
  1180. var dataTab = [];
  1181. res.data.forEach((item, index) => {
  1182. this.tableIdArr.push(item.id);
  1183. dataTab.push({
  1184. //表格
  1185. index: index + 1,
  1186. fdl: item.fdl,
  1187. name: item.name,
  1188. zhpm: item.zhpm,
  1189. gzssdl: item.gzssdl,
  1190. jxssdlpm: item.jxssdlpm,
  1191. jxssdl: item.jxssdl,
  1192. xnssdlpm: item.xnssdlpm,
  1193. xnssdl: item.xnssdl,
  1194. xdssdlpm: item.xdssdlpm,
  1195. xdssdl: item.xdssdl,
  1196. slssdlpm: item.slssdlpm,
  1197. slssdl: item.slssdl,
  1198. fnlylpm: item.fnlylpm,
  1199. fnlyl: item.fnlyl,
  1200. gzsslpm: item.gzsslpm,
  1201. gzssl: item.gzssl,
  1202. jxsslpm: item.jxsslpm,
  1203. jxssl: item.jxssl,
  1204. qflpm: item.qflpm,
  1205. qfl: item.qfl,
  1206. xnsslpm: item.xnsslpm,
  1207. xnssl: item.xnssl,
  1208. slsslpm: item.slsslpm,
  1209. slssl: item.slssl,
  1210. is_light: false,
  1211. });
  1212. });
  1213. this.tableDataDetail.data = dataTab;
  1214. });
  1215. // that.API.requestData({
  1216. // method: "GET",
  1217. // baseURL: "http://10.83.66.220:8020/",
  1218. // subUrl: "benchmarking/details",
  1219. // data: {
  1220. // id: dataId,
  1221. // beginDate: that.value4,
  1222. // endDate: that.value5,
  1223. // target: "",
  1224. // sort: "",
  1225. // },
  1226. // success(res) {
  1227. // var dataTab = [];
  1228. // res.data.forEach((item, index) => {
  1229. // that.tableIdArr.push(item.id);
  1230. // dataTab.push({
  1231. // //表格
  1232. // index: index + 1,
  1233. // fdl: item.fdl,
  1234. // name: item.name,
  1235. // zhpm: item.zhpm,
  1236. // gzssdl: item.gzssdl,
  1237. // jxssdlpm: item.jxssdlpm,
  1238. // jxssdl: item.jxssdl,
  1239. // xnssdlpm: item.xnssdlpm,
  1240. // xnssdl: item.xnssdl,
  1241. // xdssdlpm: item.xdssdlpm,
  1242. // xdssdl: item.xdssdl,
  1243. // slssdlpm: item.slssdlpm,
  1244. // slssdl: item.slssdl,
  1245. // fnlylpm: item.fnlylpm,
  1246. // fnlyl: item.fnlyl,
  1247. // gzsslpm: item.gzsslpm,
  1248. // gzssl: item.gzssl,
  1249. // jxsslpm: item.jxsslpm,
  1250. // jxssl: item.jxssl,
  1251. // qflpm: item.qflpm,
  1252. // qfl: item.qfl,
  1253. // xnsslpm: item.xnsslpm,
  1254. // xnssl: item.xnssl,
  1255. // slsslpm: item.slsslpm,
  1256. // slssl: item.slssl,
  1257. // is_light: false,
  1258. // });
  1259. // });
  1260. // that.tableDataDetail.data = dataTab;
  1261. // },
  1262. // });
  1263. },
  1264. checkClick(event, data) {
  1265. var that = this;
  1266. var dataId = that.tableIdArr[data.index - 1];
  1267. if (event.target.checked == false && that.checkLength <= 2) {
  1268. that.tableId.forEach((item, i) => {
  1269. if (item == dataId) {
  1270. that.tableId.splice(i, 1);
  1271. that.dbData.splice(i, 1);
  1272. }
  1273. });
  1274. that.checkLength--;
  1275. } else if (event.target.checked && that.checkLength < 2) {
  1276. that.tableId.push(dataId);
  1277. that.dbData.push(data);
  1278. that.checkLength++;
  1279. } else if (that.checkLength == 2) {
  1280. event.target.checked = false;
  1281. }
  1282. },
  1283. tableType(a) {
  1284. var that = this;
  1285. var dataTab = [],
  1286. fdl = [],
  1287. cz = [];
  1288. that.ajaxData.forEach((item, index) => {
  1289. fdl.push({
  1290. value: item.fdl,
  1291. name: item.name,
  1292. });
  1293. if (a == 0) {
  1294. dataTab.push({
  1295. //弃风率
  1296. index: index + 1,
  1297. name: item.name,
  1298. xdssdlpm: item.xdssdlpm,
  1299. xdssdl: item.xdssdl,
  1300. qflpm: item.qflpm,
  1301. qfl: item.qfl,
  1302. is_light: false,
  1303. });
  1304. cz.push({
  1305. value: item.xdssdl,
  1306. name: item.name,
  1307. });
  1308. }
  1309. if (a == 1) {
  1310. dataTab.push({
  1311. //故障损失率
  1312. index: index + 1,
  1313. name: item.name,
  1314. gzssdlpm: item.gzssdlpm,
  1315. gzssdl: item.gzssdl,
  1316. gzsslpm: item.gzsslpm,
  1317. gzssl: item.gzssl,
  1318. is_light: false,
  1319. });
  1320. cz.push({
  1321. value: item.gzssdl,
  1322. name: item.name,
  1323. });
  1324. }
  1325. if (a == 2) {
  1326. dataTab.push({
  1327. //检修损失率
  1328. index: index + 1,
  1329. name: item.name,
  1330. jxssdlpm: item.jxssdlpm,
  1331. jxssdl: item.jxssdl,
  1332. jxsslpm: item.jxsslpm,
  1333. jxssl: item.jxssl,
  1334. is_light: false,
  1335. });
  1336. cz.push({
  1337. value: item.jxssdl,
  1338. name: item.name,
  1339. });
  1340. }
  1341. if (a == 3) {
  1342. dataTab.push({
  1343. //性能损失率
  1344. index: index + 1,
  1345. name: item.name,
  1346. xnssdlpm: item.xnssdlpm,
  1347. xnssdl: item.xnssdl,
  1348. xnsslpm: item.xnsslpm,
  1349. xnssl: item.xnssl,
  1350. is_light: false,
  1351. });
  1352. cz.push({
  1353. value: item.xnssdl,
  1354. name: item.name,
  1355. });
  1356. }
  1357. if (a == 4) {
  1358. dataTab.push({
  1359. //受累损失率
  1360. index: index + 1,
  1361. name: item.name,
  1362. slssdlpm: item.slssdlpm,
  1363. slssdl: item.slssdl,
  1364. slsslpm: item.slsslpm,
  1365. slssl: item.slssl,
  1366. is_light: false,
  1367. });
  1368. cz.push({
  1369. value: item.slssdl,
  1370. name: item.name,
  1371. });
  1372. }
  1373. });
  1374. that.innerFdl = fdl;
  1375. that.outerFdl = fdl;
  1376. that.innerCz = cz;
  1377. that.outerCz = cz;
  1378. that.tableData.data = dataTab;
  1379. if (a == 0) {
  1380. that.tableData.column = that.column1;
  1381. }
  1382. if (a == 1) {
  1383. that.tableData.column = that.column2;
  1384. }
  1385. if (a == 2) {
  1386. that.tableData.column = that.column3;
  1387. }
  1388. if (a == 3) {
  1389. that.tableData.column = that.column4;
  1390. }
  1391. if (a == 4) {
  1392. that.tableData.column = that.column5;
  1393. }
  1394. },
  1395. },
  1396. };
  1397. </script>
  1398. <style lang="less">
  1399. .decision-page-3 {
  1400. .content .project-table {
  1401. tbody {
  1402. height: calc(100vh - 24.5vh);
  1403. }
  1404. }
  1405. .info {
  1406. overflow: auto;
  1407. height: calc(100vh - 150px);
  1408. }
  1409. .project-table {
  1410. overflow: auto;
  1411. .com-table {
  1412. tbody {
  1413. height: 145px;
  1414. padding-right: 0px;
  1415. }
  1416. th,
  1417. td {
  1418. color: #b2bdc0;
  1419. &:nth-child(1) {
  1420. width: 32px;
  1421. }
  1422. &:nth-child(2) {
  1423. width: 183px;
  1424. }
  1425. }
  1426. }
  1427. }
  1428. .direction-info {
  1429. .com-table {
  1430. tbody {
  1431. padding-right: 0px;
  1432. }
  1433. th,
  1434. td {
  1435. color: #b2bdc0;
  1436. padding: 0;
  1437. &:nth-child(1) {
  1438. width: 32px;
  1439. background-color: fade(#536268, 20);
  1440. }
  1441. &:nth-child(2) {
  1442. width: 183px;
  1443. background-color: fade(#536268, 40);
  1444. }
  1445. .direction-title {
  1446. background-color: fade(#536268, 20);
  1447. font-size: @fontsize-s;
  1448. line-height: 2.963vh;
  1449. }
  1450. .direction-chart {
  1451. padding-top: 48px;
  1452. .legend {
  1453. display: flex;
  1454. align-items: center;
  1455. justify-content: center;
  1456. margin-top: 32px;
  1457. margin-bottom: 16px;
  1458. .dot {
  1459. width: 7px;
  1460. height: 7px;
  1461. background: @green;
  1462. display: inline-block;
  1463. margin-right: 8px;
  1464. }
  1465. }
  1466. }
  1467. }
  1468. }
  1469. }
  1470. .action {
  1471. text-decoration: underline;
  1472. color: @green;
  1473. cursor: pointer;
  1474. }
  1475. }
  1476. </style>