LightMatrix1.vue 28 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186
  1. <template >
  2. <el-scrollbar>
  3. <div
  4. :class="
  5. $store.state.themeName === 'dark' ? 'dark-matrix' : 'light-matrix'
  6. "
  7. >
  8. <Row class="panel-2" type="">
  9. <Col :span="12" class="left-50-16">
  10. <div class="panel">
  11. <div class="dot left top"></div>
  12. <div class="dot left bottom"></div>
  13. <div class="dot right top"></div>
  14. <div class="dot right bottom"></div>
  15. <div class="item">
  16. <div class="loop"></div>
  17. <span class="svg-icon svg-icon-gray svg-icon-md">
  18. <SvgIcon svgid="svg-wind-site"></SvgIcon>
  19. </span>
  20. </div>
  21. <div class="item Add " @click="changeShow('jrfj_FDC')">
  22. <div class="curStyle">
  23. <div>接入风机</div>
  24. <div>{{ sourceMap.fcjrnum || "---" }}</div>
  25. </div>
  26. </div>
  27. <div class="item blue" @click="changeShow('yx_FDC', 1)">
  28. <div class="curStyle">
  29. <div>· 运行</div>
  30. <div>{{ sourceMap.fcyxnum || "---" }}</div>
  31. </div>
  32. </div>
  33. <div class="item green " @click="changeShow('dj_FDC', 0)">
  34. <div class="curStyle">
  35. <div>· 待机</div>
  36. <div>{{ sourceMap.fcdjnum || "---" }}</div>
  37. </div>
  38. </div>
  39. <div class="item pink" @click="changeShow('xd_FDC', 5)">
  40. <div class="curStyle">
  41. <div>· 限电</div>
  42. <div>{{ sourceMap.fcxdnum || "---" }}</div>
  43. </div>
  44. </div>
  45. <div class="item red" @click="changeShow('gz_FDC', 2)">
  46. <div class="curStyle">
  47. <div>· 故障</div>
  48. <div>{{ sourceMap.fcgznum || "---" }}</div>
  49. </div>
  50. </div>
  51. <div class="item orange" @click="changeShow('jx_FDC', 4)">
  52. <div class="curStyle">
  53. <div>· 检修</div>
  54. <div>{{ sourceMap.fcwhnum || "---" }}</div>
  55. </div>
  56. </div>
  57. <div class="item write" @click="changeShow('sl_FDC', 6)">
  58. <div class="curStyle">
  59. <div>· 受累</div>
  60. <div>{{ sourceMap.fcslnum || "---" }}</div>
  61. </div>
  62. </div>
  63. <div class="item gray" @click="changeShow('lx_FDC', 3)">
  64. <div class="curStyle">
  65. <div>· 离线</div>
  66. <div>{{ sourceMap.fclxnum || "---" }}</div>
  67. </div>
  68. </div>
  69. </div>
  70. </Col>
  71. <Col :span="12" class="left-50-16">
  72. <div class="panel">
  73. <div class="dot left top"></div>
  74. <div class="dot left bottom"></div>
  75. <div class="dot right top"></div>
  76. <div class="dot right bottom"></div>
  77. <div class="item">
  78. <div class="loop"></div>
  79. <span class="svg-icon svg-icon-gray svg-icon-md">
  80. <SvgIcon
  81. :svgid="'svg-photovoltaic'"
  82. style="margin: 3px 0px -3px 1px"
  83. ></SvgIcon>
  84. </span>
  85. </div>
  86. <div class="item Add " @click="changeShow('jrfj1_GDC')">
  87. <div class="curStyle">
  88. <div>逆变器</div>
  89. <div>{{ sourceMap.gfjrnum || "---" }}</div>
  90. </div>
  91. </div>
  92. <div class="item blue" @click="changeShow('yx1_GDC', 1)">
  93. <div class="curStyle">
  94. <div>· 运行</div>
  95. <div>{{ sourceMap.gfyxnum || "---" }}</div>
  96. </div>
  97. </div>
  98. <div class="item green " @click="changeShow('dj1_GDC', 0)">
  99. <div class="curStyle">
  100. <div>· 待机</div>
  101. <div>{{ sourceMap.gfdjnum || "---" }}</div>
  102. </div>
  103. </div>
  104. <div class="item pink" @click="changeShow('xd1_GDC', 5)">
  105. <div class="curStyle">
  106. <div>· 限电</div>
  107. <div>{{ sourceMap.gfxdnum || "---" }}</div>
  108. </div>
  109. </div>
  110. <div class="item red" @click="changeShow('gz1_GDC', 2)">
  111. <div class="curStyle">
  112. <div>· 故障</div>
  113. <div>{{ sourceMap.gfgznum || "---" }}</div>
  114. </div>
  115. </div>
  116. <div class="item orange" @click="changeShow('jx1_GDC', 4)">
  117. <div class="curStyle">
  118. <div>· 检修</div>
  119. <div>{{ sourceMap.gfwhnum || "---" }}</div>
  120. </div>
  121. </div>
  122. <div class="item write" @click="changeShow('sl1_GDC', 6)">
  123. <div class="curStyle">
  124. <div>· 受累</div>
  125. <div>{{ sourceMap.gfslnum || "---" }}</div>
  126. </div>
  127. </div>
  128. <div class="item gray curStyle" @click="changeShow('lx1_GDC', 3)">
  129. <div class="curStyle">
  130. <div>· 离线</div>
  131. <div>{{ sourceMap.gflxnum || "---" }}</div>
  132. </div>
  133. </div>
  134. </div>
  135. </Col>
  136. </Row>
  137. <div class="panel-box">
  138. <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
  139. <div
  140. class="panel-title"
  141. v-if="sourceMap.fjmap[pIndex][0].wpId.includes('FDC')"
  142. >
  143. <div class="panel-title-name">
  144. <i class="svg-icon svg-icon-sm svg-icon-green">
  145. <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
  146. </i>
  147. <span>{{
  148. sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name ||
  149. "------"
  150. }}</span>
  151. <div
  152. class="sub-title-item"
  153. v-for="(fcItem, fcIndex) in fcStateArray"
  154. :key="fcIndex"
  155. >
  156. <span class="sub-title">{{ fcItem.text }}</span>
  157. <span class="sub-count" :class="fcItem.color">{{
  158. sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][fcItem.key]||'0'
  159. }}</span>
  160. </div>
  161. </div>
  162. </div>
  163. <div
  164. class="panel-title"
  165. v-if="sourceMap.fjmap[pIndex][0].wpId.includes('GDC')"
  166. >
  167. <div class="panel-title-name">
  168. <i class="svg-icon svg-icon-sm svg-icon-green">
  169. <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
  170. </i>
  171. <span>{{
  172. sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name ||
  173. "------"
  174. }}</span>
  175. <div
  176. class="sub-title-item"
  177. v-for="(fcItem, fcIndex) in fcStateArray1"
  178. :key="fcIndex"
  179. >
  180. <span class="sub-title">{{ fcItem.text }}</span>
  181. <span class="sub-count" :class="fcItem.color">{{
  182. sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][fcItem.key]||'0'
  183. }}</span>
  184. </div>
  185. </div>
  186. </div>
  187. <div class="panel-body">
  188. <div
  189. class="card"
  190. v-for="(cItem, cIndex) of pItem"
  191. :key="cIndex"
  192. v-show="cItem.isShow"
  193. :class="cItem.color"
  194. @click="goDetails(cItem)"
  195. >
  196. {{ cItem.wtId.substring(cItem.wtId.length - 3) }}
  197. </div>
  198. <!-- 站位用 保证卡片布局最后一行不会有问题 -->
  199. <i class="blank" v-for="i in pItem.length" :key="i"></i>
  200. <!-- <i class="blank" v-for="i in pItem.length" :key="i"></i> -->
  201. </div>
  202. </div>
  203. </div>
  204. </div>
  205. </el-scrollbar>
  206. <Dialog v-model="detialDisplay" :wpId='stationId' :wtId='windId'></Dialog>
  207. </template>
  208. <script>
  209. import Row from "@/components/coms/grid/row.vue";
  210. import Col from "@/components/coms/grid/col.vue";
  211. import SvgIcon from "@com/coms/icon/svg-icon.vue";
  212. import Dialog from "@/components/dialog/index.vue";
  213. import api from "@api/cockpit/matrix/index.js";
  214. import util from "@/helper/util.js";
  215. import store from "@store/index.js";
  216. import { isNumber } from "util";
  217. import { setInterval, clearInterval } from "timers";
  218. export default {
  219. // 名称
  220. name: "LightMatrix1",
  221. // 使用组件
  222. components: {
  223. Row,
  224. Col,
  225. SvgIcon,
  226. Dialog,
  227. },
  228. // 数据
  229. data() {
  230. return {
  231. timmer: null, // 计时器
  232. sourceMap: {}, // 核心数据
  233. fillCategory: null, // 过滤条件
  234. fillFjzt: null, // 过滤条件
  235. detialDisplay: false,
  236. stationId: '',
  237. windId: '',
  238. fcStateArray: [
  239. {
  240. text: "接入台数",
  241. color: "",
  242. key: "jrts",
  243. },
  244. {
  245. text: "待机台数",
  246. color: "green",
  247. key: "djts",
  248. },
  249. {
  250. text: "并网台数",
  251. color: "blue",
  252. key: "yxts",
  253. },
  254. {
  255. text: "限电台数",
  256. color: "pink",
  257. key: "xdts",
  258. },
  259. {
  260. text: "故障台数",
  261. color: "red",
  262. key: "gzts",
  263. },
  264. {
  265. text: "检修台数",
  266. color: "orange",
  267. key: "whts",
  268. },
  269. {
  270. text: "受累台数",
  271. color: "black",
  272. key: "slts",
  273. },
  274. {
  275. text: "离线台数",
  276. color: "gray",
  277. key: "lxts",
  278. },
  279. {
  280. text: "风速",
  281. color: "gray1",
  282. key: "ssfs",
  283. },
  284. {
  285. text: "预测功率",
  286. color: "gray1",
  287. key: "ycgl",
  288. },
  289. {
  290. text: "保证功率",
  291. color: "gray1",
  292. key: "bzgl",
  293. },
  294. {
  295. text: "应发功率",
  296. color: "gray1",
  297. key: "yfgl",
  298. },
  299. {
  300. text: "实际功率",
  301. color: "gray1",
  302. key: "sjgl",
  303. },
  304. {
  305. text: "AGC指令",
  306. color: "gray1",
  307. key: "agcygsd",
  308. },
  309. {
  310. text: "出线功率",
  311. color: "gray1",
  312. key: "agccxyg",
  313. },
  314. ],
  315. fcStateArray1: [
  316. {
  317. text: "接入台数",
  318. color: "",
  319. key: "jrts",
  320. },
  321. {
  322. text: "待机台数",
  323. color: "green",
  324. key: "djts",
  325. },
  326. {
  327. text: "并网台数",
  328. color: "blue",
  329. key: "yxts",
  330. },
  331. {
  332. text: "限电台数",
  333. color: "purple",
  334. key: "xdts",
  335. },
  336. {
  337. text: "故障台数",
  338. color: "red",
  339. key: "gzts",
  340. },
  341. {
  342. text: "检修台数",
  343. color: "orange",
  344. key: "whts",
  345. },
  346. {
  347. text: "受累台数",
  348. color: "write",
  349. key: "slts",
  350. },
  351. {
  352. text: "离线台数",
  353. color: "gray",
  354. key: "lxts",
  355. },
  356. {
  357. text: "日照强度",
  358. color: "gray",
  359. key: "ssfs",
  360. },
  361. {
  362. text: "预测功率",
  363. color: "gray",
  364. key: "ycgl",
  365. },
  366. {
  367. text: "保证功率",
  368. color: "gray",
  369. key: "bzgl",
  370. },
  371. {
  372. text: "应发功率",
  373. color: "gray",
  374. key: "yfgl",
  375. },
  376. {
  377. text: "实际功率",
  378. color: "gray",
  379. key: "sjgl",
  380. },
  381. {
  382. text: "AGC指令",
  383. color: "gray",
  384. key: "agcygsd",
  385. },
  386. {
  387. text: "出线功率",
  388. color: "gray",
  389. key: "agccxyg",
  390. },
  391. ],
  392. };
  393. },
  394. // 函数
  395. methods: {
  396. // 根据风机状态码返回对应 class
  397. getColor(fjzt) {
  398. switch (fjzt) {
  399. case 0:
  400. return "green";
  401. case 1:
  402. return "blue";
  403. case 2:
  404. return "red";
  405. case 3:
  406. return "gray";
  407. case 4:
  408. return "orange";
  409. case 5:
  410. return "pink";
  411. case 6:
  412. return "pink";
  413. }
  414. },
  415. // 切换显示种类
  416. changeShow(category, fjzt, skipFill) {
  417. // if (!skipFill) {
  418. // console.log("!skipFill:", !skipFill);
  419. // if (this.fillCategory === category) {
  420. // console.log("fillCategory:", this.fillCategory);
  421. // console.log("fillFjz:", this.fillFjzt);
  422. // this.fillCategory = null;
  423. // this.fillFjzt = null;
  424. // } else {
  425. this.fillCategory = category;
  426. this.fillFjzt = fjzt;
  427. // }
  428. // }
  429. let fjmap = this.BASE.deepCopy(this.sourceMap.fjmap);
  430. fjmap.forEach((pEle) => {
  431. console.log("pele:", pEle);
  432. pEle.forEach((cEle) => {
  433. console.log("cele:", cEle);
  434. cEle.isShow = true;
  435. if (!this.fillCategory) {
  436. cEle.isShow = true;
  437. // cEle.isShow=false;
  438. } else if (cEle.wpId.indexOf(category.split("_")[1]) !== -1) {
  439. if (isNumber(fjzt)) {
  440. cEle.fjzt === fjzt ? (cEle.isShow = true) : (cEle.isShow = false);
  441. } else {
  442. cEle.isShow = true;
  443. // cEle.isShow = false;
  444. }
  445. } else {
  446. cEle.isShow = true;
  447. }
  448. });
  449. });
  450. this.sourceMap.fjmap = fjmap;
  451. },
  452. // 请求服务
  453. requestData(showLoading) {
  454. api.matrixPush(showLoading).then((res) => {
  455. if (res) {
  456. let sourceMap = res.data;
  457. let fjmap = [];
  458. for (let key in sourceMap) {
  459. if (key !== "fczbmap" && key !== "fjmap") {
  460. sourceMap[key] += "";
  461. } else if (key === "fjmap") {
  462. sourceMap[key].forEach((pItem) => {
  463. pItem.forEach((cItem) => {
  464. cItem.color = this.getColor(cItem.fjzt);
  465. cItem.isShow = true;
  466. });
  467. });
  468. }
  469. }
  470. this.sourceMap = sourceMap;
  471. if (this.fillCategory) {
  472. this.changeShow(this.fillCategory, this.fillFjzt, true);
  473. }
  474. } else {
  475. this.sourceMap = {};
  476. }
  477. });
  478. },
  479. // 查看风机详情
  480. goDetails(item) {
  481. if (item.wpId.indexOf("FDC") !== -1) {
  482. this.detialDisplay = true
  483. this.stationId = item.wpId
  484. this.windId = item.wtId
  485. // this.$router.push({
  486. // path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
  487. // });
  488. } else {
  489. this.$router.push({
  490. path: `windsite/inverter-info/${item.wpId}/${item.wtId}`,
  491. });
  492. }
  493. },
  494. },
  495. created() {
  496. let that = this;
  497. that.$nextTick(() => {
  498. that.requestData(true);
  499. that.timmer = setInterval(() => {
  500. that.requestData(false);
  501. }, that.$store.state.websocketTimeSec);
  502. });
  503. },
  504. unmounted() {
  505. clearInterval(this.timmer);
  506. this.timmer = null;
  507. },
  508. };
  509. </script>
  510. <style lang="less" scoped>
  511. @panelHeight: 6.481vh;
  512. @titleHeight: 2.7778vh;
  513. .light-matrix {
  514. // width: calc(100% - 1.111vh);
  515. height: calc(100vh - 7.222vh);
  516. display: flex;
  517. flex-direction: column;
  518. .panel-2 {
  519. .left-50-16 {
  520. width: calc(50% - 0.741vh);
  521. }
  522. }
  523. .panel {
  524. width: 100%;
  525. border: 0.093vh solid @darkgray;
  526. position: relative;
  527. padding: 0.7407vh 1.4815vh;
  528. background-color: fade(@darkgray, 20%);
  529. display: flex;
  530. .dot {
  531. width: 0.185vh;
  532. height: 0.185vh;
  533. border-radius: 50%;
  534. background-color: @write;
  535. position: absolute;
  536. &.left {
  537. left: 0.37vh;
  538. }
  539. &.right {
  540. right: 0.37vh;
  541. }
  542. &.top {
  543. top: 0.37vh;
  544. }
  545. &.bottom {
  546. bottom: 0.37vh;
  547. }
  548. }
  549. .item {
  550. flex: 1;
  551. display: flex;
  552. align-items: center;
  553. justify-content: center;
  554. flex-direction: column;
  555. color: @write;
  556. position: relative;
  557. .loop {
  558. position: absolute;
  559. width: 4.444vh;
  560. height: 4.444vh;
  561. border-radius: 50%;
  562. border: 0.093vh solid @darkgray;
  563. background-color: fade(@darkgray, 20);
  564. left: calc(50% - 2.222vh);
  565. top: calc(50% - 2.222vh);
  566. }
  567. &.write {
  568. background-color: black;
  569. // color: @write;
  570. color: #fff;
  571. }
  572. &.Add{
  573. color: #000 !important;
  574. font-size: 17px;
  575. font-weight: 700;
  576. }
  577. &.green {
  578. background-color: #24a13a!important;
  579. // color: @green;
  580. color: #fff !important;
  581. }
  582. &.blue {
  583. background-color: #00a5db;
  584. // color: @darkBlue;
  585. color: #fff;
  586. }
  587. &.pink {
  588. background-color: #b10e7e;
  589. // color: @pink;
  590. color: #fff;
  591. }
  592. &.red {
  593. background-color: #cb2020;
  594. // color: @red;
  595. color: #fff;
  596. }
  597. &.orange {
  598. background-color: fade(@orange, 100%);
  599. // color: @orange;
  600. color: #fff;
  601. }
  602. &.gray {
  603. background-color: #929ca3;
  604. color: #fff !important;
  605. }
  606. div {
  607. line-height: 2.222vh;
  608. &:first-child {
  609. font-size: @fontsize-s;
  610. }
  611. &:last-child {
  612. font-size: @fontsize;
  613. // font-family: "Bicubik";
  614. }
  615. }
  616. }
  617. .item2 {
  618. flex: 1;
  619. display: flex;
  620. width: 20%;
  621. flex-wrap: wrap;
  622. .name {
  623. color: @gray;
  624. width: 50%;
  625. text-align: center;
  626. }
  627. .num2 {
  628. width: 50%;
  629. color: @yellow;
  630. text-align: left;
  631. }
  632. .num1 {
  633. width: 50%;
  634. color: @yellow;
  635. text-align: center;
  636. position: relative;
  637. &::after {
  638. content: "";
  639. position: absolute;
  640. width: 1.481vh;
  641. height: 0.556vh;
  642. background-color: @yellow;
  643. left: 1.204vh;
  644. top: 0.741vh;
  645. }
  646. }
  647. .num3 {
  648. width: 50%;
  649. color: @yellow;
  650. text-align: left;
  651. }
  652. }
  653. }
  654. .panel-box {
  655. margin-top: 0.7407vh;
  656. flex-grow: 1;
  657. .panel-title {
  658. width: 100%;
  659. line-height: @titleHeight;
  660. background-color: fade(@darkgray, 40%);
  661. .panel-title-name {
  662. width: 99%;
  663. font-size: 14px;
  664. color: @green;
  665. display: flex;
  666. flex-wrap: wrap;
  667. align-items: center;
  668. justify-content: center;
  669. padding-left: 16px;
  670. i {
  671. margin-right: 0.7407vh;
  672. }
  673. .sub-title-item {
  674. display: flex;
  675. flex: 1;
  676. .sub-title {
  677. flex: 0 0 auto;
  678. color: #000000;
  679. font-size: 14px;
  680. margin: 0 0.556vh 0 1.481vh;
  681. font-weight: bold;
  682. }
  683. .sub-count {
  684. flex: 1 0 auto;
  685. font-size: 14px;
  686. // font-family: "Bicubik";
  687. font-weight: 500!important;
  688. &.black {
  689. color: #ffffff!important;
  690. background-color: black;
  691. display: flex;
  692. align-items: center;
  693. justify-content: center;
  694. }
  695. &.black1 {
  696. color: black;
  697. display: flex;
  698. align-items: center;
  699. font-weight: 800;
  700. }
  701. &.green {
  702. color: @green;
  703. color: #ffffff !important;
  704. background-color: #24a13a;
  705. display: flex;
  706. align-items: center;
  707. justify-content: center;
  708. }
  709. &.blue {
  710. color: @darkBlue;
  711. color: #ffffff;
  712. background-color: #00a5db;
  713. display: flex;
  714. align-items: center;
  715. justify-content: center;
  716. }
  717. &.pink {
  718. color: #ffffff;
  719. background-color: #b10e7e;
  720. display: flex;
  721. align-items: center;
  722. justify-content: center;
  723. }
  724. &.red {
  725. color: @red;
  726. color: #ffffff;
  727. background-color: #cb2020;
  728. display: flex;
  729. align-items: center;
  730. justify-content: center;
  731. }
  732. &.orange {
  733. color: @orange;
  734. color: #ffffff;
  735. background-color: #ff7800;
  736. display: flex;
  737. align-items: center;
  738. justify-content: center;
  739. }
  740. &.gray1 {
  741. color: #000 !important;
  742. font-weight: 800;
  743. display: flex;
  744. align-items: center!important;
  745. justify-content: center!important;
  746. }
  747. &.gray {
  748. color: #fff !important;
  749. background-color: #929ca3;
  750. display: flex;
  751. align-items: center!important;
  752. justify-content: center!important;
  753. }
  754. }
  755. }
  756. }
  757. }
  758. .panel-body {
  759. height: calc(100% - 7.407vh);
  760. padding: 0.3704vh;
  761. width: 100%;
  762. display: flex;
  763. flex-direction: row;
  764. flex-wrap: wrap;
  765. justify-content: space-between;
  766. justify-content: flex-start;
  767. .blank {
  768. margin-right:100px;
  769. flex: 1 0 42px;
  770. }
  771. .card {
  772. text-align: center;
  773. height: 20px;
  774. line-height: 20px;
  775. margin-right: 2px;
  776. margin-top: 2px;
  777. flex: 1 0 140px;
  778. cursor: pointer;
  779. }
  780. .card {
  781. border-radius: 0.37vh;
  782. padding: 0.185vh 0.3704vh;
  783. text-align: center;
  784. border: 0.093vh solid;
  785. font-size: 12px;
  786. &.write {
  787. color: @black;
  788. border-color: @write;
  789. background-color: @write;
  790. }
  791. &.green {
  792. border-color: @green;
  793. color: #ffffff !important;
  794. background-color: #24a13a;
  795. }
  796. &.blue {
  797. color: #ffffff;
  798. background-color: #00a5db;
  799. border-color: @darkBlue;
  800. }
  801. &.pink {
  802. color: #ffffff;
  803. background-color: #b10e7e;
  804. border-color: @pink;
  805. }
  806. &.red {
  807. color: @write;
  808. border-color: @red;
  809. background-color: @red;
  810. }
  811. &.orange {
  812. color: #ffffff;
  813. background-color: #ff7800;
  814. border-color: @orange;
  815. }
  816. &.gray {
  817. color: #fff !important;
  818. background-color: #929ca3;
  819. border-color: @darkgray;
  820. }
  821. }
  822. }
  823. }
  824. .curStyle {
  825. cursor: pointer;
  826. text-align: center;
  827. }
  828. }
  829. // ---------------------------------------------------------------------------
  830. .dark-matrix {
  831. // width: calc(100% - 1.111vh);
  832. height: calc(100vh - 7.222vh);
  833. display: flex;
  834. flex-direction: column;
  835. .panel-2 {
  836. .left-50-16 {
  837. width: calc(50% - 0.741vh);
  838. }
  839. }
  840. .panel {
  841. width: 100%;
  842. border: 0.093vh solid @darkgray;
  843. position: relative;
  844. padding: 0.7407vh 1.4815vh;
  845. background-color: fade(@darkgray, 20%);
  846. display: flex;
  847. .dot {
  848. width: 0.185vh;
  849. height: 0.185vh;
  850. border-radius: 50%;
  851. background-color: @write;
  852. position: absolute;
  853. &.left {
  854. left: 0.37vh;
  855. }
  856. &.right {
  857. right: 0.37vh;
  858. }
  859. &.top {
  860. top: 0.37vh;
  861. }
  862. &.bottom {
  863. bottom: 0.37vh;
  864. }
  865. }
  866. .item {
  867. flex: 1;
  868. display: flex;
  869. align-items: center;
  870. justify-content: center;
  871. flex-direction: column;
  872. color: @write;
  873. position: relative;
  874. .loop {
  875. position: absolute;
  876. width: 4.444vh;
  877. height: 4.444vh;
  878. border-radius: 50%;
  879. border: 0.093vh solid @darkgray;
  880. background-color: fade(@darkgray, 20);
  881. left: calc(50% - 2.222vh);
  882. top: calc(50% - 2.222vh);
  883. }
  884. &.write {
  885. color: @write;
  886. }
  887. &.green {
  888. color: @green;
  889. }
  890. &.blue {
  891. color: @darkBlue;
  892. }
  893. &.pink {
  894. color: @pink;
  895. }
  896. &.red {
  897. color: @red;
  898. }
  899. &.orange {
  900. color: @orange;
  901. }
  902. &.gray {
  903. color: @gray;
  904. }
  905. div {
  906. line-height: 2.222vh;
  907. &:first-child {
  908. font-size: @fontsize-s;
  909. }
  910. &:last-child {
  911. font-size: @fontsize;
  912. font-family: "Bicubik";
  913. }
  914. }
  915. }
  916. .item2 {
  917. flex: 1;
  918. display: flex;
  919. width: 20%;
  920. flex-wrap: wrap;
  921. .name {
  922. color: @gray;
  923. width: 50%;
  924. text-align: center;
  925. }
  926. .num2 {
  927. width: 50%;
  928. color: @yellow;
  929. text-align: left;
  930. }
  931. .num1 {
  932. width: 50%;
  933. color: @yellow;
  934. text-align: center;
  935. position: relative;
  936. &::after {
  937. content: "";
  938. position: absolute;
  939. width: 1.481vh;
  940. height: 0.556vh;
  941. background-color: @yellow;
  942. left: 1.204vh;
  943. top: 0.741vh;
  944. }
  945. }
  946. .num3 {
  947. width: 50%;
  948. color: @yellow;
  949. text-align: left;
  950. }
  951. }
  952. }
  953. .panel-box {
  954. margin-top: 0.7407vh;
  955. flex-grow: 1;
  956. .panel-title {
  957. width: 100%;
  958. height: @titleHeight;
  959. line-height: @titleHeight;
  960. background-color: fade(@darkgray, 40%);
  961. .panel-title-name {
  962. font-size: @fontsize-s;
  963. color: @green;
  964. display: flex;
  965. align-items: center;
  966. padding: 0 16px;
  967. i {
  968. margin-right: 0.7407vh;
  969. }
  970. .sub-title-item {
  971. display: flex;
  972. flex: 1;
  973. justify-content: center;
  974. .sub-title {
  975. flex: 0 0 auto;
  976. color: @gray;
  977. font-size: 12px;
  978. margin: 0 0.556vh 0 1.481vh;
  979. }
  980. .sub-count {
  981. flex: 1 0 auto;
  982. font-size: 14px;
  983. font-family: "Bicubik";
  984. font-weight: 500;
  985. &.write {
  986. color: @write;
  987. }
  988. &.green {
  989. color: @green;
  990. }
  991. &.blue {
  992. color: @darkBlue;
  993. }
  994. &.pink {
  995. color: @pink;
  996. }
  997. &.red {
  998. color: @red;
  999. }
  1000. &.orange {
  1001. color: @orange;
  1002. }
  1003. &.gray {
  1004. color: @gray;
  1005. }
  1006. }
  1007. }
  1008. }
  1009. }
  1010. .panel-body {
  1011. height: calc(100% - 7.407vh);
  1012. padding: 0.3704vh;
  1013. width: 100%;
  1014. display: flex;
  1015. flex-direction: row;
  1016. flex-wrap: wrap;
  1017. justify-content: space-between;
  1018. justify-content: flex-start;
  1019. .blank {
  1020. margin-right: 5px;
  1021. flex: 1 0 42px;
  1022. }
  1023. .card {
  1024. text-align: center;
  1025. height: 20px;
  1026. line-height: 20px;
  1027. margin-right: 5.2px;
  1028. margin-top: 2px;
  1029. flex: 1 0 120px;
  1030. cursor: pointer;
  1031. }
  1032. .card {
  1033. border-radius: 0.37vh;
  1034. padding: 0.185vh 0.3704vh;
  1035. text-align: center;
  1036. border: 0.093vh solid;
  1037. font-size: 12px;
  1038. &.write {
  1039. color: @black;
  1040. border-color: @write;
  1041. background-color: @write;
  1042. }
  1043. &.green {
  1044. color: @green;
  1045. border-color: @green;
  1046. }
  1047. &.blue {
  1048. color: @darkBlue;
  1049. border-color: @darkBlue;
  1050. }
  1051. &.pink {
  1052. color: @pink;
  1053. border-color: @pink;
  1054. }
  1055. &.red {
  1056. color: @write;
  1057. border-color: @red;
  1058. background-color: @red;
  1059. }
  1060. &.orange {
  1061. color: @orange;
  1062. border-color: @orange;
  1063. }
  1064. &.gray {
  1065. color: @write;
  1066. border-color: @darkgray;
  1067. background-color: @darkgray;
  1068. }
  1069. }
  1070. }
  1071. }
  1072. .curStyle {
  1073. cursor: pointer;
  1074. text-align: center;
  1075. }
  1076. }
  1077. </style>