jn_sis_zhfx/src/views/LightMatrix1/LightMatrix1.vue

<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">
              <!-- @click="handleClick()" -->
              <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 green" @click="changeShow('yx_FDC', 1)">
              <div class="curStyle">
                <div>· 运行(台)</div>
                <div>{{ sourceMap.fcyxnum || "---" }}</div>
              </div>
            </div>
            <div class="item blue" @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 green" @click="changeShow('yx1_GDC', 1)">
              <div class="curStyle">
                <div>· 运行(台)</div>
                <div>{{ sourceMap.gfyxnum || "---" }}</div>
              </div>
            </div>
            <div class="item blue" @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">
        <!-- <box-select node=".card" @selectList="selectList"> -->
        <div
          v-for="(pItem, pIndex) in sourceMap.fjmap"
          :key="pIndex"
          style="margin-bottom: 10px"
        >
          <div
            class="panel-title"
            v-if="sourceMap.fjmap[pIndex][0].wpId.includes('FDC')"
            :style="
              $store.state.themeName === 'light'
                ? 'background-color: #ffffff;border-bottom: 1px solid #B3BDC0;height: 28px;border-top-right-radius: 10px; border-top-left-radius: 10px;'
                : ''
            "
          >
            <div class="panel-title-name">
              <i class="svg-icon svg-icon-sm svg-icon-green">
                <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
              </i>
              <div>
                {{
                  sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name ||
                  "------"
                }}
              </div>
              <div
                class="sub-title-item"
                v-for="(fcItem, fcIndex) in fcStateArray"
                :key="fcIndex"
              >
                <div class="sub-title">{{ fcItem.text }}</div>
                <div
                  v-if="fcItem.key === 'sjgl'"
                  class="sub-count"
                  :class="fcItem.color"
                >
                  {{
                    (
                      sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
                        fcItem.key
                      ] / 1000
                    ).toFixed(2) || "0"
                  }}
                </div>
                <div v-else class="sub-count" :class="fcItem.color">
                  {{
                    sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
                      fcItem.key
                    ].toFixed(``) || "0"
                  }}
                </div>
              </div>
            </div>
          </div>
          <div
            class="panel-title"
            v-if="sourceMap.fjmap[pIndex][0].wpId.includes('GDC')"
            :style="
              $store.state.themeName === 'light'
                ? 'background-color: #ffffff;border-bottom: 1px solid #B3BDC0;height: 36px;display: flex; border-top-right-radius: 10px; border-top-left-radius: 10px;'
                : ''
            "
          >
            <div class="panel-title-name">
              <i class="svg-icon svg-icon-sm svg-icon-green">
                <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
              </i>
              <div>
                {{
                  sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name ||
                  "------"
                }}
              </div>
              <div
                class="sub-title-item"
                v-for="(fcItem, fcIndex) in fcStateArray1"
                :key="fcIndex"
              >
                <div class="sub-title">{{ fcItem.text }}</div>
                <div class="sub-count" :class="fcItem.color">
                  {{
                    (
                      sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
                        fcItem.key
                      ] / 1000
                    ).toFixed(2) || "0"
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="panel-body">
            <div
              class="card"
              v-for="(cItem, cIndex) of pItem"
              :key="cIndex"
              v-show="cItem.isShow"
              :class="cItem.active ? `on_${cItem.color}` : cItem.color"
              :id="cItem.wtId"
              @click="goDetails(cItem)"
            >
              <!-- @dblclick="goDetails(cItem)"
                  @click="handleChoose(cItem.wtId)" -->
              {{ cItem.wtId.substring(cItem.wtId.length - 3) }}
            </div>
            <!-- </div> -->
            <!-- 站位用 保证卡片布局最后一行不会有问题 -->
            <i class="blank" v-for="i in 40" :key="i"></i>
          </div>
        </div>
        <!-- </box-select> -->
      </div>
    </div>
  </el-scrollbar>
  <Dialog v-model="detialDisplay" :wpId="stationId" :wtId="windId"></Dialog>
  <!-- <GFDialog v-model="gfdetialDisplay" :wtId="windId"></GFDialog> -->
  <Contrast v-model="contrastDisplay" ref="contrast" />
</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 GFDialog from "@/components/dialog/gfIndex.vue";
import Contrast from "./components/contrast.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";
import boxSelect from "@/components/utils/boxSelect.vue";
export default {
  // 名称
  name: "LightMatrix1",
  // 使用组件
  components: {
    Row,
    Col,
    SvgIcon,
    Dialog,
    GFDialog,
    boxSelect,
    Contrast,
  },

  // 数据
  data() {
    return {
      timmer: null, // 计时器
      sourceMap: {}, // 核心数据
      fillCategory: null, // 过滤条件
      fillFjzt: null, // 过滤条件
      detialDisplay: false,
      gfdetialDisplay: false,
      stationId: "",
      windId: "",
      contrastDisplay: false,
      fcStateArray: [
        {
          text: "接入台数(台)",
          color: "",
          key: "jrts",
        },
        {
          text: "待机台数(台)",
          color: "blue",
          key: "djts",
        },
        {
          text: "并网台数(台)",
          color: "green",
          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: "风速(m/s)",
          color: "gray1",
          key: "ssfs",
        },
        // {
        //   text: "预测功率",
        //   color: "gray1",
        //   key: "ycgl",
        // },
        {
          text: "保证功率(MW)",
          color: "gray1",
          key: "bzgl",
        },
        {
          text: "应发功率(MW)",
          color: "gray1",
          key: "yfgl",
        },
        {
          text: "实际功率(MW)",
          color: "gray1",
          key: "sjgl",
        },
        {
          text: "AGC指令(MW)",
          color: "gray1",
          key: "agcygsd",
        },
        {
          text: "出线功率(MW)",
          color: "gray1",
          key: "agccxyg",
        },
      ],
      fcStateArray1: [
        {
          text: "接入台数(台)",
          color: "",
          key: "jrts",
        },
        {
          text: "待机台数(台)",
          color: "blue",
          key: "djts",
        },
        {
          text: "并网台数(台)",
          color: "green",
          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: "日照强度W/㎡",
          color: "gray",
          key: "ssfs",
        },
        // {
        //   text: "预测功率",
        //   color: "gray",
        //   key: "ycgl",
        // },
        {
          text: "保证功率(MW)",
          color: "gray",
          key: "bzgl",
        },
        {
          text: "应发功率(MW)",
          color: "gray",
          key: "yfgl",
        },
        {
          text: "实际功率(MW)",
          color: "gray",
          key: "sjgl",
        },
        {
          text: "AGC指令(MW)",
          color: "gray",
          key: "agcygsd",
        },
        {
          text: "出线功率(MV)",
          color: "gray",
          key: "agccxyg",
        },
      ],
      chooseList: [],
    };
  },

  // 函数
  methods: {
    // 根据风机状态码返回对应 class
    getColor(fjzt) {
      switch (fjzt) {
        case 0:
          return "blue";
        case 1:
          return "green";
        case 2:
          return "red";
        case 3:
          return "gray";
        case 4:
          return "orange";
        case 5:
          return "pink";
        case 6:
          return "write";
      }
    },

    // 切换显示种类
    changeShow(category, fjzt, skipFill) {
      // if (!skipFill) {
      //   if (this.fillCategory === category) {
      //     this.fillCategory = null;
      //     this.fillFjzt = null;
      //   } else {
      this.fillCategory = category;
      this.fillFjzt = fjzt;
      //   }
      // }

      let fjmap = this.BASE.deepCopy(this.sourceMap.fjmap);

      fjmap.forEach((pEle) => {
        pEle.forEach((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;
                  cItem.active = false;
                  cItem.active = this.chooseList.filter(
                    (val) => val.wtId === cItem.wtId
                  )[0]
                    ? true
                    : false;
                });
              });
            }
          }
          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;
      } else {
        // this.gfdetialDisplay = true
        // this.windId = item.wtId;
      }
    },
    selectList(val) {
      val.forEach((item) => {
        this.handleChoose(item.id);
      });
    },
    handleChoose(value) {
      this.sourceMap.fjmap.forEach((val) => {
        val.forEach((item) => {
          if (item.wtId === value) {
            if (item.active) {
              let showIndex = null;
              this.chooseList.forEach((res, index) => {
                if (res.wtId === item.wtId) {
                  showIndex = index;
                }
              });
              this.chooseList.splice(showIndex, 1);
            } else {
              this.chooseList.push(item);
            }
            item.active = !item.active;
          }
        });
      });
    },
    handleClick() {
      this.contrastDisplay = true;
      this.$refs.contrast.handleSearch(this.chooseList);
    },
  },

  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);
      }

      &.Add {
        color: #0d1e1c;
        font-weight: 700;
      }

      &.write {
        color: #0d1e1c;
      }

      &.green {
        color: @green;
      }

      &.blue {
        color: @darkBlue;
      }

      &.pink {
        color: @pink;
      }

      &.red {
        color: @red;
      }

      &.orange {
        color: @orange;
      }

      &.gray {
        color: @gray !important;
        font-weight: 500 !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: 1.481vh;
    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;
          align-items: center;
          margin-left: 1px;

          .sub-title {
            flex: 0 0 auto;
            color: @gray;
            font-size: 12px;
            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;

            &.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: 2px;
        flex: 1 0 40px;
      }

      .card {
        margin-right: 2px;
        margin-top: 2px;
        flex: 1 0 40px;
        cursor: pointer;
      }

      .card {
        border-radius: 0.37vh;
        padding: 0.185vh 0.3704vh;
        text-align: center;
        border: 0.093vh solid;
        font-size: 12px;

        &.write {
          color: @write;
          border-color: @black;
          background-color: @black;
        }

        &.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;
  user-seletct: none;

  -webkit-user-seletct: none;

  -moz-user-seletct: none;

  -ms-user-seletct: none;

  .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;
          margin-left: 1px;

          .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;
            }

            &.black {
              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: 2px;
        flex: 1 0 40px;
      }

      .card {
        margin-right: 2px;
        margin-top: 2px;
        flex: 1 0 40px;
        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>