index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. <template>
  2. <div class="monthMachine">
  3. <div class="monthMachine_top">
  4. <el-select
  5. size="mini"
  6. v-model="companyVal"
  7. placeholder="请选择"
  8. @change="changeCompan"
  9. >
  10. <el-option
  11. v-for="item in companyOptions"
  12. :key="item.id"
  13. :label="item.aname"
  14. :value="item.id"
  15. >
  16. </el-option>
  17. </el-select>
  18. <!-- <div class="tabCut">
  19. <div
  20. @click="changeBtnsd(val.id)"
  21. :class="tabIndex === val.id ? 'active' : ''"
  22. v-for="val in tabOptions"
  23. :key="val.id"
  24. >
  25. <span>{{ val.name }}</span>
  26. </div>
  27. </div> -->
  28. <div class="station">
  29. 场站:
  30. <el-select
  31. size="mini"
  32. v-model="stationVal"
  33. placeholder="请选择"
  34. clearable
  35. @change="changeStation"
  36. >
  37. <el-option
  38. v-for="item in stationOptions"
  39. :key="item.id"
  40. :label="item.name"
  41. :value="item.id"
  42. >
  43. </el-option>
  44. </el-select>
  45. </div>
  46. <div class="station">
  47. 时间
  48. <div>
  49. <el-date-picker
  50. v-model="pickerTimer"
  51. type="month"
  52. value-format="YYYY-MM"
  53. placeholder="选择日期"
  54. popper-class="date-select"
  55. >
  56. </el-date-picker>
  57. </div>
  58. </div>
  59. <div class="but">
  60. <el-button round size="mini" class="buttons" @click="seachData"
  61. >搜 索</el-button
  62. >
  63. <el-button round size="mini" class="buttons" @click="downXlsxFn"
  64. >导出</el-button
  65. >
  66. </div>
  67. </div>
  68. <div
  69. style="
  70. background: rgba(0, 0, 0, 0.4);
  71. height: calc(100% - 48px);
  72. padding-bottom: 15px;
  73. "
  74. >
  75. <div class="monthMachine_title clearfix">
  76. <div class="leftContent floatLeft"><span>单机月度分析</span></div>
  77. </div>
  78. <div class="economicTable1">
  79. <el-table
  80. :data="monthMachineData"
  81. stripe
  82. size="mini"
  83. height="calc(100% - 40px)"
  84. ref="month_table"
  85. style="width: 100%"
  86. >
  87. <el-table-column align="center" label="机组名称" width="60">
  88. <template #default="scope">
  89. <span
  90. @click="reportDialogFn(scope.row)"
  91. style="cursor: pointer; color: #05bb4c"
  92. >{{ scope.row.windturbineName }}</span
  93. >
  94. </template>
  95. </el-table-column>
  96. <el-table-column
  97. v-for="(item, index) in tableHeader"
  98. :key="index"
  99. sortable
  100. :prop="item.code"
  101. :label="item.title"
  102. align="right"
  103. header-align="center"
  104. >
  105. <template #header="scope">
  106. <div>
  107. {{
  108. scope.column.label.slice(0, scope.column.label.indexOf("("))
  109. }}
  110. </div>
  111. <div>
  112. {{ scope.column.label.slice(scope.column.label.indexOf("(")) }}
  113. </div>
  114. </template>
  115. </el-table-column>
  116. </el-table>
  117. <el-pagination
  118. @size-change="handleSizeChange"
  119. @current-change="handleCurrentChange"
  120. :current-page="page.currentPage"
  121. :page-size="page.pagesize"
  122. :page-sizes="[21, 50, 100, 500]"
  123. layout="total, sizes, prev, pager, next, jumper"
  124. :total="page.total"
  125. >
  126. </el-pagination>
  127. </div>
  128. </div>
  129. <el-dialog
  130. v-model="dialogVisible"
  131. width="70%"
  132. top="40px"
  133. custom-class="modal"
  134. :close-on-click-modal="false"
  135. >
  136. <template #title>
  137. <div class="dialog-title">
  138. <div class="title">运行指标性能分析报告</div>
  139. </div>
  140. </template>
  141. <div class="body" :style="pageHeight">
  142. <report-dialog ref="reportDia"></report-dialog>
  143. </div>
  144. </el-dialog>
  145. </div>
  146. </template>
  147. <script>
  148. import {
  149. getApicompanyslist,
  150. getApiwpByCplistlist,
  151. getApisingleanalysisMainlist,
  152. } from "@/api/monthlyPerformanceAnalysis";
  153. import ReportDialog from "./reportDialog.vue";
  154. import utils from "@/utills/downXlsx";
  155. export default {
  156. name: "MonthlyAnalysis", //单机月度分析
  157. components: {
  158. ReportDialog,
  159. },
  160. data() {
  161. return {
  162. companyVal: "",
  163. companyOptions: [],
  164. stationVal: "",
  165. stationOptions: [],
  166. pickerTimer: "",
  167. pickerTimerYear: "",
  168. pickerTimerMonth: "",
  169. monthMachineData: [],
  170. showBtn: true,
  171. tabIndex: -1,
  172. // tabOptions: [
  173. // { id: -1, name: "风电" },
  174. // { id: -2, name: "光伏" },
  175. // ],
  176. tableHeader: [
  177. { title: "实际发电量(万kWh)", code: "fdl" },
  178. { title: "理论发电量(万kWh)", code: "llfdl" },
  179. { title: "设备利用小时数(小时)", code: "lyxs" },
  180. { title: "等效可用系数(%)", code: "dxklyxs" },
  181. { title: "平均风速(m/s)", code: "fs" },
  182. { title: "小风切入风速(m/s)", code: "xfqr" },
  183. { title: "有效风时数(小时)", code: "yxfss" },
  184. { title: "故障损失电量(万kWh)", code: "gzss" },
  185. { title: "调度限电损失(万kWh)", code: "xdss" },
  186. { title: "计划检修损失(万kWh)", code: "jxss" },
  187. { title: "性能未达标损失(万kWh)", code: "xnss" },
  188. { title: "受累损失电量(万kWh)", code: "slss" },
  189. { title: "故障停用时间(小时)", code: "gzxs" },
  190. { title: "检修停用时间(小时)", code: "jxxs" },
  191. { title: "机组功率一致性(%)", code: "glyzxxs" },
  192. ],
  193. tableHeaderGf: [
  194. { title: "实际发电量(万kWh)", code: "fdl" },
  195. { title: "理论发电量(万kWh)", code: "llfdl" },
  196. { title: "设备利用小时数(小时)", code: "lyxs" },
  197. { title: "等效可用系数(%)", code: "dxklyxs" },
  198. { title: "平均光照度(m/s)", code: "fs" },
  199. { title: "有效光时数(小时)", code: "yxfss" },
  200. { title: "故障损失电量(万kWh)", code: "gzss" },
  201. { title: "调度限电损失(万kWh)", code: "xdss" },
  202. { title: "计划检修损失(万kWh)", code: "jxss" },
  203. { title: "性能未达标损失(万kWh)", code: "xnss" },
  204. { title: "受累损失电量(万kWh)", code: "slss" },
  205. { title: "故障停用时间(小时)", code: "gzxs" },
  206. { title: "检修停用时间(小时)", code: "jxxs" },
  207. { title: "机组功率一致性(%)", code: "glyzxxs" },
  208. ],
  209. page: {
  210. pagesize: 21,
  211. currentPage: 1,
  212. total: 0,
  213. },
  214. dialogTitle: "",
  215. dialogVisible: false,
  216. isFullScreen: false,
  217. };
  218. },
  219. created() {
  220. const clientHeight =
  221. document.documentElement.clientHeight || document.body.clientHeight;
  222. if (clientHeight === 1080) {
  223. this.isFullScreen = true;
  224. } else {
  225. this.isFullScreen = false;
  226. }
  227. this.getCompanyData();
  228. },
  229. mounted() {
  230. window.onresize = () => {
  231. const clientHeight =
  232. document.documentElement.clientHeight || document.body.clientHeight;
  233. this.isFullScreen = window.screen.height == clientHeight;
  234. this.getTableData();
  235. };
  236. },
  237. methods: {
  238. // 获取公司列表
  239. async getCompanyData() {
  240. this.companyOptions = [];
  241. this.pickerTimer = this.getchangeTime(new Date());
  242. const { data: datas } = await getApicompanyslist();
  243. this.companyOptions = datas.data;
  244. this.companyVal = datas.data[0]?.id;
  245. this.getStationData(this.companyVal);
  246. },
  247. // changeBtnsd(id) {
  248. // this.tabIndex = id;
  249. // this.stationVal = "";
  250. // this.stationOptions = [];
  251. // this.getStationData();
  252. // },
  253. changeCompan(val) {
  254. this.companyVal = val;
  255. this.getStationData();
  256. },
  257. async getStationData() {
  258. let params = {
  259. type: this.tabIndex,
  260. companyid: this.companyVal,
  261. };
  262. const { data: datas } = await getApiwpByCplistlist(params);
  263. this.stationOptions = datas.data;
  264. this.stationVal = datas.data[0].id;
  265. this.getTableData();
  266. },
  267. changeStation(val) {
  268. this.stationVal = val;
  269. this.getTableData();
  270. },
  271. seachData() {
  272. this.getTableData();
  273. },
  274. async getTableData() {
  275. let params = {
  276. cmId: this.companyVal,
  277. type: this.tabIndex,
  278. pageNum: this.page.currentPage,
  279. pageSize: this.page.pagesize,
  280. year: this.pickerTimer.slice(0, this.pickerTimer.indexOf("-")),
  281. month: this.pickerTimer.slice(this.pickerTimer.indexOf("-") + 1),
  282. wpId: this.stationVal,
  283. };
  284. const { data: datas } = await getApisingleanalysisMainlist(params);
  285. this.monthMachineData = datas.data.values;
  286. this.page.total = datas.data.total;
  287. },
  288. handleSizeChange(val) {
  289. this.page.currentPage = 1;
  290. this.page.pagesize = val;
  291. this.getTableData();
  292. },
  293. handleCurrentChange(val) {
  294. this.page.currentPage = val;
  295. this.getTableData();
  296. },
  297. //转换时间
  298. getchangeTime(date) {
  299. var y = date.getFullYear();
  300. var m = date.getMonth() + 1;
  301. m = m < 10 ? "0" + m : m;
  302. return y + "-" + m;
  303. },
  304. reportDialogFn(row) {
  305. this.dialogVisible = true;
  306. this.dialogTitle = row.wtcode;
  307. this.pickerTimerYear = this.pickerTimer.substring(
  308. 0,
  309. this.pickerTimer.indexOf("-")
  310. );
  311. this.pickerTimerMonth = this.pickerTimer.substring(
  312. this.pickerTimer.indexOf("-") + 1
  313. );
  314. this.$nextTick(() => {
  315. this.$refs.reportDia.pickerTimerYear = this.pickerTimerYear;
  316. this.$refs.reportDia.pickerTimerMonth = this.pickerTimerMonth;
  317. this.$refs.reportDia.dialogTitle = this.dialogTitle;
  318. this.$refs.reportDia.init(row);
  319. });
  320. },
  321. downXlsxFn() {
  322. let header = [];
  323. this.tableHeader.forEach((it) => {
  324. if (it.title !== "操作") {
  325. header.push(it.title);
  326. }
  327. });
  328. if (this.monthMachineData.length > 0) {
  329. utils.exportExcel(
  330. this.$refs["month_table"].$el,
  331. header,
  332. "单机月度分析"
  333. );
  334. }
  335. },
  336. },
  337. };
  338. </script>
  339. <style lang="less" scoped>
  340. .monthMachine {
  341. padding: 0 20px;
  342. height: 100%;
  343. .monthMachine_title {
  344. .leftContent {
  345. width: 242px;
  346. height: 41px;
  347. line-height: 41px;
  348. background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
  349. span {
  350. font-size: 16px;
  351. font-weight: 400;
  352. color: #05bb4c;
  353. margin-left: 25px;
  354. }
  355. }
  356. .floatLeft {
  357. float: left;
  358. }
  359. .floatRight {
  360. float: right;
  361. }
  362. .rightContent {
  363. width: 212px;
  364. height: 28px;
  365. margin-top: 13px;
  366. background: url("../../../../assets/imgs/title_right_bg.png");
  367. }
  368. }
  369. .clearfix::after {
  370. content: "";
  371. clear: both;
  372. height: 0;
  373. line-height: 0;
  374. visibility: hidden;
  375. display: block;
  376. }
  377. .clearfix {
  378. zoom: 1;
  379. }
  380. .monthMachine_top {
  381. display: flex;
  382. flex-direction: row;
  383. align-items: center;
  384. padding-top: 5px;
  385. padding-bottom: 5px;
  386. .station {
  387. display: flex;
  388. flex-direction: row;
  389. align-items: center;
  390. font-size: 14px;
  391. font-family: Microsoft YaHei;
  392. font-weight: 400;
  393. color: #b3b3b3;
  394. margin-right: 10px;
  395. margin-left: 10px;
  396. }
  397. .tabCut {
  398. display: inline-block;
  399. margin: 0 10px;
  400. div {
  401. display: inline-block;
  402. width: 60px;
  403. height: 27px;
  404. border: 1px solid #274934;
  405. text-align: center;
  406. line-height: 25px;
  407. cursor: pointer;
  408. }
  409. div:nth-child(1) {
  410. border-radius: 13px 0px 0px 13px;
  411. }
  412. div:nth-child(2) {
  413. border-radius: 0px 13px 13px 0px;
  414. }
  415. .active {
  416. background-color: rgba(5, 187, 76, 0.9);
  417. color: #fff;
  418. }
  419. }
  420. .search-input {
  421. margin-left: 10px;
  422. .el-input__inner {
  423. width: 175px;
  424. }
  425. .el-input__suffix {
  426. right: -50px;
  427. }
  428. }
  429. .but {
  430. display: flex;
  431. flex-direction: row;
  432. align-content: center;
  433. margin-left: 20px;
  434. .buttons {
  435. background-color: rgba(5, 187, 76, 0.2);
  436. border: 1px solid #3b6c53;
  437. color: #b3b3b3;
  438. font-size: 14px;
  439. &:hover,
  440. &.active {
  441. background-color: rgba(5, 187, 76, 0.5);
  442. color: #ffffff;
  443. }
  444. }
  445. }
  446. }
  447. .economicTable1 {
  448. height: calc(100% - 40px);
  449. .el-pagination {
  450. padding-top: 5px;
  451. display: flex;
  452. justify-content: flex-end;
  453. }
  454. }
  455. }
  456. </style>