index.vue 36 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457
  1. <template>
  2. <div class="parcel-box">
  3. <div class="title">
  4. <el-select
  5. size="mini"
  6. :disabled="displayDetail"
  7. v-model="tabIndex"
  8. placeholder="请选择"
  9. @change="tabClick"
  10. >
  11. <el-option
  12. v-for="item in tabOptions"
  13. :key="item.id"
  14. :label="item.name"
  15. :value="item.id"
  16. >
  17. </el-option>
  18. </el-select>
  19. <el-select
  20. size="mini"
  21. :disabled="displayDetail"
  22. v-model="company"
  23. placeholder="请选择"
  24. @change="handleCompanyChange(company)"
  25. >
  26. <el-option
  27. v-for="item in companyOptions"
  28. :key="item.id"
  29. :label="item.aname"
  30. :value="item.id"
  31. >
  32. </el-option>
  33. </el-select>
  34. <el-select
  35. size="mini"
  36. :disabled="displayDetail"
  37. v-model="stationObj"
  38. placeholder="请选择"
  39. @change="handleStationChange(stationObj)"
  40. clearable
  41. >
  42. <el-option
  43. v-for="item in stationList"
  44. :key="item.id"
  45. :label="item.aname"
  46. :value="item.id"
  47. >
  48. </el-option>
  49. </el-select>
  50. <div class="station">
  51. 开始日期
  52. <div class="search-input">
  53. <el-date-picker
  54. :disabled="displayDetail"
  55. v-model="starTime"
  56. type="date"
  57. value-format="YYYY-MM-DD"
  58. placeholder="选择日期"
  59. popper-class="date-select"
  60. >
  61. </el-date-picker>
  62. </div>
  63. </div>
  64. <div class="station">
  65. 结束日期
  66. <div class="search-input">
  67. <el-date-picker
  68. :disabled="displayDetail"
  69. v-model="endTime"
  70. type="date"
  71. value-format="YYYY-MM-DD"
  72. placeholder="选择日期"
  73. popper-class="date-select"
  74. >
  75. </el-date-picker>
  76. </div>
  77. </div>
  78. <div class="but">
  79. <el-button
  80. round
  81. size="mini"
  82. class="buttons"
  83. :disabled="displayDetail"
  84. @click="gerCndb"
  85. >搜索</el-button
  86. >
  87. <el-button
  88. round
  89. size="mini"
  90. class="buttons"
  91. @click="dbfx"
  92. :disabled="
  93. chooseList.length <= 5 && chooseList.length > 1 ? false : true
  94. "
  95. >对标分析</el-button
  96. >
  97. <el-button
  98. round
  99. size="mini"
  100. class="buttons"
  101. @click="goBack"
  102. v-if="displayDetail"
  103. >返回</el-button
  104. >
  105. <el-button round size="mini" class="buttons" @click="funthb"
  106. >同环比</el-button
  107. >
  108. <!-- <el-button round size="mini" class="buttons">导出</el-button> -->
  109. </div>
  110. </div>
  111. <div class="bodys" v-if="!displayDetail">
  112. <div class="line">
  113. <div class="leftContent"><span>场内对标</span></div>
  114. <div class="rightContent"></div>
  115. </div>
  116. <div class="economicTable" :style="{ height: echartsHeight }">
  117. <el-table
  118. :data="tableData"
  119. ref="multipleTable"
  120. size="mini"
  121. :height="echartsHeight"
  122. :cell-style="{ padding: '4px' }"
  123. :row-style="{ height: '0' }"
  124. stripe
  125. @selection-change="handleCurrentChange"
  126. >
  127. <el-table-column type="selection" width="55" align="center">
  128. </el-table-column>
  129. <el-table-column
  130. align="center"
  131. prop="zhpm"
  132. label="综合排名"
  133. width="80"
  134. sortable
  135. >
  136. </el-table-column>
  137. <el-table-column
  138. align="center"
  139. prop="date"
  140. label="日期"
  141. sortable
  142. width="100"
  143. >
  144. </el-table-column>
  145. <el-table-column
  146. align="center"
  147. prop="fdlpm"
  148. label="发电量排名"
  149. sortable
  150. width="65"
  151. >
  152. </el-table-column>
  153. <el-table-column
  154. align="center"
  155. prop="fdl"
  156. label="发电量"
  157. sortable
  158. width="65"
  159. >
  160. </el-table-column>
  161. <el-table-column
  162. align="center"
  163. prop="gzssdlpm"
  164. label="故障损失排名"
  165. sortable
  166. width="65"
  167. >
  168. </el-table-column>
  169. <el-table-column
  170. align="center"
  171. prop="gzssdl"
  172. label="故障损失"
  173. sortable
  174. width="65"
  175. >
  176. </el-table-column>
  177. <el-table-column
  178. align="center"
  179. prop="jxssdlpm"
  180. label="检修损失排名"
  181. sortable
  182. width="65"
  183. >
  184. </el-table-column>
  185. <el-table-column
  186. align="center"
  187. prop="jxssdl"
  188. label="检修损失"
  189. sortable
  190. width="65"
  191. >
  192. </el-table-column>
  193. <el-table-column
  194. align="center"
  195. prop="xnssdlpm"
  196. label="性能损失排名"
  197. sortable
  198. width="65"
  199. >
  200. </el-table-column>
  201. <el-table-column
  202. align="center"
  203. prop="xnssdl"
  204. label="性能损失"
  205. sortable
  206. width="65"
  207. >
  208. </el-table-column>
  209. <el-table-column
  210. align="center"
  211. prop="xdssdlpm"
  212. label="限电损失排名"
  213. sortable
  214. width="65"
  215. >
  216. </el-table-column>
  217. <el-table-column
  218. align="center"
  219. prop="xdssdl"
  220. label="限电损失"
  221. sortable
  222. width="65"
  223. >
  224. </el-table-column>
  225. <el-table-column
  226. align="center"
  227. prop="slssdlpm"
  228. label="受累损失排名"
  229. sortable
  230. width="65"
  231. >
  232. </el-table-column>
  233. <el-table-column
  234. align="center"
  235. prop="slssdl"
  236. label="受累损失"
  237. sortable
  238. width="65"
  239. >
  240. </el-table-column>
  241. <el-table-column
  242. align="center"
  243. prop="fnlylpm"
  244. :label="(tabIndex === -1 ? '风能' : '光能') + '利用率排名'"
  245. sortable
  246. width="65"
  247. >
  248. </el-table-column>
  249. <el-table-column
  250. align="center"
  251. prop="fnlyl"
  252. :label="(tabIndex === -1 ? '风能' : '光能') + '利用率(%)'"
  253. sortable
  254. width="65"
  255. >
  256. </el-table-column>
  257. <el-table-column
  258. align="center"
  259. prop="gzsslpm"
  260. label="故障损失率排名"
  261. sortable
  262. width="65"
  263. >
  264. </el-table-column>
  265. <el-table-column
  266. align="center"
  267. prop="gzssl"
  268. label="故障损失率(%)"
  269. sortable
  270. width="65"
  271. >
  272. </el-table-column>
  273. <el-table-column
  274. align="center"
  275. prop="jxsslpm"
  276. label="检修损失率排名"
  277. sortable
  278. width="65"
  279. >
  280. </el-table-column>
  281. <el-table-column
  282. align="center"
  283. prop="jxssl"
  284. label="检修损失率(%)"
  285. sortable
  286. width="65"
  287. >
  288. </el-table-column>
  289. <el-table-column
  290. align="center"
  291. prop="qflpm"
  292. :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
  293. sortable
  294. width="65"
  295. >
  296. </el-table-column>
  297. <el-table-column
  298. align="center"
  299. prop="qfl"
  300. :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
  301. sortable
  302. width="65"
  303. >
  304. </el-table-column>
  305. <el-table-column
  306. align="center"
  307. prop="xnsslpm"
  308. label="性能损失率排名"
  309. sortable
  310. width="65"
  311. >
  312. </el-table-column>
  313. <el-table-column
  314. align="center"
  315. prop="xnssl"
  316. label="性能损失率(%)"
  317. sortable
  318. width="65"
  319. >
  320. </el-table-column>
  321. <el-table-column
  322. align="center"
  323. prop="slsslpm"
  324. label="受累损失率排名"
  325. sortable
  326. width="65"
  327. >
  328. </el-table-column>
  329. <el-table-column
  330. align="center"
  331. prop="slssl"
  332. label="受累损失率(%)"
  333. sortable
  334. width="65"
  335. >
  336. </el-table-column>
  337. <el-table-column align="center" prop="" label="操作">
  338. <template v-slot="scope">
  339. <span
  340. @click="goDetail(scope.row)"
  341. style="cursor: pointer; color: #1c99ff"
  342. >详情</span
  343. >
  344. </template>
  345. </el-table-column>
  346. </el-table>
  347. </div>
  348. </div>
  349. <div class="echarts" v-if="!displayDetail">
  350. <div class="pie-echarts">
  351. <div class="chart-name">
  352. <div class="point left bottom"></div>
  353. <div class="point right bottom"></div>
  354. 损失电量分析
  355. </div>
  356. <PieChart
  357. :lossPower="lossPower"
  358. width="100%"
  359. height="20vh"
  360. :showLable="false"
  361. ></PieChart>
  362. </div>
  363. <div class="bar-echarts">
  364. <div class="chart-name">
  365. <div class="point left bottom"></div>
  366. <div class="point right bottom"></div>
  367. 五项损失
  368. </div>
  369. <BarCharts
  370. :list="barList"
  371. width="100%"
  372. height="29vh"
  373. :showLegend="true"
  374. :xdate="false"
  375. :colorIndex="true"
  376. ></BarCharts>
  377. </div>
  378. </div>
  379. <div v-if="displayDetail">
  380. <el-table
  381. :data="detailTable"
  382. ref="multipleTable"
  383. size="mini"
  384. height="88vh"
  385. :cell-style="{ padding: '0px' }"
  386. :row-style="{ height: '0' }"
  387. stripe
  388. @selection-change="handleCurrentChange"
  389. >
  390. <el-table-column type="selection" width="55" align="center">
  391. </el-table-column>
  392. <el-table-column
  393. align="center"
  394. prop="name"
  395. label="风机名称"
  396. width="150"
  397. sortable
  398. >
  399. </el-table-column>
  400. <el-table-column align="center" prop="zhpm" label="综合排名" sortable>
  401. </el-table-column>
  402. <el-table-column align="center" prop="gzssdl" label="故障损失" sortable>
  403. </el-table-column>
  404. <el-table-column
  405. align="center"
  406. prop="jxssdlpm"
  407. label="检修损失排名"
  408. sortable
  409. >
  410. </el-table-column>
  411. <el-table-column align="center" prop="jxssdl" label="检修损失" sortable>
  412. </el-table-column>
  413. <el-table-column
  414. align="center"
  415. prop="xnssdlpm"
  416. label="性能损失排名"
  417. sortable
  418. >
  419. </el-table-column>
  420. <el-table-column align="center" prop="xnssdl" label="性能损失" sortable>
  421. </el-table-column>
  422. <el-table-column
  423. align="center"
  424. prop="xdssdlpm"
  425. label="限电损失排名"
  426. sortable
  427. >
  428. </el-table-column>
  429. <el-table-column align="center" prop="xdssdl" label="限电损失" sortable>
  430. </el-table-column>
  431. <el-table-column
  432. align="center"
  433. prop="slssdlpm"
  434. label="受累损失排名"
  435. sortable
  436. >
  437. </el-table-column>
  438. <el-table-column align="center" prop="slssdl" label="受累损失" sortable>
  439. </el-table-column>
  440. <el-table-column
  441. align="center"
  442. prop="gzsslpm"
  443. label="故障损失率排名"
  444. sortable
  445. >
  446. </el-table-column>
  447. <el-table-column
  448. align="center"
  449. prop="gzssl"
  450. label="故障损失率(%)"
  451. sortable
  452. >
  453. </el-table-column>
  454. <el-table-column
  455. align="center"
  456. prop="jxsslpm"
  457. label="检修损失率排名"
  458. sortable
  459. >
  460. </el-table-column>
  461. <el-table-column
  462. align="center"
  463. prop="jxssl"
  464. label="检修损失率(%)"
  465. sortable
  466. >
  467. </el-table-column>
  468. <el-table-column
  469. align="center"
  470. prop="qflpm"
  471. :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
  472. sortable
  473. >
  474. </el-table-column>
  475. <el-table-column
  476. align="center"
  477. prop="qfl"
  478. :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
  479. sortable
  480. >
  481. </el-table-column>
  482. <el-table-column
  483. align="center"
  484. prop="xnsslpm"
  485. label="性能损失率排名"
  486. sortable
  487. >
  488. </el-table-column>
  489. <el-table-column
  490. align="center"
  491. prop="xnssl"
  492. label="性能损失率(%)"
  493. sortable
  494. >
  495. </el-table-column>
  496. <el-table-column
  497. align="center"
  498. prop="slsslpm"
  499. label="受累损失率排名"
  500. sortable
  501. >
  502. </el-table-column>
  503. <el-table-column
  504. align="center"
  505. prop="slssl"
  506. label="受累损失率(%)"
  507. sortable
  508. >
  509. </el-table-column>
  510. </el-table>
  511. </div>
  512. <el-dialog
  513. class="dialogs"
  514. width="90%"
  515. top="40px"
  516. v-model="dialogVisible"
  517. :show-close="true"
  518. >
  519. <template #title>
  520. <div class="dialog-title">
  521. <img
  522. class="dialog-title-img"
  523. src="@assets/img/images/dialog-title.png"
  524. />
  525. <div class="title">对标排名分析</div>
  526. </div>
  527. </template>
  528. <div class="dialog-body">
  529. <img class="dialog-img" src="@assets/img/images/dialog.png" />
  530. <dayinfo
  531. :radarValue="radarValue"
  532. :title="[windNum, windNum2]"
  533. :windNum="windNum"
  534. :windNum2="windNum2"
  535. :windNum3="windNum3"
  536. :windNum4="windNum4"
  537. :windNum5="windNum5"
  538. :tabs="tabs"
  539. :analyisDialog="analyisDialog"
  540. />
  541. </div>
  542. </el-dialog>
  543. <el-dialog
  544. class="dialogs"
  545. width="94%"
  546. top="40px"
  547. v-model="thbVisible"
  548. :show-close="true"
  549. >
  550. <template #title>
  551. <div class="dialog-title">
  552. <img
  553. class="dialog-title-img"
  554. src="@assets/img/images/dialog-title.png"
  555. />
  556. <div class="title">同环比分析</div>
  557. </div>
  558. </template>
  559. <div class="dialog-body">
  560. <img class="dialog-img" src="@assets/img/images/dialog.png" />
  561. <div class="economicTable" :style="{ height: echartsHeight }">
  562. <el-table
  563. :data="thbData"
  564. ref="multipleTable1"
  565. size="mini"
  566. :height="echartsHeight"
  567. :cell-style="{ padding: '4px' }"
  568. :row-style="{ height: '0' }"
  569. stripe
  570. >
  571. <el-table-column
  572. align="center"
  573. label-class-name="s-tb-th"
  574. prop="zhpm"
  575. label="综合排名"
  576. minWidth="80"
  577. sortable
  578. >
  579. </el-table-column>
  580. <el-table-column
  581. align="center"
  582. label-class-name="s-tb-th"
  583. prop="name"
  584. label="类型"
  585. sortable
  586. minWidth="100"
  587. >
  588. </el-table-column>
  589. <el-table-column
  590. align="center"
  591. label-class-name="s-tb-th"
  592. prop="fdlpm"
  593. label="发电量排名"
  594. sortable
  595. minWidth="65"
  596. >
  597. </el-table-column>
  598. <el-table-column
  599. align="center"
  600. label-class-name="s-tb-th"
  601. prop="fdl"
  602. label="发电量"
  603. sortable
  604. minWidth="65"
  605. >
  606. </el-table-column>
  607. <el-table-column
  608. align="center"
  609. label-class-name="s-tb-th"
  610. prop="gzssdlpm"
  611. label="故障损失排名"
  612. sortable
  613. minWidth="65"
  614. >
  615. </el-table-column>
  616. <el-table-column
  617. align="center"
  618. label-class-name="s-tb-th"
  619. prop="gzssdl"
  620. label="故障损失"
  621. sortable
  622. minWidth="65"
  623. >
  624. </el-table-column>
  625. <el-table-column
  626. align="center"
  627. label-class-name="s-tb-th"
  628. prop="jxssdlpm"
  629. label="检修损失排名"
  630. sortable
  631. minWidth="65"
  632. >
  633. </el-table-column>
  634. <el-table-column
  635. align="center"
  636. label-class-name="s-tb-th"
  637. prop="jxssdl"
  638. label="检修损失"
  639. sortable
  640. minWidth="65"
  641. >
  642. </el-table-column>
  643. <el-table-column
  644. align="center"
  645. label-class-name="s-tb-th"
  646. prop="xnssdlpm"
  647. label="性能损失排名"
  648. sortable
  649. minWidth="65"
  650. >
  651. </el-table-column>
  652. <el-table-column
  653. align="center"
  654. label-class-name="s-tb-th"
  655. prop="xnssdl"
  656. label="性能损失"
  657. sortable
  658. minWidth="65"
  659. >
  660. </el-table-column>
  661. <el-table-column
  662. align="center"
  663. label-class-name="s-tb-th"
  664. prop="xdssdlpm"
  665. label="限电损失排名"
  666. sortable
  667. minWidth="65"
  668. >
  669. </el-table-column>
  670. <el-table-column
  671. align="center"
  672. label-class-name="s-tb-th"
  673. prop="xdssdl"
  674. label="限电损失"
  675. sortable
  676. minWidth="65"
  677. >
  678. </el-table-column>
  679. <el-table-column
  680. align="center"
  681. label-class-name="s-tb-th"
  682. prop="slssdlpm"
  683. label="受累损失排名"
  684. sortable
  685. minWidth="65"
  686. >
  687. </el-table-column>
  688. <el-table-column
  689. align="center"
  690. label-class-name="s-tb-th"
  691. prop="slssdl"
  692. label="受累损失"
  693. sortable
  694. minWidth="65"
  695. >
  696. </el-table-column>
  697. <el-table-column
  698. align="center"
  699. label-class-name="s-tb-th"
  700. prop="fnlylpm"
  701. :label="(tabIndex === -1 ? '风能' : '光能') + '利用率排名'"
  702. sortable
  703. minWidth="65"
  704. >
  705. </el-table-column>
  706. <el-table-column
  707. align="center"
  708. label-class-name="s-tb-th"
  709. prop="fnlyl"
  710. :label="(tabIndex === -1 ? '风能' : '光能') + '利用率(%)'"
  711. sortable
  712. minWidth="65"
  713. >
  714. </el-table-column>
  715. <el-table-column
  716. align="center"
  717. label-class-name="s-tb-th"
  718. prop="gzsslpm"
  719. label="故障损失率排名"
  720. sortable
  721. minWidth="65"
  722. >
  723. </el-table-column>
  724. <el-table-column
  725. align="center"
  726. label-class-name="s-tb-th"
  727. prop="gzssl"
  728. label="故障损失率(%)"
  729. sortable
  730. minWidth="65"
  731. >
  732. </el-table-column>
  733. <el-table-column
  734. align="center"
  735. label-class-name="s-tb-th"
  736. prop="jxsslpm"
  737. label="检修损失率排名"
  738. sortable
  739. minWidth="65"
  740. >
  741. </el-table-column>
  742. <el-table-column
  743. align="center"
  744. label-class-name="s-tb-th"
  745. prop="jxssl"
  746. label="检修损失率(%)"
  747. sortable
  748. minWidth="65"
  749. >
  750. </el-table-column>
  751. <el-table-column
  752. align="center"
  753. label-class-name="s-tb-th"
  754. prop="qflpm"
  755. :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
  756. sortable
  757. minWidth="65"
  758. >
  759. </el-table-column>
  760. <el-table-column
  761. align="center"
  762. label-class-name="s-tb-th"
  763. prop="qfl"
  764. :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
  765. sortable
  766. minWidth="65"
  767. >
  768. </el-table-column>
  769. <el-table-column
  770. align="center"
  771. label-class-name="s-tb-th"
  772. prop="xnsslpm"
  773. label="性能损失率排名"
  774. sortable
  775. minWidth="65"
  776. >
  777. </el-table-column>
  778. <el-table-column
  779. align="center"
  780. label-class-name="s-tb-th"
  781. prop="xnssl"
  782. label="性能损失率(%)"
  783. sortable
  784. minWidth="65"
  785. >
  786. </el-table-column>
  787. <el-table-column
  788. align="center"
  789. label-class-name="s-tb-th"
  790. prop="slsslpm"
  791. label="受累损失率排名"
  792. sortable
  793. minWidth="65"
  794. >
  795. </el-table-column>
  796. <el-table-column
  797. align="center"
  798. label-class-name="s-tb-th"
  799. prop="slssl"
  800. label="受累损失率(%)"
  801. sortable
  802. minWidth="65"
  803. >
  804. </el-table-column>
  805. </el-table>
  806. </div>
  807. </div>
  808. </el-dialog>
  809. </div>
  810. </template>
  811. <script>
  812. import dayjs from "dayjs";
  813. import { companys } from "@/api/curveAnalyse";
  814. import {
  815. GetOrganization,
  816. GetStationByCompany,
  817. GetProjectList,
  818. GetLineList,
  819. GetSquareList,
  820. } from "@/api/headerNav.js";
  821. import { getStation, cndb, thb, details } from "@/api/performance";
  822. import PieChart from "../../homePage/components/pieChart.vue";
  823. import BarCharts from "../../homePage/components/barCharts.vue";
  824. import dayinfo from "../compontent/dayinfo.vue";
  825. export default {
  826. name: "siteBenchmarking", //场内对标
  827. components: {
  828. PieChart,
  829. BarCharts,
  830. dayinfo,
  831. },
  832. data() {
  833. return {
  834. company: "",
  835. companyOptions: [],
  836. stationObj: "",
  837. stationList: [],
  838. starTime: "",
  839. endTime: "",
  840. tabIndex: -2,
  841. tabOptions: [
  842. { id: -1, name: "风电" },
  843. { id: -2, name: "光伏" },
  844. ],
  845. tableData: [],
  846. detailTable: [],
  847. chooseList: [],
  848. lossPower: [],
  849. barList: [],
  850. displayDetail: false,
  851. dialogVisible: false,
  852. radarValue: [],
  853. windNum: "",
  854. windNum2: "",
  855. windNum3: "",
  856. windNum4: "",
  857. windNum5: "",
  858. tabs: [],
  859. analyisDialog: [],
  860. screenHeight: window.innerHeight,
  861. echartsHeight: "55vh",
  862. //同环比
  863. thbVisible: false,
  864. thbData: [],
  865. };
  866. },
  867. created() {
  868. // let date = new Date();
  869. // date.setDate(1);
  870. // let month = parseInt(date.getMonth() + 1);
  871. // let day = date.getDate();
  872. // if (month < 10) {
  873. // month = '0' + month;
  874. // }
  875. // if (day < 10) {
  876. // day = '0' + day;
  877. // }
  878. // this.starTime = date.getFullYear() + '-' + month + '-' + day;
  879. this.starTime = dayjs(new Date().getTime() - 60000 * 60 * 24 * 7).format(
  880. "YYYY-MM-DD"
  881. );
  882. this.endTime = dayjs(new Date().getTime()).format("YYYY-MM-DD");
  883. this.initialization();
  884. },
  885. mounted() {
  886. if (this.screenHeight > 1100) {
  887. this.echartsHeight = "58vh";
  888. } else {
  889. this.echartsHeight = "55vh";
  890. }
  891. window.onresize = () => {
  892. return (() => {
  893. window.screenHeight = window.innerHeight;
  894. this.screenHeight = window.screenHeight;
  895. })();
  896. };
  897. },
  898. methods: {
  899. funthb() {
  900. thb({
  901. companys: this.company,
  902. type: this.tabIndex,
  903. beginDate: this.starTime,
  904. endDate: this.endTime,
  905. wpids: this.stationObj,
  906. }).then((res) => {
  907. if (res.data) {
  908. this.thbData = res.data;
  909. this.thbVisible = true;
  910. }
  911. });
  912. },
  913. tabClick(val) {
  914. this.tabIndex = val;
  915. this.getStation(this.company);
  916. this.gerCndb();
  917. // this.initialization();
  918. },
  919. initialization() {
  920. GetOrganization({ type: this.tabIndex }).then((res) => {
  921. if (res.data) {
  922. this.company = res.data[0].id;
  923. this.companyOptions = res.data;
  924. this.getStation(res.data[0].id);
  925. }
  926. });
  927. },
  928. getStation(companyids) {
  929. GetStationByCompany({
  930. companyids: companyids,
  931. type: this.tabIndex,
  932. }).then((res) => {
  933. if (res.data.length) {
  934. this.stationList = res.data;
  935. this.stationObj = res.data[0].id;
  936. } else {
  937. this.stationList = [];
  938. }
  939. this.gerCndb();
  940. });
  941. },
  942. gerCndb() {
  943. cndb({
  944. companys: this.company,
  945. type: this.tabIndex,
  946. beginDate: this.starTime,
  947. endDate: this.endTime,
  948. wpids: this.stationObj,
  949. target: "",
  950. sort: "",
  951. }).then((res) => {
  952. if (res.data) {
  953. let barList = [
  954. {
  955. name: "故障损失电量",
  956. children: [],
  957. date: [],
  958. },
  959. {
  960. name: "检修损失电量",
  961. children: [],
  962. },
  963. {
  964. name: "性能损失电量",
  965. children: [],
  966. },
  967. {
  968. name: "限电损失电量",
  969. children: [],
  970. },
  971. {
  972. name: "受累损失电量",
  973. children: [],
  974. },
  975. ];
  976. this.tableData = res.data;
  977. let lossPower = [];
  978. res.data.forEach((item) => {
  979. let obj = {
  980. name: item.date,
  981. value: item.zssdl,
  982. };
  983. lossPower.push(obj);
  984. barList[0].date.push(item.date);
  985. barList[0].children.push(item.gzssdl);
  986. barList[1].children.push(item.jxssdl);
  987. barList[2].children.push(item.xnssdl);
  988. barList[3].children.push(item.xdssdl);
  989. barList[4].children.push(item.slssdl);
  990. });
  991. this.lossPower = lossPower;
  992. this.barList = barList;
  993. }
  994. });
  995. },
  996. handleStationChange(val) {
  997. this.stationObj = val;
  998. this.gerCndb();
  999. },
  1000. handleCompanyChange(val) {
  1001. this.company = val;
  1002. this.getStation(val);
  1003. this.gerCndb();
  1004. },
  1005. handleCurrentChange(val) {
  1006. if (val.length > 5) {
  1007. let del_row = val.shift();
  1008. this.$refs.multipleTable.toggleRowSelection(del_row, false);
  1009. }
  1010. let arr = [];
  1011. val.forEach((item, index) => {
  1012. if (index < 5) {
  1013. arr.push(item);
  1014. }
  1015. });
  1016. this.chooseList = arr;
  1017. },
  1018. goDetail(row) {
  1019. this.displayDetail = true;
  1020. details({
  1021. id: row.id,
  1022. beginDate: this.starTime,
  1023. endDate: this.endTime,
  1024. target: "",
  1025. sort: "",
  1026. }).then((res) => {
  1027. if (res.data) {
  1028. this.detailTable = res.data;
  1029. }
  1030. });
  1031. },
  1032. goBack() {
  1033. this.displayDetail = false;
  1034. },
  1035. dbfx() {
  1036. if (this.chooseList.length <= 5) {
  1037. this.dialogVisible = true;
  1038. this.AjaxDbfx();
  1039. }
  1040. },
  1041. AjaxDbfx() {
  1042. var data = this.chooseList;
  1043. this.windNum = data[0]?.date || data[0]?.name;
  1044. this.windNum2 = data[1]?.date || data[1]?.name;
  1045. this.windNum3 = data[2]?.date || data[2]?.name;
  1046. this.windNum4 = data[3]?.date || data[3]?.name;
  1047. this.windNum5 = data[4]?.date || data[4]?.name;
  1048. let tabs = [
  1049. {
  1050. name: "发电量",
  1051. code: "fdl",
  1052. },
  1053. {
  1054. name: "故障损失电量",
  1055. code: "gzssdl",
  1056. },
  1057. {
  1058. name: "检修损失电量",
  1059. code: "jxssdl",
  1060. },
  1061. {
  1062. name: "性能未达标损失电量",
  1063. code: "xnssdl",
  1064. },
  1065. {
  1066. name: "受累损失电量",
  1067. code: "slssdl",
  1068. },
  1069. {
  1070. name: "风能利用率",
  1071. code: "fnlyl",
  1072. },
  1073. {
  1074. name: "故障损失率",
  1075. code: "gzssl",
  1076. },
  1077. {
  1078. name: "检修损失率",
  1079. code: "jxssl",
  1080. },
  1081. {
  1082. name: "弃风率",
  1083. code: "qfl",
  1084. },
  1085. {
  1086. name: "性能损失率",
  1087. code: "xnssl",
  1088. },
  1089. {
  1090. name: "受累损失率",
  1091. code: "slssl",
  1092. },
  1093. ];
  1094. tabs = tabs.map((item) => {
  1095. if (item.code == "fnlyl") {
  1096. if (this.tabIndex == -1) {
  1097. item.name = "风能利用率";
  1098. } else {
  1099. item.name = "光能利用率";
  1100. }
  1101. }
  1102. if (item.code == "qfl") {
  1103. if (this.tabIndex == -1) {
  1104. item.name = "弃风率";
  1105. } else {
  1106. item.name = "弃光率";
  1107. }
  1108. }
  1109. return item;
  1110. });
  1111. tabs.forEach((val) => {
  1112. data.forEach((item, index) => {
  1113. val["windData" + (index + 1)] = item[val.code];
  1114. });
  1115. });
  1116. this.tabs = tabs;
  1117. let radarValue = [];
  1118. data.forEach((item, index) => {
  1119. let data = {
  1120. indicator: [
  1121. "风能利用率排名",
  1122. "故障损失率排名",
  1123. "检修损失率排名",
  1124. "弃风率排名",
  1125. "性能损失率排名",
  1126. "受累损失率排名",
  1127. ],
  1128. data: [
  1129. {
  1130. value: [
  1131. item.fnlylpm,
  1132. item.gzsslpm,
  1133. item.jxsslpm,
  1134. item.qflpm,
  1135. item.xnsslpm,
  1136. item.slsslpm,
  1137. ],
  1138. name: item.name,
  1139. },
  1140. ],
  1141. };
  1142. if (this.tabIndex == -1) {
  1143. data.indicator = [
  1144. "风能利用率排名",
  1145. "故障损失率排名",
  1146. "检修损失率排名",
  1147. "弃风率排名",
  1148. "性能损失率排名",
  1149. "受累损失率排名",
  1150. ];
  1151. } else {
  1152. data.indicator = [
  1153. "光能利用率排名",
  1154. "故障损失率排名",
  1155. "检修损失率排名",
  1156. "弃光率排名",
  1157. "性能损失率排名",
  1158. "受累损失率排名",
  1159. ];
  1160. }
  1161. radarValue.push(data);
  1162. });
  1163. this.radarValue = radarValue;
  1164. console.log(this.radarValue);
  1165. var analyis = [],
  1166. gzssdl = [],
  1167. jxssdl = [],
  1168. xnssdl = [],
  1169. xdssdl = [],
  1170. slssdl = [];
  1171. data.forEach((item, index) => {
  1172. gzssdl.push({
  1173. text: item.date || item.name,
  1174. value: item.gzssdl,
  1175. });
  1176. jxssdl.push({
  1177. text: item.date || item.name,
  1178. value: item.jxssdl,
  1179. });
  1180. xnssdl.push({
  1181. text: item.date || item.name,
  1182. value: item.xnssdl,
  1183. });
  1184. xdssdl.push({
  1185. text: item.date || item.name,
  1186. value: item.xdssdl,
  1187. });
  1188. slssdl.push({
  1189. text: item.date || item.name,
  1190. value: item.slssdl,
  1191. });
  1192. });
  1193. analyis.push(
  1194. {
  1195. title: "故障损失电量",
  1196. yAxisIndex: 0,
  1197. value: gzssdl,
  1198. },
  1199. {
  1200. title: "检修损失电量",
  1201. yAxisIndex: 0,
  1202. value: jxssdl,
  1203. },
  1204. {
  1205. title: "性能损失电量",
  1206. yAxisIndex: 0,
  1207. value: xnssdl,
  1208. },
  1209. {
  1210. title: "限电损失电量",
  1211. yAxisIndex: 0,
  1212. value: xdssdl,
  1213. },
  1214. {
  1215. title: "受累损失电量",
  1216. yAxisIndex: 0,
  1217. value: slssdl,
  1218. }
  1219. );
  1220. this.analyisDialog = analyis;
  1221. },
  1222. },
  1223. watch: {
  1224. screenHeight(val) {
  1225. console.log(val);
  1226. this.screenHeight = val;
  1227. if (val > 1100) {
  1228. this.echartsHeight = "58vh";
  1229. } else {
  1230. this.echartsHeight = "55vh";
  1231. }
  1232. },
  1233. },
  1234. };
  1235. </script>
  1236. <style lang="less" scoped>
  1237. .parcel-box {
  1238. padding: 0 15px;
  1239. }
  1240. /deep/ .s-tb-th {
  1241. height: 50px;
  1242. }
  1243. .title {
  1244. display: flex;
  1245. flex-direction: row;
  1246. align-items: center;
  1247. margin-top: 10px;
  1248. margin-bottom: 10px;
  1249. .tabCut {
  1250. display: inline-block;
  1251. margin: 0 10px;
  1252. div {
  1253. display: inline-block;
  1254. width: 60px;
  1255. height: 27px;
  1256. border: 1px solid #354460;
  1257. text-align: center;
  1258. line-height: 25px;
  1259. cursor: pointer;
  1260. }
  1261. div:nth-child(1) {
  1262. border-radius: 13px 0px 0px 13px;
  1263. }
  1264. div:nth-child(2) {
  1265. border-radius: 0px 13px 13px 0px;
  1266. }
  1267. .active {
  1268. background-color: #0c3378;
  1269. color: #fff;
  1270. }
  1271. .disabled {
  1272. cursor: not-allowed;
  1273. pointer-events: none;
  1274. }
  1275. }
  1276. .tabCut1 {
  1277. display: inline-block;
  1278. margin: 0 10px;
  1279. div {
  1280. display: inline-block;
  1281. width: 60px;
  1282. height: 27px;
  1283. border: 1px solid #354460;
  1284. text-align: center;
  1285. line-height: 25px;
  1286. cursor: pointer;
  1287. }
  1288. div:nth-child(1) {
  1289. border-radius: 13px 0px 0px 13px;
  1290. }
  1291. div:nth-child(3) {
  1292. border-radius: 0px 13px 13px 0px;
  1293. }
  1294. .active {
  1295. background-color: #0c3378;
  1296. color: #fff;
  1297. }
  1298. }
  1299. .station {
  1300. display: flex;
  1301. flex-direction: row;
  1302. align-items: center;
  1303. font-size: 14px;
  1304. font-family: Microsoft YaHei;
  1305. font-weight: 400;
  1306. color: #b3b3b3;
  1307. margin-right: 10px;
  1308. }
  1309. .search-input {
  1310. margin-left: 10px;
  1311. }
  1312. .but {
  1313. display: flex;
  1314. flex-direction: row;
  1315. align-content: center;
  1316. margin-left: 20px;
  1317. }
  1318. .buttons {
  1319. background-color: rgba(0, 70, 199, 0.2);
  1320. border: 1px solid #3b4c6c;
  1321. color: #b3b3b3;
  1322. font-size: 14px;
  1323. &:hover {
  1324. background-color: rgba(0, 70, 199, 0.5);
  1325. color: #ffffff;
  1326. }
  1327. }
  1328. }
  1329. .bodys {
  1330. width: 100%;
  1331. background-color: rgba(0, 0, 0, 0.45);
  1332. padding: 5px;
  1333. margin-bottom: 19px;
  1334. border-radius: 5px;
  1335. }
  1336. .line {
  1337. display: flex;
  1338. flex-direction: row;
  1339. align-items: center;
  1340. justify-content: space-between;
  1341. width: 100%;
  1342. padding-bottom: 5px;
  1343. .leftContent {
  1344. width: 242px;
  1345. height: 41px;
  1346. display: flex;
  1347. align-items: center;
  1348. background: url("../../../../../assets/imgs/title_left_bg.png");
  1349. span {
  1350. font-size: 16px;
  1351. font-family: Microsoft YaHei;
  1352. font-weight: 400;
  1353. color: #ffffff;
  1354. margin-left: 25px;
  1355. }
  1356. }
  1357. .rightContent {
  1358. width: 212px;
  1359. height: 28px;
  1360. margin-top: 13px;
  1361. background: url("../../../../../assets/imgs/title_right_bg.png");
  1362. }
  1363. }
  1364. .economicTable {
  1365. width: 100%;
  1366. }
  1367. .echarts {
  1368. width: 100%;
  1369. height: 26vh;
  1370. display: flex;
  1371. flex-direction: row;
  1372. align-items: center;
  1373. .chart-name {
  1374. display: flex;
  1375. align-items: center;
  1376. padding-left: 20px;
  1377. position: relative;
  1378. height: 39px;
  1379. width: 98%;
  1380. margin-left: 1%;
  1381. border-bottom: 1px solid rgba(153, 153, 153, 0.5);
  1382. font-size: 16px;
  1383. font-family: Microsoft YaHei;
  1384. font-weight: 400;
  1385. color: #ffffff;
  1386. }
  1387. .pie-echarts {
  1388. width: 30%;
  1389. height: 100%;
  1390. background: rgba(0, 0, 0, 0.45);
  1391. border-radius: 5px;
  1392. }
  1393. .bar-echarts {
  1394. width: 69%;
  1395. margin-left: 1%;
  1396. height: 100%;
  1397. background: rgba(0, 0, 0, 0.45);
  1398. border-radius: 5px;
  1399. }
  1400. }
  1401. .point {
  1402. width: 6px;
  1403. height: 1px;
  1404. background-color: #ffffff;
  1405. position: absolute;
  1406. &.left {
  1407. left: 0;
  1408. }
  1409. &.right {
  1410. right: 0;
  1411. }
  1412. &.top {
  1413. top: -1px;
  1414. }
  1415. &.bottom {
  1416. bottom: -1px;
  1417. }
  1418. }
  1419. /*去除表头全选框*/
  1420. ::v-deep .el-table__header-wrapper .el-checkbox {
  1421. display: none;
  1422. }
  1423. </style>