Home.vue 19 KB

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