Decision2Cndb.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869
  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 v-model="value1" @change="ChangZhanChange(value1)" clearable placeholder="请选择"
  9. popper-class="select">
  10. <el-option v-for="item in ChangZhan" :key="item.id" :value="item.id" :label="item.name">
  11. </el-option>
  12. </el-select>
  13. </div>
  14. </div>
  15. <div class="query-item">
  16. <div class="lable">开始日期:</div>
  17. <div class="search-input">
  18. <el-date-picker v-model="value4" @change="BeginChange(value4)" type="date"
  19. value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
  20. </el-date-picker>
  21. </div>
  22. </div>
  23. <div class="query-item">
  24. <div class="lable">结束日期:</div>
  25. <div class="search-input">
  26. <el-date-picker v-model="value5" @change="EndChange(value5)" type="date"
  27. value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
  28. </el-date-picker>
  29. <div class="unit svg-icon svg-icon-gray">
  30. <svg-icon :svgid="''" />
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. <div class="query-actions">
  36. <button class="btn green">搜索</button>
  37. <button class="btn" @click="dbfx">对标分析</button>
  38. <button class="btn">导出</button>
  39. </div>
  40. </div>
  41. <div v-show="detailShow==1">
  42. <div class="mg-b-16">
  43. <div class="project-table">
  44. <Table :data="tableData" :canScroll="false"></Table>
  45. </div>
  46. </div>
  47. <el-row :type="'flex'" class="content">
  48. <el-col :span="24" class="pd-l-8">
  49. <panel title="损失电量分析">
  50. <multiple-bar-chart height="400px" :list="analyis" :customerTooltip="true" @tooltip="tooltip"
  51. :units='["(万KWh)"]' />
  52. </panel>
  53. </el-col>
  54. </el-row>
  55. <el-dialog title="对标排名分析" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal"
  56. :close-on-click-modal="false">
  57. <dayinfo :radarValue="radarValue" :windNum="windNum" :windNum2="windNum2" :tabs="tabs"
  58. :analyisDialog="analyisDialog" />
  59. </el-dialog>
  60. </div>
  61. <el-row :type="'flex'" class="content" v-show="detailShow==2">
  62. <el-col :span="24" class="pd-l-8">
  63. <panel :title="'风机对标列表明细'" :showLine="false">
  64. <div class="project-table">
  65. <Table :data="tableDataDetail"></Table>
  66. </div>
  67. </panel>
  68. </el-col>
  69. </el-row>
  70. </div>
  71. </template>
  72. <script>
  73. import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
  74. import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
  75. import SvgIcon from "../../components/coms/icon/svg-icon.vue";
  76. import Panel from "../../components/coms/panel/panel.vue";
  77. import Table from "../../components/coms/table/table.vue";
  78. import Dayinfo from "./dayinfo.vue";
  79. export default {
  80. components: {
  81. Panel,
  82. Table,
  83. SvgIcon,
  84. DualPieChart,
  85. MultipleBarChart,
  86. Dayinfo
  87. },
  88. data() {
  89. let that = this;
  90. return {
  91. tableIdArr: [], //放checkbox的id数组
  92. tableDateArr: [],
  93. tableDate: [],
  94. checkLength: 0, //对标分析只能选择2个
  95. tableData: {
  96. column: [{
  97. name: "",
  98. field: "index",
  99. is_num: false,
  100. is_light: false,
  101. },
  102. {
  103. name: "",
  104. field: "check",
  105. is_num: false,
  106. is_light: false,
  107. template: function() {
  108. return "<input class='check' type='CheckBox'/>";
  109. },
  110. click: function(event, data) {
  111. var dataDate = that.tableDateArr[data.index - 1];
  112. if (event.target.checked == false && that.checkLength <= 2) {
  113. that.tableDate.forEach((item, i) => {
  114. if (item == dataDate) {
  115. that.tableDate.splice(i, 1)
  116. }
  117. })
  118. that.checkLength--;
  119. } else if (event.target.checked && that.checkLength < 2) {
  120. that.tableDate.push(dataDate)
  121. that.checkLength++;
  122. } else if (that.checkLength == 2) {
  123. event.target.checked = false;
  124. }
  125. },
  126. },
  127. {
  128. name: "综合排名",
  129. field: "zhpm",
  130. is_num: false,
  131. is_light: false,
  132. sortable: true,
  133. },
  134. {
  135. name: "日期",
  136. field: "date",
  137. is_num: false,
  138. is_light: false,
  139. },
  140. {
  141. name: "发电量排名",
  142. field: "fdlpm",
  143. is_num: false,
  144. is_light: false,
  145. sortable: true,
  146. },
  147. {
  148. name: "发电量",
  149. field: "fdl",
  150. is_num: false,
  151. is_light: false,
  152. sortable: true,
  153. },
  154. {
  155. name: "故障损失电量排名",
  156. field: "gzssdlpm",
  157. is_num: false,
  158. is_light: false,
  159. sortable: true,
  160. },
  161. {
  162. name: "故障损失电量",
  163. field: "gzssdl",
  164. is_num: false,
  165. is_light: false,
  166. sortable: true,
  167. },
  168. {
  169. name: "检修损失电量排名",
  170. field: "jxssdlpm",
  171. is_num: false,
  172. is_light: false,
  173. sortable: true,
  174. },
  175. {
  176. name: "检修损失电量",
  177. field: "jxssdl",
  178. is_num: false,
  179. is_light: false,
  180. sortable: true,
  181. },
  182. {
  183. name: "性能损失电量排名",
  184. field: "xnssdlpm",
  185. is_num: false,
  186. is_light: true,
  187. sortable: true,
  188. },
  189. {
  190. name: "性能损失电量",
  191. field: "xnssdl",
  192. is_num: false,
  193. is_light: false,
  194. sortable: true,
  195. },
  196. {
  197. name: "限电损失电量排名",
  198. field: "xdssdlpm",
  199. is_num: false,
  200. is_light: false,
  201. sortable: true,
  202. },
  203. {
  204. name: "限电损失电量",
  205. field: "xdssdl",
  206. is_num: false,
  207. is_light: false,
  208. sortable: true,
  209. }, {
  210. name: "受累损失电量排名",
  211. field: "slssdlpm",
  212. is_num: false,
  213. is_light: false,
  214. sortable: true,
  215. }, {
  216. name: "受累损失电量",
  217. field: "slssdl",
  218. is_num: false,
  219. is_light: false,
  220. sortable: true,
  221. }, {
  222. name: "风能利用率排名",
  223. field: "fnlylpm",
  224. is_num: false,
  225. is_light: false,
  226. sortable: true,
  227. }, {
  228. name: "风能利用率(%)",
  229. field: "fnlyl",
  230. is_num: false,
  231. is_light: false,
  232. sortable: true,
  233. }, {
  234. name: "故障损失率排名",
  235. field: "gzsslpm",
  236. is_num: false,
  237. is_light: false,
  238. sortable: true,
  239. }, {
  240. name: "故障损失率(%)",
  241. field: "gzssl",
  242. is_num: false,
  243. is_light: false,
  244. sortable: true,
  245. }, {
  246. name: "检修损失率排名",
  247. field: "jxsslpm",
  248. is_num: false,
  249. is_light: false,
  250. sortable: true,
  251. }, {
  252. name: "检修损失率(%)",
  253. field: "jxssl",
  254. is_num: false,
  255. is_light: false,
  256. sortable: true,
  257. }, {
  258. name: "弃风率排名",
  259. field: "qflpm",
  260. is_num: false,
  261. is_light: false,
  262. sortable: true,
  263. }, {
  264. name: "弃风率(%)",
  265. field: "qfl",
  266. is_num: false,
  267. is_light: false,
  268. sortable: true,
  269. }, {
  270. name: "性能损失率排名",
  271. field: "xnsslpm",
  272. is_num: false,
  273. is_light: false,
  274. sortable: true,
  275. }, {
  276. name: "性能损失率(%)",
  277. field: "xnssl",
  278. is_num: false,
  279. is_light: false,
  280. sortable: true,
  281. }, {
  282. name: "受累损失率排名",
  283. field: "slsslpm",
  284. is_num: false,
  285. is_light: false,
  286. sortable: true,
  287. }, {
  288. name: "受累损失率(%)",
  289. field: "slssl",
  290. is_num: false,
  291. is_light: false,
  292. sortable: true,
  293. }, {
  294. name: "操作",
  295. field: "cz",
  296. is_num: false,
  297. is_light: false,
  298. template: function() {
  299. return "<a class='action'>详情</a>";
  300. },
  301. click: function(event, data) {
  302. var dataId = that.tableIdArr[data.index - 1];
  303. console.log(dataId)
  304. that.detailShow = 2;
  305. // var that = this;
  306. that.API.requestData({
  307. method: "GET",
  308. subUrl: "benchmarking/details",
  309. data: {
  310. id: dataId,
  311. beginDate: that.value4,
  312. endDate: that.value5,
  313. target: '',
  314. sort: ''
  315. },
  316. success(res) {
  317. var dataTab = [];
  318. res.data.forEach((item, index) => {
  319. that.tableIdArr.push(item.id);
  320. dataTab.push({ //表格
  321. index: index + 1,
  322. name: item.name,
  323. zhpm: item.zhpm,
  324. gzssdl: item.gzssdl,
  325. jxssdlpm: item.jxssdlpm,
  326. jxssdl: item.jxssdl,
  327. xnssdlpm: item.xnssdlpm,
  328. xnssdl: item.xnssdl,
  329. xdssdlpm: item.xdssdlpm,
  330. xdssdl: item.xdssdl,
  331. slssdlpm: item.slssdlpm,
  332. slssdl: item.slssdl,
  333. gzsslpm: item.gzsslpm,
  334. gzssl: item.gzssl,
  335. jxsslpm: item.jxsslpm,
  336. jxssl: item.jxssl,
  337. qflpm: item.qflpm,
  338. qfl: item.qfl,
  339. xnsslpm: item.xnsslpm,
  340. xnssl: item.xnssl,
  341. slsslpm: item.slsslpm,
  342. slssl: item.slssl,
  343. is_light: false
  344. })
  345. })
  346. that.tableDataDetail.data = dataTab;
  347. }
  348. });
  349. }
  350. }
  351. ],
  352. data: [],
  353. },
  354. tableDataDetail: {
  355. column: [{
  356. name: "",
  357. field: "index",
  358. is_num: false,
  359. is_light: false,
  360. },
  361. {
  362. name: "",
  363. field: "check",
  364. is_num: false,
  365. is_light: false,
  366. template: function() {
  367. return "<input class='check' type='CheckBox'/>";
  368. },
  369. click: function(event, data) {
  370. var dataId = that.tableIdArr[data.index - 1];
  371. if (event.target.checked == false && that.checkLength <= 2) {
  372. that.tableId.forEach((item, i) => {
  373. if (item == dataId) {
  374. that.tableId.splice(i, 1)
  375. }
  376. })
  377. that.checkLength--;
  378. } else if (event.target.checked && that.checkLength < 2) {
  379. that.tableId.push(dataId)
  380. that.checkLength++;
  381. } else if (that.checkLength == 2) {
  382. event.target.checked = false;
  383. }
  384. },
  385. },
  386. {
  387. name: "风机名称",
  388. field: "name",
  389. is_num: false,
  390. is_light: false,
  391. },
  392. {
  393. name: "综合排名",
  394. field: "zhpm",
  395. is_num: false,
  396. is_light: false,
  397. sortable: true,
  398. },
  399. {
  400. name: "故障损失电量",
  401. field: "gzssdl",
  402. is_num: false,
  403. is_light: false,
  404. sortable: true,
  405. },
  406. {
  407. name: "检修损失电量排名",
  408. field: "jxssdlpm",
  409. is_num: false,
  410. is_light: false,
  411. sortable: true,
  412. },
  413. {
  414. name: "检修损失电量",
  415. field: "jxssdl",
  416. is_num: false,
  417. is_light: false,
  418. sortable: true,
  419. },
  420. {
  421. name: "性能损失电量排名",
  422. field: "xnssdlpm",
  423. is_num: false,
  424. is_light: true,
  425. sortable: true,
  426. },
  427. {
  428. name: "性能损失电量",
  429. field: "xnssdl",
  430. is_num: false,
  431. is_light: false,
  432. sortable: true,
  433. },
  434. {
  435. name: "限电损失电量排名",
  436. field: "xdssdlpm",
  437. is_num: false,
  438. is_light: false,
  439. sortable: true,
  440. },
  441. {
  442. name: "限电损失电量",
  443. field: "xdssdl",
  444. is_num: false,
  445. is_light: false,
  446. sortable: true,
  447. }, {
  448. name: "受累损失电量排名",
  449. field: "slssdlpm",
  450. is_num: false,
  451. is_light: false,
  452. sortable: true,
  453. }, {
  454. name: "受累损失电量",
  455. field: "slssdl",
  456. is_num: false,
  457. is_light: false,
  458. sortable: true,
  459. }, {
  460. name: "故障损失率排名",
  461. field: "gzsslpm",
  462. is_num: false,
  463. is_light: false,
  464. sortable: true,
  465. }, {
  466. name: "故障损失率(%)",
  467. field: "gzssl",
  468. is_num: false,
  469. is_light: false,
  470. sortable: true,
  471. }, {
  472. name: "检修损失率排名",
  473. field: "jxsslpm",
  474. is_num: false,
  475. is_light: false,
  476. sortable: true,
  477. }, {
  478. name: "检修损失率(%)",
  479. field: "jxssl",
  480. is_num: false,
  481. is_light: false,
  482. sortable: true,
  483. }, {
  484. name: "弃风率排名",
  485. field: "qflpm",
  486. is_num: false,
  487. is_light: false,
  488. sortable: true,
  489. }, {
  490. name: "弃风率(%)",
  491. field: "qfl",
  492. is_num: false,
  493. is_light: false,
  494. sortable: true,
  495. }, {
  496. name: "性能损失率排名",
  497. field: "xnsslpm",
  498. is_num: false,
  499. is_light: false,
  500. sortable: true,
  501. }, {
  502. name: "性能损失率(%)",
  503. field: "xnssl",
  504. is_num: false,
  505. is_light: false,
  506. sortable: true,
  507. }, {
  508. name: "受累损失率排名",
  509. field: "slsslpm",
  510. is_num: false,
  511. is_light: false,
  512. sortable: true,
  513. }, {
  514. name: "受累损失率(%)",
  515. field: "slssl",
  516. is_num: false,
  517. is_light: false,
  518. sortable: true,
  519. }
  520. ],
  521. data: [],
  522. },
  523. options: [],
  524. ChangZhan: [], //场站
  525. XiangMu: [], //项目
  526. XianLu: [], //线路
  527. value1: [],
  528. value4: "",
  529. value5: "",
  530. analyis: [], //损失电量分析
  531. dialogVisible: false,
  532. radarValue: [],
  533. windNum: 'dd',
  534. windNum2: 'dd',
  535. tabs: [],
  536. analyisDialog: [],
  537. detailShow: 1,
  538. ajaxData:[]
  539. };
  540. },
  541. created() {
  542. this.ChangZhanVal();
  543. this.value4 = this.getTime(1);
  544. this.value5 = this.getTime(2);
  545. this.AjaxCommon();
  546. },
  547. methods: {
  548. ChangZhanVal() {
  549. var that = this;
  550. that.API.requestData({
  551. method: "GET",
  552. subUrl: "benchmarking/wplist",
  553. success(res) {
  554. that.ChangZhan = res.data;
  555. that.value1 = res.data[0].id;
  556. }
  557. });
  558. },
  559. ChangZhanChange(val) {
  560. this.value1 = val;
  561. this.AjaxCommon();
  562. },
  563. BeginChange(val) {
  564. this.value4 = val;
  565. this.AjaxCommon();
  566. },
  567. EndChange(val) {
  568. this.value5 = val;
  569. this.AjaxCommon();
  570. },
  571. getTime(val) { //时间戳处理,val=1是默认开始时间(当前月第一天),val=2是默认结束时间(今天)
  572. var date = new Date();
  573. var year = date.getFullYear(),
  574. month = date.getMonth() + 1,
  575. day = date.getDate();
  576. month >= 1 && month <= 9 ? (month = '0' + month) : '';
  577. day >= 0 && day <= 9 ? (day = '0' + day) : '';
  578. var begin = year + '-' + month + '-01';
  579. var end = year + '-' + month + '-' + day;
  580. if (val == 1) {
  581. return begin;
  582. } else if (val == 2) {
  583. return end;
  584. }
  585. },
  586. AjaxCommon() {
  587. var that = this;
  588. that.API.requestData({
  589. method: "GET",
  590. subUrl: "benchmarking/cndb",
  591. data: {
  592. wpid: that.value1,
  593. beginDate: that.value4,
  594. endDate: that.value5,
  595. target: '',
  596. sort: ''
  597. },
  598. success(res) {
  599. console.log(JSON.stringify(res))
  600. that.ajaxData = res.data;
  601. var dataTab = [], //表格
  602. analyis = [],
  603. gzssdl = [],
  604. jxssdl = [],
  605. xnssdl = [],
  606. xdssdl = [],
  607. slssdl = [];
  608. res.data.forEach((item, index) => {
  609. that.tableDateArr.push(item.date);
  610. that.tableIdArr.push(item.id);
  611. dataTab.push({ //表格
  612. index: index + 1,
  613. zhpm: item.zhpm,
  614. date: item.date.substr(0, 10),
  615. fdlpm: item.fdlpm,
  616. fdl: item.fdl,
  617. gzssdlpm: item.gzssdlpm,
  618. gzssdl: item.gzssdl,
  619. jxssdlpm: item.jxssdlpm,
  620. jxssdl: item.jxssdl,
  621. xnssdlpm: item.xnssdlpm,
  622. xnssdl: item.xnssdl,
  623. xdssdlpm: item.xdssdlpm,
  624. xdssdl: item.xdssdl,
  625. slssdlpm: item.slssdlpm,
  626. slssdl: item.slssdl,
  627. fnlylpm: item.fnlylpm,
  628. fnlyl: item.fnlyl,
  629. gzsslpm: item.gzsslpm,
  630. gzssl: item.gzssl,
  631. jxsslpm: item.jxsslpm,
  632. jxssl: item.jxssl,
  633. qflpm: item.qflpm,
  634. qfl: item.qfl,
  635. xnsslpm: item.xnsslpm,
  636. xnssl: item.xnssl,
  637. slsslpm: item.slsslpm,
  638. slssl: item.slssl,
  639. is_light: false
  640. })
  641. if (index < 7) {
  642. gzssdl.push({
  643. text: item.date.substr(0, 10),
  644. value: item.gzssdl
  645. });
  646. jxssdl.push({
  647. text: item.date.substr(0, 10),
  648. value: item.jxssdl
  649. });
  650. xnssdl.push({
  651. text: item.date.substr(0, 10),
  652. value: item.xnssdl
  653. });
  654. xdssdl.push({
  655. text: item.date.substr(0, 10),
  656. value: item.xdssdl
  657. });
  658. slssdl.push({
  659. text: item.date.substr(0, 10),
  660. value: item.slssdl
  661. });
  662. }
  663. })
  664. analyis.push({
  665. title: "故障损失电量",
  666. yAxisIndex: 0,
  667. value: gzssdl
  668. }, {
  669. title: "检修损失电量",
  670. yAxisIndex: 0,
  671. value: jxssdl
  672. }, {
  673. title: "性能损失电量",
  674. yAxisIndex: 0,
  675. value: xnssdl
  676. }, {
  677. title: "限电损失电量",
  678. yAxisIndex: 0,
  679. value: xdssdl
  680. }, {
  681. title: "受累损失电量",
  682. yAxisIndex: 0,
  683. value: slssdl
  684. })
  685. that.tableData.data = dataTab;
  686. that.analyis = analyis;
  687. }
  688. });
  689. },
  690. AjaxDbfx() {
  691. var that = this;
  692. var data = that.ajaxData;
  693. that.windNum = data[0].date.substr(0, 10);
  694. that.windNum2 = data[1].date.substr(0, 10);
  695. that.tabs = [{
  696. name: "发电量",
  697. windData1: data[0].fdl,
  698. windData2: data[1].fdl
  699. }, {
  700. name: "故障损失电量",
  701. windData1: data[0].gzssdl,
  702. windData2: data[1].gzssdl
  703. }, {
  704. name: "检修损失电量",
  705. windData1: data[0].jxssdl,
  706. windData2: data[1].jxssdl
  707. }, {
  708. name: "性能未达标损失电量",
  709. windData1: data[0].xnssdl,
  710. windData2: data[1].xnssdl
  711. }, {
  712. name: "受累损失电量",
  713. windData1: data[0].slssdl,
  714. windData2: data[1].slssdl
  715. }, {
  716. name: "风能利用率",
  717. windData1: data[0].fnlyl,
  718. windData2: data[1].fnlyl
  719. }, {
  720. name: "故障损失率",
  721. windData1: data[0].gzssl,
  722. windData2: data[1].gzssl
  723. }, {
  724. name: "检修损失率",
  725. windData1: data[0].jxssl,
  726. windData2: data[1].jxssl
  727. }, {
  728. name: "弃风率",
  729. windData1: data[0].qfl,
  730. windData2: data[1].qfl
  731. }, {
  732. name: "性能损失率",
  733. windData1: data[0].xnssl,
  734. windData2: data[1].xnssl
  735. }, {
  736. name: "受累损失率",
  737. windData1: data[0].slssl,
  738. windData2: data[1].slssl
  739. }];
  740. that.radarValue = [{
  741. indicator: ["风能利用率", "故障损失率", "检修损失率", "弃风率", "性能损失率", "受累损失率"],
  742. data: [{
  743. value: [data[0].fnlylpm, data[0].gzsslpm, data[0].jxsslpm, data[0].qflpm,
  744. data[0].xnsslpm, data[0].slsslpm
  745. ]
  746. }, {
  747. value: [data[1].fnlylpm, data[1].gzsslpm, data[1].jxsslpm, data[1].qflpm,
  748. data[1].xnsslpm, data[1].slsslpm
  749. ]
  750. }]
  751. }];
  752. var analyis = [],
  753. gzssdl = [],
  754. jxssdl = [],
  755. xnssdl = [],
  756. xdssdl = [],
  757. slssdl = [];
  758. data.forEach((item, index) => {
  759. gzssdl.push({
  760. text: item.date.substr(0, 10),
  761. value: item.gzssdl
  762. });
  763. jxssdl.push({
  764. text: item.date.substr(0, 10),
  765. value: item.jxssdl
  766. });
  767. xnssdl.push({
  768. text: item.date.substr(0, 10),
  769. value: item.xnssdl
  770. });
  771. xdssdl.push({
  772. text: item.date.substr(0, 10),
  773. value: item.xdssdl
  774. });
  775. slssdl.push({
  776. text: item.date.substr(0, 10),
  777. value: item.slssdl
  778. });
  779. })
  780. analyis.push({
  781. title: "故障损失电量",
  782. yAxisIndex: 0,
  783. value: gzssdl
  784. }, {
  785. title: "检修损失电量",
  786. yAxisIndex: 0,
  787. value: jxssdl
  788. }, {
  789. title: "性能损失电量",
  790. yAxisIndex: 0,
  791. value: xnssdl
  792. }, {
  793. title: "限电损失电量",
  794. yAxisIndex: 0,
  795. value: xdssdl
  796. }, {
  797. title: "受累损失电量",
  798. yAxisIndex: 0,
  799. value: slssdl
  800. })
  801. that.analyisDialog = analyis;
  802. },
  803. tooltip(param, callback) {
  804. var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
  805. var result = param[0].axisValue;
  806. param.forEach((value, index) => {
  807. result += "<br />" +
  808. `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
  809. value.seriesName + ":" + value.value;
  810. });
  811. callback(result);
  812. return true;
  813. },
  814. dbfx() {
  815. var that = this;
  816. if (that.tableDate.length == 2) {
  817. that.dialogVisible = true;
  818. this.AjaxDbfx();
  819. }
  820. }
  821. }
  822. };
  823. </script>
  824. <style lang="less">
  825. .decision-page-2 {
  826. .content .project-table {
  827. tbody {
  828. height: calc(100vh - 24.5vh);
  829. }
  830. }
  831. .project-table {
  832. overflow: auto;
  833. tbody {
  834. height: calc(100vh - 65vh);
  835. }
  836. th,
  837. td {
  838. color: #b2bdc0;
  839. &:nth-child(1) {
  840. width: 50px;
  841. }
  842. &:nth-child(2) {
  843. width: 50px;
  844. }
  845. }
  846. }
  847. .action {
  848. text-decoration: underline;
  849. color: @green;
  850. cursor: pointer;
  851. }
  852. }
  853. </style>