Home.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737
  1. <template>
  2. <div class="wind-site-home">
  3. <row>
  4. <wind-site-weather />
  5. <panel-3 class="wind-site-info">
  6. <row align="middle">
  7. <div class="info-item">
  8. <div class="value">{{jczbmap.zjrl}}</div>
  9. <div class="text">装机容量</div>
  10. </div>
  11. <div class="info-item">
  12. <div class="value">{{jczbmap.rfdl}}</div>
  13. <div class="text">日发电量</div>
  14. </div>
  15. <div class="info-item">
  16. <div class="value">{{jczbmap.yfdl}}</div>
  17. <div class="text">月发电量</div>
  18. </div>
  19. <div class="info-item">
  20. <div class="value">{{jczbmap.nfdl}}</div>
  21. <div class="text">年发电量</div>
  22. </div>
  23. <div class="info-item">
  24. <div class="value">{{jczbmap.ylyxs}}</div>
  25. <div class="text">月利用小时</div>
  26. </div>
  27. <div class="info-item">
  28. <div class="value">{{jczbmap.nlyxs}}</div>
  29. <div class="text">年利用小时</div>
  30. </div>
  31. <div class="info-item">
  32. <div class="value">{{jczbmap.ssfs}}</div>
  33. <div class="text">实时风速</div>
  34. </div>
  35. <div class="info-item">
  36. <div class="value">{{jczbmap.sjgl}}</div>
  37. <div class="text">实时功率</div>
  38. </div>
  39. </row>
  40. </panel-3>
  41. <panel-3 class="wind-running-info">
  42. <row align="middle">
  43. <div class="fengji">
  44. <div class="fengji-icon svg-icon svg-icon-white">
  45. <svg-icon class="" svgid="svg-风机" />
  46. </div>
  47. <div class="info">
  48. <div class="text green">接入风机</div>
  49. <div class="value">{{jczbmap.jrts}}</div>
  50. </div>
  51. </div>
  52. <div class="situation">
  53. <row>
  54. <div class="status ">
  55. <span class="svg-icon svg-icon-green">
  56. <svg-icon svgid="svg-风机" />
  57. </span>
  58. <span class="text green">
  59. 待机
  60. </span>
  61. </div>
  62. <div class="status ">
  63. <span class="svg-icon svg-icon-green">
  64. <svg-icon svgid="svg-风机" />
  65. </span>
  66. <span class="text green">
  67. 运行
  68. </span>
  69. </div>
  70. <div class="status ">
  71. <span class="svg-icon svg-icon-green">
  72. <svg-icon svgid="svg-风机" />
  73. </span>
  74. <span class="text green">
  75. 限电
  76. </span>
  77. </div>
  78. <div class="status ">
  79. <span class="svg-icon svg-icon-green">
  80. <svg-icon svgid="svg-风机" />
  81. </span>
  82. <span class="text green">
  83. 故障
  84. </span>
  85. </div>
  86. <div class="status ">
  87. <span class="svg-icon svg-icon-green">
  88. <svg-icon svgid="svg-风机" />
  89. </span>
  90. <span class="text green">
  91. 检修
  92. </span>
  93. </div>
  94. <div class="status ">
  95. <span class="svg-icon svg-icon-green">
  96. <svg-icon svgid="svg-风机" />
  97. </span>
  98. <span class="text green">
  99. 受累
  100. </span>
  101. </div>
  102. <div class="status ">
  103. <span class="svg-icon svg-icon-green">
  104. <svg-icon svgid="svg-风机" />
  105. </span>
  106. <span class="text green">
  107. 离线
  108. </span>
  109. </div>
  110. </row>
  111. <row>
  112. <div class="status">
  113. <span class="text gray">
  114. 待风
  115. </span>
  116. <span class="value">
  117. {{jczbmap.djnum}}
  118. </span>
  119. </div>
  120. <div class="status">
  121. <span class="text gray">
  122. 正常出力
  123. </span>
  124. <span class="value">
  125. {{jczbmap.zcfdnum}}
  126. </span>
  127. </div>
  128. <div class="status">
  129. <span class="text gray">
  130. 降出力
  131. </span>
  132. <span class="value">
  133. {{jczbmap.xdjclnum}}
  134. </span>
  135. </div>
  136. <div class="status">
  137. <span class="text gray">
  138. 故障停机
  139. </span>
  140. <span class="value">
  141. {{jczbmap.gztjnum}}
  142. </span>
  143. </div>
  144. <div class="status">
  145. <span class="text gray">
  146. 检修停机
  147. </span>
  148. <span class="value">
  149. {{jczbmap.jxtjnum}}
  150. </span>
  151. </div>
  152. <div class="status">
  153. <span class="text gray">
  154. 电网
  155. </span>
  156. <span class="value">
  157. {{jczbmap.dwslnum}}
  158. </span>
  159. </div>
  160. <div class="status">
  161. <span class="text gray">
  162. 离线
  163. </span>
  164. <span class="value">
  165. {{jczbmap.lxnum}}
  166. </span>
  167. </div>
  168. </row>
  169. <row>
  170. <div class="status">
  171. <span class="text gray">
  172. 手动停机
  173. </span>
  174. <span class="value">
  175. {{jczbmap.sdtjts}}
  176. </span>
  177. </div>
  178. <div class="status">
  179. <span class="text gray">
  180. 降出力
  181. </span>
  182. <span class="value">
  183. {{jczbmap.qxjclnum}}
  184. </span>
  185. </div>
  186. <div class="status">
  187. <span class="text gray">
  188. 停机
  189. </span>
  190. <span class="value">
  191. {{jczbmap.sdtjts}}
  192. </span>
  193. </div>
  194. <div class="status">
  195. <span class="text gray">
  196. 场内受累
  197. </span>
  198. <span class="value">
  199. {{jczbmap.cnsltjnum}}
  200. </span>
  201. </div>
  202. <div class="status">
  203. <span class="text gray">
  204. 产内受累
  205. </span>
  206. <span class="value">
  207. {{jczbmap.cnsljxnum}}
  208. </span>
  209. </div>
  210. <div class="status">
  211. <span class="text gray">
  212. 环境
  213. </span>
  214. <span class="value">
  215. {{jczbmap.hjslnum}}
  216. </span>
  217. </div>
  218. <div class="status">
  219. <span class="text gray">
  220. 未知
  221. </span>
  222. <span class="value">
  223. --
  224. </span>
  225. </div>
  226. </row>
  227. </div>
  228. </row>
  229. </panel-3>
  230. </row>
  231. <row>
  232. <Col :span="6">
  233. <panel title="日度损失电量分析"></panel>
  234. </Col>
  235. <Col :span="12">
  236. <panel title="4小时功率曲线图">
  237. <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units" />
  238. </panel>
  239. </Col>
  240. <Col :span="6">
  241. <panel>
  242. <light-matrix :list="fjmap" />
  243. </panel>
  244. </Col>
  245. </row>
  246. <row>
  247. <Col :span="8">
  248. <panel title="日度损失电量分析">
  249. <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
  250. </panel>
  251. </Col>
  252. <Col :span="8">
  253. <panel title="月度损失电量分析">
  254. <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData" height="21.296vh" />
  255. </panel>
  256. </Col>
  257. <Col :span="8">
  258. <panel title="年度损失电量分析">
  259. <dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData" height="21.296vh" />
  260. </panel>
  261. </Col>
  262. </row>
  263. <row>
  264. <Col :span="8">
  265. <panel title="日度损失电量分析">
  266. <hover-bar-chart :list="dayLost" height="21.296vh" />
  267. </panel>
  268. </Col>
  269. <Col :span="8">
  270. <panel title="完成电量">
  271. <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" />
  272. </panel>
  273. </Col>
  274. <Col :span="8">
  275. <panel title="月发电量对比">
  276. <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
  277. </panel>
  278. </Col>
  279. </row>
  280. </div>
  281. </template>
  282. <script>
  283. import HoverBarChart from "../../../../components/chart/bar/hover-bar-chart.vue";
  284. import MultipleBarChart from "../../../../components/chart/bar/multiple-bar-chart.vue";
  285. import MultipleLineChart from "../../../../components/chart/line/multiple-line-chart.vue";
  286. import NormalLineChart from "../../../../components/chart/line/normal-line-chart.vue";
  287. import DualPieChart from "../../../../components/chart/pie/dual-pie-chart.vue";
  288. import Col from "../../../../components/coms/grid/col.vue";
  289. import Row from "../../../../components/coms/grid/row.vue";
  290. import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
  291. import Panel from "../../../../components/coms/panel/panel.vue";
  292. import Panel3 from "../../../../components/coms/panel/panel3.vue";
  293. import LightMatrix from "./light-matrix.vue";
  294. import WindSiteWeather from "./wind-site-weather.vue";
  295. export default {
  296. // 名称
  297. name: "WindSiteHome",
  298. // 使用组件
  299. components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix },
  300. // 数据
  301. data () {
  302. return {
  303. timmer: null, // 计时器
  304. fjmap: [], // 分机矩阵
  305. glvos: {}, // 72小时功率曲线图
  306. wxssmap: {}, // 五项损失饼图数据
  307. jczbmap: {}, // 顶部基础数据
  308. dayLost: [], // 日度损失电量分析柱状图
  309. donePower: [], // 完成电量柱状图
  310. // 饼图数据
  311. pieChartData: {
  312. // 日度
  313. dayData: [{
  314. title: "",
  315. value: []
  316. }],
  317. // 月度
  318. monthData: [{
  319. title: "",
  320. value: []
  321. }],
  322. // 年度
  323. yearData: [{
  324. title: "",
  325. value: []
  326. }],
  327. },
  328. // 完成电量
  329. CompleteElectricity: {
  330. data: [{
  331. title: "发电量",
  332. yAxisIndex: 0,
  333. value: []
  334. }, {
  335. title: "预测电量",
  336. yAxisIndex: 1,
  337. value: []
  338. }],
  339. units: [""],
  340. },
  341. // 4小时功率曲线图
  342. Powertrend: {
  343. value: [{
  344. title: "",
  345. value: []
  346. }]
  347. },
  348. // 月发电量对比
  349. MonthCompare: {
  350. units: ["(MK)"],
  351. value: [{
  352. title: "月发电量",
  353. yAxisIndex: 0,
  354. value: []
  355. }, {
  356. title: "月预测电量",
  357. yAxisIndex: 0,
  358. value: []
  359. }]
  360. },
  361. };
  362. },
  363. // 函数
  364. methods: {
  365. // 请求服务
  366. requestData (showLoading) {
  367. this.requestWpInfo(showLoading);
  368. this.requestLoss(showLoading);
  369. this.requestPower(showLoading);
  370. this.requestMonthPower(showLoading);
  371. },
  372. // 获取场站监视数据
  373. requestWpInfo (showLoading) {
  374. let that = this;
  375. that.API.requestData({
  376. showLoading,
  377. method: "POST",
  378. subUrl: "monitor/findWpInfoBywpId",
  379. data: {
  380. wpId: "MHS_FDC"
  381. },
  382. success (res) {
  383. if (res.data) {
  384. let fjmap = [];
  385. let keys = ["value1", "value2", "value3", "value4", "value5", "value6", "value7", "value9",];
  386. let Powertrend = {
  387. // 图表所用单位
  388. units: ["(万KWh)", "(风速)"],
  389. value: [{
  390. title: "应发功率",
  391. yAxisIndex: 1, // 使用单位
  392. value: []
  393. }, {
  394. title: "实发功率",
  395. yAxisIndex: 1, // 使用单位
  396. value: []
  397. }, {
  398. title: "理论功率",
  399. yAxisIndex: 1, // 使用单位
  400. value: []
  401. }, {
  402. title: "预测功率",
  403. yAxisIndex: 1, // 使用单位
  404. value: []
  405. }, {
  406. title: "保证功率",
  407. yAxisIndex: 1, // 使用单位
  408. value: []
  409. }, {
  410. title: "平均风速",
  411. yAxisIndex: 1, // 使用单位
  412. value: []
  413. }, {
  414. title: "小时预测功率",
  415. yAxisIndex: 1, // 使用单位
  416. value: []
  417. }, {
  418. title: "最有功率律",
  419. yAxisIndex: 1, // 使用单位
  420. value: []
  421. }]
  422. };
  423. let dayPieChartKey = [{
  424. key: "gzssdl",
  425. name: "故障损失电量"
  426. }, {
  427. key: "jxssdl",
  428. name: "检修损失电量"
  429. }, {
  430. key: "qfssdl",
  431. name: "性能损失电量"
  432. }, {
  433. key: "slssdl",
  434. name: "受累损失电量"
  435. }, {
  436. key: "xdssdl",
  437. name: "限电损失电量"
  438. }];
  439. // 饼图 1 数据
  440. let dayData = [];
  441. // 饼图 2 数据
  442. let monthData = [];
  443. // 饼图 2 数据
  444. let yearData = [];
  445. res.data.fjjzmap.fjmap[0].forEach(ele => {
  446. fjmap.push({
  447. tag: ele.wtnum,
  448. color: "gray",
  449. });
  450. });
  451. keys.forEach((key, keyIndex) => {
  452. res.data.glvos.forEach(ele => {
  453. Powertrend.value[keyIndex].value.push({
  454. text: "",
  455. value: ele[key] || 0
  456. });
  457. });
  458. });
  459. dayPieChartKey.forEach(ele => {
  460. dayData.push({
  461. value: res.data.wxssmap["r" + ele.key] || 0,
  462. unit: "万kwh",
  463. name: ele.name,
  464. });
  465. monthData.push({
  466. value: res.data.wxssmap["y" + ele.key] || 0,
  467. unit: "万kwh",
  468. name: ele.name,
  469. });
  470. yearData.push({
  471. value: res.data.wxssmap["n" + ele.key] || 0,
  472. unit: "万kwh",
  473. name: ele.name,
  474. });
  475. });
  476. that.fjmap = fjmap;
  477. // that.Powertrend = Powertrend;
  478. that.jczbmap = res.data.jczbmap;
  479. that.pieChartData = {
  480. dayData,
  481. monthData,
  482. yearData
  483. };
  484. } else {
  485. that.fjmap = [];
  486. that.Powertrend = {};
  487. that.jczbmap = {};
  488. that.pieChartData = {
  489. dayData: [],
  490. monthData: [],
  491. yearData: []
  492. };
  493. }
  494. },
  495. });
  496. },
  497. // 获取日度损失电量分析
  498. requestLoss (showLoading) {
  499. let that = this;
  500. that.API.requestData({
  501. showLoading,
  502. method: "POST",
  503. subUrl: "monitor/findLossWpBar",
  504. data: {
  505. wpId: "MHS_FDC"
  506. },
  507. success (res) {
  508. let dayLost = [];
  509. res.data.forEach(ele => {
  510. dayLost.push({
  511. text: ele.timestr,
  512. value: ele.value1 || 0,
  513. });
  514. });
  515. that.dayLost = dayLost;
  516. }
  517. });
  518. },
  519. // 获取完成电量
  520. requestPower (showLoading) {
  521. let that = this;
  522. that.API.requestData({
  523. showLoading,
  524. method: "POST",
  525. subUrl: "monitor/findPowerWpBar",
  526. data: {
  527. wpId: "MHS_FDC"
  528. },
  529. success (res) {
  530. let data = [{
  531. title: "发电量",
  532. yAxisIndex: 0,
  533. value: []
  534. }, {
  535. title: "预测电量",
  536. yAxisIndex: 1,
  537. value: []
  538. }];
  539. res.data.forEach(ele => {
  540. data[0].value.push({
  541. text: ele.timestr,
  542. value: ele.value1 || 0,
  543. });
  544. data[1].value.push({
  545. text: ele.timestr,
  546. value: ele.value2 || 0,
  547. });
  548. });
  549. that.CompleteElectricity.data = data;
  550. }
  551. });
  552. },
  553. // 获取月发电量对比
  554. requestMonthPower (showLoading) {
  555. let that = this;
  556. that.API.requestData({
  557. showLoading,
  558. method: "POST",
  559. subUrl: "monitor/findMonthPowerWpBar",
  560. data: {
  561. wpId: "MHS_FDC"
  562. },
  563. success (res) {
  564. let data = [{
  565. title: "月发电量",
  566. yAxisIndex: 0,
  567. value: []
  568. }, {
  569. title: "月预测电量",
  570. yAxisIndex: 0,
  571. value: []
  572. }];
  573. res.data.forEach(ele => {
  574. data[0].value.push({
  575. text: ele.timestr,
  576. value: ele.value1 || 0,
  577. });
  578. data[1].value.push({
  579. text: ele.timestr,
  580. value: ele.value2 || 0,
  581. });
  582. });
  583. that.MonthCompare.value = data;
  584. }
  585. });
  586. }
  587. },
  588. created () {
  589. let that = this;
  590. that.$nextTick(() => {
  591. that.requestData(false);
  592. that.timmer = setInterval(() => {
  593. that.requestData(false);
  594. }, that.$store.state.websocketTimeSec);
  595. });
  596. },
  597. mounted () {
  598. },
  599. unmounted () {
  600. clearInterval(this.timmer);
  601. this.timmer = null;
  602. },
  603. };
  604. </script>
  605. <style lang="less" scoped>
  606. .wind-site-home {
  607. .wind-site-info {
  608. margin-left: 0.7407vh;
  609. flex: 1 0 auto;
  610. & > .row {
  611. height: 100%;
  612. }
  613. .info-item {
  614. text-align: center;
  615. padding: 0 0.37vh;
  616. flex: 1;
  617. .value {
  618. font-size: @fontsize-s;
  619. margin-bottom: 1.111vh;
  620. }
  621. .text {
  622. font-size: 12px;
  623. color: @gray;
  624. }
  625. }
  626. }
  627. .wind-running-info {
  628. margin-left: 0.7407vh;
  629. padding: 0.741vh;
  630. flex: 1 1 auto;
  631. & > .row {
  632. height: 100%;
  633. }
  634. .fengji {
  635. display: flex;
  636. align-content: center;
  637. flex: 0 0 auto;
  638. .fengji-icon {
  639. padding: 1.111vh;
  640. border: 0.093vh solid #05bb4c;
  641. border-radius: 50%;
  642. border-right-color: transparent;
  643. border-top-color: transparent;
  644. svg {
  645. width: 3.333vh;
  646. height: 3.333vh;
  647. }
  648. }
  649. .info {
  650. display: flex;
  651. flex-direction: column;
  652. justify-content: center;
  653. .text {
  654. font-size: @fontsize-s;
  655. margin-bottom: 1.111vh;
  656. }
  657. .value {
  658. text-align: right;
  659. font-size: 1.852vh;
  660. }
  661. }
  662. }
  663. .situation {
  664. flex: 1 1 auto;
  665. margin-left: 1.481vh;
  666. .row + .row {
  667. margin: 0;
  668. }
  669. .status {
  670. flex: 1;
  671. width: 7.963vh;
  672. display: flex;
  673. align-items: center;
  674. padding: 0.37vh 0;
  675. svg {
  676. width: 1.111vh;
  677. height: 1.111vh;
  678. margin-right: 0.37vh;
  679. }
  680. .text {
  681. font-size: 12px;
  682. flex: auto;
  683. }
  684. .value {
  685. font-size: 12px;
  686. padding-right: 0.741vh;
  687. }
  688. }
  689. }
  690. }
  691. }
  692. </style>