LightMatrix1.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618
  1. <template>
  2. <div class="light-matrix">
  3. <Row class="panel-2" type="">
  4. <Col :span="12" class="left-50-16">
  5. <div class="panel">
  6. <div class="dot left top"></div>
  7. <div class="dot left bottom"></div>
  8. <div class="dot right top"></div>
  9. <div class="dot right bottom"></div>
  10. <div class="item">
  11. <div class="loop"></div>
  12. <span class="svg-icon svg-icon-gray svg-icon-md">
  13. <SvgIcon svgid="svg-wind-site"></SvgIcon>
  14. </span>
  15. </div>
  16. <div class="item write" @click="changeShow('jrfj_FDC')">
  17. <div>接入风机</div>
  18. <div>{{sourceMap.fcjrnum || '---'}}</div>
  19. </div>
  20. <div class="item blue" @click="changeShow('yx_FDC', 1)">
  21. <div>· 运行</div>
  22. <div>{{sourceMap.fcyxnum || '---'}}</div>
  23. </div>
  24. <div class="item green" @click="changeShow('dj_FDC', 0)">
  25. <div>· 待机</div>
  26. <div>{{sourceMap.fcdjnum || '---'}}</div>
  27. </div>
  28. <div class="item purple" @click="changeShow('xd_FDC', 5)">
  29. <div>· 限电</div>
  30. <div>{{sourceMap.fcxdnum || '---'}}</div>
  31. </div>
  32. <div class="item red" @click="changeShow('gz_FDC', 2)">
  33. <div>· 故障</div>
  34. <div>{{sourceMap.fcgznum || '---'}}</div>
  35. </div>
  36. <div class="item orange" @click="changeShow('jx_FDC', 4)">
  37. <div>· 检修</div>
  38. <div>{{sourceMap.fcwhnum || '---'}}</div>
  39. </div>
  40. <div class="item write" @click="changeShow('sl_FDC', 6)">
  41. <div>· 受累</div>
  42. <div>{{sourceMap.fcslnum || '---'}}</div>
  43. </div>
  44. <div class="item gray" @click="changeShow('lx_FDC', 3)">
  45. <div>· 离线</div>
  46. <div>{{sourceMap.fclxnum || '---'}}</div>
  47. </div>
  48. </div>
  49. </Col>
  50. <Col :span="12" class="left-50-16">
  51. <div class="panel">
  52. <div class="dot left top"></div>
  53. <div class="dot left bottom"></div>
  54. <div class="dot right top"></div>
  55. <div class="dot right bottom"></div>
  56. <div class="item">
  57. <div class="loop"></div>
  58. <span class="svg-icon svg-icon-gray svg-icon-md">
  59. <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
  60. </span>
  61. </div>
  62. <div class="item write" @click="changeShow('jrfj1_GDC')">
  63. <div>接入风机</div>
  64. <div>{{sourceMap.gfjrnum || '---'}}</div>
  65. </div>
  66. <div class="item blue" @click="changeShow('yx1_GDC', 1)">
  67. <div>· 运行</div>
  68. <div>{{sourceMap.gfyxnum || '---'}}</div>
  69. </div>
  70. <div class="item green" @click="changeShow('dj1_GDC', 0)">
  71. <div>· 待机</div>
  72. <div>{{sourceMap.gfdjnum || '---'}}</div>
  73. </div>
  74. <div class="item purple" @click="changeShow('xd1_GDC', 5)">
  75. <div>· 限电</div>
  76. <div>{{sourceMap.gfxdnum || '---'}}</div>
  77. </div>
  78. <div class="item red" @click="changeShow('gz1_GDC', 2)">
  79. <div>· 故障</div>
  80. <div>{{sourceMap.gfgznum || '---'}}</div>
  81. </div>
  82. <div class="item orange" @click="changeShow('jx1_GDC', 4)">
  83. <div>· 检修</div>
  84. <div>{{sourceMap.gfwhnum || '---'}}</div>
  85. </div>
  86. <div class="item write" @click="changeShow('sl1_GDC', 6)">
  87. <div>· 受累</div>
  88. <div>{{sourceMap.gfslnum || '---'}}</div>
  89. </div>
  90. <div class="item gray" @click="changeShow('lx1_GDC', 3)">
  91. <div>· 离线</div>
  92. <div>{{sourceMap.gflxnum || '---'}}</div>
  93. </div>
  94. </div>
  95. </Col>
  96. </Row>
  97. <div class="panel-box">
  98. <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
  99. <div>
  100. <div class="panel-title">
  101. <div class="panel-title-name">
  102. <i class="fa fa-send"></i>
  103. <span>{{sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name || '------'}}</span>
  104. <div class="sub-title-item" v-for="(fcItem, fcIndex) in fcStateArray" :key="fcIndex">
  105. <span class="sub-title">{{fcItem.text}}</span>
  106. <span class="sub-count" :class="fcItem.color">{{sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][fcItem.key]}}</span>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="panel-body">
  111. <table>
  112. <tbody>
  113. <tr>
  114. <td v-for="(cItem, cIndex) of pItem" :key="cIndex" v-show="cItem.isShow">
  115. <div class="card" :class="cItem.color">
  116. {{cItem.wtnum}}
  117. </div>
  118. </td>
  119. </tr>
  120. </tbody>
  121. </table>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. </template>
  128. <script>
  129. import Row from "@/components/coms/grid/row.vue";
  130. import Col from "@/components/coms/grid/col.vue";
  131. import SvgIcon from '@com/coms/icon/svg-icon.vue';
  132. import util from '@/helper/util.js';
  133. import { datainit, webtest } from "@tools/websocket.js";
  134. import store from "@store/index.js";
  135. import { isNumber } from 'util';
  136. export default {
  137. // 名称
  138. name: "LightMatrix1",
  139. // 使用组件
  140. components: {
  141. Row,
  142. Col,
  143. SvgIcon
  144. },
  145. // 数据
  146. data () {
  147. return {
  148. loadingFlg: false, // 遮罩开关
  149. websocketServe: null, // websocket 服务实例
  150. sourceMap: {}, // 核心数据
  151. fillCategory: null, // 过滤条件
  152. fillFjzt: null, // 过滤条件
  153. fcStateArray: [{
  154. text: "接入台数",
  155. color: "write",
  156. key: "jrts"
  157. }, {
  158. text: "待机台数",
  159. color: "green",
  160. key: "djts"
  161. }, {
  162. text: "并网台数",
  163. color: "blue",
  164. key: "yxts"
  165. }, {
  166. text: "限电台数",
  167. color: "purple",
  168. key: "xdts"
  169. }, {
  170. text: "故障台数",
  171. color: "red",
  172. key: "gzts"
  173. }, {
  174. text: "检修台数",
  175. color: "orange",
  176. key: "whts"
  177. }, {
  178. text: "受累台数",
  179. color: "write",
  180. key: "slts"
  181. }, {
  182. text: "离线台数",
  183. color: "gray",
  184. key: "lxts"
  185. }, {
  186. text: "风速",
  187. color: "gray",
  188. key: "ssfs"
  189. }, {
  190. text: "预测功率",
  191. color: "gray",
  192. key: "ycgl"
  193. }, {
  194. text: "保证功率",
  195. color: "gray",
  196. key: "bzgl"
  197. }, {
  198. text: "应发功率",
  199. color: "gray",
  200. key: "yfgl"
  201. }, {
  202. text: "实际功率",
  203. color: "gray",
  204. key: "sjgl"
  205. }, {
  206. text: "AGC指令",
  207. color: "gray",
  208. key: "agcygsd"
  209. }, {
  210. text: "出线功率",
  211. color: "gray",
  212. key: "agccxyg"
  213. }]
  214. }
  215. },
  216. // 函数
  217. methods: {
  218. // 根据风机状态码返回对应 class
  219. getColor (fjzt) {
  220. switch (fjzt) {
  221. case 0:
  222. return 'green';
  223. break;
  224. case 1:
  225. return 'blue';
  226. break;
  227. case 2:
  228. return 'red';
  229. break;
  230. case 3:
  231. return 'gray';
  232. break;
  233. case 4:
  234. return 'orange';
  235. break;
  236. case 5:
  237. return 'purple';
  238. break;
  239. case 6:
  240. return 'write';
  241. break;
  242. }
  243. },
  244. // 切换显示种类
  245. changeShow (category, fjzt, skipFill) {
  246. if (!skipFill) {
  247. if (this.fillCategory === category) {
  248. this.fillCategory = null;
  249. this.fillFjzt = null;
  250. } else {
  251. this.fillCategory = category;
  252. this.fillFjzt = fjzt;
  253. }
  254. }
  255. let fjmap = this.BASE.deepCopy(this.sourceMap.fjmap);
  256. fjmap.forEach(pEle => {
  257. pEle.forEach(cEle => {
  258. cEle.isShow = true;
  259. if (!this.fillCategory) {
  260. cEle.isShow = true;
  261. } else if (cEle.wpId.indexOf(category.split('_')[1]) !== -1) {
  262. if (isNumber(fjzt)) {
  263. cEle.fjzt === fjzt ? (cEle.isShow = true) : (cEle.isShow = false);
  264. } else {
  265. cEle.isShow = true;
  266. }
  267. } else {
  268. cEle.isShow = true;
  269. }
  270. });
  271. });
  272. this.sourceMap.fjmap = fjmap;
  273. },
  274. },
  275. mounted () {
  276. let that = this;
  277. that.loadingFlg = true;
  278. that.BASE.showLoading();
  279. that.$nextTick(() => {
  280. that.websocketServe && that.websocketServe.disconnect();
  281. that.API.requestData({
  282. method: "POST",
  283. subUrl: "admin/websocketdisconnect",
  284. success () {
  285. that.websocketServe = datainit("/topic/matrixdetialpushtask");
  286. }
  287. });
  288. });
  289. },
  290. beforeDestroy () {
  291. // 离开页面,销毁 websocket 实例
  292. this.websocketServe && this.websocketServe.disconnect();
  293. },
  294. watch: {
  295. // 监听 websocket 回调并包装数据用于展示
  296. '$store.state.windturbineMap': function (res) {
  297. this.loadingFlg && this.BASE.closeLoading();
  298. this.loadingFlg = false;
  299. if (res) {
  300. let sourceMap = JSON.parse(res);
  301. let fjmap = [];
  302. for (let key in sourceMap) {
  303. if (key !== 'fczbmap' && key !== 'fjmap') {
  304. sourceMap[key] += '';
  305. } else if (key === 'fjmap') {
  306. sourceMap[key].forEach(pItem => {
  307. pItem.forEach(cItem => {
  308. cItem.color = this.getColor(cItem.fjzt);
  309. cItem.isShow = true;
  310. });
  311. });
  312. }
  313. }
  314. this.sourceMap = sourceMap;
  315. if (this.fillCategory) {
  316. this.changeShow(this.fillCategory, this.fillFjzt, true);
  317. }
  318. } else {
  319. this.sourceMap = {};
  320. }
  321. console.log(333, JSON.parse(res));
  322. }
  323. }
  324. }
  325. </script>
  326. <style lang="less" scoped>
  327. @panelHeight: 6.481vh;
  328. @titleHeight: 3.704vh;
  329. .light-matrix {
  330. width: calc(100% - 1.111vh);
  331. height: calc(100vh - 7.222vh);
  332. display: flex;
  333. flex-direction: column;
  334. .panel-2 {
  335. .left-50-16 {
  336. width: calc(50% - 0.741vh);
  337. }
  338. }
  339. .panel {
  340. width: 100%;
  341. border: 1px solid @gray;
  342. position: relative;
  343. padding: 1.111vh 2.222vh;
  344. background-color: fade(@gray, 20%);
  345. display: flex;
  346. height: 6.944vh;
  347. .item {
  348. cursor: pointer;
  349. }
  350. .dot {
  351. width: 2px;
  352. height: 2px;
  353. border-radius: 50%;
  354. background-color: @write;
  355. position: absolute;
  356. &.left {
  357. left: 4px;
  358. }
  359. &.right {
  360. right: 4px;
  361. }
  362. &.top {
  363. top: 4px;
  364. }
  365. &.bottom {
  366. bottom: 4px;
  367. }
  368. }
  369. .item {
  370. flex: 1;
  371. display: flex;
  372. align-items: center;
  373. justify-content: center;
  374. flex-direction: column;
  375. color: @write;
  376. position: relative;
  377. .loop {
  378. position: absolute;
  379. width: 4.444vh;
  380. height: 4.444vh;
  381. border-radius: 50%;
  382. border: 1px solid @gray;
  383. background-color: fade(@gray, 20);
  384. left: calc(50% - 2.222vh);
  385. top: calc(50% - 2.222vh);
  386. }
  387. &.write {
  388. color: @write;
  389. }
  390. &.green {
  391. color: @green;
  392. }
  393. &.blue {
  394. color: @darkBlue;
  395. }
  396. &.purple {
  397. color: @purple;
  398. }
  399. &.red {
  400. color: @red;
  401. }
  402. &.orange {
  403. color: @orange;
  404. }
  405. &.gray {
  406. color: @gray;
  407. }
  408. div {
  409. line-height: 2.222vh;
  410. &:first-child {
  411. font-size: @fontsize;
  412. }
  413. &:last-child {
  414. font-size: @fontsize-l;
  415. font-family: 'Bicubik';
  416. }
  417. }
  418. }
  419. .item2 {
  420. flex: 1;
  421. display: flex;
  422. width: 20%;
  423. flex-wrap: wrap;
  424. .name {
  425. color: @gray;
  426. width: 50%;
  427. text-align: center;
  428. }
  429. .num2 {
  430. width: 50%;
  431. color: @yellow;
  432. text-align: left;
  433. }
  434. .num1 {
  435. width: 50%;
  436. color: @yellow;
  437. text-align: center;
  438. position: relative;
  439. &::after {
  440. content: '';
  441. position: absolute;
  442. width: 1.481vh;
  443. height: 0.556vh;
  444. background-color: @yellow;
  445. left: 1.204vh;
  446. top: 0.741vh;
  447. }
  448. }
  449. .num3 {
  450. width: 50%;
  451. color: @yellow;
  452. text-align: left;
  453. }
  454. }
  455. }
  456. .panel-box {
  457. margin-top: 1.481vh;
  458. flex-grow: 1;
  459. overflow: auto;
  460. .panel-title {
  461. width: 100%;
  462. height: @titleHeight;
  463. line-height: @titleHeight;
  464. background-color: fade(@gray, 40%);
  465. .panel-title-name {
  466. font-size: @fontsize-s;
  467. color: @green;
  468. display: flex;
  469. align-items: center;
  470. i {
  471. margin: 0 0.556vh 0 1.481vh;
  472. }
  473. .sub-title-item {
  474. .sub-title {
  475. color: @gray;
  476. font-size: 1.019vh;
  477. margin: 0 0.556vh 0 1.481vh;
  478. }
  479. .sub-count {
  480. font-size: 1.296vh;
  481. font-family: 'Bicubik';
  482. font-weight: 500;
  483. &.write {
  484. color: @write;
  485. }
  486. &.green {
  487. color: @green;
  488. }
  489. &.blue {
  490. color: @blue;
  491. }
  492. &.purple {
  493. color: @purple;
  494. }
  495. &.red {
  496. color: @red;
  497. }
  498. &.orange {
  499. color: @orange;
  500. }
  501. &.gray {
  502. color: @gray;
  503. }
  504. }
  505. }
  506. }
  507. }
  508. .panel-body {
  509. height: calc(100% - 7.407vh);
  510. background-color: fade(@gray, 20%);
  511. padding: 0.741vh;
  512. overflow: auto;
  513. margin-bottom: 1.481vh;
  514. table {
  515. width: 100%;
  516. .card {
  517. border-radius: 4px;
  518. padding: 0.185vh 0;
  519. text-align: center;
  520. border: 1px solid;
  521. font-size: @fontsize-s;
  522. &.write {
  523. color: @black;
  524. border-color: @write;
  525. background-color: @write;
  526. }
  527. &.green {
  528. color: @green;
  529. border-color: @green;
  530. }
  531. &.blue {
  532. color: @darkBlue;
  533. border-color: @darkBlue;
  534. }
  535. &.purple {
  536. color: @purple;
  537. border-color: @purple;
  538. }
  539. &.red {
  540. color: @write;
  541. border-color: @red;
  542. background-color: @red;
  543. }
  544. &.orange {
  545. color: @orange;
  546. border-color: @orange;
  547. }
  548. &.gray {
  549. color: @write;
  550. border-color: @gray;
  551. background-color: @gray;
  552. }
  553. }
  554. }
  555. }
  556. }
  557. }
  558. </style>