1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186 |
- <template >
- <el-scrollbar>
- <div
- :class="
- $store.state.themeName === 'dark' ? 'dark-matrix' : 'light-matrix'
- "
- >
- <Row class="panel-2" type="">
- <Col :span="12" class="left-50-16">
- <div class="panel">
- <div class="dot left top"></div>
- <div class="dot left bottom"></div>
- <div class="dot right top"></div>
- <div class="dot right bottom"></div>
- <div class="item">
- <div class="loop"></div>
- <span class="svg-icon svg-icon-gray svg-icon-md">
- <SvgIcon svgid="svg-wind-site"></SvgIcon>
- </span>
- </div>
- <div class="item Add " @click="changeShow('jrfj_FDC')">
- <div class="curStyle">
- <div>接入风机</div>
- <div>{{ sourceMap.fcjrnum || "---" }}</div>
- </div>
- </div>
- <div class="item blue" @click="changeShow('yx_FDC', 1)">
- <div class="curStyle">
- <div>· 运行</div>
- <div>{{ sourceMap.fcyxnum || "---" }}</div>
- </div>
- </div>
- <div class="item green " @click="changeShow('dj_FDC', 0)">
- <div class="curStyle">
- <div>· 待机</div>
- <div>{{ sourceMap.fcdjnum || "---" }}</div>
- </div>
- </div>
- <div class="item pink" @click="changeShow('xd_FDC', 5)">
- <div class="curStyle">
- <div>· 限电</div>
- <div>{{ sourceMap.fcxdnum || "---" }}</div>
- </div>
- </div>
- <div class="item red" @click="changeShow('gz_FDC', 2)">
- <div class="curStyle">
- <div>· 故障</div>
- <div>{{ sourceMap.fcgznum || "---" }}</div>
- </div>
- </div>
- <div class="item orange" @click="changeShow('jx_FDC', 4)">
- <div class="curStyle">
- <div>· 检修</div>
- <div>{{ sourceMap.fcwhnum || "---" }}</div>
- </div>
- </div>
- <div class="item write" @click="changeShow('sl_FDC', 6)">
- <div class="curStyle">
- <div>· 受累</div>
- <div>{{ sourceMap.fcslnum || "---" }}</div>
- </div>
- </div>
- <div class="item gray" @click="changeShow('lx_FDC', 3)">
- <div class="curStyle">
- <div>· 离线</div>
- <div>{{ sourceMap.fclxnum || "---" }}</div>
- </div>
- </div>
- </div>
- </Col>
- <Col :span="12" class="left-50-16">
- <div class="panel">
- <div class="dot left top"></div>
- <div class="dot left bottom"></div>
- <div class="dot right top"></div>
- <div class="dot right bottom"></div>
- <div class="item">
- <div class="loop"></div>
- <span class="svg-icon svg-icon-gray svg-icon-md">
- <SvgIcon
- :svgid="'svg-photovoltaic'"
- style="margin: 3px 0px -3px 1px"
- ></SvgIcon>
- </span>
- </div>
- <div class="item Add " @click="changeShow('jrfj1_GDC')">
- <div class="curStyle">
- <div>逆变器</div>
- <div>{{ sourceMap.gfjrnum || "---" }}</div>
- </div>
- </div>
- <div class="item blue" @click="changeShow('yx1_GDC', 1)">
- <div class="curStyle">
- <div>· 运行</div>
- <div>{{ sourceMap.gfyxnum || "---" }}</div>
- </div>
- </div>
- <div class="item green " @click="changeShow('dj1_GDC', 0)">
- <div class="curStyle">
- <div>· 待机</div>
- <div>{{ sourceMap.gfdjnum || "---" }}</div>
- </div>
- </div>
- <div class="item pink" @click="changeShow('xd1_GDC', 5)">
- <div class="curStyle">
- <div>· 限电</div>
- <div>{{ sourceMap.gfxdnum || "---" }}</div>
- </div>
- </div>
- <div class="item red" @click="changeShow('gz1_GDC', 2)">
- <div class="curStyle">
- <div>· 故障</div>
- <div>{{ sourceMap.gfgznum || "---" }}</div>
- </div>
- </div>
- <div class="item orange" @click="changeShow('jx1_GDC', 4)">
- <div class="curStyle">
- <div>· 检修</div>
- <div>{{ sourceMap.gfwhnum || "---" }}</div>
- </div>
- </div>
- <div class="item write" @click="changeShow('sl1_GDC', 6)">
- <div class="curStyle">
- <div>· 受累</div>
- <div>{{ sourceMap.gfslnum || "---" }}</div>
- </div>
- </div>
- <div class="item gray curStyle" @click="changeShow('lx1_GDC', 3)">
- <div class="curStyle">
- <div>· 离线</div>
- <div>{{ sourceMap.gflxnum || "---" }}</div>
- </div>
- </div>
- </div>
- </Col>
- </Row>
- <div class="panel-box">
- <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
- <div
- class="panel-title"
- v-if="sourceMap.fjmap[pIndex][0].wpId.includes('FDC')"
- >
- <div class="panel-title-name">
- <i class="svg-icon svg-icon-sm svg-icon-green">
- <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
- </i>
- <span>{{
- sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name ||
- "------"
- }}</span>
- <div
- class="sub-title-item"
- v-for="(fcItem, fcIndex) in fcStateArray"
- :key="fcIndex"
- >
- <span class="sub-title">{{ fcItem.text }}</span>
- <span class="sub-count" :class="fcItem.color">{{
- sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][fcItem.key]||'0'
- }}</span>
- </div>
- </div>
- </div>
- <div
- class="panel-title"
- v-if="sourceMap.fjmap[pIndex][0].wpId.includes('GDC')"
- >
- <div class="panel-title-name">
- <i class="svg-icon svg-icon-sm svg-icon-green">
- <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
- </i>
- <span>{{
- sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name ||
- "------"
- }}</span>
- <div
- class="sub-title-item"
- v-for="(fcItem, fcIndex) in fcStateArray1"
- :key="fcIndex"
- >
- <span class="sub-title">{{ fcItem.text }}</span>
- <span class="sub-count" :class="fcItem.color">{{
- sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][fcItem.key]||'0'
- }}</span>
- </div>
- </div>
- </div>
- <div class="panel-body">
- <div
- class="card"
- v-for="(cItem, cIndex) of pItem"
- :key="cIndex"
- v-show="cItem.isShow"
- :class="cItem.color"
- @click="goDetails(cItem)"
- >
- {{ cItem.wtId.substring(cItem.wtId.length - 3) }}
- </div>
- <!-- 站位用 保证卡片布局最后一行不会有问题 -->
- <i class="blank" v-for="i in pItem.length" :key="i"></i>
- <!-- <i class="blank" v-for="i in pItem.length" :key="i"></i> -->
- </div>
- </div>
- </div>
- </div>
- </el-scrollbar>
- <Dialog v-model="detialDisplay" :wpId='stationId' :wtId='windId'></Dialog>
- </template>
- <script>
- import Row from "@/components/coms/grid/row.vue";
- import Col from "@/components/coms/grid/col.vue";
- import SvgIcon from "@com/coms/icon/svg-icon.vue";
- import Dialog from "@/components/dialog/index.vue";
- import api from "@api/cockpit/matrix/index.js";
- import util from "@/helper/util.js";
- import store from "@store/index.js";
- import { isNumber } from "util";
- import { setInterval, clearInterval } from "timers";
- export default {
- // 名称
- name: "LightMatrix1",
- // 使用组件
- components: {
- Row,
- Col,
- SvgIcon,
- Dialog,
- },
- // 数据
- data() {
- return {
- timmer: null, // 计时器
- sourceMap: {}, // 核心数据
- fillCategory: null, // 过滤条件
- fillFjzt: null, // 过滤条件
- detialDisplay: false,
- stationId: '',
- windId: '',
- fcStateArray: [
- {
- text: "接入台数",
- color: "",
- key: "jrts",
- },
- {
- text: "待机台数",
- color: "green",
- key: "djts",
- },
- {
- text: "并网台数",
- color: "blue",
- key: "yxts",
- },
- {
- text: "限电台数",
- color: "pink",
- key: "xdts",
- },
- {
- text: "故障台数",
- color: "red",
- key: "gzts",
- },
- {
- text: "检修台数",
- color: "orange",
- key: "whts",
- },
- {
- text: "受累台数",
- color: "black",
- key: "slts",
- },
- {
- text: "离线台数",
- color: "gray",
- key: "lxts",
- },
- {
- text: "风速",
- color: "gray1",
- key: "ssfs",
- },
- {
- text: "预测功率",
- color: "gray1",
- key: "ycgl",
- },
- {
- text: "保证功率",
- color: "gray1",
- key: "bzgl",
- },
- {
- text: "应发功率",
- color: "gray1",
- key: "yfgl",
- },
- {
- text: "实际功率",
- color: "gray1",
- key: "sjgl",
- },
- {
- text: "AGC指令",
- color: "gray1",
- key: "agcygsd",
- },
- {
- text: "出线功率",
- color: "gray1",
- key: "agccxyg",
- },
- ],
- fcStateArray1: [
- {
- text: "接入台数",
- color: "",
- key: "jrts",
- },
- {
- text: "待机台数",
- color: "green",
- key: "djts",
- },
- {
- text: "并网台数",
- color: "blue",
- key: "yxts",
- },
- {
- text: "限电台数",
- color: "purple",
- key: "xdts",
- },
- {
- text: "故障台数",
- color: "red",
- key: "gzts",
- },
- {
- text: "检修台数",
- color: "orange",
- key: "whts",
- },
- {
- text: "受累台数",
- color: "write",
- key: "slts",
- },
- {
- text: "离线台数",
- color: "gray",
- key: "lxts",
- },
- {
- text: "日照强度",
- color: "gray",
- key: "ssfs",
- },
- {
- text: "预测功率",
- color: "gray",
- key: "ycgl",
- },
- {
- text: "保证功率",
- color: "gray",
- key: "bzgl",
- },
- {
- text: "应发功率",
- color: "gray",
- key: "yfgl",
- },
- {
- text: "实际功率",
- color: "gray",
- key: "sjgl",
- },
- {
- text: "AGC指令",
- color: "gray",
- key: "agcygsd",
- },
- {
- text: "出线功率",
- color: "gray",
- key: "agccxyg",
- },
- ],
- };
- },
- // 函数
- methods: {
- // 根据风机状态码返回对应 class
- getColor(fjzt) {
- switch (fjzt) {
- case 0:
- return "green";
- case 1:
- return "blue";
- case 2:
- return "red";
- case 3:
- return "gray";
- case 4:
- return "orange";
- case 5:
- return "pink";
- case 6:
- return "pink";
- }
- },
- // 切换显示种类
- changeShow(category, fjzt, skipFill) {
- // if (!skipFill) {
- // console.log("!skipFill:", !skipFill);
- // if (this.fillCategory === category) {
- // console.log("fillCategory:", this.fillCategory);
- // console.log("fillFjz:", this.fillFjzt);
- // this.fillCategory = null;
- // this.fillFjzt = null;
- // } else {
- this.fillCategory = category;
- this.fillFjzt = fjzt;
- // }
- // }
- let fjmap = this.BASE.deepCopy(this.sourceMap.fjmap);
- fjmap.forEach((pEle) => {
- console.log("pele:", pEle);
- pEle.forEach((cEle) => {
- console.log("cele:", cEle);
- cEle.isShow = true;
- if (!this.fillCategory) {
- cEle.isShow = true;
- // cEle.isShow=false;
- } else if (cEle.wpId.indexOf(category.split("_")[1]) !== -1) {
- if (isNumber(fjzt)) {
- cEle.fjzt === fjzt ? (cEle.isShow = true) : (cEle.isShow = false);
- } else {
- cEle.isShow = true;
- // cEle.isShow = false;
- }
- } else {
- cEle.isShow = true;
- }
- });
- });
- this.sourceMap.fjmap = fjmap;
- },
- // 请求服务
- requestData(showLoading) {
- api.matrixPush(showLoading).then((res) => {
- if (res) {
- let sourceMap = res.data;
- let fjmap = [];
- for (let key in sourceMap) {
- if (key !== "fczbmap" && key !== "fjmap") {
- sourceMap[key] += "";
- } else if (key === "fjmap") {
- sourceMap[key].forEach((pItem) => {
- pItem.forEach((cItem) => {
- cItem.color = this.getColor(cItem.fjzt);
- cItem.isShow = true;
- });
- });
- }
- }
- this.sourceMap = sourceMap;
- if (this.fillCategory) {
- this.changeShow(this.fillCategory, this.fillFjzt, true);
- }
- } else {
- this.sourceMap = {};
- }
- });
- },
- // 查看风机详情
- goDetails(item) {
- if (item.wpId.indexOf("FDC") !== -1) {
- this.detialDisplay = true
- this.stationId = item.wpId
- this.windId = item.wtId
- // this.$router.push({
- // path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
- // });
- } else {
- this.$router.push({
- path: `windsite/inverter-info/${item.wpId}/${item.wtId}`,
- });
- }
- },
- },
- created() {
- let that = this;
- that.$nextTick(() => {
- that.requestData(true);
- that.timmer = setInterval(() => {
- that.requestData(false);
- }, that.$store.state.websocketTimeSec);
- });
- },
- unmounted() {
- clearInterval(this.timmer);
- this.timmer = null;
- },
- };
- </script>
- <style lang="less" scoped>
- @panelHeight: 6.481vh;
- @titleHeight: 2.7778vh;
- .light-matrix {
- // width: calc(100% - 1.111vh);
- height: calc(100vh - 7.222vh);
- display: flex;
- flex-direction: column;
- .panel-2 {
- .left-50-16 {
- width: calc(50% - 0.741vh);
- }
- }
- .panel {
- width: 100%;
- border: 0.093vh solid @darkgray;
- position: relative;
- padding: 0.7407vh 1.4815vh;
- background-color: fade(@darkgray, 20%);
- display: flex;
- .dot {
- width: 0.185vh;
- height: 0.185vh;
- border-radius: 50%;
- background-color: @write;
- position: absolute;
- &.left {
- left: 0.37vh;
- }
- &.right {
- right: 0.37vh;
- }
- &.top {
- top: 0.37vh;
- }
- &.bottom {
- bottom: 0.37vh;
- }
- }
- .item {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- color: @write;
- position: relative;
- .loop {
- position: absolute;
- width: 4.444vh;
- height: 4.444vh;
- border-radius: 50%;
- border: 0.093vh solid @darkgray;
- background-color: fade(@darkgray, 20);
- left: calc(50% - 2.222vh);
- top: calc(50% - 2.222vh);
- }
- &.write {
- background-color: black;
- // color: @write;
- color: #fff;
- }
- &.Add{
- color: #000 !important;
- font-size: 17px;
- font-weight: 700;
- }
- &.green {
- background-color: #24a13a!important;
- // color: @green;
- color: #fff !important;
- }
- &.blue {
- background-color: #00a5db;
- // color: @darkBlue;
- color: #fff;
- }
- &.pink {
- background-color: #b10e7e;
- // color: @pink;
- color: #fff;
- }
- &.red {
- background-color: #cb2020;
- // color: @red;
- color: #fff;
- }
- &.orange {
- background-color: fade(@orange, 100%);
- // color: @orange;
- color: #fff;
- }
- &.gray {
- background-color: #929ca3;
- color: #fff !important;
- }
- div {
- line-height: 2.222vh;
- &:first-child {
- font-size: @fontsize-s;
- }
- &:last-child {
- font-size: @fontsize;
- // font-family: "Bicubik";
- }
- }
- }
- .item2 {
- flex: 1;
- display: flex;
- width: 20%;
- flex-wrap: wrap;
- .name {
- color: @gray;
- width: 50%;
- text-align: center;
- }
- .num2 {
- width: 50%;
- color: @yellow;
- text-align: left;
- }
- .num1 {
- width: 50%;
- color: @yellow;
- text-align: center;
- position: relative;
- &::after {
- content: "";
- position: absolute;
- width: 1.481vh;
- height: 0.556vh;
- background-color: @yellow;
- left: 1.204vh;
- top: 0.741vh;
- }
- }
- .num3 {
- width: 50%;
- color: @yellow;
- text-align: left;
- }
- }
- }
- .panel-box {
- margin-top: 0.7407vh;
- flex-grow: 1;
- .panel-title {
- width: 100%;
- line-height: @titleHeight;
- background-color: fade(@darkgray, 40%);
- .panel-title-name {
- width: 99%;
- font-size: 14px;
- color: @green;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- padding-left: 16px;
- i {
- margin-right: 0.7407vh;
- }
- .sub-title-item {
- display: flex;
- flex: 1;
- .sub-title {
- flex: 0 0 auto;
- color: #000000;
- font-size: 14px;
- margin: 0 0.556vh 0 1.481vh;
- font-weight: bold;
- }
- .sub-count {
- flex: 1 0 auto;
- font-size: 14px;
- // font-family: "Bicubik";
- font-weight: 500!important;
- &.black {
- color: #ffffff!important;
- background-color: black;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- &.black1 {
- color: black;
- display: flex;
- align-items: center;
- font-weight: 800;
- }
- &.green {
- color: @green;
- color: #ffffff !important;
- background-color: #24a13a;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- &.blue {
- color: @darkBlue;
- color: #ffffff;
- background-color: #00a5db;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- &.pink {
- color: #ffffff;
- background-color: #b10e7e;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- &.red {
- color: @red;
- color: #ffffff;
- background-color: #cb2020;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- &.orange {
- color: @orange;
- color: #ffffff;
- background-color: #ff7800;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- &.gray1 {
- color: #000 !important;
- font-weight: 800;
- display: flex;
- align-items: center!important;
- justify-content: center!important;
- }
- &.gray {
- color: #fff !important;
- background-color: #929ca3;
- display: flex;
- align-items: center!important;
- justify-content: center!important;
- }
- }
- }
- }
- }
- .panel-body {
- height: calc(100% - 7.407vh);
- padding: 0.3704vh;
- width: 100%;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-between;
- justify-content: flex-start;
- .blank {
- margin-right:100px;
- flex: 1 0 42px;
- }
- .card {
- text-align: center;
- height: 20px;
- line-height: 20px;
- margin-right: 2px;
- margin-top: 2px;
- flex: 1 0 140px;
- cursor: pointer;
- }
- .card {
- border-radius: 0.37vh;
- padding: 0.185vh 0.3704vh;
- text-align: center;
- border: 0.093vh solid;
- font-size: 12px;
- &.write {
- color: @black;
- border-color: @write;
- background-color: @write;
- }
- &.green {
- border-color: @green;
- color: #ffffff !important;
- background-color: #24a13a;
- }
- &.blue {
- color: #ffffff;
- background-color: #00a5db;
- border-color: @darkBlue;
- }
- &.pink {
- color: #ffffff;
- background-color: #b10e7e;
- border-color: @pink;
- }
- &.red {
- color: @write;
- border-color: @red;
- background-color: @red;
- }
- &.orange {
- color: #ffffff;
- background-color: #ff7800;
- border-color: @orange;
- }
- &.gray {
- color: #fff !important;
- background-color: #929ca3;
- border-color: @darkgray;
- }
- }
- }
- }
- .curStyle {
- cursor: pointer;
- text-align: center;
- }
- }
- // ---------------------------------------------------------------------------
- .dark-matrix {
- // width: calc(100% - 1.111vh);
- height: calc(100vh - 7.222vh);
- display: flex;
- flex-direction: column;
- .panel-2 {
- .left-50-16 {
- width: calc(50% - 0.741vh);
- }
- }
- .panel {
- width: 100%;
- border: 0.093vh solid @darkgray;
- position: relative;
- padding: 0.7407vh 1.4815vh;
- background-color: fade(@darkgray, 20%);
- display: flex;
- .dot {
- width: 0.185vh;
- height: 0.185vh;
- border-radius: 50%;
- background-color: @write;
- position: absolute;
- &.left {
- left: 0.37vh;
- }
- &.right {
- right: 0.37vh;
- }
- &.top {
- top: 0.37vh;
- }
- &.bottom {
- bottom: 0.37vh;
- }
- }
- .item {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- color: @write;
- position: relative;
- .loop {
- position: absolute;
- width: 4.444vh;
- height: 4.444vh;
- border-radius: 50%;
- border: 0.093vh solid @darkgray;
- background-color: fade(@darkgray, 20);
- left: calc(50% - 2.222vh);
- top: calc(50% - 2.222vh);
- }
- &.write {
- color: @write;
- }
- &.green {
- color: @green;
- }
- &.blue {
- color: @darkBlue;
- }
- &.pink {
- color: @pink;
- }
- &.red {
- color: @red;
- }
- &.orange {
- color: @orange;
- }
- &.gray {
- color: @gray;
- }
- div {
- line-height: 2.222vh;
- &:first-child {
- font-size: @fontsize-s;
- }
- &:last-child {
- font-size: @fontsize;
- font-family: "Bicubik";
- }
- }
- }
- .item2 {
- flex: 1;
- display: flex;
- width: 20%;
- flex-wrap: wrap;
- .name {
- color: @gray;
- width: 50%;
- text-align: center;
- }
- .num2 {
- width: 50%;
- color: @yellow;
- text-align: left;
- }
- .num1 {
- width: 50%;
- color: @yellow;
- text-align: center;
- position: relative;
- &::after {
- content: "";
- position: absolute;
- width: 1.481vh;
- height: 0.556vh;
- background-color: @yellow;
- left: 1.204vh;
- top: 0.741vh;
- }
- }
- .num3 {
- width: 50%;
- color: @yellow;
- text-align: left;
- }
- }
- }
- .panel-box {
- margin-top: 0.7407vh;
- flex-grow: 1;
- .panel-title {
- width: 100%;
- height: @titleHeight;
- line-height: @titleHeight;
- background-color: fade(@darkgray, 40%);
- .panel-title-name {
- font-size: @fontsize-s;
- color: @green;
- display: flex;
- align-items: center;
- padding: 0 16px;
- i {
- margin-right: 0.7407vh;
- }
- .sub-title-item {
- display: flex;
- flex: 1;
- justify-content: center;
- .sub-title {
- flex: 0 0 auto;
- color: @gray;
- font-size: 12px;
- margin: 0 0.556vh 0 1.481vh;
- }
- .sub-count {
- flex: 1 0 auto;
- font-size: 14px;
- font-family: "Bicubik";
- font-weight: 500;
- &.write {
- color: @write;
- }
- &.green {
- color: @green;
- }
- &.blue {
- color: @darkBlue;
- }
- &.pink {
- color: @pink;
- }
- &.red {
- color: @red;
- }
- &.orange {
- color: @orange;
- }
- &.gray {
- color: @gray;
- }
- }
- }
- }
- }
- .panel-body {
- height: calc(100% - 7.407vh);
- padding: 0.3704vh;
- width: 100%;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-between;
- justify-content: flex-start;
- .blank {
- margin-right: 5px;
- flex: 1 0 42px;
- }
- .card {
- text-align: center;
- height: 20px;
- line-height: 20px;
- margin-right: 5.2px;
- margin-top: 2px;
- flex: 1 0 120px;
- cursor: pointer;
- }
- .card {
- border-radius: 0.37vh;
- padding: 0.185vh 0.3704vh;
- text-align: center;
- border: 0.093vh solid;
- font-size: 12px;
- &.write {
- color: @black;
- border-color: @write;
- background-color: @write;
- }
- &.green {
- color: @green;
- border-color: @green;
- }
- &.blue {
- color: @darkBlue;
- border-color: @darkBlue;
- }
- &.pink {
- color: @pink;
- border-color: @pink;
- }
- &.red {
- color: @write;
- border-color: @red;
- background-color: @red;
- }
- &.orange {
- color: @orange;
- border-color: @orange;
- }
- &.gray {
- color: @write;
- border-color: @darkgray;
- background-color: @darkgray;
- }
- }
- }
- }
- .curStyle {
- cursor: pointer;
- text-align: center;
- }
- }
- </style>
|