index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746
  1. <template>
  2. <div class="draught-fan-list">
  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="wpId"
  10. clearable
  11. placeholder="请选择"
  12. popper-class="select"
  13. >
  14. <el-option
  15. v-for="item in wpArray"
  16. :key="item.id"
  17. :value="item.id"
  18. :label="item.name"
  19. />
  20. </el-select>
  21. </div>
  22. </div>
  23. <div class="query-item">
  24. <div class="lable">日期:</div>
  25. <div class="search-input">
  26. <el-date-picker
  27. v-model="recorddate"
  28. type="date"
  29. value-format="YYYY-MM-DD"
  30. placeholder="选择日期"
  31. popper-class="date-select"
  32. >
  33. </el-date-picker>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="query-actions">
  38. <button class="btn green" @click="search">查询</button>
  39. <button class="btn green" @click="exportExcel">导出</button>
  40. </div>
  41. </div>
  42. <div class="df-table">
  43. <ComTable height="78vh" :data="tableData"></ComTable>
  44. </div>
  45. <el-dialog
  46. title="单机历史性能分析"
  47. v-model="dialogShow"
  48. width="85%"
  49. top="10vh"
  50. custom-class="modal"
  51. :close-on-click-modal="true"
  52. @closed="dialogType = ''"
  53. >
  54. <div class="query mg-b-8">
  55. <div class="query-items">
  56. <div class="query-item">
  57. <div class="lable">场站:</div>
  58. <div class="search-input">
  59. <el-select
  60. v-model="wpId2"
  61. clearable
  62. placeholder="请选择"
  63. popper-class="select"
  64. @change="reGetWtArray"
  65. >
  66. <el-option
  67. v-for="item in wpArray"
  68. :key="item.id"
  69. :value="item.id"
  70. :label="item.name"
  71. />
  72. </el-select>
  73. </div>
  74. </div>
  75. <div class="query-item">
  76. <div class="lable">风机:</div>
  77. <div class="search-input">
  78. <el-select
  79. v-model="wtId"
  80. clearable
  81. placeholder="请选择"
  82. popper-class="select"
  83. >
  84. <el-option
  85. v-for="item in wtArray"
  86. :key="item.id"
  87. :value="item.id"
  88. :label="item.name"
  89. />
  90. </el-select>
  91. </div>
  92. </div>
  93. <div class="query-item">
  94. <div class="lable">开始日期:</div>
  95. <div class="search-input">
  96. <el-date-picker
  97. v-model="beginDate"
  98. type="date"
  99. value-format="YYYY-MM-DD"
  100. placeholder="选择日期"
  101. popper-class="date-select"
  102. >
  103. </el-date-picker>
  104. </div>
  105. </div>
  106. <div class="query-item">
  107. <div class="lable">结束日期:</div>
  108. <div class="search-input">
  109. <el-date-picker
  110. v-model="endDate"
  111. type="date"
  112. value-format="YYYY-MM-DD"
  113. placeholder="选择日期"
  114. popper-class="date-select"
  115. >
  116. </el-date-picker>
  117. </div>
  118. </div>
  119. </div>
  120. <div class="query-actions">
  121. <button class="btn green" @click="reGetHistoryTableData">查询</button>
  122. <button class="btn green" @click="exportExcel2">导出</button>
  123. </div>
  124. </div>
  125. <ComTable height="78vh" :data="historyTableData"></ComTable>
  126. </el-dialog>
  127. </div>
  128. </template>
  129. <script>
  130. import ComTable from "@com/coms/table/table.vue";
  131. import api from "@api/economic/index.js";
  132. export default {
  133. // 名称
  134. name: "cutAnalyse",
  135. // 使用组件
  136. components: {
  137. ComTable,
  138. },
  139. // 数据
  140. data() {
  141. const that = this;
  142. return {
  143. isAsc: "asc",
  144. wpArray: [],
  145. wtArray: [],
  146. wpId: "",
  147. wtId: "",
  148. wpId2: "",
  149. recorddate: new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate(
  150. "yyyy-MM-dd"
  151. ),
  152. beginDate: "",
  153. endDate: "",
  154. dialogShow: false,
  155. tableData: {
  156. column: [
  157. {
  158. name: "风机",
  159. field: "windturbineid",
  160. is_num: false,
  161. is_light: false,
  162. sortable: true,
  163. },
  164. {
  165. name: "型号",
  166. field: "modelid",
  167. is_num: false,
  168. is_light: false,
  169. sortable: true,
  170. },
  171. {
  172. name: "日排行榜",
  173. field: "daytop",
  174. is_num: false,
  175. is_light: false,
  176. sortable: true,
  177. },
  178. {
  179. name: "日拟合优度(%)",
  180. field: "daygoodness",
  181. is_num: false,
  182. is_light: false,
  183. sortable: true,
  184. },
  185. {
  186. name: "日风速(m/s)",
  187. field: "dayspeed",
  188. is_num: false,
  189. is_light: false,
  190. sortable: true,
  191. },
  192. {
  193. name: "月排行榜",
  194. field: "monthtop",
  195. is_num: false,
  196. is_light: false,
  197. sortable: true,
  198. },
  199. {
  200. name: "月拟合优度(%)",
  201. field: "monthgoodness",
  202. is_num: false,
  203. is_light: false,
  204. sortable: true,
  205. },
  206. {
  207. name: "月风速(m/s)",
  208. field: "monthspeed",
  209. is_num: false,
  210. is_light: false,
  211. sortable: true,
  212. },
  213. {
  214. name: "年排行榜",
  215. field: "yeartop",
  216. is_num: false,
  217. is_light: false,
  218. sortable: true,
  219. },
  220. {
  221. name: "年拟合优度(%)",
  222. field: "yeargoodness",
  223. is_num: false,
  224. is_light: false,
  225. sortable: true,
  226. },
  227. {
  228. name: "年风速(m/s)",
  229. field: "yearspeed",
  230. is_num: false,
  231. is_light: false,
  232. sortable: true,
  233. },
  234. {
  235. name: "操作",
  236. field: "",
  237. is_num: false,
  238. is_light: false,
  239. template() {
  240. return "<el-button type='text' style='cursor: pointer;'>详情</el-button>";
  241. },
  242. click(e, row) {
  243. that.jumpUrl(row);
  244. },
  245. },
  246. {
  247. name: "操作",
  248. field: "",
  249. is_num: false,
  250. is_light: false,
  251. template() {
  252. return "<el-button type='text' style='cursor: pointer;'>历史</el-button>";
  253. },
  254. click(e, row) {
  255. that.getOutputspeedHistoryList(row);
  256. },
  257. },
  258. ],
  259. data: [],
  260. },
  261. historyTableData: {
  262. column: [
  263. {
  264. name: "日期",
  265. field: "time",
  266. is_num: false,
  267. is_light: false,
  268. sortable: true,
  269. },
  270. {
  271. name: "风机",
  272. field: "windturbineid",
  273. is_num: false,
  274. is_light: false,
  275. sortable: true,
  276. },
  277. {
  278. name: "日发电量",
  279. field: "c1",
  280. is_num: false,
  281. is_light: false,
  282. sortable: true,
  283. },
  284. {
  285. name: "日理论发电量",
  286. field: "c2",
  287. is_num: false,
  288. is_light: false,
  289. sortable: true,
  290. },
  291. {
  292. name: "日平均功率",
  293. field: "c3",
  294. is_num: false,
  295. is_light: false,
  296. sortable: true,
  297. },
  298. {
  299. name: "日运行小时",
  300. field: "c4",
  301. is_num: false,
  302. is_light: false,
  303. sortable: true,
  304. },
  305. {
  306. name: "日待机小时",
  307. field: "c5",
  308. is_num: false,
  309. is_light: false,
  310. sortable: true,
  311. },
  312. {
  313. name: "日故障小时",
  314. field: "c6",
  315. is_num: false,
  316. is_light: false,
  317. sortable: true,
  318. },
  319. {
  320. name: "日维护小时",
  321. field: "c7",
  322. is_num: false,
  323. is_light: false,
  324. sortable: true,
  325. },
  326. {
  327. name: "日终端小时",
  328. field: "c8",
  329. is_num: false,
  330. is_light: false,
  331. sortable: true,
  332. },
  333. {
  334. name: "日有效风时",
  335. field: "c9",
  336. is_num: false,
  337. is_light: false,
  338. sortable: true,
  339. },
  340. {
  341. name: "日损失电量",
  342. field: "c10",
  343. is_num: false,
  344. is_light: false,
  345. sortable: true,
  346. },
  347. {
  348. name: "日报警次数",
  349. field: "c11",
  350. is_num: false,
  351. is_light: false,
  352. sortable: true,
  353. },
  354. {
  355. name: "日停机次数",
  356. field: "c12",
  357. is_num: false,
  358. is_light: false,
  359. sortable: true,
  360. },
  361. {
  362. name: "日不饱和次数",
  363. field: "c13",
  364. is_num: false,
  365. is_light: false,
  366. sortable: true,
  367. },
  368. {
  369. name: "日设备可利用率",
  370. field: "c14",
  371. is_num: false,
  372. is_light: false,
  373. sortable: true,
  374. },
  375. {
  376. name: "日平均温度",
  377. field: "c15",
  378. is_num: false,
  379. is_light: false,
  380. sortable: true,
  381. },
  382. {
  383. name: "日平均湿度",
  384. field: "c16",
  385. is_num: false,
  386. is_light: false,
  387. sortable: true,
  388. },
  389. {
  390. name: "日平均压强",
  391. field: "c17",
  392. is_num: false,
  393. is_light: false,
  394. sortable: true,
  395. },
  396. {
  397. name: "日拟合优度",
  398. field: "c18",
  399. is_num: false,
  400. is_light: false,
  401. sortable: true,
  402. },
  403. {
  404. name: "日实际/保证",
  405. field: "c19",
  406. is_num: false,
  407. is_light: false,
  408. sortable: true,
  409. },
  410. ],
  411. data: [],
  412. },
  413. };
  414. },
  415. // 函数
  416. methods: {
  417. // 请求服务
  418. requestData() {
  419. api.powercompareWindfarmAjax({}).then((res) => {
  420. this.wpArray = res.data;
  421. this.wpId = res.data[0].id;
  422. this.getOutputSpeedList(this.wpId);
  423. });
  424. // let that = this;
  425. // that.API.requestData({
  426. // method: "GET",
  427. // subUrl: "powercompare/windfarmAjax",
  428. // success(res) {
  429. // that.wpArray = res.data;
  430. // that.wpId = res.data[0].id;
  431. // that.getOutputSpeedList(that.wpId);
  432. // },
  433. // });
  434. },
  435. getOutputSpeedList(wpId) {
  436. if (!this.wpId || !this.recorddate) {
  437. this.BASE.showMsg({
  438. msg: "场站与日期不可为空",
  439. });
  440. } else {
  441. let tablepar = { tablepar: { isAsc: 'desc' } };
  442. api
  443. .goodnessWindturbinegoodness({
  444. tablepar,
  445. wpId,
  446. isAsc: this.isAsc,
  447. recorddate: this.recorddate,
  448. })
  449. .then((res) => {
  450. this.tableData.data = res.data.list;
  451. });
  452. // that.API.requestData({
  453. // method: "POST",
  454. // subUrl: "goodness/windturbinegoodness",
  455. // data: {
  456. // wpId,
  457. // isAsc: that.isAsc,
  458. // recorddate: that.recorddate,
  459. // },
  460. // success(res) {
  461. // that.tableData.data = res.data.list;
  462. // },
  463. // });
  464. }
  465. },
  466. getOutputspeedHistoryList(item) {
  467. api
  468. .powercompareWindturbineAjax({
  469. wpId: item.windtpowerstationid,
  470. })
  471. .then((res) => {
  472. this.wtArray = res.data;
  473. this.wpId2 = item.windtpowerstationid;
  474. this.wtId = item.windturbineid;
  475. this.beginDate = new Date().formatDate("yyyy-MM") + "-01";
  476. this.endDate = new Date().formatDate("yyyy-MM-dd");
  477. api
  478. .goodnessGoodhistorylist({
  479. wpId: this.wpId2,
  480. wtId: this.wtId,
  481. beginDate: this.beginDate,
  482. endDate: this.endDate,
  483. })
  484. .then((res) => {
  485. res.data.forEach((ele) => {
  486. ele.time = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
  487. });
  488. this.historyTableData.data = res.data;
  489. this.dialogShow = true;
  490. });
  491. // that.API.requestData({
  492. // method: "POST",
  493. // subUrl: "goodness/goodhistorylist",
  494. // data: {
  495. // wpId: that.wpId2,
  496. // wtId: that.wtId,
  497. // beginDate: that.beginDate,
  498. // endDate: that.endDate,
  499. // },
  500. // success(res) {
  501. // res.data.forEach((ele) => {
  502. // ele.time = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
  503. // });
  504. // that.historyTableData.data = res.data;
  505. // that.dialogShow = true;
  506. // },
  507. // });
  508. });
  509. // let that = this;
  510. // that.API.requestData({
  511. // method: "GET",
  512. // subUrl: "powercompare/windturbineAjax",
  513. // data: {
  514. // wpId: item.windtpowerstationid,
  515. // },
  516. // success(res) {
  517. // that.wtArray = res.data;
  518. // that.wpId2 = item.windtpowerstationid;
  519. // that.wtId = item.windturbineid;
  520. // that.beginDate = new Date().formatDate("yyyy-MM") + "-01";
  521. // that.endDate = new Date().formatDate("yyyy-MM-dd");
  522. // that.API.requestData({
  523. // method: "POST",
  524. // subUrl: "goodness/goodhistorylist",
  525. // data: {
  526. // wpId: that.wpId2,
  527. // wtId: that.wtId,
  528. // beginDate: that.beginDate,
  529. // endDate: that.endDate,
  530. // },
  531. // success(res) {
  532. // res.data.forEach((ele) => {
  533. // ele.time = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
  534. // });
  535. // that.historyTableData.data = res.data;
  536. // that.dialogShow = true;
  537. // },
  538. // });
  539. // },
  540. // });
  541. },
  542. reGetWtArray() {
  543. api
  544. .powercompareWindturbineAjax({
  545. wpId: this.wpId2,
  546. })
  547. .then((res) => {
  548. this.wtArray = res.data;
  549. this.wtId = res.data[0].id;
  550. });
  551. // let that = this;
  552. // that.API.requestData({
  553. // method: "GET",
  554. // subUrl: "powercompare/windturbineAjax",
  555. // data: {
  556. // wpId: that.wpId2,
  557. // },
  558. // success(res) {
  559. // that.wtArray = res.data;
  560. // that.wtId = res.data[0].id;
  561. // },
  562. // });
  563. },
  564. reGetHistoryTableData() {
  565. let that = this;
  566. if (!that.wpId2) {
  567. that.BASE.showMgs({
  568. msg: "场站不可为空",
  569. });
  570. } else if (!that.wtId) {
  571. that.BASE.showMgs({
  572. msg: "风机不可为空",
  573. });
  574. } else if (!that.beginDate || !that.endDate) {
  575. that.BASE.showMgs({
  576. msg: "开始日期与结束日期不可为空",
  577. });
  578. } else {
  579. // -------------------------------------------------
  580. api
  581. .goodnessGoodhistorylist({
  582. wpId: this.wpId2,
  583. wtId: this.wtId,
  584. beginDate: this.beginDate,
  585. endDate: this.endDate,
  586. })
  587. .then((res) => {
  588. res.data.forEach((ele) => {
  589. ele.time = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
  590. });
  591. this.historyTableData.data = res.data;
  592. this.dialogShow = true;
  593. });
  594. // that.API.requestData({
  595. // method: "POST",
  596. // subUrl: "goodness/goodhistorylist",
  597. // showLoading: true,
  598. // data: {
  599. // wpId: that.wpId2,
  600. // wtId: that.wtId,
  601. // beginDate: that.beginDate,
  602. // endDate: that.endDate,
  603. // },
  604. // success(res) {
  605. // res.data.forEach((ele) => {
  606. // ele.time = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
  607. // });
  608. // that.historyTableData.data = res.data;
  609. // that.dialogShow = true;
  610. // },
  611. // });
  612. }
  613. },
  614. search() {
  615. this.getOutputSpeedList(this.wpId);
  616. },
  617. // 外围表格导出excel
  618. exportExcel() {
  619. let that = this;
  620. const { export_json_to_excel } = require("@tools/excel/Export2Excel.js"); // 注意这个Export2Excel路径
  621. // const tHeader = ['点名', '描述']; // 上面设置Excel的表格第一行的标题
  622. // const filterVal = ['id', 'name']; // 上面的index、nickName、name是tableData里对象的属性key值
  623. let tHeader = []; // 上面设置Excel的表格第一行的标题
  624. let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
  625. that.tableData.column.forEach((ele) => {
  626. if (ele.name !== "操作") {
  627. tHeader.push(ele.name);
  628. filterVal.push(ele.field);
  629. }
  630. });
  631. const list = that.tableData.data; //把要导出的数据tableData存到list
  632. const data = that.formatJson(filterVal, list);
  633. export_json_to_excel(tHeader, data, "导出的Excel"); // 最后一个是表名字
  634. },
  635. // 弹窗表格导出excel
  636. exportExcel2() {
  637. let that = this;
  638. const { export_json_to_excel } = require("@tools/excel/Export2Excel.js"); // 注意这个Export2Excel路径
  639. // const tHeader = ['点名', '描述']; // 上面设置Excel的表格第一行的标题
  640. // const filterVal = ['id', 'name']; // 上面的index、nickName、name是tableData里对象的属性key值
  641. let tHeader = []; // 上面设置Excel的表格第一行的标题
  642. let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
  643. that.historyTableData.column.forEach((ele) => {
  644. if (ele.name !== "操作") {
  645. tHeader.push(ele.name);
  646. filterVal.push(ele.field);
  647. }
  648. });
  649. const list = that.historyTableData.data; //把要导出的数据tableData存到list
  650. const data = that.formatJson(filterVal, list);
  651. export_json_to_excel(tHeader, data, "导出的Excel"); // 最后一个是表名字
  652. },
  653. formatJson(filterVal, jsonData) {
  654. return jsonData.map((v) => filterVal.map((j) => v[j]));
  655. },
  656. // 页面跳转
  657. jumpUrl(item) {
  658. this.$router.push(
  659. `/decision/performanceAnalysis/detail/${item.windtpowerstationid}/${item.windturbineid}`
  660. );
  661. },
  662. },
  663. created() {
  664. this.requestData();
  665. },
  666. mounted() {},
  667. unmounted() {},
  668. };
  669. </script>
  670. <style lang="less" scoped>
  671. .draught-fan-list {
  672. width: 100%;
  673. height: 100%;
  674. display: flex;
  675. flex-direction: column;
  676. .btn-group-tabs {
  677. display: flex;
  678. flex-direction: row;
  679. .photovoltaic {
  680. margin-left: 1.481vh;
  681. }
  682. }
  683. .df-table {
  684. border: 0.093vh solid fade(@darkgray, 50%);
  685. position: relative;
  686. overflow: auto;
  687. flex-grow: 1;
  688. margin-top: 1.481vh;
  689. &:before {
  690. content: "";
  691. width: 0.37vh;
  692. height: 0.37vh;
  693. background: @write;
  694. position: absolute;
  695. left: 0.278vh;
  696. top: 0.278vh;
  697. }
  698. tbody {
  699. height: calc(100vh - 166px);
  700. }
  701. }
  702. }
  703. </style>